/* ==========================================================================
   ORYNBIZ V3 - THE BUSINESS OPERATING SYSTEM
   High-Fidelity Enterprise SaaS Design System (Luxury / Editorial Minimalism)
   ========================================================================== */

/* Note: Google Fonts loaded via preconnect in head of title.php to avoid CSSOM blocking */

:root {
  /* --- Color System (OrynBiz Flagship Luxury Palette) --- */
  --bg-snow: #FAFAFB;
  --bg-surface: #FFFFFF;
  --bg-surface-secondary: #F3F4F6;
  --bg-dark-accent: #0A0F1D;

  --text-primary: #0F172A;
  --text-secondary: #475569;
  --text-muted: #94A3B8;

  /* OrynBiz Signature Brand Logo Palette */
  --brand-rose: #E61E58;
  --brand-rose-glow: rgba(230, 30, 88, 0.22);
  --brand-blue: #0072B5;
  --brand-blue-glow: rgba(0, 114, 181, 0.18);
  --brand-gradient: linear-gradient(135deg, #E61E58 0%, #0072B5 100%);

  /* Mapped for full compatibility across existing classes */
  --accent-bronze: #E61E58;
  --accent-bronze-glow: rgba(230, 30, 88, 0.14);
  --accent-gold: #0072B5;
  --accent-success: #10B981;
  --accent-success-light: rgba(16, 185, 129, 0.12);

  --border-color: #dadada;
  --border-light: #F1F5F9;
  --border-dark: #1E293B;

  --glass-bg: rgba(255, 255, 255, 0.72);
  --glass-border: rgba(230, 228, 223, 0.6);
  --glass-shadow: 0 20px 60px rgba(25, 25, 25, 0.06);

  /* --- Grid & Spacing System --- */
  --container-max: 1440px;
  --content-max: 1280px;
  --section-padding-top: 100px;
  --section-padding-bottom: 100px;

  /* --- Typography Scale (Everything Left-Aligned) --- */
  --font-family-primary: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-family-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --font-hero: 66px;
  --line-height-hero: 0.98;
  --font-section: 52px;
  --font-card: 26px;
  --font-body: 18px;
  --font-caption: 15px;

  /* --- Corner Radii & Shadows --- */
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-xl: 36px;
  --radius-pill: 999px;

  --shadow-soft: 0 12px 40px rgba(0, 0, 0, 0.035);
  --shadow-hover: 0 24px 64px rgba(0, 0, 0, 0.08);
  --shadow-card: 0 4px 20px rgba(25, 25, 25, 0.025);
}

@media (max-width: 992px) {
  :root {
    --font-hero: 48px;
    --font-section: 36px;
    --font-card: 22px;
    --section-padding-top: 90px;
    --section-padding-bottom: 90px;
  }
}

@media (max-width: 576px) {
  :root {
    --font-hero: 34px;
    --font-section: 28px;
    --font-card: 20px;
    --section-padding-top: 60px;
    --section-padding-bottom: 60px;
  }
}

/* ==========================================================================
   Base & Reset Styles (Everything Left Aligned)
   ========================================================================== */

html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
  overflow-x: hidden;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--bg-snow);
  color: var(--text-primary);
  font-family: var(--font-family-body);
  font-size: var(--font-body);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Offset for fixed editorial header (16px top padding + 64px bar + 8px bottom = ~96px) */
  padding-top: 96px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-family-primary);
  color: var(--text-primary);
  font-weight: 600;
  letter-spacing: -0.025em;
  text-align: left;
}

p {
  color: var(--text-secondary);
  font-size: var(--font-body);
  text-align: left;
}

a {
  color: inherit;
  text-decoration: none;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.oryn-container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 40px;
}

.oryn-content-width {
  max-width: var(--content-max);
  margin: 0 auto;
}

/* ==========================================================================
   SECTION 1: Premium Navigation (Glassmorphism & Floating)
   ========================================================================== */

.oryn-navbar-wrapper {
  position: sticky;
  top: 20px;
  z-index: 1000;
  padding: 0 24px;
  transition: transform 0.3s ease, padding 0.3s ease;
}

.oryn-navbar {
  height: 76px;
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-pill);
  box-shadow: var(--glass-shadow);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.oryn-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-family-primary);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--text-primary);
  flex-shrink: 0;
  margin-right: 16px;
}

.oryn-logo-mark {
  width: 28px;
  height: 28px;
  background: var(--text-primary);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFF;
  font-size: 13px;
  font-weight: 800;
}

.oryn-brand-logo {
  height: 38px;
  width: auto;
  object-fit: contain;
  display: block;
}

.oryn-brand-logo-footer {
  height: 42px;
  width: auto;
  object-fit: contain;
  display: block;
}

.oryn-nav-links {
  display: none;
  align-items: center;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
  white-space: nowrap;
  flex-shrink: 0;
}

.oryn-nav-link {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  transition: color 0.2s ease;
  white-space: nowrap;
}

.oryn-nav-link:hover {
  color: var(--text-primary);
}

.oryn-nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  white-space: nowrap;
}

/* --- Luxury Minimalist Buttons --- */

/* Global Button Shadow Removal (Buttons & Button Hovers) */
button,
.btn,
[class*="btn-"],
[class*="-btn"] {
  box-shadow: none !important;
}

button:hover,
button:focus,
button:active,
.btn:hover,
.btn:focus,
.btn:active,
[class*="btn-"]:hover,
[class*="btn-"]:focus,
[class*="btn-"]:active,
[class*="-btn"]:hover,
[class*="-btn"]:focus,
[class*="-btn"]:active {
  box-shadow: none !important;
}

.btn-oryn-ghost {
  font-family: var(--font-family-primary);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  padding: 10px 15px;
  border-radius: var(--radius-pill);
  background: transparent;
  border: 1px solid transparent;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.btn-oryn-ghost:hover {
  background: rgba(25, 25, 25, 0.05);
  transform: translateY(-2px);
}

.btn-oryn-outline {
  font-family: var(--font-family-primary);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  box-shadow: none;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.btn-oryn-outline:hover {
  border-color: var(--text-primary);
  transform: translateY(-3px);
  box-shadow: none;
}

.btn-oryn-primary {
  font-family: var(--font-family-primary);
  font-size: 14px;
  font-weight: 600;
  color: #FFFFFF !important;
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  background: #0F172A;
  border: 1px solid rgba(230, 30, 88, 0.4);
  box-shadow: none;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  text-decoration: none !important;
}

.btn-oryn-primary:hover {
  background: var(--brand-rose);
  border-color: var(--brand-rose);
  transform: translateY(-3px);
  box-shadow: none;
  color: #FFFFFF !important;
}

.btn-oryn-trial {
  font-family: var(--font-family-primary);
  font-size: 14px;
  font-weight: 600;
  color: #FFFFFF !important;
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  background: var(--brand-rose);
  border: 1px solid var(--brand-rose);
  box-shadow: none;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none !important;
  cursor: pointer;
  white-space: nowrap;
}

.btn-oryn-trial:hover {
  background: #C8174B;
  border-color: #C8174B;
  transform: translateY(-2px);
  box-shadow: none;
}

.oryn-hamburger-btn {
  display: none !important;
  color: var(--text-primary) !important;
  padding: 6px 12px !important;
  border-radius: 8px;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex-shrink: 0;
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  text-decoration: none;
}

.oryn-hamburger-btn:hover,
.oryn-hamburger-btn:focus {
  background: var(--bg-surface-secondary);
  border-color: var(--text-primary);
}

/* Responsive Glass Navbar */
@media (min-width: 1200px) {
  .oryn-nav-links {
    display: flex !important;
  }
}

@media (min-width: 1200px) and (max-width: 1399px) {
  .oryn-navbar-wrapper {
    padding: 0 16px !important;
  }

  .oryn-navbar {
    padding: 0 14px !important;
  }

  .oryn-brand,
  .oryn-logo {
    margin-right: 12px !important;
  }

  .oryn-brand-logo {
    height: 30px !important;
  }

  .oryn-nav-links {
    gap: 20px !important;
  }

  .oryn-nav-link {
    font-size: 13px !important;
  }

  .oryn-nav-actions {
    gap: 5px !important;
  }

  .btn-oryn-trial,
  .btn-oryn-outline,
  .btn-oryn-primary {
    padding: 7px 12px !important;
    font-size: 12.5px !important;
  }
}

@media (max-width: 1199px) {
  .oryn-hamburger-btn {
    display: inline-flex !important;
  }

  .oryn-nav-links {
    display: none !important;
  }

  .oryn-navbar-wrapper {
    padding: 0 16px !important;
    top: 12px;
  }

  .oryn-navbar {
    height: 64px;
    padding: 0 20px !important;
  }

  .oryn-brand-logo {
    height: 32px !important;
  }

  .oryn-nav-actions {
    gap: 10px !important;
  }
}

@media (max-width: 575px) {

  .oryn-nav-actions .btn-oryn-trial,
  .oryn-nav-actions .btn-oryn-outline,
  .oryn-nav-actions .btn-oryn-primary,
  .oryn-nav-actions .btn-oryn-ghost {
    display: none !important;
  }
}

.btn-oryn-bronze {
  font-family: var(--font-family-primary);
  font-size: 15px;
  font-weight: 600;
  padding: 15px 30px;
  border-radius: var(--radius-pill);
  background: var(--brand-rose);
  border: 1px solid var(--brand-rose);
  color: #FFFFFF !important;
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-oryn-bronze:hover {
  background: #C8174B;
  border-color: #C8174B;
  transform: translateY(-3px);
  box-shadow: none;
  color: #FFFFFF !important;
}

.btn-oryn-trial {
  font-family: var(--font-family-primary);
  font-size: 14px;
  font-weight: 600;
  color: #FFFFFF !important;
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  background: var(--brand-rose);
  border: 1px solid var(--brand-rose);
  box-shadow: none;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  text-decoration: none !important;
}

.btn-oryn-trial:hover {
  background: #C8174B;
  border-color: #C8174B;
  transform: translateY(-2px);
  box-shadow: none;
  color: #FFFFFF !important;
}

/* ==========================================================================
   SECTION 2: HERO SECTION ("Sell Transformation")
   ========================================================================== */

.oryn-hero-section {
  position: relative;
  padding-top: 75px;
  padding-bottom: 40px;
  overflow: visible;
}

/* Signature Brand Dual-Ambient Rose & Cerulean Aurora Background */
.oryn-hero-glow {
  position: absolute;
  top: -80px;
  right: -5%;
  width: 750px;
  height: 750px;
  background: radial-gradient(circle at 65% 35%, rgba(230, 30, 88, 0.10) 0%, rgba(0, 114, 181, 0.08) 50%, rgba(250, 250, 248, 0) 75%);
  filter: blur(65px);
  z-index: 0;
  pointer-events: none;
}

.oryn-hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 60px;
  align-items: center;
  position: relative;
  z-index: 1;
}

@media (max-width: 992px) {
  .oryn-hero-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

.oryn-hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 16px;
  background: #FFFFFF;
  border: 1px solid rgba(230, 30, 88, 0.25);
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 700;
  color: var(--brand-rose);
  margin-bottom: 32px;
  box-shadow: 0 4px 16px rgba(230, 30, 88, 0.08);
}

.oryn-hero-tag::before {
  content: '';
  width: 8px;
  height: 8px;
  background: var(--brand-rose);
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 10px rgba(230, 30, 88, 0.6);
}

.oryn-hero-title {
  font-size: var(--font-hero);
  font-weight: 700;
  line-height: var(--line-height-hero);
  color: var(--text-primary);
  margin-bottom: 25px;
  letter-spacing: -0.045em;
}

.oryn-hero-desc {
  font-size: 20px;
  line-height: 1.5;
  color: var(--text-secondary);
  max-width: 540px;
  margin-bottom: 40px;
  font-weight: 400;
}

.oryn-hero-cta-group {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 55px;
  flex-wrap: wrap;
}

/* Connected Modules Pills */
.oryn-hero-modules-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 35px;
  border-top: 1px solid var(--border-color);
}

.oryn-module-pill {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--bg-surface-secondary);
  padding: 6px 16px;
  border-radius: 20px;
  border: 1px solid rgba(230, 228, 223, 0.8);
  transition: all 0.2s ease;
}

.oryn-module-pill:hover {
  background: var(--bg-surface);
  color: var(--text-primary);
  border-color: var(--accent-bronze);
}

.oryn-module-pill.active {
  background: var(--text-primary);
  color: #FFFFFF;
  border-color: var(--text-primary);
}

/* --- Inner Page Hero & Category Pill Bar --- */
.oryn-category-pills {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 40px;
  padding-top: 35px;
  border-top: 1px solid rgba(230, 30, 88, 0.15);
}

.oryn-pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: var(--radius-pill);
  font-family: var(--font-family-primary);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  text-decoration: none !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: none;
}

.oryn-pill-btn:hover {
  background: #FFFFFF;
  color: var(--text-primary);
  border-color: var(--brand-rose);
  transform: translateY(-2px);
  box-shadow: none;
}

.oryn-pill-btn.active-rose,
.oryn-pill-btn.active {
  background: var(--brand-rose);
  color: #FFFFFF !important;
  border-color: var(--brand-rose);
  box-shadow: none;
}

/* --- Hero 3D Interactive Ecosystem Visualization --- */

.oryn-hero-3d-wrapper {
  position: relative;
  width: 100%;
  height: 560px;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1200px;
}

.oryn-system-stage {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.oryn-3d-card-main {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotateY(-8deg) rotateX(6deg);
  width: 88%;
  height: 420px;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: 0 40px 100px -20px rgba(25, 25, 25, 0.12);
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  transition: all 0.4s ease;
  z-index: 5;
}

.oryn-3d-card-main:hover {
  transform: translate(-50%, -50%) rotateY(0deg) rotateX(0deg);
  box-shadow: 0 50px 120px -15px rgba(25, 25, 25, 0.16);
}

/* --- Floating Orbit Cards (High Contrast, 100% Readable, Floating in Front in 3D Space) --- */
.oryn-orbit-card {
  position: absolute;
  background: #FFFFFF !important;
  border: 1px solid #D6D3CD !important;
  border-radius: var(--radius-md);
  padding: 15px 20px;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.16) !important;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 100 !important;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  color: #191919 !important;
  white-space: nowrap;
  transform: translateZ(120px);
}

.oryn-orbit-card:hover {
  transform: translateZ(135px) translateY(-6px) scale(1.04);
  box-shadow: 0 28px 64px rgba(0, 0, 0, 0.22) !important;
  border-color: var(--accent-bronze) !important;
}

.oryn-orbit-1 {
  top: 20px;
  left: 10px;
  transform: translateZ(120px);
}

.oryn-orbit-2 {
  bottom: 25px;
  left: 20px;
  transform: translateZ(125px);
}

.oryn-orbit-3 {
  top: 30px;
  right: 15px;
  transform: translateZ(115px);
}

@media (max-width: 576px) {
  .oryn-orbit-1 {
    top: 10px;
    left: 5px;
  }

  .oryn-orbit-2 {
    bottom: 10px;
    left: 5px;
  }

  .oryn-orbit-3 {
    top: 60px;
    right: 5px;
  }
}

.oryn-orbit-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  background: var(--bg-surface-secondary);
  color: var(--text-primary);
  flex-shrink: 0;
}

.oryn-orbit-icon.bronze {
  background: rgba(230, 30, 88, 0.12);
  color: var(--brand-rose);
}

.oryn-orbit-icon.blue {
  background: rgba(0, 114, 181, 0.12);
  color: var(--brand-blue);
}

.oryn-orbit-icon.green {
  background: rgba(16, 185, 129, 0.15);
  color: var(--accent-success);
}

.oryn-orbit-icon.dark {
  background: #191919;
  color: #FFFFFF;
}

/* ==========================================================================
   SECTION 3: TRUST SECTION (No badges, No counters, Clean Scrolling Logos)
   ========================================================================== */

.oryn-trust-section {
  padding: 80px 0;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-snow);
}

.oryn-trust-headline {
  font-size: 24px;
  font-weight: 600;
  color: var(--text-primary);
  text-align: left;
  margin-bottom: 48px;
  letter-spacing: -0.02em;
}

.oryn-logo-marquee-container {
  overflow: hidden;
  position: relative;
  width: 100%;
  display: flex;
}

.oryn-logo-marquee-container::before,
.oryn-logo-marquee-container::after {
  content: "";
  position: absolute;
  top: 0;
  width: 120px;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.oryn-logo-marquee-container::before {
  left: 0;
  background: linear-gradient(to right, var(--bg-snow), transparent);
}

.oryn-logo-marquee-container::after {
  right: 0;
  background: linear-gradient(to left, var(--bg-snow), transparent);
}

.oryn-logo-track {
  display: flex;
  align-items: center;
  gap: 80px;
  animation: scrollMarquee 35s linear infinite;
  white-space: nowrap;
}

.oryn-trust-item {
  font-family: var(--font-family-primary);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text-secondary);
  opacity: 0.65;
  transition: opacity 0.2s ease, color 0.2s ease;
  display: flex;
  align-items: center;
  gap: 10px;
}

.oryn-trust-item:hover {
  opacity: 1;
  color: var(--text-primary);
}

@keyframes scrollMarquee {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

/* ==========================================================================
   SECTION 4: EDITORIAL STORY (Huge Whitespace, Magazine-Like)
   ========================================================================== */

.oryn-story-section {
  padding: 40px 0;
  background: var(--bg-surface);
}

.oryn-editorial-quote {
  font-size: 52px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.04em;
  color: var(--text-primary);
  max-width: 900px;
  margin-bottom: 60px;
  text-align: left;
}

.oryn-editorial-quote span {
  color: var(--text-muted);
}

.oryn-transformation-banner {
  background: var(--bg-snow);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  padding: 50px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 40px;
}

@media (max-width: 768px) {
  .oryn-transformation-banner {
    grid-template-columns: 1fr;
    text-align: left;
  }
}

.oryn-silo-box {
  padding: 30px;
  background: var(--bg-surface);
  border: 1px dashed var(--border-color);
  border-radius: var(--radius-md);
  opacity: 0.75;
}

.oryn-unified-box {
  padding: 35px;
  background: var(--text-primary);
  color: #FFFFFF;
  border-radius: var(--radius-md);
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25);
  position: relative;
  border-left: 4px solid var(--brand-rose);
}

.oryn-unified-box h4 {
  color: #FFFFFF;
}

/* ==========================================================================
   SECTION 5: THE ECOSYSTEM (10-Card Massive Bento Grid)
   ========================================================================== */

.oryn-bento-section {
  padding: var(--section-padding-top) 0 var(--section-padding-bottom);
  background: var(--bg-snow);
}

.oryn-section-header {
  margin-bottom: 72px;
  text-align: left;
}

.oryn-section-tag {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent-bronze);
  margin-bottom: 12px;
  display: block;
}

.oryn-section-title {
  font-size: var(--font-section);
  font-weight: 700;
  line-height: 1.08;
  color: var(--text-primary);
  letter-spacing: -0.04em;
  text-align: left;
}

.oryn-section-subtitle {
  font-size: 20px;
  color: var(--text-secondary);
  max-width: 700px;
  margin-top: 15px;
  text-align: left;
}

/* Massive Bento Layout (12 Columns) */
.oryn-bento-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 25px;
}

.oryn-bento-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 35px;
  position: relative;
  overflow: hidden;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.oryn-bento-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-hover);
  border-color: #D6D3CD;
}

.oryn-bento-span-8 {
  grid-column: span 8;
}

.oryn-bento-span-6 {
  grid-column: span 6;
}

.oryn-bento-span-4 {
  grid-column: span 4;
}

.oryn-bento-span-12 {
  grid-column: span 12;
}

@media (max-width: 992px) {

  .oryn-bento-span-8,
  .oryn-bento-span-6,
  .oryn-bento-span-4 {
    grid-column: span 12;
  }
}

.oryn-bento-category {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-bronze);
  margin-bottom: 10px;
  display: block;
}

.oryn-bento-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 12px;
  letter-spacing: -0.03em;
}

.oryn-bento-desc {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 25px;
}

/* Dashboard Mockup Preview inside Bento Card */
.oryn-bento-visual {
  width: 100%;
  border-radius: var(--radius-md);
  background: var(--bg-surface-secondary);
  border: 1px solid var(--border-color);
  padding: 20px;
  margin-top: auto;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.oryn-bento-card:hover .oryn-bento-visual {
  transform: scale(1.025);
}

/* ==========================================================================
   SECTION 6: INDUSTRIES (Magazine Layout - Alternate Left/Right)
   ========================================================================== */

.oryn-industries-section {
  padding: var(--section-padding-top) 0;
  background: var(--bg-surface);
}

.oryn-industry-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  padding: 80px 0;
  border-bottom: 1px solid var(--border-color);
}

.oryn-industry-row:last-child {
  border-bottom: none;
}

.oryn-industry-row.reverse {
  direction: rtl;
}

.oryn-industry-row.reverse>* {
  direction: ltr;
}

@media (max-width: 992px) {

  .oryn-industry-row,
  .oryn-industry-row.reverse {
    grid-template-columns: 1fr;
    gap: 40px;
    direction: ltr;
  }
}

.oryn-industry-image-box {
  width: 100%;
  height: 480px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  position: relative;
  background: var(--bg-surface-secondary);
  border: 1px solid var(--border-color);
}

.oryn-industry-image-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.oryn-industry-row:hover .oryn-industry-image-box img {
  transform: scale(1.04);
}

.oryn-industry-content {
  padding: 20px 0;
}

.oryn-industry-num {
  font-family: var(--font-family-primary);
  font-size: 14px;
  font-weight: 700;
  color: var(--accent-bronze);
  margin-bottom: 12px;
  letter-spacing: 0.05em;
}

.oryn-industry-title {
  font-size: 42px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 20px;
  letter-spacing: -0.035em;
}

.oryn-industry-desc {
  font-size: 18px;
  color: var(--text-secondary);
  margin-bottom: 32px;
  line-height: 1.6;
}

/* ==========================================================================
   SECTION 7: QUIET INTELLIGENCE (AI Apple Shortcuts Style - Prominent)
   ========================================================================== */

.oryn-ai-section {
  padding: var(--section-padding-top) 0 var(--section-padding-bottom);
  background: var(--bg-snow);
}

.oryn-ai-shortcut-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  padding: 64px;
  margin-top: 50px;
  box-shadow: var(--shadow-soft);
}

.oryn-ai-pipeline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  position: relative;
  overflow-x: auto;
  padding: 24px 0;
}

.oryn-ai-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 150px;
  padding: 20px 15px;
  border-radius: var(--radius-md);
  background: var(--bg-surface-secondary);
  border: 1px solid var(--border-color);
  transition: all 0.3s ease;
  cursor: pointer;
}

.oryn-ai-step-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: var(--text-primary);
  margin-bottom: 14px;
  transition: all 0.3s ease;
}

.oryn-ai-step.active {
  background: var(--text-primary);
  border-color: var(--text-primary);
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(25, 25, 25, 0.2);
}

.oryn-ai-step.active .oryn-ai-step-icon {
  background: rgba(255, 255, 255, 0.15);
  color: #FFFFFF;
  border-color: transparent;
}

.oryn-ai-step-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  transition: color 0.3s ease;
}

.oryn-ai-step.active .oryn-ai-step-title {
  color: #FFFFFF;
}

.oryn-ai-arrow {
  color: var(--border-color);
  font-size: 24px;
  font-weight: 300;
  flex-shrink: 0;
}

/* ==========================================================================
   SECTION 8: WHY ORYNBIZ (Large Comparison Table)
   ========================================================================== */

.oryn-compare-section {
  padding: var(--section-padding-top) 0;
  background: var(--bg-surface);
}

.oryn-comparison-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin-top: 55px;
}

@media (max-width: 768px) {
  .oryn-comparison-grid {
    grid-template-columns: 1fr;
  }
}

.oryn-compare-col {
  padding: 50px;
  border-radius: var(--radius-lg);
}

.oryn-compare-legacy {
  background: var(--bg-surface-secondary);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
}

.oryn-compare-orynbiz {
  background: var(--text-primary);
  color: #FFFFFF;
  border: 1px solid var(--text-primary);
  box-shadow: 0 30px 80px rgba(25, 25, 25, 0.15);
}

.oryn-compare-orynbiz h3 {
  color: #FFFFFF;
}

.oryn-compare-list {
  list-style: none;
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.oryn-compare-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 500;
}

/* ==========================================================================
   SECTION 9: CUSTOMER STORIES (Huge Photography, One Story)
   ========================================================================== */

.oryn-story-feature-section {
  padding: var(--section-padding-top) 0;
  background: var(--bg-snow);
}

.oryn-story-feature-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
}

@media (max-width: 992px) {
  .oryn-story-feature-card {
    grid-template-columns: 1fr;
  }
}

.oryn-story-photo {
  height: 540px;
  position: relative;
  overflow: hidden;
  background: var(--bg-surface-secondary);
}

.oryn-story-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.oryn-story-metrics {
  padding: 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.oryn-metric-stat {
  font-family: var(--font-family-primary);
  font-size: 64px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1;
  margin-bottom: 10px;
  letter-spacing: -0.05em;
}

.oryn-metric-label {
  font-size: 15px;
  font-weight: 600;
  color: var(--accent-bronze);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 32px;
}

.oryn-metric-quote {
  font-size: 22px;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.45;
  margin-bottom: 25px;
  letter-spacing: -0.02em;
}

/* ==========================================================================
   SECTION 10: RESOURCES (Magazine Thumbnails)
   ========================================================================== */

.oryn-resources-section {
  padding: var(--section-padding-top) 0;
  background: var(--bg-surface);
}

.oryn-resources-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  margin-top: 55px;
}

@media (max-width: 992px) {
  .oryn-resources-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .oryn-resources-grid {
    grid-template-columns: 1fr;
  }
}

.oryn-resource-card {
  display: block;
  group: resource;
}

.oryn-resource-thumb {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-md);
  background: var(--bg-surface-secondary);
  border: 1px solid var(--border-color);
  overflow: hidden;
  margin-bottom: 20px;
}

.oryn-resource-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.oryn-resource-card:hover .oryn-resource-thumb img {
  transform: scale(1.05);
}

.oryn-resource-tag {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-bronze);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 10px;
  display: block;
}

.oryn-resource-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.35;
}

/* ==========================================================================
   SECTION 11: CALL TO ACTION (Apple / Stripe Luxury Editorial Presentation)
   ========================================================================== */

.oryn-cta-section {
  padding: 100px 0;
  background: var(--bg-surface);
  text-align: left;
  border-top: 1px solid var(--border-color);
  position: relative;
  overflow: hidden;
}

/* Dark Luxury Glassmorphism Banner Card used across Inner Pages (platform.html, etc.) */
.oryn-cta-card {
  background: #0F172A;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-top: 2px solid var(--brand-rose);
  border-radius: var(--radius-xl);
  padding: 70px 60px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 32px 80px rgba(15, 23, 42, 0.35);
  text-align: left;
}

/* Ambient Rose & Blue Aurora glow inside CTA Card */
.oryn-cta-card::before {
  content: '';
  position: absolute;
  top: -120px;
  right: -100px;
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, rgba(230, 30, 88, 0.28) 0%, rgba(0, 114, 181, 0.22) 50%, transparent 70%);
  filter: blur(60px);
  pointer-events: none;
}

.oryn-cta-tag {
  font-family: var(--font-family-primary);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #38BDF8;
  margin-bottom: 15px;
  display: inline-block;
  background: rgba(56, 189, 248, 0.12);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(56, 189, 248, 0.25);
}

.oryn-cta-title {
  font-size: 56px;
  font-weight: 800;
  line-height: 1.12;
  color: var(--text-primary);
  max-width: 820px;
  margin-bottom: 25px;
  letter-spacing: -0.04em;
}

.oryn-cta-card .oryn-cta-title {
  color: #FFFFFF;
}

.oryn-cta-desc {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 720px;
  margin-bottom: 40px;
}

.oryn-cta-card .oryn-cta-desc {
  color: rgba(255, 255, 255, 0.75);
}

@media (max-width: 768px) {
  .oryn-cta-card {
    padding: 44px 28px;
  }

  .oryn-cta-title {
    font-size: 36px;
  }

  .oryn-cta-desc {
    font-size: 15px;
  }
}

/* --- Dedicated Luxury CTA Buttons for Section 11 & .oryn-cta-card --- */

.btn-cta-primary {
  font-family: var(--font-family-primary);
  font-size: 17px;
  font-weight: 700;
  color: #FFFFFF !important;
  padding: 15px 30px;
  border-radius: var(--radius-pill);
  background: var(--brand-rose);
  border: 1px solid var(--brand-rose);
  box-shadow: none;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none !important;
  cursor: pointer;
}

.btn-cta-primary i {
  transition: transform 0.25s ease;
}

.btn-cta-primary:hover {
  background: #C8174B;
  border-color: #C8174B;
  color: #FFFFFF !important;
  transform: translateY(-3px);
  box-shadow: none;
}

.btn-cta-primary:hover i {
  transform: translateX(4px);
}

.btn-cta-secondary {
  font-family: var(--font-family-primary);
  font-size: 17px;
  font-weight: 600;
  color: #FFFFFF !important;
  padding: 15px 30px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: none;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none !important;
  cursor: pointer;
}

.btn-cta-secondary:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.45);
  color: #FFFFFF !important;
  transform: translateY(-3px);
  box-shadow: none;
}

/* ==========================================================================
   SECTION 12: PREMIUM FOOTER
   ========================================================================== */

.oryn-footer {
  padding: 100px 0 60px;
  background: var(--bg-snow);
  border-top: 1px solid var(--border-color);
}

.oryn-footer-grid {
  display: grid;
  grid-template-columns: 2fr repeat(4, 1fr);
  gap: 40px;
  margin-bottom: 80px;
}

@media (max-width: 992px) {
  .oryn-footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.oryn-footer-brand h4 {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 12px;
}

.oryn-footer-brand p,
.oryn-footer-desc {
  font-size: 15px;
  color: var(--text-secondary);
  max-width: 320px;
  line-height: 1.6;
}

.oryn-footer-col h5,
.oryn-footer-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 20px;
}

.oryn-footer-links,
.oryn-footer-list {
  list-style: none !important;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0 !important;
  padding: 0 !important;
}

.oryn-footer-links a,
.oryn-footer-list a {
  font-size: 15px;
  color: var(--text-secondary);
  text-decoration: none !important;
  transition: color 0.2s ease;
}

.oryn-footer-links a:hover,
.oryn-footer-list a:hover {
  color: var(--brand-rose);
}

.oryn-footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-top: 25px;
}

.oryn-footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-secondary);
  font-size: 20px;
  line-height: 1;
  transition: color 0.22s ease, transform 0.22s ease, background-color 0.22s ease, border-color 0.22s ease;
  text-decoration: none;
}

.oryn-footer-social a svg {
  width: 20px;
  height: 20px;
  vertical-align: middle;
}

.oryn-footer-social a:hover {
  transform: translateY(-2px);
}

/* Per-platform brand hover colors */
.oryn-footer-social a[aria-label="Facebook"]:hover {
  color: #1877F2;
}

.oryn-footer-social a[aria-label="Instagram"]:hover {
  color: #E1306C;
}

.oryn-footer-social a[aria-label="X (Twitter)"]:hover {
  color: #000000;
}

.oryn-footer-social a[aria-label="LinkedIn"]:hover {
  color: #0A66C2;
}

.oryn-footer-social a[aria-label="YouTube"]:hover {
  color: #FF0000;
}

.oryn-footer-social a[aria-label="Threads"]:hover {
  color: #000000;
}

.oryn-footer-social a[aria-label="WhatsApp"]:hover {
  color: #25D366;
}

.oryn-footer-social a[aria-label="Telegram"]:hover {
  color: #229ED9;
}

.oryn-footer-bottom {
  padding-top: 40px;
  border-top: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  color: var(--text-secondary);
}

.oryn-footer-bottom a {
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.2s ease;
}

.oryn-footer-bottom a:hover {
  color: var(--brand-rose);
}

@media (max-width: 768px) {
  .oryn-footer-bottom {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }
  .oryn-footer-bottom a {
    padding: 8px 6px;
    display: inline-block;
  }
}

/* --- SVG Dashboard Illustrations (High-End CSS Drawing) --- */
.oryn-mock-ui-header {
  height: 24px;
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 15px;
}

.oryn-mock-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border-color);
}

.oryn-mock-chart {
  height: 120px;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 12px 0 0;
}

.oryn-mock-bar {
  flex: 1;
  background: var(--text-primary);
  border-radius: 6px 6px 0 0;
  opacity: 0.85;
  transition: height 0.6s ease;
}

.oryn-mock-bar.accent {
  background: linear-gradient(180deg, var(--brand-rose) 0%, var(--brand-blue) 100%);
  box-shadow: 0 0 16px rgba(230, 30, 88, 0.35);
}

/* --- Scroll Reveal Animations (1.2s smooth fade in) --- */
.oryn-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.oryn-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   TEMPLATE 01: PLATFORM PAGE (The Business Operating System Philosophy)
   ========================================================================== */

.oryn-nav-link.active {
  color: var(--text-primary);
  font-weight: 600;
  position: relative;
}

.oryn-nav-link.active::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 5px;
  height: 5px;
  background: var(--brand-rose);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--brand-rose-glow);
}

/* 3-Column Architecture Layer Cards */
.oryn-arch-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 55px;
}

@media (max-width: 992px) {
  .oryn-arch-grid {
    grid-template-columns: 1fr;
  }
}

.oryn-arch-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 40px 30px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  border-top: 4px solid var(--brand-rose);
}

.oryn-arch-card.layer-blue {
  border-top-color: var(--brand-blue);
}

.oryn-arch-card.layer-dark {
  border-top-color: #0F172A;
}

.oryn-arch-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-hover);
  border-color: #CBD5E1;
}

/* 2-Column Philosophy Side-by-Side Comparison */
.oryn-compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  margin-top: 50px;
}

@media (max-width: 992px) {
  .oryn-compare-grid {
    grid-template-columns: 1fr;
  }
}

.oryn-compare-card {
  border-radius: var(--radius-lg);
  padding: 45px 40px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.oryn-compare-card.silo-tax {
  background: var(--bg-surface-secondary);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
}

.oryn-compare-card.unified-core {
  background: #0F172A;
  border: 1px solid rgba(230, 30, 88, 0.4);
  color: #FFFFFF;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.25);
  position: relative;
}

.oryn-compare-card.unified-core h3,
.oryn-compare-card.unified-core h4 {
  color: #FFFFFF;
}

/* 4-Column Enterprise Trust & Security Grid */
.oryn-security-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 25px;
  margin-top: 50px;
}

@media (max-width: 992px) {
  .oryn-security-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .oryn-security-grid {
    grid-template-columns: 1fr;
  }
}

.oryn-security-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 30px 25px;
  transition: all 0.3s ease;
}

.oryn-security-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-soft);
  border-color: #CBD5E1;
}

/* 4-Column Onboarding Timeline Grid */
.oryn-timeline-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 25px;
  margin-top: 55px;
  position: relative;
}

@media (max-width: 992px) {
  .oryn-timeline-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .oryn-timeline-grid {
    grid-template-columns: 1fr;
  }
}

.oryn-timeline-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 30px 25px;
  position: relative;
}

.oryn-step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(230, 30, 88, 0.12);
  color: var(--brand-rose);
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 20px;
}

/* ==========================================================================
   TEMPLATE 03: PRODUCT DETAIL PAGE (Flagship Inventory Management)
   ========================================================================== */

/* Telemetry Stat Ribbon Section Wrapper */
.oryn-stat-ribbon-section {
  background: var(--bg-surface);
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  padding: 35px 0;
}

/* Telemetry Stat Ribbon Below Hero */
.oryn-stat-ribbon {
  margin-top: 0;
}

.oryn-stat-ribbon-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  text-align: left;
}

@media (max-width: 992px) {
  .oryn-stat-ribbon-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .oryn-stat-ribbon-grid {
    grid-template-columns: 1fr;
  }
}

.oryn-stat-ribbon-item {
  border-left: 2px solid var(--border-color);
  padding-left: 24px;
}

.oryn-stat-ribbon-item.highlight {
  border-left-color: var(--brand-rose);
}

.oryn-stat-ribbon-item.highlight-blue {
  border-left-color: var(--brand-blue);
}

/* Dashboard Mockup Container */
.oryn-dashboard-showcase {
  background: #0F172A;
  border: 1px solid rgba(230, 30, 88, 0.35);
  border-radius: var(--radius-xl);
  box-shadow: 0 40px 100px -20px rgba(15, 23, 42, 0.35);
  padding: 30px;
  position: relative;
  overflow: hidden;
  color: #FFFFFF;
  margin-top: 55px;
}

.oryn-sku-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm);
  padding: 15px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  transition: all 0.25s ease;
}

.oryn-sku-card:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(230, 30, 88, 0.5);
}

/* 2x2 Feature Pillars Grid */
.oryn-pillar-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  margin-top: 55px;
}

@media (max-width: 992px) {
  .oryn-pillar-grid {
    grid-template-columns: 1fr;
  }
}

.oryn-pillar-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 40px 35px;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.oryn-pillar-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-hover);
  border-color: #CBD5E1;
}

/* Operational Workflow Cards */
.oryn-workflow-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 25px;
  margin-top: 55px;
}

@media (max-width: 992px) {
  .oryn-workflow-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .oryn-workflow-grid {
    grid-template-columns: 1fr;
  }
}

.oryn-workflow-step {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 30px 25px;
  position: relative;
  transition: all 0.3s ease;
}

.oryn-workflow-step:hover {
  border-color: var(--brand-blue);
  box-shadow: var(--shadow-soft);
}

/* Minimalist FAQ Accordion */
.oryn-faq-accordion {
  margin-left: auto !important;
  margin-right: auto !important;
}

.oryn-faq-accordion .accordion-item {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md) !important;
  margin-bottom: 15px;
  overflow: hidden;
}

.oryn-faq-accordion .accordion-button {
  font-family: var(--font-family-primary);
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
  background: var(--bg-surface);
  padding: 20px 30px;
  box-shadow: none;
}

.oryn-faq-accordion .accordion-button:not(.collapsed) {
  color: var(--brand-rose);
  background: var(--bg-surface-secondary);
}

.oryn-faq-accordion .accordion-body {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-secondary);
  padding: 20px 30px;
  background: var(--bg-surface);
}

/* ==========================================================================
   TEMPLATE 04: INDUSTRY SOLUTION PAGE (Executive Consulting Presentation)
   ========================================================================== */

/* 3-Column Executive Consulting Diagnostic Cards */
.oryn-consulting-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 55px;
}

@media (max-width: 992px) {
  .oryn-consulting-grid {
    grid-template-columns: 1fr;
  }
}

.oryn-consulting-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 40px 35px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.oryn-consulting-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-hover);
  border-color: #CBD5E1;
}

.oryn-consulting-num {
  font-family: var(--font-family-primary);
  font-size: 40px;
  font-weight: 800;
  color: #E2E8F0;
  line-height: 1;
  margin-bottom: 25px;
}

/* Executive Editorial Case Study Container */
.oryn-case-card {
  background: #0F172A;
  border: 1px solid rgba(230, 30, 88, 0.4);
  border-radius: var(--radius-xl);
  box-shadow: 0 40px 100px -20px rgba(15, 23, 42, 0.4);
  padding: 55px;
  position: relative;
  overflow: hidden;
  color: #FFFFFF;
  margin-top: 55px;
}

@media (max-width: 768px) {
  .oryn-case-card {
    padding: 35px 25px;
  }
}

.oryn-case-quote {
  font-family: var(--font-family-primary);
  font-size: 25px;
  font-weight: 500;
  line-height: 1.45;
  color: #FFFFFF;
  margin-bottom: 25px;
  letter-spacing: -0.02em;
}

@media (max-width: 768px) {
  .oryn-case-quote {
    font-size: 20px;
  }
}

.oryn-case-metric {
  border-left: 3px solid var(--brand-rose);
  padding-left: 20px;
}

.oryn-case-metric.metric-blue {
  border-left-color: var(--brand-blue);
}

/* ==========================================================================
   TEMPLATE 05: COMPARISON PAGE (OrynBiz vs. Legacy Accounting Software, Traditional Spreadsheets, Fragmented Cloud Apps, & Legacy Accounting Software)
   ========================================================================== */

/* Glassmorphic Executive Comparison Table */
.oryn-compare-table-wrapper {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  overflow-x: auto;
  box-shadow: var(--shadow-soft);
  margin-top: 55px;
}

.oryn-compare-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  text-align: left;
  min-width: 960px;
}

.oryn-compare-table th,
.oryn-compare-table td {
  padding: 20px 30px;
  border-bottom: 1px solid var(--border-color);
  font-size: 15px;
  vertical-align: middle;
}

.oryn-compare-table thead th {
  background: var(--bg-surface-secondary);
  font-family: var(--font-family-primary);
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  position: sticky;
  top: 0;
  z-index: 2;
  border-bottom: 2px solid var(--border-color);
}

.oryn-compare-table th.col-orynbiz,
.oryn-compare-table td.col-orynbiz {
  background: rgba(230, 30, 88, 0.04);
  border-left: 2px solid var(--brand-rose);
  border-right: 2px solid var(--brand-rose);
  font-weight: 600;
  color: var(--text-primary);
}

.oryn-compare-table thead th.col-orynbiz {
  background: #0F172A;
  color: #FFFFFF;
  border-top: 4px solid var(--brand-rose);
  box-shadow: 0 10px 30px rgba(230, 30, 88, 0.25);
}

.oryn-compare-table tr:last-child td {
  border-bottom: none;
}

.oryn-compare-table tr:hover td {
  background: var(--bg-surface-secondary);
}

.oryn-compare-table tr:hover td.col-orynbiz {
  background: rgba(230, 30, 88, 0.08);
}

/* 3-Column TCO Financial Evaluation Cards */
.oryn-tco-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 55px;
}

@media (max-width: 992px) {
  .oryn-tco-grid {
    grid-template-columns: 1fr;
  }
}

.oryn-tco-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 40px 35px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.oryn-tco-card.highlight-rose {
  border-top: 4px solid var(--brand-rose);
  background: var(--bg-surface-secondary);
}

.oryn-tco-card.highlight-blue {
  border-top: 4px solid var(--brand-blue);
}

.oryn-tco-card.highlight-dark {
  border-top: 4px solid #0F172A;
}

.oryn-tco-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-hover);
  border-color: #CBD5E1;
}

/* ==========================================================================
   TEMPLATE 02: PRODUCT CATEGORY HUB (The Apple-Style Products Directory)
   ========================================================================== */

/* Interactive Category Filter Pills */
.oryn-category-pills {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 35px;
  margin-bottom: 20px;
}

.oryn-pill-btn {
  font-family: var(--font-family-primary);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 50px;
  padding: 10px 20px;
  transition: all 0.25s ease;
  text-decoration: none;
  cursor: pointer;
}

.oryn-pill-btn:hover {
  color: var(--text-primary);
  border-color: var(--text-secondary);
  background: var(--bg-surface-secondary);
}

.oryn-pill-btn.active {
  color: #FFFFFF;
  background: #0F172A;
  border-color: #0F172A;
  box-shadow: none;
}

.oryn-pill-btn.active-rose {
  color: #FFFFFF;
  background: var(--brand-rose);
  border-color: var(--brand-rose);
  box-shadow: none;
}

/* Apple-Style Full-Width Product Showcase Cards */
.oryn-product-showcase {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  padding: 55px;
  margin-top: 40px;
  position: relative;
  overflow: hidden;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (max-width: 992px) {
  .oryn-product-showcase {
    padding: 35px 25px;
  }
}

.oryn-product-showcase:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
  border-color: #CBD5E1;
}

.oryn-product-showcase.showcase-rose {
  border-top: 5px solid var(--brand-rose);
}

.oryn-product-showcase.showcase-blue {
  border-top: 5px solid var(--brand-blue);
}

.oryn-product-showcase.showcase-dark {
  background: #0F172A;
  border: 1px solid rgba(230, 30, 88, 0.35);
  color: #FFFFFF;
}

.oryn-product-showcase.showcase-dark h3,
.oryn-product-showcase.showcase-dark h4 {
  color: #FFFFFF;
}

.oryn-product-preview-box {
  background: var(--bg-surface-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 28px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.oryn-product-showcase.showcase-dark .oryn-product-preview-box {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}

/* ==========================================================================
   TEMPLATE 06: RESOURCES / CASE STUDIES (Knowledge Hub & ROI Calculator)
   ========================================================================== */

/* Interactive ROI Calculator Card */
.oryn-roi-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  padding: 55px;
  margin-top: 40px;
  box-shadow: var(--shadow-soft);
  position: relative;
  overflow: hidden;
}

@media (max-width: 992px) {
  .oryn-roi-card {
    padding: 35px 25px;
  }
}

.oryn-roi-form-label {
  font-family: var(--font-family-primary);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  margin-bottom: 12px;
}

.oryn-roi-select {
  background: var(--bg-surface-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 15px 20px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  width: 100%;
  outline: none;
  transition: all 0.25s ease;
}

.oryn-roi-select:focus {
  border-color: var(--brand-rose);
  box-shadow: 0 0 0 4px rgba(230, 30, 88, 0.15);
}

.oryn-roi-result-box {
  background: #0F172A;
  border: 1px solid rgba(230, 30, 88, 0.35);
  border-radius: var(--radius-lg);
  padding: 35px;
  color: #FFFFFF;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.35);
}

.oryn-roi-metric-val {
  font-family: var(--font-family-primary);
  font-size: 40px;
  font-weight: 800;
  line-height: 1.1;
  color: #FFFFFF;
  margin-bottom: 6px;
}

.oryn-roi-metric-val.rose {
  color: var(--brand-rose);
}

.oryn-roi-metric-val.emerald {
  color: #10B981;
}

/* 3-Column Whitepaper Editorial Cards */
.oryn-whitepaper-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 50px;
}

@media (max-width: 992px) {
  .oryn-whitepaper-grid {
    grid-template-columns: 1fr;
  }
}

.oryn-whitepaper-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 35px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.oryn-whitepaper-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
  border-color: #CBD5E1;
}

.oryn-whitepaper-icon {
  width: 55px;
  height: 55px;
  border-radius: var(--radius-md);
  background: rgba(230, 30, 88, 0.08);
  color: var(--brand-rose);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 25px;
  margin-bottom: 25px;
}

.oryn-whitepaper-icon.icon-blue {
  background: rgba(0, 114, 181, 0.08);
  color: var(--brand-blue);
}

.oryn-whitepaper-icon.icon-dark {
  background: #0F172A;
  color: #FFFFFF;
}

/* ==========================================================================
   TEMPLATE 07: PRICING & LICENSING HUB (All-Inclusive Enterprise Licensing)
   ========================================================================== */

/* Interactive Billing Cycle Toggle */
.oryn-pricing-toggle-box {
  display: inline-flex;
  align-items: center;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 50px;
  padding: 5px;
  margin-top: 30px;
  box-shadow: var(--shadow-soft);
}

.oryn-toggle-btn {
  font-family: var(--font-family-primary);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-secondary);
  background: transparent;
  border: none;
  border-radius: 50px;
  padding: 10px 25px;
  transition: all 0.25s ease;
  cursor: pointer;
}

.oryn-toggle-btn.active {
  background: #0F172A;
  color: #FFFFFF;
  box-shadow: none;
}

.oryn-toggle-badge {
  background: rgba(230, 30, 88, 0.15);
  color: var(--brand-rose);
  font-size: 12px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 50px;
  margin-left: 10px;
}

/* 4-Column Enterprise Pricing Grid */
.oryn-pricing-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 55px;
}

@media (max-width: 1200px) {
  .oryn-pricing-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .oryn-pricing-grid-4 {
    grid-template-columns: 1fr;
  }
}

/* 5th Plan: Horizontal Custom Enterprise Card */
.oryn-pricing-horizontal-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  padding: 40px 50px;
  position: relative;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: var(--shadow-soft);
}

.oryn-pricing-horizontal-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-color: var(--brand-rose);
}

@media (max-width: 992px) {
  .oryn-pricing-horizontal-card {
    padding: 30px 25px;
  }
}

/* 3-Column Enterprise Pricing Cards */
.oryn-pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 55px;
}

@media (max-width: 992px) {
  .oryn-pricing-grid {
    grid-template-columns: 1fr;
  }
}

.oryn-pricing-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  padding: 40px 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.oryn-pricing-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-hover);
  border-color: #CBD5E1;
}

.oryn-pricing-card.featured {
  background: #0F172A;
  border: 2px solid var(--brand-rose);
  box-shadow: 0 30px 80px -20px rgba(230, 30, 88, 0.35);
  color: #FFFFFF;
}

.oryn-pricing-card.featured:hover {
  transform: translateY(-10px);
  box-shadow: 0 40px 100px -20px rgba(230, 30, 88, 0.45);
}

.oryn-pricing-val {
  font-family: var(--font-family-primary);
  font-size: 40px;
  font-weight: 800;
  line-height: 1;
  color: var(--text-primary);
  margin-top: 15px;
  margin-bottom: 10px;
}

.oryn-pricing-card.featured .oryn-pricing-val {
  color: #FFFFFF;
}

.oryn-pricing-period {
  font-size: 15px;
  color: var(--text-secondary);
  font-weight: 500;
}

.oryn-pricing-card.featured .oryn-pricing-period {
  color: rgba(255, 255, 255, 0.7);
}

.oryn-pricing-list {
  list-style: none;
  padding: 0;
  margin: 28px 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.oryn-pricing-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--text-secondary);
}

.oryn-pricing-list li i {
  font-size: 15px;
  flex-shrink: 0;
  margin-top: 1px;
}

.oryn-pricing-card.featured .oryn-pricing-list li {
  color: rgba(255, 255, 255, 0.9);
}

.oryn-toggle-features-btn {
  color: #BE123C !important;
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all 0.2s ease;
}

.oryn-toggle-features-btn:hover {
  color: #9F1239 !important;
  text-decoration: underline !important;
}

.oryn-dark-card .oryn-toggle-features-btn {
  color: #fbbf24 !important;
}

.oryn-dark-card .oryn-toggle-features-btn:hover {
  color: #fde68a !important;
}

/* ==========================================================================
   TEMPLATE 08: COMPANY & ENGINEERING MANIFESTO (about.html)
   ========================================================================== */

/* Executive Leadership & Team Cards (Restructured 4-Column Layout) */
.oryn-team-card {
  background: var(--bg-surface, #ffffff);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: var(--radius-xl, 20px);
  padding: 32px 26px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.04);
}

.oryn-team-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 35px -8px rgba(15, 23, 42, 0.09);
  border-color: rgba(230, 30, 88, 0.35);
}

.oryn-team-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 22px;
}

.oryn-team-avatar {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.5px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.1);
  transition: all 0.3s ease;
}

.oryn-team-card:hover .oryn-team-avatar {
  background: linear-gradient(135deg, var(--brand-rose, #e61e58) 0%, #0F172A 100%);
  transform: scale(1.05);
}

.oryn-team-badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 6px;
  background: #F8FAFC;
  color: #334155;
  border: 1px solid #E2E8F0;
}

.oryn-team-name {
  font-size: 20px;
  font-weight: 700;
  color: #0F172A;
  margin-bottom: 4px;
  line-height: 1.3;
}

.oryn-team-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--brand-rose, #e61e58);
  margin-bottom: 16px;
}

.oryn-team-quote {
  font-size: 13.5px;
  line-height: 1.65;
  color: #475569;
  position: relative;
  padding-left: 14px;
  border-left: 2px solid rgba(230, 30, 88, 0.3);
  margin-bottom: 22px;
}

.oryn-team-footer {
  padding-top: 16px;
  border-top: 1px solid var(--border-color, #E2E8F0);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.oryn-team-domain {
  font-size: 12px;
  font-weight: 600;
  color: #64748B;
  display: flex;
  align-items: center;
  gap: 6px;
}

.oryn-team-social {
  color: #94A3B8;
  font-size: 16px;
  transition: color 0.2s ease, transform 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.oryn-team-social:hover {
  color: #0A66C2;
  transform: translateY(-2px);
}

.oryn-leader-photo-slot {
  display: none;
}


.oryn-leader-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.oryn-leader-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-hover);
  border-color: #CBD5E1;
}

.oryn-leader-img-box {
  height: 280px;
  background: #0F172A;
  position: relative;
  overflow: hidden;
}

.oryn-leader-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.oryn-leader-card:hover .oryn-leader-img-box img {
  transform: scale(1.04);
}

.oryn-leader-body {
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-grow: 1;
}

/* Global Office Location Cards */
.oryn-office-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 25px;
  margin-top: 50px;
}

@media (max-width: 1200px) {
  .oryn-office-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .oryn-office-grid {
    grid-template-columns: 1fr;
  }
}

.oryn-office-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.35s ease;
}

.oryn-office-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-soft);
  border-color: var(--brand-rose);
}

/* ==========================================================================
   TEMPLATE 09: STRATEGIC CONSULTATION & DEMO BOOKING (contact.html)
   ========================================================================== */

/* Executive Consultation Form Card */
.oryn-booking-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  padding: 50px;
  box-shadow: var(--shadow-soft);
  position: relative;
  overflow: hidden;
}

@media (max-width: 992px) {
  .oryn-booking-card {
    padding: 30px 25px;
  }
}

.oryn-form-input,
.oryn-form-select,
.oryn-form-textarea {
  background: var(--bg-surface-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 10px 20px;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-primary);
  width: 100%;
  outline: none;
  transition: all 0.25s ease;
}

.oryn-form-input:focus,
.oryn-form-select:focus,
.oryn-form-textarea:focus {
  border-color: var(--brand-rose);
  box-shadow: 0 0 0 4px rgba(230, 30, 88, 0.15);
  background: #FFFFFF;
}

.oryn-form-textarea {
  min-height: 120px;
  resize: none;
}

/* Direct Desk Cards */
.oryn-desk-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 30px;
  margin-bottom: 25px;
  transition: all 0.35s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.oryn-desk-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-soft);
  border-color: #CBD5E1;
}

.oryn-desk-card.desk-dark {
  background: #0F172A;
  border-color: rgba(230, 30, 88, 0.35);
  color: #FFFFFF;
}

.oryn-desk-card.desk-dark:hover {
  border-color: var(--brand-rose);
}

/* ==========================================================================
   TEMPLATE 10: ENTERPRISE SECURITY & TRUST PORTAL (security.html)
   ========================================================================== */

/* Certification Cards */
.oryn-cert-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 50px;
}

@media (max-width: 992px) {
  .oryn-cert-grid {
    grid-template-columns: 1fr;
  }
}

.oryn-cert-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.oryn-cert-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
  border-color: #CBD5E1;
}

.oryn-cert-icon {
  width: 58px;
  height: 58px;
  border-radius: var(--radius-md);
  background: rgba(230, 30, 88, 0.08);
  color: var(--brand-rose);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  margin-bottom: 25px;
}

.oryn-cert-icon.icon-blue {
  background: rgba(0, 114, 181, 0.08);
  color: var(--brand-blue);
}

.oryn-cert-icon.icon-dark {
  background: #0F172A;
  color: #FFFFFF;
}

/* Interactive Architecture Deck */
.oryn-security-deck {
  background: #0F172A;
  border: 1px solid rgba(230, 30, 88, 0.35);
  border-radius: var(--radius-xl);
  padding: 55px;
  margin-top: 40px;
  color: #FFFFFF;
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.45);
}

@media (max-width: 992px) {
  .oryn-security-deck {
    padding: 30px 25px;
  }
}

.oryn-layer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 36px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 24px;
}

.oryn-layer-btn {
  font-family: var(--font-family-primary);
  font-size: 15px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50px;
  padding: 10px 25px;
  transition: all 0.25s ease;
  cursor: pointer;
}

.oryn-layer-btn:hover,
.oryn-layer-btn.active {
  background: var(--brand-rose);
  color: #FFFFFF;
  border-color: var(--brand-rose);
  box-shadow: none;
}

.oryn-layer-content {
  display: none;
}

.oryn-layer-content.active {
  display: block;
  animation: fadeInLayer 0.35s ease;
}

@keyframes fadeInLayer {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Status Telemetry Dot */
.oryn-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #10B981;
  display: inline-block;
  margin-right: 8px;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25);
}

/* ==========================================================================
   GLOBAL NAVIGATION SYSTEM FIXES (INNER PAGES & TEMPLATES 01-10)
   ========================================================================== */

/* 1. Ensure .oryn-nav-container (used across inner pages) is a full-width flex container */
.oryn-nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

/* 2. Ensure .oryn-nav-links resets default ul padding and margins from Bootstrap */
.oryn-nav-links {
  align-items: center;
  gap: 20px;
  list-style: none;
  margin: 0 !important;
  padding: 0 !important;
}

/* 3. For inner pages where <nav class="oryn-navbar"> is NOT wrapped in .oryn-navbar-wrapper,
      apply the floating luxury pill styling directly */
body>nav.oryn-navbar,
body>.oryn-navbar {
  position: sticky;
  top: 20px;
  z-index: 1000;
  margin: 20px 24px 0 24px;
  width: calc(100% - 48px);
}

/* Ensure that if .oryn-navbar is inside .oryn-navbar-wrapper (like index.html),
   it doesn't get double margin/width or override */
.oryn-navbar-wrapper nav.oryn-navbar,
.oryn-navbar-wrapper .oryn-navbar {
  position: static;
  top: auto;
  margin: 0;
  width: 100%;
}

/* 4. Ensure both .oryn-logo (index.html) and .oryn-brand (inner pages) style identically */
.oryn-brand,
.oryn-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-family-primary);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--text-primary);
  text-decoration: none !important;
  flex-shrink: 0;
  margin-right: 16px;
}

/* 5. Active and hover state styling for .oryn-nav-link on all pages */
.oryn-nav-link.active,
.oryn-nav-link:hover {
  color: var(--brand-rose) !important;
  font-weight: 600;
}

/* ==========================================================================
   APPLE-STYLE MEGAMENU & LUXURY DROPDOWN NAVIGATION SYSTEM
   ========================================================================== */

.oryn-nav-item.has-dropdown {
  position: relative;
}

/* Invisible hover bridge so mouse doesn't fall off */
.oryn-nav-item.has-dropdown::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 20px;
}

.oryn-dropdown-card {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 2000;
  width: auto;
  padding: 16px;
  background: #0F172A;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-top: 2px solid var(--brand-rose);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.75);
}

.oryn-nav-item.has-dropdown:hover .oryn-dropdown-card,
.oryn-nav-item.has-dropdown:focus-within .oryn-dropdown-card {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.oryn-dropdown-card.oryn-megamenu {
  width: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

@media (max-width: 1199px) {
  .oryn-dropdown-card.oryn-megamenu {
    width: 520px;
    left: 0;
    transform: translateY(12px);
  }

  .oryn-nav-item.has-dropdown:hover .oryn-dropdown-card.oryn-megamenu,
  .oryn-nav-item.has-dropdown:focus-within .oryn-dropdown-card.oryn-megamenu {
    transform: translateY(0);
  }
}

.oryn-dropdown-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  text-decoration: none !important;
  transition: all 0.2s ease;
}

.oryn-dropdown-item:hover {
  background: rgba(255, 255, 255, 0.08);
}

.oryn-dropdown-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: rgba(230, 30, 88, 0.15);
  color: var(--brand-rose);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.oryn-dropdown-icon.icon-blue {
  background: rgba(0, 114, 181, 0.15);
  color: #38BDF8;
}

.oryn-dropdown-icon.icon-green {
  background: rgba(16, 185, 129, 0.15);
  color: #34D399;
}

.oryn-dropdown-title {
  font-family: var(--font-family-primary);
  font-size: 14px;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 2px;
  display: block;
}

.oryn-dropdown-desc {
  font-size: 12px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
  display: block;
}

.oryn-dropdown-section-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin: 0 0 8px 14px;
}

/* ==========================================================================
   ULTRA-PREMIUM NEXT-GEN SAAS DESIGN SYSTEM EXTENSIONS
   (Stripe / Linear / Framer / Vercel Grade Aesthetics)
   ========================================================================== */

/* 1. Dynamic Mesh Canvas & Aurora Light Orbs */
.oryn-mesh-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.oryn-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.45;
  animation: floatGlow 12s ease-in-out infinite alternate;
}

.oryn-orb-rose {
  top: -100px;
  right: -50px;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(230, 30, 88, 0.28) 0%, rgba(230, 30, 88, 0) 70%);
}

.oryn-orb-blue {
  top: 150px;
  left: -100px;
  width: 650px;
  height: 650px;
  background: radial-gradient(circle, rgba(0, 114, 181, 0.22) 0%, rgba(0, 114, 181, 0) 70%);
  animation-delay: -6s;
}

@keyframes floatGlow {
  0% {
    transform: translate(0, 0) scale(1);
  }

  50% {
    transform: translate(30px, -40px) scale(1.08);
  }

  100% {
    transform: translate(-20px, 20px) scale(0.95);
  }
}

/* 2. Cursor Spotlight Bento Cards & Glass Grid */
.oryn-bento-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 25px;
  margin-top: 50px;
}

.oryn-bento-card {
  position: relative;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: var(--radius-lg);
  padding: 35px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.03), 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease;
  z-index: 1;
}

/* Spotlight radial cursor glow overlay */
.oryn-bento-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: var(--radius-lg);
  background: radial-gradient(600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(230, 30, 88, 0.12), transparent 40%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 0;
}

.oryn-bento-card:hover::before {
  opacity: 1;
}

.oryn-bento-card:hover {
  transform: translateY(-6px);
  border-color: rgba(230, 30, 88, 0.35);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.08), 0 0 30px rgba(230, 30, 88, 0.08);
}

.oryn-bento-card-content {
  position: relative;
  z-index: 2;
}

.col-bento-12 {
  grid-column: span 12;
}

.col-bento-8 {
  grid-column: span 8;
}

.col-bento-6 {
  grid-column: span 6;
}

.col-bento-4 {
  grid-column: span 4;
}

@media (max-width: 992px) {

  .col-bento-8,
  .col-bento-6,
  .col-bento-4 {
    grid-column: span 12;
  }
}

/* 3. Animated Border Beams & Shimmer Badges */
.oryn-shimmer-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 20px;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, rgba(230, 30, 88, 0.08) 0%, rgba(0, 114, 181, 0.08) 100%);
  border: 1px solid rgba(230, 30, 88, 0.3);
  font-family: var(--font-family-primary);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--brand-rose);
  box-shadow: 0 4px 18px rgba(230, 30, 88, 0.1);
  margin-bottom: 25px;
}

.oryn-shimmer-pulse {
  width: 8px;
  height: 8px;
  background: var(--brand-rose);
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 12px var(--brand-rose);
  animation: pulseGlow 1.8s infinite ease-in-out;
}

@keyframes pulseGlow {
  0% {
    transform: scale(0.9);
    opacity: 0.7;
    box-shadow: 0 0 4px var(--brand-rose);
  }

  50% {
    transform: scale(1.25);
    opacity: 1;
    box-shadow: 0 0 16px var(--brand-rose);
  }

  100% {
    transform: scale(0.9);
    opacity: 0.7;
    box-shadow: 0 0 4px var(--brand-rose);
  }
}

/* 4. Floating UI Glass Widgets for Hero */
.oryn-floating-chip {
  position: absolute;
  padding: 12px 18px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: var(--radius-md);
  box-shadow: 0 14px 40px rgba(15, 23, 42, 0.12), 0 2px 6px rgba(15, 23, 42, 0.04);
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 10;
  transition: all 0.3s ease;
  animation: floatWidget 6s ease-in-out infinite alternate;
}

.oryn-floating-chip-top {
  top: 10%;
  right: -24px;
}

.oryn-floating-chip-bottom {
  bottom: 8%;
  left: -28px;
  animation-delay: -3s;
}

@keyframes floatWidget {
  0% {
    transform: translateY(0px) rotate(0deg);
  }

  100% {
    transform: translateY(-12px) rotate(1.5deg);
  }
}

/* 5. Stat Counter Cards */
.oryn-stat-number {
  font-family: var(--font-family-primary);
  font-size: 46px;
  font-weight: 800;
  letter-spacing: -0.04em;
  background: linear-gradient(135deg, #0F172A 0%, #334155 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.1;
  margin-bottom: 6px;
}

.oryn-stat-number.text-rose {
  background: linear-gradient(135deg, #E61E58 0%, #FF5A87 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.oryn-stat-number.text-blue {
  background: linear-gradient(135deg, #0072B5 0%, #38BDF8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 6. Dark Onyx Luxury Sections */
.oryn-dark-bento-section {
  position: relative;
  background: #080C14;
  color: #FFFFFF;
  padding: 120px 0;
  overflow: hidden;
}

.oryn-dark-bento-section h2,
.oryn-dark-bento-section h3 {
  color: #FFFFFF;
}

.oryn-dark-bento-section p {
  color: #94A3B8;
}

.oryn-dark-card {
  background: rgba(15, 23, 42, 0.65) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #FFFFFF !important;
}

.oryn-dark-card::before {
  background: radial-gradient(600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(230, 30, 88, 0.22), transparent 40%) !important;
}

.oryn-dark-card:hover {
  border-color: rgba(230, 30, 88, 0.5) !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6), 0 0 36px rgba(230, 30, 88, 0.18) !important;
}

/* 7. Dynamic Floating Actions Container (Back to Top + Back to Filters) */
.oryn-float-actions {
  position: fixed;
  bottom: 15px;
  right: 15px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  z-index: 1000;
  pointer-events: none;
}

.oryn-float-btn {
  padding: 10px 20px;
  background: rgba(15, 23, 42, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-pill);
  color: #FFFFFF !important;
  font-family: var(--font-family-primary);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
  box-shadow: none;
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none !important;
  cursor: pointer;
}

.oryn-float-btn:hover {
  background: var(--brand-rose);
  border-color: var(--brand-rose);
  color: #FFFFFF !important;
  transform: translateY(-3px) scale(1.03);
  box-shadow: none;
}

.oryn-float-btn.btn-blue:hover {
  background: var(--brand-blue);
  border-color: var(--brand-blue);
  box-shadow: none;
}

.oryn-float-btn.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* 8. Inline Section Back to Filters Button (Luxury Glass Pill) */
.oryn-back-to-filters-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 16px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(230, 30, 88, 0.35);
  border-radius: var(--radius-pill);
  font-family: var(--font-family-primary);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--brand-rose) !important;
  text-decoration: none !important;
  box-shadow: none;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  margin-left: 12px;
  margin-bottom: 10px;
  vertical-align: middle;
}

.oryn-back-to-filters-btn i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(230, 30, 88, 0.12);
  color: var(--brand-rose);
  font-size: 12px;
  transition: all 0.3s ease;
}

.oryn-back-to-filters-btn:hover {
  background: var(--brand-rose);
  color: #FFFFFF !important;
  border-color: var(--brand-rose);
  transform: translateY(-3px);
  box-shadow: none;
}

.oryn-back-to-filters-btn:hover i {
  background: rgba(255, 255, 255, 0.25);
  color: #FFFFFF;
  transform: translateY(-1px);
}

/* ==========================================================================
   BLOG INNER PAGE (BLOG SINGLE / ARTICLE DETAILS) STYLES
   ========================================================================== */

/* Reading Progress Bar */
.oryn-reading-progress-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: rgba(0, 0, 0, 0.05);
  z-index: 1050;
}

.oryn-reading-progress-bar {
  height: 100%;
  width: 0%;
  background: var(--brand-gradient);
  transition: width 0.1s ease-out;
}

/* Article Hero Header */
.oryn-blog-hero {
  padding-top: 100px;
  padding-bottom: 40px;
  position: relative;
}

.oryn-breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 25px;
}

.oryn-breadcrumb a {
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.2s ease;
}

.oryn-breadcrumb a:hover {
  color: var(--brand-rose);
}

.oryn-blog-title {
  font-family: var(--font-family-primary);
  font-size: clamp(32px, 4vw, 50px);
  font-weight: 800;
  line-height: 1.15;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  margin-bottom: 20px;
}

.oryn-blog-meta-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 16px 24px;
  background: #FFFFFF;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

.oryn-author-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.oryn-author-img {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #FFFFFF;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.oryn-author-avatar-fallback {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--brand-gradient);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 15px;
}

.oryn-blog-meta-stats {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 600;
}

/* Floating & Inline Social Share Bar */
.oryn-share-float {
  position: sticky;
  top: 120px;
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 48px;
}

@media (max-width: 991px) {
  .oryn-share-float {
    display: none !important;
  }
}

.oryn-share-inline {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.oryn-share-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  background: #FFFFFF;
  border: 1px solid var(--border-color);
  box-shadow: none;
  font-size: 15px;
  text-decoration: none !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  cursor: pointer;
}

.oryn-share-btn:hover {
  transform: translateY(-3px) scale(1.08);
  box-shadow: none;
}

.oryn-share-btn.btn-linkedin:hover {
  background: #0A66C2;
  color: #FFF;
  border-color: #0A66C2;
}

.oryn-share-btn.btn-twitter:hover {
  background: #000000;
  color: #FFF;
  border-color: #000000;
}

.oryn-share-btn.btn-facebook:hover {
  background: #1877F2;
  color: #FFF;
  border-color: #1877F2;
}

.oryn-share-btn.btn-whatsapp:hover {
  background: #25D366;
  color: #FFF;
  border-color: #25D366;
}

.oryn-share-btn.btn-reddit:hover {
  background: #FF4500;
  color: #FFF;
  border-color: #FF4500;
}

.oryn-share-btn.btn-copy:hover {
  background: var(--brand-rose);
  color: #FFF;
  border-color: var(--brand-rose);
}

.oryn-share-btn.btn-email:hover {
  background: var(--brand-blue);
  color: #FFF;
  border-color: var(--brand-blue);
}

/* Table of Contents */
.oryn-toc-card {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(16px);
  border: 1px solid var(--border-color);
  border-left: 4px solid var(--brand-rose);
  border-radius: var(--radius-md);
  padding: 25px;
  margin-bottom: 32px;
  box-shadow: var(--shadow-card);
}

.oryn-toc-title {
  font-family: var(--font-family-primary);
  font-weight: 700;
  font-size: 15px;
  color: var(--text-primary);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.oryn-toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.oryn-toc-link {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.oryn-toc-link:hover {
  color: var(--brand-rose);
  transform: translateX(4px);
}

/* Article Body Typography */
.oryn-blog-article {
  font-family: var(--font-family-body);
  font-size: 18px;
  line-height: 1.8;
  color: #334155;
}

.oryn-blog-article h2 {
  font-family: var(--font-family-primary);
  font-weight: 700;
  font-size: 28px;
  color: var(--text-primary);
  margin-top: 44px;
  margin-bottom: 18px;
  letter-spacing: -0.01em;
  scroll-margin-top: 110px;
}

.oryn-blog-article h3 {
  font-family: var(--font-family-primary);
  font-weight: 700;
  font-size: 22px;
  color: var(--text-primary);
  margin-top: 30px;
  margin-bottom: 14px;
  scroll-margin-top: 110px;
}

.oryn-blog-article p {
  margin-bottom: 25px;
}

.oryn-blog-article ul,
.oryn-blog-article ol {
  margin-bottom: 25px;
  padding-left: 24px;
}

.oryn-blog-article li {
  margin-bottom: 10px;
}

.oryn-takeaways-box {
  background: linear-gradient(135deg, rgba(230, 30, 88, 0.04) 0%, rgba(0, 114, 181, 0.04) 100%);
  border: 1px solid rgba(230, 30, 88, 0.2);
  border-radius: var(--radius-md);
  padding: 28px;
  margin-bottom: 36px;
}

.oryn-quote-box {
  background: #0F172A;
  color: #FFFFFF;
  border-radius: var(--radius-md);
  padding: 30px;
  margin: 36px 0;
  position: relative;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.15);
}

.oryn-quote-box::before {
  content: '"';
  position: absolute;
  top: -20px;
  right: 20px;
  font-size: 160px;
  color: rgba(255, 255, 255, 0.05);
  font-family: serif;
  line-height: 1;
  pointer-events: none;
}

.oryn-code-snippet {
  background: #090D16;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm);
  padding: 20px 24px;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 14px;
  color: #38BDF8;
  overflow-x: auto;
  margin: 28px 0;
}

.oryn-tag-pill {
  display: inline-block;
  padding: 6px 14px;
  background: #F1F5F9;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  text-decoration: none !important;
  margin-right: 8px;
  margin-bottom: 10px;
  transition: all 0.2s ease;
}

.oryn-tag-pill:hover {
  background: var(--brand-rose);
  color: #FFFFFF;
  border-color: var(--brand-rose);
  transform: translateY(-2px);
}

/* Sidebar Widgets */
.oryn-sidebar-widget {
  background: #FFFFFF;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 28px;
  margin-bottom: 30px;
  box-shadow: var(--shadow-card);
}

.oryn-sidebar-title {
  font-family: var(--font-family-primary);
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--border-light);
  position: relative;
}

.oryn-sidebar-title::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 40px;
  height: 2px;
  background: var(--brand-gradient);
}

.oryn-search-box {
  position: relative;
}

.oryn-search-input {
  width: 100%;
  padding: 12px 16px 12px 42px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-color);
  background: #F8FAFC;
  font-size: 14px;
  transition: all 0.25s ease;
}

.oryn-search-input:focus {
  outline: none;
  border-color: var(--brand-rose);
  background: #FFFFFF;
  box-shadow: 0 0 0 4px var(--brand-rose-glow);
}

.oryn-search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 15px;
}

.oryn-cat-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.oryn-cat-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 15px;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  text-decoration: none !important;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.25s ease;
}

.oryn-cat-item:hover,
.oryn-cat-item.active {
  background: #F8FAFC;
  color: var(--brand-rose);
  transform: translateX(4px);
}

.oryn-cat-badge {
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  background: #F1F5F9;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
  transition: all 0.25s ease;
}

.oryn-cat-item:hover .oryn-cat-badge,
.oryn-cat-item.active .oryn-cat-badge {
  background: var(--brand-rose);
  color: #FFFFFF;
}

/* Latest Blogs Sidebar Items */
.oryn-latest-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.oryn-latest-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  text-decoration: none !important;
  group: true;
}

.oryn-latest-thumb {
  width: 70px;
  height: 70px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-size: 22px;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.oryn-latest-title {
  font-family: var(--font-family-primary);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--text-primary);
  margin-bottom: 4px;
  transition: color 0.2s ease;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.oryn-latest-item:hover .oryn-latest-title {
  color: var(--brand-rose);
}

.oryn-latest-date {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
}

/* Toast Copy Link Notification */
.oryn-copy-toast {
  position: fixed;
  bottom: 30px;
  right: 30px;
  background: #0F172A;
  color: #FFFFFF;
  padding: 15px 25px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 2000;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.oryn-copy-toast.show {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   VIDEO BLOG & APPLICATION TRAINING STYLES (YOUTUBE EMBED)
   ========================================================================== */

.oryn-video-frame-card {
  background: #0F172A;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.35);
  position: relative;
  margin-bottom: 30px;
}

.oryn-video-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
  font-size: 13px;
}

.oryn-video-responsive-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 Aspect Ratio */
  height: 0;
  overflow: hidden;
  background: #000000;
}

.oryn-video-responsive-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.oryn-timestamp-container {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(14px);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 20px;
  margin-bottom: 30px;
  box-shadow: var(--shadow-card);
}

.oryn-timestamp-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.oryn-timestamp-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: #F8FAFC;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-pill);
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none !important;
  transition: all 0.25s ease;
  cursor: pointer;
}

.oryn-timestamp-pill:hover,
.oryn-timestamp-pill.active {
  background: var(--brand-blue);
  color: #FFFFFF !important;
  border-color: var(--brand-blue);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 114, 181, 0.3);
}

.oryn-timestamp-time {
  font-family: 'SFMono-Regular', Consolas, monospace;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.08);
  padding: 2px 8px;
  border-radius: 12px;
}

.oryn-timestamp-pill:hover .oryn-timestamp-time,
.oryn-timestamp-pill.active .oryn-timestamp-time {
  background: rgba(255, 255, 255, 0.25);
  color: #FFFFFF;
}

.oryn-download-box {
  background: linear-gradient(135deg, rgba(0, 114, 181, 0.04) 0%, rgba(16, 185, 129, 0.04) 100%);
  border: 1px solid rgba(0, 114, 181, 0.2);
  border-radius: var(--radius-md);
  padding: 25px;
  margin: 30px 0;
}

.oryn-video-thumb-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--brand-rose);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  box-shadow: 0 4px 14px rgba(230, 30, 88, 0.4);
  transition: transform 0.3s ease;
}

.oryn-latest-item:hover .oryn-video-thumb-badge {
  transform: translate(-50%, -50%) scale(1.15);
}

/* Blog Pagination */
.oryn-pagination-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-top: 50px;
  padding-top: 30px;
  border-top: 1px solid var(--border-color);
}

.oryn-pagination {
  display: flex;
  align-items: center;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.oryn-page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 15px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-heading);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.25s ease;
}

.oryn-page-link:hover {
  background: #F8FAFC;
  border-color: var(--brand-rose);
  color: var(--brand-rose);
  transform: translateY(-1px);
}

.oryn-page-link.active {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
  color: #000;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.25);
}

.oryn-page-link.disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* ==========================================================================
   SECTION 1: Premium Navigation (Editorial Redesign)
   ========================================================================== */

:root {
  /* New Editorial Tokens */
  --editorial-bg: #FAF9F5;
  /* Warm off-white surface */
  --editorial-text: #1C1D1F;
  /* Graphite typography */
  --editorial-muted: #5C5E62;
  /* Muted graphite */
  --editorial-accent: #B89C72;
  /* Muted bronze/gold */
  --editorial-accent-light: rgba(184, 156, 114, 0.08);
  --editorial-border: rgba(184, 156, 114, 0.15);
  --editorial-border-light: rgba(28, 29, 31, 0.06);
}

/* 1. Header Wrapper & Container */
.oryn-editorial-header-wrapper {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 1000 !important;
  padding: 16px 24px 8px 24px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box !important;
}

.oryn-editorial-header-wrapper.scrolled {
  padding-top: 8px;
  padding-bottom: 8px;
}

.oryn-editorial-header {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  height: 64px;
  background: rgba(250, 249, 245, 0.85);
  /* Warm off-white subtle transparency */
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--editorial-border);
  border-radius: 8px;
  /* Clean, minimalist editorial edge */
  padding: 0 25px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 4px 20px rgba(28, 29, 31, 0.02);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  /* Anchor for mega-canvas absolute positioning */
}

.oryn-editorial-header-wrapper.scrolled .oryn-editorial-header {
  background: rgba(250, 249, 245, 0.94);
  box-shadow: 0 8px 24px rgba(28, 29, 31, 0.04);
}

/* 2. Logo & Brand */
.editorial-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.editorial-brand-logo {
  height: 32px;
  width: auto;
  object-fit: contain;
  filter: brightness(0.95);
  /* subtle off-white blend */
}

/* 3. Navigation Links (Desktop) */
.editorial-nav-links {
  display: none;
  align-items: center;
  gap: 15px;
  list-style: none;
  margin: 0;
  padding: 0;
  height: 100%;
}

@media (min-width: 1200px) {
  .editorial-nav-links {
    display: flex;
  }

  .editorial-hamburger {
    display: none !important;
  }
}

.editorial-nav-item {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
}

.editorial-nav-btn {
  font-family: var(--font-family-body);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--editorial-text);
  letter-spacing: 0.02em;
  padding: 8px 0;
  transition: color 0.25s ease;
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  text-decoration: none;
}

.editorial-nav-btn:hover,
.editorial-nav-btn.active {
  color: var(--editorial-accent);
}

.editorial-nav-btn i {
  font-size: 10px;
  opacity: 0.6;
  transition: transform 0.25s ease;
}

.editorial-nav-item:hover .editorial-nav-btn i {
  transform: rotate(180deg);
  color: var(--editorial-accent);
}

/* Hover Bridges */
.editorial-nav-item::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 24px;
  z-index: 999;
}

.editorial-nav-item.is-mega::after {
  content: '';
  position: absolute;
  top: 64px;
  /* bottom of header */
  left: 0;
  width: 100%;
  height: 24px;
  z-index: 999;
}

/* 4. Dropdowns (Editorial Style) */
.editorial-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 1000;
  background: var(--bg-surface);
  border: 1px solid var(--editorial-border);
  border-radius: 8px;
  box-shadow: 0 16px 48px rgba(28, 29, 31, 0.08);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 260px;
}

.editorial-nav-item:hover .editorial-dropdown,
.editorial-nav-item:focus-within .editorial-dropdown,
.editorial-dropdown.active {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateX(-50%) translateY(0) !important;
}


/* Small dropdown links */
.editorial-dropdown-link {
  display: flex;
  flex-direction: column;
  padding: 10px 14px;
  border-radius: 6px;
  transition: all 0.25s ease;
  text-decoration: none;
}

.editorial-dropdown-link:hover {
  background: var(--editorial-accent-light);
}

.editorial-dropdown-link .link-title {
  font-family: var(--font-family-primary);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--editorial-text);
  margin-bottom: 2px;
}

.editorial-dropdown-link .link-desc {
  font-family: var(--font-family-body);
  font-size: 11.5px;
  color: var(--editorial-muted);
  line-height: 1.4;
}

/* 5. Products Large Editorial Canvas */
.editorial-nav-item.is-mega {
  position: static;
  /* Let the dropdown position relative to the header */
}

.editorial-dropdown.mega-canvas {
  width: 960px;
  max-width: calc(100vw - 64px);
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  padding: 0;
  overflow: hidden;
  display: block;
  /* Inner .mega-canvas-container uses d-flex */
}

.mega-canvas-container {
  display: flex;
  width: 100%;
  align-items: stretch;
  /* Preview panel grows to match nav column height */
}

.editorial-nav-item.is-mega:hover .editorial-dropdown.mega-canvas,
.editorial-nav-item.is-mega .editorial-dropdown.mega-canvas.active {
  transform: translateX(-50%) translateY(0);
}

.mega-canvas-nav {
  padding: 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  background: var(--bg-surface);
  flex: 1;
}

.mega-canvas-col {
  display: flex;
  flex-direction: column;
}

.mega-canvas-category-title {
  font-family: var(--font-family-primary);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--editorial-accent);
  margin-bottom: 20px;
  padding-left: 12px;
}

.mega-canvas-links {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.editorial-nav-link {
  display: flex;
  flex-direction: column;
  padding: 12px;
  border-radius: 6px;
  transition: all 0.25s ease;
  text-decoration: none;
}

.editorial-nav-link:hover,
.editorial-nav-link.active {
  background: var(--editorial-accent-light);
  transform: translateX(4px);
}

.editorial-nav-link .link-label {
  font-family: var(--font-family-primary);
  font-size: 14px;
  font-weight: 600;
  color: var(--editorial-text);
  margin-bottom: 2px;
}

.editorial-nav-link .link-sub {
  font-family: var(--font-family-body);
  font-size: 12px;
  color: var(--editorial-muted);
}

/* Mega Canvas Preview Side */
.mega-canvas-preview {
  background: #F4F3ED;
  /* slightly darker warm off-white for contrast */
  border-left: 1px solid var(--editorial-border);
  position: relative;
  width: 320px;
  flex-shrink: 0;
  overflow: hidden;
  /* Use CSS grid stacking for all panes overlapping in same cell */
  display: grid;
  grid-template-rows: 1fr;
  align-items: stretch;
}

/* Grid stack: all panes overlap in cell [1/1] */
.product-preview-pane {
  grid-area: 1 / 1;
  padding: 36px 32px;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 360px;
}

.product-preview-pane.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.preview-text-content {
  flex-shrink: 0;
}

.preview-title {
  font-family: var(--font-family-primary);
  font-size: 17px;
  font-weight: 700;
  color: var(--editorial-text);
  margin-bottom: 8px;
  line-height: 1.3;
}

.preview-desc {
  font-family: var(--font-family-body);
  font-size: 12px;
  color: var(--editorial-muted);
  line-height: 1.6;
  margin: 0;
}

.preview-cta {
  font-family: var(--font-family-primary);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--editorial-accent);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: color 0.25s ease;
  text-decoration: none;
  margin-top: auto;
  flex-shrink: 0;
}

.preview-cta:hover {
  color: var(--editorial-text);
}

.preview-cta .cta-arrow {
  transition: transform 0.25s ease;
}

.preview-cta:hover .cta-arrow {
  transform: translateX(4px);
}

/* 6. Contextual Preview CSS Illustrations */
.preview-visual {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100px;
  max-height: 150px;
  position: relative;
}


/* All 6 Core Products illustration */
.css-visual-modules {
  width: 140px;
  height: 100px;
  position: relative;
}

.module-dot {
  width: 10px;
  height: 10px;
  background: var(--editorial-text);
  border-radius: 50%;
  position: absolute;
  z-index: 2;
  transition: background 0.3s ease;
}

.module-dot.m-1 {
  top: 15px;
  left: 15px;
}

.module-dot.m-2 {
  top: 15px;
  right: 15px;
}

.module-dot.m-3 {
  top: 50px;
  left: 50%;
  transform: translateX(-50%);
}

.module-dot.m-4 {
  bottom: 15px;
  left: 15px;
}

.module-dot.m-5 {
  bottom: 15px;
  right: 15px;
}

.module-dot.m-6 {
  top: 50px;
  left: 15px;
}

.module-connections {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* Inventory illustration */
.css-visual-inventory {
  width: 160px;
  height: 100px;
  position: relative;
  border-bottom: 2px solid var(--editorial-text);
}

.shelf-line {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background: rgba(28, 29, 31, 0.15);
}

.shelf-line:nth-child(1) {
  top: 30px;
}

.shelf-line:nth-child(2) {
  top: 65px;
}

.stock-box {
  position: absolute;
  border: 1.5px solid var(--editorial-text);
  background: #F4F3ED;
  border-radius: 2px;
}

.stock-box.b-1 {
  width: 28px;
  height: 18px;
  bottom: 35px;
  left: 20px;
}

.stock-box.b-2 {
  width: 20px;
  height: 24px;
  bottom: 0px;
  left: 55px;
  border-color: var(--editorial-accent);
}

.stock-box.b-3 {
  width: 34px;
  height: 16px;
  bottom: 0px;
  right: 25px;
}

.rfid-wave {
  position: absolute;
  top: 10px;
  left: 50px;
  width: 30px;
  height: 30px;
  border: 1.5px solid var(--editorial-accent);
  border-radius: 50%;
  border-bottom: transparent;
  border-left: transparent;
  transform: rotate(-45deg);
  opacity: 0;
  animation: rfidRadar 1.8s infinite ease-out;
}

@keyframes rfidRadar {
  0% {
    transform: rotate(-45deg) scale(0.5);
    opacity: 0;
  }

  50% {
    opacity: 0.8;
  }

  100% {
    transform: rotate(-45deg) scale(1.5);
    opacity: 0;
  }
}

/* Manufacturing illustration */
.css-visual-mfg {
  width: 160px;
  height: 100px;
  position: relative;
}

.node {
  position: absolute;
  width: 12px;
  height: 12px;
  border: 2px solid var(--editorial-text);
  border-radius: 50%;
  background: var(--editorial-bg);
  z-index: 2;
}

.node.parent {
  top: 15px;
  left: 50%;
  transform: translateX(-50%);
  border-color: var(--editorial-accent);
}

.node.child-1 {
  bottom: 20px;
  left: 25px;
}

.node.child-2 {
  bottom: 20px;
  right: 25px;
}

.connector-line {
  position: absolute;
  background: rgba(28, 29, 31, 0.2);
  height: 1.5px;
  transform-origin: left center;
  z-index: 1;
}

.connector-line.c-1 {
  top: 21px;
  left: 50%;
  width: 50px;
  transform: rotate(132deg);
}

.connector-line.c-2 {
  top: 21px;
  left: 50%;
  width: 50px;
  transform: rotate(48deg);
}

/* Pricing illustration */
.css-visual-pricing {
  width: 160px;
  height: 100px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 16px;
}

.pricing-bar {
  width: 32px;
  background: #FAF9F5;
  border: 1.5px solid var(--editorial-text);
  border-bottom: none;
  border-radius: 4px 4px 0 0;
}

.pricing-bar.p-1 {
  height: 40px;
}

.pricing-bar.p-2 {
  height: 65px;
  border-color: var(--editorial-accent);
}

.pricing-bar.p-3 {
  height: 90px;
}

/* Migration illustration */
.css-visual-migration {
  width: 160px;
  height: 100px;
  position: relative;
}

.data-stream-path {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  border-top: 1.5px dashed rgba(28, 29, 31, 0.2);
}

.stream-particle {
  position: absolute;
  top: calc(50% - 4px);
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--editorial-accent);
  animation: migrate 2.2s infinite linear;
}

@keyframes migrate {
  0% {
    left: 0%;
    opacity: 0;
  }

  15% {
    opacity: 1;
  }

  85% {
    opacity: 1;
  }

  100% {
    left: 95%;
    opacity: 0;
  }
}

/* Auditor illustration */
.css-visual-auditor {
  width: 160px;
  height: 100px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.auditor-shield {
  width: 44px;
  height: 52px;
  border: 2px solid var(--editorial-text);
  border-radius: 0 0 22px 22px;
  position: relative;
  background: #F4F3ED;
}

.auditor-shield::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 10px;
  border-bottom: 2px solid var(--editorial-text);
}

.auditor-check {
  position: absolute;
  width: 14px;
  height: 8px;
  border-left: 2px solid var(--editorial-accent);
  border-bottom: 2px solid var(--editorial-accent);
  transform: rotate(-45deg);
  top: 38px;
  left: calc(50% - 7px);
}

/* 7. Header Actions */
.editorial-nav-actions {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-shrink: 0;
}

.btn-editorial-ghost {
  font-family: var(--font-family-body);
  font-size: 13.5px;
  font-weight: 550;
  color: var(--editorial-text);
  padding: 8px 16px;
  transition: color 0.25s ease;
  background: transparent;
  border: none;
  cursor: pointer;
  text-decoration: none;
}

.btn-editorial-ghost:hover {
  color: var(--editorial-accent);
}

.btn-editorial-outline {
  font-family: var(--font-family-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--editorial-text);
  padding: 7px 10px;
  border: 1px solid var(--editorial-text);
  border-radius: 6px;
  background: transparent;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.btn-editorial-outline:hover {
  background: var(--editorial-text);
  color: #FFFFFF !important;
}

.btn-editorial-primary {
  font-family: var(--font-family-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #FFFFFF !important;
  padding: 7px 10px;
  border: 1px solid var(--editorial-accent);
  border-radius: 6px;
  background: var(--editorial-accent);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  text-decoration: none;
}

.btn-editorial-primary:hover {
  background: var(--editorial-text);
  border-color: var(--editorial-text);
  color: #FFFFFF !important;
}

/* Hamburger button */
.editorial-hamburger {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--editorial-text);
  font-size: 24px;
  cursor: pointer;
  padding: 4px;
  transition: color 0.25s ease;
}

.editorial-hamburger:hover {
  color: var(--editorial-accent);
}

@media (min-width: 992px) {
  .editorial-hamburger {
    display: none !important;
  }
}

/* 8. Mobile Menu Offcanvas Styling */
.oryn-editorial-offcanvas {
  background: var(--editorial-bg) !important;
  border-left: 1px solid var(--editorial-border) !important;
  width: 100% !important;
  max-width: 420px !important;
}

.oryn-editorial-offcanvas .offcanvas-header {
  height: 64px;
  padding: 0 24px;
  border-bottom: 1px solid var(--editorial-border-light) !important;
}

.oryn-editorial-offcanvas .offcanvas-body {
  padding: 24px !important;
}

.editorial-mobile-accordion {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.editorial-mobile-accordion .accordion-item {
  border: none !important;
  background: transparent !important;
}

.editorial-mobile-accordion .accordion-button {
  font-family: var(--font-family-primary) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--editorial-text) !important;
  padding: 12px 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-bottom: 1px solid var(--editorial-border-light) !important;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.editorial-mobile-accordion .accordion-button::after {
  display: none !important;
  /* hide default icon */
}

/* Custom chevron rotation */
.editorial-mobile-accordion .accordion-button i {
  font-size: 12px;
  transition: transform 0.25s ease;
  color: var(--editorial-accent);
}

.editorial-mobile-accordion .accordion-button:not(.collapsed) i {
  transform: rotate(180deg);
}

.editorial-mobile-accordion .accordion-collapse {
  border: none !important;
}

.editorial-mobile-accordion .accordion-body {
  padding: 12px 16px !important;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.editorial-mobile-sublink {
  font-family: var(--font-family-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--editorial-muted) !important;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: color 0.25s ease;
  text-decoration: none;
}

.editorial-mobile-sublink:hover {
  color: var(--editorial-accent) !important;
}

.editorial-mobile-sublink i {
  font-size: 12px;
  color: var(--editorial-accent);
}

/* Direct Links */
.editorial-mobile-direct-link {
  font-family: var(--font-family-primary);
  font-size: 18px;
  font-weight: 600;
  color: var(--editorial-text) !important;
  padding: 12px 0;
  border-bottom: 1px solid var(--editorial-border-light);
  display: block;
  transition: color 0.25s ease;
  text-decoration: none;
}

.editorial-mobile-direct-link:hover {
  color: var(--editorial-accent) !important;
}

.editorial-mobile-footer {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--editorial-border-light);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Critical Positioning & Interaction Overrides (Bypasses Browser Caching) */
.oryn-editorial-header-wrapper {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 1000 !important;
  padding: 16px 24px 8px 24px !important;
  box-sizing: border-box !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.oryn-editorial-header-wrapper.scrolled {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

/* Active class for JS-triggered hover */
.editorial-dropdown.active {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateX(-50%) translateY(0) !important;
}

@media (max-width: 1199px) {
  .editorial-nav-links {
    display: none !important;
  }

  .editorial-hamburger {
    display: flex !important;
    align-items: center;
    justify-content: center;
  }
}

@media (min-width: 1200px) {
  .editorial-nav-links {
    display: flex !important;
  }

  .editorial-hamburger {
    display: none !important;
  }
}

@media (max-width: 575px) {

  .editorial-nav-actions .btn-editorial-primary,
  .editorial-nav-actions .btn-editorial-outline,
  .editorial-nav-actions .btn-editorial-ghost {
    display: none !important;
  }
}

/* --- Mobile Footer Adjustments --- */
@media (max-width: 992px) {
  .oryn-footer-brand {
    grid-column: 1 / -1;
    /* Make logo grid full width */
    margin-bottom: 20px;
  }
}

@media (max-width: 768px) {
  .oryn-footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: 15px;
  }

  .oryn-footer-bottom .d-flex {
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px !important;
  }
}

/* ==========================================================================
   ORYNBIZ V3 - SOLUTION FINDER & 5-STEP FIT WIZARD (PERSUADE & OPERATE)
   ========================================================================== */

/* Hero Enhancements */
.oryn-hero-title-sub {
  font-size: 0.42em;
  font-weight: 500;
  line-height: 1.35;
  color: var(--brand-rose);
  text-transform: none;
  letter-spacing: -0.01em;
  margin-top: 14px;
}

.btn-oryn-subtle {
  font-family: var(--font-family-primary);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary) !important;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  background: transparent;
  border: 1px solid rgba(15, 23, 42, 0.15);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none !important;
}

.btn-oryn-subtle:hover {
  background: #FFFFFF;
  border-color: var(--brand-blue);
  color: var(--brand-blue) !important;
  transform: translateY(-2px);
  box-shadow: none;
}

.oryn-telemetry-badge {
  background: rgba(16, 185, 129, 0.06);
  border-radius: 8px;
  padding: 6px 12px;
  border: 1px dashed rgba(16, 185, 129, 0.25);
  margin-top: 10px;
}

/* Solution Finder Section */
.oryn-solution-finder-section {
  background: linear-gradient(180deg, var(--bg-snow) 0%, #FFFFFF 50%, var(--bg-snow) 100%);
  position: relative;
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
}

.oryn-finder-nav {
  display: inline-flex;
  background: #ECEFF3;
  padding: 5px;
  border-radius: var(--radius-pill);
  gap: 6px;
  box-shadow: none;
}

.oryn-finder-nav-btn {
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-family-primary);
  font-size: 14px;
  font-weight: 600;
  padding: 9px 22px;
  border-radius: var(--radius-pill);
  transition: all 0.25s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.oryn-finder-nav-btn.active {
  background: #FFFFFF;
  color: var(--text-primary);
  box-shadow: none;
}

.oryn-finder-view {
  display: none;
}

.oryn-finder-view.active {
  display: block;
  animation: orynFadeIn 0.35s ease;
}

@keyframes orynFadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 2-Column Finder Grid */
.oryn-finder-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 32px;
  align-items: start;
}

@media (max-width: 992px) {
  .oryn-finder-grid {
    grid-template-columns: 1fr;
  }
}

/* Problem Cards List */
.oryn-problem-cards-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.oryn-problem-card {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 22px;
  background: #FFFFFF;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  text-align: left;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  width: 100%;
}

.oryn-problem-card:hover {
  border-color: rgba(0, 114, 181, 0.4);
  transform: translateX(4px);
  box-shadow: 0 6px 20px rgba(0, 114, 181, 0.06);
}

.oryn-problem-card.active {
  background: #FFFFFF;
  border-color: var(--brand-rose);
  box-shadow: 0 8px 26px rgba(230, 30, 88, 0.1);
}

.oryn-problem-card.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 15%;
  bottom: 15%;
  width: 4px;
  background: var(--brand-rose);
  border-radius: 0 4px 4px 0;
}

.oryn-problem-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--bg-surface-secondary);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
  transition: all 0.25s ease;
}

.oryn-problem-card.active .oryn-problem-icon {
  background: rgba(230, 30, 88, 0.1);
  color: var(--brand-rose);
}

.oryn-problem-info {
  flex: 1;
}

.oryn-problem-badge {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  display: block;
  margin-bottom: 2px;
}

.oryn-problem-card.active .oryn-problem-badge {
  color: var(--brand-rose);
}

.oryn-problem-title {
  font-family: var(--font-family-primary);
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
  line-height: 1.3;
}

.oryn-problem-desc {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.45;
}

.oryn-problem-arrow {
  font-size: 18px;
  color: var(--text-muted);
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.oryn-problem-card.active .oryn-problem-arrow {
  color: var(--brand-rose);
  transform: translateX(3px);
}

/* Solution Live Showcase Box */
.oryn-showcase-container {
  background: #FFFFFF;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  box-shadow: 0 12px 36px rgba(15, 23, 42, 0.05);
  position: sticky;
  top: 110px;
}

.showcase-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border-light);
}

.showcase-module-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: rgba(0, 114, 181, 0.08);
  color: var(--brand-blue);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.showcase-sla-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: rgba(16, 185, 129, 0.08);
  color: #059669;
  font-size: 12px;
  font-weight: 600;
}

.showcase-pain-block {
  background: #FFF5F5;
  border-left: 3px solid var(--brand-rose);
  padding: 14px 18px;
  border-radius: 0 10px 10px 0;
  margin-bottom: 20px;
}

.showcase-pain-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--brand-rose);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: block;
  margin-bottom: 4px;
}

.showcase-pain-text {
  font-size: 14px;
  color: #7F1D1D;
  margin: 0;
  font-style: italic;
  line-height: 1.5;
}

.showcase-solution-title {
  font-family: var(--font-family-primary);
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 12px;
  line-height: 1.3;
}

.showcase-solution-desc {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 24px;
}

.showcase-features-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 28px;
}

@media (max-width: 576px) {
  .showcase-features-list {
    grid-template-columns: 1fr;
  }
}

.showcase-feature-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--text-primary);
  font-weight: 500;
}

.showcase-feature-item i {
  color: #10B981;
  font-size: 15px;
  margin-top: 1px;
}

.showcase-telemetry-banner {
  background: var(--bg-snow);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 16px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.telemetry-stat-label {
  font-size: 12px;
  color: var(--text-secondary);
  display: block;
  margin-bottom: 2px;
}

.telemetry-stat-val {
  font-family: var(--font-family-primary);
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
}

.showcase-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

/* 5-Step Fit Wizard Styles */
.oryn-wizard-wrapper {
  background: #FFFFFF;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 40px;
  box-shadow: 0 16px 48px rgba(15, 23, 42, 0.05);
  max-width: 960px;
  margin: 0 auto;
}

.wizard-progress-bar-container {
  margin-bottom: 32px;
}

.wizard-steps-indicator {
  display: flex;
  justify-content: space-between;
  position: relative;
  margin-bottom: 12px;
}

.wizard-step-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  z-index: 2;
}

.wizard-step-node.active {
  color: var(--brand-rose);
}

.wizard-step-node.completed {
  color: var(--brand-blue);
}

.wizard-node-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg-surface-secondary);
  border: 2px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  transition: all 0.25s ease;
}

.wizard-step-node.active .wizard-node-circle {
  border-color: var(--brand-rose);
  background: var(--brand-rose);
  color: #FFFFFF;
  box-shadow: 0 0 12px var(--brand-rose-glow);
}

.wizard-step-node.completed .wizard-node-circle {
  border-color: var(--brand-blue);
  background: var(--brand-blue);
  color: #FFFFFF;
}

.wizard-track-line {
  position: absolute;
  top: 15px;
  left: 30px;
  right: 30px;
  height: 3px;
  background: var(--border-light);
  z-index: 1;
}

.wizard-track-fill {
  height: 100%;
  background: var(--brand-gradient);
  transition: width 0.35s ease;
}

.wizard-pane {
  display: none;
}

.wizard-pane.active {
  display: block;
  animation: orynFadeIn 0.3s ease;
}

.wizard-question-title {
  font-family: var(--font-family-primary);
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.wizard-question-subtitle {
  font-size: 15px;
  color: var(--text-secondary);
  margin-bottom: 28px;
}

.wizard-options-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}

.wizard-option-card {
  padding: 20px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--border-color);
  background: var(--bg-snow);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}

.wizard-option-card:hover {
  border-color: var(--brand-blue);
  transform: translateY(-2px);
  background: #FFFFFF;
}

.wizard-option-card.selected {
  border-color: var(--brand-rose);
  background: #FFFFFF;
  box-shadow: 0 6px 20px rgba(230, 30, 88, 0.12);
}

.wizard-option-card.selected::after {
  content: '✓';
  position: absolute;
  top: 12px;
  right: 12px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--brand-rose);
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wizard-option-icon {
  font-size: 24px;
  color: var(--text-primary);
}

.wizard-option-title {
  font-family: var(--font-family-primary);
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.wizard-option-desc {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.4;
}

.wizard-nav-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--border-light);
  padding-top: 24px;
}

/* Wizard Recommendation Output */
.wizard-result-box {
  background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
  color: #FFFFFF;
  border-radius: var(--radius-lg);
  padding: 36px;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.2);
}

.result-badge {
  background: rgba(230, 30, 88, 0.2);
  border: 1px solid var(--brand-rose);
  color: #FFAEC5;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  display: inline-block;
  margin-bottom: 12px;
}

.result-title {
  font-family: var(--font-family-primary);
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 12px;
}

.result-metric-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 24px 0;
  padding: 20px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

@media (max-width: 768px) {
  .result-metric-grid {
    grid-template-columns: 1fr;
  }
}

.result-metric-item {
  text-align: center;
}

.result-metric-item small {
  color: rgba(255, 255, 255, 0.7);
  display: block;
  font-size: 12px;
  margin-bottom: 4px;
}

.result-metric-item strong {
  font-family: var(--font-family-primary);
  font-size: 22px;
  color: #38BDF8;
}

/* Session Resumption Floating Ribbon (P2 Retention) */
.oryn-resume-bar {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(120px);
  background: #0F172A;
  color: #FFFFFF;
  padding: 12px 24px;
  border-radius: var(--radius-pill);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(230, 30, 88, 0.4);
  display: flex;
  align-items: center;
  gap: 18px;
  z-index: 1050;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  max-width: 90vw;
}

.oryn-resume-bar.visible {
  transform: translateX(-50%) translateY(0);
}

.resume-text {
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}

.resume-text strong {
  color: var(--brand-rose);
}

.resume-btn {
  background: var(--brand-rose);
  color: #FFFFFF !important;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  text-decoration: none !important;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.resume-btn:hover {
  background: #C8174B;
}

.resume-close {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  padding: 0;
  font-size: 16px;
  line-height: 1;
}

.resume-close:hover {
  color: #FFFFFF;
}

@media (max-width: 767.98px) {
  .oryn-resume-bar {
    width: calc(100vw - 24px);
    max-width: calc(100vw - 24px);
    left: 12px;
    right: 12px;
    bottom: 12px;
    transform: translateY(120px);
    border-radius: var(--radius-md, 12px);
    padding: 10px 14px;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: space-between;
    z-index: 1030;
  }

  .oryn-resume-bar.visible {
    transform: translateY(0);
  }

  .resume-text {
    white-space: normal;
    font-size: 12px;
    line-height: 1.35;
    flex: 1 1 calc(100% - 24px);
    order: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .resume-btn {
    order: 2;
    font-size: 11px;
    padding: 6px 12px;
  }

  .resume-close {
    order: 3;
    font-size: 20px;
    padding: 4px 8px;
    margin-left: auto;
  }
}

body.modal-open .oryn-resume-bar,
.offcanvas.show~.oryn-resume-bar {
  display: none !important;
}

/* ==========================================================================
   PHASE 1: ENTERPRISE TRUST, PROOF & CREDIBILITY FOUNDATION
   ========================================================================== */

.oryn-proof-section {
  background: #FFFFFF;
  border-bottom: 1px solid var(--border-color);
  padding: 24px 0 28px 0;
  position: relative;
}

/* 1. Authoritative Trust Ribbon */
.oryn-trust-ribbon {
  background: var(--bg-snow);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 20px 28px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.03);
  margin-bottom: 0;
}

.oryn-trust-stat-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  padding: 4px 12px;
}

.oryn-trust-stat-item:not(:last-child)::after {
  content: '';
  position: absolute;
  right: -12px;
  top: 15%;
  height: 70%;
  width: 1px;
  background: var(--border-color);
}

.oryn-trust-stat-val {
  font-family: var(--font-family-primary);
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.15;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: 6px;
}

.oryn-trust-stat-val .metric-highlight {
  color: var(--brand-rose);
}

.oryn-trust-stat-val .metric-blue {
  color: var(--brand-blue);
}

.oryn-trust-stat-lbl {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.oryn-trust-stat-sub {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.4;
  margin-top: 2px;
}

.oryn-methodology-tip-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #E2E8F0;
  color: #475569;
  font-size: 10px;
  cursor: help;
  transition: all 0.2s ease;
  vertical-align: middle;
}

.oryn-methodology-tip-trigger:hover {
  background: var(--brand-blue);
  color: #FFFFFF;
}

/* 2. Customer & Reference Logo Wall */
.oryn-logo-wall-wrapper {
  margin-bottom: 56px;
}

.oryn-logo-wall-header {
  text-align: center;
  margin-bottom: 24px;
}

.oryn-logo-wall-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.oryn-logo-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}

.oryn-logo-badge {
  background: #FFFFFF;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: left;
  transition: all 0.25s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
  min-height: 100px;
}

.oryn-logo-badge:hover {
  border-color: #CBD5E1;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
  transform: translateY(-2px);
}

.oryn-logo-badge-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.oryn-logo-monogram {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: #0F172A;
  color: #FFFFFF;
  font-weight: 800;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: -0.05em;
  flex-shrink: 0;
}

.oryn-logo-badge:nth-child(even) .oryn-logo-monogram {
  background: var(--brand-blue);
}

.oryn-logo-badge:nth-child(3n) .oryn-logo-monogram {
  background: var(--brand-rose);
}

.oryn-logo-title {
  font-family: var(--font-family-primary);
  font-weight: 700;
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.25;
}

.oryn-logo-meta {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.35;
}

.oryn-logo-scale {
  font-size: 10px;
  font-weight: 600;
  color: #10B981;
  display: inline-block;
  margin-top: 4px;
}

/* 3. Deep-Dive Case Studies (Before -> After -> Result) */
.oryn-case-studies-section-header {
  margin-bottom: 36px;
}

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

.oryn-case-study-card {
  background: #FFFFFF;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.oryn-case-study-card:hover {
  border-color: #CBD5E1;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
  transform: translateY(-3px);
}

.oryn-case-study-card.featured-case {
  border-color: rgba(230, 30, 88, 0.35);
  background: linear-gradient(180deg, #FFFFFF 0%, rgba(230, 30, 88, 0.02) 100%);
}

.oryn-case-pill-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: #F1F5F9;
  color: var(--text-secondary);
  margin-bottom: 14px;
}

.oryn-case-title {
  font-family: var(--font-family-primary);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.oryn-case-org {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 20px;
  display: block;
}

/* Structured Before / After Comparison Blocks */
.oryn-case-block-pair {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}

.oryn-case-block {
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  font-size: 13px;
  line-height: 1.5;
}

.oryn-case-block-before {
  background: #FEF2F2;
  border: 1px solid #FECACA;
  color: #991B1B;
}

.oryn-case-block-before strong {
  color: #7F1D1D;
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 3px;
}

.oryn-case-block-after {
  background: #EFF6FF;
  border: 1px solid #BFDBFE;
  color: #1E40AF;
}

.oryn-case-block-after strong {
  color: #1E3A8A;
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 3px;
}

/* Quantified Results Block */
.oryn-case-results-box {
  background: var(--bg-snow);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-bottom: 20px;
}

.oryn-case-results-box-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.oryn-case-result-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  text-align: center;
}

.oryn-case-metric-col strong {
  display: block;
  font-family: var(--font-family-primary);
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}

.oryn-case-metric-col span {
  display: block;
  font-size: 10px;
  font-weight: 500;
  color: var(--text-secondary);
  line-height: 1.3;
  margin-top: 2px;
}

.oryn-case-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  background: #FFFFFF;
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
  cursor: pointer;
}

.oryn-case-action-btn:hover {
  background: var(--text-primary);
  color: #FFFFFF;
  border-color: var(--text-primary);
}

/* 4. Methodology & Telemetry Audit Footnote Panel */
.oryn-telemetry-audit-card {
  margin-top: 40px;
  background: var(--bg-snow);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 24px 30px;
}

.oryn-telemetry-audit-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
}

.oryn-telemetry-audit-header:hover .oryn-audit-title {
  color: var(--brand-blue);
}

.oryn-audit-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color 0.2s ease;
}

.oryn-audit-badge {
  font-size: 11px;
  font-weight: 600;
  background: #E2E8F0;
  color: #334155;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
}

.oryn-telemetry-audit-body {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border-color);
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.65;
}

.oryn-audit-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 14px;
}

.oryn-audit-cell {
  background: #FFFFFF;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}

.oryn-audit-cell strong {
  display: block;
  font-size: 12px;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.oryn-audit-cell span {
  display: block;
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.45;
}

/* Modal Deep Dive Overrides */
.oryn-case-modal .modal-content {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.15);
}

.oryn-case-modal .modal-header {
  border-bottom: 1px solid var(--border-color);
  padding: 24px 30px;
}

.oryn-case-modal .modal-body {
  padding: 30px;
}

.oryn-case-modal .modal-footer {
  border-top: 1px solid var(--border-color);
  padding: 18px 30px;
}

/* Responsive adjustments for Trust & Proof */
@media (max-width: 1200px) {
  .oryn-logo-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .oryn-audit-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 992px) {
  .oryn-trust-ribbon {
    grid-template-columns: repeat(2, 1fr);
    padding: 20px;
  }

  .oryn-trust-stat-item:not(:last-child)::after {
    display: none;
  }

  .oryn-case-studies-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 576px) {
  .oryn-trust-ribbon {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .oryn-logo-grid {
    grid-template-columns: 1fr;
  }

  .oryn-audit-grid {
    grid-template-columns: 1fr;
  }
}

/* --- Visual Security Architecture Pipeline --- */
.oryn-security-pipeline-wrapper {
  background: var(--bg-dark-accent);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  margin-bottom: 40px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);
}

.oryn-pipeline-title {
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.oryn-pipeline-flow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 10px;
}

.oryn-pipeline-node {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-sm);
  padding: 14px 12px;
  min-width: 140px;
  flex: 1;
  text-align: center;
  transition: all 0.25s ease;
}

.oryn-pipeline-node:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--brand-blue);
  transform: translateY(-2px);
}

.oryn-pipeline-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 8px auto;
  color: #FFFFFF;
  font-size: 14px;
}

.oryn-pipeline-node.node-rose .oryn-pipeline-icon {
  background: rgba(230, 30, 88, 0.2);
  color: #FF5A87;
}

.oryn-pipeline-node.node-blue .oryn-pipeline-icon {
  background: rgba(0, 114, 181, 0.2);
  color: #38BDF8;
}

.oryn-pipeline-node.node-green .oryn-pipeline-icon {
  background: rgba(16, 185, 129, 0.2);
  color: #34D399;
}

.oryn-pipeline-step {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  display: block;
  margin-bottom: 2px;
}

.oryn-pipeline-name {
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  display: block;
}

.oryn-pipeline-meta {
  color: rgba(255, 255, 255, 0.5);
  font-size: 10px;
  margin-top: 4px;
  display: block;
}

.oryn-pipeline-arrow {
  color: rgba(255, 255, 255, 0.3);
  font-size: 16px;
  flex-shrink: 0;
}

/* Compliance Grid */
.oryn-compliance-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 32px;
}

.oryn-compliance-card {
  background: #FFFFFF;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
}

.oryn-compliance-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: #F1F5F9;
  color: #334155;
  margin-bottom: 12px;
}

.oryn-compliance-card h4 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 8px;
}

.oryn-compliance-card p {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.55;
  margin-bottom: 14px;
}

@media (max-width: 992px) {
  .oryn-compliance-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .oryn-compliance-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   UX MASTERPLAN: PERSONALIZATION, IA, COGNITIVE LOAD & RETENTION
   ========================================================================== */

/* 1. Persona Segmentation ("What Best Describes You?") */
.oryn-persona-section {
  background: #FFFFFF;
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
  padding: 48px 0;
  position: relative;
}

.oryn-persona-header {
  text-align: center;
  margin-bottom: 32px;
}

.oryn-persona-tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-blue);
  background: rgba(0, 114, 181, 0.08);
  padding: 4px 14px;
  border-radius: var(--radius-pill);
  display: inline-block;
  margin-bottom: 8px;
}

.oryn-persona-title {
  font-family: var(--font-family-primary);
  font-size: 26px;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.oryn-persona-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.oryn-persona-card {
  background: #FAFCFE;
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 20px 18px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  position: relative;
  text-align: left;
}

.oryn-persona-card:hover {
  transform: translateY(-3px);
  border-color: var(--brand-blue);
  background: #FFFFFF;
  box-shadow: 0 10px 24px rgba(0, 114, 181, 0.08);
}

.oryn-persona-card.active {
  border-color: var(--brand-rose);
  background: #FFFFFF;
  box-shadow: 0 10px 30px rgba(230, 30, 88, 0.12);
}

.oryn-persona-card.active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 15%;
  right: 15%;
  height: 3px;
  background: var(--brand-rose);
  border-radius: 0 0 4px 4px;
}

.oryn-persona-icon-box {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--bg-surface-secondary);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 14px;
  transition: all 0.2s ease;
}

.oryn-persona-card.active .oryn-persona-icon-box {
  background: rgba(230, 30, 88, 0.1);
  color: var(--brand-rose);
}

.oryn-persona-role {
  font-family: var(--font-family-primary);
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.oryn-persona-priority {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.45;
  margin: 0;
}

.oryn-persona-indicator {
  margin-top: 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--brand-blue);
  display: flex;
  align-items: center;
  gap: 4px;
  opacity: 0;
  transform: translateX(-4px);
  transition: all 0.2s ease;
}

.oryn-persona-card:hover .oryn-persona-indicator,
.oryn-persona-card.active .oryn-persona-indicator {
  opacity: 1;
  transform: translateX(0);
}

.oryn-persona-card.active .oryn-persona-indicator {
  color: var(--brand-rose);
}

/* Dynamic Persona Context Reveal Banner */
.oryn-persona-context-banner {
  margin-top: 24px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: var(--radius-md);
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  animation: orynFadeIn 0.3s ease;
}

.oryn-persona-context-text strong {
  color: var(--text-primary);
  font-size: 15px;
}

.oryn-persona-context-text p {
  color: var(--text-secondary);
  font-size: 13px;
  margin: 4px 0 0 0;
}

@media (max-width: 992px) {
  .oryn-persona-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .oryn-persona-grid {
    grid-template-columns: 1fr;
  }
}

/* 2. 5-Question Business Diagnostic Engine */
.oryn-diagnostic-card {
  background: #FFFFFF;
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.05);
  /* max-width: 980px; */
  margin: 0 auto;
}

/* Diagnostic Stepper Nodes */
.diagnostic-stepper-container {
  margin-bottom: 32px;
  position: relative;
}

.diagnostic-steps-indicator {
  display: flex;
  justify-content: space-between;
  position: relative;
  max-width: 680px;
  margin: 0 auto;
}

.diagnostic-track-line {
  position: absolute;
  top: 16px;
  left: 30px;
  right: 30px;
  height: 3px;
  background: var(--border-light);
  z-index: 1;
}

.diagnostic-track-fill {
  height: 100%;
  background: var(--brand-rose);
  transition: width 0.35s ease;
}

.diagnostic-step-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
  z-index: 2;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: all 0.25s ease;
}

.diagnostic-node-circle {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 2px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-secondary);
  transition: all 0.25s ease;
}

.diagnostic-step-node.active .diagnostic-node-circle {
  border-color: var(--brand-rose);
  background: var(--brand-rose);
  color: #FFFFFF;
  box-shadow: 0 0 12px var(--brand-rose-glow);
}

.diagnostic-step-node.completed .diagnostic-node-circle {
  border-color: var(--brand-blue);
  background: var(--brand-blue);
  color: #FFFFFF;
}

.diagnostic-step-node.active {
  color: var(--brand-rose);
}

.diagnostic-step-node.completed {
  color: var(--brand-blue);
}

.diagnostic-step-node.locked {
  opacity: 0.45;
  cursor: not-allowed;
}

.diagnostic-step-node.locked .diagnostic-node-circle {
  border-color: #E2E8F0;
  color: #94A3B8;
  background: #F8FAFC;
}

.btn-tier-primary:disabled,
.btn-tier-primary[disabled] {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  pointer-events: none;
  filter: grayscale(35%);
  transform: none !important;
  box-shadow: none !important;
}

@keyframes orynShakePulse {

  0%,
  100% {
    transform: translateX(0);
  }

  20%,
  60% {
    transform: translateX(-6px);
  }

  40%,
  80% {
    transform: translateX(6px);
  }
}

.oryn-shake-pulse {
  animation: orynShakePulse 0.45s ease-in-out;
}

.diag-step-validation-hint {
  animation: orynFadeIn 0.25s ease;
}

/* Diagnostic Step Panes (Crucial visibility toggle) */
.diagnostic-step-pane {
  display: none !important;
}

.diagnostic-step-pane.active {
  display: block !important;
  animation: orynFadeIn 0.3s ease;
}

.diagnostic-step-badge {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--brand-rose);
  background: rgba(230, 30, 88, 0.08);
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  display: inline-block;
  margin-bottom: 10px;
}

.diagnostic-q-title {
  font-family: var(--font-family-primary);
  font-size: 24px;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.diagnostic-q-subtitle {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 24px;
}

.diagnostic-options-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-bottom: 28px;
}

.diagnostic-opt-btn {
  background: #FAFCFE;
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
}

.diagnostic-opt-btn:hover {
  background: #FFFFFF;
  border-color: var(--brand-blue);
  transform: translateY(-2px);
}

.diagnostic-opt-btn.active {
  background: #FFFFFF;
  border-color: var(--brand-rose);
  box-shadow: none;
}

.diagnostic-opt-btn.active::after {
  content: '✓';
  position: absolute;
  top: 10px;
  right: 12px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--brand-rose);
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.diagnostic-opt-icon {
  font-size: 20px;
  color: var(--text-primary);
  flex-shrink: 0;
}

.diagnostic-opt-btn.active .diagnostic-opt-icon {
  color: var(--brand-rose);
}

.diagnostic-opt-name {
  font-family: var(--font-family-primary);
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.diagnostic-opt-desc {
  font-size: 11px;
  color: var(--text-secondary);
  margin: 2px 0 0 0;
}

/* 3. Generated "Your OrynBiz Blueprint" */
.oryn-blueprint-box {
  background: linear-gradient(135deg, #0B1120 0%, #1E293B 100%);
  border-radius: var(--radius-lg);
  padding: 40px;
  color: #FFFFFF;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.25);
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.blueprint-meta-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-bottom: 20px;
}

.blueprint-meta-chip {
  background: rgba(255, 255, 255, 0.1);
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  color: #E2E8F0;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.blueprint-title {
  font-family: var(--font-family-primary);
  font-size: 28px;
  font-weight: 800;
  color: #FFFFFF;
  margin-bottom: 8px;
}

.blueprint-summary {
  font-size: 15px;
  color: #94A3B8;
  line-height: 1.6;
  margin-bottom: 28px;
  max-width: 800px;
}

.blueprint-summary strong {
  color: #FFFFFF;
}

.blueprint-metrics-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  padding: 20px;
  margin-bottom: 28px;
}

.blueprint-metric-item small {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #94A3B8;
  display: block;
  margin-bottom: 4px;
}

.blueprint-metric-item strong {
  font-family: var(--font-family-primary);
  font-size: 20px;
  font-weight: 800;
  color: #FFFFFF;
}

.blueprint-metric-item strong.highlight-green {
  color: #10B981;
}

.blueprint-roadmap-phases {
  margin-bottom: 32px;
}

.blueprint-roadmap-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #E2E8F0;
  margin-bottom: 14px;
}

.blueprint-phase-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.blueprint-phase-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-sm);
  padding: 16px;
}

.phase-pill {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: rgba(230, 30, 88, 0.2);
  color: #FFAEC5;
  border: 1px solid rgba(230, 30, 88, 0.3);
  display: inline-block;
  margin-bottom: 8px;
}

.phase-name {
  font-family: var(--font-family-primary);
  font-size: 14px;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 4px;
}

.phase-deliverables {
  font-size: 12px;
  color: #94A3B8;
  line-height: 1.45;
  margin: 0;
}

.blueprint-actions-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 24px;
}

@media (max-width: 768px) {
  .blueprint-metrics-row {
    grid-template-columns: 1fr;
  }

  .blueprint-phase-cards {
    grid-template-columns: 1fr;
  }
}

/* 4. Cognitive Load & 3-Layer Rule Section ("How OrynBiz Works") */
.oryn-3layer-section {
  background: #FFFFFF;
  padding: 80px 0;
}

.layer-1-container {
  text-align: center;
  max-width: 840px;
  margin: 0 auto 48px auto;
}

.layer-1-headline {
  font-family: var(--font-family-primary);
  font-size: 34px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.25;
  margin-bottom: 14px;
}

.layer-1-subhead {
  font-size: 17px;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* Layer 1 Visual Pipeline */
.layer-1-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.layer-flow-node {
  background: var(--bg-snow);
  border: 1px solid var(--border-color);
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.layer-flow-node i {
  color: var(--brand-blue);
}

.layer-flow-arrow {
  color: var(--text-muted);
  font-size: 16px;
}

/* Layer 2: 3 Clear Benefits */
.layer-2-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 40px;
}

.layer-2-card {
  background: #FAFCFE;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 28px 24px;
  transition: all 0.25s ease;
}

.layer-2-card:hover {
  background: #FFFFFF;
  border-color: var(--brand-blue);
  box-shadow: 0 10px 30px rgba(0, 114, 181, 0.08);
  transform: translateY(-3px);
}

.layer-2-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(0, 114, 181, 0.08);
  color: var(--brand-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 16px;
}

.layer-2-title {
  font-family: var(--font-family-primary);
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.layer-2-desc {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.55;
  margin-bottom: 16px;
}

.layer-2-proof {
  font-size: 12px;
  font-weight: 700;
  color: #059669;
  background: rgba(16, 185, 129, 0.08);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

@media (max-width: 992px) {
  .layer-2-grid {
    grid-template-columns: 1fr;
  }
}

/* Layer 3: Technical Deep-Dive Accordion */
.layer-3-wrapper {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.layer-3-header-btn {
  width: 100%;
  padding: 20px 24px;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  text-align: left;
}

.layer-3-header-btn strong {
  font-family: var(--font-family-primary);
  font-size: 15px;
  color: var(--text-primary);
}

.layer-3-header-btn small {
  color: var(--text-secondary);
  font-size: 13px;
  display: block;
}

.layer-3-content {
  padding: 24px;
  border-top: 1px solid #E2E8F0;
  background: #FFFFFF;
}

.layer-3-tech-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.tech-spec-item {
  border-left: 3px solid var(--brand-blue);
  padding-left: 14px;
}

.tech-spec-item strong {
  font-size: 14px;
  color: var(--text-primary);
  display: block;
  margin-bottom: 3px;
}

.tech-spec-item p {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
}

@media (max-width: 768px) {
  .layer-3-tech-grid {
    grid-template-columns: 1fr;
  }
}

/* 5. Built for Your Industry (Interactive 4-Tab Switcher) */
.oryn-industry-tab-container {
  background: #FFFFFF;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 36px;
  box-shadow: 0 12px 36px rgba(15, 23, 42, 0.04);
}

.industry-nav-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border-bottom: 1px solid var(--border-light);
  padding-bottom: 20px;
  margin-bottom: 32px;
}

.industry-tab-btn {
  border: 1.5px solid transparent;
  background: var(--bg-snow);
  color: var(--text-secondary);
  font-family: var(--font-family-primary);
  font-size: 14px;
  font-weight: 700;
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
}

.industry-tab-btn:hover {
  background: #E2E8F0;
  color: var(--text-primary);
}

.industry-tab-btn.active {
  background: var(--brand-blue);
  color: #FFFFFF;
  box-shadow: none;
}

.industry-tab-pane {
  display: none;
  animation: orynFadeIn 0.3s ease;
}

.industry-tab-pane.active {
  display: block;
}

.industry-pane-layout {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 36px;
  align-items: center;
}

.industry-pane-content h3 {
  font-family: var(--font-family-primary);
  font-size: 26px;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 12px;
}

.industry-pane-content p {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 24px;
}

.industry-pane-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 28px;
}

.industry-pane-feat-item {
  font-size: 13px;
  color: var(--text-primary);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.industry-pane-feat-item i {
  color: #10B981;
}

.industry-pane-visual {
  background: #F8FAFC;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 24px;
}

@media (max-width: 992px) {
  .industry-pane-layout {
    grid-template-columns: 1fr;
  }
}

/* 6. Case Studies & Real Results */
.oryn-case-studies-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 36px;
}

.oryn-case-studies-grid .oryn-case-card,
.oryn-case-grid-card {
  background: #FFFFFF;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.04);
  transition: all 0.25s ease;
  color: var(--text-primary);
}

.oryn-case-studies-grid .oryn-case-card:hover,
.oryn-case-grid-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
  border-color: var(--brand-blue);
}

/* Guard: Editorial case study cards must maintain dark background and high-contrast readability */
.oryn-case-card:not(.oryn-case-grid-card):not(.oryn-featured-blog-card) {
  background: #0F172A !important;
  color: #FFFFFF !important;
}

.oryn-case-card:not(.oryn-case-grid-card):not(.oryn-featured-blog-card) .oryn-case-quote {
  color: #FFFFFF !important;
}

.oryn-case-card:not(.oryn-case-grid-card):not(.oryn-featured-blog-card) .text-white-50 {
  color: rgba(255, 255, 255, 0.75) !important;
}

.oryn-case-card:not(.oryn-case-grid-card):not(.oryn-featured-blog-card) strong.text-white {
  color: #FFFFFF !important;
}

/* Featured Blog Post Card (White Editorial Surface) */
.oryn-featured-blog-card {
  background: #FFFFFF !important;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  padding: 48px 42px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
  color: var(--text-primary);
  transition: all 0.3s ease;
  position: relative;
}

.oryn-featured-blog-card:hover {
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
  border-color: rgba(230, 30, 88, 0.3);
}

@media (max-width: 768px) {
  .oryn-featured-blog-card {
    padding: 30px 20px;
  }
}

.case-split-box {
  background: #FAFCFE;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 14px;
  margin: 16px 0;
}

.case-split-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  margin-bottom: 8px;
}

.case-split-row:last-child {
  margin-bottom: 0;
  padding-top: 8px;
  border-top: 1px dashed var(--border-light);
}

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

.case-split-val-before {
  color: #DC2626;
  font-weight: 600;
}

.case-split-val-after {
  color: #059669;
  font-weight: 700;
}

@media (max-width: 992px) {
  .oryn-case-studies-grid {
    grid-template-columns: 1fr;
  }
}

/* 7. Comparison Matrix Table */
.oryn-matrix-wrapper {
  overflow-x: auto;
  background: #FFFFFF;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 36px rgba(15, 23, 42, 0.05);
}

.oryn-matrix-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
}

.oryn-matrix-table th {
  background: #F8FAFC;
  padding: 18px 20px;
  font-family: var(--font-family-primary);
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  border-bottom: 2px solid var(--border-color);
  text-align: center;
}

.oryn-matrix-table th:first-child {
  text-align: left;
  min-width: 220px;
}

.oryn-matrix-table th.oryn-highlight-col {
  background: #0B1120;
  color: #FFFFFF;
  border-bottom-color: var(--brand-rose);
}

.oryn-matrix-table td {
  padding: 16px 20px;
  font-size: 13px;
  border-bottom: 1px solid var(--border-light);
  text-align: center;
  color: var(--text-secondary);
}

.oryn-matrix-table td:first-child {
  text-align: left;
  font-weight: 600;
  color: var(--text-primary);
}

.oryn-matrix-table td.oryn-highlight-col {
  background: #F8FAFC;
  font-weight: 700;
  color: #059669;
  border-left: 2px solid rgba(230, 30, 88, 0.15);
  border-right: 2px solid rgba(230, 30, 88, 0.15);
}

.matrix-check {
  color: #10B981;
  font-size: 16px;
}

.matrix-cross {
  color: #94A3B8;
  font-size: 16px;
}

.matrix-warn {
  color: #F59E0B;
  font-size: 16px;
}

/* 8. Worried About Migration Section */
.oryn-migration-section {
  background: #FAFCFE;
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
  padding: 80px 0;
}

.migration-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 36px;
}

.migration-promise-card {
  background: #FFFFFF;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.migration-promise-card i {
  font-size: 26px;
  color: var(--brand-blue);
  margin-bottom: 6px;
}

.migration-promise-card h4 {
  font-family: var(--font-family-primary);
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.migration-promise-card p {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
}

@media (max-width: 992px) {
  .migration-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .migration-cards-grid {
    grid-template-columns: 1fr;
  }
}

/* 9. Universal 3-Tier CTA Action Buttons */
.oryn-3tier-cta-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 32px;
}

.btn-tier-primary {
  background: #10B981;
  color: #FFFFFF !important;
  border: 1.5px solid #10B981;
  font-family: var(--font-family-primary);
  font-size: 15px;
  font-weight: 700;
  padding: 12px 28px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  transition: all 0.25s ease;
  box-shadow: none;
}

.btn-tier-primary:hover {
  background: #059669;
  border-color: #059669;
  transform: translateY(-2px);
  box-shadow: none;
}

.btn-tier-secondary {
  background: #0072B5;
  color: #FFFFFF !important;
  border: 1.5px solid #0072B5;
  font-family: var(--font-family-primary);
  font-size: 15px;
  font-weight: 700;
  padding: 12px 28px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  transition: all 0.25s ease;
  box-shadow: none;
}

.btn-tier-secondary:hover {
  background: #005A91;
  border-color: #005A91;
  transform: translateY(-2px);
  box-shadow: none;
}

.btn-tier-high {
  background: #E61E58;
  color: #FFFFFF !important;
  border: 1.5px solid #E61E58;
  font-family: var(--font-family-primary);
  font-size: 15px;
  font-weight: 700;
  padding: 12px 28px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  transition: all 0.25s ease;
  box-shadow: none;
}

.btn-tier-high:hover {
  background: #C41447;
  border-color: #C41447;
  transform: translateY(-2px);
  box-shadow: none;
}

/* Print Styles for Executive Board Briefing Memo */
@media print {
  body * {
    visibility: hidden;
  }

  .oryn-blueprint-box,
  .oryn-blueprint-box * {
    visibility: visible;
  }

  .oryn-blueprint-box {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    background: #FFFFFF !important;
    color: #000000 !important;
    box-shadow: none !important;
    border: none !important;
  }

  .blueprint-title,
  .blueprint-summary strong,
  .phase-name,
  .blueprint-metric-item strong {
    color: #000000 !important;
  }

  .blueprint-summary,
  .phase-deliverables,
  .blueprint-metric-item small {
    color: #333333 !important;
  }

  .blueprint-actions-bar {
    display: none !important;
  }
}

/* ==========================================================================
   PROBLEM-FIRST ENTRY: "What problem are you trying to solve?"
   ========================================================================== */
.oryn-problem-entry-section {
  padding: 60px 0;
  background: #FFFFFF;
  border-bottom: 1px solid var(--border-color);
}

.oryn-problem-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 32px;
}

@media (max-width: 992px) {
  .oryn-problem-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .oryn-problem-cards-grid {
    grid-template-columns: 1fr;
  }
}

.oryn-problem-card {
  background: #FAFCFE;
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 24px 22px;
  cursor: pointer;
  transition: all 0.25s ease;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.oryn-problem-card:hover {
  transform: translateY(-4px);
  background: #FFFFFF;
  border-color: var(--brand-rose);
  box-shadow: 0 14px 34px rgba(230, 30, 88, 0.08);
}

.oryn-problem-card-top {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 14px;
}

.oryn-problem-icon {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: var(--radius-md);
  background: rgba(230, 30, 88, 0.08);
  color: var(--brand-rose);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  transition: all 0.25s ease;
}

.oryn-problem-card:hover .oryn-problem-icon {
  background: var(--brand-rose);
  color: #FFFFFF;
}

.oryn-problem-quote {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.35;
  margin-bottom: 4px;
}

.oryn-problem-tag {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--brand-blue);
}

.oryn-problem-solution-preview {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 16px;
}

.oryn-problem-action {
  font-size: 13px;
  font-weight: 700;
  color: var(--brand-rose);
  display: flex;
  align-items: center;
  gap: 6px;
  border-top: 1px solid var(--border-light);
  padding-top: 12px;
}

.oryn-problem-card:hover .oryn-problem-action {
  color: var(--brand-rose);
}

/* ==========================================================================
   WHAT CHANGES FOR YOUR TEAM? (Operational Influencers Section)
   ========================================================================== */
.oryn-team-section {
  padding: 80px 0;
  background: #F8FAFC;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}

.oryn-team-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  margin-top: 40px;
}

@media (max-width: 992px) {
  .oryn-team-grid {
    grid-template-columns: 1fr;
  }
}

.oryn-team-card {
  background: #FFFFFF;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  padding: 30px;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.25s ease;
}

.oryn-team-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
  border-color: rgba(37, 99, 235, 0.3);
}

.oryn-team-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}

.oryn-team-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(37, 99, 235, 0.1);
  color: var(--brand-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

.oryn-team-role-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.oryn-team-role-badge {
  font-size: 12px;
  color: var(--text-secondary);
}

.oryn-team-contrast-box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 16px;
}

@media (max-width: 576px) {
  .oryn-team-contrast-box {
    grid-template-columns: 1fr;
  }
}

.team-state-before {
  background: #FEF2F2;
  border: 1px solid #FEE2E2;
  border-radius: var(--radius-md);
  padding: 16px;
}

.team-state-before strong {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #DC2626;
  display: block;
  margin-bottom: 6px;
}

.team-state-before p {
  font-size: 13px;
  color: #7F1D1D;
  margin-bottom: 0;
  line-height: 1.45;
}

.team-state-after {
  background: #F0FDF4;
  border: 1px solid #DCFCE7;
  border-radius: var(--radius-md);
  padding: 16px;
}

.team-state-after strong {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #16A34A;
  display: block;
  margin-bottom: 6px;
}

.team-state-after p {
  font-size: 13px;
  color: #14532D;
  margin-bottom: 0;
  line-height: 1.45;
}

.team-metric-callout {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
  background: #FAFCFE;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
}