/* ============================================================
   THE POLITE SOLUTION — MASTER LIQUID GLASS DESIGN SYSTEM
   Brand Architecture:
     - Parent Company: The Polite Solution (Technology & Product Innovation)
     - Flagship Product: Thingify (3D Printing Marketplace & Ecosystem)
     - External Platform: https://www.thingify.live/
   Design Language:
     - Apple visionOS + Liquid Glassmorphism (Luminous Pearl & Frosted Glass)
     - Natural Harmonious Integration with Official White Logo
     - Subtle Translucent Glass Panels, Soft Backdrop Blurs, Hairline Borders,
       Understated Ambient Caustics, Deep Navy Contrast Cards, High-Contrast Typography
   Typography: Outfit (Headings) + Plus Jakarta Sans (Body)
   ============================================================ */

:root {
  /* --- 1. SPATIAL CANVAS & LUMINOUS BASE PALETTE --- */
  --bg-space: #F8FAFC;
  --bg-space-light: #FFFFFF;
  --bg-space-dark: #F1F5F9;
  --bg-space-pure: #FFFFFF;
  --bg-deep: #0F172A;
  --bg-navy: #0A2569;
  --bg-navy-dark: #071D54;

  /* Frosted Liquid Glass Surfaces */
  --bg-card: rgba(255, 255, 255, 0.88);
  --bg-card-hover: rgba(255, 255, 255, 0.98);
  --bg-glass: rgba(255, 255, 255, 0.78);
  --bg-glass-elevated: rgba(255, 255, 255, 0.94);
  --bg-glass-floating: rgba(255, 255, 255, 0.98);

  /* --- 2. LIQUID GLASS TIERS --- */
  --glass-surface-ultra: rgba(255, 255, 255, 0.50);
  --glass-surface-subtle: rgba(255, 255, 255, 0.65);
  --glass-surface-base: rgba(255, 255, 255, 0.80);
  --glass-surface-card: rgba(255, 255, 255, 0.88);
  --glass-surface-elevated: rgba(255, 255, 255, 0.94);
  --glass-surface-floating: rgba(255, 255, 255, 0.98);
  --glass-surface-active: #FFFFFF;

  /* Logo Integration Surface */
  --glass-frosted-white: #FFFFFF;
  --glass-frosted-subtle-white: rgba(255, 255, 255, 0.94);

  /* --- 3. GLASS BLUR LEVELS --- */
  --glass-blur-xs: blur(6px);
  --glass-blur-sm: blur(12px);
  --glass-blur-md: blur(20px);
  --glass-blur-lg: blur(32px);
  --glass-blur-xl: blur(48px);

  /* --- 4. HAIRLINE LIGHT-CATCHING BORDERS & SPECULAR HIGHLIGHTS --- */
  --border-subtle: rgba(226, 232, 240, 0.85);
  --border-medium: rgba(203, 213, 225, 0.85);
  --border-elevated: rgba(255, 255, 255, 1);
  --border-focus: #0A2569;
  --border-glow: rgba(2, 132, 199, 0.35);

  --specular-sheen-top: inset 0 1px 0 0 rgba(255, 255, 255, 0.95);
  --specular-sheen-dual: inset 0 1px 0 0 #FFFFFF, inset 0 -1px 0 0 rgba(226, 232, 240, 0.7);
  --specular-sheen-card: inset 0 1px 1px 0 rgba(255, 255, 255, 1), inset 0 0 24px 0 rgba(255, 255, 255, 0.6);
  --specular-sheen-hover: inset 0 1px 2px 0 rgba(255, 255, 255, 1), inset 0 0 28px 0 rgba(2, 132, 199, 0.08);

  /* --- 5. REFINED SHADOWS & ELEVATION --- */
  --shadow-glass-sm: 0 2px 8px -1px rgba(15, 23, 42, 0.04);
  --shadow-card: 0 10px 28px -6px rgba(15, 23, 42, 0.06), 0 2px 6px -1px rgba(15, 23, 42, 0.03);
  --shadow-card-hover: 0 20px 45px -10px rgba(15, 23, 42, 0.10), 0 4px 14px -2px rgba(2, 132, 199, 0.06);
  --shadow-elevated: 0 25px 50px -12px rgba(15, 23, 42, 0.12), 0 8px 24px -4px rgba(15, 23, 42, 0.05);

  /* --- 6. BRAND COLORS & ACCENTS --- */
  --brand-navy: #0A2569;
  --brand-navy-light: #163B8C;
  --brand-navy-dark: #071D54;
  --cyan-primary: #0284C7;
  --cyan-bright: #0EA5E9;
  --cyan-deep: #0369A1;
  --violet-brand: #6366F1;
  --emerald-accent: #059669;
  --amber-accent: #D97706;
  --rose-accent: #E11D48;

  /* --- 7. TEXT HIERARCHY (WCAG AAA Compliant on Light Surfaces) --- */
  --text-white: #FFFFFF;
  --text-primary: #0F172A;
  --text-secondary: #334155;
  --text-muted: #64748B;
  --text-dim: #94A3B8;
  --text-dims: #475569;
  --text-navy: #0A2569;

  /* --- 8. TYPOGRAPHY SCALES --- */
  --font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* --- 9. BORDER RADII --- */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 30px;
  --radius-full: 9999px;

  /* --- 10. TRANSITIONS & TIMING CURVES --- */
  --transition-fast: 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-normal: 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============================================================
   BASE & RESET
============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  background-color: var(--bg-space);
  color: var(--text-primary);
  overflow-x: hidden;
  width: 100%;
}

body {
  font-family: var(--font-body);
  line-height: 1.65;
  background-color: var(--bg-space);
  background-image:
    radial-gradient(circle at 12% 10%, rgba(224, 242, 254, 0.65) 0%, transparent 45%),
    radial-gradient(circle at 88% 15%, rgba(238, 242, 255, 0.70) 0%, transparent 50%),
    radial-gradient(circle at 50% 65%, rgba(241, 245, 249, 0.85) 0%, transparent 60%),
    linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 35%, #F1F5F9 100%);
  background-attachment: fixed;
  color: var(--text-primary);
  overflow-x: hidden;
  position: relative;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Three.js Interactive Background Canvas */
.three-bg-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 0;
  opacity: 0.65;
}

/* Ambient Diffuse Caustics Layer */
.ambient-glow-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.ambient-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.6;
  pointer-events: none;
}

.glow-1 {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(224, 242, 254, 0.8) 0%, transparent 70%);
  top: -120px;
  left: -80px;
  animation: floatCaustic1 22s ease-in-out infinite alternate;
}

.glow-2 {
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(238, 242, 255, 0.8) 0%, transparent 70%);
  top: 30%;
  right: -150px;
  animation: floatCaustic2 26s ease-in-out infinite alternate;
}

.glow-3 {
  width: 550px;
  height: 550px;
  background: radial-gradient(circle, rgba(241, 245, 249, 0.9) 0%, transparent 70%);
  bottom: -100px;
  left: 20%;
  animation: floatCaustic3 20s ease-in-out infinite alternate;
}

@keyframes floatCaustic1 {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(60px, 80px) scale(1.15); }
}

@keyframes floatCaustic2 {
  0% { transform: translate(0, 0) scale(1.1); }
  100% { transform: translate(-80px, -60px) scale(0.95); }
}

@keyframes floatCaustic3 {
  0% { transform: translate(0, 0) scale(0.9); }
  100% { transform: translate(70px, -50px) scale(1.2); }
}

/* Subtle Cursor Spotlight */
.cursor-spotlight {
  position: fixed;
  top: 0;
  left: 0;
  width: 450px;
  height: 450px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(2, 132, 199, 0.05) 0%, transparent 65%);
  pointer-events: none;
  z-index: 2;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s ease;
  opacity: 0;
}

body:hover .cursor-spotlight {
  opacity: 1;
}

/* Container */
.container {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  z-index: 3;
}

/* Typography Defaults */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  color: #0F172A;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.gradient-text {
  background: linear-gradient(135deg, #0A2569 0%, #0284C7 60%, #4F46E5 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.gradient-text-cyan {
  background: linear-gradient(135deg, #0A2569 0%, #0284C7 70%, #0369A1 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gradient-text-violet {
  background: linear-gradient(135deg, #0A2569 0%, #6366F1 60%, #0284C7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

p {
  color: var(--text-secondary);
  font-size: 1.05rem;
  line-height: 1.75;
}

/* Section Header Structure */
.section-header {
  text-align: center;
  max-width: 840px;
  margin: 0 auto 56px auto;
  position: relative;
  z-index: 2;
}

.section-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 18px;
  font-family: var(--font-heading);
  font-size: 0.80rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #0A2569;
  background: rgba(10, 37, 105, 0.06);
  border: 1px solid rgba(10, 37, 105, 0.16);
  border-radius: var(--radius-full);
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(10, 37, 105, 0.04);
}

.section-title {
  font-size: clamp(2.1rem, 4vw, 3.4rem);
  font-weight: 800;
  color: #0F172A;
  margin-bottom: 18px;
  line-height: 1.16;
}

.section-subtitle {
  font-size: 1.14rem;
  color: var(--text-muted);
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.75;
}

/* ============================================================
   LIQUID GLASS BUTTONS
============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 28px;
  font-family: var(--font-heading);
  font-size: 0.96rem;
  font-weight: 600;
  border-radius: var(--radius-full);
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition-normal);
  border: 1px solid transparent;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-glass-sm);
}

.btn-primary {
  background: linear-gradient(135deg, #0A2569 0%, #163B8C 60%, #0284C7 100%);
  color: #FFFFFF !important;
  font-weight: 700;
  border: 1px solid rgba(10, 37, 105, 0.4);
  box-shadow: 0 8px 24px rgba(10, 37, 105, 0.22);
}

.btn-primary:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, #071D54 0%, #0A2569 60%, #0369A1 100%);
  border-color: rgba(10, 37, 105, 0.8);
  box-shadow: 0 12px 30px rgba(10, 37, 105, 0.32);
  color: #FFFFFF !important;
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.92);
  color: #0F172A !important;
  border: 1px solid rgba(203, 213, 225, 0.9);
  backdrop-filter: var(--glass-blur-md);
  -webkit-backdrop-filter: var(--glass-blur-md);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
}

.btn-secondary:hover {
  transform: translateY(-2px);
  background: #FFFFFF;
  border-color: #0A2569;
  color: #0A2569 !important;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.09);
}

.btn-outline {
  background: rgba(255, 255, 255, 0.85);
  color: #0A2569 !important;
  border: 1px solid rgba(10, 37, 105, 0.22);
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
}

.btn-outline:hover {
  background: rgba(10, 37, 105, 0.06);
  border-color: #0A2569;
  color: #0A2569 !important;
  transform: translateY(-2px);
}

.btn:active {
  transform: translateY(0);
}

/* ============================================================
   TOP ANNOUNCEMENT BAR
============================================================ */
.brand-top-banner {
  background: rgba(248, 250, 252, 0.95);
  border-bottom: 1px solid rgba(226, 232, 240, 0.85);
  padding: 8px 0;
  font-family: var(--font-body);
  position: relative;
  z-index: 1001;
  color: #475569;
}

.brand-top-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.brand-hierarchy-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.brand-hierarchy-badge .pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cyan-primary);
  box-shadow: 0 0 8px var(--cyan-primary);
  animation: pulseDot 2s infinite ease-in-out;
}

@keyframes pulseDot {
  0%, 100% { opacity: 0.4; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.2); }
}

.brand-hierarchy-text {
  font-size: 0.82rem;
  letter-spacing: 0.03em;
}

.brand-hierarchy-text strong {
  color: #0F172A;
  font-weight: 700;
}

.brand-hierarchy-text .arrow-sep {
  color: #0284C7;
  margin: 0 4px;
}

.top-contact-link {
  color: #475569;
  text-decoration: none;
  font-size: 0.82rem;
  transition: color var(--transition-fast);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.top-contact-link:hover {
  color: #0A2569;
}

/* ============================================================
   LUMINOUS LIQUID GLASS NAVBAR (Seamless Official Logo Integration)
============================================================ */
.navbar {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(24px) saturate(190%);
  -webkit-backdrop-filter: blur(24px) saturate(190%);
  border-bottom: 1px solid rgba(226, 232, 240, 0.85);
  box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.04);
  z-index: 1000;
  transition: all var(--transition-normal);
}

.navbar.scrolled {
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid rgba(203, 213, 225, 0.9);
  box-shadow: 0 10px 30px -4px rgba(15, 23, 42, 0.08);
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 82px;
}

.brand-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  gap: 14px;
  position: relative;
  z-index: 10;
}

/* Official Logo Container:
   Seamlessly integrates with white navbar background */
.brand-logo-container {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(226, 232, 240, 0.8);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
  transition: all var(--transition-fast);
}

.brand-link:hover .brand-logo-container {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
  border-color: rgba(203, 213, 225, 1);
}

.brand-logo-img {
  height: 44px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
  display: block;
}

.nav-menu {
  display: flex;
  align-items: center;
}

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

.nav-link {
  font-family: var(--font-heading);
  font-size: 0.94rem;
  font-weight: 600;
  color: #334155;
  text-decoration: none;
  padding: 8px 14px;
  border-radius: var(--radius-full);
  transition: all var(--transition-fast);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.nav-link:hover {
  color: #0A2569;
  background: rgba(10, 37, 105, 0.05);
}

.nav-link.active {
  color: #0A2569;
  background: rgba(10, 37, 105, 0.08);
  font-weight: 700;
}

/* Navigation Dropdown */
.nav-item-dropdown {
  position: relative;
}

.nav-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 260px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: var(--radius-md);
  box-shadow: 0 16px 36px -4px rgba(15, 23, 42, 0.10);
  padding: 10px;
  display: none;
  flex-direction: column;
  gap: 4px;
  z-index: 1005;
}

.nav-item-dropdown:hover .nav-dropdown-menu,
.nav-item-dropdown:focus-within .nav-dropdown-menu,
.nav-item-dropdown.open .nav-dropdown-menu {
  display: flex;
}

.nav-dropdown-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  color: #334155;
  text-decoration: none;
  font-size: 0.90rem;
  font-weight: 600;
  transition: all var(--transition-fast);
}

.nav-dropdown-link:hover {
  color: #0A2569;
  background: rgba(10, 37, 105, 0.06);
}

.nav-dropdown-link .dropdown-badge {
  font-size: 0.70rem;
  font-weight: 700;
  color: #FFFFFF;
  background: #0284C7;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  margin-left: auto;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.btn-nav-cta {
  background: linear-gradient(135deg, #0A2569 0%, #1E3A8A 100%);
  color: #FFFFFF !important;
  font-weight: 700;
  font-size: 0.88rem;
  padding: 9px 20px;
  border-radius: var(--radius-full);
  box-shadow: 0 4px 14px rgba(10, 37, 105, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all var(--transition-fast);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.btn-nav-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(10, 37, 105, 0.35);
  background: linear-gradient(135deg, #071D54 0%, #172F6E 100%);
  color: #FFFFFF !important;
}

.mobile-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-around;
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px;
  z-index: 1002;
}

.mobile-toggle span {
  width: 100%;
  height: 2px;
  background-color: #0F172A;
  border-radius: 2px;
  transition: all var(--transition-normal);
}

.mobile-toggle.active span:nth-child(1) {
  transform: rotate(45deg) translate(6px, 6px);
}

.mobile-toggle.active span:nth-child(2) {
  opacity: 0;
}

.mobile-toggle.active span:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}

/* Breadcrumbs */
.breadcrumbs-nav {
  padding: 16px 0 0 0;
  margin-bottom: 24px;
  position: relative;
  z-index: 5;
}

.breadcrumbs-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  font-size: 0.85rem;
  color: #64748B;
}

.breadcrumbs-list a {
  color: #334155;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.breadcrumbs-list a:hover {
  color: #0A2569;
}

.breadcrumbs-list .sep {
  color: #94A3B8;
  font-size: 0.75rem;
}

.breadcrumbs-list .active-crumb {
  color: #0A2569;
  font-weight: 600;
}

/* ============================================================
   CORPORATE HERO SECTION
============================================================ */
.hero-section {
  position: relative;
  padding: 70px 0 90px 0;
  min-height: min(calc(100vh - 120px), 820px);
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  gap: 56px;
  width: 100%;
}

.hero-content {
  position: relative;
  z-index: 2;
}

.hero-badge-capsule {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 16px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: var(--radius-full);
  margin-bottom: 24px;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
}

.hero-badge-tag {
  background: linear-gradient(135deg, #0A2569, #0284C7);
  color: #FFFFFF;
  font-family: var(--font-heading);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  padding: 3px 9px;
  border-radius: var(--radius-xs);
  text-transform: uppercase;
}

.hero-badge-label {
  font-size: 0.86rem;
  color: #334155;
  font-weight: 600;
}

.hero-title {
  font-size: clamp(2.6rem, 5vw, 4.2rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin-bottom: 12px;
  color: #0F172A;
}

.hero-tagline-sub {
  display: block;
  font-size: clamp(1.4rem, 2.5vw, 2.1rem);
  font-weight: 700;
  background: linear-gradient(135deg, #0A2569 0%, #0284C7 60%, #4F46E5 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-top: 6px;
  margin-bottom: 20px;
}

.hero-description {
  font-size: 1.16rem;
  color: #334155;
  line-height: 1.75;
  margin-bottom: 24px;
  max-width: 620px;
}

.hero-flagship-callout {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 20px;
  background: rgba(255, 255, 255, 0.85);
  border-left: 3px solid #0A2569;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  margin-bottom: 32px;
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  border-top: 1px solid rgba(226, 232, 240, 0.9);
  border-right: 1px solid rgba(226, 232, 240, 0.9);
  border-bottom: 1px solid rgba(226, 232, 240, 0.9);
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
}

.hero-flagship-callout .flagship-icon {
  font-size: 1.25rem;
  color: #0A2569;
  margin-top: 2px;
}

.hero-flagship-callout p {
  font-size: 0.98rem;
  color: #334155;
  margin: 0;
  line-height: 1.6;
}

.hero-flagship-callout p strong {
  color: #0A2569;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.hero-proof-bar {
  display: flex;
  align-items: center;
  gap: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(226, 232, 240, 0.9);
}

.proof-item {
  display: flex;
  flex-direction: column;
}

.proof-label {
  font-family: var(--font-heading);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #64748B;
}

.proof-val {
  font-size: 1.05rem;
  font-weight: 700;
  color: #0F172A;
  margin-top: 2px;
}

/* ============================================================
   HERO 3D INTERACTIVE GYROSCOPE STAGE (Luminous Light Glass)
============================================================ */
.hero-visual-stage {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-stage-card {
  position: relative;
  width: 100%;
  max-width: 490px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: var(--radius-xl);
  padding: 30px;
  box-shadow: 0 20px 50px -10px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 1);
  backdrop-filter: var(--glass-blur-lg);
  -webkit-backdrop-filter: var(--glass-blur-lg);
  overflow: hidden;
}

.stage-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(226, 232, 240, 0.85);
}

.stage-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-size: 0.80rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #0A2569;
}

.stage-status {
  font-size: 0.78rem;
  color: var(--emerald-accent);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}

.stage-status .pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--emerald-accent);
  box-shadow: 0 0 8px var(--emerald-accent);
  animation: pulseDot 1.8s infinite;
}

.stage-3d-viewport {
  position: relative;
  height: 320px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 50%, rgba(224, 242, 254, 0.5) 0%, rgba(248, 250, 252, 0.95) 85%);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(203, 213, 225, 0.8);
  margin-bottom: 20px;
  overflow: hidden;
  box-shadow: inset 0 0 30px rgba(224, 242, 254, 0.4), 0 4px 14px rgba(15, 23, 42, 0.04);
  cursor: grab;
  user-select: none;
}

.stage-3d-viewport:active {
  cursor: grabbing;
}

.stage-3d-viewport::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(148, 163, 184, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, 0.12) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
}

.stage-model-canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

.stage-telemetry-badge {
  position: absolute;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: var(--radius-xs);
  padding: 6px 12px;
  display: flex;
  flex-direction: column;
  pointer-events: none;
  z-index: 3;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
}

.stage-telemetry-badge.top-left {
  top: 14px;
  left: 14px;
}

.stage-telemetry-badge.top-right {
  top: 14px;
  right: 14px;
  padding: 5px 10px;
}

.stage-telemetry-badge.bottom-left {
  bottom: 38px;
  left: 14px;
}

.telemetry-label {
  font-family: var(--font-heading);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #64748B;
}

.telemetry-value {
  font-size: 0.82rem;
  font-weight: 700;
  color: #0A2569;
}

.ar-ready-pill {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 700;
  color: #0284C7;
  display: flex;
  align-items: center;
  gap: 5px;
}

.telemetry-coords {
  font-family: monospace;
  font-size: 0.74rem;
  color: #334155;
}

.telemetry-coords strong {
  color: #0A2569;
}

.stage-interaction-prompt {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: var(--radius-full);
  padding: 4px 14px;
  font-size: 0.72rem;
  font-weight: 600;
  color: #64748B;
  display: flex;
  align-items: center;
  gap: 6px;
  pointer-events: none;
  z-index: 3;
}

.stage-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 16px;
  border-top: 1px solid rgba(226, 232, 240, 0.85);
}

.stage-footer-label {
  display: block;
  font-size: 0.74rem;
  color: #64748B;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.stage-footer-title {
  font-size: 0.96rem;
  font-weight: 700;
  color: #0F172A;
}

/* ============================================================
   ABOUT & CAPABILITIES SECTION (Luminous Frosted Glass Cards)
============================================================ */
.about-section {
  position: relative;
  padding: 80px 0;
}

.about-intro-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}

.about-lead-text {
  font-size: 1.35rem;
  font-weight: 600;
  color: #0F172A;
  line-height: 1.6;
}

.about-body-text {
  font-size: 1.05rem;
  color: #334155;
  line-height: 1.75;
}

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

.pillar-card {
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(226, 232, 240, 0.92);
  border-radius: var(--radius-lg);
  padding: 36px 30px;
  box-shadow: 0 8px 24px -4px rgba(15, 23, 42, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  backdrop-filter: var(--glass-blur-md);
  -webkit-backdrop-filter: var(--glass-blur-md);
  transition: all var(--transition-normal);
  display: flex;
  flex-direction: column;
}

.pillar-card:hover {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(10, 37, 105, 0.25);
  box-shadow: 0 20px 40px -8px rgba(15, 23, 42, 0.09), 0 4px 12px rgba(2, 132, 199, 0.06);
}

.pillar-icon-box {
  width: 54px;
  height: 54px;
  border-radius: var(--radius-md);
  background: rgba(10, 37, 105, 0.06);
  border: 1px solid rgba(10, 37, 105, 0.14);
  color: #0A2569;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  margin-bottom: 22px;
}

.pillar-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #0F172A;
  margin-bottom: 12px;
}

.pillar-desc {
  color: #475569;
  font-size: 0.96rem;
  line-height: 1.65;
}

/* ============================================================
   FLAGSHIP PRODUCT SPOTLIGHT — THINGIFY
   (Commanding Deep Navy Glass Panel for High Visual Hierarchy)
============================================================ */
.thingify-flagship-section {
  position: relative;
  padding: 80px 0;
}

.flagship-banner-hero {
  background: linear-gradient(145deg, rgba(10, 37, 105, 0.96) 0%, rgba(15, 23, 42, 0.98) 100%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-xl);
  padding: 56px 50px;
  box-shadow: 0 24px 60px -15px rgba(10, 37, 105, 0.35);
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 50px;
  align-items: center;
  color: #FFFFFF;
  position: relative;
  overflow: hidden;
}

.flagship-banner-hero::before {
  content: '';
  position: absolute;
  top: -100px;
  right: -100px;
  width: 350px;
  height: 350px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 229, 255, 0.18) 0%, transparent 70%);
  pointer-events: none;
}

.flagship-brand-title {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

.thingify-logo-icon {
  width: 44px;
  height: 44px;
  object-fit: contain;
}

.flagship-heading {
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  font-weight: 800;
  color: #FFFFFF !important;
  line-height: 1.15;
  margin-bottom: 10px;
}

.flagship-subheading {
  font-size: 1.2rem;
  font-weight: 600;
  color: #93C5FD !important;
  margin-bottom: 16px;
}

.flagship-text {
  color: #CBD5E1 !important;
  font-size: 1.05rem;
  line-height: 1.75;
  margin-bottom: 30px;
}

.flagship-feature-preview {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-lg);
  padding: 30px;
  backdrop-filter: var(--glass-blur-md);
  -webkit-backdrop-filter: var(--glass-blur-md);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.preview-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.preview-stat-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.preview-stat-row .stat-label {
  font-size: 0.85rem;
  color: #94A3B8;
  font-weight: 500;
}

.preview-stat-row .stat-value {
  font-size: 0.95rem;
  font-weight: 700;
  color: #FFFFFF;
}

/* ============================================================
   ENGINEERING & TECHNOLOGY PRINCIPLES
============================================================ */
.principles-section {
  position: relative;
  padding: 80px 0;
}

.principles-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.principle-card {
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(226, 232, 240, 0.92);
  border-radius: var(--radius-lg);
  padding: 32px 24px;
  box-shadow: 0 8px 24px -4px rgba(15, 23, 42, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  backdrop-filter: var(--glass-blur-md);
  -webkit-backdrop-filter: var(--glass-blur-md);
  transition: all var(--transition-normal);
  display: flex;
  flex-direction: column;
}

.principle-card:hover {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(10, 37, 105, 0.25);
  box-shadow: 0 18px 36px -8px rgba(15, 23, 42, 0.09);
}

.principle-num {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 800;
  color: #0A2569;
  margin-bottom: 14px;
}

.principle-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #0F172A;
  margin-bottom: 10px;
}

.principle-desc {
  color: #475569;
  font-size: 0.92rem;
  line-height: 1.65;
}

/* ============================================================
   COMPANY VISION & ROADMAP SECTION
============================================================ */
.vision-section {
  position: relative;
  padding: 80px 0;
}

.vision-featured-card {
  background: linear-gradient(145deg, rgba(10, 37, 105, 0.96) 0%, rgba(15, 23, 42, 0.98) 100%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-xl);
  padding: 60px 48px;
  box-shadow: 0 24px 60px -15px rgba(10, 37, 105, 0.35);
  text-align: center;
  color: #FFFFFF;
}

.vision-quote-statement {
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  font-weight: 800;
  color: #FFFFFF !important;
  line-height: 1.28;
  max-width: 900px;
  margin: 0 auto 24px auto;
}

.vision-supporting-text {
  font-size: 1.12rem;
  color: #CBD5E1 !important;
  max-width: 740px;
  margin: 0 auto 36px auto;
  line-height: 1.75;
}

/* Looking Ahead Card */
.future-section {
  position: relative;
  padding: 40px 0 80px 0;
}

.whats-next-card {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: var(--radius-xl);
  padding: 48px 40px;
  box-shadow: 0 12px 32px -6px rgba(15, 23, 42, 0.06);
  text-align: center;
  max-width: 860px;
  margin: 0 auto;
}

.whats-next-card h3 {
  font-size: 1.8rem;
  color: #0F172A;
  margin-bottom: 14px;
}

.whats-next-card p {
  color: #475569;
  font-size: 1.05rem;
  max-width: 680px;
  margin: 0 auto 28px auto;
}

/* ============================================================
   CONTACT CTA & FORM (Luminous Liquid Glass)
============================================================ */
.contact-section {
  position: relative;
  padding: 80px 0;
}

.contact-card-glass {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: var(--radius-xl);
  padding: 50px 44px;
  box-shadow: 0 16px 40px -8px rgba(15, 23, 42, 0.07);
}

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

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

.form-group.full-width {
  grid-column: 1 / -1;
}

.form-group label {
  font-family: var(--font-heading);
  font-size: 0.88rem;
  font-weight: 700;
  color: #0F172A;
}

.form-input,
.form-textarea {
  width: 100%;
  padding: 13px 18px;
  background: #FFFFFF;
  border: 1px solid rgba(203, 213, 225, 0.9);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.96rem;
  color: #0F172A;
  transition: all var(--transition-fast);
  outline: none;
}

.form-input:focus,
.form-textarea:focus {
  border-color: #0A2569;
  box-shadow: 0 0 0 3px rgba(10, 37, 105, 0.12);
}

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

.form-status-alert {
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
  font-weight: 600;
  margin-top: 18px;
  display: none;
}

.form-status-alert.success {
  background: rgba(5, 150, 105, 0.10);
  border: 1px solid rgba(5, 150, 105, 0.35);
  color: #059669;
  display: block;
}

.form-status-alert.error {
  background: rgba(225, 29, 72, 0.10);
  border: 1px solid rgba(225, 29, 72, 0.35);
  color: #E11D48;
  display: block;
}

/* ============================================================
   PRODUCT DETAIL & PORTFOLIO STYLES (products.html)
============================================================ */
.ecosystem-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.eco-card {
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(226, 232, 240, 0.92);
  border-radius: var(--radius-lg);
  padding: 32px 26px;
  box-shadow: 0 8px 24px -4px rgba(15, 23, 42, 0.05);
  backdrop-filter: var(--glass-blur-md);
  -webkit-backdrop-filter: var(--glass-blur-md);
  transition: all var(--transition-normal);
  display: flex;
  flex-direction: column;
}

.eco-card:hover {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(10, 37, 105, 0.25);
  box-shadow: 0 18px 36px -8px rgba(15, 23, 42, 0.09);
}

.eco-card-badge {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #0A2569;
  background: rgba(10, 37, 105, 0.06);
  border: 1px solid rgba(10, 37, 105, 0.16);
  padding: 3px 10px;
  border-radius: var(--radius-full);
  margin-bottom: 16px;
}

.eco-card-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  background: rgba(2, 132, 199, 0.08);
  color: #0284C7;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  margin-bottom: 18px;
}

.eco-card-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #0F172A;
  margin-bottom: 10px;
}

.eco-card-desc {
  color: #475569;
  font-size: 0.94rem;
  line-height: 1.65;
}

/* ============================================================
   LEGAL DOCUMENT CARD (privacy-policy.html & terms.html)
============================================================ */
.subpage-hero {
  padding: 60px 0 20px 0;
  text-align: center;
}

.legal-doc-card {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: var(--radius-xl);
  padding: 56px 48px;
  box-shadow: 0 14px 36px -6px rgba(15, 23, 42, 0.06);
  max-width: 920px;
  margin: 0 auto;
}

.legal-section-block {
  margin-bottom: 36px;
}

.legal-section-block:last-child {
  margin-bottom: 0;
}

.legal-section-block h3 {
  font-size: 1.35rem;
  font-weight: 700;
  color: #0F172A;
  margin-bottom: 12px;
}

.legal-section-block p {
  color: #334155;
  font-size: 1.02rem;
  line-height: 1.8;
  margin-bottom: 12px;
}

.legal-section-block ul {
  padding-left: 24px;
  margin-top: 10px;
  color: #334155;
}

.legal-section-block ul li {
  margin-bottom: 8px;
  line-height: 1.7;
}

/* ============================================================
   REUSABLE LIQUID GLASS FOOTER
   (Official Logo seamless integration on white/ivory surface)
============================================================ */
.footer {
  background: rgba(248, 250, 252, 0.96);
  border-top: 1px solid rgba(226, 232, 240, 0.9);
  padding: 80px 0 40px 0;
  position: relative;
  z-index: 10;
  color: #334155;
  box-shadow: 0 -4px 20px rgba(15, 23, 42, 0.03);
}

.footer-top-grid {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr 0.9fr 0.9fr;
  gap: 48px;
  margin-bottom: 50px;
}

.footer-logo-container {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(226, 232, 240, 0.9);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
  margin-bottom: 18px;
}

.footer-logo-img {
  height: 42px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
  display: block;
}

.footer-tagline {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.15rem;
  color: #0F172A;
  margin-bottom: 12px;
}

.footer-desc {
  color: #64748B;
  font-size: 0.92rem;
  line-height: 1.7;
  max-width: 320px;
}

.footer-links-col h4 {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  color: #0F172A;
  margin-bottom: 20px;
  letter-spacing: 0.02em;
}

.footer-links-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-links-list li a {
  color: #64748B;
  text-decoration: none;
  font-size: 0.92rem;
  transition: all var(--transition-fast);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.footer-links-list li a:hover {
  color: #0A2569;
  transform: translateX(3px);
}

.footer-bottom-bar {
  border-top: 1px solid rgba(226, 232, 240, 0.85);
  padding-top: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  color: #94A3B8;
  font-size: 0.86rem;
}

/* ============================================================
   RESPONSIVE DESIGN (iPhone, Android, Tablets, Laptops)
============================================================ */
@media (max-width: 1024px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .hero-visual-stage {
    order: 2;
  }

  .pillars-grid,
  .principles-grid,
  .ecosystem-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .flagship-banner-hero {
    grid-template-columns: 1fr;
    padding: 40px 32px;
  }

  .footer-top-grid {
    grid-template-columns: 1fr 1fr;
    gap: 36px;
  }

  .mobile-toggle {
    display: flex;
  }

  .nav-menu {
    position: fixed;
    top: 82px;
    left: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    border-bottom: 1px solid rgba(226, 232, 240, 0.95);
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.08);
    padding: 24px 30px;
    display: none;
    flex-direction: column;
    align-items: flex-start;
  }

  .nav-menu.open {
    display: flex;
  }

  .nav-list {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    width: 100%;
  }

  .nav-link {
    width: 100%;
    padding: 10px 16px;
    font-size: 1.05rem;
  }

  .nav-dropdown-menu {
    position: static;
    display: none;
    box-shadow: none;
    border: none;
    background: rgba(248, 250, 252, 0.9);
    margin-top: 6px;
    padding: 8px 12px;
  }

  .nav-item-dropdown.open .nav-dropdown-menu {
    display: flex;
  }
}

@media (max-width: 768px) {
  .hero-section {
    padding: 50px 0 70px 0;
  }

  .about-intro-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .pillars-grid,
  .principles-grid,
  .ecosystem-cards-grid {
    grid-template-columns: 1fr;
  }

  .contact-form-grid {
    grid-template-columns: 1fr;
  }

  .footer-top-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .footer-bottom-bar {
    flex-direction: column;
    text-align: center;
  }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   v7 — MOTION & DEPTH UPGRADE (2026-10-13)
   Sections:
     A. Fixes for classes used in markup but previously unstyled
     B. Page transitions
     C. Scroll reveal system (only active when JS adds html.motion-ready)
     D. Hero: word reveal, stage depth, phase stepper, WebGL fallback
     E. Card specular sheen + magnetic buttons
     F. Thingify flagship: border sweep + layer-by-layer "print" reveal
     G. Vision roadmap flow
     H. Contact layout & form states
     I. Scroll progress + parallax helpers
     J. Responsive + reduced motion
============================================================ */

:root {
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --sy: 0;
}

/* ---------- A. Previously unstyled classes ---------- */
.hero-container { position: relative; }
.stage-footer-info { display: flex; flex-direction: column; gap: 2px; }
.tech-section { position: relative; padding: 20px 0 80px; }
.footer-brand-col { max-width: 360px; }
.footer-copyright, .footer-sub-notice { color: #94A3B8; font-size: 0.86rem; }

/* Left-aligned section headers should line up with the grid beneath them */
.section-header[style*="text-align: left"] { margin-left: 0; margin-right: 0; max-width: 840px; }

/* Section tags placed on the navy cards need a light variant to stay legible */
.vision-featured-card .section-tag {
  background: rgba(255, 255, 255, 0.10);
  color: #93C5FD;
  border-color: rgba(255, 255, 255, 0.20);
  box-shadow: none;
}

/* ---------- B. Page transitions ---------- */
@view-transition { navigation: auto; }

::view-transition-old(root) { animation: tpsPageOut 0.28s var(--ease-in-out) both; }
::view-transition-new(root) { animation: tpsPageIn 0.5s var(--ease-out-expo) both; }

@keyframes tpsPageOut { to { opacity: 0; } }
@keyframes tpsPageIn { from { opacity: 0; } }

.page-fade-in { animation: tpsMainIn 0.7s var(--ease-out-expo) both; }
body.is-leaving main, body.is-leaving footer { opacity: 0; transition: opacity 0.18s ease; }
@keyframes tpsMainIn { from { opacity: 0; } to { opacity: 1; } }

/* ---------- C. Scroll reveal system ---------- */
html.motion-ready .reveal {
  opacity: 0;
  transform: translate3d(0, 34px, 0) scale(0.985);
  filter: blur(6px);
  transition:
    opacity 0.9s var(--ease-out-expo),
    transform 1.1s var(--ease-out-expo),
    filter 0.9s var(--ease-out-expo);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

html.motion-ready .reveal.is-visible {
  opacity: 1;
  transform: none;
  filter: none;
}

/* ---------- D. Hero ---------- */
.hero-title .word-mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
}

.hero-title .word {
  display: inline-block;
  will-change: transform;
}

html.motion-ready .hero-title .word {
  transform: translate3d(0, 105%, 0) rotate(4deg);
  transition: transform 1.1s var(--ease-out-expo);
  transition-delay: calc(var(--i, 0) * 90ms + 120ms);
}

html.motion-ready .hero-title.is-visible .word { transform: none; }

/* Hero copy & stage drift apart slightly as the hero scrolls away (depth) */
.hero-content, .hero-visual-stage { translate: 0 var(--hero-shift, 0px); }
.hero-visual-stage { --hero-shift: calc(var(--hero-p, 0) * 70px); }
.hero-content { --hero-shift: calc(var(--hero-p, 0) * 24px); }

.hero-stage-card {
  transform-style: preserve-3d;
  transition: transform 0.6s var(--ease-out-expo), box-shadow 0.6s var(--ease-out-expo);
}

.hero-visual-stage { perspective: 1400px; }
.stage-3d-viewport { height: 360px; touch-action: pan-y; }

/* Floating telemetry badges drift against the tilt for a layered depth feel */
.stage-telemetry-badge {
  translate: calc(var(--tilt-y, 0) * -10px) calc(var(--tilt-x, 0) * 10px);
  transition: translate 0.6s var(--ease-out-expo);
}

.stage-telemetry-badge.bottom-left { bottom: auto; top: 64px; left: auto; right: 14px; }
.stage-interaction-prompt { bottom: 60px; white-space: nowrap; }

.stage-telemetry-badge .telemetry-value { transition: opacity 0.35s ease; }
.stage-telemetry-badge .telemetry-value.is-swapping { opacity: 0; }

/* Phase stepper (Idea → Product → Ecosystem → Possibility) */
.stage-phase-stepper {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  display: flex;
  gap: 4px;
  padding: 4px;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(203, 213, 225, 0.85);
  border-radius: var(--radius-full);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 6px 18px -6px rgba(15, 23, 42, 0.12);
  z-index: 4;
}

.phase-step {
  appearance: none;
  border: 0;
  background: transparent;
  font-family: var(--font-heading);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #475569;
  padding: 5px 10px;
  white-space: nowrap;
  border-radius: var(--radius-full);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: color 0.3s ease, background-color 0.3s ease;
}

.phase-step:hover { color: #0A2569; background: rgba(10, 37, 105, 0.06); }
.phase-step:focus-visible { outline: 2px solid #0284C7; outline-offset: 2px; }

.phase-step.is-active {
  color: #FFFFFF;
  background: linear-gradient(135deg, #0A2569 0%, #0284C7 100%);
}

/* progress hairline inside the active step */
.phase-step.is-active::after {
  content: '';
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 3px;
  height: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.85);
  transform-origin: left;
  transform: scaleX(var(--phase-progress, 0));
}

.stage-interaction-prompt { transition: opacity 0.6s ease; }
.stage-interaction-prompt.is-hidden { opacity: 0; pointer-events: none; }

/* Static fallback when WebGL is unavailable */
.stage-3d-viewport.no-webgl { cursor: default; }
.stage-3d-viewport.no-webgl .stage-model-canvas,
.stage-3d-viewport.no-webgl .stage-phase-stepper,
.stage-3d-viewport.no-webgl .stage-interaction-prompt,
.stage-3d-viewport.no-webgl .stage-telemetry-badge.bottom-left { display: none; }
.stage-3d-viewport.no-webgl::after {
  content: '';
  width: 168px;
  height: 168px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.9) 0%, transparent 32%),
    radial-gradient(circle at 50% 50%, #38BDF8 0%, #0284C7 45%, #0A2569 100%);
  box-shadow: 0 0 0 18px rgba(2, 132, 199, 0.08), 0 0 0 40px rgba(10, 37, 105, 0.05), 0 30px 60px -20px rgba(10, 37, 105, 0.45);
}

/* ---------- E. Card sheen + magnetic buttons ---------- */
.pillar-card, .principle-card, .eco-card, .roadmap-flow-card, .contact-info-card {
  position: relative;
  isolation: isolate;
}

.pillar-card::after, .principle-card::after, .eco-card::after, .roadmap-flow-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(420px circle at var(--px, 50%) var(--py, 0%), rgba(84, 172, 228, 0.14), rgba(4, 32, 100, 0.04) 38%, transparent 62%);
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: -1;
}

.pillar-card:hover::after, .principle-card:hover::after, .eco-card:hover::after, .roadmap-flow-card:hover::after { opacity: 1; }

.btn.is-magnetic { translate: var(--mag-x, 0px) var(--mag-y, 0px); }
.btn.is-magnetic > span, .btn.is-magnetic > i {
  translate: calc(var(--mag-x, 0px) * 0.35) calc(var(--mag-y, 0px) * 0.35);
  transition: translate 0.35s var(--ease-out-expo);
}

/* Soft light sweep across primary buttons on hover */
.btn-primary::before, .btn-nav-cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: -60%;
  width: 45%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.28), transparent);
  transform: skewX(-18deg);
  transition: left 0.75s var(--ease-out-expo);
  pointer-events: none;
}

.btn-primary:hover::before, .btn-nav-cta:hover::before { left: 120%; }

/* ---------- F. Thingify flagship ---------- */
@property --sweep-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.flagship-banner-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--sweep-angle), transparent 0deg, rgba(84, 172, 228, 0.0) 200deg, rgba(84, 172, 228, 0.9) 300deg, rgba(147, 197, 253, 0.2) 340deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: tpsSweep 7s linear infinite;
  pointer-events: none;
}

@keyframes tpsSweep { to { --sweep-angle: 360deg; } }

/* Layer-by-layer print stage holding the official Thingify cube asset */
.thingify-print-stage {
  position: relative;
  height: 170px;
  margin-bottom: 6px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.thingify-print-stage .print-bed {
  position: absolute;
  bottom: 6px;
  left: 50%;
  width: 190px;
  height: 34px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(56, 189, 248, 0.32) 0%, rgba(56, 189, 248, 0.06) 55%, transparent 72%);
  border: 1px solid rgba(147, 197, 253, 0.22);
}

.thingify-print-stage .print-object {
  position: relative;
  width: 150px;
  height: 150px;
  margin-bottom: 14px;
  animation: tpsFloat 6s ease-in-out infinite;
}

.thingify-print-stage .print-object img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.35));
}

.thingify-print-stage .print-head {
  position: absolute;
  left: -14px;
  right: -14px;
  top: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #67E8F9 20%, #FFFFFF 50%, #67E8F9 80%, transparent);
  box-shadow: 0 0 14px 2px rgba(103, 232, 249, 0.75);
  opacity: 0;
  pointer-events: none;
}

.thingify-print-stage.is-armed .print-object img { clip-path: inset(100% 0 0 0); }
.thingify-print-stage.is-armed.is-printing .print-object img { animation: tpsPrintClip 2.6s steps(26, end) forwards; }
.thingify-print-stage.is-armed.is-printing .print-head { animation: tpsPrintHead 2.6s steps(26, end) forwards; }

@keyframes tpsPrintClip { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0% 0 0 0); } }
@keyframes tpsPrintHead {
  0% { top: 100%; opacity: 1; }
  92% { top: 0%; opacity: 1; }
  100% { top: 0%; opacity: 0; }
}

@keyframes tpsFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-8px) rotate(-1.5deg); }
}

/* ---------- G. Vision roadmap flow ---------- */
.roadmap-flow-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin: 8px 0 56px;
}

.roadmap-flow-track::before {
  content: '';
  position: absolute;
  top: 52px;
  left: 6%;
  right: 6%;
  height: 2px;
  background: linear-gradient(90deg, #042064, #0284C7, #54ACE4);
  transform-origin: left;
  transform: scaleX(var(--track-progress, 1));
  border-radius: 2px;
  opacity: 0.35;
  z-index: 0;
}

html.motion-ready .roadmap-flow-track::before { transition: transform 1.6s var(--ease-out-expo) 0.2s; --track-progress: 0; }
html.motion-ready .roadmap-flow-track.is-visible::before { --track-progress: 1; }

.roadmap-flow-card {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(226, 232, 240, 0.92);
  border-radius: var(--radius-lg);
  padding: 28px 24px 30px;
  box-shadow: 0 8px 24px -4px rgba(15, 23, 42, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  backdrop-filter: var(--glass-blur-md);
  -webkit-backdrop-filter: var(--glass-blur-md);
  transition: all var(--transition-normal);
  z-index: 1;
}

.roadmap-flow-card:hover {
  transform: translateY(-4px);
  border-color: rgba(10, 37, 105, 0.25);
  box-shadow: 0 20px 40px -8px rgba(15, 23, 42, 0.09);
}

.roadmap-step-badge {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1rem;
  color: #FFFFFF;
  background: linear-gradient(135deg, #0A2569 0%, #0284C7 100%);
  box-shadow: 0 10px 22px -8px rgba(10, 37, 105, 0.55);
  margin-bottom: 20px;
}

.roadmap-title { font-size: 1.25rem; font-weight: 700; margin-bottom: 10px; color: #0F172A; }
.roadmap-desc { font-size: 0.95rem; color: var(--text-muted); line-height: 1.7; }

.roadmap-arrow-indicator {
  position: absolute;
  top: 40px;
  right: -17px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #FFFFFF;
  border: 1px solid rgba(203, 213, 225, 0.9);
  color: #0284C7;
  font-size: 0.65rem;
  z-index: 2;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.06);
}

/* ---------- H. Contact layout & form ---------- */
.contact-layout-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.25fr;
  gap: 28px;
  align-items: start;
}

.contact-info-card, .contact-form-card {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: var(--radius-xl);
  padding: 40px 36px;
  box-shadow: 0 16px 40px -8px rgba(15, 23, 42, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  backdrop-filter: var(--glass-blur-md);
  -webkit-backdrop-filter: var(--glass-blur-md);
}

.contact-info-card h3 { font-size: 1.5rem; margin-bottom: 10px; }
.contact-info-card > p { font-size: 0.98rem; color: var(--text-muted); margin-bottom: 26px; }

.contact-details-list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 26px; }

.contact-detail-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(226, 232, 240, 0.8);
  background: rgba(248, 250, 252, 0.7);
  transition: border-color 0.3s ease, transform 0.3s var(--ease-out-expo), background-color 0.3s ease;
}

.contact-detail-row:hover { border-color: rgba(2, 132, 199, 0.35); background: #FFFFFF; transform: translateX(4px); }

.detail-icon {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #0A2569;
  background: rgba(10, 37, 105, 0.07);
  border: 1px solid rgba(10, 37, 105, 0.12);
}

.detail-meta { display: flex; flex-direction: column; min-width: 0; }
.detail-label { font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); }
.detail-value { font-family: var(--font-heading); font-weight: 600; color: #0F172A; overflow-wrap: anywhere; }
.detail-value a { color: #0A2569; text-decoration: none; border-bottom: 1px solid rgba(10, 37, 105, 0.25); transition: border-color 0.2s ease, color 0.2s ease; }
.detail-value a:hover { color: #0284C7; border-color: #0284C7; }

.form-group-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; text-align: left; }
.form-label { font-family: var(--font-heading); font-size: 0.88rem; font-weight: 700; color: #0F172A; }

.form-input.input-error, .form-textarea.input-error { border-color: #E11D48; box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.10); }
.field-error-msg { font-size: 0.82rem; color: #BE123C; font-weight: 600; }

.form-status-msg { display: none; margin-top: 16px; padding: 14px 18px; border-radius: var(--radius-sm); font-size: 0.92rem; font-weight: 600; }
.form-status-msg.success { display: block; background: rgba(5, 150, 105, 0.10); border: 1px solid rgba(5, 150, 105, 0.35); color: #047857; }
.form-status-msg.error { display: block; background: rgba(225, 29, 72, 0.08); border: 1px solid rgba(225, 29, 72, 0.30); color: #BE123C; }

/* ---------- I. Scroll progress + parallax ---------- */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  z-index: 2000;
  pointer-events: none;
  transform-origin: left;
  transform: scaleX(var(--scroll-p, 0));
  background: linear-gradient(90deg, #042064, #0284C7 60%, #54ACE4);
}

.ambient-glow-wrapper { transform: translate3d(0, calc(var(--sy) * -0.06px), 0); }

/* ---------- J. Responsive + reduced motion ---------- */
@media (max-width: 1024px) {
  .roadmap-flow-track { grid-template-columns: repeat(2, 1fr); }
  .roadmap-flow-track::before, .roadmap-arrow-indicator { display: none; }
  .contact-layout-grid { grid-template-columns: 1fr; }
  .hero-content, .hero-visual-stage { translate: none; }
}

@media (max-width: 768px) {
  .roadmap-flow-track { grid-template-columns: 1fr; }
  .form-group-grid { grid-template-columns: 1fr; gap: 0; }
  .contact-info-card, .contact-form-card { padding: 28px 22px; }
  html.motion-ready .reveal { filter: none; transform: translate3d(0, 22px, 0); }
  .stage-phase-stepper { bottom: 10px; }
  .phase-step { padding: 6px 8px; font-size: 0.7rem; }
  .stage-interaction-prompt { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html.motion-ready .reveal,
  html.motion-ready .hero-title .word { opacity: 1 !important; transform: none !important; filter: none !important; }
  .thingify-print-stage.is-armed .print-object img { clip-path: none; animation: none; }
  .thingify-print-stage .print-head { display: none; }
  .flagship-banner-hero::after { animation: none; opacity: 0.5; }
  .hero-content, .hero-visual-stage, .ambient-glow-wrapper { translate: none !important; transform: none !important; }
  .btn.is-magnetic, .btn.is-magnetic > span, .btn.is-magnetic > i { translate: none !important; }
  .scroll-progress { display: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ============================================================
   v7.1 — TRANSPARENT LOGO & LOGO-MATCHED MOTION (2026-10-13)
   Logo colours: navy #042064 (star & lettering), sky #54ACE4 / #4C99CA (swoosh)
============================================================ */

/* The logo is now a true transparent PNG, so the white "chip" behind it is no longer needed */
.brand-logo-container,
.footer-logo-container {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

.brand-link:hover .brand-logo-container {
  transform: translateY(-1px);
  box-shadow: none;
}

.brand-logo-img { height: 54px; max-width: none; }
.footer-logo-img { height: 52px; max-width: none; }

@media (max-width: 768px) {
  .brand-logo-img { height: 46px; }
}

/* Shooting stars — the logo's star-and-swoosh motif, crossing the background bottom-left to top-right */
.shooting-star {
  position: absolute;
  left: var(--x, 10%);
  top: var(--y, 30%);
  width: 220px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(84, 172, 228, 0) 0%, rgba(84, 172, 228, 0.45) 65%, rgba(4, 32, 100, 0.85) 100%);
  opacity: 0;
  transform-origin: right center;
  transform: rotate(-24deg) translateX(0);
  animation: tpsShoot var(--dur, 15s) linear infinite;
  animation-delay: var(--delay, 2s);
  pointer-events: none;
}

.shooting-star::after {
  content: '';
  position: absolute;
  right: -3px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  transform: translateY(-50%);
  background: #042064;
  box-shadow: 0 0 10px 3px rgba(84, 172, 228, 0.55);
}

@keyframes tpsShoot {
  0% { opacity: 0; transform: rotate(-24deg) translateX(-12vw); }
  1.5% { opacity: 0.6; }
  8% { opacity: 0; transform: rotate(-24deg) translateX(55vw); }
  100% { opacity: 0; transform: rotate(-24deg) translateX(55vw); }
}

@media (max-width: 768px) {
  .shooting-star { width: 140px; }
}

@media (prefers-reduced-motion: reduce) {
  .shooting-star { display: none; }
}


/* ============================================================
   v7.2 — LOGO INTRO (home page, once per session)
   Only masks, transforms, a drop shadow and a separate sheen layer animate;
   the logo image itself is shown exactly as supplied.
============================================================ */
@property --intro-p {
  syntax: '<percentage>';
  inherits: false;
  initial-value: -15%;
}

.intro-overlay { display: none; }

html.intro-pending .intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: grid;
  place-items: center;
  cursor: pointer;
  /* failsafe: if intro.js never runs, get out of the way after 5s */
  animation: tpsIntroFailsafe 0.4s ease 5s forwards;
}

html.intro-pending .intro-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 50% at 50% 46%, rgba(84, 172, 228, 0.18) 0%, rgba(84, 172, 228, 0) 70%),
    radial-gradient(40% 35% at 30% 70%, rgba(4, 32, 100, 0.06) 0%, rgba(4, 32, 100, 0) 70%),
    linear-gradient(180deg, #FFFFFF 0%, #F4F8FC 100%);
  transition: opacity 0.75s ease;
}

html.intro-pending .intro-overlay.is-leaving::before { opacity: 0; }

@keyframes tpsIntroFailsafe { to { opacity: 0; visibility: hidden; } }

/* navbar logo waits for the intro logo to land in its place */
html.intro-pending #main-header .brand-logo-img {
  opacity: 0;
  animation: tpsIntroLogoBack 0.3s ease 5s forwards;
}
@keyframes tpsIntroLogoBack { to { opacity: 1; } }

.intro-stage {
  position: relative;
  width: min(560px, 80vw);
  aspect-ratio: 982 / 451;
  transform-origin: center center;
  will-change: transform;
}

.intro-logo-3d {
  position: absolute;
  inset: 0;
  transform: perspective(1000px) rotateX(18deg) rotateY(-16deg) translateZ(-90px);
  transform-origin: 30% 60%;
}

.intro-logo {
  display: block;
  width: 100%;
  height: 100%;
  /* wipe follows the swoosh: lower-left → upper-right */
  -webkit-mask-image: linear-gradient(55deg, #000 calc(var(--intro-p) - 14%), transparent var(--intro-p));
  mask-image: linear-gradient(55deg, #000 calc(var(--intro-p) - 14%), transparent var(--intro-p));
  filter: drop-shadow(0 12px 14px rgba(4, 32, 100, 0.09));
  transition: filter 0.6s ease;
}

.intro-sheen {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0) 60%);
  background-size: 260% 100%;
  background-position: 130% 0;
  /* clip the light to the logo's own shape */
  -webkit-mask: url('assets/brand/the-polite-solution-logo-transparent.png') center / 100% 100% no-repeat;
  mask: url('assets/brand/the-polite-solution-logo-transparent.png') center / 100% 100% no-repeat;
}

/* comet: head lands on the logo's star (≈22% across, 23% down) */
.intro-comet {
  position: absolute;
  left: 22%;
  top: 23%;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}

.intro-comet::before {
  content: '';
  position: absolute;
  right: 0;
  top: -1.5px;
  width: 240px;
  height: 3px;
  border-radius: 3px;
  transform-origin: right center;
  transform: rotate(-32deg);
  background: linear-gradient(90deg, rgba(84, 172, 228, 0) 0%, rgba(84, 172, 228, 0.55) 70%, #042064 100%);
}

.intro-comet::after {
  content: '';
  position: absolute;
  left: -6px;
  top: -6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 0 0 3px rgba(84, 172, 228, 0.55), 0 0 22px 8px rgba(84, 172, 228, 0.55);
}

.intro-hint {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: #64748B;
  opacity: 0;
  transition: opacity 0.4s ease;
}

/* ---- playing ---- */
.intro-overlay.is-playing .intro-comet { animation: tpsIntroComet 0.75s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.intro-overlay.is-playing .intro-logo { animation: tpsIntroWipe 1.1s cubic-bezier(0.65, 0, 0.35, 1) 0.35s forwards; }
.intro-overlay.is-playing .intro-logo-3d { animation: tpsIntroSettle 1.5s cubic-bezier(0.16, 1, 0.3, 1) 0.25s forwards; }
.intro-overlay.is-playing .intro-sheen { animation: tpsIntroSheen 0.8s ease-in-out 1.1s forwards; }
.intro-overlay.is-playing .intro-hint { opacity: 1; transition-delay: 0.6s; }

@keyframes tpsIntroComet {
  0% { opacity: 0; transform: translate(-46vw, 30vh); }
  12% { opacity: 1; }
  82% { opacity: 1; transform: translate(0, 0); }
  100% { opacity: 0; transform: translate(0, 0) scale(1.6); }
}

@keyframes tpsIntroWipe {
  from { --intro-p: -15%; }
  to { --intro-p: 130%; }
}

@keyframes tpsIntroSettle {
  to { transform: perspective(1000px) rotateX(0deg) rotateY(0deg) translateZ(0); }
}

@keyframes tpsIntroSheen {
  0% { opacity: 0; background-position: 130% 0; }
  25% { opacity: 0.75; }
  100% { opacity: 0; background-position: -30% 0; }
}

/* ---- landing / skipped ---- */
.intro-overlay.is-leaving .intro-logo { filter: none; }
.intro-overlay.is-leaving .intro-hint { opacity: 0; transition-delay: 0s; }

.intro-overlay.is-skipped .intro-logo,
.intro-overlay.is-skipped .intro-logo-3d,
.intro-overlay.is-skipped .intro-sheen,
.intro-overlay.is-skipped .intro-comet { animation: none; }
.intro-overlay.is-skipped .intro-logo { -webkit-mask-image: none; mask-image: none; }
.intro-overlay.is-skipped .intro-logo-3d { transform: none; }
.intro-overlay.is-skipped .intro-comet,
.intro-overlay.is-skipped .intro-sheen { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  html.intro-pending .intro-overlay { display: none; }
  html.intro-pending #main-header .brand-logo-img { opacity: 1; animation: none; }
}


/* ============================================================
   v7.2 — THINGIFY 3D PRINT SCENE (app.js initThingifyPrintScene)
   The cube "print" stays as the fallback when WebGL is unavailable.
============================================================ */
.thingify-print-stage.has-3d { height: 230px; margin: -6px -10px 4px; cursor: grab; }
.thingify-print-stage.has-3d:active { cursor: grabbing; }
.thingify-print-stage.has-3d .print-object,
.thingify-print-stage.has-3d .print-bed { display: none; }
.print-scene-canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  display: block;
}

@media (max-width: 768px) {
  .thingify-print-stage.has-3d { height: 210px; }
}


/* ============================================================
   v7.2 — LOGO-COLOUR ATMOSPHERE (replaces the Three.js constellation)
   Soft navy / sky light, a faint print-bed grid under the hero,
   and the shooting stars (v7.1) crossing it.
============================================================ */
.glow-1 {
  width: 620px;
  height: 620px;
  background: radial-gradient(circle, rgba(84, 172, 228, 0.20) 0%, rgba(84, 172, 228, 0) 70%);
  top: -160px;
  left: -140px;
}

.glow-2 {
  width: 720px;
  height: 720px;
  background: radial-gradient(circle, rgba(4, 32, 100, 0.07) 0%, rgba(4, 32, 100, 0) 70%);
  top: 22%;
  right: -220px;
}

.glow-3 {
  width: 640px;
  height: 640px;
  background: radial-gradient(circle, rgba(2, 132, 199, 0.10) 0%, rgba(2, 132, 199, 0) 70%);
  bottom: -160px;
  left: 18%;
}

.ambient-glow { opacity: 1; filter: blur(40px); }

/* print-bed grid receding under the hero (3D-printing cue, very faint) */
.hero-section::before {
  content: '';
  position: absolute;
  left: -20%;
  right: -20%;
  bottom: -8%;
  height: 62%;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(rgba(4, 32, 100, 0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(4, 32, 100, 0.09) 1px, transparent 1px);
  background-size: 56px 56px;
  transform: perspective(700px) rotateX(64deg);
  transform-origin: center bottom;
  -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 85%);
  mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 85%);
  animation: tpsGridDrift 14s linear infinite;
}

.hero-section > .container { position: relative; z-index: 1; }

@keyframes tpsGridDrift { to { background-position: 0 56px, 0 0; } }

@media (max-width: 768px) {
  .hero-section::before { height: 45%; background-size: 40px 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-section::before { animation: none; }
}

/* ============================================================
   v8 — INTRO READOUT, PRINT STUDIO HUD (2026-10-13)
   References: Palmo (percentage preloader), Roveia (scroll-scrubbed
   storytelling), We Evolve IT (phase-by-phase progress).
============================================================ */
.intro-progress {
  position: absolute;
  left: 50%;
  bottom: 68px;
  transform: translateX(-50%);
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  font-variant-numeric: tabular-nums;
  color: rgba(4, 32, 100, 0.55);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.intro-overlay.is-playing .intro-progress { opacity: 1; transition-delay: 0.3s; }
.intro-overlay.is-leaving .intro-progress { opacity: 0; transition-delay: 0s; }

/* print studio: a little more room for the scene and its finished prints */
.thingify-print-stage.has-3d { height: 280px; }

.print-hud {
  position: absolute;
  left: 12px;
  bottom: 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 11px;
  border-radius: var(--radius-full);
  background: rgba(4, 18, 52, 0.55);
  border: 1px solid rgba(147, 197, 253, 0.22);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  color: #DCEBFA;
  pointer-events: none;
  z-index: 2;
}
.print-hud-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #54ACE4;
  box-shadow: 0 0 8px rgba(84, 172, 228, 0.9);
  animation: pulseDot 1.6s infinite;
}
.print-hud.is-complete .print-hud-dot { background: #34D399; box-shadow: 0 0 8px rgba(52, 211, 153, 0.9); animation: none; }

@media (max-width: 768px) {
  .thingify-print-stage.has-3d { height: 240px; }
  .intro-progress { bottom: 60px; }
}

@media (prefers-reduced-motion: reduce) {
  .print-hud-dot { animation: none; }
}

/* ============================================================
   v9 — WHOLE-UI PASS (2026-10-14)
   One visual language on every page, from the logo's own colours:
     A. Page emblems (emblems.js) above each main page title
     B. Word-by-word title rise (motion.js 4b)
     C. Rolling step numbers 01–04 (motion.js 4c)
     D. Navy feature cards share the Thingify card's light sweep
     E. Card icons lift with the card
     F. Footer swoosh (the logo's arc) draws in
============================================================ */

/* ---------- A. Page emblems ---------- */
.page-emblem { display: none; }
html.js-emblem .page-emblem {
  display: block;
  position: relative;
  width: min(340px, 82vw);
  height: 170px;
  margin: -12px auto 8px;
}
.page-emblem::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 6px;
  width: 62%;
  height: 26px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(4, 32, 100, 0.14) 0%, rgba(84, 172, 228, 0.08) 45%, transparent 72%);
  pointer-events: none;
}
.page-emblem canvas {
  position: relative;
  display: block;
  width: 100% !important;
  height: 100% !important;
  opacity: 0;
  transform: translateY(14px) scale(0.96);
  transition: opacity 0.9s ease, transform 1.2s var(--ease-out-expo);
}
.page-emblem.is-ready canvas { opacity: 1; transform: none; }
html.js-emblem .page-emblem.is-unavailable { display: none; }

/* ---------- B. Title rise ---------- */
.split-title .word-mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}
.split-title .word { display: inline-block; }
html.motion-ready .split-title .word {
  transform: translate3d(0, 110%, 0);
  transition: transform 1s var(--ease-out-expo);
  transition-delay: calc(var(--i, 0) * 55ms + 80ms);
}
html.motion-ready .split-title.is-split-visible .word { transform: none; }

/* ---------- C. Rolling numbers ---------- */
.odo { display: inline-flex; }
.odo-col {
  display: inline-block;
  height: 1.15em;
  line-height: 1.15em;
  overflow: hidden;
}
.odo-strip {
  display: flex;
  flex-direction: column;
  transform: translateY(0);
  transition: transform 1.3s var(--ease-out-expo);
  transition-delay: calc(var(--c, 0) * 120ms + 150ms);
}
.odo-strip > span { display: block; height: 1.15em; }
.is-rolled .odo-strip { transform: translateY(calc(var(--d, 0) * -1.15em)); }

/* ---------- D. Navy feature cards: shared light sweep + slow glow ---------- */
.vision-featured-card { position: relative; overflow: hidden; isolation: isolate; }
.vision-featured-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--sweep-angle), transparent 0deg, rgba(84, 172, 228, 0) 200deg, rgba(84, 172, 228, 0.9) 300deg, rgba(147, 197, 253, 0.2) 340deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: tpsSweep 8s linear infinite;
  pointer-events: none;
}
.vision-featured-card::before {
  content: '';
  position: absolute;
  width: 420px;
  height: 420px;
  top: -160px;
  right: -120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(84, 172, 228, 0.20) 0%, rgba(84, 172, 228, 0) 68%);
  animation: tpsCardGlow 14s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: -1;
}
@keyframes tpsCardGlow { to { transform: translate(-140px, 120px) scale(1.15); } }

/* ---------- E. Icons lift with their card ---------- */
.pillar-icon-box, .eco-card-icon, .detail-icon { transition: transform 0.45s var(--ease-out-expo), box-shadow 0.45s var(--ease-out-expo), background-color 0.3s ease; }
.pillar-card:hover .pillar-icon-box,
.eco-card:hover .eco-card-icon,
.contact-detail-row:hover .detail-icon {
  transform: translateY(-3px) scale(1.06);
  box-shadow: 0 10px 20px -8px rgba(84, 172, 228, 0.55);
}

/* ---------- F. Footer swoosh ---------- */
.footer-swoosh {
  position: absolute;
  left: 0;
  top: -36px;
  width: 100%;
  height: 70px;
  overflow: visible;
  pointer-events: none;
}
.footer-swoosh-path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.9s cubic-bezier(0.65, 0, 0.35, 1);
}
.footer.is-swooshed .footer-swoosh-path { stroke-dashoffset: 0; }

@media (max-width: 768px) {
  html.js-emblem .page-emblem { height: 140px; margin-top: -6px; }
}

@media (prefers-reduced-motion: reduce) {
  .vision-featured-card::after, .vision-featured-card::before { animation: none; }
  .page-emblem canvas { transition: none; opacity: 1; transform: none; }
  .pillar-card:hover .pillar-icon-box, .eco-card:hover .eco-card-icon, .contact-detail-row:hover .detail-icon { transform: none; }
}

/* ============================================================
   v10 — ORIGINAL LOGO, BLUEPRINT INTRO, SCROLL STORY, LIQUID GLASS (2026-10-14)
   References: Montfort (chapters, deepening atmosphere), Terminal Industries
   (scroll-lit statements, technical grid), Heron AI (blueprint lines, corner
   marks), Dropbox Brand (logo construction lines), Ezera (liquid glass),
   Roveia (smooth scroll, hero depth), Palmo (loading readout).
   The logo file is assets/logo.png exactly as supplied (white background kept);
   the design around it is white so the logo's own background blends in.
============================================================ */

/* ---------- A. Original logo on a white plate ---------- */
.brand-logo-container,
.footer-logo-container {
  background: #FFFFFF;
  padding: 2px 10px;
  border-radius: 14px;
  border: 1px solid rgba(4, 32, 100, 0.08);
  box-shadow: inset 0 1px 0 #FFFFFF, 0 8px 22px -12px rgba(4, 32, 100, 0.28), 0 1px 2px rgba(4, 32, 100, 0.06);
  transition: transform 0.45s var(--ease-out-expo), box-shadow 0.45s var(--ease-out-expo), border-color 0.3s ease;
}
.brand-link:hover .brand-logo-container {
  transform: translateY(-2px);
  border-color: rgba(84, 172, 228, 0.45);
  box-shadow: inset 0 1px 0 #FFFFFF, 0 14px 28px -14px rgba(4, 32, 100, 0.35), 0 0 0 4px rgba(84, 172, 228, 0.12);
}
/* show the logo with its own white margin (the file itself is untouched) */
.brand-logo-img,
.footer-logo-img {
  width: auto;
  max-width: none;
  aspect-ratio: 1024 / 485;
  object-fit: cover;
  object-position: 50% 33%;
}
.brand-logo-img { height: 50px; }
.footer-logo-img { height: 54px; }
.footer-logo-container { padding: 4px 12px; }
@media (max-width: 768px) {
  .brand-logo-img { height: 42px; }
}

/* ---------- B. Opening animation: white blueprint stage ---------- */
html.intro-pending .intro-overlay::before {
  background:
    linear-gradient(rgba(4, 32, 100, 0.05) 1px, transparent 1px) 50% 50% / 56px 56px,
    linear-gradient(90deg, rgba(4, 32, 100, 0.05) 1px, transparent 1px) 50% 50% / 56px 56px,
    #FFFFFF;
  -webkit-mask-image: radial-gradient(75% 70% at 50% 48%, #000 40%, rgba(0, 0, 0, 0.35) 100%);
  mask-image: radial-gradient(75% 70% at 50% 48%, #000 40%, rgba(0, 0, 0, 0.35) 100%);
}
html.intro-pending .intro-overlay { background: #FFFFFF; transition: background-color 0.75s ease; }
html.intro-pending .intro-overlay.is-leaving { background: transparent; }

.intro-stage { width: min(600px, 84vw); aspect-ratio: 1024 / 485; }
.intro-logo-3d {
  background: #FFFFFF;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 34px 70px -34px rgba(4, 32, 100, 0.35), 0 2px 6px rgba(4, 32, 100, 0.05);
  transition: box-shadow 0.6s ease, border-radius 0.6s ease;
}
.intro-logo {
  object-fit: cover;
  object-position: 50% 33%;
  filter: none;
}
.intro-sheen { -webkit-mask: none; mask: none; }
.intro-overlay.is-leaving .intro-logo-3d { box-shadow: none; border-radius: 14px; }

/* comet now lands on the star inside the framed original logo */
.intro-comet { left: 32%; top: 21%; }

/* construction lines + registration marks around the logo (Heron / Dropbox) */
.intro-guides { position: absolute; inset: 0; pointer-events: none; }
.intro-guides .ig { position: absolute; background: rgba(4, 32, 100, 0.26); }
.intro-guides .ig-h { left: -16%; right: -16%; height: 1px; transform: scaleX(0); }
.intro-guides .ig-v { top: -26%; bottom: -26%; width: 1px; transform: scaleY(0); }
.intro-guides .ig-top { top: -1px; }
.intro-guides .ig-bottom { bottom: -1px; }
.intro-guides .ig-left { left: -1px; }
.intro-guides .ig-right { right: -1px; }
.intro-guides .im {
  position: absolute;
  width: 18px;
  height: 18px;
  opacity: 0;
  transform: scale(0.4) rotate(-45deg);
}
.intro-guides .im::before, .intro-guides .im::after {
  content: '';
  position: absolute;
  background: #54ACE4;
  left: 50%;
  top: 50%;
}
.intro-guides .im::before { width: 18px; height: 2px; transform: translate(-50%, -50%); }
.intro-guides .im::after { width: 2px; height: 18px; transform: translate(-50%, -50%); }
.intro-guides .im-tl { left: -9px; top: -9px; }
.intro-guides .im-tr { right: -9px; top: -9px; }
.intro-guides .im-bl { left: -9px; bottom: -9px; }
.intro-guides .im-br { right: -9px; bottom: -9px; }

.intro-overlay.is-playing .ig-h { animation: tpsGuideH 0.7s cubic-bezier(0.65, 0, 0.35, 1) 0.05s forwards; }
.intro-overlay.is-playing .ig-v { animation: tpsGuideV 0.7s cubic-bezier(0.65, 0, 0.35, 1) 0.18s forwards; }
.intro-overlay.is-playing .im { animation: tpsMark 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.62s forwards; }
@keyframes tpsGuideH { to { transform: scaleX(1); } }
@keyframes tpsGuideV { to { transform: scaleY(1); } }
@keyframes tpsMark { to { opacity: 1; transform: scale(1) rotate(0deg); } }
.intro-overlay.is-leaving .intro-guides { opacity: 0; transition: opacity 0.3s ease; }
.intro-overlay.is-skipped .ig, .intro-overlay.is-skipped .im { animation: none; }

/* ---------- C. Scroll-lit statements (Terminal Industries) ---------- */
.lit-text .lw { transition: opacity 0.25s linear, color 0.25s linear; }
html.motion-ready .lit-text .lw { opacity: var(--lw, 0.2); }

/* ---------- D. Chapter rail on the home page (Montfort) ---------- */
.chapter-rail {
  position: fixed;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 900;
  display: none;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
  padding: 14px 8px;
}
@media (min-width: 1200px) { .chapter-rail { display: flex; } }
.chapter-rail::before {
  content: '';
  position: absolute;
  right: 13px;
  top: 18px;
  bottom: 18px;
  width: 1px;
  background: rgba(4, 32, 100, 0.14);
}
.chapter-rail::after {
  content: '';
  position: absolute;
  right: 13px;
  top: 18px;
  width: 1px;
  height: calc((100% - 36px) * var(--rail-p, 0));
  background: linear-gradient(#042064, #54ACE4);
}
.chapter-dot {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 0;
  background: none;
  cursor: pointer;
  padding: 0;
  z-index: 1;
}
.chapter-dot .cd-mark {
  width: 11px;
  height: 11px;
  margin-right: 1px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1.5px solid rgba(4, 32, 100, 0.35);
  transition: transform 0.35s var(--ease-out-expo), background-color 0.3s ease, border-color 0.3s ease;
}
.chapter-dot .cd-label {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #0A2569;
  white-space: nowrap;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(4, 32, 100, 0.1);
  box-shadow: 0 6px 16px -10px rgba(4, 32, 100, 0.4);
  opacity: 0;
  transform: translateX(8px);
  transition: opacity 0.3s ease, transform 0.35s var(--ease-out-expo);
  pointer-events: none;
}
.chapter-dot:hover .cd-label, .chapter-dot:focus-visible .cd-label { opacity: 1; transform: none; }
.chapter-dot:focus-visible { outline: none; }
.chapter-dot:focus-visible .cd-mark { box-shadow: 0 0 0 3px rgba(84, 172, 228, 0.5); }
.chapter-dot.is-active .cd-mark { background: #042064; border-color: #042064; transform: scale(1.25); }

/* deepening atmosphere as the story goes on (Montfort) */
.depth-veil {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(120% 90% at 50% 120%, rgba(4, 32, 100, 0.10) 0%, rgba(84, 172, 228, 0.05) 45%, transparent 75%);
  opacity: var(--depth, 0);
}

/* hero stage recedes slightly as you scroll away (Roveia) */
.hero-visual-stage { scale: calc(1 - var(--hero-p, 0) * 0.06); transform-origin: 50% 0; }

/* ---------- E. Blueprint grid + crosshair marks (Terminal / Heron) ---------- */
.principles-section, .tech-section, .about-section { position: relative; }
.principles-section::before, .tech-section::before, .about-section::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cpath d='M0 .5H120M.5 0V120' stroke='%23042064' stroke-opacity='.055' fill='none'/%3E%3Cpath d='M-6 .5H6M.5-6V6' stroke='%2354ACE4' stroke-opacity='.55' fill='none'/%3E%3C/svg%3E");
  background-position: center top;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 45%, #000 30%, transparent 85%);
  mask-image: radial-gradient(70% 60% at 50% 45%, #000 30%, transparent 85%);
}
.principles-section > .container, .tech-section > .container, .about-section > .container { position: relative; z-index: 1; }

/* card corner registration marks on hover (Heron) */
.pillar-card::before, .principle-card::before, .eco-card::before, .roadmap-flow-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease, inset 0.45s var(--ease-out-expo);
  background:
    linear-gradient(#54ACE4, #54ACE4) 0 0 / 14px 1.5px no-repeat,
    linear-gradient(#54ACE4, #54ACE4) 0 0 / 1.5px 14px no-repeat,
    linear-gradient(#54ACE4, #54ACE4) 100% 0 / 14px 1.5px no-repeat,
    linear-gradient(#54ACE4, #54ACE4) 100% 0 / 1.5px 14px no-repeat,
    linear-gradient(#54ACE4, #54ACE4) 0 100% / 14px 1.5px no-repeat,
    linear-gradient(#54ACE4, #54ACE4) 0 100% / 1.5px 14px no-repeat,
    linear-gradient(#54ACE4, #54ACE4) 100% 100% / 14px 1.5px no-repeat,
    linear-gradient(#54ACE4, #54ACE4) 100% 100% / 1.5px 14px no-repeat;
}
.pillar-card:hover::before, .principle-card:hover::before, .eco-card:hover::before, .roadmap-flow-card:hover::before { opacity: 1; inset: -7px; }
/* keep text crisp while a card tilts: the hovered card is near-opaque, so the glass blur is not needed */
.pillar-card:hover, .principle-card:hover, .eco-card:hover, .roadmap-flow-card:hover { -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ---------- F. Liquid glass surfaces (Ezera) ---------- */
.pillar-card, .principle-card, .eco-card, .roadmap-flow-card, .contact-info-card, .contact-form-card, .whats-next-card, .legal-doc-card, .hero-stage-card {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0) 38%), linear-gradient(135deg, rgba(84, 172, 228, 0.06) 0%, rgba(4, 32, 100, 0.02) 100%);
  border-color: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  box-shadow: inset 0 1px 0 #FFFFFF, inset 0 -1px 0 rgba(4, 32, 100, 0.05), 0 1px 0 rgba(4, 32, 100, 0.04), 0 22px 44px -28px rgba(4, 32, 100, 0.32);
}
.navbar {
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  box-shadow: inset 0 -1px 0 rgba(4, 32, 100, 0.06), 0 10px 30px -22px rgba(4, 32, 100, 0.35);
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html.motion-ready .lit-text .lw { opacity: 1; }
  .depth-veil { display: none; }
  .hero-visual-stage { scale: none; }
  .pillar-card::before, .principle-card::before, .eco-card::before, .roadmap-flow-card::before { transition: none; }
}

/* reserve the 3D print stage's final height up front so nothing below it jumps when the scene loads */
.thingify-print-stage { height: 280px; }
@media (max-width: 768px) { .thingify-print-stage { height: 240px; } }
.thingify-print-stage.has-3d { margin: 0 0 6px; }