/* ==========================================================================
   NEXAGE.AI — COMPONENTS & INTERACTIVE UI (STRICT BRAND PALETTE & APPLE LIGHT)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. NAVIGATION BAR (APPLE-STYLE BLURRED FLOATING LIGHT HEADER)
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-height);
  z-index: 1000;
  transition: box-shadow var(--transition-normal);
  background: #ffffff;
  border-bottom: 1px solid var(--line);
}

.site-header.scrolled {
  background: #ffffff;
  border-bottom-color: var(--line);
  box-shadow: 0 6px 16px rgba(10, 40, 50, 0.06);
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1.75rem;
}

.brand-logo-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  z-index: 10;
  flex-shrink: 0;
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.brand-logo-link:focus,
.brand-logo-link:focus-visible,
.brand-logo-link:active {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}

.brand-logo-img {
  height: 52px;
  max-height: 54px;
  width: auto;
  object-fit: contain;
  transition: transform var(--transition-fast);
  user-select: none;
  -webkit-user-drag: none;
}

.brand-logo-link:hover .brand-logo-img {
  transform: scale(1.03);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-item-link {
  font-size: 15px;
  font-weight: 600;
  color: #4B5359;
  position: relative;
  padding: 0.45rem 0;
  white-space: nowrap;
  transition: color var(--transition-fast);
}

.nav-item-link:hover,
.nav-item-link.active {
  color: #2B2E31;
  font-weight: 600;
}

.nav-item-link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--cyan-primary);
  transition: width var(--transition-fast);
  border-radius: 2px;
}

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

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-shrink: 0;
}

/* Language Switcher */
.lang-switch-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.85rem;
  border-radius: var(--radius-full);
  background: var(--bg-surface-subtle);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-size: 0.825rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.lang-switch-btn:hover {
  background: #ebebee;
  color: #2B2E31;
  border-color: rgba(10, 127, 153, 0.4);
}

.lang-switch-btn .lang-badge {
  color: #09788F; /* AA contrast on the light button */
  font-weight: 700;
}

/* Primary Button */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  background: var(--brand);
  color: #ffffff;
  font-weight: 800;
  font-size: 15px;
  padding: 0 22px;
  border-radius: var(--radius-full);
  border: 0;
  transition: background var(--transition-fast), transform var(--transition-fast);
  cursor: pointer;
}

.btn-primary:hover {
  background: #087189;
  transform: translateY(-1px);
}

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

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  background: #ffffff;
  color: var(--ink);
  font-weight: 800;
  font-size: 15px;
  padding: 0 22px;
  border-radius: var(--radius-full);
  border: 2px solid var(--border-medium);
  transition: border-color var(--transition-fast), transform var(--transition-fast);
  cursor: pointer;
}

.btn-secondary:hover {
  border-color: var(--brand);
  transform: translateY(-1px);
}

/* Mobile Nav Toggle */
.mobile-menu-btn {
  display: none;
  background: none;
  border: none;
  color: #2B2E31;
  padding: 0.5rem;
  cursor: pointer;
}

.mobile-menu-btn svg {
  width: 26px;
  height: 26px;
}

/* --------------------------------------------------------------------------
   2. HERO SLIDER — ABOVE-THE-FOLD BALANCED SPLIT (STRICT BRAND PALETTE)
   -------------------------------------------------------------------------- */
.hero-slider-section {
  position: relative;
  padding-top: calc(var(--header-height) + 1.25rem);
  padding-bottom: 1.75rem;
  background: linear-gradient(180deg, #ffffff 0%, #fbfbfd 100%);
  overflow: hidden;
}

.hero-slider-wrapper {
  position: relative;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
}

/* Slide Item */
.hero-slide {
  opacity: 0;
  visibility: hidden;
  height: 0;
  overflow: hidden;
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.6s;
}

.hero-slide.active {
  opacity: 1;
  visibility: visible;
  height: auto;
  overflow: visible;
}

/* Split Grid: Left Text + Right Image */
.hero-slide-split-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 2.75rem;
  align-items: center;
  min-height: 430px;
}

/* Left Content Area */
.hero-slide-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
}

.hero-slide-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 1rem;
  border-radius: var(--radius-full);
  background: var(--cyan-light-bg);
  border: 1px solid rgba(10, 127, 153, 0.3);
  color: var(--cyan-deep);
  font-size: 0.825rem;
  font-weight: 700;
  margin-bottom: 1rem;
  width: fit-content;
  box-shadow: 0 2px 8px rgba(10, 127, 153, 0.1);
}

.hero-slide-badge .pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cyan-primary);
  box-shadow: 0 0 8px var(--cyan-primary);
}

.hero-slide-title {
  font-size: clamp(2.4rem, 4.2vw, 3.4rem);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.04em;
  color: #2B2E31;
  margin-bottom: 0.85rem;
}

.hero-slide-desc {
  font-size: 1.05rem;
  color: var(--text-secondary);
  line-height: 1.55;
  margin-bottom: 1.6rem;
  max-width: 520px;
}

.hero-slide-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Right Visual Container */
.hero-slide-right {
  position: relative;
}

.hero-visual-card {
  position: relative;
  width: 100%;
  height: 410px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(10, 127, 153, 0.25);
  box-shadow: 0 20px 50px rgba(10, 127, 153, 0.14), 0 6px 20px rgba(0, 0, 0, 0.04);
}

.hero-visual-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 1.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-slide.active .hero-visual-img {
  transform: scale(1.02);
}

/* Floating Glass Overlay Tag on Image */
.hero-card-floating-badge {
  position: absolute;
  bottom: 1.25rem;
  left: 1.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 1rem;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--radius-full);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
  color: #2B2E31;
  font-size: 0.8rem;
  font-weight: 700;
  z-index: 5;
}

.hero-card-floating-badge .badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cyan-primary);
  box-shadow: 0 0 6px var(--cyan-primary);
}

/* Professional Floating Navigation Arrows on Hero Visual Card */
.hero-slider-arrows-dock {
  position: absolute;
  bottom: 1.25rem;
  right: 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  z-index: 10;
}

.slider-arrow-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(10, 127, 153, 0.3);
  color: #2B2E31;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  transition: all var(--transition-fast);
}

.slider-arrow-btn:hover {
  background: var(--cyan-primary);
  border-color: var(--cyan-primary);
  color: #ffffff;
  transform: scale(1.08);
  box-shadow: 0 6px 18px rgba(10, 127, 153, 0.4);
}

/* Minimalist Apple-Grade Slider Progress Navigation Dock */
.slider-progress-dock {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  margin-top: 1.5rem;
  padding: 0.5rem 1.15rem;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(10, 127, 153, 0.2);
  border-radius: var(--radius-full);
  box-shadow: 0 4px 20px rgba(10, 127, 153, 0.08), 0 2px 6px rgba(0, 0, 0, 0.03);
  z-index: 10;
}

.slider-progress-segment {
  cursor: pointer;
  padding: 0.35rem 0.25rem;
  display: flex;
  align-items: center;
  transition: transform var(--transition-fast);
}

.slider-progress-segment:hover {
  transform: scaleY(1.3);
}

.slider-segment-bar {
  width: 64px;
  height: 4px;
  background: rgba(0, 0, 0, 0.09);
  border-radius: var(--radius-full);
  overflow: hidden;
  position: relative;
  transition: background var(--transition-fast), width var(--transition-normal);
}

.slider-progress-segment:hover .slider-segment-bar {
  background: rgba(10, 127, 153, 0.25);
}

.slider-progress-segment.active .slider-segment-bar {
  width: 90px;
  background: rgba(10, 127, 153, 0.15);
}

.slider-segment-fill {
  height: 100%;
  width: 0%;
  background: var(--cyan-gradient);
  border-radius: var(--radius-full);
  box-shadow: 0 0 8px rgba(10, 127, 153, 0.6);
  transition: width 0.05s linear;
}

/* --------------------------------------------------------------------------
   2.5 FLEXIBLE ENGAGEMENT MODELS (İŞ MODELLERİ)
   -------------------------------------------------------------------------- */
.engagement-models-section {
  position: relative;
  background: #ffffff;
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}

.models-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-top: 2.5rem;
}

.model-card {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--radius-2xl);
  padding: 2.75rem 2.5rem;
  display: flex;
  flex-direction: column;
  transition: all var(--transition-normal);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}

.model-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--cyan-gradient);
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.model-card:hover {
  transform: translateY(-4px);
  border-color: rgba(10, 127, 153, 0.45);
  box-shadow: 0 20px 50px rgba(10, 127, 153, 0.12);
}

.model-card:hover::before {
  opacity: 1;
}

.model-card-icon-box {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  background: var(--cyan-light-bg);
  border: 1px solid rgba(10, 127, 153, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cyan-primary);
  margin-bottom: 1.25rem;
}

.model-card-icon-box svg {
  width: 26px;
  height: 26px;
}

.model-tag-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cyan-deep);
  margin-bottom: 0.4rem;
}

.model-card-title {
  font-size: 1.55rem;
  font-weight: 800;
  color: #2B2E31;
  margin-bottom: 0.75rem;
  line-height: 1.25;
}

.model-card-desc {
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 1.75rem;
}

.model-checklist {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-bottom: 2.25rem;
  flex: 1;
}

.model-check-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.925rem;
  font-weight: 600;
  color: #2B2E31;
}

.model-check-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--cyan-light-bg);
  border: 1px solid rgba(10, 127, 153, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cyan-primary);
  flex-shrink: 0;
}

.model-check-icon svg {
  width: 13px;
  height: 13px;
}

.model-card-actions {
  margin-top: auto;
}

/* --------------------------------------------------------------------------
   3. TRI-PANEL MASTER SHOWCASE
   -------------------------------------------------------------------------- */
.tri-showcase-section {
  position: relative;
  z-index: 5;
  background: #fbfbfd;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}

/* --------------------------------------------------------------------------
   4. SERVICES & CONSULTING SHOWCASE (7 CORE SERVICES)
   -------------------------------------------------------------------------- */
.services-consulting-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2.25rem;
}

.service-cons-card {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--radius-xl);
  padding: 2.25rem 1.85rem;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-normal);
  position: relative;
  overflow: hidden;
}

.service-cons-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--cyan-gradient);
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.service-cons-card:hover {
  transform: translateY(-5px);
  border-color: rgba(10, 127, 153, 0.4);
  box-shadow: 0 18px 45px rgba(10, 127, 153, 0.09);
}

.service-cons-card:hover::before {
  opacity: 1;
}

/* Featured 7th Card spans all 3 columns */
.service-cons-card.featured-card {
  grid-column: span 3;
  background: linear-gradient(135deg, #edf8fa 0%, #ffffff 50%, #f0f9ff 100%);
  border-color: rgba(10, 127, 153, 0.28);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 2rem;
  padding: 2rem 2.5rem;
}

.service-cons-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.35rem;
}

.service-cons-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--cyan-light-bg);
  border: 1px solid rgba(10, 127, 153, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cyan-primary);
  transition: transform var(--transition-fast);
}

.service-cons-card:hover .service-cons-icon {
  transform: scale(1.08);
}

.service-cons-icon svg {
  width: 24px;
  height: 24px;
}

.service-cons-badge {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--cyan-deep);
  background: var(--cyan-light-bg);
  padding: 0.28rem 0.65rem;
  border-radius: var(--radius-full);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.service-cons-title {
  font-size: 1.22rem;
  font-weight: 800;
  color: #2B2E31;
  margin-bottom: 0.65rem;
  line-height: 1.35;
}

.service-cons-desc {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.65;
  flex: 1;
}

.service-cons-footer {
  margin-top: auto;
  padding-top: 1.15rem;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.service-cons-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--cyan-primary);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: all var(--transition-fast);
}

.service-cons-btn:hover {
  color: var(--cyan-deep);
  gap: 0.65rem;
}

.tri-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1.75rem;
}

.tri-card {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--radius-xl);
  padding: 2.25rem;
  display: flex;
  flex-direction: column;
  transition: all var(--transition-normal);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.tri-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--cyan-gradient);
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.tri-card:hover {
  transform: translateY(-4px);
  border-color: rgba(10, 127, 153, 0.4);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
}

.tri-card:hover::before {
  opacity: 1;
}

.tri-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}

.tri-header-icon {
  width: 46px;
  height: 46px;
  border-radius: var(--radius-md);
  background: var(--cyan-light-bg);
  border: 1px solid rgba(10, 127, 153, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cyan-primary);
}

.tri-header-icon svg {
  width: 24px;
  height: 24px;
}

.tri-category-label {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cyan-deep);
  margin-bottom: 0.25rem;
}

.tri-title {
  font-size: 1.55rem;
  font-weight: 800;
  color: #2B2E31;
  margin-bottom: 0.5rem;
}

.tri-desc {
  font-size: 0.95rem;
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
}

.agents-pill-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  margin-bottom: 1.5rem;
  flex: 1;
}

.agent-mini-pill {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 0.75rem;
  background: #f8fafc;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--radius-sm);
  font-size: 0.825rem;
  font-weight: 600;
  color: #2B2E31;
}

.agent-mini-pill svg {
  width: 16px;
  height: 16px;
  color: var(--cyan-primary);
  flex-shrink: 0;
}

.services-subgroup-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.5rem;
  flex: 1;
}

.service-subgroup-item {
  padding: 0.95rem;
  background: #f8fafc;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: var(--radius-md);
}

.service-subgroup-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 700;
  font-size: 0.95rem;
  color: #2B2E31;
  margin-bottom: 0.35rem;
}

.service-subgroup-header svg {
  width: 18px;
  height: 18px;
  color: var(--cyan-primary);
}

.service-subgroup-tags {
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

.modular-apps-list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-bottom: 1.5rem;
  flex: 1;
}

.modular-app-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.65rem 0.85rem;
  background: #f8fafc;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 500;
  color: #2B2E31;
}

.modular-app-item svg {
  width: 16px;
  height: 16px;
  color: var(--cyan-primary);
  flex-shrink: 0;
}

.tri-card-footer {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.tri-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--cyan-deep);
  transition: gap var(--transition-fast);
}

.tri-link:hover {
  gap: 0.65rem;
  color: var(--cyan-primary);
}

/* --------------------------------------------------------------------------
   4. SECTION DIVIDER
   -------------------------------------------------------------------------- */
.section-divider {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(10, 127, 153, 0.25) 25%, rgba(10, 127, 153, 0.35) 50%, rgba(10, 127, 153, 0.25) 75%, transparent 100%);
  margin: 0 auto;
  max-width: 1140px;
}

.trust-metrics-section {
  padding: 2.75rem 0;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  background: #ffffff;
}

.trust-metrics-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.5rem;
  align-items: center;
}

.trust-metric-item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.trust-metric-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--cyan-light-bg);
  border: 1px solid rgba(10, 127, 153, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cyan-primary);
  flex-shrink: 0;
}

.trust-metric-icon svg {
  width: 18px;
  height: 18px;
}

.trust-metric-title {
  font-size: 0.925rem;
  font-weight: 700;
  color: #2B2E31;
  line-height: 1.25;
}

.trust-metric-sub {
  font-size: 0.78rem;
  color: var(--text-tertiary);
}

/* --------------------------------------------------------------------------
   5. ENTERPRISE AI AGENTS SHOWCASE (10 AGENTS CLEAN MARKETING GRID)
   -------------------------------------------------------------------------- */
.agents-showcase-section {
  background: #fbfbfd;
}

.agents-grid-10 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.25rem;
}

.agent-showcase-card {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--radius-lg);
  padding: 1.6rem 1.3rem;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-normal);
  position: relative;
}

.agent-showcase-card:hover {
  transform: translateY(-4px);
  border-color: rgba(10, 127, 153, 0.4);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
}

.agent-card-icon-box {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--cyan-light-bg);
  border: 1px solid rgba(10, 127, 153, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cyan-primary);
  margin-bottom: 1rem;
}

.agent-card-icon-box svg {
  width: 22px;
  height: 22px;
}

.agent-card-title {
  font-size: 1.1rem;
  font-weight: 800;
  color: #2B2E31;
  margin-bottom: 0.5rem;
  line-height: 1.3;
}

.agent-card-desc {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.45;
  margin-bottom: 1.25rem;
  flex: 1;
}

.agent-card-benefit {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--cyan-deep);
  background: var(--cyan-light-bg);
  padding: 0.3rem 0.6rem;
  border-radius: var(--radius-full);
}

/* --------------------------------------------------------------------------
   6. 12 MODULAR ENTERPRISE SUITE (BENTO GRID)
   -------------------------------------------------------------------------- */
.bento-section {
  position: relative;
  background: #ffffff;
}

.bento-tabs-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: var(--space-2xl);
  flex-wrap: wrap;
}

.bento-tab-btn {
  padding: 0.6rem 1.25rem;
  border-radius: var(--radius-full);
  background: #f5f5f7;
  border: 1px solid rgba(0, 0, 0, 0.06);
  color: var(--text-secondary);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.bento-tab-btn:hover {
  background: #e8e8ed;
  color: #2B2E31;
}

.bento-tab-btn.active {
  background: var(--cyan-gradient);
  color: #ffffff;
  border-color: transparent;
  box-shadow: 0 4px 15px rgba(10, 127, 153, 0.35);
}

.bento-grid-12 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.bento-module-card {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--radius-lg);
  padding: 1.85rem;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-normal);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.bento-module-card:hover {
  transform: translateY(-4px);
  border-color: rgba(10, 127, 153, 0.35);
  box-shadow: 0 16px 35px rgba(0, 0, 0, 0.06);
}

.bento-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}

.bento-module-icon {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-md);
  background: var(--cyan-light-bg);
  border: 1px solid rgba(10, 127, 153, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cyan-primary);
  flex-shrink: 0;
}

.bento-ai-chip { display: inline-flex; align-items: center; gap: .35rem; align-self: flex-start; margin: -.35rem 0 .85rem; padding: .28rem .65rem; border-radius: 999px; font-size: .74rem; font-weight: 800; color: #0A7F99; background: linear-gradient(90deg, rgba(14,156,184,.12), rgba(111,224,245,.18)); border: 1px solid rgba(10,127,153,.22); }
.bento-ai-chip svg { width: 13px; height: 13px; }
.bento-module-icon--3d {
  width: 72px;
  height: 72px;
  margin: -10px 0 -6px -8px;
  background: none;
  border: 0;
  border-radius: 0;
}
.bento-module-icon--3d img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 10px 12px rgba(10, 60, 75, .16));
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.bento-module-card:hover .bento-module-icon--3d img { transform: translateY(-4px) rotate(-3deg) scale(1.05); }

.bento-module-icon svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  display: block;
  flex-shrink: 0;
}

.bento-badge-tag {
  font-size: 0.72rem;
  padding: 0.25rem 0.6rem;
  background: #f1f5f9;
  border-radius: var(--radius-full);
  color: var(--cyan-deep);
  font-weight: 700;
  text-transform: uppercase;
}

.bento-module-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: #2B2E31;
  margin-bottom: 0.75rem;
}

.bento-features-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-bottom: 1.25rem;
  flex: 1;
}

.bento-feature-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.bento-feature-item svg {
  width: 14px;
  height: 14px;
  color: var(--cyan-primary);
  margin-top: 3px;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   7. ENGINEERING & IMMERSIVE TECH SHOWCASE (PLM, CAE, XR, DIGITAL TWIN)
   -------------------------------------------------------------------------- */
.engineering-showcase-box {
  background: #fbfbfd;
  border: 1px solid rgba(10, 127, 153, 0.2);
  border-radius: var(--radius-2xl);
  padding: 3rem;
  box-shadow: var(--shadow-md);
}

.engineering-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
}

.eng-card {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-normal);
}

.eng-card:hover {
  background: var(--cyan-light-bg);
  border-color: rgba(10, 127, 153, 0.35);
  transform: translateY(-3px);
}

.eng-card-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--cyan-light-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cyan-primary);
  margin-bottom: 1.25rem;
}

.eng-card-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: #2B2E31;
  margin-bottom: 0.75rem;
}

.eng-card-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.eng-card-list li {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.eng-card-list li::before {
  content: "•";
  color: var(--cyan-primary);
  font-weight: bold;
}

/* --------------------------------------------------------------------------
   8. ON-PREMISE SOVEREIGN AI & CONSULTING (DEFENSE, FINANCE, ENTERPRISE)
   -------------------------------------------------------------------------- */
.onprem-showcase-section {
  background: #ffffff;
}

.onprem-highlight-box {
  background: linear-gradient(135deg, #edf8fa 0%, #ffffff 60%, #e0f2fe 100%);
  border: 1px solid rgba(10, 127, 153, 0.3);
  border-radius: var(--radius-2xl);
  padding: 3.5rem;
  box-shadow: 0 20px 50px rgba(10, 127, 153, 0.08);
}

.onprem-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-top: 2.5rem;
}

.onprem-feature-card {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-normal);
}

.onprem-feature-card:hover {
  transform: translateY(-3px);
  border-color: var(--cyan-primary);
  box-shadow: var(--shadow-md);
}

.onprem-card-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--cyan-light-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cyan-primary);
  margin-bottom: 1rem;
}

.onprem-card-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: #2B2E31;
  margin-bottom: 0.5rem;
}

.onprem-card-desc {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.55;
}

/* --------------------------------------------------------------------------
   9. LEADERSHIP & DEPARK INNOVATION HUB
   -------------------------------------------------------------------------- */
.team-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

.founders-message-card {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid rgba(10, 127, 153, 0.28);
  border-radius: var(--radius-2xl);
  padding: 3rem 3.5rem;
  margin-bottom: 2.75rem;
  box-shadow: 0 20px 50px rgba(10, 127, 153, 0.06);
  position: relative;
  overflow: hidden;
}

.founders-message-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  bottom: 0;
  background: var(--cyan-gradient);
  border-radius: 4px 0 0 4px;
}

.founders-quote-icon {
  position: absolute;
  top: 1.75rem;
  right: 2.25rem;
  color: rgba(10, 127, 153, 0.12);
  width: 72px;
  height: 72px;
  pointer-events: none;
}

.founders-message-text {
  font-size: 1.075rem;
  color: #2c3e50;
  line-height: 1.85;
  margin-bottom: 2rem;
  position: relative;
  z-index: 2;
}

.founders-message-text p {
  margin-bottom: 1.15rem;
}

.founders-message-text p:last-child {
  margin-bottom: 0;
}

.founders-message-text strong {
  color: #2B2E31;
  font-weight: 700;
}

.founders-message-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(0, 0, 0, 0.07);
  padding-top: 1.5rem;
  gap: 1.5rem;
  position: relative;
  z-index: 2;
  flex-wrap: wrap;
}

.founders-info-block {
  display: flex;
  flex-direction: column;
}

.founders-names {
  font-size: 1.15rem;
  font-weight: 800;
  color: #2B2E31;
}

.founders-title-sub {
  font-size: 0.85rem;
  color: var(--cyan-deep);
  font-weight: 600;
  margin-top: 0.2rem;
}

.founders-action-block {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.founders-social-links {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
}

.founder-linkedin-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.85rem;
  background: #ffffff;
  border: 1px solid rgba(10, 127, 153, 0.25);
  border-radius: var(--radius-full);
  color: #2B2E31;
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
  transition: all var(--transition-fast);
}

.founder-linkedin-btn svg {
  color: #0077B5;
  transition: transform var(--transition-fast), color var(--transition-fast);
}

.founder-linkedin-btn:hover {
  background: #edf8fa;
  border-color: var(--cyan-primary);
  color: var(--cyan-deep);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(10, 127, 153, 0.16);
}

.founder-linkedin-btn:hover svg {
  transform: scale(1.15);
}

.founders-logo-wrap {
  display: flex;
  align-items: center;
}

.founders-brand-logo {
  width: 140px;
  max-width: 100%;
  height: auto;
  filter: drop-shadow(0 6px 18px rgba(10, 127, 153, 0.22));
  display: block;
  opacity: 0.95;
}

/* Mobile Specific: Vertical LinkedIn on Left, Logo on Right */
@media (max-width: 768px) {
  .founders-message-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 1.15rem;
    padding-top: 1.25rem;
  }

  .founders-info-block {
    width: 100%;
    text-align: left;
  }

  .founders-action-block {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 0.75rem;
  }

  .founders-social-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.45rem;
    margin-top: 0;
  }

  .founder-linkedin-btn {
    padding: 0.35rem 0.75rem;
    font-size: 0.775rem;
  }

  .founders-logo-wrap {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-shrink: 0;
  }

  .founders-brand-logo {
    width: 110px;
    max-width: 100%;
    height: auto;
  }
}

/* --------------------------------------------------------------------------
   9.5 CORE VALUES SHOWCASE (6 VALUES GRID)
   -------------------------------------------------------------------------- */
.values-section-box {
  margin-top: 3rem;
  margin-bottom: 3rem;
}

.values-grid-6 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2.25rem;
}

.value-card {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--radius-xl);
  padding: 2.25rem 2rem;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-normal);
  position: relative;
  overflow: hidden;
}

.value-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--cyan-gradient);
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.value-card:hover {
  transform: translateY(-5px);
  border-color: rgba(10, 127, 153, 0.4);
  box-shadow: 0 18px 45px rgba(10, 127, 153, 0.1);
}

.value-card:hover::before {
  opacity: 1;
}

.value-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.35rem;
}

.value-card-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--cyan-light-bg);
  border: 1px solid rgba(10, 127, 153, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cyan-primary);
  transition: transform var(--transition-fast);
}

.value-card:hover .value-card-icon {
  transform: scale(1.06);
}

.value-card-icon svg {
  width: 24px;
  height: 24px;
}

.value-card-num {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 900;
  color: var(--cyan-deep);
  opacity: 0.85;
  background: var(--cyan-light-bg);
  padding: 0.25rem 0.65rem;
  border-radius: var(--radius-sm);
}

.value-card-title {
  font-size: 1.2rem;
  font-weight: 800;
  color: #2B2E31;
  margin-bottom: 0.75rem;
  line-height: 1.35;
}

.value-card-desc {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.65;
  flex: 1;
}

.team-card {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--radius-xl);
  padding: 2.25rem;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-normal);
}

.team-card:hover {
  border-color: rgba(10, 127, 153, 0.3);
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.team-profile-header {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}

.team-name {
  font-size: 1.4rem;
  font-weight: 800;
  color: #2B2E31;
}

.team-role {
  font-size: 0.9rem;
  color: var(--cyan-deep);
  font-weight: 600;
}

.team-credentials-box {
  background: #f8fafc;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: var(--radius-md);
  padding: 1.1rem;
  margin-bottom: 1rem;
  font-size: 0.85rem;
}

.team-cred-title {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 0.4rem;
}

.depark-hub-banner {
  margin-top: 2.5rem;
  background: linear-gradient(135deg, #edf8fa 0%, #ffffff 50%, #f0f9ff 100%);
  border: 1px solid rgba(10, 127, 153, 0.25);
  border-radius: var(--radius-2xl);
  padding: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  box-shadow: 0 16px 40px rgba(10, 127, 153, 0.06);
}

.depark-hub-info {
  flex: 1;
}

.depark-tag-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--cyan-deep);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--cyan-light-bg);
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-full);
  border: 1px solid rgba(10, 127, 153, 0.2);
  margin-bottom: 0.75rem;
}

.depark-tag-badge svg {
  color: var(--cyan-primary);
}

.depark-title {
  font-size: 1.45rem;
  color: #2B2E31;
  font-weight: 800;
  margin-bottom: 0.5rem;
  line-height: 1.3;
}

.depark-desc {
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.55;
  max-width: 720px;
  margin-bottom: 1.25rem;
}

.depark-contact-details {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(10, 127, 153, 0.2);
  border-radius: var(--radius-lg);
  max-width: 720px;
}

.depark-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.88rem;
  line-height: 1.5;
  color: #2B2E31;
}

.depark-contact-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--cyan-light-bg);
  border: 1px solid rgba(10, 127, 153, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cyan-primary);
  flex-shrink: 0;
  margin-top: 1px;
}

.depark-contact-text strong {
  color: var(--cyan-deep);
  font-weight: 700;
  margin-right: 0.35rem;
}

.depark-email-link {
  color: var(--cyan-deep);
  font-weight: 600;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.depark-email-link:hover {
  color: var(--cyan-primary);
  text-decoration: underline;
}

.depark-directions-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.85rem;
  background: var(--cyan-primary);
  color: #ffffff !important;
  font-size: 0.8rem;
  font-weight: 700;
  border-radius: var(--radius-full);
  text-decoration: none;
  transition: all var(--transition-fast);
  box-shadow: 0 4px 12px rgba(10, 127, 153, 0.25);
  margin-top: 0.5rem;
  letter-spacing: 0.02em;
}

.depark-directions-btn:hover {
  background: var(--cyan-deep);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(10, 127, 153, 0.35);
  color: #ffffff !important;
  text-decoration: none;
}

.depark-directions-btn svg {
  transition: transform var(--transition-fast);
}

.depark-directions-btn:hover svg {
  transform: translateX(2px);
}

.depark-map-wrap {
  flex: 0 0 420px;
  width: 420px;
  max-width: 100%;
  min-height: 250px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid rgba(10, 127, 153, 0.25);
  box-shadow: 0 8px 24px rgba(10, 127, 153, 0.08);
  background: #f0f4f8;
  position: relative;
  align-self: stretch;
}

.depark-map-iframe {
  width: 100%;
  height: 100%;
  min-height: 250px;
  border: 0;
  display: block;
}

/* --------------------------------------------------------------------------
   10. BOOKING MODAL & TOASTS
   -------------------------------------------------------------------------- */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-normal);
}

.modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.modal-content {
  background: #ffffff;
  border: 1px solid rgba(10, 127, 153, 0.3);
  border-radius: var(--radius-xl);
  max-width: 560px;
  width: 100%;
  max-height: 96vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 1.5rem 1.75rem;
  position: relative;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.18);
  transform: scale(0.95);
  transition: transform var(--transition-normal);
}

.modal-overlay.active .modal-content {
  transform: scale(1);
}

.modal-header-compact {
  text-align: center;
  margin-bottom: 1rem;
}

.modal-title-compact {
  font-size: 1.35rem;
  color: #2B2E31;
  font-weight: 800;
  margin-top: 0.25rem;
  line-height: 1.25;
}

.modal-desc-compact {
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin-top: 0.2rem;
  line-height: 1.35;
}

.modal-close-btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #f1f5f9;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all var(--transition-fast);
  z-index: 5;
}

.modal-close-btn:hover {
  background: #e2e8f0;
  color: #2B2E31;
}

.form-row-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.form-group {
  margin-bottom: 0.65rem;
}

.form-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 0.25rem;
}

.form-control {
  width: 100%;
  padding: 0.52rem 0.8rem;
  background: #f8fafc;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: var(--radius-md);
  color: #2B2E31;
  font-size: 0.88rem;
  transition: all var(--transition-fast);
}

.form-control:focus {
  border-color: var(--cyan-primary);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(10, 127, 153, 0.15);
}

textarea.form-control {
  resize: none;
  min-height: 58px;
  max-height: 70px;
}

.mobile-menu-cta-item {
  display: none;
  width: 100%;
}

/* Toast */
.toast-container {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 3000;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.toast {
  padding: 0.9rem 1.4rem;
  background: #ffffff;
  border: 1px solid var(--cyan-primary);
  border-radius: var(--radius-md);
  color: #2B2E31;
  font-size: 0.9rem;
  font-weight: 500;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  animation: slideToast 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slideToast {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* --------------------------------------------------------------------------
   11. FOOTER (APPLE STYLE SITEMAP & BOTTOM BADGES)
   -------------------------------------------------------------------------- */
.site-footer {
  background: #f5f5f7;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  padding: var(--space-4xl) 0 var(--space-xl) 0;
  position: relative;
  z-index: 10;
}

.footer-top-grid {
  display: grid;
  grid-template-columns: 2fr 1.25fr 1.5fr;
  gap: 4rem;
  margin-bottom: var(--space-3xl);
}

.footer-brand-col p {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-top: 1rem;
  max-width: 340px;
  line-height: 1.6;
}

.footer-social-links {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.25rem;
  flex-wrap: wrap;
}

/* icon-only buttons; brand color on hover */
.footer-social-btn {
  --brand: var(--cyan-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: #ffffff;
  border: 1px solid rgba(10, 127, 153, 0.25);
  border-radius: 50%;
  color: var(--cyan-deep);
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: all var(--transition-fast);
}

.footer-social-btn--linkedin { --brand: #0A66C2; }
.footer-social-btn--x { --brand: #000000; }
.footer-social-btn--youtube { --brand: #FF0000; }
.footer-social-btn--instagram { --brand: #E4405F; }

.footer-social-btn svg {
  flex-shrink: 0;
  transition: transform var(--transition-fast);
}

.footer-social-btn:hover,
.footer-social-btn:focus-visible {
  background: #ffffff;
  border-color: var(--brand);
  color: var(--brand);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(10, 127, 153, 0.18);
}

.footer-social-btn:hover svg {
  transform: scale(1.1);
}

.footer-col-title {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #2B2E31;
  margin-bottom: 1.25rem;
}

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

.footer-link-item a {
  font-size: 0.875rem;
  color: var(--text-secondary);
  transition: color var(--transition-fast);
}

.footer-link-item a:hover {
  color: var(--cyan-primary);
}

.footer-bottom-bar {
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  padding-top: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.825rem;
  color: var(--text-tertiary);
  flex-wrap: wrap;
  gap: 1rem;
}


/* --------------------------------------------------------------------------
   NEXBEYAN — NEW PRODUCT (nav badge, hero slide visual, home summary)
   -------------------------------------------------------------------------- */
.nav-new-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.12rem 0.45rem;
  border-radius: var(--radius-full);
  background: var(--cyan-gradient);
  color: #ffffff;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.4;
  box-shadow: 0 2px 8px rgba(10, 127, 153, 0.35);
  vertical-align: middle;
}
.nav-item-new { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--cyan-deep); font-weight: 600; }
.footer-link-item .nav-new-badge { margin-left: 0.3rem; }
.hero-slide-badge .nav-new-badge { font-size: 0.6rem; }

/* Hero slide visual (built in HTML instead of a photo) */
.nbx-visual {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 85% 15%, rgba(14, 156, 184, 0.18) 0%, transparent 45%),
    linear-gradient(150deg, #ffffff 0%, #edf8fa 55%, #dff3f8 100%);
}
/* Home summary section */
.nexbeyan-home-section { padding-top: 1rem; }
.nbh-card {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 3rem;
  align-items: center;
  padding: 3.25rem;
  border-radius: var(--radius-2xl);
  background: linear-gradient(135deg, #ffffff 0%, #f5fbfd 60%, #e8f6fa 100%);
  border: 1px solid rgba(10, 127, 153, 0.25);
  box-shadow: 0 24px 60px rgba(10, 127, 153, 0.1);
  position: relative;
  overflow: hidden;
}
.nbh-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-bottom: 1.5rem; }
.nbh-new { font-size: 0.72rem; padding: 0.4rem 0.85rem; }
.nbh-logo { height: 58px; width: auto; margin-bottom: 1.25rem; }
.nbh-title { font-size: clamp(1.9rem, 3.4vw, 2.7rem); font-weight: 800; letter-spacing: -0.035em; margin-bottom: 1rem; }
.nbh-desc { font-size: 1.05rem; margin-bottom: 1.25rem; }
.nbh-points { list-style: none; display: grid; gap: 0.6rem; margin-bottom: 1.75rem; }
.nbh-points li { display: flex; gap: 0.65rem; align-items: flex-start; font-size: 0.95rem; color: var(--text-primary); font-weight: 500; }
.nbh-points i { width: 22px; height: 22px; border-radius: 50%; background: var(--cyan-light-bg); color: var(--cyan-deep); display: grid; place-items: center; flex-shrink: 0; margin-top: 0.1rem; }
.nbh-points i svg { width: 12px; height: 12px; }
.nbh-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.nbh-stages { list-style: none; display: grid; gap: 0.65rem; margin-bottom: 1.1rem; }
.nbh-stages li { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.2rem; background: #ffffff; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); font-weight: 600; color: #2B2E31; }
.nbh-stages b { font-family: var(--font-display); font-size: 1.35rem; font-weight: 800; color: var(--cyan-primary); min-width: 2.2rem; }
.nbh-stages em { margin-left: auto; font-style: normal; font-size: 0.64rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); background: var(--bg-surface-subtle); border: 1px solid var(--border-subtle); padding: 0.25rem 0.6rem; border-radius: var(--radius-full); white-space: nowrap; }
.nbh-stats {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: #ffffff;
  border: 1px solid rgba(10, 127, 153, 0.25);
  border-radius: var(--radius-md);
  box-shadow: 0 10px 28px rgba(0, 95, 115, 0.08);
  overflow: hidden;
}
.nbh-stats::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: var(--cyan-gradient);
}
.nbh-stats div { padding: 1.15rem 1.1rem 1rem; border-right: 1px solid rgba(10, 127, 153, 0.15); }
.nbh-stats div:last-child { border-right: none; }
.nbh-stats b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  background: linear-gradient(135deg, #0A7F99 0%, #0284c7 60%, #005f73 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.nbh-stats span { display: block; margin-top: 0.3rem; font-size: 0.78rem; font-weight: 600; line-height: 1.4; color: var(--text-secondary); }

/* Desktop header: keep 7 nav items + CTA on one line */
@media (min-width: 1025px) and (max-width: 1440px) {
  .nav-container { padding: 0 1.25rem; }
  .nav-links { gap: 0.95rem; }
  .nav-item-link { font-size: 0.8rem; }
  .header-actions { gap: 0.6rem; }
  .header-actions .btn-primary { padding: 0.55rem 1rem; font-size: 0.84rem; }
  .brand-logo-img { height: 44px; }
}
@media (min-width: 1025px) and (max-width: 1120px) {
  .nav-container { padding: 0 0.85rem; }
  .nav-links { gap: 0.45rem; }
  .nav-item-link { font-size: 0.72rem; letter-spacing: -0.02em; }
  .brand-logo-img { height: 36px; }
  .header-actions { gap: 0.4rem; }
  .header-actions .btn-primary { padding: 0.5rem 0.8rem; }
  .lang-switch-btn { padding: 0.35rem 0.6rem; }
}
@media (max-width: 1024px) {
  .nbh-card { grid-template-columns: 1fr; padding: 2.5rem; gap: 2rem; }
}
@media (max-width: 768px) {
  .nbh-card { padding: 1.75rem 1.25rem; border-radius: var(--radius-xl); }
  .nbh-actions .btn-primary, .nbh-actions .btn-secondary { width: 100%; }
  .nbh-stats b { font-size: 1.1rem; white-space: nowrap; }
  .nbh-stats div { padding: 0.95rem 0.7rem 0.85rem; }
  .nbh-stats span { font-size: 0.72rem; }
}

/* Header CTA: NexBeyan with NEW badge (replaces "Projenizi Konuşalım") */
.header-nexbeyan-btn { gap: 0.55rem; }
.header-new-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.1rem 0.45rem;
  border-radius: var(--radius-full);
  background: #ffffff;
  color: var(--cyan-deep);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.5;
}
@media (min-width: 1025px) {
  .nav-mobile-only { display: none; }
}
@media (min-width: 1025px) and (max-width: 1070px) {
  .header-new-badge { display: none; }
}

/* --------------------------------------------------------------------------
   NEXBEYAN HERO VISUAL — individual → corporate screening scenes
   Mirrors the console on /nexbeyan. Base styles are the resolved state;
   keyframes start from "pending", so each scene replays when it becomes
   .is-active (driven by js/nexbeyan-hero.js from the hero slider progress).
   -------------------------------------------------------------------------- */
@property --nbx-n { syntax: '<integer>'; inherits: false; initial-value: 0; }

.nbx-watermark { position: absolute; right: -50px; top: -30px; width: 300px; height: auto; opacity: 0.1; }
.nbx-console {
  position: absolute; left: 1.5rem; right: 1.5rem; top: 1.25rem;
  background: #ffffff; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  box-shadow: 0 18px 40px rgba(0, 95, 115, 0.14); overflow: hidden;
}
.nbx-bar { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.55rem 0.85rem; border-bottom: 1px solid var(--border-subtle); background: #fbfbfd; }
.nbx-bar-logo { height: 26px; width: auto; display: block; }
.nbx-seg { display: inline-flex; padding: 3px; border-radius: var(--radius-full); background: #eef0f3; gap: 2px; pointer-events: auto; }
.nbx-seg-btn { font-size: 0.7rem; font-weight: 700; color: var(--text-tertiary); padding: 0.22rem 0.7rem; border-radius: var(--radius-full); cursor: pointer; transition: all var(--transition-fast); }
.nbx-seg-btn.is-active { background: #ffffff; color: var(--cyan-deep); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); }
.nbx-scenes { display: grid; }
.nbx-scene { grid-area: 1 / 1; position: relative; overflow: hidden; display: grid; gap: 0.5rem; padding: 0.75rem; opacity: 0; visibility: hidden; transform: translateX(12px); transition: opacity 0.45s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.45s; }
.nbx-scene.is-active { opacity: 1; visibility: visible; transform: none; }
.nbx-cycle { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--cyan-gradient); transform-origin: left center; transform: scaleX(var(--nbx-cycle, 0)); }

.nbx-cust { display: flex; align-items: center; gap: 0.65rem; padding: 0 0.15rem; }
.nbx-av { width: 34px; height: 34px; border-radius: 10px; background: var(--cyan-light-bg); color: var(--cyan-deep); display: grid; place-items: center; font-weight: 800; font-size: 0.8rem; flex-shrink: 0; }
.nbx-name { display: flex; flex-direction: column; font-weight: 700; color: #2B2E31; font-size: 0.86rem; line-height: 1.25; }
.nbx-name small, .nbx-risk small { font-weight: 500; font-size: 0.7rem; color: var(--text-tertiary); }
.nbx-risk { margin-left: auto; text-align: right; display: flex; flex-direction: column; }
.nbx-risk b { display: grid; justify-items: end; color: var(--emerald-success); font-size: 1.15rem; font-weight: 800; line-height: 1.1; }
.nbx-risk b > span { grid-area: 1 / 1; }
.nbx-risk-pend { color: var(--text-tertiary); font-size: 0.9rem; opacity: 0; align-self: center; }
.nbx-risk-val { border-radius: 8px; }

.nbx-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
.nbx-tile { position: relative; overflow: hidden; padding: 0.55rem 0.75rem 0.65rem; border-radius: 10px; background: linear-gradient(135deg, #f5fbfd 0%, #edf8fa 100%); border: 1px solid rgba(10, 127, 153, 0.18); }
.nbx-tile b { display: block; font-family: var(--font-display); font-size: 1.45rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; color: var(--cyan-deep); }
.nbx-tile > span { display: block; margin-top: 0.1rem; font-size: 0.7rem; font-weight: 600; color: var(--text-secondary); line-height: 1.3; }
.nbx-tile-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--cyan-gradient); transform-origin: left center; }
.nbx-count { counter-reset: nbxn var(--nbx-n); }
.nbx-count::after { content: counter(nbxn); }

.nbx-row { position: relative; display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.7rem; border-radius: 10px; background: var(--bg-surface-subtle); font-size: 0.8rem; color: var(--text-secondary); }
.nbx-row i { position: relative; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: rgba(5, 150, 105, 0.12); color: var(--emerald-success); flex-shrink: 0; }
.nbx-row i svg { position: relative; z-index: 1; width: 12px; height: 12px; }
.nbx-spin { position: absolute; inset: 2px; border-radius: 50%; border: 2px solid rgba(10, 127, 153, 0.2); border-top-color: var(--cyan-primary); opacity: 0; }
.nbx-row em { margin-left: auto; font-style: normal; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--emerald-success); display: inline-grid; justify-items: end; }
.nbx-row em > span { grid-area: 1 / 1; }
.nbx-pend { color: var(--text-tertiary); opacity: 0; }
.nbx-scan { position: absolute; left: 0; right: 0; top: 0; height: 56px; pointer-events: none; opacity: 0; z-index: 2; background: linear-gradient(180deg, transparent 0%, rgba(14, 156, 184, 0.08) 70%, rgba(10, 127, 153, 0.3) 100%); border-bottom: 1px solid rgba(10, 127, 153, 0.5); }

/* scene timeline */
.nbx-scene.is-active .nbx-cust { animation: nbxIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; }
.nbx-scene.is-active .nbx-scan { animation: nbxScan 2.3s cubic-bezier(0.45, 0, 0.55, 1) 0.35s both; }
.nbx-scene.is-active .nbx-tile { animation: nbxIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) calc(0.15s + var(--i) * 0.1s) both; }
.nbx-scene.is-active .nbx-tile-bar { animation: nbxBar 1.8s cubic-bezier(0.33, 1, 0.68, 1) 0.4s both; }
.nbx-scene.is-active .nbx-count-10 { animation: nbxCount10 1.8s cubic-bezier(0.33, 1, 0.68, 1) 0.4s both; }
.nbx-scene.is-active .nbx-count-25 { animation: nbxCount25 1.8s cubic-bezier(0.33, 1, 0.68, 1) 0.4s both; }
.nbx-scene.is-active .nbx-count-500 { animation: nbxCount500 1.8s cubic-bezier(0.33, 1, 0.68, 1) 0.4s both; }
.nbx-scene.is-active .nbx-row { animation: nbxIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) calc(0.25s + var(--d) * 0.1s) both, nbxFlash 0.9s ease-out calc(0.9s + var(--d) * 0.45s) both; }
.nbx-scene.is-active .nbx-spin { animation: nbxSpin 0.7s linear infinite, nbxHide 0.2s ease calc(0.9s + var(--d) * 0.45s) both; }
.nbx-scene.is-active .nbx-row i { animation: nbxDotPending 0.3s ease calc(0.9s + var(--d) * 0.45s) both; }
.nbx-scene.is-active .nbx-row i svg,
.nbx-scene.is-active .nbx-done { animation: nbxPop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) calc(0.9s + var(--d) * 0.45s) both; }
.nbx-scene.is-active .nbx-pend { animation: nbxHold calc(0.9s + var(--d) * 0.45s) linear both; }
.nbx-scene.is-active .nbx-risk-pend { animation: nbxHold 2.75s linear both, nbxBlink 1s ease-in-out infinite; }
.nbx-scene.is-active .nbx-risk-val { animation: nbxPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 2.75s both, nbxGlow 1.4s ease-out 2.85s both; }

@keyframes nbxIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes nbxScan { 0% { transform: translateY(-56px); opacity: 0; } 12% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateY(300px); opacity: 0; } }
@keyframes nbxSpin { to { transform: rotate(360deg); } }
@keyframes nbxHide { from { opacity: 1; } to { opacity: 0; } }
@keyframes nbxHold { 0%, 99.9% { opacity: 1; } 100% { opacity: 0; } }
@keyframes nbxPop { 0% { opacity: 0; transform: scale(0.5); } 70% { opacity: 1; transform: scale(1.12); } 100% { opacity: 1; transform: scale(1); } }
@keyframes nbxDotPending { from { background: #ececf0; color: transparent; } }
@keyframes nbxFlash { 0% { background: rgba(5, 150, 105, 0.14); } 100% { background: var(--bg-surface-subtle); } }
@keyframes nbxBlink { 0%, 100% { color: var(--text-tertiary); } 50% { color: var(--cyan-primary); } }
@keyframes nbxGlow { 0% { box-shadow: 0 0 0 0 rgba(5, 150, 105, 0.35); } 100% { box-shadow: 0 0 0 12px rgba(5, 150, 105, 0); } }
@keyframes nbxBar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes nbxCount10 { from { --nbx-n: 0; } to { --nbx-n: 10; } }
@keyframes nbxCount25 { from { --nbx-n: 0; } to { --nbx-n: 25; } }
@keyframes nbxCount500 { from { --nbx-n: 0; } to { --nbx-n: 500; } }

/* fit the shrinking hero card heights (410 → 380 → 320 → 250 → 210px) */
@media (max-width: 1024px) {
  .nbx-cust { display: none; }
}
@media (max-width: 768px) {
  .nbx-console { left: 0.9rem; right: 0.9rem; top: 0.9rem; }
  .nbx-bar { padding: 0.45rem 0.7rem; }
  .nbx-bar-logo { height: 20px; }
  .nbx-scene { padding: 0.55rem; gap: 0.4rem; }
  .nbx-row-2 { display: none; }
  .nbx-tile b { font-size: 1.2rem; }
}
@media (max-width: 480px) {
  .nbx-row { display: none; }
  .nbx-console { left: 0.75rem; right: 0.75rem; top: 0.7rem; }
  .nbx-bar { padding: 0.35rem 0.6rem; }
  .nbx-bar-logo { height: 16px; }
  .nbx-seg-btn { font-size: 0.64rem; padding: 0.18rem 0.55rem; }
  .nbx-scene { padding: 0.45rem; }
  .nbx-tile { padding: 0.4rem 0.55rem 0.5rem; }
  .nbx-tile b { font-size: 1.05rem; }
  .nbx-tile > span { font-size: 0.62rem; }
}
/* Live status pill — fills the free bottom-left corner on narrow screens,
   where the floating caption badge is hidden. Synced with each scene. */
.nbx-status {
  display: none;
  position: absolute; left: 0.9rem; bottom: 1.15rem; z-index: 6;
  align-items: center;
  padding: 0.45rem 0.85rem; border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.95); border: 1px solid rgba(10, 127, 153, 0.25);
  box-shadow: 0 6px 18px rgba(0, 95, 115, 0.12);
  font-size: 0.75rem; font-weight: 600; color: var(--text-secondary);
}
.nbx-status > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 0.45rem; white-space: nowrap; }
.nbx-status-pend { opacity: 0; }
.nbx-status-spin { width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgba(10, 127, 153, 0.2); border-top-color: var(--cyan-primary); animation: nbxSpin 0.7s linear infinite; }
.nbx-status-done i { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: rgba(5, 150, 105, 0.12); color: var(--emerald-success); }
.nbx-status-done i svg { width: 10px; height: 10px; }
.nbx-status-done b { color: var(--emerald-success); font-weight: 800; }
.nbx-status.is-run .nbx-status-pend { animation: nbxHold 2.75s linear both; }
.nbx-status.is-run .nbx-status-done { animation: nbxPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 2.75s both; }
@media (max-width: 768px) {
  .nbx-status { display: inline-grid; }
}
/* 381–480px: the card is still 250px tall, so keep the first scan row */
@media (min-width: 381px) and (max-width: 480px) {
  .nbx-scene .nbx-row:not(.nbx-row-2) { display: flex; padding: 0.4rem 0.6rem; font-size: 0.74rem; }
}

@media (prefers-reduced-motion: reduce) {
  .nbx-visual *, .nbx-visual *::after { animation: none !important; transition: none !important; }
}

/* --------------------------------------------------------------------------
   PRODUCT HERO SLIDER (nexage-web-taslak design) — markup built by js/hero-slider.js
   -------------------------------------------------------------------------- */
.nxs-section { position: relative; margin-top: var(--header-height); padding-bottom: 8px; font-family: var(--font-body); }
.nxs-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.nxs-wrap { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
.nxs-stage { position: relative; height: 660px; overflow: hidden; background: var(--night); }
.nxs-slide { position: absolute; inset: 0; }
.nxs-photo { position: absolute; inset: 0; overflow: hidden; animation: nxsFade .9s ease both; }
.nxs-photo img { width: 100%; height: 100%; object-fit: cover; display: block; max-width: none; animation: nxsKb linear both; }
.nxs-scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7,18,23,.94) 0%, rgba(7,18,23,.82) 34%, rgba(7,18,23,.35) 62%, rgba(7,18,23,.10) 100%); }
.nxs-slide--light .nxs-scrim { background: linear-gradient(90deg, rgba(7,18,23,.86) 0%, rgba(7,18,23,.62) 36%, rgba(7,18,23,.14) 60%, rgba(7,18,23,0) 100%); }
.nxs-slide--light .nxs-scrim-b { height: 150px; background: linear-gradient(0deg, rgba(7,18,23,.6), rgba(7,18,23,0)); }
.nxs-scrim-b { position: absolute; left: 0; right: 0; bottom: 0; height: 200px; background: linear-gradient(0deg, rgba(7,18,23,.75), rgba(7,18,23,0)); }
.nxs-inner { position: relative; height: 100%; padding-bottom: 96px; display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.nxs-copy { max-width: 680px; display: flex; flex-direction: column; gap: 18px; color: #fff; }
.nxs-chip { display: inline-flex; align-self: flex-start; align-items: center; gap: 10px; padding: 7px 14px 7px 8px; border-radius: 999px; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.22); }
.nxs-chip i { width: 30px; height: 30px; border-radius: 50%; background: var(--cyan); color: #062026; display: flex; align-items: center; justify-content: center; }
.nxs-chip b { font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #CFF3FA; }
.nxs-copy h2 { margin: 0; font-family: var(--font-display); font-size: 68px; line-height: 1; font-weight: 900; letter-spacing: -.025em; color: #fff; }
.nxs-tagline { margin: 0; font-family: var(--font-display); font-size: 27px; line-height: 1.22; font-weight: 800; color: var(--cyan-l); }
.nxs-desc { margin: 0; font-size: 18px; line-height: 1.6; color: #D3DDE1; }
.nxs-bullets { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.nxs-bullets span { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; }
.nxs-bullets svg { display: inline-block; }
.nxs-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.nxs-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 54px; padding: 0 26px; border-radius: 999px; font-family: inherit; font-weight: 800; font-size: 16px; cursor: pointer; transition: opacity var(--transition-fast); }
.nxs-btn:hover { opacity: .92; }
.nxs-btn-cyan { background: var(--cyan); color: #062026; }
.nxs-btn-line { background: transparent; border: 1.5px solid rgba(255,255,255,.5); color: #fff; }
.nxs-side { flex: none; width: 340px; display: flex; flex-direction: column; gap: 14px; animation: nxsSide .8s .45s cubic-bezier(.2,.7,.2,1) both; }
.nxs-glass { background: rgba(7,18,23,.62); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.18); color: #fff; }
.nxs-stat { align-self: flex-end; border-radius: 18px; padding: 14px 18px; display: flex; flex-direction: column; gap: 2px; }
.nxs-stat strong { font-family: var(--font-display); font-size: 34px; font-weight: 900; color: var(--cyan-l); }
.nxs-stat span { font-size: 13px; color: #D3DDE1; }
.nxs-ui { border-radius: 20px; overflow: hidden; }
.nxs-ui-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 16px; border-bottom: 1px solid rgba(255,255,255,.12); }
.nxs-ui-head b { font-family: var(--font-display); font-weight: 800; font-size: 14px; }
.nxs-live { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; color: #7EE2C2; }
.nxs-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #7EE2C2; }
.nxs-ui-rows { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 7px; }
.nxs-ui-row { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 11px; background: rgba(255,255,255,.07); }
.nxs-badge { flex: none; min-width: 54px; text-align: center; font-size: 11px; font-weight: 800; padding: 3px 7px; border-radius: 6px; }
.nxs-badge.w { background: #F5A524; color: #2A1A00; }
.nxs-badge.c { background: var(--cyan); color: #062026; }
.nxs-badge.m { background: #55626A; color: #fff; }
.nxs-ui-row span:last-child { font-size: 13px; font-weight: 700; line-height: 1.35; color: #F1F6F8; }
.nxs-up { animation: nxsUp .7s cubic-bezier(.2,.7,.2,1) both; }

.nxs-controls { position: absolute; top: 28px; left: 0; right: 0; pointer-events: none; }
.nxs-controls .nxs-wrap { display: flex; justify-content: flex-end; align-items: center; gap: 10px; pointer-events: auto; }
.nxs-counter { font-family: var(--font-display); font-size: 15px; font-weight: 800; color: #fff; margin-right: 8px; }
.nxs-round { width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); background: rgba(7,18,23,.45); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }

.nxs-thumbs { position: relative; margin-top: -82px; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.nxs-thumb { position: relative; display: flex; flex-direction: column; padding: 0; border: 0; border-radius: 16px; overflow: hidden; cursor: pointer; font: inherit; text-align: left; background: #fff; box-shadow: 0 6px 16px rgba(10,40,50,.10); transition: transform .35s, box-shadow .35s; }
.nxs-pic { position: relative; display: block; height: 86px; overflow: hidden; background: var(--night); }
.nxs-pic img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .72; transition: opacity .35s; }
.nxs-pic i { position: absolute; left: 10px; bottom: 8px; width: 30px; height: 30px; border-radius: 9px; background: #fff; color: var(--brand); display: flex; align-items: center; justify-content: center; }
.nxs-txt { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px 14px; }
.nxs-txt b { font-family: var(--font-display); font-size: 15px; font-weight: 800; color: var(--ink); }
.nxs-txt small { font-size: 12px; color: var(--text-tertiary); }
.nxs-bar { position: absolute; left: 0; bottom: 0; height: 4px; width: 0; background: var(--frame); }
.nxs-thumb[aria-selected="true"] { transform: translateY(-8px); box-shadow: 0 18px 40px rgba(10,60,75,.28); }
.nxs-thumb[aria-selected="true"] .nxs-pic img { opacity: 1; }

@keyframes nxsKb { from { transform: scale(1.02) translate3d(0,0,0); } to { transform: scale(1.14) translate3d(-2%,-1.5%,0); } }
@keyframes nxsFade { from { opacity: 0; } to { opacity: 1; } }
/* starts at .01 instead of 0: looks the same, but lets the browser count the slide text as painted (faster LCP) */
@keyframes nxsUp { from { opacity: .01; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes nxsSide { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .nxs-photo, .nxs-photo img, .nxs-side, .nxs-up { animation: none !important; } }

@media (max-width: 960px) {
  .nxs-side { display: none; }
  .nxs-copy h2 { font-size: 50px; }
  .nxs-tagline { font-size: 22px; }
}
@media (max-width: 720px) {
  .nxs-wrap { padding-left: 16px; padding-right: 16px; }
  .nxs-stage { height: auto; min-height: 860px; }
  .nxs-slide { position: relative; min-height: 860px; }
  .nxs-scrim { background: linear-gradient(0deg, rgba(7,18,23,.95) 0%, rgba(7,18,23,.8) 55%, rgba(7,18,23,.35) 100%); }
  .nxs-inner { height: auto; min-height: 860px; align-items: flex-end; padding-top: 84px; padding-bottom: 110px; }
  .nxs-copy h2 { font-size: 40px; }
  .nxs-desc { font-size: 16px; }
  .nxs-controls { top: 16px; }
  .nxs-thumbs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: -60px; }
  .nxs-pic { height: 60px; }
  .nxs-txt small { display: none; }
  .nxs-txt b { font-size: 13px; }
}

/* Slider extras: sector tags next to the chip, expert badge */
.nxs-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.nxs-sector { display: inline-flex; align-items: center; min-height: 32px; padding: 0 11px; border-radius: 999px; background: rgba(63,192,218,.16); border: 1px solid rgba(111,211,232,.45); color: #E6F8FC; font-size: 13px; font-weight: 800; }
.nxs-expert { display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; margin: 0; padding: 8px 14px; border-radius: 12px; background: rgba(255,255,255,.10); border-left: 3px solid var(--cyan); color: #fff; font-size: 16px; font-weight: 800; }
.nxs-expert svg { flex: none; color: var(--cyan); }
@media (max-width: 720px) {
  .nxs-sector { font-size: 12px; min-height: 28px; }
  .nxs-expert { font-size: 14px; }
}

/* Slider: NexBeyan sector cards (automotive / jewelry), each with details + free test */
.nxs-sectors { flex-basis: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 640px; }
.nxs-sc { padding: 14px; border-radius: 18px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.nxs-sc-h { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.nxs-sc-h i { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; background: rgba(111,224,245,.18); color: #6FE0F5; }
.nxs-sc-h span { display: flex; flex-direction: column; min-width: 0; }
.nxs-sc-h b { font: 800 17px/1.2 var(--font-display); color: #fff; }
.nxs-sc-h small { font-size: 13px; font-weight: 600; color: rgba(255,255,255,.74); }
.nxs-sc-a { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.nxs-sc-d { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 10px; background: #6FE0F5; color: #06202B; font: 800 14px var(--font-display); text-decoration: none; transition: background .2s, transform .2s; }
.nxs-sc-d:hover { background: #8FEAFA; color: #06202B; transform: translateY(-1px); }
.nxs-sc-t { font: 800 13.5px var(--font-display); color: #FBBF24; text-decoration: none; }
.nxs-sc-t:hover { color: #FCD34D; text-decoration: underline; }
.nxs-sc-d:focus-visible, .nxs-sc-t:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
@media (max-width: 560px) { .nxs-sectors { grid-template-columns: 1fr; gap: 8px; } .nxs-sc { padding: 12px; } .nxs-sc-h { margin-bottom: 10px; } }

/* Slider: real product screenshot inside the glass panel (NexSales) */
.nxs-shot { display: block; width: 100%; height: auto; max-width: none; }

/* ---------- HOME OVERVIEW (four areas + agent characters) ---------- */
.ov-section { background: linear-gradient(180deg, #F3F8FA 0%, #ffffff 100%); padding-top: 1.75rem; padding-bottom: 3.5rem; }
.ov-head { margin-top: 2.5rem; margin-bottom: 2rem; }
.ov-card { display: block; position: relative; background: #fff; border: 1px solid rgba(10,127,153,.16); border-radius: var(--radius-2xl, 24px); padding: 1.75rem 1.75rem 1.5rem; text-decoration: none; color: inherit; box-shadow: 0 12px 34px rgba(10,60,75,.08); transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, border-color .35s; overflow: hidden; }
.ov-card:hover { transform: translateY(-5px); box-shadow: 0 26px 60px rgba(10,60,75,.16); border-color: rgba(10,127,153,.4); }
.ov-card h3 { font-family: var(--font-display); font-size: 1.35rem; font-weight: 800; color: #2B2E31; margin: 0 0 .5rem; }
.ov-card p { color: var(--text-secondary); font-size: 1rem; line-height: 1.6; margin: 0 0 1rem; }
.ov-more { display: inline-flex; align-items: center; gap: .4rem; font-weight: 800; color: var(--cyan-deep, #0A7F99); font-size: .95rem; }
.ov-more svg { transition: transform .3s; } .ov-card:hover .ov-more svg { transform: translateX(4px); }
.ov-icon { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--cyan-light-bg, #EEF8FA); color: var(--cyan-deep, #0A7F99); margin-bottom: 1.1rem; }
.ov-icon svg { width: 26px; height: 26px; }
.ov-agents { display: flex; justify-content: space-between; gap: .25rem; }
.ov-agent { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; text-decoration: none; color: #2B2E31; font-weight: 800; font-size: .74rem; line-height: 1.2; }
.ov-agent img { width: 100%; max-width: 104px; height: auto; display: block; margin-bottom: .35rem; filter: drop-shadow(0 10px 14px rgba(10,60,75,.14)); transition: transform .35s cubic-bezier(.2,.7,.2,1); transform-origin: 50% 90%; }
.ov-agent:hover img { transform: translateY(-8px) rotate(-3deg) scale(1.06); }
@keyframes ovBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.ov-agent:hover img { animation: none !important; }
.ov-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
@media (prefers-reduced-motion: reduce) { .ov-agent img, .ov-card { transition: none; animation: none !important; } }
.ov-stage h3 a { color: inherit; text-decoration: none; } 
/* agents: open stage (no card) */
.ov-stage { text-align: center; margin: 0; }
.ov-stage-copy { max-width: 820px; margin: 0 auto .25rem; display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: .35rem 1rem; }
.ov-stage h3 { font-family: var(--font-display); font-size: 1.45rem; font-weight: 800; color: #2B2E31; margin: 0 0 .5rem; }
.ov-stage-copy h3 { flex-basis: 100%; }
.ov-stage h3 a:hover { color: var(--cyan-deep, #0A7F99); }
.ov-stage p { color: var(--text-secondary); font-size: 1rem; line-height: 1.5; margin: 0; }
.ov-stage .ov-agents { position: relative; display: flex; justify-content: center; align-items: flex-end; gap: .4rem; padding: .5rem 0 1rem; }
.ov-stage .ov-agents::before { content: ""; position: absolute; left: 6%; right: 6%; bottom: 1.1rem; height: 70px; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(10,127,153,.16) 0%, rgba(10,127,153,0) 70%); pointer-events: none; }
.ov-stage .ov-agent { flex: 0 1 124px; font-size: .8rem; }
.ov-stage .ov-agent img { max-width: 118px; filter: drop-shadow(0 14px 16px rgba(10,60,75,.16)); }
.ov-stage .ov-agent:nth-child(2n) img { transform: translateY(6px); }
.ov-stage .ov-agent:nth-child(2n):hover img { transform: translateY(-4px) rotate(-3deg) scale(1.06); }
.ov-stage:hover .ov-agent:nth-child(odd) img { animation: ovBob 1.8s ease-in-out infinite; }
.ov-stage:hover .ov-agent:nth-child(even) img { animation: ovBob2 1.8s ease-in-out -0.9s infinite; }
@keyframes ovBob2 { 0%,100% { transform: translateY(6px); } 50% { transform: translateY(0); } }

/* short desktop viewports: tighter slider so the agents row lands in the first screen */
@media (min-width: 641px) { .nxs-stage { height: clamp(620px, calc(100vh - 460px), 660px); } }
@media (min-width: 641px) and (max-height: 1000px) { .nxs-inner { padding-bottom: 64px; } }
@media (min-width: 641px) and (max-height: 960px) { .ov-section { padding-top: 1rem; } .ov-stage p { display: none; } .ov-stage .ov-agent img { max-width: 92px; } .ov-stage .ov-agents { padding-top: .25rem; } }

/* modules strip (under agents) */
.ov-mods { margin-top: 1.25rem; }
.ov-modules { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem .5rem; padding: .75rem 0 .5rem; }
.ov-mod { flex: 0 0 88px; display: flex; flex-direction: column; align-items: center; text-align: center; text-decoration: none; color: #2B2E31; font-weight: 800; font-size: .74rem; line-height: 1.2; }
.ov-mod img { width: 84px; height: 84px; display: block; margin-bottom: .1rem; transition: transform .35s cubic-bezier(.2,.7,.2,1); transform-origin: 50% 85%; }
.ov-mod:hover img { transform: translateY(-6px) scale(1.1); }
.ov-grid { grid-template-columns: repeat(2, 1fr); max-width: 980px; margin: 0 auto; }

/* agent cards: character + detail link */
.agent-card-char { width: 72px; height: auto; margin: -0.4rem 0 0.6rem; filter: drop-shadow(0 8px 12px rgba(10,60,75,.14)); transition: transform .35s cubic-bezier(.2,.7,.2,1); transform-origin: 50% 90%; }
.agent-showcase-card:hover .agent-card-char { transform: translateY(-6px) rotate(-3deg) scale(1.06); }
.agent-card-link { display: inline-flex; align-items: center; gap: .35rem; margin-top: auto; padding-top: .9rem; font-size: .85rem; font-weight: 800; color: var(--cyan-deep, #0A7F99); text-decoration: none; }
.agent-card-link svg { transition: transform .3s; } .agent-card-link:hover svg { transform: translateX(4px); }

/* ---------- HOME: agent carousel + module cards ---------- */
.ovc-tag { display: block; font-size: .78rem; font-weight: 800; letter-spacing: .12em; color: var(--cyan-deep, #0A7F99); margin-bottom: .5rem; }
.ovc-title { font-family: var(--font-display); font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 900; letter-spacing: -.02em; color: #2B2E31; margin: 0 0 .4rem; }
.ovc-sub { color: var(--text-secondary); font-size: 1.05rem; margin: 0; }
.ovc-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; margin-bottom: 1.5rem; }
.ovc-nav { display: flex; align-items: center; gap: .6rem; flex: none; }
.ovc-count { font-weight: 800; font-size: .9rem; color: var(--text-secondary); margin-right: .25rem; white-space: nowrap; }
.ovc-btn { width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(10,127,153,.3); background: #fff; color: var(--cyan-deep, #0A7F99); display: grid; place-items: center; cursor: pointer; transition: background .25s, color .25s, opacity .25s, transform .25s; box-shadow: 0 6px 16px rgba(10,60,75,.08); }
.ovc-btn:hover:not(:disabled) { background: var(--cyan-deep, #0A7F99); color: #fff; transform: translateY(-1px); }
.ovc-btn:disabled { opacity: .35; cursor: default; }
.ovc-track { --gap: 1.25rem; display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * var(--gap)) / 4); gap: var(--gap); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding: .5rem .25rem 1.25rem; margin: -.5rem -.25rem 0; scroll-padding-left: .25rem; outline: none; }
.ovc-track::-webkit-scrollbar { display: none; }
.ovc-card { scroll-snap-align: start; display: flex; flex-direction: column; background: #fff; border: 1px solid rgba(10,127,153,.14); border-radius: 20px; padding: 1.25rem 1.25rem 1.1rem; box-shadow: 0 10px 28px rgba(10,60,75,.07); transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, border-color .35s; }
.ovc-card:hover { transform: translateY(-4px); box-shadow: 0 22px 46px rgba(10,60,75,.14); border-color: rgba(10,127,153,.35); }
.ovc-char { display: block; width: 118px; height: auto; margin: 0 auto .6rem; filter: drop-shadow(0 12px 14px rgba(10,60,75,.16)); transition: transform .35s cubic-bezier(.2,.7,.2,1); transform-origin: 50% 90%; }
.ovc-card:hover .ovc-char { transform: translateY(-6px) rotate(-3deg); }
.ovc-card h3 { font-family: var(--font-display); font-size: 1.2rem; font-weight: 800; color: #2B2E31; margin: 0 0 .4rem; }
.ovc-card p { font-size: .92rem; line-height: 1.55; color: var(--text-secondary); margin: 0 0 .9rem; flex: 1; }
.ovc-task { background: var(--cyan-light-bg, #EEF8FA); border: 1px solid rgba(10,127,153,.14); border-radius: 12px; padding: .65rem .8rem; margin-bottom: .9rem; min-height: 96px; box-sizing: border-box; }
.ovc-task small { display: block; font-size: .66rem; font-weight: 800; letter-spacing: .1em; color: var(--cyan-deep, #0A7F99); margin-bottom: .25rem; }
.ovc-task span { font-size: .88rem; color: #2B2E31; font-weight: 600; }
.ovc-link { display: inline-flex; align-items: center; gap: .4rem; font-weight: 800; font-size: .92rem; color: var(--cyan-deep, #0A7F99); text-decoration: none; }
.ovc-link svg, .ovc-all svg, .ovm-arrow svg { transition: transform .3s; }
.ovc-link:hover svg, .ovc-all:hover svg { transform: translateX(4px); }
.ovc-more { display: flex; justify-content: center; margin-top: 1rem; }
.ovc-all { display: inline-flex; align-items: center; gap: .5rem; padding: .8rem 1.6rem; border-radius: 999px; border: 1.5px solid var(--cyan-deep, #0A7F99); background: #fff; color: var(--cyan-deep, #0A7F99); font: inherit; font-weight: 800; font-size: .95rem; text-decoration: none; cursor: pointer; transition: background .25s, color .25s; }
.ovc-all:hover { background: var(--cyan-deep, #0A7F99); color: #fff; }
.ov-banner { margin: 2.5rem 0; padding: 1.3rem 1.5rem; border-radius: 16px; background: linear-gradient(90deg, #E6F5F9, #F3FAFC); border: 1px solid rgba(10,127,153,.16); text-align: center; font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; color: #2B2E31; }
.ovm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.5rem; }
.ovm-card { display: grid; grid-template-columns: 64px 1fr auto; gap: 1rem; align-items: center; padding: 1rem 1.1rem; background: #fff; border: 1px solid rgba(10,127,153,.14); border-radius: 16px; text-decoration: none; color: inherit; transition: transform .3s, box-shadow .3s, border-color .3s; }
.ovm-card:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(10,60,75,.12); border-color: rgba(10,127,153,.35); }
.ovm-card.is-extra { display: none; }
.ovm.is-open .ovm-card.is-extra { display: grid; animation: ovmIn .4s ease both; }
@keyframes ovmIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.ovm-icon { width: 64px; height: 64px; border-radius: 16px; background: var(--cyan-light-bg, #EEF8FA); display: grid; place-items: center; }
.ovm-icon img { width: 50px; height: 50px; transition: transform .3s; } .ovm-card:hover .ovm-icon img { transform: scale(1.1) translateY(-2px); }
.ovm-text b { display: block; font-family: var(--font-display); font-weight: 800; font-size: 1.02rem; color: #2B2E31; margin-bottom: .2rem; }
.ovm-text small { display: block; font-size: .85rem; line-height: 1.45; color: var(--text-secondary); }
.ovm-arrow { color: var(--cyan-deep, #0A7F99); } .ovm-card:hover .ovm-arrow svg { transform: translateX(4px); }
.ovm-hide { display: none; } .ovm.is-open .ovm-hide { display: inline; } .ovm.is-open .ovm-show { display: none; }
.ovm.is-open .ovm-toggle svg { transform: rotate(-90deg); }
.ovm:not(.is-open) .ovm-toggle svg { transform: rotate(90deg); }
@media (max-width: 1100px) { .ovc-track { grid-auto-columns: calc((100% - 2 * var(--gap)) / 3); } .ovm-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .ovc-track { grid-auto-columns: calc((100% - var(--gap)) / 2); } .ovc-head { flex-direction: column; align-items: flex-start; } .ovc-nav { align-self: flex-end; } }
@media (max-width: 560px) { .ovc-track { grid-auto-columns: 84%; } .ovm-grid { grid-template-columns: 1fr; } .ov-banner { font-size: 1rem; } }
@media (prefers-reduced-motion: reduce) { .ovc-track { scroll-behavior: auto; } }

/* ---------- HOME: services rows (between agents and modules) ---------- */
.ovs { margin-top: 2.75rem; }
.svA-chip { display: inline-block; font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--cyan-deep, #0A7F99); background: var(--cyan-light-bg, #EEF8FA); border-radius: 999px; padding: .3rem .65rem; white-space: nowrap; }
.svD { display: grid; gap: .6rem; }
.svD-row { display: grid; grid-template-columns: 44px 48px 1fr auto 20px; gap: 1rem; align-items: center; padding: 1rem 1.2rem; background: #fff; border: 1px solid rgba(10,127,153,.14); border-radius: 16px; text-decoration: none; color: inherit; transition: transform .3s, box-shadow .3s, border-color .3s; }
.svD-row:hover { transform: translateX(4px); box-shadow: 0 14px 30px rgba(10,60,75,.1); border-color: rgba(10,127,153,.35); }
.svD-num { font-family: var(--font-display); font-weight: 900; font-size: 1.3rem; color: rgba(10,127,153,.35); }
.svD-ic { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; background: var(--cyan-light-bg, #EEF8FA); color: var(--cyan-deep, #0A7F99); border: 1px solid rgba(10,127,153,.18); }
.svD-ic svg { width: 22px; height: 22px; }
.svD-body { min-width: 0; }
.svD-body b { display: block; font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; color: #2B2E31; margin-bottom: .15rem; }
.svD-body span { display: block; font-size: .9rem; color: var(--text-secondary); line-height: 1.45; }
.svD-arrow { color: var(--cyan-deep, #0A7F99); } .svD-arrow svg { transition: transform .3s; } .svD-row:hover .svD-arrow svg { transform: translateX(4px); }
@media (max-width: 900px) { .svD-row { grid-template-columns: 44px 1fr 20px; } .svD-row .svD-num, .svD-row .svA-chip { display: none; } }
@media (max-width: 560px) { .svD-row { padding: .9rem 1rem; gap: .75rem; } .svD-body span { font-size: .85rem; } }

/* ---------- HOME: engineering bento (after modules) ---------- */
.ove { margin-top: 2.75rem; }
.egB { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(150px, auto); gap: 1rem; }
.egB-hero { grid-column: span 2; grid-row: span 2; position: relative; border-radius: 22px; overflow: hidden; text-decoration: none; color: #fff; min-height: 320px; box-shadow: 0 14px 34px rgba(10,60,75,.14); }
.egB-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 45% 50%; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.egB-hero:hover img { transform: scale(1.04); }
.egB-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,18,23,.1) 30%, rgba(7,18,23,.88) 100%); }
.egB-hero-txt { position: absolute; left: 1.4rem; right: 1.4rem; bottom: 1.3rem; z-index: 1; display: grid; gap: .4rem; }
.egB-hero-txt b { font-family: var(--font-display); font-size: 1.6rem; font-weight: 900; }
.egB-hero-txt small { font-size: .9rem; opacity: .9; }
.egB-chip { background: rgba(255,255,255,.18) !important; color: #fff !important; justify-self: start; }
.egB-link { color: #fff !important; }
.egB-card { display: flex; flex-direction: column; gap: .35rem; background: #fff; border: 1px solid rgba(10,127,153,.14); border-radius: 18px; padding: 1.1rem 1.15rem; text-decoration: none; color: inherit; transition: transform .3s, box-shadow .3s, border-color .3s; }
.egB-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(10,60,75,.12); border-color: rgba(10,127,153,.35); }
.egB-ic { width: 42px; height: 42px; border-radius: 12px; background: var(--cyan-light-bg, #EEF8FA); color: var(--cyan-deep, #0A7F99); border: 1px solid rgba(10,127,153,.18); display: grid; place-items: center; margin-bottom: .3rem; }
.egB-ic svg { width: 20px; height: 20px; }
.egB-card b { font-family: var(--font-display); font-weight: 800; font-size: 1rem; color: #2B2E31; }
.egB-card small { font-size: .82rem; color: var(--text-secondary); }
.egB-card ul { margin: .3rem 0 0; padding-left: 1rem; font-size: .78rem; color: var(--text-tertiary); line-height: 1.45; }
@media (max-width: 1100px) { .egB { grid-template-columns: 1fr 1fr; } .egB-hero { grid-column: span 2; grid-row: span 1; min-height: 260px; } }
@media (max-width: 640px) { .egB { grid-template-columns: 1fr; } .egB-hero { grid-column: span 1; min-height: 220px; } .egB-hero-txt b { font-size: 1.3rem; } }

/* ---------- HOME: engagement models band (after engineering) ---------- */
.bmC { margin-top: 2.75rem; display: grid; grid-template-columns: 1fr 1.1fr; gap: 2.5rem; align-items: center; background: linear-gradient(135deg, #0A3C4B, #0A7F99); border-radius: 26px; padding: 2.5rem; color: #fff; box-shadow: 0 24px 60px rgba(10,60,75,.25); }
.bmC .ovc-tag { color: #8FE3F3; } .bmC .ovc-title { color: #fff; } .bmC .ovc-sub { color: rgba(255,255,255,.82); }
.bmC-seg { display: inline-flex; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); border-radius: 999px; padding: .3rem; margin-top: 1.25rem; }
.bmC-seg button { border: 0; background: transparent; color: #fff; font: inherit; font-weight: 800; padding: .6rem 1.2rem; border-radius: 999px; cursor: pointer; transition: background .25s, color .25s; }
.bmC-seg button.is-on { background: #fff; color: var(--cyan-deep, #0A7F99); }
.bmC-panel { background: #fff; color: #2B2E31; border-radius: 20px; padding: 1.75rem; min-height: 340px; }
.bmC-detail { display: none; } .bmC-detail.is-on { display: block; animation: ovmIn .35s ease both; }
.bmC-detail small { font-size: .68rem; font-weight: 800; letter-spacing: .08em; color: var(--cyan-deep, #0A7F99); }
.bmC-detail h3 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; margin: .4rem 0 .5rem; color: #2B2E31; }
.bmC-detail p { color: var(--text-secondary); line-height: 1.6; margin: 0 0 1rem; }
.svB-points { list-style: none; padding: 0; margin: 0 0 1.4rem; display: grid; gap: .45rem; }
.svB-points li { padding-left: 1.4rem; position: relative; font-size: .95rem; color: #2B2E31; }
.svB-points li::before { content: "✓"; position: absolute; left: 0; color: var(--cyan-deep, #0A7F99); font-weight: 900; }
.nx-btn { display: inline-flex; align-items: center; gap: .5rem; }
@media (max-width: 960px) { .bmC { grid-template-columns: 1fr; padding: 1.75rem; gap: 1.5rem; } .bmC-panel { min-height: 0; padding: 1.4rem; } .bmC-seg button { white-space: nowrap; padding: .55rem .9rem; font-size: .9rem; } }

/* ---------- HOME: closed-loop / on-premise AI (after engagement models) ---------- */
.ovp { margin-top: 2.75rem; }
.op-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: .9rem 0; }
.op-chips span { font-size: .74rem; font-weight: 800; padding: .32rem .7rem; border-radius: 999px; background: var(--cyan-light-bg, #EEF8FA); color: var(--cyan-deep, #0A7F99); border: 1px solid rgba(10,127,153,.2); }
.opC { display: grid; grid-template-columns: 1fr 1.15fr; gap: 1.5rem; align-items: stretch; }
.opC-photo { position: relative; border-radius: 22px; overflow: hidden; min-height: 420px; box-shadow: 0 14px 34px rgba(10,60,75,.14); }
.opC-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.opC-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,18,23,.1), rgba(7,18,23,.8)); }
.opC-badge { position: absolute; top: 1rem; left: 1rem; z-index: 1; display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .8rem; border-radius: 999px; background: rgba(7,18,23,.6); color: #fff; font-size: .8rem; font-weight: 800; backdrop-filter: blur(6px); }
.opC-badge i { width: 8px; height: 8px; border-radius: 50%; background: #3DD6A3; box-shadow: 0 0 0 4px rgba(61,214,163,.25); }
.opC-chips { position: absolute; left: 1rem; right: 1rem; bottom: 1rem; z-index: 1; margin: 0; }
.opC-chips span { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.35); }
.opC-list { display: grid; gap: .75rem; align-content: start; }
.opC-list .btn-primary { justify-self: start; margin-top: .4rem; }
.opB-row { display: grid; grid-template-columns: 48px 1fr; gap: 1rem; align-items: start; background: #fff; border: 1px solid rgba(10,127,153,.14); border-radius: 16px; padding: 1rem 1.1rem; }
.opB-ic { width: 48px; height: 48px; border-radius: 14px; background: var(--cyan-light-bg, #EEF8FA); color: var(--cyan-deep, #0A7F99); border: 1px solid rgba(10,127,153,.18); display: grid; place-items: center; }
.opB-ic svg { width: 22px; height: 22px; }
.opB-row b { display: block; font-family: var(--font-display); font-weight: 800; font-size: 1rem; color: #2B2E31; margin-bottom: .2rem; }
.opB-row span { font-size: .88rem; line-height: 1.5; color: var(--text-secondary); }
@media (max-width: 960px) { .opC { grid-template-columns: 1fr; } .opC-photo { min-height: 260px; } }

/* ---------- HOME: NexBeyan sector switcher ---------- */
.nb-tags { display: flex; gap: .5rem; align-items: center; margin-bottom: 1rem; }
.nb-new { font-size: .7rem; font-weight: 800; letter-spacing: .08em; padding: .35rem .8rem; border-radius: 999px; background: var(--cyan-deep, #0A7F99); color: #fff; }
.nb-ctas { display: flex; flex-wrap: wrap; gap: .75rem; }
.nbB { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: center; }
.nbB .nbh-logo { height: 52px; width: auto; margin-bottom: 1rem; }
.nbB .ovc-title { margin-bottom: .6rem; } .nbB .ovc-sub { margin-bottom: .6rem; }
.nbB-seg { margin: .4rem 0 1rem; background: var(--cyan-light-bg, #EEF8FA); border: 1px solid rgba(10,127,153,.25); }
.nbB-seg button { color: var(--cyan-deep, #0A7F99); } .nbB-seg button.is-on { background: var(--cyan-deep, #0A7F99); color: #fff; }
.nbB-media { position: relative; border-radius: 24px; overflow: hidden; min-height: 460px; box-shadow: 0 20px 50px rgba(10,60,75,.18); }
.nbB-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s; }
.nbB-img.is-on { opacity: 1; }
.nbB-float { position: absolute; right: 1.1rem; top: 1.1rem; background: rgba(7,18,23,.72); color: #fff; border-radius: 16px; padding: .9rem 1.1rem; backdrop-filter: blur(8px); max-width: 240px; }
.nbB-float b { display: block; font-family: var(--font-display); font-size: 1.5rem; font-weight: 900; color: #8FE3F3; }
.nbB-float span { font-size: .78rem; opacity: .85; }
.nbB-float2 { top: auto; bottom: 1.1rem; left: 1.1rem; right: auto; display: flex; align-items: center; gap: .6rem; max-width: none; }
.nbB-float2 b { font-size: .9rem; color: #fff; }
.nbB-float2 i { width: 10px; height: 10px; border-radius: 50%; background: #3DD6A3; box-shadow: 0 0 0 4px rgba(61,214,163,.25); }
@media (max-width: 960px) { .nbB { grid-template-columns: 1fr; gap: 1.5rem; } .nbB-media { min-height: 320px; } .nbB-seg button { white-space: nowrap; padding: .5rem .8rem; font-size: .85rem; } }

/* ---------- HOME: closing CTA band ---------- */
.ctA { background: linear-gradient(135deg, #0A3C4B, #0A7F99 70%, #0E9CB8); border-radius: 26px; padding: 3.5rem 2rem; text-align: center; color: #fff; box-shadow: 0 24px 60px rgba(10,60,75,.25); position: relative; overflow: hidden; }
.ctA::before { content: ""; position: absolute; inset: -40% -20% auto auto; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle, rgba(143,227,243,.35), transparent 65%); }
.ctA-in { position: relative; max-width: 720px; margin: 0 auto; }
.ctA .ovc-tag { color: #8FE3F3; }
.ctA .ovc-title { color: #fff; font-size: clamp(2rem, 4vw, 3rem); margin: .4rem 0 .6rem; }
.ctA .ovc-title .gradient-text-brand { color: #8FE3F3; background: none; -webkit-text-fill-color: #8FE3F3; }
.ctA .ovc-sub { color: rgba(255,255,255,.85); margin-bottom: 1.4rem; }
.ctA-ctas { justify-content: center; }
.ctA-btn { background: #fff !important; color: var(--cyan-deep, #0A7F99) !important; border-color: #fff !important; font: inherit; font-weight: 800; cursor: pointer; }
.ctA-ghost { border-color: rgba(255,255,255,.6); color: #fff; background: transparent; }
.ctA-ghost:hover { background: rgba(255,255,255,.12); color: #fff; }
.ctA-trust { margin: 1.4rem 0 0; font-size: .82rem; color: rgba(255,255,255,.7); }
@media (max-width: 640px) { .ctA { padding: 2.5rem 1.25rem; } }

/* --------------------------------------------------------------------------
   HERO SLIDER · BANNER LAYOUT (rounded banner, short copy, dots)
   js/hero-slider.js adds .nxs-bn to #hero-slider
   -------------------------------------------------------------------------- */
.nxs-bn { --nxs-ov: 82px; --nxs-h: clamp(470px, 38vw, 530px); padding-top: 20px; padding-bottom: 0; }
.nxs-bn .nxs-stage { max-width: 1176px; margin: 0 auto; height: var(--nxs-h); border-radius: 24px; box-shadow: 0 18px 40px rgba(7,18,26,.18); isolation: isolate; }
.nxs-bn .nxs-scrim { background: linear-gradient(90deg, rgba(6,20,36,.94) 0%, rgba(6,20,36,.82) 30%, rgba(6,20,36,.35) 56%, rgba(6,20,36,0) 76%); }
.nxs-bn .nxs-slide--light .nxs-scrim { background: linear-gradient(90deg, rgba(6,20,36,.92) 0%, rgba(6,20,36,.74) 30%, rgba(6,20,36,.2) 54%, rgba(6,20,36,0) 72%); }
.nxs-bn .nxs-slide--shot .nxs-scrim { background: linear-gradient(90deg, rgba(6,20,36,.95) 0%, rgba(6,20,36,.86) 40%, rgba(6,20,36,.6) 100%); }
.nxs-bn-copy { position: absolute; left: 0; top: 0; bottom: 0; z-index: 2; display: flex; flex-direction: column; justify-content: center; max-width: min(590px, 58%); padding: 0 0 calc(var(--nxs-ov) + 10px) clamp(28px, 4.4vw, 60px); color: #fff; }
.nxs-ey { margin: 0 0 12px; font-family: var(--font-display); font-weight: 800; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: #7EE0F2; }
.nxs-bh { margin: 0 0 12px; font-family: var(--font-display); font-weight: 900; font-size: clamp(34px, 3.7vw, 54px); line-height: 1.05; letter-spacing: -.015em; color: #fff; }
.nxs-bs { margin: 0 0 24px; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.45; color: rgba(255,255,255,.88); }
.nxs-bn .nxs-actions { align-items: center; gap: 18px; margin-top: 0; }
.nxs-bb { display: inline-flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 22px; border: 0; border-radius: 12px; background: #6FE0F5; color: #06202B; font-family: var(--font-display); font-weight: 800; font-size: 16px; cursor: pointer; box-shadow: 0 10px 24px rgba(111,224,245,.28); transition: transform .2s, background .2s; }
.nxs-bb:hover { background: #8FEAFA; transform: translateY(-2px); color: #06202B; }
.nxs-bl { padding: 0 0 2px; border: 0; border-bottom: 1px solid rgba(255,255,255,.4); background: none; color: rgba(255,255,255,.9); font: inherit; font-weight: 700; font-size: 15px; cursor: pointer; }
.nxs-bl:hover { color: #fff; border-bottom-color: #fff; }
.nxs-bot { position: absolute; z-index: 2; right: clamp(28px, 4vw, 56px); top: calc(50% - var(--nxs-ov) / 2); width: min(40%, 480px); transform: translateY(-50%) rotate(-1.2deg); background: #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 26px 60px rgba(0,0,0,.4), 0 0 0 6px rgba(255,255,255,.08); animation: nxsBot .8s .3s cubic-bezier(.2,.7,.2,1) both; }
.nxs-bot img { display: block; width: 100%; height: auto; max-width: none; }
@keyframes nxsBot { from { opacity: 0; transform: translateY(-46%) rotate(-1.2deg); } to { opacity: 1; transform: translateY(-50%) rotate(-1.2deg); } }
.nxs-bn .nxs-controls { display: none; }
.nxs-bn .nxs-stage { cursor: grab; user-select: none; -webkit-user-select: none; }
.nxs-bn .nxs-stage.is-dragging { cursor: grabbing; }
.nxs-bn .nxs-stage img { -webkit-user-drag: none; }

.nxs-bn .nxs-thumbs { margin-top: calc(var(--nxs-ov) * -1); padding: 0 18px; }
.nxs-bn .nxs-thumb[aria-selected="true"] { transform: translateY(-4px); }
@media (prefers-reduced-motion: reduce) { .nxs-bot { animation: none; } }
@media (max-width: 1240px) { .nxs-bn .nxs-stage { margin: 0 32px; } }
@media (max-width: 960px) { .nxs-bot { display: none; } .nxs-bn .nxs-slide--shot .nxs-scrim { background: linear-gradient(90deg, rgba(6,20,36,.94) 0%, rgba(6,20,36,.8) 40%, rgba(6,20,36,.3) 100%); } .nxs-bn-copy { max-width: 70%; } }
@media (max-width: 720px) {
  .nxs-bn { --nxs-ov: 60px; padding-top: 12px; }
  .nxs-bn .nxs-stage { margin: 0 16px; height: auto; min-height: 580px; border-radius: 20px; }
  .nxs-bn .nxs-slide { position: absolute; min-height: 0; }
  .nxs-bn .nxs-scrim, .nxs-bn .nxs-slide--light .nxs-scrim, .nxs-bn .nxs-slide--shot .nxs-scrim { background: linear-gradient(0deg, rgba(6,20,36,.96) 0%, rgba(6,20,36,.82) 48%, rgba(6,20,36,.15) 82%); }
  .nxs-bn .nxs-bn-copy { top: auto; max-width: none; padding: 0 22px calc(var(--nxs-ov) + 26px); }
  .nxs-bn .nxs-thumbs { padding: 0 10px; }
  .nxs-bn .nxs-controls { display: none; }
  .nxs-bh { font-size: 32px; }
  .nxs-bs { font-size: 16px; margin-bottom: 20px; }
}

/* --------------------------------------------------------------------------
   AI AGENTS PAGE · definition, how it works, why, FAQ (SEO / GEO)
   -------------------------------------------------------------------------- */
.agx-section { padding-top: 1rem; padding-bottom: 1.5rem; }
.agx-def { max-width: 860px; margin: 0 auto 2.4rem; text-align: center; }
.agx-h { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1.2; color: #2B2E31; margin: .2rem 0 .8rem; letter-spacing: -.01em; }
.agx-h2 { text-align: center; margin-bottom: 1.4rem; }
.agx-lead { font-size: 1.12rem; line-height: 1.65; color: var(--text-secondary); margin: 0; }
.agx-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; counter-reset: agx; }
.agx-step { position: relative; background: #fff; border: 1px solid rgba(10,127,153,.16); border-radius: 22px; padding: 1.5rem 1.4rem 1.3rem; box-shadow: 0 12px 30px rgba(10,60,75,.06); }
.agx-step + .agx-step::before { content: ""; position: absolute; left: -1.2rem; top: 2.2rem; width: 1.2rem; height: 2px; background: linear-gradient(90deg, rgba(10,127,153,.15), rgba(10,127,153,.5)); }
.agx-num { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg, #0A7F99, #0E9CB8); color: #fff; font: 900 1.05rem var(--font-display); margin-bottom: .9rem; box-shadow: 0 8px 18px rgba(10,127,153,.25); }
.agx-step h3 { font-family: var(--font-display); font-weight: 900; font-size: 1.2rem; color: #2B2E31; margin: 0 0 .45rem; }
.agx-step p { font-size: .96rem; line-height: 1.6; color: var(--text-secondary); margin: 0 0 1rem; }
.agx-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.agx-chips span { font-size: .76rem; font-weight: 800; padding: .28rem .65rem; border-radius: 999px; background: var(--cyan-light-bg, #EEF8FA); color: var(--cyan-deep, #0A7F99); border: 1px solid rgba(10,127,153,.18); }
.agx-bottom { padding-top: 2.5rem; }
.agx-two { display: grid; grid-template-columns: 1fr 1.25fr; gap: 2.5rem; align-items: start; }
.agx-why ul { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .8rem; }
.agx-why li { display: flex; gap: .7rem; align-items: flex-start; font-size: 1rem; line-height: 1.55; color: #3A4247; }
.agx-why li svg { flex: none; width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: #E3F6EA; color: #157347; margin-top: 1px; }
.agx-q { border: 1px solid rgba(10,127,153,.16); border-radius: 16px; background: #fff; margin-bottom: .6rem; transition: border-color .2s, box-shadow .2s; }
.agx-q[open] { border-color: rgba(10,127,153,.4); box-shadow: 0 10px 24px rgba(10,60,75,.07); }
.agx-q summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 1.2rem; font-family: var(--font-display); font-weight: 800; font-size: 1.02rem; color: #2B2E31; }
.agx-q summary::-webkit-details-marker { display: none; }
.agx-q summary::after { content: "+"; flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--cyan-light-bg, #EEF8FA); color: #0A7F99; font-size: 1.2rem; font-weight: 700; transition: transform .2s; }
.agx-q[open] summary::after { transform: rotate(45deg); }
.agx-q p { margin: 0; padding: 0 1.2rem 1.1rem; font-size: .97rem; line-height: 1.6; color: var(--text-secondary); }
@media (max-width: 900px) { .agx-steps, .agx-two { grid-template-columns: 1fr; } .agx-step + .agx-step::before { display: none; } }

/* --------------------------------------------------------------------------
   AI AGENT PLATFORM FLOW (js/agent-flow.js) · inputs -> platform -> outputs
   -------------------------------------------------------------------------- */
.afl { position: relative; display: grid; grid-template-columns: 200px minmax(0, 1fr) 200px; gap: 2.6rem; align-items: center; background: #fff; border: 1px solid rgba(10,127,153,.16); border-radius: 26px; padding: 1.6rem; box-shadow: 0 18px 44px rgba(10,40,55,.08); }
.afl-wires { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 0; }
.afl-wires path { fill: none; stroke: rgba(10,127,153,.2); stroke-width: 1.6; transition: stroke .3s; }
.afl-wires path.hot { stroke: rgba(14,156,184,.8); stroke-width: 2.2; }
.afl-wires circle { fill: #0E9CB8; }
.afl-col, .afl-mid { position: relative; z-index: 1; }
.afl-lbl { margin: 0 0 .6rem; font: 800 11px var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: #0A7F99; }
.afl-lbl-c { margin: 1rem 0 .55rem; text-align: center; }
.afl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .42rem; }
.afl-ch { display: flex; align-items: center; gap: .55rem; padding: .5rem .7rem; border-radius: 12px; background: #F6FAFB; border: 1px solid rgba(10,127,153,.16); font: 800 12.5px var(--font-display); color: #3A4247; transition: transform .35s, box-shadow .35s, background-color .35s, color .35s; }
.afl-ch svg { width: 19px; height: 19px; flex: none; color: #0A7F99; transition: color .35s; }
.afl-ch.on { background-color: #0A7F99; border-color: #0A7F99; color: #fff; transform: translateX(3px); box-shadow: 0 10px 22px rgba(10,127,153,.3); }
.afl-out.on { transform: translateX(-3px); }
.afl-ch.on svg { color: #fff; }
.afl-core { position: relative; display: flex; gap: 1rem; align-items: center; padding: 1.2rem 1.4rem; border-radius: 22px; color: #fff; background: linear-gradient(120deg, #0B2B4F, #16357a 55%, #2a2f86); box-shadow: 0 20px 44px rgba(22,53,122,.3); overflow: hidden; }
.afl-core::after { content: ""; position: absolute; top: -60%; right: -10%; width: 380px; height: 380px; border-radius: 50%; border: 1px solid rgba(255,255,255,.12); pointer-events: none; }
.afl-ic { position: relative; flex: none; width: 58px; height: 58px; border-radius: 16px; display: grid; place-items: center; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); }
.afl-ic svg { width: 32px; height: 32px; color: #9fe6f5; }
.afl-ic::before { content: ""; position: absolute; inset: -6px; border-radius: 20px; border: 2px solid rgba(111,224,245,.55); animation: aflPulse 2.4s ease-out infinite; }
@keyframes aflPulse { 0% { opacity: .9; transform: scale(.92); } 100% { opacity: 0; transform: scale(1.25); } }
.afl-h { margin: 0; font: 900 clamp(1.15rem, 1.9vw, 1.6rem)/1.15 var(--font-display); color: #fff; }
.afl-sub { margin: .2rem 0 0; font: 800 13.5px var(--font-display); color: #bfe9f4; }
.afl-tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .55rem; }
.afl-tags span { font: 800 11.5px var(--font-display); padding: .25rem .6rem; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); transition: background-color .3s, color .3s; }
.afl-tags span.on { background-color: #6FE0F5; color: #06202B; border-color: #6FE0F5; }
.afl-ags { display: grid; grid-template-columns: repeat(5, 1fr); gap: .45rem; }
.afl-ag { display: flex; flex-direction: column; align-items: center; text-align: center; padding: .5rem .3rem .55rem; border-radius: 14px; background: #F7FBFC; border: 1px solid rgba(10,127,153,.16); border-top: 3px solid var(--c, #0A7F99); text-decoration: none; color: #2B2E31; transition: transform .35s, box-shadow .35s, background-color .35s; }
.afl-ag img { width: 42px; height: auto; filter: drop-shadow(0 8px 8px rgba(10,60,75,.15)); transition: transform .35s; }
.afl-ag b { font: 900 11.5px/1.2 var(--font-display); margin-top: .2rem; }
.afl-ag:hover, .afl-ag.on { background-color: #fff; transform: translateY(-4px); box-shadow: 0 14px 28px rgba(10,60,75,.14); color: #2B2E31; }
.afl-ag:hover img, .afl-ag.on img { transform: translateY(-3px) scale(1.06); }
.afl-layers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 1.2rem; }
.afl-layer { background: #fff; border: 1px solid rgba(10,127,153,.16); border-radius: 18px; padding: 1.1rem 1.2rem 1.2rem; }
.afl-layer b { display: flex; align-items: center; gap: .55rem; font: 900 1.02rem var(--font-display); color: #2B2E31; margin-bottom: .4rem; }
.afl-layer b i { font-style: normal; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: linear-gradient(135deg, #0A7F99, #0E9CB8); color: #fff; font-size: .85rem; }
.afl-layer p { margin: 0; font-size: .93rem; line-height: 1.55; color: var(--text-secondary); }
@media (max-width: 1100px) { .afl-layers { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px) {
  .afl { grid-template-columns: minmax(0, 1fr); gap: 1.2rem; padding: 1.1rem; }
  .afl-list { grid-template-columns: 1fr 1fr; }
  .afl-ags { grid-template-columns: repeat(2, 1fr); }
  .afl-core { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 560px) { .afl-layers { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .afl-ic::before { animation: none; } }

/* --------------------------------------------------------------------------
   MODULAR SOLUTIONS PAGE · hero, comparison, benefits, FAQ
   -------------------------------------------------------------------------- */
.mdx-hero { position: relative; padding: 3rem 0 2rem; background: linear-gradient(180deg, #F7FBFD 0%, #ffffff 100%); overflow: hidden; }
.mdx-hero-in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 3rem; align-items: center; }
.mdx-tag { display: inline-block; font: 800 12.5px var(--font-display); letter-spacing: .18em; text-transform: uppercase; color: #0C768E; background: #EAF6FA; border: 1px solid rgba(14,140,168,.25); border-radius: 999px; padding: .55rem 1.1rem; }
.mdx-h1 { margin: 1.1rem 0 1rem; font-family: var(--font-display); font-weight: 900; font-size: clamp(2.6rem, 5.4vw, 4.6rem); line-height: 1.02; letter-spacing: -.035em; color: #1B1D1F; }
.mdx-grad { background: linear-gradient(90deg, #22B0CF, #1B7FC4); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mdx-sub { margin: 0 0 1.6rem; font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.55; color: #4A5257; max-width: 640px; }
.mdx-sub b { color: #1B1D1F; font-weight: 800; }
.mdx-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; max-width: 640px; }
.mdx-kpi { background: #fff; border: 1px solid #E3ECEF; border-radius: 22px; padding: 1.2rem 1.3rem; box-shadow: 0 10px 26px rgba(10,40,55,.06); }
.mdx-kpi b { display: block; font: 900 2.6rem/1 var(--font-display); color: #1EA0BF; margin-bottom: .45rem; }
.mdx-kpi b.mdx-kt { font-size: 1.45rem; letter-spacing: -.02em; }
.mdx-kpi span { font-weight: 700; color: #4A5257; font-size: .98rem; }
.mdx-vis { position: relative; }
.mdx-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .9rem; padding: 1.4rem; border-radius: 28px; background: radial-gradient(circle at 50% 50%, rgba(34,176,207,.12), transparent 70%), #fff; border: 1px solid #E3ECEF; box-shadow: 0 24px 60px rgba(10,40,55,.08); }
.mdx-ico { display: grid; place-items: center; aspect-ratio: 1; border-radius: 18px; background: #F6FAFB; border: 1px solid #E8F0F3; animation: mdxFloat 4.2s ease-in-out infinite; animation-delay: var(--d, 0s); }
.mdx-ico img { width: 72%; height: auto; filter: drop-shadow(0 8px 10px rgba(10,60,75,.14)); }
@keyframes mdxFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.mdx-core { position: absolute; left: 50%; bottom: -20px; transform: translateX(-50%); display: flex; align-items: center; gap: .5rem; padding: .7rem 1.1rem; border-radius: 999px; color: #fff; background: linear-gradient(120deg, #0B2B4F, #1B7FC4); box-shadow: 0 16px 36px rgba(22,53,122,.35), 0 0 0 8px rgba(255,255,255,.85); font: 900 14px var(--font-display); white-space: nowrap; }
.mdx-core svg { width: 18px; height: 18px; color: #9fe6f5; }
.mdx-core b { color: #fff; }
.mdx-sec { padding-top: 2rem; }
.mdx-tw { overflow-x: auto; margin: 0 auto 2rem; max-width: 1000px; border-radius: 20px; border: 1px solid rgba(10,127,153,.16); background: #fff; box-shadow: 0 12px 30px rgba(10,60,75,.06); }
.mdx-cmp { width: 100%; border-collapse: collapse; min-width: 620px; }
.mdx-cmp th, .mdx-cmp td { padding: .95rem 1.1rem; text-align: left; vertical-align: top; font-size: .96rem; line-height: 1.5; border-bottom: 1px solid #EDF3F5; }
.mdx-cmp tbody tr:last-child th, .mdx-cmp tbody tr:last-child td { border-bottom: 0; }
.mdx-cmp thead th { font: 900 .95rem var(--font-display); color: #2B2E31; background: #F7FAFB; }
.mdx-cmp tbody th { font: 800 .95rem var(--font-display); color: #2B2E31; width: 22%; }
.mdx-cmp td { color: var(--text-secondary); }
.mdx-cmp .mdx-yes { background: rgba(14,156,184,.06); color: #0A3C4B; font-weight: 700; }
.mdx-cmp thead .mdx-yes { background: linear-gradient(90deg, #0A7F99, #0E9CB8); color: #fff; }
.mdx-bens { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; max-width: 1000px; margin: 0 auto 2.6rem; }
.mdx-ben { background: #fff; border: 1px solid rgba(10,127,153,.16); border-radius: 22px; padding: 1.4rem 1.5rem; box-shadow: 0 12px 30px rgba(10,60,75,.06); }
.mdx-ben-h { display: flex; align-items: center; gap: .7rem; margin-bottom: .9rem; }
.mdx-ben-ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: linear-gradient(135deg, #0A7F99, #0E9CB8); color: #fff; }
.mdx-ben-ic svg { width: 21px; height: 21px; }
.mdx-ben h3 { margin: 0; font: 900 1.2rem var(--font-display); color: #2B2E31; }
.mdx-ben ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.mdx-ben li { display: flex; gap: .65rem; align-items: flex-start; font-size: .97rem; line-height: 1.55; color: #3A4247; }
.mdx-ben li svg { flex: none; width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: #E3F6EA; color: #157347; margin-top: 1px; }
.mdx-faq { max-width: 860px; margin: 0 auto; }
.mdx-faq > .section-tag, .mdx-faq > .agx-h { display: block; text-align: center; }
.mdx-faq > .section-tag { width: max-content; margin: 0 auto; }
@media (max-width: 960px) { .mdx-hero-in { grid-template-columns: 1fr; gap: 2rem; } .mdx-vis { max-width: 520px; } }
@media (max-width: 640px) {
  .mdx-hero { padding-top: 1.6rem; }
  .mdx-tag { font-size: 10.5px; letter-spacing: .12em; padding: .45rem .8rem; }
  .mdx-kpis { grid-template-columns: 1fr 1fr; gap: .7rem; }
  .mdx-kpi { padding: 1rem; } .mdx-kpi b { font-size: 2.1rem; } .mdx-kpi b.mdx-kt { font-size: 1.17rem; }
  .mdx-grid { gap: .55rem; padding: 1rem; }
  .mdx-bens { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .mdx-ico { animation: none; } }
#moduller-nedir { padding-bottom: .5rem; }
#moduller-nedir .mdx-bens { margin-bottom: 0; }
#moduller-nedir + .bento-section { padding-top: 3rem; }
.mdx-sec-faq { padding-top: 1rem; }

/* --------------------------------------------------------------------------
   SERVICES PAGE · FinOps, AI gateway, on-prem AI showcases (js/services-detail.js)
   -------------------------------------------------------------------------- */

.hx-sc{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:3rem;align-items:center;padding:4rem 0;border-bottom:1px solid #EEF3F5}
.hx-sc.rev .hx-sc-copy{order:2}
.hx-tag{display:inline-block;font:800 12px var(--font-display);letter-spacing:.18em;text-transform:uppercase;color:#0A7A93;background:#EAF6FA;border:1px solid rgba(14,140,168,.25);border-radius:999px;padding:.5rem 1rem}
.hx-h2{margin:1rem 0 .9rem;font-family:var(--font-display);font-weight:900;font-size:clamp(2.2rem,4.2vw,3.6rem);line-height:1.03;letter-spacing:-.035em;color:#1B1D1F}.hx-h2 em{font-style:normal;background:linear-gradient(90deg,#22B0CF,#1B7FC4);-webkit-background-clip:text;background-clip:text;color:transparent}.hx-h2 em.v{background:linear-gradient(90deg,#4F46E5,#1FA6C6);-webkit-background-clip:text;background-clip:text}
.hx-lead{font-size:clamp(1.02rem,1.4vw,1.22rem);line-height:1.55;color:#4A5257;margin:0 0 1rem}.hx-lead b{color:#1B1D1F}
.hx-def{font-size:.93rem;line-height:1.6;color:#4A5257;background:#F6FAFB;border-left:3px solid #1FA6C6;border-radius:0 12px 12px 0;padding:.75rem 1rem;margin:0 0 1.3rem}.hx-def b{color:#1B1D1F}
.hx-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem}.hx-kpi{background:#fff;border:1px solid #E3ECEF;border-radius:20px;padding:1rem 1.1rem;box-shadow:0 10px 24px rgba(10,40,55,.05)}.hx-kpi b{display:block;font:900 1.7rem/1.05 var(--font-display);color:#1797B5;letter-spacing:-.02em;margin-bottom:.35rem}.hx-kpi.v b{color:#4F46E5}.hx-kpi span{font-size:.88rem;font-weight:700;color:#4A5257}
.hx-vis{position:relative;background:#fff;border:1px solid #E3ECEF;border-radius:28px;padding:1.1rem;box-shadow:0 24px 60px rgba(10,40,55,.09)}
.hx-card{background:#fff;border:1px solid #EAF0F2;border-radius:18px;padding:1rem 1.1rem}
.hx-cap{font:800 10.5px var(--font-display);letter-spacing:.16em;text-transform:uppercase;color:#66747D;margin:0 0 .5rem}.hx-cap i{font-style:normal;color:#0D8064}
/* FinOps */
.hx-f-top{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.hx-f-big{text-align:center;display:flex;flex-direction:column;justify-content:center}.hx-f-big b{font:900 clamp(3rem,6vw,4.6rem)/1 var(--font-display);background:linear-gradient(90deg,#10A37F,#1FA6C6);-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:-.03em}.hx-f-big p{margin:.5rem 0 .2rem;font:900 14px/1.35 var(--font-display)}.hx-f-big small{color:#66747D;font-size:12px}
.hx-f-bars{display:flex;justify-content:space-around;align-items:flex-end;height:190px;position:relative;padding-top:1.2rem}.hx-f-bars .hx-lab{position:absolute;right:.2rem;top:0;text-align:right;font:900 20px var(--font-display);color:#0D8064}.hx-f-bars .hx-lab small{display:block;font-size:9px;letter-spacing:.14em;color:#66747D}
.hx-f-col{display:flex;flex-direction:column;align-items:center;gap:.35rem;width:38%}.hx-f-col i{display:block;width:70%;border-radius:8px 8px 4px 4px;height:var(--h);transition:height 1.1s cubic-bezier(.2,.7,.2,1)}.hx-f-col.now i{background:linear-gradient(180deg,#EF4444,#F59E0B)}.hx-f-col.aft i{background:linear-gradient(180deg,#10A37F,#1FA6C6)}
.hx-f-col small{font:800 9.5px var(--font-display);letter-spacing:.14em;color:#66747D}.hx-f-col b{font:900 12px/1.2 var(--font-display);text-align:center}
.hx-f-lay{margin-top:.8rem;background:#F7FAFB;border:1px solid #EAF0F2;border-radius:18px;padding:.8rem;position:relative;overflow:hidden}
.hx-f-row{display:grid;grid-template-columns:110px 1fr auto;gap:.8rem;align-items:center;background:#fff;border:1px solid #EAF0F2;border-left:3px solid var(--c);border-radius:12px;padding:.7rem .9rem;margin-top:.45rem;font-size:12.5px;color:#4A5257;transition:box-shadow .3s,transform .3s,background .3s;cursor:default}
.hx-f-row b{font:900 13.5px var(--font-display);color:#1B1D1F}.hx-f-row em{font-style:normal;font:900 9.5px var(--font-display);letter-spacing:.14em;color:var(--c)}
.hx-f-row.hot{box-shadow:0 10px 24px rgba(10,60,75,.12);transform:translateX(4px);background:#FBFEFF}
.hx-f-scan{position:absolute;left:.8rem;right:.8rem;height:3px;border-radius:3px;background:linear-gradient(90deg,transparent,#1FA6C6,transparent);top:2.2rem;opacity:0;box-shadow:0 0 12px rgba(31,166,198,.7)}
.hx-f-cmp{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-top:.8rem}.hx-f-cmp div{display:flex;gap:.5rem;align-items:center;border-radius:14px;padding:.7rem .9rem;font-size:12.5px;font-weight:700}.hx-f-cmp .no{border:1px solid #EAF0F2;color:#4A5257}.hx-f-cmp .yes{background:linear-gradient(90deg,#0A7F99,#1FA6C6);color:#fff}
.hx-chips{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center;margin-top:.8rem}.hx-chips span{font:800 12px var(--font-display);padding:.4rem .8rem;border-radius:999px;border:1px solid #E3ECEF;background:#fff}.hx-chips span.g{border-color:#10A37F;color:#0D8064}
.hx-ctl{display:flex;gap:.4rem;justify-content:center;margin-top:.7rem}.hx-ctl button{all:unset;cursor:pointer;font:800 12.5px var(--font-display);padding:.45rem .9rem;border-radius:999px;border:1px solid #E3ECEF;background:#fff}.hx-ctl button.on{background:#1B1D1F;color:#fff;border-color:#1B1D1F}
/* Gateway */
.hx-g-wrap{position:relative;border:1px solid #EAF0F2;border-radius:20px;padding:.9rem;background:#FBFDFE}
.hx-g-row{display:grid;gap:.5rem;position:relative;z-index:2}.hx-g-teams{grid-template-columns:repeat(6,1fr)}.hx-g-prov{grid-template-columns:repeat(5,auto);justify-content:start}
.hx-g-chip{font:800 12px var(--font-display);text-align:center;padding:.55rem .4rem;border-radius:12px;border:1px solid #E3ECEF;background:#fff;color:#3A4247;transition:.3s;cursor:default}.hx-g-teams .hx-g-chip{cursor:pointer}.hx-g-chip.on{border-color:#4F46E5;color:#4F46E5;box-shadow:0 8px 18px rgba(79,70,229,.18)}
.hx-g-prov .hx-g-chip{padding:.45rem .7rem}.hx-g-prov .hx-g-chip.op{border-color:#10A37F;color:#0D8064}.hx-g-prov .hx-g-chip.on{border-color:#10A37F;color:#fff;background:#10A37F}
.hx-g-gate{position:relative;z-index:2;margin:2.2rem 0;border-radius:20px;padding:.9rem 1rem;text-align:center;color:#fff;background:linear-gradient(90deg,#4F46E5,#1B7FC4 70%,#1FA6C6);box-shadow:0 18px 40px rgba(79,70,229,.3)}
.hx-g-gate small{display:block;font:800 10.5px var(--font-display);letter-spacing:.2em;opacity:.85}.hx-g-gate b{display:block;font:900 clamp(1.05rem,1.8vw,1.35rem) var(--font-display);margin:.2rem 0 .55rem;color:#fff}
.hx-g-feat{display:flex;flex-wrap:wrap;gap:.3rem;justify-content:center}.hx-g-feat span{font:800 11px var(--font-display);padding:.3rem .6rem;border-radius:999px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);transition:.3s}.hx-g-feat span.on{background:#fff;color:#4F46E5}
svg.hx-lines{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;overflow:visible}svg.hx-lines line{stroke:#D5E3E8;stroke-width:1.4;stroke-dasharray:3 4}
.hx-dot{position:absolute;z-index:3;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;pointer-events:none;box-shadow:0 0 0 4px rgba(79,70,229,.15)}
.hx-g-grid{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin-top:.8rem}
.hx-g-cost b{font:900 1.7rem var(--font-display)}.hx-g-cost small{color:#66747D;font-size:12px;margin-left:.4rem}.hx-g-track{height:8px;border-radius:99px;background:#EEF2F6;margin:.6rem 0 .45rem;overflow:hidden}.hx-g-track i{display:block;height:100%;width:var(--w);border-radius:99px;background:linear-gradient(90deg,#4F46E5,#1B7FC4);transition:width 1s}.hx-g-cost p{margin:0;font-size:11.5px;color:#4A5257;font-weight:700}
.hx-g-use div{display:grid;grid-template-columns:86px 1fr 34px;gap:.5rem;align-items:center;font-size:11.5px;font-weight:700;margin-top:.3rem}.hx-g-use i{display:block;height:7px;border-radius:99px;background:#EEF2F6;overflow:hidden}.hx-g-use i::after{content:"";display:block;height:100%;width:var(--w);background:var(--c);border-radius:99px;transition:width 1s}.hx-g-use div.on{color:#4F46E5}
.hx-g-al div{display:flex;gap:.5rem;align-items:center;border:1px solid #FDE3C4;background:#FFFBF5;border-radius:10px;padding:.5rem .6rem;font-size:11.5px;font-weight:700;margin-top:.35rem;transition:.3s}.hx-g-al div i{flex:none;width:18px;height:18px;border-radius:50%;background:#F59E0B;color:#fff;font-style:normal;font-size:11px;display:grid;place-items:center}.hx-g-al div.blink{box-shadow:0 0 0 4px rgba(245,158,11,.2)}
.hx-g-en{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem}.hx-g-en div{border:1px solid #EAF0F2;border-radius:10px;padding:.45rem;text-align:center}.hx-g-en b{display:block;font:900 15px var(--font-display)}.hx-g-en small{font:800 8.5px var(--font-display);letter-spacing:.1em;color:#66747D}
.hx-g-pol{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin-top:.7rem}.hx-g-pol div{display:flex;gap:.6rem;align-items:center;border:1px solid #EAF0F2;border-radius:14px;padding:.6rem .8rem;font-size:11.5px;font-weight:700;color:#3A4247}.hx-g-pol em{font-style:normal;flex:none;font:900 9.5px var(--font-display);letter-spacing:.14em;color:#fff;background:#4F46E5;border-radius:999px;padding:.3rem .55rem}
.hx-sw{display:inline-flex;align-items:center;gap:.4rem;cursor:pointer;font:800 12px var(--font-display);padding:.4rem .8rem;border-radius:999px;border:1px solid #E3ECEF;background:#fff}.hx-sw i{width:28px;height:16px;border-radius:99px;background:#CBD5E1;position:relative;transition:.25s}.hx-sw i::after{content:"";position:absolute;left:2px;top:2px;width:12px;height:12px;border-radius:50%;background:#fff;transition:.25s}.hx-sw.on i{background:#10A37F}.hx-sw.on i::after{left:14px}
/* On-prem */
.hx-o-net{position:relative;border:2px dashed #1B7FC4;border-radius:22px;padding:2.4rem 1rem 1rem;background:#FBFDFE;display:grid;grid-template-columns:auto 1fr 1fr;gap:1rem;align-items:center;overflow:visible}
.hx-o-net .hx-ttl{position:absolute;left:0;right:0;top:.7rem;text-align:center;font:900 11px var(--font-display);letter-spacing:.2em;color:#1B5FA0}
.hx-o-srv{display:flex;gap:.4rem;flex-direction:column}.hx-o-racks{display:flex;gap:.4rem}.hx-o-rack{width:44px;padding:.45rem .35rem;border-radius:10px;border:1px solid #DDE7EB;background:#fff;display:grid;gap:.35rem}.hx-o-rack i{display:flex;justify-content:space-between;align-items:center;height:7px;border-radius:3px;background:#EDF2F4;padding:0 3px}.hx-o-rack i::after{content:"";width:5px;height:5px;border-radius:50%;background:#34D399}
.hx-o-rack i.off::after{background:#D1FAE5}.hx-o-srv small{font-size:10.5px;font-weight:700;color:#4A5257;line-height:1.35;max-width:150px}
.hx-o-core{justify-self:center;width:140px;height:140px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#fff;background:radial-gradient(circle at 40% 30%,#1B8FB4,#0A4E6E 75%);box-shadow:0 18px 40px rgba(10,78,110,.35);position:relative;z-index:2}
.hx-o-core::before{content:"";position:absolute;inset:-10px;border-radius:50%;border:2px solid rgba(31,166,198,.45);animation:hxPulse 2.6s ease-out infinite}@keyframes hxPulse{0%{opacity:.9;transform:scale(.9)}100%{opacity:0;transform:scale(1.25)}}

.hx-o-core b{font:900 16px/1.15 var(--font-display);color:#fff}.hx-o-core small{font:800 9.5px var(--font-display);letter-spacing:.14em;opacity:.8;margin-top:.2rem}
.hx-o-apps{display:grid;gap:.45rem;position:relative;z-index:2}.hx-o-apps div{font:900 12px var(--font-display);padding:.6rem .8rem;border-radius:12px;border:1px solid #DDE7EB;background:#fff;transition:.3s}.hx-o-apps div.on{border-color:#1FA6C6;box-shadow:0 8px 18px rgba(31,166,198,.2)}
.hx-o-wall{display:flex;align-items:center;justify-content:center;gap:.6rem;margin:.9rem 0 .2rem;font:900 14px var(--font-display);color:#E11D48}.hx-o-wall i{width:30px;height:30px;border-radius:50%;border:2px solid #E11D48;display:grid;place-items:center;font-style:normal;transition:.3s}.hx-o-wall.hit i{background:#E11D48;color:#fff;transform:scale(1.2);box-shadow:0 0 0 8px rgba(225,29,72,.15)}
.hx-o-cards{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin-top:.8rem}.hx-o-card{background:#F7FAFB;border:1px solid #EAF0F2;border-radius:16px;padding:.9rem 1rem;transition:.3s}.hx-o-card:hover{background:#fff;box-shadow:0 12px 26px rgba(10,60,75,.1)}.hx-o-card small{font:900 10px var(--font-display);letter-spacing:.14em;color:#0A7D97}.hx-o-card b{display:block;font:900 14.5px var(--font-display);margin:.2rem 0 .3rem}.hx-o-card p{margin:0;font-size:12px;line-height:1.5;color:#4A5257}
.hx-o-try{display:flex;justify-content:center;margin-top:.6rem}.hx-o-try button{all:unset;cursor:pointer;font:800 12.5px var(--font-display);padding:.5rem 1rem;border-radius:999px;background:#FFF1F3;color:#CD1A41;border:1px solid #FECDD3}
@media(max-width:1000px){.hx-sc{grid-template-columns:1fr;gap:1.8rem;padding:3rem 0}.hx-sc.rev .hx-sc-copy{order:0}}
@media(max-width:640px){svg.hx-lines{display:none}.hx-g-gate{margin:1rem 0}.hx-kpis{grid-template-columns:1fr 1fr}.hx-f-top,.hx-g-grid,.hx-g-pol,.hx-o-cards,.hx-f-cmp{grid-template-columns:1fr}.hx-f-row{grid-template-columns:1fr auto}.hx-f-row span{grid-column:1/-1;order:3}.hx-g-teams{grid-template-columns:repeat(3,1fr)}.hx-g-prov{grid-template-columns:repeat(3,auto)}.hx-o-net{grid-template-columns:1fr;justify-items:center}.hx-o-srv{align-items:center}.hx-modes{margin-left:0}}
.hx-sc:last-of-type{border-bottom:0}
.hx-sc-wrap{padding-bottom:1rem}
@media (prefers-reduced-motion:reduce){.hx-o-core::before{animation:none}}
.hx-f-bars{height:232px;padding-top:2.2rem}
.hx-ctl .hx-sw{display:inline-flex;align-items:center;gap:.5rem}.hx-ctl .hx-sw i{flex:none}

/* --------------------------------------------------------------------------
   ENGINEERING PAGE · XR / VR, AR warehouse, clean room reference
   -------------------------------------------------------------------------- */
.xv-sec { padding-top: 1rem; }
.xv-sc { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 3rem; align-items: center; padding: 3.5rem 0; }
.xv-tag { display: inline-block; font: 800 12px var(--font-display); letter-spacing: .18em; text-transform: uppercase; color: #0C768E; background: #EAF6FA; border: 1px solid rgba(14,140,168,.25); border-radius: 999px; padding: .5rem 1rem; }
.xv-h2 { margin: 1rem 0 .9rem; font-family: var(--font-display); font-weight: 900; font-size: clamp(2.2rem, 4.4vw, 3.8rem); line-height: 1.03; letter-spacing: -.035em; color: #1B1D1F; }
.xv-h2 em { font-style: normal; background: linear-gradient(90deg, #22B0CF, #1B7FC4); -webkit-background-clip: text; background-clip: text; color: transparent; }
.xv-lead { font-size: clamp(1.02rem, 1.4vw, 1.22rem); line-height: 1.55; color: #4A5257; margin: 0 0 1rem; }
.xv-lead b { color: #1B1D1F; }
.xv-def { font-size: .93rem; line-height: 1.6; color: #4A5257; background: #F6FAFB; border-left: 3px solid #1FA6C6; border-radius: 0 12px 12px 0; padding: .75rem 1rem; margin: 0 0 1.3rem; }
.xv-def b { color: #1B1D1F; }
.xv-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; }
.xv-kpi { background: #fff; border: 1px solid #E3ECEF; border-radius: 20px; padding: 1rem 1.1rem; box-shadow: 0 10px 24px rgba(10,40,55,.05); }
.xv-kpi b { display: block; font: 900 2rem/1 var(--font-display); background: linear-gradient(90deg, #BE123C, #7C3AED); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: .35rem; letter-spacing: -.02em; }
.xv-kpi span { font-size: .9rem; font-weight: 700; color: #4A5257; }
.xv-vis { background: #fff; border: 1px solid #E3ECEF; border-radius: 28px; padding: 1.1rem; box-shadow: 0 24px 60px rgba(10,40,55,.09); }
.xv-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; }
.xv-card { display: flex; flex-direction: column; border: 1px solid #EAF0F2; border-top: 3px solid var(--c); border-radius: 18px; padding: 1rem; background: #fff; transition: transform .3s, box-shadow .3s; }
.xv-card:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(10,60,75,.12); }
.xv-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--cb); color: var(--c); margin-bottom: .7rem; }
.xv-card small { font: 900 10px var(--font-display); letter-spacing: .16em; text-transform: uppercase; color: var(--c); }
.xv-card h3 { font: 900 1.05rem/1.2 var(--font-display); color: #1B1D1F; margin: .25rem 0 .4rem; }
.xv-card p { font-size: .84rem; line-height: 1.5; color: #4A5257; margin: 0 0 .8rem; flex: 1; }
.xv-tags { display: flex; flex-wrap: wrap; gap: .3rem; }
.xv-tags span { font: 800 10.5px var(--font-display); padding: .25rem .55rem; border-radius: 999px; color: var(--c); background: var(--cb); border: 1px solid color-mix(in srgb, var(--c) 25%, transparent); }
.xv-loop { margin-top: .8rem; background: #F7FAFB; border: 1px solid #EAF0F2; border-radius: 18px; padding: .8rem; }
.xv-cap { margin: 0 0 .55rem; font: 800 10.5px var(--font-display); letter-spacing: .16em; text-transform: uppercase; color: #66747D; }
.xv-cap i { font-style: normal; color: #4F46E5; }
.xv-loop ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: .45rem; }
.xv-loop li { position: relative; background: #fff; border: 1px solid #EAF0F2; border-radius: 12px; padding: .55rem .5rem; text-align: center; animation: xvStep 6s ease-in-out infinite; animation-delay: calc(var(--i) * 1.2s); }
.xv-loop li:not(:last-child)::after { content: "→"; position: absolute; right: -.5rem; top: 50%; transform: translateY(-50%); color: #4F46E5; font-size: 12px; z-index: 1; }
.xv-loop li b { display: block; font: 900 12px var(--font-display); color: #1B1D1F; }
.xv-loop li span { font-size: 10.5px; color: #66747D; }
@keyframes xvStep { 0%, 16%, 100% { border-color: #EAF0F2; box-shadow: none; } 6%, 12% { border-color: #4F46E5; box-shadow: 0 8px 18px rgba(79,70,229,.18); } }
.xv-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; margin-top: .8rem; }
.xv-stats div { border: 1px solid #EAF0F2; border-radius: 14px; padding: .7rem .4rem; text-align: center; }
.xv-stats b { display: block; font: 900 1.6rem/1 var(--font-display); color: #2563EB; }
.xv-stats span { font-size: 11px; font-weight: 700; color: #4A5257; line-height: 1.3; }
.xv-src { margin: .45rem 0 0; text-align: right; font-size: 10.5px; letter-spacing: .04em; color: #66747D; }
.xv-chips { display: flex; flex-wrap: wrap; gap: .35rem; justify-content: center; margin-top: .7rem; }
.xv-chips span { font: 800 11.5px var(--font-display); padding: .4rem .8rem; border-radius: 999px; border: 1px solid #E3ECEF; background: #fff; }
.xv-chips span.on { background: #2B3FD6; color: #fff; border-color: #2B3FD6; }
.xv-ar { padding: 1rem 0 2.5rem; }
.xv-ar-ban { position: relative; border-radius: 26px; overflow: hidden; min-height: 400px; background: #07121A; box-shadow: 0 24px 60px rgba(7,18,26,.22); }
.xv-ar-ban img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; }
.xv-ar-ban::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6,20,36,.95) 0%, rgba(6,20,36,.8) 34%, rgba(6,20,36,.2) 60%, rgba(6,20,36,0) 75%); }
.xv-ar-copy { position: relative; z-index: 2; max-width: 560px; padding: 3.2rem clamp(1.5rem, 4vw, 3.6rem); color: #fff; }
.xv-ar-ey { margin: 0 0 .8rem; font: 800 13px var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: #7EE0F2; }
.xv-ar-h { margin: 0 0 .8rem; font: 900 clamp(2rem, 3.8vw, 3.2rem)/1.05 var(--font-display); color: #fff; letter-spacing: -.015em; }
.xv-ar-s { margin: 0 0 1.5rem; font-size: clamp(1rem, 1.3vw, 1.15rem); line-height: 1.55; color: rgba(255,255,255,.88); }
.xv-ar-btn { display: inline-flex; align-items: center; gap: .55rem; min-height: 50px; padding: 0 1.4rem; border: 0; border-radius: 12px; background: #6FE0F5; color: #06202B; font: 800 16px var(--font-display); cursor: pointer; box-shadow: 0 10px 24px rgba(111,224,245,.28); }
.xv-ar-def { margin: 1.2rem 0 1rem; }
.xv-ar-b { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; }
.xv-ar-b div { background: #fff; border: 1px solid #E3ECEF; border-radius: 18px; padding: 1rem 1.1rem; }
.xv-ic2 { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: linear-gradient(135deg, #0A7F99, #1FA6C6); color: #fff; margin-bottom: .6rem; }
.xv-ar-b b { display: block; font: 900 1rem var(--font-display); color: #1B1D1F; margin-bottom: .25rem; }
.xv-ar-b p { margin: 0; font-size: .88rem; line-height: 1.5; color: #4A5257; }
.xv-rf { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.xv-steps { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: .6rem; }
.xv-steps li { display: flex; gap: .9rem; align-items: center; background: #fff; border: 1px solid #E3ECEF; border-radius: 16px; padding: .85rem 1rem; }
.xv-steps i { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; border: 2px solid #1B7FC4; color: #1B7FC4; font: 900 15px var(--font-display); font-style: normal; }
.xv-steps b { display: block; font: 900 1.02rem var(--font-display); color: #1B1D1F; }
.xv-steps span { font-size: .9rem; color: #4A5257; }
.xv-video { position: relative; aspect-ratio: 16 / 9; border-radius: 24px; overflow: hidden; background: linear-gradient(180deg, #E9EEF1 0%, #F7F9FA 55%, #DDE5EA 100%); box-shadow: 0 24px 60px rgba(10,40,55,.15); }
.xv-floor { position: absolute; left: -20%; right: -20%; bottom: -10%; height: 70%; transform: perspective(500px) rotateX(58deg); background-image: linear-gradient(#2B3441 2px, transparent 2px), linear-gradient(90deg, #2B3441 2px, transparent 2px); background-size: 70px 70px; background-color: #F4F6F8; opacity: .55; }
.xv-video::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, transparent 0 90px, rgba(31,166,198,.35) 90px 94px, transparent 94px 220px); pointer-events: none; }
.xv-vbadge { position: absolute; z-index: 2; left: 1rem; top: 1rem; font: 800 12px var(--font-display); letter-spacing: .08em; color: #fff; background: rgba(15,23,32,.7); border-radius: 999px; padding: .4rem .8rem; }
.xv-play { position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 130px; height: 130px; border-radius: 50%; background: rgba(255,255,255,.92); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem; box-shadow: 0 18px 40px rgba(10,40,55,.2); }
.xv-play span { color: #E11D48; font-size: 34px; line-height: 1; }
.xv-play small { font: 800 11px/1.25 var(--font-display); color: #3A4247; text-align: center; padding: 0 .8rem; }
.xv-faq { max-width: 860px; margin: 3rem auto 0; }
@media (max-width: 1000px) { .xv-sc, .xv-rf { grid-template-columns: 1fr; gap: 1.8rem; padding: 2.5rem 0; } .xv-ar-b { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) {
  .xv-cards, .xv-loop ol { grid-template-columns: 1fr; } .xv-loop li::after { display: none; }
  .xv-stats { grid-template-columns: 1fr 1fr; } .xv-kpis { grid-template-columns: 1fr 1fr; }
  .xv-ar-ban { min-height: 520px; display: flex; align-items: flex-end; } .xv-ar-ban::after { background: linear-gradient(0deg, rgba(6,20,36,.96) 0%, rgba(6,20,36,.82) 48%, rgba(6,20,36,.1) 80%); }
  .xv-ar-copy { padding: 1.5rem 1.3rem 1.8rem; } .xv-ar-b { grid-template-columns: 1fr; }
  .xv-play { width: 100px; height: 100px; }
}
@media (prefers-reduced-motion: reduce) { .xv-loop li { animation: none; } }
.xv-ar-copy{max-width:620px}.xv-ar-h{font-size:clamp(1.9rem,3.1vw,3rem)}

.xv-video--img{margin:0;background:#EEF2F5}.xv-video--img::after{display:none}.xv-video--img img{display:block;width:100%;height:100%;object-fit:cover}

/* --------------------------------------------------------------------------
   HOMEPAGE (yeni yapı) · two-tier header, agents slide, intro band, four doors,
   ready products, trust band
   -------------------------------------------------------------------------- */
/* agents slide */
.nxs-slide--agents{background:radial-gradient(900px 500px at 78% 30%,rgba(14,156,184,.35),transparent 60%),radial-gradient(700px 400px at 10% 110%,rgba(111,224,245,.14),transparent 60%),linear-gradient(135deg,#071a2a 0%,#0a2433 55%,#06141d 100%)}
.nxs-slide--agents .nxs-bn-copy{max-width:min(440px,40%)}.nxs-slide--agents .nxs-bh{font-size:clamp(30px,3.2vw,44px)}
.nxs-agrid{position:absolute;z-index:2;right:clamp(24px,3.4vw,44px);top:30px;bottom:calc(var(--nxs-ov) + 30px);width:min(52%,600px);display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:1fr 1fr;gap:10px}
.nxs-at{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;text-align:center;padding:8px 6px 10px;border-radius:16px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;text-decoration:none;min-height:0;transition:transform .3s,background .3s,border-color .3s;animation:nxsUp .6s cubic-bezier(.2,.7,.2,1) both}
.nxs-at:hover{transform:translateY(-4px);background:rgba(111,224,245,.14);border-color:rgba(111,224,245,.5);color:#fff}
.nxs-at img{height:52%;max-height:92px;width:auto;max-width:none;filter:drop-shadow(0 10px 12px rgba(0,0,0,.35));margin-bottom:4px}
.nxs-at b{font-family:var(--font-display);font-weight:800;font-size:13px;line-height:1.15}
.nxs-at em{font-style:normal;font-size:11px;font-weight:700;color:#7EE0F2;line-height:1.25;margin-top:3px}
.nxs-anote{position:absolute;right:0;bottom:-20px;font-size:11px;color:rgba(255,255,255,.5)}
.nxs-pic img[src*="/agents/"]{object-fit:contain;padding:8px 0 22px;opacity:1}
@media(max-width:1100px){.nxs-at em{display:none}}
/* tablet: icon-only column on the right; phone: icon strip above the copy */
@media(max-width:960px){.nxs-agrid{width:min(30%,220px);grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(5,1fr);gap:8px}.nxs-at{justify-content:center;padding:6px;border-radius:14px}.nxs-at b,.nxs-anote{display:none}.nxs-at img{height:78%;max-height:64px;margin:0}.nxs-slide--agents .nxs-bn-copy{max-width:62%}}
@media(max-width:720px){.nxs-agrid{left:18px;right:18px;top:18px;bottom:calc(100% - 250px);width:auto;grid-template-columns:repeat(5,1fr);grid-template-rows:none;align-content:center}.nxs-at{aspect-ratio:1;min-width:0;padding:4px}.nxs-at img{height:auto;width:78%;max-width:78%}.nxs-slide--agents .nxs-bn-copy{max-width:none}}
/* sections */
.hp-sec{padding:4.5rem 0}.hp-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem;flex-wrap:wrap;margin-bottom:2rem}.hp-head .ovc-sub{max-width:620px;margin:0}
.dk{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
.dk-c{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid rgba(10,127,153,.16);border-radius:22px;overflow:hidden;text-decoration:none;color:inherit;box-shadow:0 12px 30px rgba(10,60,75,.07);transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,border-color .35s}
.dk-c:hover{transform:translateY(-6px);box-shadow:0 26px 56px rgba(10,60,75,.15);border-color:rgba(10,127,153,.4)}
.dk-v{height:150px;display:flex;align-items:flex-end;justify-content:center;gap:2px;background:linear-gradient(160deg,#EAF7FA,#F7FBFC);border-bottom:1px solid rgba(10,127,153,.1);overflow:hidden;position:relative}
.dk-v.ag img{width:23%;margin-bottom:-6px;filter:drop-shadow(0 10px 10px rgba(10,60,75,.15));transition:transform .35s}.dk-v.ag img:nth-child(2n){transform:translateY(-8px)}.dk-c:hover .dk-v.ag img{transform:translateY(-12px)}
.dk-v.md{align-items:center;gap:6px}.dk-v.md img{width:22%;filter:drop-shadow(0 10px 10px rgba(10,60,75,.15));transition:transform .35s}.dk-c:hover .dk-v.md img:nth-child(odd){transform:translateY(-6px) rotate(-4deg)}
.dk-v.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s}.dk-c:hover .dk-v.ph img{transform:scale(1.06)}
.dk-v.sv{flex-direction:column;align-items:flex-start;justify-content:center;gap:8px;padding:0 1.3rem}.dk-v.sv span{font:800 13px var(--font-display);padding:.4rem .8rem;border-radius:999px;background:#fff;border:1px solid rgba(10,127,153,.22);color:#0A7F99}.dk-v.sv span:nth-child(2){margin-left:1.4rem}.dk-v.sv span:nth-child(3){margin-left:.6rem}
.dk-v.sv2 .sv2-chips{position:absolute;left:10px;right:10px;bottom:10px;display:flex;flex-wrap:wrap;gap:5px;z-index:1}.dk-v.sv2 .sv2-chips span{font:800 11px var(--font-display);padding:.3rem .6rem;border-radius:999px;background:rgba(7,18,26,.55);color:#fff;border:1px solid rgba(255,255,255,.28);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.rdv{align-items:center}.rd{width:92%;height:auto}.rd-p{animation:dash 6s linear infinite}@keyframes dash{to{stroke-dashoffset:-130}}@media (prefers-reduced-motion:reduce){.rd-p{animation:none}}
.tb{padding:3.6rem 0 1.6rem;background:#fff}
.tb-in{max-width:980px;margin:0 auto;text-align:center}
.tb-lead{font-family:var(--font-display);font-weight:900;font-size:clamp(1.55rem,2.6vw,2.2rem);line-height:1.25;color:#2B2E31;margin:0 0 .8rem;letter-spacing:-.01em}.tb-lead em{font-style:normal;color:#0A7F99}
.tb-sub{font-size:1.08rem;line-height:1.55;color:var(--text-secondary);margin:0 auto 2rem;max-width:720px}
.tb-g{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid rgba(10,127,153,.16);border-radius:20px;background:linear-gradient(180deg,#F7FBFC,#fff);overflow:hidden}
.tb-i{padding:1.3rem 1rem;display:flex;flex-direction:column;align-items:center;gap:.15rem}.tb-i+.tb-i{border-left:1px solid rgba(10,127,153,.14)}
.tb-i b{font-family:var(--font-display);font-weight:900;font-size:2rem;line-height:1;color:#0A7F99}.tb-i span{font-family:var(--font-display);font-weight:800;font-size:.98rem;color:#2B2E31;margin-top:.3rem}.tb-i small{font-size:.82rem;color:var(--text-tertiary);line-height:1.35}
@media(max-width:760px){.tb{padding:2.6rem 0 1rem}.tb-g{grid-template-columns:repeat(2,1fr)}.tb-i:nth-child(3){border-left:0}.tb-i:nth-child(n+3){border-top:1px solid rgba(10,127,153,.14)}}
/* header: E + A */
@media (min-width:1025px){
 :root{--header-height:110px}
 .hdrEA{height:auto}
 .hdrEA .nav-container{height:72px}
 .hdr-top{height:38px;background:#0A2433;color:rgba(255,255,255,.75);font:700 12.5px var(--font-body)}
 .hdr-top-in{max-width:1400px;height:100%;margin:0 auto;padding:0 1.75rem;display:flex;align-items:center;gap:1.4rem}
 .hdr-top a,.hdr-top span{display:inline-flex;align-items:center;gap:.4rem;color:rgba(255,255,255,.8);text-decoration:none}.hdr-top a:hover{color:#fff}
 .hdr-top svg{width:14px;height:14px;opacity:.8}.hdr-sp{flex:1}
 .hdr-top .hdr-nb{color:#fff;font-weight:800}.hdr-nb i{font-style:normal;font:900 10px var(--font-display);background:#6FE0F5;color:#06202B;border-radius:999px;padding:.2rem .5rem}
 .hdr-top .hdr-nb:hover{color:#8FEAFA}
 .hdrEA .nav-links{gap:.15rem}
 .hdrEA .nav-item-link{position:relative;padding:.55rem .75rem;border-radius:10px;transition:background .2s,color .2s}
 .hdrEA .nav-item-link:hover{background:#EEF8FA;color:#0A7F99}
 .hdrEA .nav-item-link.is-active{color:#0A7F99}.hdrEA .nav-item-link.is-active::after{content:"";position:absolute;left:50%;bottom:-15px;width:22px;height:3px;border-radius:3px;background:#0A7F99;transform:translateX(-50%)}
 .hdr-hide-desk{display:none!important}
 .hdr-cta{display:inline-flex;align-items:center;gap:.5rem;height:44px;padding:0 1.2rem;border:0;border-radius:12px;background:#0A7F99;color:#fff;font:800 15px var(--font-display);cursor:pointer;box-shadow:0 8px 18px rgba(10,127,153,.28);transition:transform .2s,background .2s}
 .hdr-cta:hover{background:#0C8FAB;transform:translateY(-1px)}
}
@media (max-width:1024px){.hdr-top{display:none}.hdr-cta{display:none}}
.af{display:grid;grid-template-columns:1fr 1.05fr;gap:2.4rem;align-items:center;background:#fff;border:1px solid rgba(10,127,153,.16);border-radius:24px;padding:2rem 2.2rem;box-shadow:0 14px 34px rgba(10,60,75,.07)}
.af-h{font-family:var(--font-display);font-weight:900;font-size:clamp(1.5rem,2.3vw,2rem);color:#2B2E31;margin:.3rem 0 .7rem;line-height:1.2}.af-copy p{color:var(--text-secondary);line-height:1.65;margin:0 0 1rem;font-size:1rem}
.af-flow{position:relative;display:grid;grid-template-columns:1fr auto 1fr;gap:1.2rem;align-items:center}
.af-flow::before{content:"";position:absolute;left:12%;right:12%;top:50%;height:2px;background:repeating-linear-gradient(90deg,rgba(10,127,153,.45) 0 8px,transparent 8px 14px);z-index:0}
.af-col{position:relative;z-index:1;display:flex;flex-direction:column;gap:.4rem}.af-col small{font:800 11px var(--font-display);letter-spacing:.12em;text-transform:uppercase;color:#0A7F99;margin-bottom:.15rem}
.af-col span{font:800 13px var(--font-display);padding:.45rem .75rem;border-radius:10px;background:#F3F9FB;border:1px solid rgba(10,127,153,.16);color:#0A3C4B;text-align:center}
.af-out span{background:linear-gradient(90deg,#0A7F99,#0E9CB8);color:#fff;border-color:transparent}
.af-core{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:.1rem;padding:1rem .9rem .8rem;border-radius:20px;background:radial-gradient(circle at 50% 30%,#EAF8FB,#fff 70%);border:1px solid rgba(10,127,153,.22);box-shadow:0 14px 30px rgba(10,127,153,.15)}
.af-core img{width:78px;height:auto;filter:drop-shadow(0 10px 10px rgba(10,60,75,.18))}.af-core b{font:900 14px var(--font-display);color:#2B2E31}.af-core em{font-style:normal;font-size:12px;color:var(--text-tertiary)}
@media(max-width:900px){.af{grid-template-columns:1fr;padding:1.5rem 1.2rem}}
.dk-b{padding:1.2rem 1.3rem 1.3rem;display:flex;flex-direction:column;flex:1}.dk-b small{font:800 11px var(--font-display);letter-spacing:.12em;text-transform:uppercase;color:#0A7F99;margin-bottom:.35rem}
.dk-b h3{font-family:var(--font-display);font-weight:900;font-size:1.25rem;color:#2B2E31;margin:0 0 .45rem;line-height:1.2}.dk-b p{color:var(--text-secondary);font-size:.95rem;line-height:1.55;margin:0 0 1rem;flex:1}
.dk-l{display:inline-flex;align-items:center;gap:.4rem;font-weight:800;color:#0A7F99;font-size:.92rem}.dk-l svg{transition:transform .3s}.dk-c:hover .dk-l svg{transform:translateX(4px)}
.pr{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
.pr-c{position:relative;display:flex;flex-direction:column;border-radius:22px;overflow:hidden;background:#0A2433;color:#fff;text-decoration:none;min-height:360px;box-shadow:0 16px 40px rgba(10,40,55,.18);transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.pr-c:hover{transform:translateY(-6px);box-shadow:0 28px 60px rgba(10,40,55,.28);color:#fff}
.pr-c>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s}.pr-c:hover>img{transform:scale(1.06)}
.pr-c::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(6,20,36,.96) 0%,rgba(6,20,36,.78) 42%,rgba(6,20,36,.15) 75%)}
.pr-shot{position:absolute;z-index:2;top:18px;right:16px;width:62%;max-width:230px;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 16px 34px rgba(0,0,0,.45),0 0 0 4px rgba(255,255,255,.08);transform:rotate(-2deg);transition:transform .4s cubic-bezier(.2,.7,.2,1)}.pr-c:hover .pr-shot{transform:rotate(0) translateY(-4px)}.pr-shot img{display:block;width:100%;height:auto}
.pr-b{position:relative;z-index:2;margin-top:auto;padding:1.3rem}.pr-b small{font:800 11px var(--font-display);letter-spacing:.12em;text-transform:uppercase;color:#7EE0F2}
.pr-b h3{font-family:var(--font-display);font-weight:900;font-size:1.5rem;margin:.3rem 0 .35rem;color:#fff}.pr-b p{font-size:.93rem;line-height:1.5;color:rgba(255,255,255,.82);margin:0 0 .9rem}
.pr-b .dk-l{color:#6FE0F5}.pr-sec{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.75rem}.pr-sec a{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem .9rem;border-radius:999px;font:800 .88rem var(--font-display);color:#06202B;background:#6FE0F5;text-decoration:none;transition:background .2s,transform .2s}.pr-sec a:hover{background:#9BEBFA;transform:translateY(-1px)}.pr-sec a:focus-visible{outline:3px solid #fff;outline-offset:2px}.pr-new{position:absolute;z-index:2;top:14px;left:14px;font:900 11px var(--font-display);letter-spacing:.08em;background:#6FE0F5;color:#06202B;padding:.32rem .6rem;border-radius:8px}
.pr-test{position:relative;z-index:3;display:inline-flex;margin-top:.5rem;font-size:.85rem;font-weight:700;color:#fff;border-bottom:1px solid rgba(255,255,255,.4);align-self:flex-start}
.gv{background:linear-gradient(135deg,#0A3C4B,#0A2433 60%,#071a2a);border-radius:26px;padding:2.6rem 2.4rem;color:#fff;display:grid;grid-template-columns:1.1fr 2fr;gap:2.4rem;align-items:center;box-shadow:0 24px 60px rgba(10,40,55,.22)}
.gv h2{font-family:var(--font-display);font-weight:900;font-size:clamp(1.7rem,2.6vw,2.3rem);line-height:1.15;margin:.4rem 0 .6rem;color:#fff}.gv p{color:rgba(255,255,255,.78);margin:0;line-height:1.55}
.gv-g{display:grid;grid-template-columns:repeat(2,1fr);gap:.9rem}
.gv-i{display:flex;gap:.9rem;align-items:flex-start;padding:1rem 1.1rem;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);text-decoration:none;color:#fff;transition:background .3s,border-color .3s}a.gv-i:hover{background:rgba(111,224,245,.12);border-color:rgba(111,224,245,.4);color:#fff}
.gv-i i{flex:none;width:42px;height:42px;border-radius:12px;background:rgba(111,224,245,.16);color:#6FE0F5;display:grid;place-items:center}.gv-i i svg{width:21px;height:21px}
.gv-i b{display:block;font-family:var(--font-display);font-weight:800;font-size:1rem;margin-bottom:.15rem}.gv-i span{font-size:.86rem;color:rgba(255,255,255,.7);line-height:1.4}

@media(max-width:1100px){.dk,.pr{grid-template-columns:repeat(2,1fr)}.gv{grid-template-columns:1fr}}
@media(max-width:640px){.hp-sec{padding:3rem 0}.dk,.pr,.gv-g{grid-template-columns:1fr}.pr-c{min-height:300px}.gv{padding:1.8rem 1.3rem}}

@media(max-width:720px){.nxs-bn .nxs-slide--agents .nxs-bn-copy{max-width:none}}
/* Hero slider · NexBeyan free test button */
.nxs-bn .nxs-br { flex-basis: 100%; height: 0; }
.nxs-tb { position: relative; display: inline-flex; align-items: center; gap: .6rem; min-height: 46px; padding: 0 1.1rem 0 .8rem; border: 0; border-radius: 999px; cursor: pointer; font: 800 15px var(--font-display); color: #2A1400; background: linear-gradient(90deg, #FBBF24, #F97316); box-shadow: 0 10px 26px rgba(249,115,22,.38), 0 0 0 1px rgba(255,255,255,.25) inset; transition: transform .2s, box-shadow .2s; animation: nxsTbGlow 2.6s ease-in-out infinite; }
.nxs-tb:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(249,115,22,.5); }
.nxs-tb:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.nxs-tb i { position: relative; flex: none; width: 10px; height: 10px; border-radius: 50%; background: #fff; }
.nxs-tb i::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid rgba(255,255,255,.85); animation: nxsTbPing 1.8s ease-out infinite; }
.nxs-tb em { font-style: normal; font: 900 10.5px var(--font-display); letter-spacing: .06em; text-transform: uppercase; color: #fff; background: rgba(42,20,0,.78); border-radius: 999px; padding: .28rem .55rem; }
.nxs-tb svg { flex: none; }
@keyframes nxsTbPing { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
@keyframes nxsTbGlow { 0%, 100% { box-shadow: 0 10px 26px rgba(249,115,22,.38); } 50% { box-shadow: 0 10px 34px rgba(251,191,36,.6); } }
@media (prefers-reduced-motion: reduce) { .nxs-tb, .nxs-tb i::after { animation: none; } }
@media (max-width: 720px) { .nxs-tb { font-size: 14px; } }
@media(max-width:720px){.nxs-bn .nxs-stage{min-height:620px}}
@media(max-width:720px){.nxs-bn .nxs-bn-copy{padding-bottom:calc(var(--nxs-ov) + 52px)}}

/* ==========================================================================
   OFFICES / LOCATION (homepage #konum): office cards + pinned map of Türkiye
   ========================================================================== */
.loc-sec { padding-top: 2rem; padding-bottom: 3rem; }
.loc-canvas { position: relative; }
.loc-canvas > img { display: block; width: 100%; height: auto; }
.loc-arc { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.loc-arc path { fill: none; stroke: #0A7F99; stroke-width: 2.5; stroke-dasharray: 6 7; vector-effect: non-scaling-stroke; animation: locDash 1.6s linear infinite; }
@keyframes locDash { to { stroke-dashoffset: -26; } }
.loc-pin { position: absolute; z-index: 2; display: flex; align-items: center; gap: .55rem; transform: translate(-11px, -50%); text-decoration: none; color: #1B1D1F; }
.loc-pin i { position: relative; flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: #0A7F99; border: 4px solid #fff; box-shadow: 0 4px 12px rgba(10,90,110,.45); }
.loc-pin i::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 2px solid rgba(10,127,153,.45); animation: locPulse 2.2s ease-out infinite; }
@keyframes locPulse { from { transform: scale(.5); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
.loc-pin > span { display: flex; flex-direction: column; background: #fff; border: 1px solid #DCEBF0; border-radius: 12px; padding: .4rem .7rem; box-shadow: 0 10px 24px -12px rgba(10,60,75,.35); white-space: nowrap; transition: transform .2s ease, border-color .2s ease; }
.loc-pin b { font: 900 .95rem/1.1 var(--font-display); }
.loc-pin em { font: 700 .72rem/1.2 var(--font-display); font-style: normal; color: #0A7F99; }
.loc-pin:hover > span { transform: scale(1.06); border-color: #0A7F99; }
@media (max-width: 560px) {
  .loc-pin > span { padding: .3rem .5rem; }
  .loc-pin b { font-size: .8rem; }
  .loc-pin i { width: 16px; height: 16px; border-width: 3px; }
  .loc-pin { transform: translate(-8px, -50%); }
}
@media (prefers-reduced-motion: reduce) { .loc-arc path, .loc-pin i::after { animation: none; } }

/* Homepage "Neden Nexage" (#guven): dark editorial block */
.kb{background:#0B2230;border-radius:20px;color:#fff;display:grid;grid-template-columns:1fr 1.25fr;gap:3rem;padding:clamp(1.8rem,4vw,3.2rem);position:relative;overflow:hidden}
.kb::before{content:"";position:absolute;right:-120px;top:-160px;width:480px;height:480px;border-radius:50%;background:radial-gradient(circle,rgba(10,127,153,.35),transparent 65%)}
.kb>*{position:relative}.kb-tag{font:800 12px var(--font-display);letter-spacing:.16em;color:#6FD3E8}
.kb h2{font-family:var(--font-display);font-weight:800;font-size:clamp(1.7rem,2.8vw,2.35rem);line-height:1.15;letter-spacing:-.015em;margin:.6rem 0 .9rem;color:#fff}
.kb-l p{color:rgba(255,255,255,.74);line-height:1.7;margin:0 0 1.4rem}
.kb-link{display:inline-flex;gap:.5rem;font:800 .95rem var(--font-display);color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.35);padding-bottom:.2rem}.kb-link span{color:#6FD3E8}
.kb-r{display:grid;grid-template-columns:1fr 1fr;gap:0}
.kb-p{padding:1.3rem 1.4rem 1.4rem;border-top:1px solid rgba(255,255,255,.12)}.kb-p:nth-child(odd){border-right:1px solid rgba(255,255,255,.12);padding-left:0}
.kb-p em{display:block;font:800 .8rem var(--font-display);font-style:normal;color:#6FD3E8;letter-spacing:.1em;margin-bottom:.5rem}
.kb-p h3{font:800 1.02rem var(--font-display);margin:0 0 .45rem;color:#fff}.kb-p p{margin:0;font-size:.88rem;line-height:1.6;color:rgba(255,255,255,.68)}
.kb-stats{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(255,255,255,.14);padding-top:1.8rem}
.kb-s{padding-right:1.5rem}.kb-s+.kb-s{padding-left:1.5rem;border-left:1px solid rgba(255,255,255,.12)}
.kb-s b{white-space:nowrap;display:flex;align-items:baseline;gap:.3rem;font:800 clamp(2rem,3.4vw,2.8rem)/1 var(--font-display);letter-spacing:-.02em;color:#fff}.kb-s small{font:700 .95rem var(--font-display);letter-spacing:0;color:#6FD3E8}.kb-s span{display:block;margin-top:.45rem;font-size:.85rem;color:rgba(255,255,255,.66)}
@media(max-width:1000px){.kb{grid-template-columns:1fr}}
@media(max-width:620px){.kb{gap:1.4rem;padding:1.6rem 1.3rem}.kb-l p{margin-bottom:1rem}.kb-r{grid-template-columns:1fr}.kb-p,.kb-p:nth-child(odd){border-right:0;padding:.9rem 0}.kb-p em{display:inline;margin:0 .5rem 0 0}.kb-p h3{display:inline}.kb-p p{margin-top:.35rem}.kb-stats{grid-template-columns:repeat(3,1fr);padding-top:1.2rem}.kb-s,.kb-s+.kb-s{padding:0 .5rem 0 0;border-left:0}.kb-s b{font-size:1.45rem}.kb-s small{font-size:.75rem}.kb-s span{font-size:.72rem}}

/* Offices slim band (homepage #konum) */
.lc-badge{display:block;font:800 10.5px/1.2 var(--font-display);letter-spacing:.12em;text-transform:uppercase;color:#0A7F99;margin-bottom:.25rem}
.lc1-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}
.lc1 h2{font-family:var(--font-display);font-weight:800;font-size:clamp(1.35rem,2.2vw,1.75rem);line-height:1.2;color:#1B1D1F;margin:.5rem 0 0}
.lc-mail{display:inline-flex;align-items:center;gap:.55rem;padding:.6rem 1rem;border-radius:999px;background:#0A3C4B;color:#fff;text-decoration:none;font:800 .92rem var(--font-display);white-space:nowrap;transition:background .2s}.lc-mail svg{width:17px;height:17px;color:#8FE3F2}.lc-mail:hover{background:#0C4A5C}
.lc1-bar{display:grid;grid-template-columns:300px 1fr 1fr;align-items:center;background:linear-gradient(180deg,#FBFDFE,#F3F8FA);border:1px solid #DCEBF0;border-radius:20px;overflow:hidden}
.lc1-map{padding:1rem 1.2rem;background:radial-gradient(90% 80% at 20% 40%,#E3F3F7,#F7FBFC 75%);border-right:1px solid #E1ECF0;align-self:stretch;display:flex;align-items:center}
.lc1-map .loc-canvas{width:100%}.lc1-map .loc-pin > span{padding:.3rem .6rem}.lc1-map .loc-pin b{font-size:.82rem}
.lc1-o{padding:1.1rem 1.4rem}.lc1-o+.lc1-o{border-left:1px solid #E1ECF0}
.lc1-o h3{font:800 1rem var(--font-display);color:#1B1D1F;margin:0 0 .3rem}
.lc1-o p{margin:0 0 .6rem;font-size:.86rem;line-height:1.5;color:var(--text-secondary)}
.lc-links{display:flex;gap:1rem;flex-wrap:wrap}.lc-links a{display:inline-flex;align-items:center;gap:.35rem;font:800 .84rem var(--font-display);color:#0A6F86;text-decoration:none}.lc-links a:hover{text-decoration:underline}.lc-links svg{width:13px;height:13px}
@media(max-width:960px){.lc1-bar{grid-template-columns:1fr 1fr}.lc1-map{grid-column:1/-1;border-right:0;border-bottom:1px solid #E1ECF0}}
@media(max-width:600px){.lc1-bar{grid-template-columns:1fr}.lc1-o+.lc1-o{border-left:0;border-top:1px solid #E1ECF0}}

/* MASAK test sector chooser (js/sector-test.js) */
.stc{position:fixed;inset:0;z-index:2000;display:grid;place-items:center;padding:16px;background:rgba(6,20,30,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.stc[hidden]{display:none}
html.stc-open{overflow:hidden}
.stc-box{position:relative;width:min(440px,100%);display:grid;gap:10px;padding:22px;border-radius:22px;background:#0B2230;border:1px solid rgba(255,255,255,.14);box-shadow:0 30px 70px rgba(0,0,0,.45);animation:stcIn .2s ease-out}
@keyframes stcIn{from{transform:translateY(8px) scale(.98);opacity:0}}
.stc-t{margin:0;padding-right:40px;font:900 1.25rem var(--font-display);color:#fff}
.stc-s{margin:-4px 0 6px;font:700 .85rem var(--font-display);color:#FBBF24}
.stc-x{position:absolute;top:12px;right:12px;width:32px;height:32px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:transparent;color:#fff;font-size:20px;line-height:1;cursor:pointer}
.stc-c{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;background:#fff;color:#06202B;text-decoration:none;transition:transform .2s,box-shadow .2s}
.stc-c:hover{transform:translateY(-2px);box-shadow:0 12px 24px rgba(0,0,0,.3);color:#06202B}
.stc-c:focus-visible,.stc-x:focus-visible{outline:3px solid #6FE0F5;outline-offset:2px}
.stc-c i{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:#E3F4F8;color:#0A7F99}
.stc-c span{display:flex;flex-direction:column;flex:1;min-width:0}.stc-c b{font:800 16px var(--font-display)}.stc-c small{font-size:12.5px;font-weight:600;color:#5B6A72}
.stc-c>svg{flex:none;color:#0A7F99}
@media (prefers-reduced-motion:reduce){.stc-box{animation:none}}

/* ==========================================================================
   NexBeyan sector pages: welcome hero with "what is it" copy and a
   two-panel slider (penalty risk / how it works in the branch)
   ========================================================================== */
.nbh .nb-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 3rem; align-items: stretch; }
.nbh .nb-hero-title { font-size: clamp(2.1rem, 3.6vw, 3.15rem); line-height: 1.07; margin-top: .9rem; }
.nbh-def { font-size: 1.04rem; line-height: 1.65; color: var(--text-secondary); margin: 0 0 1rem; }
.nbh-def b { color: var(--text-primary, #1B1D1F); }
.nbh-chk { list-style: none; margin: 0 0 .4rem; padding: 0; display: grid; gap: .45rem; }
.nbh-chk li { display: flex; gap: .6rem; align-items: flex-start; font-size: .96rem; line-height: 1.5; color: var(--text-secondary); }
.nbh-chk li::before { content: ""; flex: none; width: 20px; height: 20px; margin-top: 2px; border-radius: 50%; background: #E3F4F8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A7F99' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center/12px no-repeat; }
.nbh-chk b { color: var(--text-primary, #1B1D1F); }

.nbh-sl { display: flex; flex-direction: column; min-height: 100%; }
.nbh-tabs { align-self: flex-start; display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: #EAF1F4; margin-bottom: 12px; }
.nbh-tabs button { all: unset; cursor: pointer; position: relative; overflow: hidden; font: 800 .9rem var(--font-display); color: #4A5A63; padding: .5rem 1.05rem; border-radius: 999px; }
.nbh-tabs button[aria-selected="true"] { background: #fff; color: #0A3C4B; box-shadow: 0 2px 6px rgba(10,60,75,.12); }
.nbh-tabs button[aria-selected="true"]::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 3px; height: 2px; border-radius: 2px; background: #0A7F99; transform-origin: left; animation: nbhProg var(--nbh-dur, 8s) linear; }
.nbh-sl.is-paused .nbh-tabs button::after { animation-play-state: paused; }
.nbh-tabs button:focus-visible { outline: 2px solid #0A7F99; outline-offset: 2px; }
@keyframes nbhProg { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.nbh-v { flex: 1; display: grid; }
.nbh-p { grid-area: 1 / 1; display: flex; opacity: 0; visibility: hidden; transform: translateX(14px); transition: opacity .45s ease, transform .45s ease, visibility .45s; }
.nbh-p.on { opacity: 1; visibility: visible; transform: none; }
.nbh-p > div { flex: 1; border-radius: 24px; padding: clamp(18px, 2.2vw, 28px); display: flex; flex-direction: column; }
.nbh-k { margin: 0 0 .9rem; font: 900 .8rem var(--font-display); letter-spacing: .14em; }

/* penalty panel */
.nbh-risk { background: #FFF5F5; border: 1px solid #F7C9C9; justify-content: space-between; gap: 14px; }
.nbh-th { display: flex; align-items: center; gap: .9rem; padding: 12px 16px; border-radius: 16px; background: #fff; border: 1px dashed #E8A9A9; }
.nbh-th b { flex: none; font: 900 1.35rem var(--font-display); color: #1B1D1F; }
.nbh-th span { font-size: .88rem; line-height: 1.45; color: #5B3B3B; }
.nbh-risk .nbh-k { color: #B42318; margin: 0; }
.nbh-r2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.nbh-r2 > div { background: #fff; border: 1px solid #F3D3D3; border-radius: 16px; padding: 16px 18px; }
.nbh-r2 b { display: block; font: 900 clamp(1.5rem, 2.4vw, 2.05rem)/1.1 var(--font-display); color: #B42318; letter-spacing: -.01em; }
.nbh-r2 span { font-size: .9rem; line-height: 1.45; color: #5B3B3B; }
.nbh-tot { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; padding: 18px 22px; border-radius: 16px; background: #9F1D1D; color: #fff; }
.nbh-tot span { font: 900 .74rem/1.25 var(--font-display); letter-spacing: .08em; opacity: .92; }
.nbh-tot b { font: 900 clamp(1.6rem, 2.6vw, 2.15rem)/1 var(--font-display); letter-spacing: -.01em; }
.nbh-tot em { font-style: normal; font: 800 1.05rem var(--font-display); }
.nbh-jail { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.nbh-jail li { position: relative; padding-left: 1.1rem; font-size: .92rem; line-height: 1.5; color: #4A2E2E; }
.nbh-jail li::before { content: "!"; position: absolute; left: 0; top: 0; font: 900 .95rem var(--font-display); color: #B42318; }
.nbh-src { margin: 0; font-size: .8rem; line-height: 1.5; color: #876969; }

/* how-it-works panel */
.nbh-how { background: #F3F8FA; border: 1px solid #E1ECF0; }
.nbh-how .nbh-k { color: #0A7F99; display: flex; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.nbh-how .nbh-k span { font: 700 .82rem var(--font-display); letter-spacing: 0; color: #4A5A63; }
.nbh-how .nbh-k span b { color: #0A3C4B; font-weight: 900; }
.nbh-hb { flex: 1; display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 18px; align-items: center; }
.nbh-ph { width: 160px; height: 318px; border-radius: 30px; background: #14232B; padding: 7px; box-shadow: 0 18px 36px -18px rgba(10,40,55,.6); }
.nbh-ph > div { position: relative; height: 100%; border-radius: 24px; background: #F6F9FA; padding: 11px 12px; display: flex; flex-direction: column; gap: 6px; }
.nbh-ph-bar { display: flex; justify-content: space-between; align-items: center; font: 800 9px var(--font-display); }
.nbh-ph-bar i { width: 48px; height: 13px; border-radius: 999px; background: #14232B; }
.nbh-ph-k { margin: 20px 0 0; font: 800 9px var(--font-display); color: #0A7F99; }
.nbh-ph-t { margin: 0; font: 900 14px var(--font-display); color: #1B1D1F; }
.nbh-ph-d { margin: 0 0 4px; font-size: 8.5px; line-height: 1.35; color: #6B7B83; }
.nbh-ph-in { height: 26px; border: 1px solid #E1ECF0; border-radius: 7px; background: #fff; font-size: 8.5px; color: #9AA7AD; padding: 7px 8px; }
.nbh-ph-btn { position: absolute; left: 12px; right: 12px; bottom: 15px; height: 28px; border-radius: 8px; background: #0A6F86; color: #fff; font: 800 9.5px var(--font-display); display: grid; place-items: center; }
.nbh-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.nbh-steps li { display: flex; gap: 10px; align-items: flex-start; background: #fff; border: 1px solid #E1ECF0; border-radius: 12px; padding: 8px 11px; }
.nbh-steps .n { flex: none; display: grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; background: #0B1F2A; color: #fff; font: 900 11px var(--font-display); }
.nbh-steps div { min-width: 0; }
.nbh-steps b { display: block; font: 900 .92rem/1.2 var(--font-display); color: #1B1D1F; }
.nbh-steps small { display: block; font-size: .8rem; line-height: 1.35; color: #4A5A63; }
.nbh-who { display: inline-block; font: 800 .66rem var(--font-display); font-style: normal; padding: .1rem .45rem; border-radius: 999px; margin-bottom: 2px; }
.nbh-who.p { background: #E8EAFD; color: #3730A3; } .nbh-who.a { background: #DDF5EA; color: #157347; } .nbh-who.u { background: #FFE4E9; color: #BE123C; }

/* "Why NexBeyan" panel */
.nbh-why { background: linear-gradient(155deg, #0A2433, #0A3C4B 75%); color: #fff; gap: 14px; }
.nbh-why .nbh-k { color: #6FE0F5; margin: 0; }
.nbh-why-h { margin: 0; font: 900 clamp(1.3rem, 2.1vw, 1.65rem)/1.2 var(--font-display); color: #fff; }
.nbh-why-h span { color: #6FE0F5; }
.nbh-wg { flex: 1; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 10px; margin-top: 4px; }
.nbh-w { display: flex; gap: 11px; align-items: center; padding: 13px 14px; border-radius: 16px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); }
.nbh-w i { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: rgba(111,224,245,.16); color: #6FE0F5; }
.nbh-w i svg { width: 19px; height: 19px; }
.nbh-w b { display: block; font: 900 .95rem/1.25 var(--font-display); color: #fff; margin-bottom: 3px; }
.nbh-w b em { font-style: normal; font: 900 .62rem var(--font-display); letter-spacing: .08em; padding: .15rem .45rem; border-radius: 999px; background: linear-gradient(90deg, #FBBF24, #F97316); color: #2A1400; vertical-align: 2px; }
.nbh-w small { display: block; font-size: .8rem; line-height: 1.45; color: rgba(255,255,255,.75); }
@media (max-width: 600px) { .nbh-wg { grid-template-columns: 1fr; } }
@media (max-width: 1100px) { .nbh .nb-hero-grid { grid-template-columns: 1fr; gap: 2rem; } }
@media (max-width: 600px) {
  .nbh-r2 { grid-template-columns: 1fr; }
  .nbh-hb { grid-template-columns: 1fr; }
  .nbh-ph { display: none; }
  .nbh-tabs button { padding: .45rem .85rem; font-size: .85rem; }
}
@media (prefers-reduced-motion: reduce) { .nbh-p { transition: none; } .nbh-tabs button::after { animation: none; } }

/* modular solutions: static list of every module page */
.mdx-all{margin-top:2.5rem;padding-top:1.75rem;border-top:1px solid rgba(10,127,153,.14)}
.mdx-all-h{font-size:1rem;font-weight:800;letter-spacing:.02em;color:#2B2E31;margin:0 0 .9rem}
.mdx-all ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.mdx-all a{display:inline-block;padding:.45rem .85rem;border:1px solid rgba(10,127,153,.25);border-radius:999px;background:#fff;color:var(--cyan-deep);font-size:.85rem;font-weight:700;text-decoration:none}
.mdx-all a:hover{border-color:var(--cyan-primary);background:#edf8fa}

.footer-legal-link{font-size:.85rem;font-weight:600;color:var(--text-secondary,#475569);text-decoration:underline;text-underline-offset:3px}
.footer-legal-link:hover{color:var(--cyan-deep)}