*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scrollbar-gutter: stable; }

/* Minimal native scrollbar, refined visibility */
html {
  scrollbar-width: thin;
  scrollbar-color: rgba(245,247,250,0.42) #0A0D11;
}

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #0A0D11;
}

::-webkit-scrollbar-thumb {
  background: rgba(245,247,250,0.42);
  border-radius: 999px;
  border: 2px solid #0A0D11;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(0,200,240,0.72);
}

body {
  font-family: 'Inter', sans-serif;
  font-size: 15px; line-height: 1.6;
  overflow-x: hidden; -webkit-font-smoothing: antialiased;
  background: #0A0D11;
}

/* Scroll progress bar */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 2px; z-index: 101;
  background: var(--blue);
  width: 0%; transition: none;
  pointer-events: none;
}

/* ── TOKENS ── */
:root {
  --blue: #00C8F0;
  --blue-dim: rgba(0,200,240,0.12);
  --dark: #0A0D11;
  --dark-2: #0F1318;
  --dark-3: #11151B;
  --light: #FAFBFC;
  --light-2: #F3F4F6;
  --text-primary-dark: #F5F7FA;
  --text-secondary-dark: #A0A8B4;
  --text-muted-dark: #5A6270;
  --text-primary-light: #111419;
  --text-secondary-light: #6B7280;
  --border-dark: rgba(255,255,255,0.07);
  --border-light: #E5E7EB;
  --nav-h: 72px;
}

/* ── TYPE FAMILIES ── */
h1, h2, .cta-title, .visual-title, .logo-text, .course-title { font-family: 'League Spartan', 'Inter', sans-serif; }

/* ── SMOOTH SCROLL LAYER ── */
.smooth-content { will-change: transform; }

/* ══════════════════════════════
   NAV
══════════════════════════════ */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 48px; height: var(--nav-h);
  background: rgba(10,13,17,0.88);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-dark);
}
.logo-wrap {
  display: flex; align-items: center; gap: 12px;
  text-decoration: none; color: var(--text-primary-dark);
}
.logo-img { width: 40px; height: 40px; display: block; position: relative; top: -3px; transform: scale(1.1); transform-origin: center; }
.logo-img svg { width: 100%; height: 100%; display: block; }
.footer-left { display: flex; align-items: center; gap: 10px; }
.footer-logo-img { width: 20px; height: 20px; display: block; opacity: 0.5; }
.footer-logo-img svg { width: 100%; height: 100%; display: block; } 
.logo-text { font-weight: 800; font-size: 20px; letter-spacing: 0.01em; text-transform: uppercase; color: var(--text-primary-dark); line-height: 1; }
.logo-text span { color: var(--text-secondary-dark); font-weight: 400; }

.nav-links {
  position: absolute; left: 50%; transform: translateX(-50%);
  display: flex; gap: 40px;
}
.nav-links a,
.nav-links button {
  position: relative; display: inline-block;
  height: 1.1em; overflow: hidden;
  font-size: 14px; color: var(--text-secondary-dark);
  text-decoration: none; font-weight: 500; line-height: 1.1;
  letter-spacing: 0.02em;
  font-family: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.nav-link-text { display: flex; flex-direction: column; transform: translateY(0); transition: transform 0.26s ease; }
.nav-link-text span { display: block; line-height: 1.1; }
.nav-link-text span:last-child { color: var(--text-primary-dark); }
.nav-links a:hover .nav-link-text,
.nav-links a.is-active .nav-link-text,
.nav-links button:hover .nav-link-text,
.nav-links button.is-active .nav-link-text { transform: translateY(-1.1em); }
.nav-lab-trigger { opacity: 0.72; }
.nav-lab-trigger:hover,
.nav-lab-trigger.is-active { opacity: 1; color: var(--text-primary-dark); }
.mobile-lab-cta {
  display: none;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary-dark);
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
}
.mobile-lab-cta:hover,
.mobile-lab-cta.is-active {
  border-color: var(--blue);
  color: var(--blue);
}

.nav-right { display: flex; align-items: center; gap: 16px; }
.social-icon {
  width: 32px;
  height: 32px;
  display: inline-block;
  color: var(--text-secondary-dark);
  text-decoration: none;
  overflow: hidden;
  line-height: 0;
}
.social-icon-stack {
  width: 32px;
  display: flex;
  flex-direction: column;
  transform: translateY(0);
  transition: transform 0.26s ease;
}
.social-icon-face {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary-dark);
  transition: opacity 0.18s ease;
}
.social-icon-face + .social-icon-face {
  /* Stronger overlap because the SVG drawings have internal viewBox whitespace. */
  margin-top: -18px;
}
.social-icon-face:last-child {
  color: var(--text-primary-dark);
  opacity: 0;
}
.social-icon svg {
  width: 20px;
  height: 20px;
  display: block;
}
.social-icon:hover .social-icon-stack {
  transform: translateY(-14px);
}
.social-icon:hover .social-icon-face:first-child {
  opacity: 0;
}
.social-icon:hover .social-icon-face:last-child {
  opacity: 1;
}

.mobile-nav-cta {
  display: none;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 999px;
  color: var(--text-primary-dark);
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  transition: all 0.2s;
}
.mobile-nav-cta:hover { border-color: var(--blue); color: var(--blue); }

.student-login {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 14px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  color: var(--text-secondary-dark);
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  transition: all 0.2s;
}
.student-login:hover {
  color: var(--dark);
  background: var(--blue);
  border-color: var(--blue);
  box-shadow: 0 8px 20px rgba(0,200,240,0.18);
}

/* HUD switch language toggle */
.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  background: rgba(15,19,24,0.60);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 6px 18px rgba(0,0,0,0.16);
}

.lang-option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 31px;
  height: 24px;
  border: 0;
  border-radius: 999px;
  padding: 0 8px;
  background: transparent;
  color: var(--text-muted-dark);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
  text-decoration: none;
  cursor: default;
  transition:
    color 0.26s cubic-bezier(0.85, 0, 0.15, 1),
    background 0.26s cubic-bezier(0.85, 0, 0.15, 1),
    box-shadow 0.26s cubic-bezier(0.85, 0, 0.15, 1);
}

.lang-option.is-active {
  color: var(--text-primary-dark);
  background: var(--dark-2);
  box-shadow:
    0 2px 8px rgba(0,0,0,0.40),
    inset 0 1px 0 rgba(255,255,255,0.05);
}

.lang-option:not(.is-active):hover {
  color: var(--blue);
}

/* ══════════════════════════════
   BUTTONS
══════════════════════════════ */
.btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 26px; background: var(--blue); color: var(--dark);
  font-size: 13px; font-weight: 700; border-radius: 6px;
  border: none; cursor: pointer; transition: all 0.2s; text-decoration: none; white-space: nowrap;
}
.btn-primary:hover { background: #1ad2f5; transform: translateY(-1px); box-shadow: 0 8px 24px rgba(0,200,240,0.25); }
.btn-secondary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 26px; background: transparent; color: var(--text-primary-dark);
  font-size: 13px; font-weight: 500;
  border: 1px solid rgba(255,255,255,0.14); border-radius: 6px;
  cursor: pointer; transition: all 0.2s; text-decoration: none;
}
.btn-secondary:hover { border-color: rgba(255,255,255,0.4); background: rgba(255,255,255,0.04); }

/* Capsule black/blue */
.btn-capsule {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px; background: #111419; color: var(--text-primary-dark);
  font-size: 12px; font-weight: 700; border-radius: 999px;
  border: none; cursor: pointer; text-decoration: none;
  position: relative; overflow: hidden; isolation: isolate;
  transition: transform 0.25s, box-shadow 0.25s, color 0.25s;
  box-shadow: 0 4px 14px rgba(0,0,0,0.2);
  white-space: nowrap;
}
.btn-capsule::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(135deg, #00C8F0 0%, #36D6FF 60%, #8EE9FF 100%);
  opacity: 0; transition: opacity 0.4s;
}
.btn-capsule span, .btn-capsule svg { position: relative; z-index: 1; }
.btn-capsule:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(0,184,230,0.2); background-color: var(--blue); color: #F5F7FA; }
.btn-capsule:hover::before { opacity: 1; }
.btn-capsule.is-disabled {
  background: var(--light-2); color: #9CA3AF;
  box-shadow: none; pointer-events: none;
}
.btn-capsule.is-disabled::before { display: none; }

/* Large capsule */
.btn-capsule-lg {
  padding: 15px 32px; font-size: 14px;
}

/* Visual CTA */
.btn-visual {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 30px; background: var(--text-primary-dark); color: var(--dark);
  font-size: 14px; font-weight: 700; border-radius: 999px;
  border: none; cursor: pointer; text-decoration: none;
  transition: all 0.25s; white-space: nowrap;
}
.btn-visual:hover { background: var(--blue); color: var(--dark); transform: translateY(-1px); box-shadow: 0 10px 28px rgba(0,184,230,0.22); }

/* ══════════════════════════════
   SECTION COMMONS
══════════════════════════════ */
section { padding: 96px 48px; position: relative; }
.section-inner { max-width: 1240px; margin: 0 auto; }
.section-head { margin-bottom: 52px; }
.section-label {
  display: inline-block; font-size: 10px; letter-spacing: 0.14em;
  margin-bottom: 14px; text-transform: uppercase; font-weight: 600;
}
.dark-section .section-label { color: var(--blue); }
.light-section .section-label { color: #0099BF; }
h2.section-title {
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 900; line-height: 0.96; letter-spacing: -0.055em;
}
.light-section h2.section-title { color: var(--text-primary-light); }
.dark-section h2.section-title { color: var(--text-primary-dark); }
.dim { color: var(--text-secondary-light); }
.dark-section .dim { color: var(--text-secondary-dark); }
.section-desc { max-width: 520px; margin-top: 18px; font-size: 15px; line-height: 1.65; }
.light-section .section-desc { color: var(--text-secondary-light); }
.dark-section .section-desc { color: var(--text-secondary-dark); }

/* DARK / LIGHT */
.dark-section { background: var(--dark); color: var(--text-primary-dark); }
.light-section { background: var(--light); color: var(--text-primary-light); }

/* ── PERFORMANCE HINTS ── */
/* Disabled content-visibility here because this page uses a fixed .smooth-content
   smooth-scroll layer. The previous content-visibility sizing could overestimate
   the document height and create empty space below the footer. */


/* FADE-IN ANIMATION */
.reveal {
  opacity: 0; transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.in-view { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }
.reveal-delay-4 { transition-delay: 0.32s; }

/* ══════════════════════════════
   HERO
══════════════════════════════ */
.hero {
  min-height: 100vh; padding: calc(var(--nav-h) + 72px) 48px 80px;
  display: flex; align-items: center; position: relative; overflow: hidden;
  background: var(--dark);
}
.hero-bg {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 65% 55% at 78% 38%, rgba(0,200,240,0.09) 0%, transparent 60%),
    radial-gradient(ellipse 45% 35% at 18% 78%, rgba(0,200,240,0.05) 0%, transparent 60%);
}
/* Subtle grid */

.hero-content {
  position: relative; z-index: 2;
  max-width: 1240px; margin: 0 auto; width: 100%;
  display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center;
}

.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px; border: 1px solid rgba(255,255,255,0.1);
  border-radius: 100px; font-size: 11px; letter-spacing: 0.07em;
  color: var(--text-secondary-dark); margin-bottom: 28px;
}
.hero-badge .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--blue); box-shadow: 0 0 10px var(--blue);
  flex-shrink: 0;
}

h1.hero-title {
  font-size: clamp(44px, 5.6vw, 80px);
  font-weight: 900; line-height: 0.93; letter-spacing: -0.055em;
  color: var(--text-primary-dark); text-transform: uppercase; margin-bottom: 16px;
}
.accent-text { color: var(--blue); }

.hero-sub {
  font-size: 16px; color: var(--text-secondary-dark);
  max-width: 480px; line-height: 1.65; margin-bottom: 36px;
}
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 44px; }

.hero-trust {
  display: flex; gap: 0; flex-wrap: wrap; border-top: 1px solid var(--border-dark); padding-top: 24px;
}
.trust-item {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; color: var(--text-muted-dark);
  padding-right: 24px; margin-right: 24px;
  border-right: 1px solid var(--border-dark);
  letter-spacing: 0.03em;
}
.trust-item:last-child { border-right: none; margin-right: 0; padding-right: 0; }
.trust-item::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 1px;
  background: var(--blue);
  flex-shrink: 0;
  transform: skewX(-22deg);
  box-shadow: 0 0 8px rgba(0,200,240,0.35);
}

/* Hero visual panel */
.hero-visual {
  position: relative;
}
.hero-video-wrap {
  border-radius: 12px; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.09);
  background: var(--dark-3);
  aspect-ratio: 16 / 9; width: 100%;
  position: relative;
}
/* Architectural grid placeholder */
.hero-video-inner {
  width: 100%; height: 100%; position: relative;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.hero-vid-grid {
  position: absolute; inset: 0; opacity: 0.06;
  background-image:
    linear-gradient(var(--text-primary-dark) 1px, transparent 1px),
    linear-gradient(90deg, var(--text-primary-dark) 1px, transparent 1px);
  background-size: 48px 48px;
}
.hero-vid-lines {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, transparent 40%, rgba(0,200,240,0.04) 50%, transparent 60%);
}
.hero-vid-accent {
  position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--blue) 30%, rgba(0,200,240,0.3) 70%, transparent 100%);
}
.video-center {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.video-play-btn {
  width: 64px; height: 64px; border-radius: 50%;
  border: 1px solid rgba(0,200,240,0.35);
  display: flex; align-items: center; justify-content: center;
  color: var(--blue); transition: all 0.3s; cursor: pointer;
  background: rgba(0,200,240,0.07);
  padding: 0; font: inherit;
}
.video-play-btn:hover { border-color: var(--blue); background: rgba(0,200,240,0.14); transform: scale(1.08); }
.video-label { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted-dark); }

/* corner chrome */
.vid-chrome { position: absolute; top: 12px; left: 12px; display: flex; gap: 5px; }
.vid-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.1); }
.vid-dot.active { background: var(--blue); box-shadow: 0 0 7px var(--blue); }

/* scroll indicator */
.scroll-indicator {
  position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: var(--text-muted-dark); z-index: 2; pointer-events: none;
  animation: scrollBob 2.6s ease-in-out infinite;
  transition: opacity 0.8s ease;
}
.scroll-indicator.is-hidden { opacity: 0; }
.scroll-text { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: #3A4050; }
@keyframes scrollBob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(5px); }
}

/* ══════════════════════════════
   STATS STRIP
══════════════════════════════ */
.stats-strip {
  background: var(--dark-2);
  border-top: 1px solid var(--border-dark);
  border-bottom: 1px solid var(--border-dark);
  padding: 0 48px;
}
.stats-inner {
  max-width: 1240px; margin: 0 auto;
  display: flex; align-items: stretch;
}
.stat-item {
  flex: 1; padding: 28px 0;
  display: flex; flex-direction: column; gap: 4px;
  border-right: 1px solid var(--border-dark);
  padding-left: 40px;
}
.stat-item:first-child { padding-left: 0; }
.stat-item:last-child { border-right: none; }
.stat-num {
  font-family: 'League Spartan', 'Inter', sans-serif;
  font-size: 28px; font-weight: 900; color: var(--text-primary-dark);
  letter-spacing: -0.04em; line-height: 1;
}
.stat-num span { color: var(--blue); }
.stat-label { font-size: 11px; color: var(--text-muted-dark); letter-spacing: 0.06em; text-transform: uppercase; }

/* ══════════════════════════════
   COURSES
══════════════════════════════ */
.tool-group { margin-bottom: 56px; }
.tool-group:last-child { margin-bottom: 0; }
.tool-group-header {
  display: flex; align-items: center; gap: 16px; margin-bottom: 18px;
  padding-bottom: 16px; border-bottom: 1px solid var(--border-light);
}
.tool-group-label {
  font-family: 'League Spartan', sans-serif;
  font-size: 13px; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-primary-light);
}
.tool-group-pill {
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 4px; font-weight: 600;
  background: var(--light-2); color: var(--text-secondary-light);
}
.tool-group-pill.available { background: rgba(0,200,240,0.1); color: #0099BF; }

.tool-group-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: -8px 0 24px;
}
.tool-value-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border: 1px solid var(--border-light);
  border-radius: 999px;
  background: #fff;
  color: var(--text-secondary-light);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
}
.tool-value-pill::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 1px;
  background: var(--blue);
  flex-shrink: 0;
  transform: skewX(-22deg);
  box-shadow: 0 0 8px rgba(0,200,240,0.25);
}
.tool-value-pill.primary {
  border-color: rgba(0,200,240,0.24);
  background: rgba(0,200,240,0.08);
  color: #007C99;
}

.courses-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

/* Coming-soon row: two-column inside light-opacity container */
.courses-grid-soon {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
  opacity: 0.78;
}

.course-card {
  background: #fff; border: 1px solid var(--border-light);
  border-radius: 10px; overflow: hidden; transition: all 0.28s; cursor: default;
}
.course-card:hover { border-color: var(--blue); transform: translateY(-3px); box-shadow: 0 10px 32px rgba(0,0,0,0.07); }
.courses-grid-soon .course-card:hover { transform: none; border-color: var(--border-light); box-shadow: none; }

.course-thumb {
  height: 188px; background: var(--dark-3);
  border-bottom: 1px solid var(--border-light);
  position: relative; display: flex; align-items: center; justify-content: center;
  overflow: hidden; text-decoration: none; color: inherit; cursor: pointer;
}

.course-thumb-hover-overlay {
  position: absolute; inset: 0;
  background: radial-gradient(circle at center, rgba(0,200,240,0.1) 0%, transparent 60%);
  opacity: 0; transition: opacity 0.28s;
}
.course-thumb:hover .course-thumb-hover-overlay { opacity: 1; }

.course-logo {
  position: absolute; top: 12px; left: 12px;
  width: 52px; height: 52px; z-index: 2;
  filter: drop-shadow(0 4px 16px rgba(0,0,0,0.3));
}
.course-logo svg, .course-logo img { width: 100%; height: 100%; display: block; overflow: visible; object-fit: contain; }
.comfy-logo svg, .d5-logo svg { width: 100%; height: 100%; display: block; }
.d5-logo svg { width: 100%; height: 100%; display: block; }

.course-badge-pill {
  position: absolute; top: 12px; right: 12px;
  font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase;
  background: rgba(10,13,17,0.85); backdrop-filter: blur(8px);
  padding: 3px 8px; border-radius: 4px; color: #34D399; font-weight: 600;
}

/* Thumb label */
.course-thumb-label {
  position: absolute; bottom: 12px; left: 12px;
  font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.2); font-family: 'JetBrains Mono', monospace;
}

.course-body { padding: 20px 22px; }
.course-category {
  font-size: 9px; letter-spacing: 0.14em; color: #0099BF;
  text-transform: uppercase; font-weight: 600; margin-bottom: 8px;
}
.course-title { font-size: 18px; font-weight: 800; line-height: 1.15; letter-spacing: -0.01em; }
.course-title-link {
  display: block; text-decoration: none; color: var(--text-primary-light);
  transition: color 0.22s;
}
.course-title-link:hover { color: var(--blue); }
.course-desc { font-size: 12px; color: var(--text-secondary-light); line-height: 1.55; margin: 10px 0 18px; }
.course-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 14px; border-top: 1px solid var(--light-2);
}
.course-price { font-size: 17px; font-weight: 800; color: var(--text-primary-light); }

/* ══════════════════════════════
   DIGITAL PACKS (HORIZONTAL MARKETPLACE LAYOUT)
══════════════════════════════ */
.packs-grid { 
  display: grid; 
  grid-template-columns: repeat(2, 1fr); 
  gap: 16px; 
}
.pack-card {
  background: #fff; 
  border: 1px solid var(--border-light);
  border-radius: 10px; 
  overflow: hidden; 
  transition: all 0.28s;
  display: flex; 
  flex-direction: row; 
  align-items: stretch;
  min-height: 156px;
}
.pack-card:hover { 
  border-color: var(--blue); 
  transform: translateY(-3px); 
  box-shadow: 0 10px 32px rgba(0,0,0,0.06); 
}
.pack-card.is-free { border-color: rgba(0,200,240,0.3); }

.pack-thumb {
  width: 160px; 
  flex-shrink: 0; 
  background: var(--dark-3);
  border-right: 1px solid var(--border-light);
  position: relative; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  overflow: hidden;
}
.pack-thumb::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 70% 25%, rgba(0,200,240,0.10) 0%, transparent 42%),
    linear-gradient(135deg, rgba(255,255,255,0.035) 0%, transparent 50%);
}

.pack-tool-logo {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 28px;
  height: 28px;
  opacity: 0.82;
  z-index: 2;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.35));
  pointer-events: none;
}
.pack-tool-logo svg {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}
.pack-file-pill {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: lowercase;
  color: rgba(255,255,255,0.68);
  background: rgba(10,13,17,0.78);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 4px;
  padding: 5px 7px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pack-tag {
  display: inline-flex;
  align-self: flex-start;
  font-size: 9px; 
  letter-spacing: 0.1em; 
  text-transform: uppercase;
  background: rgba(0,200,240,0.09); 
  color: #0099BF;
  padding: 4px 8px; 
  border-radius: 4px; 
  font-weight: 700;
  margin-bottom: 10px;
}
.pack-tag-free { 
  background: var(--blue); 
  color: var(--dark); 
}
.pack-body { 
  padding: 20px; 
  flex: 1; 
  display: flex; 
  flex-direction: column; 
  justify-content: center; 
  min-width: 0;
}
.pack-title { 
  font-size: 15px; 
  font-weight: 700; 
  margin-bottom: 7px; 
  color: var(--text-primary-light); 
  line-height: 1.25; 
}
.pack-desc { 
  font-size: 12px; 
  color: var(--text-secondary-light); 
  line-height: 1.55; 
  flex: 1; 
  margin-bottom: 16px; 
}
.pack-foot {
  display: flex; 
  align-items: center; 
  justify-content: space-between;
  gap: 12px;
  padding-top: 14px; 
  border-top: 1px solid var(--light-2);
}
.pack-price { font-size: 15px; font-weight: 800; color: var(--text-primary-light); }
.pack-card.is-free .pack-price { color: var(--blue); }
.pack-buy {
  font-size: 10px; 
  letter-spacing: 0.1em; 
  padding: 6px 12px;
  background: transparent; 
  color: var(--text-secondary-light);
  border: 1px solid var(--border-light); 
  border-radius: 4px;
  cursor: pointer; 
  transition: all 0.2s; 
  text-transform: uppercase; 
  font-weight: 600;
  text-decoration: none; 
  display: inline-block;
  white-space: nowrap;
}
.pack-card:hover .pack-buy { background: var(--blue); color: var(--dark); border-color: var(--blue); }

/* ══════════════════════════════
   PREMIUM SPOTLIGHT HOVER
══════════════════════════════ */
.spotlight-card {
  position: relative;
  isolation: isolate;
}
.spotlight-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(
    420px circle at var(--spotlight-x, 50%) var(--spotlight-y, 50%),
    rgba(0,200,240,0.13),
    rgba(0,200,240,0.055) 25%,
    transparent 55%
  );
  opacity: 0;
  transition: opacity 0.28s ease;
}
.spotlight-card:hover::before { opacity: 1; }
.spotlight-card > * {
  position: relative;
  z-index: 2;
}

/* ══════════════════════════════
   TATAGON VISUAL (FULLSCREEN STUDIO)
══════════════════════════════ */
.visual-section {
  background: var(--dark-2);
  border-top: 1px solid var(--border-dark);
  border-bottom: 1px solid var(--border-dark);
  overflow: hidden;
  scroll-margin-top: var(--nav-h);
  padding: 0 0 0 clamp(28px, 4vw, 56px);
  min-height: calc(100vh - var(--nav-h));
  display: grid;
  grid-template-rows: minmax(0, 1fr) clamp(216px, 30vh, 288px);
}
.visual-section::before {
  content: '';
  position: absolute;
  right: -180px;
  top: 40%;
  width: min(760px, 60vw);
  aspect-ratio: 1 / 1;
  transform: translateY(-50%);
  opacity: 0.022;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='470 520 1320 1120'%3E%3Cpolygon fill='%252300C8F0' points='547,608 547,815 806,905 923,736'/%3E%3Cpolygon fill='%2523FFFFFF' points='1700,775 1573,959 1181,825 802,1377 547,1291 547,1497 803,1586 1182,1032 1573,1166 1700,984'/%3E%3C/svg%3E") center / contain no-repeat;
}
.visual-inner {
  max-width: none;
  width: 100%;
  height: 100%;
  margin: 0;
  display: grid;
  grid-template-columns: clamp(380px, 32vw, 470px) minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
  position: relative;
  z-index: 1;
}
.visual-content {
  padding: clamp(42px, 6vh, 72px) clamp(34px, 3.8vw, 54px) clamp(30px, 4vh, 50px) 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-right: 1px solid var(--border-dark);
}
.visual-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
}
.visual-brand-name {
  font-family: 'League Spartan', sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary-dark);
}
.visual-sep { width: 24px; height: 1px; background: var(--border-dark); }

.visual-title {
  font-size: clamp(36px, 4.0vw, 54px);
  font-weight: 900;
  line-height: 0.94;
  letter-spacing: -0.055em;
  color: var(--text-primary-dark);
  margin-bottom: 24px;
  text-transform: uppercase;
}
.visual-title .accent-text { color: var(--blue); }

.visual-desc {
  font-size: 15px;
  color: var(--text-secondary-dark);
  line-height: 1.62;
  margin-bottom: 24px;
  max-width: 430px;
}

.visual-services {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 30px;
}
.visual-service {
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--text-secondary-dark);
  padding: 5px 12px;
  border: 1px solid var(--border-dark);
  border-radius: 100px;
  text-transform: uppercase;
  font-weight: 500;
}

/* Visual teaser side */
.visual-preview-panel {
  position: relative;
  display: block;
  overflow: hidden;
  border-left: 1px solid var(--border-dark);
  margin-right: 0;
}
.visual-preview-bg {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 28px,
    rgba(255,255,255,0.012) 28px,
    rgba(255,255,255,0.012) 29px
  );
}
.visual-video-teaser {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 52% 44%, rgba(0,200,240,0.12) 0%, transparent 52%),
    linear-gradient(135deg, rgba(255,255,255,0.055), rgba(255,255,255,0.015) 48%, rgba(0,200,240,0.075)),
    rgba(18,23,31,0.78);
  border-left: 1px solid rgba(255,255,255,0.045);
}
.visual-video-teaser::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.22;
  background-image:
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,0.024) 1px, transparent 1px);
  background-size: 76px 76px;
}
.visual-video-teaser::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 58% 42% at 50% 48%, rgba(10,13,17,0.04) 0%, rgba(10,13,17,0.12) 45%, rgba(10,13,17,0.36) 100%),
    linear-gradient(180deg, rgba(10,13,17,0.18), transparent 42%, rgba(10,13,17,0.28));
  pointer-events: none;
}
.visual-video-teaser .visual-video-safe {
  position: absolute;
  inset: 50% auto auto 50%;
  width: min(86%, calc((100vh - var(--nav-h) - clamp(216px, 30vh, 288px)) * 16 / 9));
  aspect-ratio: 16 / 9;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(255,255,255,0.075);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
  pointer-events: none;
  opacity: 0.42;
}
.visual-video-word {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  transform: translate(-50%, -50%);
  font-family: 'JetBrains Mono', monospace;
  font-size: clamp(20px, 2.2vw, 34px);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(245,247,250,0.13);
  white-space: nowrap;
}
/* Bottom horizontal portfolio band */
.visual-stills-band {
  position: relative;
  z-index: 2;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  border-top: 1px solid var(--border-dark);
  overflow-x: auto;
  overflow-y: hidden;
  background: rgba(5,8,12,0.72);
  cursor: grab;
  scrollbar-width: none; /* Firefox: hide horizontal scrollbar */
  -ms-overflow-style: none; /* Legacy Edge/IE */
  overscroll-behavior-x: contain;
}
.visual-stills-band:active {
  cursor: grabbing;
}
.visual-stills-band::-webkit-scrollbar {
  display: none; /* Chrome/Safari: hide horizontal scrollbar */
  width: 0;
  height: 0;
}
.visual-stills-track {
  display: flex;
  width: max-content;
  height: 100%;
  will-change: auto;
  transform: none;
}
.visual-stills-group {
  height: 100%;
  display: flex;
  gap: 2px;
  padding-right: 2px;
  flex: 0 0 auto;
}
.visual-still {
  position: relative;
  height: 100%;
  flex: 0 0 auto;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.46);
  border-radius: 0;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.115) 0%, rgba(255,255,255,0.045) 48%, rgba(0,200,240,0.085) 100%),
    rgba(18,23,31,0.74);
  opacity: 0.90;
  transition: opacity 0.25s ease, filter 0.25s ease;
}
.visual-still:hover {
  opacity: 1;
  filter: brightness(1.08);
}
.visual-still::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 24% 18%, rgba(0,200,240,0.20), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,0.08), transparent 45%);
  opacity: 0.8;
}
.visual-still::after {
  content: attr(data-tile);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: clamp(18px, 1.9vw, 30px);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(245,247,250,0.18);
}
.visual-still.tile-landscape { aspect-ratio: 16 / 9; }
.visual-still.tile-square { aspect-ratio: 1 / 1; }
.visual-still.tile-portrait { aspect-ratio: 4 / 5; }

/* v190 asset-folder compatibility: real WebP media slots */
.flow-tile.has-media,
.visual-still.has-media {
  background: var(--tile-img) center / cover no-repeat;
}
.flow-tile.has-media::before,
.visual-still.has-media::before {
  background:
    linear-gradient(180deg, rgba(10,13,17,0.04), rgba(10,13,17,0.32)),
    radial-gradient(circle at 24% 18%, rgba(0,200,240,0.12), transparent 34%);
  opacity: 0.72;
}
.flow-tile.has-media::after,
.visual-still.has-media::after {
  content: '';
}
.flow-tile.has-media span {
  opacity: 0;
}
.visual-still.has-media {
  opacity: 0.96;
}
.visual-still.has-media:hover {
  opacity: 1;
  filter: brightness(1.06) contrast(1.02);
}


/* ══════════════════════════════
   CTA / COMMUNITY
══════════════════════════════ */
.cta-section {
  padding: clamp(58px, 7vh, 74px) 48px clamp(48px, 6vh, 64px);
  text-align: center;
  position: relative;
}
.cta-glow {
  position: absolute; top: -80px; left: 50%; transform: translateX(-50%);
  width: 600px; height: 400px;
  background: radial-gradient(circle, rgba(0,200,240,0.07) 0%, transparent 55%);
  pointer-events: none;
}
.cta-label {
  font-size: 10px; letter-spacing: 0.15em; color: var(--blue);
  text-transform: uppercase; font-weight: 600; margin-bottom: 16px;
}
.cta-title {
  font-size: clamp(38px, 4.5vw, 58px); font-weight: 900;
  line-height: 0.96; letter-spacing: -0.055em; color: var(--text-primary-dark);
  margin-bottom: 18px; text-transform: uppercase;
}
.cta-desc {
  color: var(--text-secondary-dark); max-width: 440px; margin: 0 auto 30px;
  font-size: 15px; line-height: 1.65;
}
.cta-perks {
  display: flex; align-items: center; justify-content: center; gap: 24px;
  flex-wrap: wrap; margin-bottom: 30px;
}
.cta-perk {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; color: var(--text-muted-dark);
}
.cta-perk::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 1px;
  background: var(--blue);
  flex-shrink: 0;
  transform: skewX(-22deg);
  box-shadow: 0 0 8px rgba(0,200,240,0.35);
}
.cta-primary-action { display: flex; justify-content: center; margin-bottom: 0px; }
.btn-discord {
  font-size: 14px; padding: 16px 36px; gap: 12px;
}

/* Email form (visible by default) */
.email-divider {
  font-size: 12px;
  color: var(--text-muted-dark);
  margin-top: 14px;
  margin-bottom: 14px;
}
.cta-email-form-wrap {
  max-width: 420px; 
  margin: 0 auto;
  display: flex; 
  gap: 8px; 
}
.cta-input {
  flex: 1; padding: 12px 16px; background: var(--dark-3);
  border: 1px solid rgba(255,255,255,0.1); border-radius: 6px;
  color: var(--text-primary-dark); font-family: inherit; font-size: 13px;
  outline: none; transition: border-color 0.2s;
}
.cta-input:focus { border-color: var(--blue); }
.cta-input::placeholder { color: var(--text-muted-dark); }


/* ══════════════════════════════
   THE LAB DOSSIER OVERLAY
══════════════════════════════ */
body.lab-open { }
.lab-backdrop {
  position: fixed;
  inset: 0;
  z-index: 88;
  background: rgba(0,0,0,0.34);
  backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.52s ease, visibility 0.52s ease;
}
.lab-backdrop.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.lab-panel {
  position: fixed;
  top: var(--nav-h);
  left: 0;
  right: 0;
  z-index: 96;
  min-height: 56vh;
  color: var(--text-primary-dark);
  background:
    radial-gradient(ellipse 44% 68% at 74% 28%, rgba(0,200,240,0.095) 0%, transparent 62%),
    linear-gradient(180deg, rgba(10,13,17,0.93) 0%, rgba(8,11,15,0.86) 100%);
  backdrop-filter: blur(24px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 30px 90px rgba(0,0,0,0.48);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-110%);
  pointer-events: none;
  will-change: transform, opacity;
  transition:
    transform 0.72s cubic-bezier(.19, 1, .22, 1),
    opacity 0.46s ease,
    visibility 0.46s ease;
  overflow: hidden;
}
.lab-panel.is-scroll-primed.is-open {
  transform: translateY(-5px);
  transition: transform 0.28s cubic-bezier(.2, .8, .2, 1);
}
.lab-panel.is-soft-closing {
  transition:
    transform 0.86s cubic-bezier(.19, 1, .22, 1),
    opacity 0.58s ease,
    visibility 0.58s ease;
}
.lab-panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.lab-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.035), transparent 32%, transparent 68%, rgba(255,255,255,0.025)),
    radial-gradient(circle at 18% 18%, rgba(255,255,255,0.045), transparent 30%);
}
.lab-panel::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(0,200,240,0.62), transparent);
}
.lab-panel-inner {
  position: relative;
  z-index: 1;
  max-width: 1240px;
  min-height: 56vh;
  margin: 0 auto;
  padding: 48px 48px 42px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(440px, 0.88fr);
  grid-template-areas:
    "copy visual"
    "points points";
  gap: 28px 56px;
  align-items: center;
}
.lab-panel-inner::before {
  content: 'BILLY BUN';
  position: absolute;
  left: 34px;
  bottom: -26px;
  z-index: -1;
  font-family: 'League Spartan', 'Inter', sans-serif;
  font-size: clamp(92px, 15vw, 220px);
  line-height: 0.72;
  letter-spacing: -0.08em;
  font-weight: 900;
  color: rgba(255,255,255,0.026);
  white-space: nowrap;
  pointer-events: none;
}
.lab-copy {
  grid-area: copy;
  position: relative;
  z-index: 3;
}
.lab-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(0,200,240,0.86);
  font-weight: 500;
}
.lab-kicker::before {
  content: '';
  width: 18px;
  height: 10px;
  background: var(--blue);
  transform: skewX(-24deg);
  box-shadow: 0 0 16px rgba(0,200,240,0.35);
}
.lab-copy h2 {
  font-family: 'League Spartan', 'Inter', sans-serif;
  font-size: clamp(34px, 4.35vw, 58px);
  line-height: 0.96;
  letter-spacing: -0.055em;
  text-transform: uppercase;
  margin-bottom: 20px;
  max-width: 760px;
}
.lab-copy .lab-intro {
  color: rgba(245,247,250,0.70);
  font-size: 14px;
  line-height: 1.75;
  max-width: 690px;
  margin-bottom: 14px;
}
.lab-visual-area {
  grid-area: visual;
  position: relative;
  min-height: clamp(320px, 42vh, 430px);
  display: grid;
  grid-template-columns: minmax(148px, 0.78fr) minmax(230px, 1.12fr);
  align-items: end;
  gap: 18px;
}
.lab-portrait {
  position: relative;
  align-self: stretch;
  min-height: clamp(320px, 42vh, 430px);
  margin: -22px -18px -42px 0;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 54% 18%, rgba(0,200,240,0.14), transparent 40%),
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(10,13,17,0));
}
.lab-portrait::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(10,13,17,1) 0%, rgba(10,13,17,0.78) 5%, rgba(10,13,17,0.00) 22%, rgba(10,13,17,0.00) 72%, rgba(10,13,17,0.86) 100%),
    linear-gradient(180deg, rgba(10,13,17,0.22) 0%, rgba(10,13,17,0.00) 25%, rgba(10,13,17,0.00) 58%, rgba(10,13,17,0.78) 88%, rgba(10,13,17,1) 100%);
}
.lab-portrait::after {
  content: '';
  position: absolute;
  inset: -12px;
  z-index: 3;
  pointer-events: none;
  box-shadow:
    inset 0 0 58px rgba(10,13,17,0.72),
    inset -46px 0 70px rgba(10,13,17,0.72),
    inset 0 -62px 92px rgba(10,13,17,0.92);
}
.lab-portrait img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 14%;
  transform: scale(1.04);
  opacity: 0.88;
  filter: grayscale(1) contrast(1.02) brightness(0.86) saturate(0.78);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.98) 0%, rgba(0,0,0,0.98) 68%, rgba(0,0,0,0.74) 84%, rgba(0,0,0,0.00) 100%);
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.98) 0%, rgba(0,0,0,0.98) 68%, rgba(0,0,0,0.74) 84%, rgba(0,0,0,0.00) 100%);
}
.lab-person-meta {
  position: relative;
  z-index: 4;
  align-self: center;
  padding: 18px 0 22px;
  border-left: 1px solid rgba(255,255,255,0.10);
  padding-left: 18px;
}
.lab-person-meta::before {
  content: '';
  position: absolute;
  top: 0;
  left: -1px;
  width: 34px;
  height: 1px;
  background: rgba(0,200,240,0.76);
}
.lab-profile-stamp {
  display: inline-flex;
  margin-bottom: 12px;
  color: rgba(0,200,240,0.82);
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.lab-person-meta h3 {
  font-family: 'League Spartan', 'Inter', sans-serif;
  font-size: clamp(34px, 4vw, 48px);
  line-height: 0.9;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.lab-person-meta p {
  color: rgba(245,247,250,0.68);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
}
.lab-person-meta small {
  display: block;
  max-width: 240px;
  margin-top: 12px;
  color: rgba(245,247,250,0.52);
  font-size: 11px;
  line-height: 1.55;
}
.lab-points { display: none;
  
  grid-area: points;
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.lab-point {
  position: relative;
  padding: 0 20px 16px 18px;
  border-left: 1px solid rgba(255,255,255,0.105);
  border-bottom: 1px solid rgba(255,255,255,0.075);
  background: transparent;
  border-radius: 0;
}
.lab-point::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  width: 34px;
  height: 1px;
  background: rgba(0,200,240,0.72);
}
.lab-point-top {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 8px;
}
.lab-point-top span {
  width: 14px;
  height: 8px;
  background: var(--blue);
  transform: skewX(-24deg);
  flex-shrink: 0;
}
.lab-point strong {
  display: block;
  font-size: 12px;
  line-height: 1.25;
  color: var(--text-primary-dark);
  letter-spacing: 0.02em;
}
.lab-point p {
  font-size: 12px;
  line-height: 1.58;
  color: rgba(245,247,250,0.56);
}
.lab-profile,
.lab-profile-image,
.lab-profile-info {
  display: contents;
}
.lab-close {
  position: absolute;
  z-index: 5;
  top: 18px;
  right: 28px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 50%;
  background: rgba(255,255,255,0.045);
  color: var(--text-primary-dark);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.45;
  transition: all 0.2s;
}
.lab-close:hover {
  color: var(--blue);
  border-color: rgba(0,200,240,0.45);
  opacity: 1;
  transform: rotate(90deg);
}
@media (max-width: 1100px) {
  .lab-panel-inner {
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.8fr);
    gap: 26px 34px;
    padding-left: 36px;
    padding-right: 36px;
  }
  .lab-points { display: none;
   gap: 18px; }
  .lab-visual-area { grid-template-columns: minmax(128px, 0.7fr) minmax(210px, 1.1fr); }
}

/* ══════════════════════════════
   VIDEO MODAL
══════════════════════════════ */
body.modal-open { overflow: hidden; }

.video-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.28s ease, visibility 0.28s ease;
}
.video-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.video-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5,8,12,0.74);
  backdrop-filter: blur(22px);
}
.video-modal-card {
  position: relative;
  width: min(960px, 92vw);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 18px;
  background: rgba(15,19,24,0.96);
  box-shadow: 0 30px 90px rgba(0,0,0,0.45);
  overflow: hidden;
  transform: scale(0.94) translateY(12px);
  opacity: 0;
  transition: transform 0.32s ease, opacity 0.32s ease;
}
.video-modal.is-open .video-modal-card {
  transform: scale(1) translateY(0);
  opacity: 1;
}
.video-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border-dark);
}
.video-modal-title {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary-dark);
  font-weight: 700;
}
.video-modal-close {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.12);
  background: transparent;
  color: var(--text-primary-dark);
  cursor: pointer;
  transition: all 0.2s;
}
.video-modal-close:hover {
  border-color: var(--blue);
  color: var(--blue);
}
.video-modal-frame {
  aspect-ratio: 16 / 9;
  background:
    radial-gradient(circle at 50% 45%, rgba(0,200,240,0.12) 0%, transparent 46%),
    linear-gradient(135deg, #0A0D11 0%, #101820 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  position: relative;
  overflow: hidden;
}
.video-modal-watermark {
  position: absolute;
  right: 20px;
  bottom: 18px;
  width: 46px;
  height: 46px;
  color: var(--text-primary-dark);
  opacity: 0.42;
  z-index: 2;
  pointer-events: none;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,0.35));
}
.video-modal-watermark svg {
  width: 100%;
  height: 100%;
  display: block;
}
.video-modal-placeholder {
  text-align: center;
  max-width: 420px;
  position: relative;
  z-index: 3;
}
.video-modal-placeholder-icon {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  color: var(--blue);
  border: 1px solid rgba(0,200,240,0.35);
  background: rgba(0,200,240,0.08);
}
.video-modal-placeholder h3 {
  font-family: 'League Spartan', 'Inter', sans-serif;
  font-size: clamp(26px, 4vw, 38px);
  line-height: 0.98;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  color: var(--text-primary-dark);
  margin-bottom: 10px;
}
.video-modal-placeholder p {
  color: var(--text-secondary-dark);
  font-size: 14px;
  line-height: 1.6;
}

/* ══════════════════════════════
   FOOTER
══════════════════════════════ */
footer {
  padding: 28px 48px; border-top: 1px solid var(--border-dark);
  background: var(--dark);
}
.footer-inner {
  max-width: 1240px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px;
}
.footer-copy { font-size: 11px; color: var(--text-muted-dark); letter-spacing: 0.07em; }
.footer-links { display: flex; gap: 24px; }
.footer-links a { font-size: 12px; color: var(--text-secondary-dark); text-decoration: none; transition: color 0.2s; }
.footer-links a:hover { color: var(--blue); }

/* Bottom composition adjustment:
   Move Tatagon Visual down by the navbar height.
   The extra space belongs to the white Packs section, while Community becomes shorter. */
@media (min-width: 901px) {
  #packs {
    padding-bottom: calc(96px + var(--nav-h) - 7px);
  }

  #community.cta-section {
    padding-top: max(18px, calc(clamp(58px, 7vh, 74px) - 40px));
    padding-bottom: max(16px, calc(clamp(48px, 6vh, 64px) - 32px));
  }
}

/* ══════════════════════════════
   DIVIDER
══════════════════════════════ */
.section-divider { height: 1px; background: var(--border-light); margin: 0 48px; max-width: none; }
.section-divider-dark { height: 1px; background: var(--border-dark); }

/* ══════════════════════════════
   RESPONSIVE
══════════════════════════════ */
@media (max-width: 1024px) {
  .hero-content { grid-template-columns: 1fr; gap: 48px; }
  .visual-section {
    min-height: auto;
    grid-template-rows: auto auto auto;
    padding: 0 48px;
  }
  .visual-inner { grid-template-columns: 1fr; }
  .visual-content { padding: 48px 36px 44px; border-right: none; border-bottom: 1px solid var(--border-dark); }
  .visual-preview-panel {
    min-height: 380px;
    margin-right: 0;
    border-left: none;
    border-top: 1px solid var(--border-dark);
  }
  .visual-stills-band {
    margin-left: -48px;
    margin-right: -48px;
    height: 280px;
  }
}

@media (max-width: 900px) {
  :root { --nav-h: 60px; }

  nav { padding: 0 20px; }
  .logo-img { width: 34px; height: 34px; }
  .logo-text { font-size: 17px; }
  .nav-links { display: none; }
  .nav-right { gap: 10px; }
  .nav-right .social-icon[aria-label="Instagram"] { display: none; }
  .mobile-nav-cta { display: inline-flex; }
  .mobile-lab-cta { display: inline-flex; }
  .student-login { padding: 8px 12px; font-size: 11px; }
  .lang-toggle { padding: 2px; }
  .lang-option { min-width: 29px; height: 23px; padding: 0 7px; font-size: 9px; }

  .lab-backdrop { z-index: 150; }
  .lab-panel {
    z-index: 160;
    top: 0;
    min-height: 100vh;
    overflow-y: auto;
  }
  .lab-panel-inner {
    min-height: 100vh;
    grid-template-columns: 1fr;
    grid-template-areas:
      "copy"
      "visual"
      "points";
    gap: 28px;
    padding: 82px 22px 42px;
  }
  .lab-panel-inner::before {
    left: 16px;
    bottom: 8px;
    font-size: 92px;
    opacity: 0.9;
  }
  .lab-copy h2 { font-size: clamp(34px, 10vw, 46px); }
  .lab-copy .lab-intro { font-size: 13px; }
  .lab-visual-area {
    min-height: 340px;
    grid-template-columns: 0.78fr 1fr;
    gap: 14px;
  }
  .lab-portrait {
    min-height: 340px;
    margin: -18px -22px -22px 0;
  }
  .lab-person-meta {
    align-self: center;
    padding-left: 16px;
  }
  .lab-person-meta h3 { font-size: 34px; }
  .lab-points { display: none;
  
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .lab-close { top: 18px; right: 20px; }

  section { padding: 64px 20px; }
  .section-head { margin-bottom: 38px; }
  h2.section-title { font-size: clamp(32px, 9vw, 44px); letter-spacing: -0.045em; }
  .section-desc { font-size: 14px; margin-top: 14px; }

  .hero { min-height: auto; padding: calc(var(--nav-h) + 36px) 20px 52px; }
  .hero-content { gap: 36px; }
  .hero-badge { margin-bottom: 20px; }
  h1.hero-title { font-size: clamp(42px, 12vw, 58px); margin-bottom: 18px; }
  .hero-sub { font-size: 15px; line-height: 1.62; margin-bottom: 28px; }
  .hero-ctas { margin-bottom: 32px; }
  .hero-trust { padding-top: 18px; row-gap: 10px; }
  .trust-item { font-size: 10px; padding-right: 16px; margin-right: 16px; }
  .hero-video-wrap { border-radius: 10px; }
  .video-play-btn { width: 56px; height: 56px; }
  .scroll-indicator { display: none; }

  .stats-strip { padding: 0 20px; }
  .stats-inner { display: grid; grid-template-columns: repeat(2, 1fr); }
  .stat-item {
    flex: none;
    padding: 18px 16px;
    border-right: 1px solid var(--border-dark);
    border-bottom: 1px solid var(--border-dark);
  }
  .stat-item:first-child { padding-left: 16px; }
  .stat-item:nth-child(2n) { border-right: none; }
  .stat-item:nth-child(n+3) { border-bottom: none; }
  .stat-num { font-size: 25px; }
  .stat-label { font-size: 10px; line-height: 1.35; }

  .tool-group-meta { margin-top: -4px; margin-bottom: 20px; }
  .tool-value-pill { font-size: 10px; padding: 6px 10px; }

  .courses-grid, .courses-grid-soon { grid-template-columns: 1fr; }
  .course-thumb { height: 172px; }
  .course-body { padding: 18px 20px; }
  .course-foot { gap: 12px; }

  .packs-grid { grid-template-columns: 1fr; }
  .pack-card { flex-direction: column; }
  .pack-thumb {
    width: 100%;
    height: 130px;
    min-height: 130px;
    border-right: none;
    border-bottom: 1px solid var(--border-light);
  }
  .pack-body { padding: 18px 20px; }
  .pack-desc { margin-bottom: 14px; }

  .visual-section {
    padding: 0 20px !important;
    grid-template-rows: auto auto auto;
  }
  .visual-video-teaser .visual-video-safe {
    display: none;
  }
  .visual-inner { min-height: auto; }
  .visual-section::before { width: 420px; right: -180px; opacity: 0.025; }
  .visual-content { padding: 46px 0 30px; }
  .visual-preview-panel {
    min-height: 260px;
    padding: 0;
  }
  .visual-stills-band {
    height: 224px;
    margin-left: -20px;
    margin-right: -20px;
  }
  .visual-title { font-size: clamp(34px, 10vw, 46px); }
  .visual-services { margin-bottom: 24px; }

  .cta-section { padding: 58px 20px 50px; }
  .cta-desc { margin-bottom: 32px; font-size: 14px; }
  .cta-perks { gap: 14px 22px; margin-bottom: 30px; }
  .cta-email-form-wrap { max-width: 440px; }
  .video-modal { padding: 20px; }
  .video-modal-head { padding: 14px 16px; }
  .video-modal-frame { padding: 22px; }
  .video-modal-watermark { width: 36px; height: 36px; right: 14px; bottom: 14px; opacity: 0.36; }

  footer { padding: 28px 20px; }
  .footer-inner { flex-direction: column; text-align: center; }
  .footer-links { flex-wrap: wrap; justify-content: center; gap: 14px 22px; }
}

@media (max-width: 480px) {
  nav { padding: 0 16px; }
  .logo-wrap { gap: 9px; }
  .logo-img { width: 32px; height: 32px; }
  .logo-text { font-size: 16px; }
  .nav-right { gap: 8px; }
  .social-icon { width: 28px; height: 28px; }
  .social-icon svg { width: 18px; height: 18px; }
  .mobile-nav-cta { padding: 8px 12px; font-size: 11px; }
  .mobile-lab-cta { padding: 8px 10px; font-size: 10px; }
  .student-login { padding: 8px 10px; font-size: 10px; }
  .lang-toggle { gap: 1px; padding: 2px; }
  .lang-option { min-width: 27px; height: 22px; padding: 0 6px; font-size: 9px; }
  .nav-right .social-icon[aria-label="Discord"] { display: none; }

  section { padding-left: 18px; padding-right: 18px; }
  .hero { padding: calc(var(--nav-h) + 30px) 18px 46px; }
  .hero-ctas { flex-direction: column; }
  .hero-ctas a { width: 100%; justify-content: center; }
  .hero-trust { flex-wrap: wrap; gap: 10px 12px; }
  .trust-item { border-right: none; padding-right: 0; margin-right: 0; flex: 0 0 calc(50% - 6px); }

  .stats-strip { padding: 0 18px; }
  .stat-item { padding: 16px 12px; }

  .course-foot, .pack-foot { align-items: center; }
  .btn-capsule { padding: 10px 16px; }

  .pack-thumb { height: 124px; min-height: 124px; }
  .pack-file-pill { left: 12px; right: 12px; }

  .visual-eyebrow { flex-wrap: wrap; row-gap: 8px; }
  .visual-sep { display: none; }
  .visual-services { gap: 8px; }

  .cta-title { font-size: clamp(34px, 11vw, 46px); }
  .cta-perks { flex-direction: column; align-items: center; gap: 10px; }
  .cta-email-form-wrap { flex-direction: column; }
  .cta-email-form-wrap .btn-primary { width: 100%; justify-content: center; }
  .btn-discord { width: 100%; justify-content: center; padding-left: 18px; padding-right: 18px; }
}


@media (max-width: 900px) {
  .visual-section::before {
    right: -220px;
    width: 620px;
    opacity: 0.018;
  }
}


/* ── TATAGON CONSTANT-SPEED LOGO PRELOADER ── */
html.preloader-active {
  overflow: hidden;
  scrollbar-gutter: stable;
}
html.preloader-active body { overflow: hidden; }
@supports not (scrollbar-gutter: stable) {
  html.preloader-active {
    overflow-y: scroll;
  }
}
.tatagon-preloader {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: grid;
  place-items: center;
  background: #000;
}

.tatagon-preloader-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
}
.tatagon-preloader canvas {
  width: min(51vw, 540px);
  height: auto;
  display: block;
}
.tatagon-preloader-label {
  font-family: 'League Spartan', 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-primary-dark);
  transform: translateX(0.12em);
  user-select: none;
}
.tatagon-preloader-label span {
  color: var(--text-secondary-dark);
  font-weight: 400;
}
@media (max-width: 768px) {
  .tatagon-preloader canvas { width: min(63vw, 390px); }
  .tatagon-preloader-label { font-size: 11px; letter-spacing: 0.22em; }
}
@media (prefers-reduced-motion: reduce) {
  .tatagon-preloader { display: none; }
}


/* ══════════════════════════════
   HERO FLOW WALL PLACEHOLDERS
══════════════════════════════ */
.hero {
  justify-content: center;
  padding: calc(var(--nav-h) + 72px) 48px 80px;
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 48% 42% at 50% 46%, rgba(10,13,17,0.72) 0%, rgba(10,13,17,0.58) 35%, rgba(10,13,17,0.22) 66%, rgba(10,13,17,0.48) 100%),
    linear-gradient(180deg, rgba(10,13,17,0.58) 0%, rgba(10,13,17,0.16) 45%, rgba(10,13,17,0.66) 100%);
}
.hero-bg {
  z-index: 0;
  background:
    radial-gradient(ellipse 60% 48% at 50% 42%, rgba(0,200,240,0.10) 0%, transparent 62%),
    radial-gradient(ellipse 48% 38% at 16% 78%, rgba(0,200,240,0.05) 0%, transparent 60%);
}
.hero-flow-wall {
  position: absolute;
  inset: -10vh -4vw;
  z-index: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: clamp(14px, 2vw, 26px);
  padding: calc(var(--nav-h) + 18px) clamp(22px, 4vw, 68px) 42px;
  pointer-events: none;
  opacity: 0.98;
  filter: saturate(1.02) brightness(1.42);
  transform: none;
}
.flow-column {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2vw, 24px);
  min-width: 0;
  will-change: transform;
}
.flow-tile {
  position: relative;
  min-height: auto;
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(255,255,255,0.075);
  border-radius: 14px;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.115) 0%, rgba(255,255,255,0.045) 48%, rgba(0,200,240,0.085) 100%),
    rgba(18,23,31,0.74);
  box-shadow:
    0 18px 42px rgba(0,0,0,0.20),
    inset 0 1px 0 rgba(255,255,255,0.12);
}
.flow-tile::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 24% 18%, rgba(0,200,240,0.20), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,0.08), transparent 45%);
  opacity: 0.8;
}
.flow-tile::after {
  content: 'MEDIA SLOT';
  position: absolute;
  right: 12px;
  bottom: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  letter-spacing: 0.12em;
  color: rgba(245,247,250,0.12);
}
.flow-tile span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(245,247,250,0.82);
  text-shadow: 0 1px 10px rgba(0,0,0,0.28);
  z-index: 2;
}
.flow-tile.is-tall,
.flow-tile.is-short,
.flow-tile.is-wide { min-height: auto; aspect-ratio: 16 / 9; }

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 860px;
  margin: 0 auto;
  width: 100%;
  display: block;
  text-align: center;
}
.hero-left {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero-badge {
  margin-left: auto;
  margin-right: auto;
}
.hero-sub {
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}
.hero-title,
.hero-sub,
.hero-badge {
  text-shadow: 0 8px 28px rgba(0,0,0,0.38);
}
.hero-ctas {
  justify-content: center;
}
.hero-trust {
  justify-content: center;
  border-top: 1px solid rgba(255,255,255,0.08);
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* Option 5 — Architectural Wipe & Subtle Parallax Push */
html.hero-intro-armed .hero-left.reveal {
  opacity: 1;
  transform: none;
  transition: none;
}

.tatagon-preloader {
  transition: transform 1.2s cubic-bezier(0.85, 0, 0.15, 1);
  will-change: transform;
}
.tatagon-preloader.is-leaving {
  transform: translateY(-100%);
}
.tatagon-preloader.is-leaving .tatagon-preloader-content {
  opacity: 0;
  transform: translateY(-30px);
  transition:
    opacity 0.4s ease,
    transform 0.6s cubic-bezier(0.85, 0, 0.15, 1);
}

/* Keep this choreography active only when the preloader actually plays */
html.hero-intro-armed .hero {
  opacity: 0;
  transform: translateY(24px) scale(0.985);
  filter: blur(4px);
  transition:
    transform 1.4s cubic-bezier(0.85, 0, 0.15, 1),
    opacity 1s ease,
    filter 1s ease;
  will-change: transform, opacity, filter;
}

html.hero-intro-armed body.hero-unlocked .hero {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

html.hero-intro-armed .hero-content .hero-badge,
html.hero-intro-armed .hero-content .hero-title,
html.hero-intro-armed .hero-content .hero-sub,
html.hero-intro-armed .hero-content .hero-ctas,
html.hero-intro-armed .hero-content .hero-trust {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: opacity, transform;
}

html.hero-intro-armed body.hero-unlocked .hero-badge {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.20s;
}
html.hero-intro-armed body.hero-unlocked .hero-title {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.35s;
}
html.hero-intro-armed body.hero-unlocked .hero-sub {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.50s;
}
html.hero-intro-armed body.hero-unlocked .hero-ctas {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.65s;
}
html.hero-intro-armed body.hero-unlocked .hero-trust {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.80s;
}

html.hero-intro-armed .hero-flow-wall {
  opacity: 0;
  transition: opacity 1.5s ease 0.35s;
}
html.hero-intro-armed body.hero-unlocked .hero-flow-wall {
  opacity: 0.92;
}

html.hero-intro-armed .hero-flow-wall .flow-column {
  animation-play-state: paused !important;
}
html.hero-intro-armed body.hero-unlocked .hero-flow-wall .flow-column {
  animation-play-state: running !important;
}


@media (max-width: 900px) {
  .hero-flow-wall {
    grid-template-columns: repeat(2, minmax(140px, 1fr));
    inset: -6vh -20vw;
    opacity: 0.68;
    transform: none;
  }
  .flow-column-right { display: none; }
  .flow-tile,
  .flow-tile.is-tall,
  .flow-tile.is-short,
  .flow-tile.is-wide { min-height: auto; aspect-ratio: 16 / 9; }
  .hero-content { max-width: 680px; }
}
@media (max-width: 480px) {
  .hero-flow-wall {
    opacity: 0.48;
    gap: 12px;
  }
  .flow-tile::after { display: none; }
  .hero-trust {
    justify-content: center;
    max-width: 340px;
  }
}
/* v100 refinements */
.hero-flow-wall {
  align-items: start;
}
.flow-column {
  align-self: start;
}


/* v103 looping tile field */
.hero-flow-wall {
  overflow: hidden;
  align-items: stretch;
}

.flow-column {
  min-height: 140%;
  will-change: transform;
}

.flow-column-left,
.flow-column-right {
  animation: flowLoopUp 30s linear infinite !important;
}

.flow-column-center {
  animation: flowLoopDown 30s linear infinite !important;
}

@keyframes flowLoopUp {
  from { transform: translateY(0); }
  to { transform: translateY(-50%); }
}

@keyframes flowLoopDown {
  from { transform: translateY(-50%); }
  to { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .flow-column,
  .flow-column-left,
  .flow-column-center,
  .flow-column-right {
    animation: none !important;
  }
}

/* v115 — refine Billy Bun portrait alignment */
.lab-panel-inner {
  align-items: start;
}
.lab-copy {
  align-self: start;
}
.lab-visual-area {
  align-self: start;
  min-height: auto;
  margin-top: 36px;
  grid-template-columns: minmax(150px, 0.78fr) minmax(248px, 1.02fr);
  align-items: stretch;
  gap: 20px;
}
.lab-person-meta {
  align-self: center;
}
.lab-portrait {
  align-self: start;
  min-height: 0;
  height: clamp(360px, 31vw, 408px);
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 20px 44px rgba(0,0,0,0.24);
  border: none;
}
.lab-portrait::before {
  border-radius: inherit;
  background:
    linear-gradient(90deg, rgba(10,13,17,1) 0%, rgba(10,13,17,0.6) 8%, rgba(10,13,17,0.0) 28%, rgba(10,13,17,0.0) 65%, rgba(10,13,17,0.7) 92%, rgba(10,13,17,1) 100%),
    linear-gradient(180deg, rgba(10,13,17,0.5) 0%, rgba(10,13,17,0.0) 18%, rgba(10,13,17,0.0) 52%, rgba(10,13,17,0.6) 78%, rgba(10,13,17,1) 100%),
    radial-gradient(ellipse at 50% 20%, rgba(0,200,240,0.06) 0%, transparent 60%);
}
.lab-portrait::after {
  border-radius: inherit;
  box-shadow:
    inset 0 0 70px rgba(10,13,17,0.6),
    inset -40px 0 60px rgba(10,13,17,0.5),
    inset 40px 0 60px rgba(10,13,17,0.5),
    inset 0 -50px 80px rgba(10,13,17,0.8);
}
.lab-portrait img {
  transform: scale(1.01);
  object-position: center 12%;
  filter: grayscale(0.7) contrast(1.05) brightness(0.82) saturate(0.85);
  -webkit-mask-image: radial-gradient(ellipse 90% 85% at 50% 40%, rgba(0,0,0,1) 30%, rgba(0,0,0,0.7) 65%, rgba(0,0,0,0.0) 100%);
  mask-image: radial-gradient(ellipse 90% 85% at 50% 40%, rgba(0,0,0,1) 30%, rgba(0,0,0,0.7) 65%, rgba(0,0,0,0.0) 100%);
}

@media (max-width: 900px) {
  .lab-visual-area {
    margin-top: 16px;
  }
  .lab-portrait {
    height: clamp(320px, 58vw, 420px);
  }
}


/* ══════════════════════════════
   INQUIRY DRAWER / NETLIFY FORM
══════════════════════════════ */
body.inquiry-open {
  overflow: hidden;
}

.inquiry-backdrop {
  position: fixed;
  inset: 0;
  z-index: 240;
  background: rgba(5,8,12,0.56);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.34s ease, visibility 0.34s ease;
}

.inquiry-backdrop.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.inquiry-drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 260;
  width: min(480px, 100vw);
  height: 100vh;
  color: var(--text-primary-dark);
  background:
    radial-gradient(ellipse 78% 44% at 52% 0%, rgba(0,200,240,0.105) 0%, transparent 62%),
    linear-gradient(180deg, rgba(15,19,24,0.98) 0%, rgba(8,11,15,0.98) 100%);
  border-left: 1px solid rgba(255,255,255,0.09);
  box-shadow: -30px 0 80px rgba(0,0,0,0.48);
  transform: translateX(105%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    transform 0.48s cubic-bezier(.19, 1, .22, 1),
    opacity 0.28s ease,
    visibility 0.28s ease;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(245,247,250,0.28) rgba(255,255,255,0.03);
}

.inquiry-drawer.is-open {
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.inquiry-drawer-inner {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  padding: 34px 34px 28px;
}

.inquiry-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 26px;
}

.inquiry-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(0,200,240,0.86);
  font-weight: 600;
}

.inquiry-kicker::before {
  content: '';
  width: 16px;
  height: 9px;
  background: var(--blue);
  transform: skewX(-24deg);
  box-shadow: 0 0 14px rgba(0,200,240,0.35);
}

.inquiry-title {
  font-family: 'League Spartan', 'Inter', sans-serif;
  font-size: clamp(34px, 4vw, 48px);
  line-height: 0.92;
  letter-spacing: -0.052em;
  text-transform: uppercase;
  margin: 0 0 12px;
}

.inquiry-desc {
  color: rgba(245,247,250,0.66);
  font-size: 13px;
  line-height: 1.65;
  max-width: 360px;
}

.inquiry-close {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 50%;
  background: rgba(255,255,255,0.045);
  color: var(--text-primary-dark);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.62;
  transition: all 0.2s;
}

.inquiry-close:hover {
  opacity: 1;
  color: var(--blue);
  border-color: rgba(0,200,240,0.45);
  transform: rotate(90deg);
}

.inquiry-form {
  display: grid;
  gap: 14px;
  margin-top: 4px;
}

.inquiry-field {
  display: grid;
  gap: 7px;
}

.inquiry-field label {
  font-size: 10px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: rgba(245,247,250,0.48);
  font-weight: 700;
}

.inquiry-field input,
.inquiry-field select,
.inquiry-field textarea {
  width: 100%;
  border: 1px solid rgba(255,255,255,0.105);
  border-radius: 10px;
  background: rgba(255,255,255,0.045);
  color: var(--text-primary-dark);
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  padding: 12px 13px;
  outline: none;
  transition:
    border-color 0.22s ease,
    background 0.22s ease,
    box-shadow 0.22s ease;
}

.inquiry-field select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(245,247,250,0.55) 50%),
    linear-gradient(135deg, rgba(245,247,250,0.55) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 2px),
    calc(100% - 13px) calc(50% - 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 38px;
}

.inquiry-field select option {
  background: #11151B;
  color: #F5F7FA;
}

.inquiry-field textarea {
  min-height: 124px;
  resize: vertical;
  line-height: 1.55;
}

.inquiry-field input:focus,
.inquiry-field select:focus,
.inquiry-field textarea:focus {
  border-color: rgba(0,200,240,0.72);
  background: rgba(255,255,255,0.065);
  box-shadow: 0 0 0 3px rgba(0,200,240,0.10);
}

.inquiry-field input::placeholder,
.inquiry-field textarea::placeholder {
  color: rgba(245,247,250,0.30);
}

.inquiry-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.inquiry-submit {
  margin-top: 6px;
  width: 100%;
  justify-content: center;
  border-radius: 999px;
  padding: 14px 20px;
}

.inquiry-submit[disabled] {
  opacity: 0.62;
  cursor: wait;
  transform: none;
}

.inquiry-note {
  margin-top: 14px;
  color: rgba(245,247,250,0.42);
  font-size: 11px;
  line-height: 1.55;
}

.inquiry-success,
.inquiry-error {
  display: none;
  margin-top: 14px;
  padding: 13px 14px;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.55;
}

.inquiry-success {
  color: #9AF7C7;
  background: rgba(52,211,153,0.10);
  border: 1px solid rgba(52,211,153,0.24);
}

.inquiry-error {
  color: #FFC0C0;
  background: rgba(248,113,113,0.10);
  border: 1px solid rgba(248,113,113,0.24);
}

.inquiry-success.is-visible,
.inquiry-error.is-visible {
  display: block;
}

.inquiry-hidden {
  display: none !important;
}

@media (max-width: 900px) {
  .inquiry-drawer {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto;
    max-height: 88vh;
    border-left: none;
    border-top: 1px solid rgba(255,255,255,0.10);
    border-radius: 24px 24px 0 0;
    transform: translateY(105%);
    box-shadow: 0 -30px 80px rgba(0,0,0,0.50);
  }

  .inquiry-drawer.is-open {
    transform: translateY(0);
  }

  .inquiry-drawer-inner {
    padding: 26px 20px 24px;
  }

  .inquiry-head {
    margin-bottom: 20px;
  }

  .inquiry-title {
    font-size: clamp(32px, 10vw, 44px);
  }

  .inquiry-two-col {
    grid-template-columns: 1fr;
  }
}

/* v197 — navbar Hire Us renamed to Studio */
/* v196 — Tatagon Visual on landing is teaser only */
/* v195 — nav and hero Hire Us scroll to Tatagon Visual first */
/* v194 — separated TatagonLab and Tatagon Visual inquiry drawers */
/* v193 — budget removed, timeline added for lighter inquiry flow */
/* v191 — clearer hero background images */

/* v198 — fix hero / stats strip scroll seam
   The animated hero media wall was visually bleeding into the top of the stats bar
   during scroll. This bridge masks the moving tile edges and prevents sub-pixel flicker. */
.hero::after {
  background:
    linear-gradient(
      180deg,
      rgba(15,19,24,0.00) 0%,
      rgba(15,19,24,0.00) 58%,
      rgba(15,19,24,0.42) 82%,
      rgba(15,19,24,0.96) 100%
    ),
    radial-gradient(ellipse 48% 42% at 50% 46%, rgba(10,13,17,0.72) 0%, rgba(10,13,17,0.58) 35%, rgba(10,13,17,0.22) 66%, rgba(10,13,17,0.48) 100%),
    linear-gradient(180deg, rgba(10,13,17,0.58) 0%, rgba(10,13,17,0.16) 45%, rgba(10,13,17,0.66) 100%);
}

.stats-strip {
  position: relative;
  z-index: 5;
  margin-top: -1px;
  transform: translateZ(0);
}

.stats-strip::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -42px;
  height: 42px;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(15,19,24,0.00) 0%, rgba(15,19,24,0.92) 100%);
}

.stats-inner {
  position: relative;
  z-index: 2;
}


/* v199 — The Lab drawer typography hierarchy cleanup */
.lab-panel-inner {
  gap: 26px 44px;
}

.lab-copy h2.lab-main-headline {
  font-size: clamp(32px, 3.45vw, 48px);
  line-height: 0.98;
  letter-spacing: -0.045em;
  max-width: 700px;
  margin-bottom: 22px;
  text-transform: none;
}

.lab-headline-strong {
  display: block;
  color: rgba(245,247,250,0.98);
  font-weight: 900;
  text-transform: uppercase;
}

.lab-headline-light {
  display: block;
  margin-top: 4px;
  color: rgba(245,247,250,0.82);
  font-weight: 700;
  letter-spacing: -0.035em;
  text-transform: none;
}

.lab-copy .lab-intro {
  color: rgba(245,247,250,0.68);
  font-size: 14px;
  line-height: 1.72;
  max-width: 660px;
}

.lab-copy .lab-thesis {
  margin-top: 2px;
  color: rgba(245,247,250,0.88);
  font-size: 15px;
  line-height: 1.68;
}

.lab-copy .lab-thesis strong {
  color: rgba(245,247,250,0.98);
  font-weight: 700;
}

.lab-mission {
  position: relative;
  margin-top: 24px;
  max-width: 710px;
  padding: 17px 22px 18px;
  border-left: 2px solid rgba(0,200,240,0.72);
  background: linear-gradient(90deg, rgba(0,200,240,0.075), rgba(0,200,240,0.025));
}

.lab-mission-label {
  margin-bottom: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: rgba(0,200,240,0.88);
  text-transform: uppercase;
}

.lab-mission .lab-intro {
  margin-bottom: 0;
  color: rgba(245,247,250,0.84);
  font-size: 15px;
  line-height: 1.62;
}

.lab-person-meta small {
  max-width: 260px;
  margin-top: 14px;
  color: rgba(245,247,250,0.66);
  font-size: 13px;
  line-height: 1.58;
}

.lab-person-meta p {
  color: rgba(245,247,250,0.74);
}

@media (max-width: 900px) {
  .lab-copy h2.lab-main-headline {
    font-size: clamp(32px, 8.8vw, 42px);
  }

  .lab-copy .lab-intro,
  .lab-copy .lab-thesis,
  .lab-mission .lab-intro {
    font-size: 13px;
  }

  .lab-mission {
    padding: 15px 18px 16px;
  }
}


/* v201 — lightbox click fixed for drag-scroll band */
/* v200 — Tatagon Visual still band lightbox */
.visual-stills-band .visual-still.has-media {
  cursor: zoom-in;
  opacity: 1;
  filter: brightness(1.01) contrast(1.02);
}

.visual-stills-band .visual-still.has-media::before {
  background:
    linear-gradient(180deg, rgba(10,13,17,0.00), rgba(10,13,17,0.10)),
    radial-gradient(circle at 24% 18%, rgba(0,200,240,0.04), transparent 34%);
  opacity: 0.22;
}

.visual-stills-band .visual-still.has-media:hover {
  opacity: 1;
  filter: brightness(1.08) contrast(1.04);
}

.visual-lightbox {
  position: fixed;
  inset: 0;
  z-index: 420;
  display: grid;
  place-items: center;
  padding: 34px;
  background: rgba(5,8,12,0.72);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.28s ease, visibility 0.28s ease;
}

.visual-lightbox.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.visual-lightbox-card {
  width: min(1120px, 92vw);
  max-height: 88vh;
  display: grid;
  gap: 14px;
  transform: translateY(18px) scale(0.96);
  opacity: 0;
  transition:
    transform 0.38s cubic-bezier(.19, 1, .22, 1),
    opacity 0.28s ease;
}

.visual-lightbox.is-open .visual-lightbox-card {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.visual-lightbox-image-wrap {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(15,19,24,0.82);
  box-shadow: 0 34px 90px rgba(0,0,0,0.58);
}

.visual-lightbox-image {
  width: 100%;
  max-height: calc(88vh - 72px);
  display: block;
  object-fit: contain;
  background: #0A0D11;
}

.visual-lightbox-close {
  position: fixed;
  top: 22px;
  right: 24px;
  z-index: 430;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 50%;
  background: rgba(15,19,24,0.66);
  color: var(--text-primary-dark);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.72;
  transition: all 0.2s ease;
}

.visual-lightbox-close:hover {
  opacity: 1;
  color: var(--blue);
  border-color: rgba(0,200,240,0.5);
  transform: rotate(90deg);
}

.visual-lightbox-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  color: rgba(245,247,250,0.62);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.visual-lightbox-label {
  font-family: 'JetBrains Mono', monospace;
}

.visual-lightbox-link {
  display: inline-flex;
  align-items: center;
  color: var(--blue);
  text-decoration: none;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.visual-lightbox-link:hover {
  opacity: 0.82;
  transform: translateX(2px);
}

body.visual-lightbox-open {
  overflow: hidden;
}

@media (max-width: 900px) {
  .visual-lightbox {
    padding: 18px;
  }

  .visual-lightbox-card {
    width: 100%;
  }

  .visual-lightbox-image-wrap {
    border-radius: 14px;
  }

  .visual-lightbox-meta {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  .visual-lightbox-close {
    top: 16px;
    right: 16px;
  }
}


/* v202 — The Lab portrait fade and paragraph polish */
.lab-copy > p.lab-intro:nth-of-type(1) {
  color: rgba(245,247,250,0.62);
}

.lab-copy > p.lab-intro:nth-of-type(2) {
  color: rgba(245,247,250,0.74);
}

.lab-copy > p.lab-intro.lab-thesis {
  color: rgba(245,247,250,0.90);
}

.lab-portrait::before {
  background:
    linear-gradient(90deg,
      rgba(10,13,17,0.96) 0%,
      rgba(10,13,17,0.48) 8%,
      rgba(10,13,17,0.00) 30%,
      rgba(10,13,17,0.00) 56%,
      rgba(10,13,17,0.62) 84%,
      rgba(10,13,17,0.98) 100%
    ),
    linear-gradient(180deg,
      rgba(10,13,17,0.42) 0%,
      rgba(10,13,17,0.00) 20%,
      rgba(10,13,17,0.00) 54%,
      rgba(10,13,17,0.58) 78%,
      rgba(10,13,17,0.98) 100%
    ),
    radial-gradient(ellipse at 50% 20%, rgba(0,200,240,0.06) 0%, transparent 60%);
}

.lab-portrait::after {
  box-shadow:
    inset 0 0 74px rgba(10,13,17,0.64),
    inset -64px 0 86px rgba(10,13,17,0.82),
    inset 34px 0 54px rgba(10,13,17,0.52),
    inset 0 -72px 96px rgba(10,13,17,0.94);
}

.lab-portrait img {
  -webkit-mask-image:
    linear-gradient(90deg,
      rgba(0,0,0,0.00) 0%,
      rgba(0,0,0,0.88) 11%,
      rgba(0,0,0,1.00) 44%,
      rgba(0,0,0,0.86) 78%,
      rgba(0,0,0,0.00) 100%
    ),
    radial-gradient(ellipse 90% 85% at 50% 40%, rgba(0,0,0,1) 30%, rgba(0,0,0,0.72) 66%, rgba(0,0,0,0.0) 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg,
      rgba(0,0,0,0.00) 0%,
      rgba(0,0,0,0.88) 11%,
      rgba(0,0,0,1.00) 44%,
      rgba(0,0,0,0.86) 78%,
      rgba(0,0,0,0.00) 100%
    ),
    radial-gradient(ellipse 90% 85% at 50% 40%, rgba(0,0,0,1) 30%, rgba(0,0,0,0.72) 66%, rgba(0,0,0,0.0) 100%);
  mask-composite: intersect;
}


/* v203 — Lightbox cursor polish
   Avoid the cursor feeling stuck as a magnifying glass after closing the preview. */
.visual-stills-band .visual-still.has-media {
  cursor: pointer;
}

.visual-lightbox,
.visual-lightbox-card,
.visual-lightbox-image-wrap,
.visual-lightbox-image {
  cursor: default;
}


/* v205 — prevent still band snap after lightbox close */
/* v204 — Keep cursor regular after closing image preview
   Still tiles remain clickable, but no longer force pointer/hand cursor underneath the lightbox. */
.visual-stills-band .visual-still.has-media,
.visual-stills-band .visual-still.has-media:hover,
.visual-stills-band .visual-still.has-media:active {
  cursor: default;
}


/* v209 — WhatsApp inside Course Support drawer, bilingual templates */
/* v208 — landing WhatsApp uses TatagonLab course support message */
/* v207 — WhatsApp default language set to Indonesian */
/* v206 — WhatsApp link with language-based prefilled message */
.lang-option {
  cursor: pointer;
}


/* v209 — WhatsApp moved into Course Support drawer */
.inquiry-wa-link {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 16px;
  padding: 10px 14px;
  border: 1px solid rgba(0,200,240,0.28);
  border-radius: 999px;
  background: rgba(0,200,240,0.065);
  color: var(--blue);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.inquiry-wa-link:hover {
  transform: translateY(-1px);
  background: rgba(0,200,240,0.11);
  border-color: rgba(0,200,240,0.48);
}


/* v210 — Course Support drawer refinement */
@media (min-width: 901px) {
  .inquiry-drawer {
    top: 18px;
    right: 18px;
    height: calc(100vh - 36px);
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,0.09);
    transform: translateX(calc(100% + 28px));
  }

  .inquiry-drawer-inner {
    min-height: auto;
    padding-bottom: 30px;
  }
}

.inquiry-drawer .inquiry-title {
  text-transform: none;
  letter-spacing: -0.04em;
}

.inquiry-wa-link {
  width: 100%;
  gap: 12px;
  justify-content: flex-start;
  margin-top: 18px;
  padding: 12px 14px;
  border-color: rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.055);
  color: rgba(245,247,250,0.92);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.inquiry-wa-link:hover {
  background: rgba(255,255,255,0.085);
  border-color: rgba(255,255,255,0.22);
  color: var(--text-primary-dark);
}

.inquiry-wa-icon {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  color: #25D366;
  background: rgba(37,211,102,0.12);
  border: 1px solid rgba(37,211,102,0.22);
  font-size: 18px;
  line-height: 1;
}

.inquiry-wa-text {
  display: grid;
  gap: 2px;
  line-height: 1.15;
}

.inquiry-wa-text small {
  color: rgba(245,247,250,0.46);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
}

.inquiry-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 2px;
  color: rgba(245,247,250,0.42);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

.inquiry-divider::before,
.inquiry-divider::after {
  content: '';
  height: 1px;
  flex: 1;
  background: rgba(255,255,255,0.08);
}

@media (max-width: 900px) {
  .inquiry-wa-link {
    width: 100%;
  }
}


/* v211 — Course Support drawer final polish */
@media (min-width: 901px) {
  .inquiry-drawer {
    height: auto;
    max-height: calc(100vh - 36px);
  }

  .inquiry-drawer-inner {
    min-height: 0;
    padding-bottom: 36px;
  }
}

.inquiry-form {
  margin-bottom: 0;
}

.inquiry-note {
  margin-top: 12px;
  margin-bottom: 0;
  padding-bottom: 0;
  color: rgba(245,247,250,0.48);
}

.inquiry-wa-icon {
  color: #25D366;
  background: rgba(37,211,102,0.12);
  border-color: rgba(37,211,102,0.24);
}

.inquiry-wa-icon svg {
  width: 18px;
  height: 18px;
  display: block;
  fill: currentColor;
}

.inquiry-divider {
  text-transform: none;
  letter-spacing: 0.02em;
  font-weight: 600;
}

.inquiry-field input,
.inquiry-field select,
.inquiry-field textarea {
  border-color: rgba(255,255,255,0.14);
}


/* v212 — Course Support drawer alignment + neutral category idle border */
@media (min-width: 901px) {
  .inquiry-drawer {
    top: 50%;
    height: auto;
    max-height: calc(100vh - 72px);
    transform: translate3d(calc(100% + 28px), -50%, 0);
    overflow-y: auto;
  }

  .inquiry-drawer.is-open {
    transform: translate3d(0, -50%, 0);
  }
}

.inquiry-field select,
.inquiry-field select:required:invalid,
.inquiry-field select:not(:focus) {
  border-color: rgba(255,255,255,0.14) !important;
  box-shadow: none !important;
}

.inquiry-field select:focus {
  border-color: rgba(0,200,240,0.72) !important;
  box-shadow: 0 0 0 3px rgba(0,200,240,0.10) !important;
}


/* v213 — Course Support drawer attached to right screen edge */
@media (min-width: 901px) {
  .inquiry-drawer {
    top: 0;
    right: 0;
    height: 100vh;
    max-height: 100vh;
    border-radius: 22px 0 0 22px;
    border-top: 0;
    border-right: 0;
    border-bottom: 0;
    transform: translate3d(105%, 0, 0);
  }

  .inquiry-drawer.is-open {
    transform: translate3d(0, 0, 0);
  }

  .inquiry-drawer-inner {
    min-height: 100%;
    padding-top: 44px;
    padding-bottom: 36px;
  }
}


/* v214 — Course Support drawer vertically centered, attached to right edge */
@media (min-width: 901px) {
  .inquiry-drawer {
    top: 50%;
    right: 0;
    height: auto;
    max-height: calc(100vh - 72px);
    border-radius: 22px 0 0 22px;
    border-top: 1px solid rgba(255,255,255,0.09);
    border-left: 1px solid rgba(255,255,255,0.09);
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,0.09);
    transform: translate3d(105%, -50%, 0);
    overflow-y: auto;
  }

  .inquiry-drawer.is-open {
    transform: translate3d(0, -50%, 0);
  }

  .inquiry-drawer-inner {
    min-height: 0;
    padding-top: 34px;
    padding-bottom: 36px;
  }
}


/* v215 — Neutral Category dropdown border unless focused */
#labInquiryCategory,
#labInquiryCategory:hover,
#labInquiryCategory:required:invalid,
#labInquiryCategory:valid {
  border-color: rgba(255,255,255,0.14) !important;
  box-shadow: none !important;
}

#labInquiryCategory:focus,
#labInquiryCategory:focus-visible {
  border-color: rgba(0,200,240,0.72) !important;
  box-shadow: 0 0 0 3px rgba(0,200,240,0.10) !important;
  outline: none !important;
}


/* v216 — sharper architectural drawer + white submit CTA */
@media (min-width: 901px) {
  .inquiry-drawer {
    border-radius: 6px 0 0 6px;
  }
}

.inquiry-wa-link,
.inquiry-field input,
.inquiry-field select,
.inquiry-field textarea {
  border-radius: 6px;
}

.inquiry-submit {
  border-radius: 6px;
  background: var(--text-primary-dark);
  color: var(--dark);
  border: 1px solid var(--text-primary-dark);
  box-shadow: none;
}

.inquiry-submit:hover {
  background: var(--blue);
  color: var(--dark);
  border-color: var(--blue);
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(0,184,230,0.22);
}

.inquiry-submit[disabled] {
  background: var(--text-primary-dark);
  color: var(--dark);
  border-color: var(--text-primary-dark);
  opacity: 0.62;
  cursor: wait;
  transform: none;
  box-shadow: none;
}


/* v229 — FAQ made smaller than Community */
/* v228 — FAQ compacted */
/* v227 — FAQ section added */
/* v226 — add missing measured grid-height script */
/* v225 — measured D5 stability fix */
/* v224 — D5 section stable on course-card expansion */
/* v223 — Progressive faded module preview added */
/* v222 — Course hover previews and full syllabus drawer */
/* v221 — Expandable course cards added */
/* v220 — Stats counter animation added */
/* v219 — The Shift section inserted before Courses */
/* v218 — Tatagon Visual teaser copy refined */
/* v217 — Hero CTA focus: TatagonLab course-first */
.hero-ctas {
  justify-content: center;
}

.hero-ctas .btn-primary {
  border-radius: 6px;
}


/* v219 — The Shift problem section */
.shift-section {
  padding: 88px 48px 92px;
  background:
    radial-gradient(ellipse 58% 42% at 84% 18%, rgba(0,200,240,0.075), transparent 62%),
    linear-gradient(180deg, var(--dark-2) 0%, var(--dark) 100%);
  border-top: 1px solid var(--border-dark);
  border-bottom: 1px solid var(--border-dark);
  overflow: hidden;
}

.shift-inner {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(340px, 0.72fr);
  gap: clamp(42px, 7vw, 86px);
  align-items: center;
}

.shift-copy {
  max-width: 720px;
}

.shift-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  color: rgba(0,200,240,0.86);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.shift-label::before {
  content: '';
  width: 18px;
  height: 10px;
  background: var(--blue);
  transform: skewX(-24deg);
  box-shadow: 0 0 14px rgba(0,200,240,0.35);
}

.shift-title {
  margin: 0 0 26px;
  font-family: 'League Spartan', 'Inter', sans-serif;
  font-size: clamp(38px, 5vw, 68px);
  line-height: 0.92;
  letter-spacing: -0.055em;
  color: var(--text-primary-dark);
  text-transform: uppercase;
}

.shift-title span {
  display: block;
  color: var(--blue);
}

.shift-text {
  display: grid;
  gap: 16px;
  max-width: 620px;
  color: rgba(245,247,250,0.68);
  font-size: 15px;
  line-height: 1.72;
}

.shift-text strong {
  color: rgba(245,247,250,0.92);
  font-weight: 700;
}

.shift-cta {
  margin-top: 30px;
}

.shift-proof {
  display: grid;
  gap: 12px;
}

.shift-proof-card {
  position: relative;
  padding: 22px 22px 20px;
  border: 1px solid rgba(255,255,255,0.085);
  border-radius: 6px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018)),
    rgba(15,19,24,0.64);
  overflow: hidden;
}

.shift-proof-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 42px;
  height: 2px;
  background: rgba(0,200,240,0.82);
}

.shift-proof-num {
  display: block;
  margin-bottom: 12px;
  color: rgba(0,200,240,0.92);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.shift-proof-card h3 {
  margin: 0 0 8px;
  color: var(--text-primary-dark);
  font-family: 'League Spartan', 'Inter', sans-serif;
  font-size: 24px;
  line-height: 0.98;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}

.shift-proof-card p {
  color: rgba(245,247,250,0.56);
  font-size: 12px;
  line-height: 1.58;
}

@media (max-width: 900px) {
  .shift-section {
    padding: 64px 20px 68px;
  }

  .shift-inner {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .shift-title {
    font-size: clamp(36px, 10vw, 48px);
  }

  .shift-text {
    font-size: 14px;
  }

  .shift-proof-card {
    padding: 20px;
  }
}


/* v220 — Stats counter animation */
.stat-num[data-counter] {
  font-variant-numeric: tabular-nums;
}

.stat-infinity {
  display: inline-flex;
  align-items: center;
  height: 28px;
}

.infinity-mark {
  width: 36px;
  height: 22px;
  display: block;
  overflow: visible;
}

.infinity-mark path {
  fill: none;
  stroke: var(--text-primary-dark);
  stroke-width: 4.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 140;
  stroke-dashoffset: 140;
  filter: drop-shadow(0 0 7px rgba(0,200,240,0.10));
}

.stat-infinity.is-counted .infinity-mark path {
  animation: drawInfinity 1.05s cubic-bezier(.19, 1, .22, 1) forwards;
}

@keyframes drawInfinity {
  0% {
    stroke-dashoffset: 140;
    opacity: 0.2;
  }
  70% {
    opacity: 1;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}


/* v221 — Expandable course cards with first card open */
.course-card-expandable {
  cursor: pointer;
}

.course-card-expandable .course-body {
  position: relative;
}

.course-card-expandable .course-title-link,
.course-card-expandable .course-thumb,
.course-card-expandable .btn-capsule {
  cursor: pointer;
}

.course-card-expandable::after {
  content: '+';
  position: absolute;
  top: 204px;
  right: 18px;
  z-index: 5;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(0,200,240,0.20);
  background: rgba(255,255,255,0.90);
  color: #0099BF;
  font-family: 'JetBrains Mono', monospace;
  font-size: 15px;
  line-height: 1;
  transition:
    transform 0.26s ease,
    background 0.26s ease,
    color 0.26s ease,
    border-color 0.26s ease;
}

.course-card-expandable.is-expanded::after {
  content: '–';
  transform: rotate(180deg);
  background: var(--blue);
  color: var(--dark);
  border-color: var(--blue);
}

.course-meta-line {
  margin: -4px 0 14px;
  color: #7B8492;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.45;
}

.course-modules {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transform: translateY(-4px);
  transition:
    grid-template-rows 0.34s cubic-bezier(.19, 1, .22, 1),
    opacity 0.22s ease,
    transform 0.34s cubic-bezier(.19, 1, .22, 1),
    margin-top 0.34s cubic-bezier(.19, 1, .22, 1);
  overflow: hidden;
  margin-top: 0;
}

.course-card-expandable.is-expanded .course-modules {
  grid-template-rows: 1fr;
  opacity: 1;
  transform: translateY(0);
  margin-top: 6px;
}

.course-modules > * {
  min-height: 0;
}

.course-modules-label {
  margin-bottom: 9px;
  color: #0099BF;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.course-modules ul {
  list-style: none;
  display: grid;
  gap: 7px;
  padding: 0 0 14px;
  margin: 0;
  border-bottom: 1px solid var(--light-2);
}

.course-modules li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 8px;
  color: var(--text-secondary-light);
  font-size: 12px;
  line-height: 1.45;
}

.course-modules li span {
  color: #0099BF;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
}

.course-card-expandable.is-expanded {
  border-color: rgba(0,200,240,0.42);
  box-shadow: 0 14px 38px rgba(0,0,0,0.085);
}

@media (max-width: 900px) {
  .course-card-expandable::after {
    top: 188px;
  }
}


/* v222 — Hover preview + full syllabus drawer */
@media (hover: hover) and (pointer: fine) {
  .course-card-expandable:hover {
    border-color: rgba(0,200,240,0.42);
  }
}

.course-modules ul {
  padding-bottom: 12px;
  border-bottom: none;
}

.course-syllabus-trigger {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 2px;
  padding: 10px 0 0;
  border: 0;
  border-top: 1px solid var(--light-2);
  background: transparent;
  color: #0099BF;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-align: left;
  cursor: pointer;
}

.course-syllabus-trigger span {
  font-family: 'JetBrains Mono', monospace;
  transition: transform 0.22s ease;
}

.course-syllabus-trigger:hover span {
  transform: translateY(2px);
}

body.syllabus-open {
  overflow: hidden;
}

.syllabus-backdrop {
  position: fixed;
  inset: 0;
  z-index: 270;
  background: rgba(5,8,12,0.56);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.34s ease, visibility 0.34s ease;
}

.syllabus-backdrop.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.syllabus-drawer {
  position: fixed;
  top: 50%;
  right: 0;
  z-index: 280;
  width: min(560px, 100vw);
  max-height: calc(100vh - 72px);
  color: var(--text-primary-dark);
  background:
    radial-gradient(ellipse 70% 38% at 50% 0%, rgba(0,200,240,0.095) 0%, transparent 62%),
    linear-gradient(180deg, rgba(15,19,24,0.985) 0%, rgba(8,11,15,0.985) 100%);
  border: 1px solid rgba(255,255,255,0.09);
  border-right: 0;
  border-radius: 6px 0 0 6px;
  box-shadow: -30px 0 80px rgba(0,0,0,0.48);
  transform: translate3d(105%, -50%, 0);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  overflow-y: auto;
  transition:
    transform 0.48s cubic-bezier(.19, 1, .22, 1),
    opacity 0.28s ease,
    visibility 0.28s ease;
}

.syllabus-drawer.is-open {
  transform: translate3d(0, -50%, 0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.syllabus-drawer-inner {
  padding: 34px 34px 36px;
}

.syllabus-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 22px;
}

.syllabus-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(0,200,240,0.86);
  font-weight: 600;
}

.syllabus-kicker::before {
  content: '';
  width: 16px;
  height: 9px;
  background: var(--blue);
  transform: skewX(-24deg);
  box-shadow: 0 0 14px rgba(0,200,240,0.35);
}

.syllabus-title {
  margin: 0 0 10px;
  font-family: 'League Spartan', 'Inter', sans-serif;
  font-size: clamp(34px, 4vw, 48px);
  line-height: 0.92;
  letter-spacing: -0.052em;
  text-transform: uppercase;
}

.syllabus-desc {
  max-width: 390px;
  color: rgba(245,247,250,0.66);
  font-size: 13px;
  line-height: 1.65;
}

.syllabus-close {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 50%;
  background: rgba(255,255,255,0.045);
  color: var(--text-primary-dark);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.62;
  transition: all 0.2s;
}

.syllabus-close:hover {
  opacity: 1;
  color: var(--blue);
  border-color: rgba(0,200,240,0.45);
  transform: rotate(90deg);
}

.syllabus-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
}

.syllabus-meta span {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 6px;
  background: rgba(255,255,255,0.045);
  color: rgba(245,247,250,0.68);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.syllabus-list {
  display: grid;
  gap: 10px;
  padding: 0;
  margin: 0;
  list-style: none;
  counter-reset: syllabus;
}

.syllabus-list li {
  counter-increment: syllabus;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid rgba(255,255,255,0.075);
}

.syllabus-list li::before {
  content: counter(syllabus, decimal-leading-zero);
  color: rgba(0,200,240,0.86);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding-top: 3px;
}

.syllabus-list strong {
  display: block;
  margin-bottom: 4px;
  color: var(--text-primary-dark);
  font-size: 13px;
  line-height: 1.35;
}

.syllabus-list p {
  color: rgba(245,247,250,0.56);
  font-size: 12px;
  line-height: 1.55;
}

.syllabus-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 24px;
}

.syllabus-actions a {
  justify-content: center;
  border-radius: 6px;
}

@media (max-width: 900px) {
  .syllabus-drawer {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    max-height: 88vh;
    border-right: 0;
    border-left: 0;
    border-bottom: 0;
    border-radius: 18px 18px 0 0;
    transform: translateY(105%);
  }

  .syllabus-drawer.is-open {
    transform: translateY(0);
  }

  .syllabus-drawer-inner {
    padding: 28px 20px 24px;
  }

  .syllabus-actions {
    grid-template-columns: 1fr;
  }
}


/* v223 — Progressive faded module preview */
.course-modules li.module-fade-1 {
  opacity: 0.58;
}

.course-modules li.module-fade-2 {
  opacity: 0.46;
}

.course-modules li.module-fade-3 {
  opacity: 0.22;
}

.course-card-expandable.is-expanded .course-modules ul {
  position: relative;
}

.course-card-expandable.is-expanded .course-modules ul::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 26px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.00), rgba(255,255,255,0.82));
}

.course-syllabus-trigger {
  position: relative;
  z-index: 2;
}


/* v224 — Keep D5 Render section still while ComfyUI cards expand */
@media (min-width: 901px) {
  .tool-group:first-of-type .courses-grid {
    min-height: 646px;
    align-items: stretch;
  }
}


/* v225 — Measured ComfyUI grid height to stop D5 section jump */
@media (min-width: 901px) {
  .courses-grid[data-stable-course-grid="true"] {
    align-items: start;
    min-height: var(--stable-course-grid-height, auto);
    transition: min-height 0.24s ease;
  }
}


/* v227 — FAQ accordion */
.faq-section {
  padding: 82px 48px 88px;
  background:
    radial-gradient(ellipse 58% 44% at 18% 0%, rgba(0,200,240,0.055), transparent 62%),
    var(--dark);
  border-top: 1px solid var(--border-dark);
}

.faq-inner {
  max-width: 980px;
  margin: 0 auto;
}

.faq-head {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 70px);
  align-items: end;
  margin-bottom: 34px;
}

.faq-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  color: rgba(0,200,240,0.86);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.faq-kicker::before {
  content: '';
  width: 18px;
  height: 10px;
  background: var(--blue);
  transform: skewX(-24deg);
  box-shadow: 0 0 14px rgba(0,200,240,0.35);
}

.faq-title {
  font-family: 'League Spartan', 'Inter', sans-serif;
  font-size: clamp(34px, 4.5vw, 58px);
  line-height: 0.94;
  letter-spacing: -0.055em;
  text-transform: uppercase;
  color: var(--text-primary-dark);
}

.faq-desc {
  color: rgba(245,247,250,0.62);
  font-size: 14px;
  line-height: 1.7;
  max-width: 460px;
}

.faq-list {
  display: grid;
  border-top: 1px solid rgba(255,255,255,0.085);
}

.faq-item {
  border-bottom: 1px solid rgba(255,255,255,0.085);
}

.faq-item summary {
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px;
  gap: 18px;
  align-items: center;
  padding: 22px 0;
  cursor: pointer;
  color: rgba(245,247,250,0.88);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  color: var(--blue);
  font-family: 'JetBrains Mono', monospace;
  font-size: 17px;
  line-height: 1;
  transition:
    transform 0.24s ease,
    border-color 0.24s ease,
    background 0.24s ease;
}

.faq-item[open] .faq-icon {
  transform: rotate(45deg);
  border-color: rgba(0,200,240,0.42);
  background: rgba(0,200,240,0.075);
}

.faq-answer {
  max-width: 760px;
  padding: 0 56px 22px 0;
  color: rgba(245,247,250,0.58);
  font-size: 13px;
  line-height: 1.72;
}

.faq-answer strong {
  color: rgba(245,247,250,0.88);
  font-weight: 700;
}

@media (max-width: 900px) {
  .faq-section {
    padding: 62px 20px 68px;
  }

  .faq-head {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-bottom: 26px;
  }

  .faq-title {
    font-size: clamp(34px, 10vw, 46px);
  }

  .faq-item summary {
    padding: 20px 0;
    font-size: 14px;
  }

  .faq-answer {
    padding-right: 0;
    font-size: 13px;
  }
}


/* v228 — Compact FAQ section */
.faq-section {
  padding: 54px 48px 58px;
}

.faq-inner {
  max-width: 860px;
}

.faq-head {
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
  gap: 34px;
  align-items: center;
  margin-bottom: 22px;
}

.faq-kicker {
  margin-bottom: 8px;
  font-size: 9px;
}

.faq-title {
  font-size: clamp(30px, 3.2vw, 42px);
  line-height: 0.96;
}

.faq-desc {
  font-size: 13px;
  line-height: 1.55;
  max-width: 420px;
}

.faq-item summary {
  padding: 14px 0;
  font-size: 13px;
}

.faq-icon {
  width: 24px;
  height: 24px;
  font-size: 15px;
}

.faq-answer {
  padding: 0 50px 15px 0;
  font-size: 12px;
  line-height: 1.65;
}

@media (max-width: 900px) {
  .faq-section {
    padding: 44px 20px 48px;
  }

  .faq-head {
    grid-template-columns: 1fr;
    gap: 8px;
    margin-bottom: 18px;
  }

  .faq-title {
    font-size: clamp(28px, 8vw, 38px);
  }

  .faq-item summary {
    padding: 14px 0;
    font-size: 13px;
  }

  .faq-answer {
    padding-right: 0;
    padding-bottom: 14px;
  }
}


/* v229 — FAQ as compact support strip */
.faq-section {
  padding: 34px 48px 38px;
  background:
    linear-gradient(180deg, rgba(8,11,15,0.98), rgba(8,11,15,1));
}

.faq-inner {
  max-width: 760px;
}

.faq-head {
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 24px;
  margin-bottom: 14px;
  align-items: center;
}

.faq-kicker {
  margin-bottom: 6px;
  font-size: 8px;
  letter-spacing: 0.14em;
}

.faq-kicker::before {
  width: 14px;
  height: 8px;
}

.faq-title {
  font-size: clamp(24px, 2.4vw, 32px);
  letter-spacing: -0.045em;
}

.faq-desc {
  max-width: 360px;
  font-size: 11px;
  line-height: 1.45;
  color: rgba(245,247,250,0.50);
}

.faq-item summary {
  padding: 10px 0;
  grid-template-columns: minmax(0, 1fr) 22px;
  font-size: 12px;
  line-height: 1.28;
}

.faq-icon {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  font-size: 13px;
}

.faq-answer {
  max-width: 680px;
  padding: 0 42px 11px 0;
  font-size: 11px;
  line-height: 1.55;
  color: rgba(245,247,250,0.52);
}

@media (max-width: 900px) {
  .faq-section {
    padding: 32px 20px 36px;
  }

  .faq-inner {
    max-width: none;
  }

  .faq-head {
    grid-template-columns: 1fr;
    gap: 6px;
    margin-bottom: 12px;
  }

  .faq-title {
    font-size: 28px;
  }

  .faq-desc {
    font-size: 11px;
  }

  .faq-item summary {
    padding: 11px 0;
    font-size: 12px;
  }

  .faq-answer {
    padding: 0 0 12px;
    font-size: 11px;
  }
}


/* v288 — Navbar visual center moved 2px right */
/* v287 — Pipeline toggle moved 10px up while lower items remain 10px down */
/* v286 — Lower black Pipeline items moved 10px down */
/* v285 — Strong Gaussian-style inactive Pipeline title blur */
/* v284 — Black Pipeline band extended 20px more, controls recentered, inactive titles brighter with wider blur */
/* v283 — Extended lower black Pipeline band 20px downward */
/* v282 — Navbar visual center moved 4px more right */
/* v281 — Navbar visual center moved 2px right */
/* v280 — Navbar visual center shifted 14px left */
/* v279 — Brighter off-mode Pipeline production list */
/* v278 — Brighter but blurrier off-state right title and tighter toggle cue */
/* v277 — Brighter 2px even-offset toggle cue */
/* v276 — Grey pulsing toggle cue */
/* v275 — Aligned Pipeline side titles and subtle toggle click cue */
/* v274 — Compact lower Pipeline band and right title alignment */
/* v273 — Blue sweep activation for Pipeline control capsules */
/* v272 — Clean one-list Pipeline control */
/* v270 — Sharper Pipeline node typography and whole-pixel node positioning */
/* v269 — Toggle standalone, checklist items as capsules */
/* v268 — Removed blue hue from light Pipeline canvas background */
/* v267 — Default spline thickness increased to 3px with lighter neutral color */
/* v266 — Curved ComfyUI-style spline node connections */
/* v265 — Node socket ports moved 3px from card edge */
/* v264 — ComfyUI-style inner node socket ports */
/* v252 — Hero locked hold removes initial downward drift */
/* v245 — Forced top-return momentum removed; smoother natural return kept */
/* v243 — Based on v239, hero text raised another 10px */
/* v239 — Hero text slightly raised */
/* v238 — Tatagon Visual intro nudge removed */
/* v237 — Hero hard-release bump refined */
/* v236 — ChatGPT preview scrollTop guard skipped from production naming */
/* v234 — Hero locked hold + late release */
/* v233 — Hero premium hold initial attempt */
/* v259 — Pipeline title uses intersection blend instead of instant color switch */
/* v255 — Removed toggle hint text */
/* v232 — Hero trust badge layout updated */
/* v231 — Join Waitlist button color updated */
/* v230 — FAQ two-column desktop layout */
@media (min-width: 901px) {
  .faq-inner {
    max-width: 1040px;
  }

  .faq-head {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
  }

  .faq-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 34px;
    border-top: 0;
  }

  .faq-item {
    border-top: 1px solid rgba(255,255,255,0.085);
  }

  .faq-answer {
    padding-right: 28px;
  }
}


/* v231 — Join Waitlist CTA white default, blue on hover */
.cta-email-form-wrap .btn-primary {
  background: var(--text-primary-dark);
  color: var(--dark);
  border-color: var(--text-primary-dark);
  box-shadow: none;
}

.cta-email-form-wrap .btn-primary:hover {
  background: var(--blue);
  color: var(--dark);
  border-color: var(--blue);
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(0,184,230,0.22);
}


/* v232 — Hero trust badges changed to technical index strip */
.hero-tech-index {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, auto));
  gap: 0;
  align-items: stretch;
  width: fit-content;
  max-width: 100%;
  margin-top: 2px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.12);
}

.hero-tech-index .trust-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 8px;
  padding: 0 18px 0 0;
  margin: 0 18px 0 0;
  border-right: 1px solid rgba(255,255,255,0.105);
  color: rgba(245,247,250,0.66);
  font-size: 11px;
  line-height: 1.25;
  letter-spacing: 0.015em;
}

.hero-tech-index .trust-item:last-child {
  border-right: none;
  margin-right: 0;
  padding-right: 0;
}

.hero-tech-index .trust-item::before {
  content: none;
}

.trust-num {
  color: rgba(0,200,240,0.88);
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

@media (max-width: 900px) {
  .hero-tech-index {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 10px;
  }

  .hero-tech-index .trust-item {
    padding-right: 12px;
    margin-right: 0;
    border-right: none;
  }
}


/* v246 - Hero hold with v240-style momentum + shorter 20px soft stop
   Desktop only: keeps the headline visually anchored, adds a subtle weighted preload,
   then releases firmly with easing only in the final 20px. */
@media (min-width: 901px) and (hover: hover) and (pointer: fine) {
  .hero {
    min-height: calc(100vh + clamp(180px, 28vh, 320px));
  }

  .hero-content {
    margin-top: calc(-10px - clamp(106px, 15.5vh, 176px));
    transform: translate3d(0, var(--hero-pin-y, 0px), 0);
    will-change: transform;
  }
}

@media (max-width: 900px), (prefers-reduced-motion: reduce) {
  .hero-content {
    --hero-pin-y: 0px !important;
    transform: none;
  }
}


/* v249 — Tatagon Visual still band releases vertical scroll immediately at horizontal edge */
/* v248 — Tatagon Visual still band uses locked wheel scrolling until horizontal edge */


/* v250 — Fullscreen Shift section with clickable workflow toggle */
.shift-section {
  min-height: calc(100vh - var(--nav-h));
  display: grid;
  align-items: center;
  padding: clamp(82px, 10vh, 118px) 48px clamp(84px, 10vh, 122px);
  background:
    radial-gradient(ellipse 54% 42% at 82% 22%, rgba(0,200,240,0.085), transparent 62%),
    radial-gradient(ellipse 40% 30% at 12% 84%, rgba(0,200,240,0.04), transparent 60%),
    linear-gradient(180deg, var(--dark-2) 0%, var(--dark) 100%);
}

.shift-inner {
  width: 100%;
  grid-template-columns: minmax(0, 0.95fr) minmax(420px, 0.78fr);
  gap: clamp(54px, 8vw, 112px);
}

.shift-copy { max-width: 760px; }

.shift-title {
  max-width: 780px;
  margin-bottom: 28px;
  font-size: clamp(46px, 6vw, 84px);
  line-height: 0.9;
}

.shift-text { max-width: 660px; }

.shift-interactive-module {
  position: relative;
  isolation: isolate;
  padding: clamp(28px, 4vw, 42px);
  border: 1px solid rgba(255,255,255,0.085);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.055), rgba(255,255,255,0.018)),
    rgba(15,19,24,0.58);
  box-shadow:
    0 28px 78px rgba(0,0,0,0.28),
    inset 0 1px 0 rgba(255,255,255,0.055);
  overflow: hidden;
}

.shift-interactive-module::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,200,240,0.62), transparent);
  opacity: 0.72;
}

.shift-interactive-module::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.24;
  background-image:
    linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse at 74% 18%, rgba(0,0,0,0.9), transparent 68%);
}

.shift-toggle-hint {
  margin-bottom: 18px;
  color: rgba(0,200,240,0.82);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.shift-toggle-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  margin-bottom: 32px;
}

.toggle-label {
  color: rgba(245,247,250,0.32);
  font-family: 'League Spartan', 'Inter', sans-serif;
  font-size: clamp(22px, 2.25vw, 34px);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  transition:
    color 0.42s ease,
    opacity 0.42s ease,
    transform 0.42s cubic-bezier(.19, 1, .22, 1);
}

.toggle-label:last-child { text-align: right; }
.toggle-label.is-active { color: var(--text-primary-dark); opacity: 1; }

.shift-toggle-btn {
  position: relative;
  width: 64px;
  height: 34px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  background: rgba(255,255,255,0.075);
  cursor: pointer;
  outline: none;
  transition:
    background 0.42s ease,
    border-color 0.42s ease,
    box-shadow 0.42s ease;
}

.shift-toggle-btn::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 999px;
  border: 1px solid rgba(0,200,240,0);
  opacity: 0;
  transform: scale(0.92);
  transition:
    opacity 0.36s ease,
    transform 0.36s ease,
    border-color 0.36s ease;
}

.shift-toggle-btn:hover::after,
.shift-toggle-btn:focus-visible::after {
  opacity: 1;
  transform: scale(1);
  border-color: rgba(0,200,240,0.25);
}

.shift-toggle-btn[aria-pressed="true"] {
  background: rgba(0,200,240,0.13);
  border-color: rgba(0,200,240,0.74);
  box-shadow: 0 0 28px rgba(0,200,240,0.10);
}

.toggle-knob {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(160,168,180,0.92);
  box-shadow:
    0 5px 14px rgba(0,0,0,0.32),
    inset 0 1px 0 rgba(255,255,255,0.28);
  transition:
    transform 0.52s cubic-bezier(.19, 1, .22, 1),
    background 0.38s ease,
    box-shadow 0.38s ease;
}

.shift-toggle-btn[aria-pressed="true"] .toggle-knob {
  transform: translateX(30px);
  background: var(--blue);
  box-shadow:
    0 0 16px rgba(0,200,240,0.42),
    0 5px 14px rgba(0,0,0,0.32),
    inset 0 1px 0 rgba(255,255,255,0.30);
}

.shift-checklist { display: grid; gap: 10px; }

.check-item {
  display: grid;
  grid-template-columns: 32px 20px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 46px;
  padding: 12px 0;
  border-top: 1px solid rgba(255,255,255,0.07);
  opacity: 0.46;
  transform: translateY(6px);
  transition:
    opacity 0.54s ease,
    transform 0.54s cubic-bezier(.19, 1, .22, 1),
    border-color 0.42s ease;
}

.check-index {
  color: rgba(0,200,240,0.46);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  transition: color 0.42s ease;
}

.check-box {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 4px;
  background: rgba(255,255,255,0.025);
  transition:
    background 0.42s ease,
    border-color 0.42s ease,
    box-shadow 0.42s ease;
}

.check-box::after {
  content: '✓';
  color: var(--dark);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  opacity: 0;
  transform: scale(0.45);
  transition:
    opacity 0.38s ease,
    transform 0.38s cubic-bezier(.19, 1, .22, 1);
}

.check-item p {
  margin: 0;
  color: rgba(245,247,250,0.58);
  font-size: 14px;
  line-height: 1.42;
  transition: color 0.42s ease;
}

.check-item.is-checked {
  opacity: 1;
  transform: translateY(0);
  border-color: rgba(255,255,255,0.11);
}

.check-item.is-checked .check-index { color: rgba(0,200,240,0.88); }

.check-item.is-checked .check-box {
  background: var(--blue);
  border-color: var(--blue);
  box-shadow: 0 0 14px rgba(0,200,240,0.24);
}

.check-item.is-checked .check-box::after {
  opacity: 1;
  transform: scale(1);
}

.check-item.is-checked p { color: var(--text-primary-dark); }
.shift-section.is-control-mode .shift-toggle-hint { color: rgba(245,247,250,0.56); }

@media (max-width: 900px) {
  .shift-section {
    min-height: auto;
    padding: 68px 20px 72px;
  }

  .shift-inner {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .shift-title {
    font-size: clamp(38px, 11vw, 56px);
  }

  .shift-interactive-module {
    padding: 24px 20px;
  }

  .shift-toggle-header {
    grid-template-columns: 1fr;
    justify-items: start;
    gap: 13px;
  }

  .toggle-label:last-child {
    text-align: left;
  }

  .shift-toggle-btn {
    order: 2;
  }

  #label-control {
    order: 3;
  }

  .check-item {
    grid-template-columns: 28px 18px minmax(0, 1fr);
    gap: 10px;
  }

  .check-item p {
    font-size: 13px;
  }
}


/* v251 — Shift section split into node canvas + lower control module */
.shift-section {
  min-height: 100vh;
  display: grid;
  grid-template-rows: minmax(340px, 55vh) minmax(360px, 45vh);
  align-items: stretch;
  padding: 0 48px;
  background:
    radial-gradient(ellipse 48% 36% at 78% 18%, rgba(0,200,240,0.09), transparent 64%),
    radial-gradient(ellipse 38% 28% at 18% 88%, rgba(0,200,240,0.04), transparent 60%),
    linear-gradient(180deg, var(--dark-2) 0%, var(--dark) 100%);
}

.node-canvas {
  position: relative;
  width: 100%;
  max-width: 1240px;
  height: 100%;
  min-height: 0;
  margin: 0 auto;
  overflow: hidden;
  border-left: 1px solid rgba(255,255,255,0.055);
  border-right: 1px solid rgba(255,255,255,0.055);
  border-bottom: 1px solid rgba(255,255,255,0.085);
  background:
    radial-gradient(ellipse 42% 42% at 50% 44%, rgba(0,200,240,0.075), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.006));
  touch-action: pan-y;
  user-select: none;
}

.node-canvas::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.42;
  background-image:
    linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 64px 64px;
}

.node-canvas::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(10,13,17,0.54) 0%, transparent 26%, transparent 72%, rgba(10,13,17,0.42) 100%),
    radial-gradient(ellipse at 50% 100%, rgba(0,200,240,0.07), transparent 54%);
}

.node-canvas-label {
  position: absolute;
  top: clamp(20px, 4vh, 34px);
  left: clamp(22px, 3vw, 42px);
  z-index: 4;
  color: rgba(0,200,240,0.82);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  pointer-events: none;
}

.node-connections {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

.node-connections line {
  stroke: rgba(0,200,240,0.58);
  stroke-width: 1.25;
  stroke-linecap: round;
  filter: drop-shadow(0 0 8px rgba(0,200,240,0.22));
}

.workflow-node {
  position: absolute;
  z-index: 3;
  width: clamp(172px, 16vw, 224px);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(18,23,31,0.94), rgba(10,13,17,0.90));
  box-shadow:
    0 18px 50px rgba(0,0,0,0.34),
    inset 0 1px 0 rgba(255,255,255,0.06);
  cursor: grab;
  overflow: visible;
  transform: none;
  transition:
    border-color 0.22s ease,
    box-shadow 0.22s ease,
    filter 0.22s ease;
  will-change: auto;
  touch-action: none;
}

.workflow-node.is-dragging {
  cursor: grabbing;
  border-color: rgba(0,200,240,0.56);
  box-shadow:
    0 24px 70px rgba(0,0,0,0.44),
    0 0 28px rgba(0,200,240,0.12),
    inset 0 1px 0 rgba(255,255,255,0.08);
  filter: brightness(1.04);
}

.workflow-node-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 13px;
  border-bottom: 1px solid rgba(255,255,255,0.075);
  color: rgba(245,247,250,0.86);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.node-status {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 12px rgba(0,200,240,0.56);
}

.workflow-node-body {
  display: grid;
  gap: 5px;
  padding: 14px 13px 15px;
}

.workflow-node-body span {
  color: rgba(245,247,250,0.42);
  font-size: 11px;
  line-height: 1.35;
}

.workflow-node-body strong {
  color: rgba(245,247,250,0.92);
  font-size: 13px;
  line-height: 1.25;
}

.node-geometry { left: 11%; top: 39%; }
.node-lighting { left: 42%; top: 24%; }
.node-render { left: 70%; top: 48%; }

.shift-lower-shell {
  position: relative;
  z-index: 5;
  width: 100%;
  max-width: 1240px;
  min-height: 0;
  height: 100%;
  margin: 0 auto;
  display: grid;
  align-items: center;
  padding: clamp(26px, 4vh, 38px) 0 clamp(30px, 4vh, 44px);
}

.shift-lower-shell::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,200,240,0.34), transparent);
  pointer-events: none;
}

.shift-lower-shell .shift-inner {
  max-width: none;
  min-height: 0;
}

@media (min-width: 901px) {
  .shift-lower-shell .shift-title {
    font-size: clamp(36px, 4.35vw, 64px);
    margin-bottom: 20px;
  }

  .shift-lower-shell .shift-label {
    margin-bottom: 14px;
  }

  .shift-lower-shell .shift-text {
    gap: 11px;
    font-size: 14px;
    line-height: 1.58;
  }

  .shift-lower-shell .shift-interactive-module {
    padding: clamp(22px, 2.7vw, 32px);
  }

  .shift-lower-shell .shift-toggle-header {
    margin-bottom: 22px;
  }

  .shift-lower-shell .check-item {
    min-height: 38px;
    padding: 9px 0;
  }
}

@media (max-width: 900px) {
  .shift-section {
    min-height: auto;
    grid-template-rows: auto auto;
    padding: 0 20px;
  }

  .node-canvas {
    height: 56vh;
    min-height: 360px;
    border-left: none;
    border-right: none;
  }

  .workflow-node {
    width: min(46vw, 190px);
  }

  .node-geometry { left: 5%; top: 32%; }
  .node-lighting { left: 45%; top: 18%; }
  .node-render { left: 38%; top: 58%; }

  .shift-lower-shell {
    padding: 42px 0 58px;
  }
}

@media (max-width: 560px) {
  .node-canvas {
    height: 52vh;
    min-height: 330px;
  }

  .workflow-node {
    width: 168px;
  }

  .workflow-node-head {
    padding: 10px 11px;
    font-size: 9px;
  }

  .workflow-node-body {
    padding: 12px 11px 13px;
  }

  .node-geometry { left: 4%; top: 27%; }
  .node-lighting { left: 34%; top: 12%; }
  .node-render { left: 24%; top: 62%; }
}



/* v253 — The Pipeline canvas with production-preview nodes */
#shift.shift-section {
  grid-template-rows: minmax(420px, 55vh) minmax(360px, 45vh);
}

#shift .node-canvas {
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
  border-left: none;
  border-right: none;
  border-bottom-color: rgba(0,0,0,0.12);
  background: linear-gradient(180deg, #F7F7F4 0%, #EFEFEB 100%);
}

#shift .node-canvas::before {
  opacity: 0.70;
  background-image: radial-gradient(circle, rgba(10,13,17,0.20) 1px, transparent 1.5px);
  background-size: 12px 12px;
}

#shift .node-canvas::after {
  background:
    linear-gradient(180deg, rgba(247,247,244,0.10) 0%, transparent 36%, transparent 72%, rgba(10,13,17,0.06) 100%);
}

.pipeline-canvas-copy {
  position: absolute;
  left: clamp(28px, 3.6vw, 56px);
  top: clamp(26px, 5vh, 48px);
  z-index: 5;
  width: min(360px, 30vw);
  pointer-events: none;
}

#shift .node-canvas-label {
  position: static;
  display: inline-flex;
  margin-bottom: 12px;
  color: rgba(0,0,0,0.56);
}

.pipeline-canvas-title {
  margin: 0;
  max-width: 360px;
  color: #05070A;
  font-family: 'League Spartan', 'Inter', sans-serif;
  font-size: clamp(42px, 4.4vw, 72px);
  font-weight: 900;
  line-height: 0.86;
  letter-spacing: -0.06em;
  text-transform: uppercase;
}

.pipeline-canvas-title .pipeline-title-difference {
  position: relative;
  display: block;
  color: #05070A;
  mix-blend-mode: normal;
}

.pipeline-canvas-title .pipeline-title-difference::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  color: #F5F7FA;
  pointer-events: none;
  clip-path: inset(var(--pipeline-title-white-cut, 100%) 0 0 0);
  -webkit-clip-path: inset(var(--pipeline-title-white-cut, 100%) 0 0 0);
}

.pipeline-canvas-title .pipeline-title-accent {
  display: block;
  margin-top: 12px;
  color: var(--blue);
}

#shift .node-connections {
  z-index: 2;
}

#shift .node-connections path {
  fill: none;
  stroke: rgba(10,13,17,0.22);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: none;
  transition: stroke 0.42s ease, filter 0.42s ease, stroke-width 0.42s ease;
}

#shift.is-control-mode .node-connections path {
  stroke: rgba(10,13,17,0.22);
  stroke-width: 3;
  filter: none;
}

#shift.is-control-mode .node-connections path.is-active {
  stroke: rgba(0,200,240,0.76);
  stroke-width: 3;
  stroke-dasharray: 12 14;
  filter: drop-shadow(0 0 8px rgba(0,200,240,0.35));
  animation: pipelineLinkFlow 1.05s linear infinite;
}

#shift .workflow-node {
  width: clamp(156px, 13vw, 218px);
  border-color: rgba(0,0,0,0.18);
  border-radius: 7px;
  background: #202224;
  box-shadow:
    0 18px 36px rgba(0,0,0,0.24),
    0 2px 0 rgba(255,255,255,0.18) inset;
}

#shift .workflow-node::before,
#shift .workflow-node::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #69727E;
  border: 1px solid rgba(10,13,17,0.72);
  box-shadow:
    0 0 0 1px rgba(245,247,250,0.08),
    inset 0 1px 0 rgba(255,255,255,0.22);
  transform: translateY(-50%);
  z-index: 8;
  pointer-events: none;
}

#shift .workflow-node::before { left: 3px; }
#shift .workflow-node::after { right: 3px; }

#shift .workflow-node::before {
  background: #7A8390;
}

#shift .workflow-node::after {
  background: #6F7F8D;
}

#shift.is-control-mode .workflow-node::before,
#shift.is-control-mode .workflow-node::after,
#shift .workflow-node.is-dragging::before,
#shift .workflow-node.is-dragging::after {
  background: var(--blue);
  border-color: rgba(5,7,10,0.82);
  box-shadow:
    0 0 0 1px rgba(245,247,250,0.12),
    0 0 12px rgba(0,200,240,0.38),
    inset 0 1px 0 rgba(255,255,255,0.30);
}

#shift .workflow-node.is-dragging {
  will-change: left, top;
}

#shift .workflow-node.is-dragging,
#shift.is-control-mode .workflow-node:hover {
  border-color: rgba(0,200,240,0.56);
  box-shadow:
    0 24px 54px rgba(0,0,0,0.32),
    0 0 20px rgba(0,200,240,0.12),
    0 2px 0 rgba(255,255,255,0.18) inset;
}

#shift .workflow-node-head {
  padding: 8px 12px;
  background: #05070A;
  border-bottom-color: rgba(255,255,255,0.08);
  color: rgba(245,247,250,0.94);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}

#shift .node-status {
  display: none;
}

#shift .workflow-node-stage {
  position: absolute;
  left: 0;
  top: -22px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(10,13,17,0.62);
  white-space: nowrap;
  pointer-events: none;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}


.node-screen {
  position: relative;
  aspect-ratio: 1 / 1;
  height: auto;
  margin: 12px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 5px;
  background: #0B0E12;
}

.node-screen::before,
.node-screen::after {
  content: '';
  position: absolute;
  pointer-events: none;
}

.screen-sketchup {
  background:
    linear-gradient(135deg, transparent 47%, rgba(0,200,240,0.34) 48%, transparent 50%),
    linear-gradient(28deg, transparent 52%, rgba(245,247,250,0.22) 53%, transparent 55%),
    linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
    #11161C;
  background-size: auto, auto, 16px 16px, 16px 16px, auto;
}
.screen-sketchup::before {
  inset: 22% 20% 18% 26%;
  border: 1px solid rgba(0,200,240,0.58);
  transform: skewY(-14deg) rotate(-8deg);
  box-shadow: 24px 10px 0 -1px rgba(245,247,250,0.10);
}

.screen-sketch {
  background:
    linear-gradient(140deg, rgba(255,255,255,0.06), transparent 45%),
    repeating-linear-gradient(0deg, rgba(245,247,250,0.08) 0 1px, transparent 1px 10px),
    repeating-linear-gradient(90deg, rgba(245,247,250,0.06) 0 1px, transparent 1px 10px),
    #12161C;
}
.screen-sketch::before {
  left: 16%;
  top: 22%;
  width: 62%;
  height: 2px;
  background: rgba(245,247,250,0.34);
  box-shadow: 12px 14px 0 rgba(245,247,250,0.24), 22px 28px 0 rgba(0,200,240,0.30);
  transform: rotate(-12deg);
}

.screen-d5 {
  background:
    radial-gradient(circle at 72% 25%, rgba(255,210,130,0.42), transparent 22%),
    linear-gradient(180deg, rgba(98,136,171,0.65) 0%, rgba(54,73,84,0.70) 46%, rgba(25,36,30,0.94) 100%);
}
.screen-d5::before {
  left: 8%; right: 8%; bottom: 17%; height: 30%;
  background: linear-gradient(90deg, rgba(245,247,250,0.22), rgba(245,247,250,0.05));
  clip-path: polygon(0 100%, 16% 34%, 33% 72%, 48% 18%, 70% 68%, 100% 0, 100% 100%);
}

.screen-chatgpt {
  background:
    radial-gradient(circle at 18% 20%, rgba(0,200,240,0.13), transparent 28%),
    #0E1117;
}
.screen-chatgpt::before {
  inset: 12px 12px auto 12px;
  height: 14px;
  border-radius: 8px;
  background: rgba(245,247,250,0.14);
  box-shadow:
    0 24px 0 rgba(0,200,240,0.18),
    34px 48px 0 rgba(245,247,250,0.12);
}
.screen-chatgpt::after {
  right: 12px; bottom: 12px;
  width: 46%; height: 12px;
  border-radius: 8px;
  background: rgba(0,200,240,0.26);
}

.screen-comfyui {
  background:
    radial-gradient(circle at 26% 34%, rgba(0,200,240,0.28) 0 4px, transparent 5px),
    radial-gradient(circle at 64% 26%, rgba(245,247,250,0.28) 0 4px, transparent 5px),
    radial-gradient(circle at 52% 70%, rgba(0,200,240,0.26) 0 4px, transparent 5px),
    linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
    #101319;
  background-size: auto, auto, auto, 18px 18px, 18px 18px, auto;
}
.screen-comfyui::before {
  left: 20%; top: 30%; width: 48%; height: 2px;
  background: rgba(0,200,240,0.42);
  transform: rotate(-8deg);
  box-shadow: 22px 30px 0 rgba(0,200,240,0.34);
}
.screen-comfyui::after {
  left: 16%; top: 22%; width: 28%; height: 20px;
  border-radius: 4px;
  border: 1px solid rgba(0,200,240,0.34);
  box-shadow: 56px 6px 0 -1px rgba(245,247,250,0.12), 42px 46px 0 -1px rgba(0,200,240,0.14);
}

.screen-animation {
  background:
    linear-gradient(180deg, #12161B 0 58%, #080A0D 58% 100%);
}
.screen-animation::before {
  left: 10%; right: 10%; bottom: 20%; height: 1px;
  background: rgba(245,247,250,0.20);
  box-shadow: 0 -16px 0 rgba(245,247,250,0.08), 0 16px 0 rgba(245,247,250,0.08);
}
.screen-animation::after {
  left: 18%; bottom: 15%; width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 34px 0 0 rgba(0,200,240,0.7), 76px 0 0 rgba(0,200,240,0.5), 108px 0 0 rgba(245,247,250,0.38);
}

.screen-upscaler {
  background:
    linear-gradient(90deg, rgba(80,87,94,0.95) 0 50%, rgba(126,154,176,0.92) 50% 100%);
}
.screen-upscaler::before {
  top: 0; bottom: 0; left: 50%; width: 1px;
  background: rgba(245,247,250,0.72);
}
.screen-upscaler::after {
  inset: 18% 14%;
  border-radius: 5px;
  border: 1px solid rgba(245,247,250,0.22);
  background: linear-gradient(135deg, transparent 44%, rgba(0,200,240,0.26) 45%, transparent 47%);
}

#shift .workflow-node-body {
  padding: 10px 12px 13px;
  gap: 3px;
}

#shift .workflow-node-body span {
  color: rgba(245,247,250,0.58);
  font-size: 10px;
  text-rendering: geometricPrecision;
}

#shift .workflow-node-body strong {
  color: rgba(245,247,250,0.96);
  font-size: 12px;
  text-rendering: geometricPrecision;
}

.node-sketchup { left: 16%; top: 28%; }
.node-sketch-alt { left: 25%; top: 62%; }
.node-d5 { left: 33%; top: 16%; }
.node-chatgpt { left: 48%; top: 42%; }
.node-comfyui { left: 62%; top: 18%; }
.node-animation { left: 74%; top: 63%; }
.node-upscaler { left: calc(91% - 20px); top: 26%; }

#shift .shift-lower-shell {
  max-width: 1240px;
}

#shift .shift-lower-shell .shift-label {
  color: rgba(0,200,240,0.86);
}

@media (min-width: 901px) {
  #shift .shift-lower-shell .shift-title {
    max-width: 560px;
  }
}

@media (max-width: 1100px) {
  #shift .workflow-node { width: 158px; }
  .pipeline-canvas-copy { width: 260px; }
  .pipeline-canvas-title { font-size: 42px; }
  .node-sketchup { left: 5%; top: 58%; }
  .node-sketch-alt { left: 11%; top: 35%; }
  .node-d5 { left: 26%; top: 15%; }
  .node-chatgpt { left: 40%; top: 48%; }
  .node-comfyui { left: 61%; top: 14%; }
  .node-animation { left: 60%; top: 62%; }
  .node-upscaler { left: calc(79% - 20px); top: 42%; }
}

@media (max-width: 900px) {
  #shift.shift-section {
    grid-template-rows: auto auto;
  }

  #shift .node-canvas {
    width: calc(100% + 40px);
    margin-left: -20px;
    margin-right: -20px;
    min-height: 520px;
    height: 62vh;
  }

  .pipeline-canvas-copy {
    width: min(320px, calc(100% - 40px));
    left: 22px;
    top: 24px;
  }

  .pipeline-canvas-title {
    font-size: clamp(38px, 11vw, 54px);
  }

  #shift .workflow-node {
    width: 148px;
  }

  .node-screen {
    height: auto;
  }

  .node-sketchup { left: 5%; top: 50%; }
  .node-sketch-alt { left: 2%; top: 30%; }
  .node-d5 { left: 48%; top: 24%; }
  .node-chatgpt { left: 26%; top: 66%; }
  .node-comfyui { left: 54%; top: 52%; }
  .node-animation { left: 8%; top: 78%; }
  .node-upscaler { left: calc(58% - 20px); top: 78%; }
}

@media (max-width: 560px) {
  #shift .node-canvas {
    min-height: 600px;
    height: auto;
  }

  #shift .workflow-node {
    width: 138px;
  }

  #shift .workflow-node-head {
    font-size: 8px;
    letter-spacing: 0.22em;
  }

  .node-screen {
    height: auto;
    margin: 10px 10px 0;
  }

  .node-sketchup { left: 4%; top: 35%; }
  .node-sketch-alt { left: 2%; top: 18%; }
  .node-d5 { left: 48%; top: 28%; }
  .node-chatgpt { left: 14%; top: 52%; }
  .node-comfyui { left: 52%; top: 50%; }
  .node-animation { left: 7%; top: 74%; }
  .node-upscaler { left: calc(52% - 20px); top: 74%; }
}


@keyframes pipelineLinkFlow {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -26; }
}

@media (prefers-reduced-motion: reduce) {
  #shift.is-control-mode .node-connections path.is-active {
    animation: none;
    stroke-dasharray: none;
  }
}


/* v254 — The Pipeline lower half follows the three-part sketch layout */
#shift .shift-lower-shell {
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
  padding: clamp(28px, 4.4vh, 46px) clamp(32px, 5vw, 72px) clamp(34px, 5vh, 56px);
  background:
    radial-gradient(ellipse 42% 80% at 50% 0%, rgba(0,200,240,0.045), transparent 62%),
    linear-gradient(180deg, rgba(8,11,15,0.98), rgba(8,11,15,1));
}

#shift .shift-lower-shell::before {
  background: linear-gradient(90deg, transparent, rgba(0,200,240,0.24), transparent);
}

.pipeline-control-layout {
  width: 100%;
  max-width: 1240px;
  height: 100%;
  min-height: 0;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(330px, 430px) minmax(260px, 1fr);
  align-items: start;
  gap: clamp(34px, 5vw, 72px);
}

.pipeline-state-label {
  margin-top: clamp(6px, 1.8vh, 20px);
  color: rgba(245,247,250,0.30);
  font-family: 'League Spartan', 'Inter', sans-serif;
  font-size: clamp(38px, 4.2vw, 70px);
  font-weight: 900;
  line-height: 0.88;
  letter-spacing: -0.058em;
  text-transform: uppercase;
  transition:
    color 0.42s ease,
    opacity 0.42s ease,
    transform 0.42s cubic-bezier(.19, 1, .22, 1),
    text-shadow 0.42s ease;
}

.pipeline-state-label span { display: block; }

.pipeline-state-label.is-active {
  color: rgba(245,247,250,0.98);
  opacity: 1;
  text-shadow: 0 14px 34px rgba(0,0,0,0.36);
}

.pipeline-state-right { text-align: left; }

#shift.is-control-mode .pipeline-state-right.is-active { color: rgba(245,247,250,0.96); }
#shift.is-control-mode .pipeline-state-right.is-active span:last-child { color: var(--blue); }

.pipeline-control-center {
  align-self: start;
  width: 100%;
}

#shift .pipeline-control-center.shift-interactive-module {
  margin-top: 0;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

#shift .pipeline-control-center.shift-interactive-module::before,
#shift .pipeline-control-center.shift-interactive-module::after {
  display: none;
}

#shift .pipeline-control-center .shift-toggle-hint {
  margin-bottom: 16px;
  text-align: center;
  color: rgba(245,247,250,0.38);
  letter-spacing: 0.10em;
}

.pipeline-toggle-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 14px;
}

#shift .pipeline-toggle-wrap .shift-toggle-btn {
  width: 82px;
  height: 44px;
  border-color: rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.080);
}

#shift .pipeline-toggle-wrap .toggle-knob {
  top: 5px;
  left: 5px;
  width: 32px;
  height: 32px;
}

#shift .pipeline-toggle-wrap .shift-toggle-btn[aria-pressed="true"] .toggle-knob {
  transform: translateX(38px);
}

#shift .pipeline-control-center .shift-checklist {
  gap: 10px;
}

#shift .pipeline-control-center .check-item {
  min-height: 42px;
  padding: 9px 14px;
  grid-template-columns: 28px 18px minmax(0, 1fr);
  gap: 12px;
  opacity: 0.62;
  border-top: none;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.016)),
    rgba(17,22,28,0.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

#shift .pipeline-control-center .check-item p { font-size: 13px; }
#shift .pipeline-control-center .check-index { font-size: 9px; }
#shift .pipeline-control-center .check-item.is-checked {
  border-color: rgba(0,200,240,0.18);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.020)),
    rgba(17,22,28,0.34);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 0 0 1px rgba(0,200,240,0.04);
}


@media (max-width: 1100px) {
  .pipeline-control-layout {
    grid-template-columns: minmax(210px, 0.8fr) minmax(320px, 410px) minmax(210px, 0.8fr);
    gap: 30px;
  }

  .pipeline-state-label { font-size: clamp(34px, 4.7vw, 54px); }
}

@media (max-width: 900px) {
  #shift .shift-lower-shell {
    width: calc(100% + 40px);
    margin-left: -20px;
    margin-right: -20px;
    padding: 42px 20px 58px;
  }

  .pipeline-control-layout {
    grid-template-columns: 1fr;
    gap: 22px;
    align-items: start;
  }

  .pipeline-state-label {
    margin-top: 0;
    font-size: clamp(36px, 10vw, 52px);
  }

  .pipeline-state-right { order: 3; }
  .pipeline-control-center { order: 2; }
}


/* v261 — Pipeline title lower release tightened for smaller bottom gap */
/* v260 — Pipeline headline true intersection mask
   Desktop only: the Pipeline headline stays visually fixed across the full section.
   The main title remains black by default. A duplicate white layer is clipped
   only where the title physically intersects the lower black control area. */
@media (min-width: 901px) and (hover: hover) and (pointer: fine) {
  #shift .node-canvas {
    overflow: visible;
    z-index: 8;
  }

  .pipeline-canvas-copy {
    z-index: 20;
    transform: translate3d(0, var(--pipeline-pin-y, 0px), 0);
    will-change: transform;
  }

  .pipeline-canvas-copy .pipeline-canvas-title {
    text-shadow: 0 16px 42px rgba(0,0,0,0.18);
  }

  .pipeline-canvas-copy .pipeline-title-difference {
    color: #05070A;
    mix-blend-mode: normal;
  }

  .pipeline-canvas-copy .pipeline-title-accent {
    color: var(--blue);
    mix-blend-mode: normal;
  }
}

@media (max-width: 900px), (prefers-reduced-motion: reduce) {
  .pipeline-canvas-copy {
    --pipeline-pin-y: 0px !important;
    transform: none !important;
  }
}


/* v263 — show full circular node ports instead of clipped half-circles */
#shift .workflow-node {
  overflow: visible;
}

#shift .workflow-node-head {
  border-radius: 6px 6px 0 0;
}

#shift .workflow-node-body {
  border-radius: 0 0 6px 6px;
}


/* v272 — Clean Pipeline control: one central production-control list */
.pipeline-state-label {
  transition:
    color 0.42s ease,
    opacity 0.42s ease,
    filter 0.42s ease,
    transform 0.42s cubic-bezier(.19, 1, .22, 1),
    text-shadow 0.42s ease;
}

.pipeline-state-label:not(.is-active) {
  opacity: 0.26;
  filter: blur(1.5px);
  transform: scale(0.985);
}

.pipeline-state-label.is-active {
  opacity: 1;
  filter: blur(0);
  transform: scale(1);
}

#shift .pipeline-control-center .check-item {
  transition:
    opacity 0.54s ease,
    transform 0.54s cubic-bezier(.19, 1, .22, 1),
    border-color 0.42s ease,
    background 0.42s ease,
    box-shadow 0.42s ease;
}

#shift .pipeline-control-center .check-item.is-checked {
  opacity: 1;
}


/* v273 — Production-control capsules light up with fast left-to-right sweep */
#shift:not(.is-control-mode) .pipeline-state-right {
  opacity: 0.22;
  filter: blur(4px);
  transform: scale(0.975);
}

#shift:not(.is-control-mode) .pipeline-control-center .check-item {
  opacity: 0.28;
  filter: blur(2.4px);
  transform: translateY(8px) scale(0.985);
  border-color: rgba(255,255,255,0.075);
}

#shift.is-control-mode .pipeline-state-left {
  opacity: 0.16;
  filter: blur(2px);
  transform: scale(0.985);
}

#shift.is-control-mode .pipeline-control-center .check-item.is-checked {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  opacity: 1;
  filter: blur(0);
  transform: translateY(0) scale(1);
  border-color: rgba(0,200,240,0.68);
  background:
    linear-gradient(90deg, rgba(0,200,240,0.92), rgba(54,214,255,0.78)),
    rgba(0,200,240,0.72);
  box-shadow:
    0 0 22px rgba(0,200,240,0.28),
    inset 0 1px 0 rgba(255,255,255,0.30);
}

#shift.is-control-mode .pipeline-control-center .check-item.is-checked::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(255,255,255,0.00) 28%,
      rgba(255,255,255,0.60) 48%,
      rgba(255,255,255,0.00) 70%,
      transparent 100%
    );
  transform: translateX(-115%);
  animation: pipelineCapsuleSweep 0.48s cubic-bezier(.19, 1, .22, 1) forwards;
}

#shift.is-control-mode .pipeline-control-center .check-item.is-checked .check-index,
#shift.is-control-mode .pipeline-control-center .check-item.is-checked p {
  color: #071018;
}

#shift.is-control-mode .pipeline-control-center .check-item.is-checked .check-box {
  background: #071018;
  border-color: rgba(7,16,24,0.86);
  box-shadow: 0 0 14px rgba(255,255,255,0.16);
}

#shift.is-control-mode .pipeline-control-center .check-item.is-checked .check-box::after {
  color: var(--blue);
}

@keyframes pipelineCapsuleSweep {
  0% {
    transform: translateX(-115%);
    opacity: 0;
  }
  18% {
    opacity: 1;
  }
  100% {
    transform: translateX(115%);
    opacity: 0;
  }
}

@media (max-width: 900px) {
  #shift:not(.is-control-mode) .pipeline-control-center .check-item {
    filter: blur(1.4px);
    opacity: 0.26;
  }

  #shift:not(.is-control-mode) .pipeline-state-right {
    filter: blur(2px);
  }
}


/* v274 — Compact black Pipeline control band and align right title with first capsule */
@media (min-width: 901px) {
  #shift.shift-section {
    min-height: auto;
    grid-template-rows: minmax(420px, 55vh) minmax(255px, 32vh);
  }

  #shift .shift-lower-shell {
    padding-top: clamp(18px, 2.8vh, 30px);
    padding-bottom: clamp(20px, 3.2vh, 34px);
  }

  .pipeline-control-layout {
    align-items: start;
  }

  .pipeline-state-right {
    margin-top: 58px;
  }
}


/* v275 — Align both side titles and add subtle toggle click cue */
@media (min-width: 901px) {
  .pipeline-state-left,
  .pipeline-state-right {
    margin-top: 58px;
  }
}

.pipeline-toggle-wrap {
  position: relative;
  isolation: isolate;
}

.pipeline-toggle-wrap::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: -1;
  width: 96px;
  height: 58px;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(245,247,250,0.28);
  background: rgba(245,247,250,0.050);
  box-shadow:
    0 0 30px rgba(245,247,250,0.12),
    inset 0 1px 0 rgba(255,255,255,0.055);
  opacity: 0.42;
  pointer-events: none;
  animation: pipelineToggleCuePulse 2.4s ease-in-out infinite;
  transition:
    border-color 0.32s ease,
    background 0.32s ease,
    box-shadow 0.32s ease,
    opacity 0.32s ease;
}

.pipeline-toggle-wrap:hover::before,
.pipeline-toggle-wrap:focus-within::before {
  opacity: 0.68;
  border-color: rgba(245,247,250,0.42);
  background: rgba(245,247,250,0.055);
  box-shadow:
    0 0 38px rgba(245,247,250,0.16),
    inset 0 1px 0 rgba(255,255,255,0.075);
}

#shift.is-control-mode .pipeline-toggle-wrap::before {
  border-color: rgba(245,247,250,0.38);
  background: rgba(245,247,250,0.050);
  box-shadow:
    0 0 36px rgba(245,247,250,0.15),
    inset 0 1px 0 rgba(255,255,255,0.07);
}

@keyframes pipelineToggleCuePulse {
  0%, 100% {
    opacity: 0.26;
    transform: translate(-50%, -50%) scale(0.985);
    box-shadow:
      0 0 20px rgba(245,247,250,0.08),
      inset 0 1px 0 rgba(255,255,255,0.045);
  }
  50% {
    opacity: 0.66;
    transform: translate(-50%, -50%) scale(1.035);
    box-shadow:
      0 0 40px rgba(245,247,250,0.18),
      inset 0 1px 0 rgba(255,255,255,0.070);
  }
}

@media (max-width: 900px) {
  .pipeline-toggle-wrap::before {
    width: 96px;
    height: 58px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pipeline-toggle-wrap::before {
    animation: none;
    opacity: 0.46;
  }
}


/* v288 — Navbar visual center moved 2px right */
/* v280 — Visual center correction for desktop navbar links */
@media (min-width: 901px) {
  .nav-links {
    left: calc(50% - 6px);
  }
}


/* v283 — Extend lower black Pipeline band 20px downward without reducing node canvas */
@media (min-width: 901px) {
  #shift.shift-section {
    grid-template-rows: minmax(420px, 55vh) minmax(275px, calc(32vh + 20px));
  }

  #shift .shift-lower-shell {
    padding-bottom: calc(clamp(20px, 3.2vh, 34px) + 20px);
  }
}


/* v284 — Extend black Pipeline band 20px more, recenter controls, brighter wider blur titles */
@media (min-width: 901px) {
  #shift.shift-section {
    grid-template-rows: minmax(540px, calc(55vh + 120px)) minmax(245px, calc(32vh - 10px));
  }

  #shift .shift-lower-shell {
    display: grid;
    align-items: center;
    padding-top: clamp(30px, 4vh, 46px);
    padding-bottom: clamp(30px, 4vh, 46px);
  }

  .pipeline-control-layout {
    align-items: start;
  }
}

#shift:not(.is-control-mode) .pipeline-state-right,
#shift.is-control-mode .pipeline-state-left {
  opacity: 0.28;
  filter: blur(4.8px);
  transform: scale(0.975);
}

#shift .pipeline-state-label:not(.is-active) {
  opacity: 0.30;
  filter: blur(3.2px);
}


/* v285 — Strong Gaussian-style blur for inactive Pipeline side titles */
#shift .pipeline-state-label:not(.is-active),
#shift:not(.is-control-mode) .pipeline-state-right,
#shift.is-control-mode .pipeline-state-left {
  opacity: 0.30;
  filter: blur(8px);
  -webkit-filter: blur(8px);
  transform: scale(0.972);
}


/* v286 — Move all lower black Pipeline controls 10px downward */
@media (min-width: 901px) {
  #shift .pipeline-control-layout {
    transform: translateY(10px);
  }
}


/* v287 — Move Pipeline toggle 10px up, all other black-band items 10px further down */
@media (min-width: 901px) {
  #shift .pipeline-control-layout {
    transform: translateY(20px);
  }

  #shift .pipeline-toggle-wrap {
    transform: translateY(-20px);
  }
}

/* v-thumbnail-fix — Ensure Studio still-band media thumbnails render locally and in preview */
.visual-stills-band .visual-still.has-media {
  background-image: var(--tile-img) !important;
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-color: #0A0D11;
}

.visual-stills-band .visual-still.has-media::before {
  pointer-events: none;
}

.visual-stills-band .visual-still.has-media::after {
  content: '';
}

/* v-thumbnail-path-fix — explicit local thumbnail URLs for Studio still band and flow tiles */
.visual-stills-band .visual-still.has-media[data-tile="03"] {
  background-image: url('../images/visual/visual-image-03.webp') !important;
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

.visual-stills-band .visual-still.has-media[data-tile="06"] {
  background-image: url('../images/visual/visual-image-06.webp') !important;
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

.visual-stills-band .visual-still.has-media[data-tile="09"] {
  background-image: url('../images/visual/visual-image-09.webp') !important;
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

.visual-stills-band .visual-still.has-media[data-tile="12"] {
  background-image: url('../images/visual/visual-image-12.webp') !important;
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}


/* v006 — Move all lower black-band items up by 20px */
@media (min-width: 901px) {
  #shift .pipeline-control-layout {
    transform: translateY(0);
  }

  #shift .pipeline-toggle-wrap {
    transform: translateY(-20px);
  }
}


/* v007 — Visual section video tile and renamed visual-image assets */
.visual-stills-band .visual-still.has-video {
  position: relative;
  overflow: hidden;
  background: #0A0D11;
}

.visual-stills-band .visual-still-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0.92;
  filter: saturate(0.9) contrast(1.04) brightness(0.82);
}

.visual-stills-band .visual-still.has-video::before {
  z-index: 1;
  pointer-events: none;
}

.visual-stills-band .visual-still.has-video::after {
  z-index: 2;
  pointer-events: none;
}


/* v009 — organized media folders + auto webp/webm previews */
.has-auto-media {
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

.has-auto-media.is-video {
  background-image: none !important;
}

.auto-media-video,
.auto-media-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.hero-bg.has-auto-media,
.visual-video-teaser.has-auto-media,
.node-screen.has-auto-media,
.course-thumb.has-auto-media,
.pack-thumb.has-auto-media {
  overflow: hidden;
}

.hero-bg .auto-media-video,
.hero-bg .auto-media-image {
  opacity: 0.34;
  filter: saturate(0.95) contrast(1.05) brightness(0.82);
}

.visual-video-teaser .auto-media-video,
.visual-video-teaser .auto-media-image {
  z-index: 0;
  opacity: 0.92;
  filter: saturate(1.03) contrast(1.04) brightness(0.78);
}

.visual-video-teaser.has-auto-media .visual-video-safe,
.visual-video-teaser.has-auto-media .visual-video-word {
  position: relative;
  z-index: 1;
}

.node-screen.has-auto-media::before,
.node-screen.has-auto-media::after {
  display: none !important;
}

.node-screen .auto-media-video,
.node-screen .auto-media-image,
.course-thumb .auto-media-video,
.course-thumb .auto-media-image,
.pack-thumb .auto-media-video,
.pack-thumb .auto-media-image {
  z-index: 0;
}

.course-thumb.has-auto-media .course-thumb-hover-overlay,
.course-thumb.has-auto-media .course-logo,
.course-thumb.has-auto-media .course-thumb-label,
.pack-thumb.has-auto-media .pack-tool-logo,
.pack-thumb.has-auto-media .pack-file-pill {
  position: relative;
  z-index: 1;
}

.course-thumb.has-auto-media .course-logo,
.pack-thumb.has-auto-media .pack-tool-logo {
  opacity: 0.76;
}


/* v010 — Robust image/video rendering for hero flow tiles and Visual band */
.hero-flow-wall .flow-tile.has-media,
.visual-stills-band .visual-still.has-media,
.visual-stills-band .visual-still.has-video {
  position: relative;
  overflow: hidden;
}

.flow-tile-image,
.flow-tile-video,
.visual-still-image,
.visual-still-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.flow-tile-image,
.flow-tile-video {
  opacity: 0.82;
  filter: saturate(0.95) contrast(1.04) brightness(0.82);
}

.visual-still-image,
.visual-still-video {
  opacity: 0.96;
  filter: saturate(1.02) contrast(1.04) brightness(0.92);
}

.hero-flow-wall .flow-tile.has-media::before,
.hero-flow-wall .flow-tile.has-video::before,
.visual-stills-band .visual-still.has-media::before,
.visual-stills-band .visual-still.has-video::before {
  z-index: 1;
  pointer-events: none;
}

.hero-flow-wall .flow-tile.has-media::after,
.hero-flow-wall .flow-tile.has-video::after,
.visual-stills-band .visual-still.has-media::after,
.visual-stills-band .visual-still.has-video::after {
  z-index: 2;
  pointer-events: none;
}

.hero-flow-wall .flow-tile.has-media span,
.hero-flow-wall .flow-tile.has-video span {
  opacity: 0;
}

/* v012 — Smooth transform-based Visual band marquee, avoiding scrollLeft jitter */
.visual-stills-band {
  overflow: hidden;
  touch-action: pan-y;
}

.visual-stills-track {
  will-change: transform;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}

.visual-stills-group.is-marquee-clone .visual-still {
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .visual-stills-track {
    transform: none !important;
  }
}


/* v013 — Premium hover lift for Visual band tiles */
.visual-stills-track {
  height: calc(100% - 16px);
  padding: 8px 0;
}

.visual-still {
  transform: translate3d(0, 0, 0) scale(1);
  transform-origin: center center;
  will-change: transform;
  transition:
    transform 260ms cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 220ms ease,
    filter 220ms ease,
    box-shadow 260ms ease;
}

.visual-still:hover,
.visual-still:focus-visible {
  z-index: 5;
  transform: translate3d(0, -6px, 0) scale(1.035);
  opacity: 1;
  filter: brightness(1.08) contrast(1.03) saturate(1.04);
  box-shadow: 0 18px 36px rgba(0,0,0,0.32), 0 0 0 1px rgba(255,255,255,0.10);
}

.visual-stills-band .visual-still.has-media:hover .visual-still-image,
.visual-stills-band .visual-still.has-video:hover .visual-still-video,
.visual-stills-band .visual-still.has-media:focus-visible .visual-still-image,
.visual-stills-band .visual-still.has-video:focus-visible .visual-still-video {
  filter: saturate(1.06) contrast(1.06) brightness(0.98);
}

@media (prefers-reduced-motion: reduce) {
  .visual-still,
  .visual-still:hover,
  .visual-still:focus-visible {
    transform: none;
    transition: none;
  }
}


/* v015 — Hero flow tiles use hero-xx media only; prevent legacy Visual background overlays */
.hero-flow-wall .flow-tile.has-media,
.hero-flow-wall .flow-tile.has-video {
  background-image: none !important;
}

.hero-flow-wall .flow-tile.has-media::after,
.hero-flow-wall .flow-tile.has-video::after {
  content: '';
}