/* ==========================================================================
   socei.ai Website — Complete Stylesheet
   ========================================================================== */

/* ── CSS Custom Properties ─────────────────────────────────────────────── */
:root {
  --c-primary:       #4F46E5;
  --c-primary-dark:  #3730A3;
  --c-primary-light: #EEF2FF;
  --c-accent:        #7C3AED;
  --c-accent-light:  #F5F3FF;
  --c-green:         #059669;
  --c-green-light:   #ECFDF5;
  --c-orange:        #D97706;
  --c-orange-light:  #FFF7ED;
  --c-teal:          #0891B2;
  --c-teal-light:    #ECFEFF;

  --text-h:     #0F172A;
  --text-body:  #334155;
  --text-light: #64748B;
  --text-xs:    #94A3B8;

  --bg:         #FFFFFF;
  --bg-alt:     #F8FAFC;
  --bg-dark:    #0F0E2A;
  --border:     #E2E8F0;

  --radius-sm:  8px;
  --radius-md:  14px;
  --radius-lg:  20px;
  --radius-xl:  28px;

  --shadow-sm:  0 1px 3px rgba(0,0,0,.08);
  --shadow-md:  0 4px 16px rgba(0,0,0,.10);
  --shadow-lg:  0 12px 40px rgba(0,0,0,.14);
  --shadow-xl:  0 24px 64px rgba(0,0,0,.18);

  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --nav-h: 68px;
}

/* ── Reset & Base ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; font-size: 16px; }

body.socei-body {
  font-family: var(--font);
  color: var(--text-body);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--c-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }

/* ── Layout Utilities ──────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
.text-center { text-align: center; }
.mt-8 { margin-top: 32px; }

/* ── Reveal Animation ──────────────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.visible {
  opacity: 1;
  transform: none;
}

/* ── Buttons ───────────────────────────────────────────────────────────── */
.btn-hero-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: white;
  color: var(--c-primary);
  padding: 14px 28px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 15px;
  transition: transform .2s, box-shadow .2s;
  box-shadow: 0 4px 20px rgba(255,255,255,.25);
}
.btn-hero-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(255,255,255,.35); text-decoration: none; }

.btn-hero-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: white;
  padding: 14px 28px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 15px;
  border: 1.5px solid rgba(255,255,255,.5);
  transition: background .2s;
}
.btn-hero-outline:hover { background: rgba(255,255,255,.1); text-decoration: none; }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--c-primary-light);
  color: var(--c-primary);
  padding: 12px 24px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 14px;
  transition: background .2s;
}
.btn-secondary:hover { background: #dde4ff; text-decoration: none; }

/* ── Navigation ────────────────────────────────────────────────────────── */
.socei-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  z-index: 1000;
  transition: background .3s, box-shadow .3s;
}
.socei-nav.scrolled {
  background: rgba(255,255,255,.98);
  backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 rgba(79,70,229,.12), 0 4px 16px rgba(0,0,0,.06);
}
.socei-nav.scrolled .nav-link { color: var(--text-h); font-weight: 600; }
.socei-nav.scrolled .nav-link:hover { color: var(--c-primary); background: var(--c-primary-light); }
.socei-nav.scrolled .brand-text { color: var(--c-primary); }
.socei-nav.scrolled .brand-mark { color: var(--c-primary); }
.socei-nav.scrolled .brand-dot-ai { color: var(--c-accent); }
.socei-nav.scrolled .nav-btn { background: var(--c-primary); color: white; border-color: var(--c-primary); }
.socei-nav.scrolled .nav-btn:hover { background: var(--c-primary-dark); }
.socei-nav.scrolled .nav-divider { background: var(--border); }
/* Active link — on white scrolled nav */
.socei-nav.scrolled .nav-active {
  color: var(--c-primary) !important;
  background: var(--c-primary-light);
  font-weight: 700;
  position: relative;
}
.socei-nav.scrolled .nav-active::after {
  content: '';
  position: absolute;
  bottom: 4px; left: 50%;
  transform: translateX(-50%);
  width: 20px; height: 2.5px;
  background: var(--c-primary);
  border-radius: 2px;
}
/* Active link — on dark transparent nav (homepage) */
.socei-nav:not(.scrolled) .nav-active {
  color: white !important;
  background: rgba(255,255,255,.2);
  font-weight: 700;
}

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

.nav-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
.brand-mark { font-size: 18px; color: white; transition: color .3s; }
.brand-text {
  font-size: 20px;
  font-weight: 800;
  color: white;
  letter-spacing: -0.5px;
  transition: color .3s;
}
.brand-dot-ai { color: rgba(255,255,255,.7); transition: color .3s; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 8px;
}
.nav-link {
  color: rgba(255,255,255,.9);
  font-size: 14px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  transition: color .2s, background .2s;
  text-decoration: none;
  letter-spacing: -0.1px;
}
.nav-link:hover { color: white; background: rgba(255,255,255,.12); text-decoration: none; }
.nav-divider { width: 1px; height: 20px; background: rgba(255,255,255,.3); margin: 0 8px; }

.nav-btn {
  background: white;
  color: var(--c-primary);
  padding: 8px 20px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 700;
  border: none;
  transition: background .2s, box-shadow .2s, transform .15s;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.nav-btn:hover { background: var(--c-primary); color: white; box-shadow: 0 4px 16px rgba(79,70,229,.4); transform: translateY(-1px); text-decoration: none; }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: white;
  border-radius: 2px;
  transition: transform .3s;
}

/* ── Hero Section ──────────────────────────────────────────────────────── */
.hero {
  min-height: 100vh;
  background: linear-gradient(135deg, #0A0920 0%, #1A1660 35%, #3730A3 65%, #6D28D9 100%);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding-top: var(--nav-h);
}

.hero-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
}
.hero-glow-1 {
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(124,58,237,.35) 0%, transparent 70%);
  top: -100px; right: -100px;
  animation: glowPulse 8s ease-in-out infinite alternate;
}
.hero-glow-2 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(79,70,229,.3) 0%, transparent 70%);
  bottom: 50px; left: 5%;
  animation: glowPulse 6s ease-in-out infinite alternate-reverse;
}
@keyframes glowPulse { 0% { opacity: .4; transform: scale(1); } 100% { opacity: .8; transform: scale(1.15); } }

.hero-content {
  position: relative;
  z-index: 2;
  flex: 1;
  padding: 80px 24px;
  max-width: 640px;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  color: rgba(255,255,255,.9);
  padding: 6px 14px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 24px;
}
.badge-dot { width: 6px; height: 6px; background: #34D399; border-radius: 50%; animation: badgePulse 2s infinite; }
@keyframes badgePulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }

.hero-title {
  font-size: clamp(36px, 5vw, 60px);
  font-weight: 900;
  line-height: 1.1;
  color: white;
  letter-spacing: -1.5px;
  margin-bottom: 20px;
}
.gradient-text {
  background: linear-gradient(90deg, #A78BFA, #60A5FA);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-subtitle {
  color: rgba(255,255,255,.75);
  font-size: 17px;
  line-height: 1.7;
  margin-bottom: 36px;
  max-width: 500px;
}

.hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  color: rgba(255,255,255,.6);
  font-size: 13px;
}
.hero-trust span { display: flex; align-items: center; gap: 4px; }

/* ── Phone Mockup ──────────────────────────────────────────────────────── */
.hero-visual {
  position: absolute;
  right: 80px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}

.phone-mockup {
  width: 240px;
  background: #1E293B;
  border-radius: 36px;
  padding: 16px;
  box-shadow: 0 40px 80px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.1);
  animation: floatPhone 4s ease-in-out infinite alternate;
}
@keyframes floatPhone { 0% { transform: translateY(0); } 100% { transform: translateY(-12px); } }

.phone-screen { background: white; border-radius: 24px; overflow: hidden; }

.phone-header {
  background: linear-gradient(135deg, #3730A3, #6D28D9);
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.phone-avatar {
  width: 32px; height: 32px;
  background: rgba(255,255,255,.2);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: white;
}
.phone-name { color: white; font-size: 12px; font-weight: 600; }
.phone-sub  { color: rgba(255,255,255,.7); font-size: 10px; }

.phone-card {
  background: linear-gradient(135deg, #4F46E5, #7C3AED);
  margin: 10px;
  border-radius: 14px;
  padding: 12px;
}
.phone-label  { color: rgba(255,255,255,.7); font-size: 9px; letter-spacing: 1px; font-weight: 600; }
.phone-amount { color: white; font-size: 26px; font-weight: 800; margin: 4px 0; }
.phone-chips  { display: flex; gap: 6px; margin: 6px 0; }
.chip-red     { background: rgba(239,68,68,.25); color: #FCA5A5; padding: 2px 7px; border-radius: 20px; font-size: 9px; font-weight: 600; }
.chip-yellow  { background: rgba(245,158,11,.25); color: #FDE68A; padding: 2px 7px; border-radius: 20px; font-size: 9px; font-weight: 600; }
.phone-btn    { background: white; color: #4F46E5; text-align: center; border-radius: 8px; padding: 5px; font-size: 10px; font-weight: 700; margin-top: 8px; cursor: pointer; }

.phone-action-row {
  display: flex;
  justify-content: space-around;
  padding: 10px 8px;
  border-top: 1px solid #F1F5F9;
}
.phone-action { text-align: center; font-size: 9px; color: #64748B; }

/* ── Stats ─────────────────────────────────────────────────────────────── */
.stats-section {
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 36px 0;
}
.stats-grid {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
}
.stat-item {
  text-align: center;
  padding: 16px 40px;
}
.stat-value {
  font-size: 32px;
  font-weight: 800;
  color: var(--c-primary);
  letter-spacing: -1px;
  line-height: 1;
}
.stat-label { color: var(--text-light); font-size: 13px; margin-top: 4px; }
.stat-sep { width: 1px; height: 48px; background: var(--border); }

/* ── Section Shared ────────────────────────────────────────────────────── */
.section-header {
  text-align: center;
  max-width: 600px;
  margin: 0 auto 56px;
}
.section-tag {
  display: inline-block;
  background: var(--c-primary-light);
  color: var(--c-primary);
  padding: 4px 14px;
  border-radius: 50px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.section-header h2 {
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 800;
  color: var(--text-h);
  letter-spacing: -0.5px;
  margin-bottom: 14px;
}
.section-header p {
  color: var(--text-light);
  font-size: 16px;
}

/* ── Features Grid (Home) ──────────────────────────────────────────────── */
.features-section { padding: 96px 0; background: var(--bg); }
.features-grid-home {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.feature-card {
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  transition: box-shadow .25s, transform .25s;
}
.feature-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }
.feat-icon {
  width: 52px; height: 52px;
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.feat-icon-blue   { background: #EEF2FF; color: #4F46E5; }
.feat-icon-green  { background: #ECFDF5; color: #059669; }
.feat-icon-purple { background: #F5F3FF; color: #7C3AED; }
.feat-icon-orange { background: #FFF7ED; color: #D97706; }
.feat-icon-indigo { background: #EEF2FF; color: #4338CA; }
.feat-icon-teal   { background: #ECFEFF; color: #0891B2; }
.feat-icon-rose   { background: #FFF1F2; color: #BE123C; }
.feat-icon-amber  { background: #FFFBEB; color: #B45309; }

.feature-card h3 { font-size: 17px; font-weight: 700; color: var(--text-h); margin-bottom: 10px; }
.feature-card p  { color: var(--text-light); font-size: 14px; line-height: 1.6; }

.features-cta { text-align: center; margin-top: 48px; }

/* ── How It Works ──────────────────────────────────────────────────────── */
.how-section { padding: 80px 0; background: var(--bg-alt); }
.steps-grid {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}
.step-card {
  flex: 1;
  background: white;
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
}
.step-num {
  font-size: 48px;
  font-weight: 900;
  color: var(--c-primary-light);
  line-height: 1;
  margin-bottom: 14px;
}
.step-card h3 { font-size: 17px; font-weight: 700; color: var(--text-h); margin-bottom: 10px; }
.step-card p  { color: var(--text-light); font-size: 14px; line-height: 1.6; }
.step-arrow { font-size: 28px; color: var(--c-primary); padding-top: 60px; }

/* ── Pricing Preview ───────────────────────────────────────────────────── */
.pricing-preview-section { padding: 96px 0; background: white; }
.pricing-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 28px;
}
.price-card {
  border: 1.5px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 32px;
  position: relative;
  background: white;
  display: flex;
  flex-direction: column;
}
.price-card-featured {
  border-color: var(--c-primary);
  background: linear-gradient(180deg, var(--c-primary-light) 0%, white 100%);
  box-shadow: 0 0 0 3px rgba(79,70,229,.15), var(--shadow-md);
  transform: scale(1.03);
}
.price-popular-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(90deg, var(--c-primary), var(--c-accent));
  color: white;
  padding: 4px 18px;
  border-radius: 50px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.price-plan-name { font-size: 18px; font-weight: 700; color: var(--text-h); margin-bottom: 8px; }
.price-amount {
  font-size: 42px;
  font-weight: 900;
  color: var(--text-h);
  letter-spacing: -1.5px;
  line-height: 1;
  margin-bottom: 4px;
}
.price-currency { font-size: 22px; font-weight: 700; vertical-align: top; margin-top: 8px; display: inline-block; }
.price-period { font-size: 14px; font-weight: 400; color: var(--text-light); }
.price-sub { color: var(--text-light); font-size: 13px; margin-bottom: 24px; }
.price-features-list { list-style: none; font-size: 14px; color: var(--text-body); margin-bottom: 24px; flex: 1; }
.price-features-list li { padding: 5px 0; }

.btn-price-primary, .btn-price-outline {
  display: block;
  text-align: center;
  padding: 13px 20px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  transition: transform .2s, box-shadow .2s;
}
.btn-price-primary {
  background: linear-gradient(90deg, var(--c-primary), var(--c-accent));
  color: white;
  box-shadow: 0 4px 16px rgba(79,70,229,.3);
}
.btn-price-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(79,70,229,.4); text-decoration: none; }
.btn-price-outline {
  border: 1.5px solid var(--c-primary);
  color: var(--c-primary);
}
.btn-price-outline:hover { background: var(--c-primary-light); text-decoration: none; }

.pricing-addon-note {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--c-primary-light);
  border: 1px solid #C7D2FE;
  border-radius: var(--radius-md);
  padding: 14px 20px;
  font-size: 14px;
  color: var(--c-primary-dark);
  margin-bottom: 32px;
}

/* ── Mobile Apps Section ───────────────────────────────────────────────── */
.apps-section { padding: 96px 0; background: var(--bg-alt); }
.apps-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.apps-subtitle { color: var(--text-light); font-size: 16px; margin-bottom: 32px; }
.app-roles-grid { display: flex; flex-direction: column; gap: 16px; margin-bottom: 32px; }
.app-role {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.app-role-icon {
  width: 40px; height: 40px; min-width: 40px;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
}
.app-role strong { display: block; font-size: 14px; color: var(--text-h); margin-bottom: 2px; }
.app-role span   { font-size: 13px; color: var(--text-light); }

.app-store-badges { display: flex; gap: 12px; }
.app-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--text-h);
  color: white;
  padding: 10px 20px;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .2s;
}
.app-badge:hover { opacity: .85; }

/* Mini phone mockups */
.apps-phones { position: relative; height: 320px; }
.mini-phone {
  width: 180px;
  background: white;
  border-radius: 22px;
  padding: 12px;
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--border);
  position: absolute;
}
.mp1 { top: 0; left: 0; z-index: 2; }
.mp2 { bottom: 0; right: 0; z-index: 1; }
.mp-bar { width: 40px; height: 4px; background: var(--border); border-radius: 2px; margin: 0 auto 12px; }
.mp-section-title { font-size: 10px; font-weight: 700; color: var(--text-h); margin-bottom: 10px; }
.mp-approval { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.mp-approval-dot { width: 8px; height: 8px; border-radius: 50%; min-width: 8px; }
.mp-list { margin-top: 10px; }
.mp-list-item { display: flex; align-items: center; gap: 6px; font-size: 9px; color: var(--text-light); padding: 4px 0; border-bottom: 1px solid #F1F5F9; }

/* ── Compliance Section ────────────────────────────────────────────────── */
.compliance-section { padding: 96px 0; background: white; }
.compliance-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.compliance-card-stack { position: relative; height: 260px; }
.comp-card {
  background: white;
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border);
  position: absolute;
  width: 260px;
}
.cc1 { top: 0; left: 0; z-index: 3; }
.cc2 { top: 40px; left: 40px; z-index: 2; }
.cc3 { top: 80px; left: 80px; z-index: 1; }
.cc-label { font-size: 10px; color: var(--text-light); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px; }
.cc-value { font-size: 15px; font-weight: 700; color: var(--text-h); margin-bottom: 6px; }
.cc-status { font-size: 12px; font-weight: 600; }

.compliance-list { display: flex; flex-direction: column; gap: 12px; margin: 24px 0; }
.comp-item { display: flex; gap: 10px; font-size: 14px; color: var(--text-body); }
.comp-check { color: var(--c-green); font-weight: 700; min-width: 16px; }

/* ── Reports Strip ─────────────────────────────────────────────────────── */
.reports-strip { padding: 80px 0; background: var(--bg-alt); }
.reports-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.report-item {
  background: white;
  border-radius: var(--radius-lg);
  padding: 22px;
  border: 1px solid var(--border);
  transition: box-shadow .2s;
}
.report-item:hover { box-shadow: var(--shadow-md); }
.report-icon { font-size: 32px; margin-bottom: 14px; }
.report-item h4 { font-size: 16px; font-weight: 700; color: var(--text-h); margin-bottom: 8px; }
.report-item p  { font-size: 14px; color: var(--text-light); line-height: 1.6; }

/* ── CTA Section ───────────────────────────────────────────────────────── */
.cta-section {
  background: linear-gradient(135deg, #1A1660 0%, #4338CA 50%, #6D28D9 100%);
  padding: 100px 24px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-glow {
  position: absolute;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(124,58,237,.4) 0%, transparent 70%);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.cta-content { position: relative; z-index: 2; }
.cta-title {
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 900;
  color: white;
  letter-spacing: -1px;
  margin-bottom: 14px;
}
.cta-subtitle { color: rgba(255,255,255,.75); font-size: 17px; margin-bottom: 36px; }
.cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 20px; }
.cta-note { color: rgba(255,255,255,.5); font-size: 13px; }

/* ── Footer ────────────────────────────────────────────────────────────── */
.socei-footer {
  background: var(--bg-dark);
  color: rgba(255,255,255,.7);
  padding: 64px 24px 0;
}
.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 64px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.footer-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}
.socei-footer .brand-mark { color: rgba(255,255,255,.8); }
.socei-footer .brand-text { color: white; font-size: 20px; font-weight: 800; }
.socei-footer .brand-dot-ai { color: rgba(255,255,255,.75); }
.footer-tagline { font-size: 14px; color: rgba(255,255,255,.75); line-height: 1.6; margin-bottom: 20px; }

.footer-badges { display: flex; flex-direction: column; gap: 6px; }
.footer-badge {
  display: inline-block;
  background: rgba(255,255,255,.12);
  color: rgba(255,255,255,.82);
  padding: 4px 12px;
  border-radius: 50px;
  font-size: 12px;
  border: 1px solid rgba(255,255,255,.22);
  width: fit-content;
}

.footer-links-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.footer-col h4 {
  color: white;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  margin-bottom: 14px;
}
.footer-col a {
  display: block;
  color: rgba(255,255,255,.75);
  font-size: 14px;
  margin-bottom: 10px;
  transition: color .2s;
  text-decoration: none;
}
.footer-col a { border-bottom: 1px solid rgba(255,255,255,.18); padding-bottom: 1px; }
.footer-col a:hover { color: white; text-decoration: none; border-bottom-color: rgba(255,255,255,.6); }

.footer-bottom {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 0;
  font-size: 13px;
  color: rgba(255,255,255,.6);
}

/* ── Page Hero (inner pages) ───────────────────────────────────────────── */
.page-hero {
  background: linear-gradient(135deg, #0A0920 0%, #3730A3 60%, #5B21B6 100%);
  padding: calc(var(--nav-h) + 60px) 24px 60px;
  text-align: center;
}
.page-hero h1 {
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 900;
  color: white;
  letter-spacing: -1px;
  margin-bottom: 16px;
}
.page-hero p { color: rgba(255,255,255,.7); font-size: 17px; max-width: 600px; margin: 0 auto; }
.breadcrumb-nav {
  font-size: 13px;
  color: rgba(255,255,255,.5);
  margin-bottom: 20px;
}
.breadcrumb-nav a { color: rgba(255,255,255,.6); text-decoration: none; }

/* ── Features Deep Dive ────────────────────────────────────────────────── */
.feature-deep-section { padding: 80px 0; }
.feat-alt-bg { background: var(--bg-alt); }

.feat-deep-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 48px;
}
.feat-deep-icon {
  width: 64px; height: 64px; min-width: 64px;
  border-radius: var(--radius-lg);
  display: flex; align-items: center; justify-content: center;
}
.feat-deep-header h2 { font-size: 28px; font-weight: 800; color: var(--text-h); margin-bottom: 4px; }
.feat-deep-header p  { color: var(--text-light); font-size: 15px; }

.feat-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.feat-detail-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 24px;
}
.feat-detail-card h4 { font-size: 15px; font-weight: 700; color: var(--text-h); margin-bottom: 8px; }
.feat-detail-card p  { font-size: 14px; color: var(--text-light); line-height: 1.6; }

/* App roles full grid */
.app-roles-full-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.app-role-card {
  background: white;
  border-radius: var(--radius-lg);
  padding: 28px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.arc-title { font-size: 16px; font-weight: 700; margin-bottom: 16px; }
.app-role-card ul { list-style: none; }
.app-role-card li {
  font-size: 13px;
  color: var(--text-light);
  padding: 5px 0;
  padding-left: 16px;
  position: relative;
}
.app-role-card li::before { content: '→'; position: absolute; left: 0; color: var(--c-primary); font-size: 11px; }

/* ── Pricing Page ──────────────────────────────────────────────────────── */
.pricing-section { padding: 64px 0; }
.pricing-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.pricing-card {
  background: white;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 24px;
  position: relative;
  display: flex;
  flex-direction: column;
}
.pricing-card-featured {
  border-color: var(--c-primary);
  background: linear-gradient(180deg, #EEF2FF 0%, white 30%);
  box-shadow: 0 0 0 3px rgba(79,70,229,.12), var(--shadow-lg);
}
.pc-popular {
  position: absolute;
  top: -15px; left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(90deg, var(--c-primary), var(--c-accent));
  color: white;
  padding: 5px 20px;
  border-radius: 50px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.pc-header { margin-bottom: 20px; }
.pc-plan { font-size: 17px; font-weight: 800; color: var(--text-h); margin-bottom: 10px; }
.pc-price { font-size: 36px; font-weight: 900; color: var(--text-h); letter-spacing: -2px; line-height: 1; }
.pc-price-range { font-size: 28px; }
.pc-price-note { font-size: 12px; color: var(--text-light); font-weight: 400; letter-spacing: 0; margin-top: 4px; }
.pc-currency { font-size: 18px; font-weight: 700; vertical-align: top; margin-top: 8px; display: inline-block; }
.pc-period { font-size: 12px; font-weight: 400; color: var(--text-light); }
.pc-desc { font-size: 12px; color: var(--text-light); margin-top: 8px; line-height: 1.5; }

.btn-price-full {
  display: block;
  text-align: center;
  padding: 14px 20px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 28px;
  transition: transform .2s, box-shadow .2s;
  text-decoration: none;
}
.btn-price-primary-full {
  background: linear-gradient(90deg, var(--c-primary), var(--c-accent));
  color: white;
  box-shadow: 0 4px 16px rgba(79,70,229,.3);
}
.btn-price-primary-full:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(79,70,229,.4); text-decoration: none; }
.btn-price-outline-full { border: 1.5px solid var(--c-primary); color: var(--c-primary); }
.btn-price-outline-full:hover { background: var(--c-primary-light); text-decoration: none; }

/* Button alignment: reorder so header → features → button (button pinned to bottom) */
.pricing-card .pc-header      { order: 0; }
.pricing-card .pc-features    { order: 1; flex: 1; font-size: 14px; }
.pricing-card .btn-price-full { order: 2; margin-top: 20px; }
.pc-feat-group {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--text-light);
  margin: 18px 0 8px;
}
.pc-feat { display: flex; align-items: baseline; gap: 8px; padding: 4px 0; color: var(--text-body); }
.check { color: var(--c-green); font-weight: 700; min-width: 14px; }
.dash  { color: var(--text-xs); min-width: 14px; }
.add-on { color: var(--c-primary); font-size: 12px; font-weight: 600; margin-top: 10px; display: block; }

/* ── Addon Callout ─────────────────────────────────────────────────────── */
.addon-callout { padding: 0 0 48px; }
.addon-card {
  background: var(--bg-alt);
  border: 1.5px solid #C7D2FE;
  border-radius: var(--radius-lg);
  padding: 32px;
  display: flex;
  align-items: flex-start;
  gap: 20px;
}
.addon-icon { font-size: 36px; min-width: 48px; }
.addon-content h3 { font-size: 18px; font-weight: 700; color: var(--text-h); margin-bottom: 8px; }
.addon-content p  { font-size: 14px; color: var(--text-light); line-height: 1.6; }

/* ── Comparison Table ──────────────────────────────────────────────────── */
.comparison-section { padding: 64px 0 80px; }
.table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-lg); border: 1px solid var(--border); }
.comparison-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.comparison-table thead th {
  background: var(--bg-alt);
  padding: 16px 20px;
  text-align: left;
  font-weight: 700;
  color: var(--text-h);
  border-bottom: 2px solid var(--border);
}
.plan-col { text-align: center; min-width: 140px; }
.plan-col-featured { background: var(--c-primary-light); }
.feat-col { min-width: 200px; }
.th-price { display: block; font-size: 11px; font-weight: 500; color: var(--text-light); margin-top: 2px; }

.comparison-table tbody tr:nth-child(even) { background: #FAFAFA; }
.comparison-table tbody td { padding: 11px 20px; border-bottom: 1px solid var(--border); color: var(--text-body); }
.comparison-table tbody td:not(:first-child) { text-align: center; }
.cat-row td { background: var(--bg-alt); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-body); padding: 10px 20px; }
.featured-col { background: rgba(79,70,229,.04); font-weight: 600; color: var(--c-primary); }

/* ── FAQ ───────────────────────────────────────────────────────────────── */
.faq-section { padding: 80px 0; background: var(--bg-alt); }
.faq-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.faq-item { background: white; border-radius: var(--radius-lg); padding: 28px; border: 1px solid var(--border); }
.faq-item h4 { font-size: 15px; font-weight: 700; color: var(--text-h); margin-bottom: 10px; }
.faq-item p  { font-size: 14px; color: var(--text-light); line-height: 1.6; }

/* ── Contact Page ──────────────────────────────────────────────────────── */
.contact-section { padding: 64px 0 80px; }
.contact-grid { display: grid; grid-template-columns: 1fr 380px; gap: 40px; align-items: start; }

.contact-form-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 40px;
  box-shadow: var(--shadow-md);
}
.contact-form-card h2 { font-size: 24px; font-weight: 800; color: var(--text-h); margin-bottom: 8px; }
.form-subtitle { color: var(--text-light); margin-bottom: 28px; }

.demo-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 0; }
.form-group label { font-size: 13px; font-weight: 600; color: var(--text-h); }
.form-group input,
.form-group select,
.form-group textarea {
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 11px 14px;
  font-size: 14px;
  font-family: var(--font);
  color: var(--text-body);
  background: white;
  transition: border-color .2s;
  outline: none;
  width: 100%;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--c-primary); }
.form-group textarea { resize: vertical; }

.btn-form-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: linear-gradient(90deg, var(--c-primary), var(--c-accent));
  color: white;
  border: none;
  padding: 14px;
  border-radius: 50px;
  font-size: 15px;
  font-weight: 700;
  font-family: var(--font);
  cursor: pointer;
  margin-top: 8px;
  transition: opacity .2s, transform .2s;
}
.btn-form-submit:hover { opacity: .9; transform: translateY(-1px); }
.form-privacy { font-size: 12px; color: var(--text-light); text-align: center; margin-top: 12px; }

.contact-info-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 28px;
}
.contact-info-card h3 { font-size: 17px; font-weight: 700; color: var(--text-h); margin-bottom: 20px; }
.ci-points { display: flex; flex-direction: column; gap: 16px; }
.ci-point { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; }
.ci-point span { font-size: 20px; min-width: 28px; }
.ci-point strong { display: block; color: var(--text-h); margin-bottom: 2px; }
.ci-point span:last-child { color: var(--text-light); }

.ci-contact-items { display: flex; flex-direction: column; gap: 16px; }
.ci-contact-item { display: flex; gap: 12px; align-items: flex-start; }
.ci-icon { font-size: 20px; min-width: 28px; }
.ci-contact-item strong { display: block; font-size: 13px; color: var(--text-h); margin-bottom: 2px; }
.ci-contact-item a, .ci-contact-item span { font-size: 14px; color: var(--c-primary); }
.ci-contact-item span { color: var(--text-light); }

.form-success { text-align: center; padding: 48px 20px; }
.success-icon { font-size: 56px; margin-bottom: 16px; }
.form-success h3 { font-size: 24px; font-weight: 800; color: var(--text-h); margin-bottom: 8px; }
.form-success p { color: var(--text-light); margin-bottom: 28px; }

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .hero-visual { display: none; }
  .features-grid-home { grid-template-columns: repeat(2, 1fr); }
  .pricing-preview-grid { grid-template-columns: repeat(2, 1fr); }
  .pricing-preview-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .apps-inner { grid-template-columns: 1fr; }
  .compliance-inner { grid-template-columns: 1fr; }
  .compliance-visual { display: none; }
  .footer-inner { grid-template-columns: 1fr; }
  .footer-links-grid { grid-template-columns: repeat(2, 1fr); }
  .app-roles-full-grid { grid-template-columns: repeat(2, 1fr); }
  .pricing-cards-grid { grid-template-columns: repeat(2, 1fr); }
  .feat-detail-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-grid { grid-template-columns: 1fr; }
  .reports-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .nav-links {
    display: none;
    position: fixed;
    top: var(--nav-h);
    left: 0; right: 0;
    background: white;
    padding: 24px;
    flex-direction: column;
    gap: 4px;
    box-shadow: var(--shadow-lg);
    border-top: 1px solid var(--border);
  }
  .nav-links.open { display: flex; }
  .nav-link { color: var(--text-h) !important; padding: 12px 16px; }
  .nav-divider { display: none; }
  .nav-btn { background: var(--c-primary); color: white !important; text-align: center; }
  .nav-toggle { display: flex; }

  .stats-grid { flex-direction: column; }
  .stat-sep { width: 40px; height: 1px; }
  .steps-grid { flex-direction: column; }
  .step-arrow { display: none; }
  .features-grid-home { grid-template-columns: 1fr; }
  .app-roles-full-grid { grid-template-columns: 1fr; }
  .feat-detail-grid { grid-template-columns: 1fr; }
  .faq-grid { grid-template-columns: 1fr; }
  .reports-grid { grid-template-columns: 1fr; }
  .footer-links-grid { grid-template-columns: repeat(2, 1fr); }
  .demo-form .form-row { grid-template-columns: 1fr; }
  .addon-card { flex-direction: column; }
}

/* ── Staff Login Page Branding ──────────────────────────────────────────── */
body.bg-100 {
  background: linear-gradient(135deg, #0F0E2A 0%, #1E1B6B 50%, #4338CA 100%) !important;
  min-height: 100vh;
}
body.bg-100 .card {
  border-radius: 20px !important;
  box-shadow: 0 25px 60px rgba(0,0,0,.35) !important;
  max-width: 420px !important;
  font-family: 'Inter', system-ui, sans-serif !important;
}
body.bg-100 .btn-primary {
  background: linear-gradient(90deg, #4F46E5, #7C3AED) !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 10px 16px !important;
  font-weight: 600 !important;
}
body.bg-100 .form-control {
  border-radius: 10px !important;
  border: 1.5px solid #E2E8F0 !important;
}
body.bg-100 .text-center.small a[href*="odoo.com"] {
  display: none !important;
}
body.bg-100 .text-center.small .border-end {
  border: none !important;
}

/* ── Plan Type Strip ────────────────────────────────────────────────────── */
.plan-type-section { padding: 36px 0 0; }
.plan-type-strip {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.pts-block {
  flex: 1;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 28px 32px;
}
.pts-icon { font-size: 32px; min-width: 40px; }
.pts-title { font-size: 16px; font-weight: 800; color: var(--text-h); margin-bottom: 6px; }
.pts-desc  { font-size: 13px; color: var(--text-light); line-height: 1.6; }
.pts-self  { background: white; }
.pts-managed { background: #F0FDFA; }
.pts-divider {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px 0;
  width: 48px;
  min-width: 48px;
}
.pts-divider-line { width: 1px; height: 40px; background: var(--border); }
.pts-vs { font-size: 11px; font-weight: 700; color: var(--text-xs); }

/* ── Managed Service Card Variants ─────────────────────────────────────── */
.pricing-card-managed {
  border-color: #047857;
  background: linear-gradient(180deg, #ECFDF5 0%, white 40%);
}
.pricing-card-gst {
  border-color: #059669;
  background: linear-gradient(180deg, #ECFDF5 0%, white 40%);
}

.pc-managed-badge {
  position: absolute;
  top: -15px; left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(90deg, #047857, #059669);
  color: white;
  padding: 5px 18px;
  border-radius: 50px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.pc-managed-gst-badge {
  position: absolute;
  top: -15px; left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(90deg, #7C3AED, #059669);
  color: white;
  padding: 5px 18px;
  border-radius: 50px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.pc-service-label {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 50px;
  margin-bottom: 10px;
  letter-spacing: .3px;
}
.pc-service-self    { background: #EEF2FF; color: #4F46E5; }
.pc-service-managed { background: #D1FAE5; color: #065F46; }

.btn-price-managed-full {
  display: block;
  text-align: center;
  padding: 14px 20px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 28px;
  transition: transform .2s, box-shadow .2s;
  text-decoration: none;
  background: linear-gradient(135deg, #065F46, #047857);
  color: white;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(4,120,87,.35);
}
.btn-price-managed-full:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(4,120,87,.45); text-decoration: none; color: white; }

.pc-accountant-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: #ECFDF5;
  border: 1px solid #A7F3D0;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 11px;
  color: #065F46;
  font-weight: 600;
  margin-bottom: 18px;
  line-height: 1.4;
}
.pc-enach-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: #EEF2FF;
  border: 1px solid #C7D2FE;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 11px;
  color: #4338CA;
  font-weight: 600;
  margin-bottom: 18px;
  line-height: 1.4;
}

.check-m   { color: #047857; font-weight: 700; min-width: 14px; }
.check-gst { color: #059669; font-weight: 700; min-width: 14px; }

/* ── Managed Service Explainer Section ─────────────────────────────────── */
.managed-explainer-section {
  padding: 64px 0;
  background: var(--bg-alt);
}
.managed-section-tag { background: #D1FAE5; color: #047857; }
.managed-benefits-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.mb-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  transition: box-shadow .2s;
}
.mb-card:hover { box-shadow: var(--shadow-md); }
.mb-icon { font-size: 32px; margin-bottom: 12px; }
.mb-card h4 { font-size: 15px; font-weight: 700; color: var(--text-h); margin-bottom: 8px; }
.mb-card p  { font-size: 13px; color: var(--text-light); line-height: 1.6; }

/* ── Comparison Table — Managed Columns ─────────────────────────────────── */
.plan-col-managed     { background: #F0FDFA; min-width: 140px; }
.plan-col-managed-gst { background: #ECFDF5; min-width: 140px; }
.managed-col     { background: rgba(4,120,87,.04); font-weight: 600; color: #047857; }
.managed-gst-col { background: rgba(5,150,105,.04);  font-weight: 600; color: #059669; }
.th-type { display: inline-block; font-size: 10px; font-weight: 700; margin-top: 5px; border-radius: 50px; padding: 1px 8px; }
.self-type    { background: #EEF2FF; color: #4F46E5; }
.managed-type { background: #D1FAE5; color: #065F46; }

/* ── eNACH Section ──────────────────────────────────────────────────────── */
.enach-section { padding: 0 0 64px; }
.enach-callout {
  background: linear-gradient(135deg, #EEF2FF 0%, #F5F3FF 100%);
  border: 1.5px solid #C7D2FE;
  border-radius: var(--radius-lg);
  padding: 32px;
  display: flex;
  align-items: flex-start;
  gap: 20px;
}
.enach-icon { font-size: 40px; min-width: 48px; }
.enach-content h3 { font-size: 18px; font-weight: 700; color: var(--text-h); margin-bottom: 8px; }
.enach-content p  { font-size: 14px; color: var(--text-light); line-height: 1.6; }

/* ── Pricing Preview (4-plan homepage version) ──────────────────────────── */
.pricing-preview-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 28px;
}
.price-card-managed {
  border-color: #047857;
  background: linear-gradient(180deg, #ECFDF5 0%, white 50%);
}
.price-card-gst {
  border-color: #059669;
  background: linear-gradient(180deg, #ECFDF5 0%, white 50%);
}
.price-managed-badge {
  position: absolute;
  top: -14px; left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(90deg, #047857, #059669);
  color: white;
  padding: 4px 16px;
  border-radius: 50px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.price-gst-badge {
  position: absolute;
  top: -14px; left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(90deg, #7C3AED, #059669);
  color: white;
  padding: 4px 16px;
  border-radius: 50px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.btn-price-managed {
  display: block;
  text-align: center;
  padding: 12px 16px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
  transition: transform .2s, box-shadow .2s;
  background: linear-gradient(135deg, #065F46, #047857);
  color: white;
}
.btn-price-managed:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(4,120,87,.4); text-decoration: none; color: white; }

/* ── Self-Service Onboarding Section ────────────────────────────────────── */
.onboarding-section { padding: 80px 0; background: var(--bg-alt); }
.onboarding-steps {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 32px;
}
.ob-step {
  flex: 1;
  background: white;
  border-radius: var(--radius-lg);
  padding: 28px 22px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  position: relative;
}
.ob-step-num {
  font-size: 40px;
  font-weight: 900;
  color: var(--c-primary-light);
  line-height: 1;
  margin-bottom: 8px;
}
.ob-step-icon { font-size: 28px; margin-bottom: 10px; }
.ob-step h3 { font-size: 15px; font-weight: 700; color: var(--text-h); margin-bottom: 8px; }
.ob-step p  { font-size: 13px; color: var(--text-light); line-height: 1.6; margin-bottom: 10px; }
.ob-step-time {
  display: inline-block;
  background: var(--c-primary-light);
  color: var(--c-primary);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 50px;
}
.ob-arrow { font-size: 22px; color: var(--c-primary); padding-top: 48px; opacity: .5; }

.enach-growth-card {
  background: linear-gradient(135deg, #EEF2FF, #F5F3FF);
  border: 1.5px solid #C7D2FE;
  border-radius: var(--radius-lg);
  padding: 20px 28px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.egc-icon { font-size: 28px; min-width: 36px; }
.egc-content { flex: 1; font-size: 14px; color: var(--text-body); }
.egc-content strong { color: var(--c-primary); margin-right: 8px; }
.egc-link {
  color: var(--c-primary);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
}
.egc-link:hover { text-decoration: underline; }

/* ── Community Section ──────────────────────────────────────────────────── */
.community-section {
  padding: 96px 0;
  background: linear-gradient(180deg, #FFFBEB 0%, #FEF9F0 50%, #FFFBEB 100%);
  position: relative;
  overflow: hidden;
}
.community-blobs {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .12;
}
.blob-1 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, #4F46E5, #7C3AED);
  top: -100px; right: -100px;
}
.blob-2 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, #047857, #059669);
  bottom: -80px; left: -80px;
}
.blob-3 {
  width: 300px; height: 300px;
  background: radial-gradient(circle, #D97706, #F59E0B);
  top: 40%; left: 40%;
}
.community-tag { background: #FFF7ED; color: #D97706; }
.community-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 48px;
  position: relative;
}
.cs-card {
  background: white;
  border: 1px solid #FDE68A;
  border-radius: var(--radius-lg);
  padding: 28px;
  text-align: center;
  transition: box-shadow .2s, transform .2s;
}
.cs-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.cs-num {
  font-size: 36px;
  font-weight: 900;
  color: var(--c-primary);
  letter-spacing: -1px;
  margin-bottom: 6px;
}
.cs-label { font-size: 13px; color: var(--text-light); font-weight: 500; }
.community-testimonials {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  position: relative;
}
.ct-card {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  transition: box-shadow .2s;
}
.ct-card:hover { box-shadow: var(--shadow-md); }
.ct-quote {
  font-size: 14px;
  color: var(--text-body);
  line-height: 1.7;
  margin-bottom: 20px;
  font-style: italic;
}
.ct-quote::before { content: '"'; color: var(--c-primary); font-size: 32px; line-height: .6; vertical-align: -.2em; margin-right: 3px; }
.ct-author { display: flex; align-items: center; gap: 12px; }
.ct-avatar {
  width: 38px; height: 38px; min-width: 38px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; color: white;
}
.ct-author strong { display: block; font-size: 14px; color: var(--text-h); }
.ct-author span   { display: block; font-size: 12px; color: var(--text-light); margin-top: 1px; }

/* ── Responsive — new sections ─────────────────────────────────────────── */
@media (max-width: 1200px) {
  .managed-benefits-grid { grid-template-columns: repeat(2, 1fr); }
  .community-stats-grid  { grid-template-columns: repeat(2, 1fr); }
  .pricing-preview-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1024px) {
  .managed-benefits-grid { grid-template-columns: repeat(2, 1fr); }
  .community-testimonials { grid-template-columns: 1fr; }
  .rw-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 768px) {
  .plan-type-strip { flex-direction: column; }
  .pts-divider { flex-direction: row; width: 100%; height: 32px; padding: 0 24px; }
  .pts-divider-line { width: 40px; height: 1px; }
  .onboarding-steps { flex-direction: column; }
  .ob-connector { display: none; }
  .managed-benefits-grid { grid-template-columns: 1fr; }
  .community-stats-grid  { grid-template-columns: repeat(2, 1fr); }
  .pricing-preview-grid-4 { grid-template-columns: 1fr; }
  .enach-callout { flex-direction: column; }
  .enach-growth-card { flex-direction: column; text-align: center; }
  .pricing-cards-grid { grid-template-columns: 1fr; }
  .rw-grid { grid-template-columns: repeat(3, 1fr); }
  .hero-bldg { width: 280px; }
}

/* ═══════════════════════════════════════════════════════
   REDESIGN — HERO BUILDING ART
═══════════════════════════════════════════════════════ */
.hero-visual {
  position: absolute;
  right: 60px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}
.hero-bldg {
  position: relative;
  width: 360px;
}

/* Floating stat cards */
.hb-stat-card {
  position: absolute;
  background: rgba(255,255,255,.13);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 16px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 10;
  box-shadow: 0 8px 32px rgba(0,0,0,.2);
}
.hb-stat-1 { top: 20px; left: -60px; animation: hbFloat 5s ease-in-out infinite; }
.hb-stat-2 { top: -10px; right: -50px; animation: hbFloat 5s ease-in-out infinite reverse; animation-delay: 1.8s; }
@keyframes hbFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.hb-stat-icon { font-size: 20px; }
.hb-stat-val  { font-size: 15px; font-weight: 800; color: white; line-height: 1; }
.hb-stat-lbl  { font-size: 10px; color: rgba(255,255,255,.65); margin-top: 1px; }

/* Main building card */
.hb-card {
  background: rgba(255,255,255,.09);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 26px;
  padding: 22px;
  margin-top: 60px;
  box-shadow: 0 32px 80px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.15);
  animation: hbFloat 6s ease-in-out infinite;
  animation-delay: 0.5s;
}
.hb-card-top {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.hb-mark { font-size: 16px; color: rgba(255,255,255,.9); }
.hb-name { font-size: 13px; font-weight: 700; color: white; flex: 1; }
.hb-tag  { font-size: 10px; font-weight: 600; background: rgba(255,255,255,.12); color: rgba(255,255,255,.85); padding: 2px 8px; border-radius: 50px; border: 1px solid rgba(255,255,255,.15); }

/* Window grid (apartment floors) */
.hb-floor { display: flex; gap: 7px; margin-bottom: 7px; }
.hb-win {
  flex: 1;
  height: 38px;
  border-radius: 8px;
  animation: winBlink 3s ease-in-out infinite;
  transition: transform .2s;
}
.hb-win:hover { transform: scale(1.05); }
@keyframes winBlink { 0%,100% { opacity: .85; } 50% { opacity: 1; } }
.hb-dark   { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06); }
.hb-indigo { background: rgba(129,140,248,.28); border: 1px solid rgba(129,140,248,.4); box-shadow: 0 0 14px rgba(129,140,248,.25); }
.hb-violet { background: rgba(167,139,250,.28); border: 1px solid rgba(167,139,250,.4); box-shadow: 0 0 14px rgba(167,139,250,.25); }
.hb-green  { background: rgba(52,211,153,.28);  border: 1px solid rgba(52,211,153,.4);  box-shadow: 0 0 14px rgba(52,211,153,.25); }
.hb-teal   { background: rgba(20,184,166,.28);  border: 1px solid rgba(20,184,166,.4);  box-shadow: 0 0 14px rgba(20,184,166,.25); }
.hb-amber  { background: rgba(251,191,36,.28);  border: 1px solid rgba(251,191,36,.4);  box-shadow: 0 0 14px rgba(251,191,36,.25); }
.hb-pink   { background: rgba(244,114,182,.28); border: 1px solid rgba(244,114,182,.4); box-shadow: 0 0 14px rgba(244,114,182,.25); }

/* Member avatars strip */
.hb-members {
  display: flex;
  justify-content: center;
  margin-top: 16px;
}
.hb-av {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.3);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800; color: white;
  margin-left: -7px;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.hb-av:first-child { margin-left: 0; }
.hb-av-more { background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.2); font-size: 9px; }
.hb-members-lbl { text-align: center; font-size: 11px; color: rgba(255,255,255,.55); margin-top: 8px; letter-spacing: .2px; }

/* Hero wave divider */
.hero-wave {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  line-height: 0;
  z-index: 3;
}
.hero-wave svg { width: 100%; height: 56px; display: block; }

/* ═══════════════════════════════════════════════════════
   REDESIGN — DARK GLASSMORPHISM ONBOARDING
═══════════════════════════════════════════════════════ */
.onboarding-section {
  background: linear-gradient(135deg, #06050F 0%, #0F0E2A 40%, #1E1B6B 75%, #2D237A 100%);
  padding: 96px 0 80px;
  position: relative;
  overflow: hidden;
}
.ob-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
}
.ob-orb-1 { width: 600px; height: 600px; background: radial-gradient(circle, rgba(124,58,237,.25) 0%, transparent 70%); top: -150px; right: -100px; }
.ob-orb-2 { width: 400px; height: 400px; background: radial-gradient(circle, rgba(13,148,136,.18) 0%, transparent 70%); bottom: -100px; left: -50px; }

.ob-header h2 { color: white; }
.ob-header p  { color: rgba(255,255,255,.6); }
.ob-tag {
  background: rgba(255,255,255,.1);
  color: rgba(255,255,255,.9);
  border: 1px solid rgba(255,255,255,.15);
  backdrop-filter: blur(8px);
}

/* Glassmorphism step cards */
.ob-step {
  flex: 1;
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 24px;
  padding: 32px 24px;
  position: relative;
  overflow: hidden;
  transition: background .3s, border-color .3s, transform .25s;
}
.ob-step:hover {
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.2);
  transform: translateY(-4px);
}

/* Large decorative background number */
.ob-bg-num {
  position: absolute;
  top: -12px; right: 10px;
  font-size: 110px;
  font-weight: 900;
  color: rgba(255,255,255,.04);
  line-height: 1;
  pointer-events: none;
  user-select: none;
  font-family: var(--font);
}

/* Step pill indicator */
.ob-step-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  background: linear-gradient(135deg, #4F46E5, #7C3AED);
  border-radius: 50%;
  font-size: 12px;
  font-weight: 800;
  color: white;
  margin-bottom: 16px;
  box-shadow: 0 4px 12px rgba(79,70,229,.4);
}

/* Step icon with colored glow */
.ob-step-icon {
  width: 56px; height: 56px;
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
  margin-bottom: 16px;
}
.ob-icon-blue   { background: rgba(129,140,248,.2); box-shadow: 0 0 24px rgba(129,140,248,.2); }
.ob-icon-violet { background: rgba(167,139,250,.2); box-shadow: 0 0 24px rgba(167,139,250,.2); }
.ob-icon-teal   { background: rgba(20,184,166,.2);  box-shadow: 0 0 24px rgba(20,184,166,.2); }
.ob-icon-green  { background: rgba(52,211,153,.2);  box-shadow: 0 0 24px rgba(52,211,153,.2); }

.ob-step h3 { font-size: 16px; font-weight: 700; color: white; margin-bottom: 8px; }
.ob-step p  { font-size: 13px; color: rgba(255,255,255,.6); line-height: 1.65; margin-bottom: 14px; }
.ob-step-time {
  display: inline-block;
  background: rgba(255,255,255,.1);
  color: rgba(255,255,255,.75);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 50px;
  border: 1px solid rgba(255,255,255,.12);
}

/* Connector between steps */
.ob-connector {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-top: 60px;
  opacity: .5;
}
.ob-connector-line { flex: 1; height: 1px; background: rgba(255,255,255,.2); }

/* eNACH card on dark background */
.onboarding-section .enach-growth-card {
  background: rgba(255,255,255,.07);
  border: 1.5px solid rgba(255,255,255,.12);
  backdrop-filter: blur(12px);
}
.onboarding-section .egc-content { color: rgba(255,255,255,.75); }
.onboarding-section .egc-content strong { color: white; }
.onboarding-section .egc-link { color: #A5B4FC; }

/* ═══════════════════════════════════════════════════════
   REDESIGN — RESIDENT WALL
═══════════════════════════════════════════════════════ */
.resident-wall {
  background: white;
  border: 1.5px solid #FDE68A;
  border-radius: var(--radius-xl);
  padding: 28px;
  margin-bottom: 48px;
  box-shadow: 0 4px 24px rgba(245,158,11,.08);
}
.rw-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 10px;
}
.rw-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-h);
}
.rw-mark { color: #D97706; margin-right: 6px; }
.rw-subtitle { font-size: 13px; font-weight: 400; color: var(--text-light); }
.rw-legend {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: var(--text-light);
}
.rw-leg-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.rw-active-dot { background: #4F46E5; }
.rw-off-dot    { background: #CBD5E1; border: 1px solid #94A3B8; }

.rw-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}
.rw-cell {
  border-radius: 12px;
  padding: 12px 6px;
  text-align: center;
  cursor: default;
  transition: transform .2s, box-shadow .2s;
}
.rw-cell:hover { transform: scale(1.08); box-shadow: 0 6px 16px rgba(0,0,0,.15); z-index: 2; position: relative; }
.rw-init { font-size: 12px; font-weight: 800; color: white; margin-bottom: 2px; line-height: 1; }
.rw-lbl  { font-size: 9px;  font-weight: 700; line-height: 1; }

/* Active cells — color variants */
.rw-indigo { background: linear-gradient(135deg, #4F46E5, #7C3AED); }
.rw-indigo .rw-lbl { color: rgba(255,255,255,.65); }
.rw-violet { background: linear-gradient(135deg, #7C3AED, #6D28D9); }
.rw-violet .rw-lbl { color: rgba(255,255,255,.65); }
.rw-teal   { background: linear-gradient(135deg, #0D9488, #0891B2); }
.rw-teal .rw-lbl { color: rgba(255,255,255,.65); }
.rw-amber  { background: linear-gradient(135deg, #D97706, #B45309); }
.rw-amber .rw-lbl { color: rgba(255,255,255,.65); }
.rw-green  { background: linear-gradient(135deg, #059669, #047857); }
.rw-green .rw-lbl { color: rgba(255,255,255,.65); }
.rw-pink   { background: linear-gradient(135deg, #DB2777, #BE185D); }
.rw-pink .rw-lbl { color: rgba(255,255,255,.65); }

/* Inactive cells */
.rw-off { background: #F1F5F9; border: 1px dashed #CBD5E1; }
.rw-off .rw-lbl { color: #94A3B8; font-size: 10px; }

.rw-footer {
  display: flex;
  gap: 24px;
  font-size: 12px;
  color: var(--text-light);
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.rw-stat-active { color: #4F46E5; font-weight: 600; }
.rw-stat-off    { color: #94A3B8; }
.rw-stat span   { margin-right: 4px; }

/* ═══════════════════════════════════════════════════════
   REDESIGN — COMMUNITY SECTION WARM IMPROVEMENTS
═══════════════════════════════════════════════════════ */
.community-section .section-header h2 { color: #1C1917; }
.community-section .section-header p  { color: #78716C; }
.cs-num { color: #D97706; }

/* Testimonial cards — warmer style */
.ct-card {
  background: white;
  border: 1px solid #FDE68A;
  box-shadow: 0 2px 12px rgba(245,158,11,.06);
}
.ct-quote::before { color: #F59E0B; }

/* ═══════════════════════════════════════════════════════
   REDESIGN — STATS SECTION — BRIGHT NUMBERS
═══════════════════════════════════════════════════════ */
.stat-value { color: var(--c-primary); }

/* ═══════════════════════════════════════════════════════
   REDESIGN — RESPONSIVE ADDITIONS (legacy)
═══════════════════════════════════════════════════════ */
@media (max-width: 1280px) {
  .hero-visual { right: 24px; }
  .hero-bldg { width: 320px; }
  .hb-stat-1 { left: -30px; }
  .hb-stat-2 { right: -30px; }
}
@media (max-width: 1024px) {
  .hero-bldg { width: 280px; }
  .hb-stat-card { display: none; }
  .ob-connector { display: none; }
  .onboarding-steps { flex-direction: column; gap: 16px; }
}

/* ═══════════════════════════════════════════════════════
   PROFESSIONAL REDESIGN v3 — Complete Polish Pass
   (These rules override all previous declarations)
═══════════════════════════════════════════════════════ */

/* ── Hero: Proper two-column layout ──────────────────── */
.hero {
  display: block;
  min-height: 100vh;
  background: linear-gradient(135deg, #06050F 0%, #14113A 30%, #2D2496 65%, #5B21B6 100%);
  padding-top: var(--nav-h);
  position: relative;
  overflow: hidden;
}

.hero-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 72px 24px 140px;
  position: relative;
  z-index: 2;
}

.hero-content {
  flex: 0 0 auto;
  width: 520px;
  max-width: 100%;
  padding: 0;
}

.hero-visual {
  position: relative;
  flex: 0 0 380px;
  height: 540px;
  top: auto !important;
  right: auto !important;
  transform: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Hero Real Screenshot ──────────────────────────── */
.hp-real-screenshot {
  width: 230px;
  height: auto;
  display: block;
  border-radius: 36px;
  box-shadow: 0 40px 90px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06);
  animation: hpFloat 6s ease-in-out infinite;
}

/* ── Hero Phone Mockup (legacy — kept for @keyframes ref) ── */
.hp-frame {
  width: 230px;
  height: 480px;
  background: #090818;
  border-radius: 40px;
  border: 8px solid #18163A;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06),
    0 50px 100px rgba(0,0,0,.75),
    inset 0 1px 0 rgba(255,255,255,.07);
  position: relative;
  overflow: hidden;
  animation: hpFloat 6s ease-in-out infinite;
}
@keyframes hpFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%       { transform: translateY(-14px) rotate(.4deg); }
}

.hp-notch {
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 68px; height: 8px;
  background: #090818;
  border-radius: 0 0 8px 8px;
  z-index: 10;
}

.hp-screen {
  height: 100%;
  background: #F8FAFC;
  border-radius: 32px;
  overflow: hidden;
  padding-top: 10px;
}

.hp-header {
  background: linear-gradient(135deg, #3730A3, #6D28D9);
  padding: 13px 13px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.hp-greeting { font-size: 9px; color: rgba(255,255,255,.6); margin-bottom: 2px; font-family: var(--font); }
.hp-society  { font-size: 11.5px; font-weight: 700; color: white; font-family: var(--font); }
.hp-avatar {
  width: 29px; height: 29px;
  background: rgba(255,255,255,.2);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 9.5px; font-weight: 800; color: white;
  border: 1.5px solid rgba(255,255,255,.3);
  font-family: var(--font);
  flex-shrink: 0;
}

.hp-card {
  margin: -10px 11px 10px;
  background: linear-gradient(135deg, #4F46E5, #7C3AED);
  border-radius: 15px;
  padding: 13px;
  box-shadow: 0 8px 24px rgba(79,70,229,.45);
}
.hp-card-lbl { font-size: 8.5px; color: rgba(255,255,255,.6); text-transform: uppercase; letter-spacing: .6px; margin-bottom: 2px; font-family: var(--font); }
.hp-card-amt { font-size: 27px; font-weight: 900; color: white; letter-spacing: -1px; line-height: 1; margin-bottom: 3px; font-family: var(--font); }
.hp-card-sub { font-size: 8.5px; color: rgba(255,255,255,.6); margin-bottom: 10px; font-family: var(--font); }
.hp-pay-btn  {
  background: white;
  color: #4F46E5;
  text-align: center;
  border-radius: 8px;
  padding: 6px;
  font-size: 10px;
  font-weight: 700;
  font-family: var(--font);
  cursor: pointer;
}

.hp-section-lbl {
  font-size: 8.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: #94A3B8;
  padding: 4px 11px 5px;
  font-family: var(--font);
}

.hp-bill-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 11px;
  border-bottom: 1px solid #F1F5F9;
}
.hp-bill-icon {
  width: 26px; height: 26px; min-width: 26px;
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
}
.hp-bill-info { flex: 1; min-width: 0; }
.hp-bill-name { font-size: 9.5px; font-weight: 600; color: #1E293B; font-family: var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp-bill-due  { font-size: 8px; color: #94A3B8; margin-top: 1px; font-family: var(--font); }
.hp-bill-amt  { font-size: 10.5px; font-weight: 800; color: #1E293B; white-space: nowrap; font-family: var(--font); }

/* Quick action row at bottom of phone screen */
.hp-quick-actions {
  display: flex;
  justify-content: space-around;
  padding: 10px 8px 6px;
  border-top: 1px solid #F1F5F9;
  margin-top: 4px;
}
.hp-qa { display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; }
.hp-qa-icon {
  width: 28px; height: 28px;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
}
.hp-qa span { font-size: 8px; color: #64748B; font-family: var(--font); }

/* Floating stat cards around phone */
.hp-stat {
  position: absolute;
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 16px;
  padding: 11px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,.28);
  white-space: nowrap;
  z-index: 5;
}
.hp-stat-left  { top: 70px; left: -80px; animation: hpFloat 5s ease-in-out infinite; animation-delay: .7s; }
.hp-stat-right { bottom: 110px; right: -65px; animation: hpFloat 5s ease-in-out infinite reverse; animation-delay: 1.5s; }
.hp-stat-icon  { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; }
.hp-stat-val   { font-size: 17px; font-weight: 900; color: white; line-height: 1; font-family: var(--font); }
.hp-stat-lbl   { font-size: 10px; color: rgba(255,255,255,.6); margin-top: 2px; font-family: var(--font); }

/* Toast notification */
.hp-toast {
  position: absolute;
  bottom: 28px; left: -16px;
  background: linear-gradient(135deg, #047857, #059669);
  border-radius: 50px;
  padding: 9px 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10.5px;
  font-weight: 600;
  color: white;
  white-space: nowrap;
  box-shadow: 0 8px 28px rgba(5,150,105,.45);
  animation: toastSlide .6s ease-out forwards, hpFloat 7s ease-in-out .6s infinite;
  z-index: 10;
  font-family: var(--font);
}
@keyframes toastSlide {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: translateX(0); }
}
.hp-toast-dot {
  width: 8px; height: 8px;
  background: rgba(255,255,255,.9);
  border-radius: 50%;
  animation: badgePulse 2s infinite;
  flex-shrink: 0;
}

/* ── Feature cards: gradient border on hover ──────── */
.feature-card {
  position: relative;
  background: white;
  border: 1.5px solid #E8ECF4;
  border-radius: 20px;
  padding: 32px;
  transition: box-shadow .3s, transform .3s;
}
.feature-card:hover {
  box-shadow: 0 12px 48px rgba(79,70,229,.14);
  transform: translateY(-5px);
  border-color: rgba(79,70,229,.25);
}
.feature-card h3 { font-size: 17px; font-weight: 700; color: var(--text-h); margin-bottom: 10px; }
.feature-card p  { color: var(--text-light); font-size: 14px; line-height: 1.65; }

/* ── Report items: SVG icon wrappers ─────────────── */
.report-icon-wrap {
  width: 48px; height: 48px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
  flex-shrink: 0;
}
.ri-blue   { background: #EEF2FF; color: #4F46E5; }
.ri-green  { background: #ECFDF5; color: #059669; }
.ri-orange { background: #FFF7ED; color: #D97706; }
.ri-teal   { background: #ECFEFF; color: #0891B2; }
.ri-purple { background: #F5F3FF; color: #7C3AED; }
.ri-red    { background: #FFF1F2; color: #E11D48; }
.ri-indigo { background: #E0E7FF; color: #3730A3; }
.ri-amber  { background: #FFFBEB; color: #92400E; }

.report-item h4 { font-size: 16px; font-weight: 700; color: var(--text-h); margin-bottom: 8px; }
.report-item p  { font-size: 14px; color: var(--text-light); line-height: 1.6; }
.report-item {
  background: white;
  border-radius: var(--radius-lg);
  padding: 22px;
  border: 1px solid var(--border);
  transition: box-shadow .25s, transform .25s;
}
.report-item:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }

/* ── Testimonial cards: stars + premium style ─────── */
.ct-stars { display: flex; gap: 2px; margin-bottom: 14px; }
.ct-star  { color: #F59E0B; font-size: 16px; }

.ct-card {
  background: white;
  border: 1px solid #EDE9DC;
  border-radius: 20px;
  padding: 32px;
  box-shadow: 0 2px 16px rgba(0,0,0,.05);
  transition: box-shadow .25s, transform .25s;
}
.ct-card:hover { box-shadow: 0 12px 40px rgba(0,0,0,.09); transform: translateY(-3px); }
.ct-quote { font-size: 14.5px; color: var(--text-body); line-height: 1.75; margin-bottom: 24px; }
.ct-quote::before { content: '"'; color: #D97706; font-size: 36px; line-height: .5; vertical-align: -.25em; margin-right: 2px; font-family: Georgia, serif; }

/* ── Stats section: cleaner ──────────────────────── */
.stats-section {
  background: white;
  border-top: 1px solid #F1F5F9;
  border-bottom: 1px solid #F1F5F9;
  padding: 40px 0;
}
.stat-value { font-size: 34px; font-weight: 900; color: var(--c-primary); }
.stat-item  { padding: 16px 48px; }

/* ── Features section: subtle background ─────────── */
.features-section { background: #FAFBFF; padding: 100px 0; }

/* ── Apps section: white ─────────────────────────── */
.apps-section { background: white; }

/* ── Compliance: subtle ──────────────────────────── */
.compliance-section { background: #FAFBFF; }

/* ── Reports strip: white ────────────────────────── */
.reports-strip { background: white; }

/* ── MC Dashboard — Single Pane of Glass ─────────── */
.dashboard-section { padding: 96px 0; background: #0F172A; }
.dashboard-section .section-header { text-align: center; max-width: 700px; margin: 0 auto 56px; }
.dashboard-section .section-header .section-tag { background: rgba(99,102,241,.2); color: #A5B4FC; border: none; }
.dashboard-section .section-header h2 { color: white; font-size: clamp(26px, 3vw, 38px); margin-bottom: 14px; }
.dashboard-section .section-header p { color: #94A3B8; }

.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.dash-panel {
  background: #1E293B;
  border-radius: 20px;
  padding: 32px;
  border: 1px solid rgba(255,255,255,.07);
}
.dash-panel-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.dash-panel-emoji { font-size: 34px; line-height: 1; }
.dash-panel-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .7px;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 20px;
  margin-bottom: 6px;
}
.dpt-manager   { background: rgba(16,185,129,.15); color: #34D399; }
.dpt-committee { background: rgba(99,102,241,.18); color: #A5B4FC; }
.dash-panel-role { font-size: 18px; font-weight: 700; color: white; margin-bottom: 2px; }
.dash-panel-tagline { font-size: 12.5px; color: #64748B; }

.dash-widgets { display: flex; flex-direction: column; gap: 12px; }
.dash-widget {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: rgba(255,255,255,.04);
  border-radius: 12px;
  padding: 13px 15px;
  border: 1px solid rgba(255,255,255,.05);
  transition: border-color .2s;
}
.dash-widget:hover { border-color: rgba(255,255,255,.13); }
.dw-icon {
  width: 36px; height: 36px;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
}
.dw-green  { background: rgba(16,185,129,.15); }
.dw-blue   { background: rgba(99,102,241,.18); }
.dw-orange { background: rgba(245,158,11,.15); }
.dw-red    { background: rgba(239,68,68,.15); }
.dw-teal   { background: rgba(20,184,166,.15); }
.dw-purple { background: rgba(168,85,247,.15); }
.dw-amber  { background: rgba(180,83,9,.15); }

.dw-label { font-size: 13.5px; font-weight: 600; color: #E2E8F0; margin-bottom: 3px; display: block; }
.dw-desc  { font-size: 12px; color: #64748B; line-height: 1.5; }

@media (max-width: 860px) {
  .dashboard-grid { grid-template-columns: 1fr; }
}

/* ── Community stats cards: more vivid ───────────── */
.cs-num   { color: #D97706; font-size: 38px; font-weight: 900; }
.cs-card  { border: 1px solid #FDE68A; border-radius: 20px; transition: box-shadow .25s, transform .25s; }
.cs-card:hover { box-shadow: 0 12px 32px rgba(217,119,6,.12); transform: translateY(-3px); }

/* ── Pricing preview cards: hover lift ───────────── */
.price-card { border-radius: 24px; transition: box-shadow .3s, transform .3s; }
.price-card:hover { box-shadow: 0 16px 48px rgba(0,0,0,.09); transform: translateY(-4px); }
.price-card-featured:hover { box-shadow: 0 16px 48px rgba(79,70,229,.2); }

/* ── eNACH card on dark onboarding ───────────────── */
.onboarding-section .enach-growth-card {
  background: rgba(255,255,255,.07) !important;
  border: 1px solid rgba(255,255,255,.15) !important;
  border-radius: 16px;
}
.onboarding-section .egc-icon {
  width: 40px; height: 40px; min-width: 40px;
  background: rgba(255,255,255,.1);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0;
}

/* ── Responsive for new hero layout ─────────────── */
@media (max-width: 1100px) {
  .hp-stat-left, .hp-stat-right { display: none; }
  .hero-visual { flex: 0 0 320px; }
  .hp-frame { width: 200px; height: 420px; }
  .hp-real-screenshot { width: 195px; }
}
@media (max-width: 900px) {
  .hero-inner {
    flex-direction: column;
    padding-bottom: 90px;
    gap: 40px;
    text-align: center;
  }
  .hero-content { width: 100%; max-width: 600px; }
  .hero-actions { justify-content: center; }
  .hero-trust   { justify-content: center; }
  .hero-visual  {
    flex: 0 0 auto;
    width: 100%;
    height: 440px;
    max-width: 320px;
    margin: 0 auto;
  }
  .hp-frame { width: 200px; height: 410px; }
  .hp-toast { bottom: 10px; left: -10px; }
}

/* ═══════════════════════════════════════════════════════
   FINAL REDESIGN v4 — How It Works + Community + Polish
   (v4 — cache bust)
═══════════════════════════════════════════════════════ */

/* ── How It Works — clean numbered steps ─────────── */
.hw-steps {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-bottom: 32px;
}

.hw-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: rgba(255,255,255,.07);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 24px;
  padding: 32px 24px;
  position: relative;
  transition: background .3s, border-color .3s, transform .25s;
}
.hw-step:hover {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.22);
  transform: translateY(-4px);
}

/* Step number badge — a simple circle, nothing more */
.hw-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #4F46E5, #7C3AED);
  border-radius: 50%;
  font-size: 15px;
  font-weight: 800;
  color: white;
  margin-bottom: 18px;
  box-shadow: 0 4px 16px rgba(79,70,229,.5);
  font-family: var(--font);
}

/* Icon below the number badge */
.hw-icon {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.hw-icon-blue   { background: rgba(129,140,248,.2); color: #A5B4FC; box-shadow: 0 0 20px rgba(129,140,248,.15); }
.hw-icon-violet { background: rgba(167,139,250,.2); color: #C4B5FD; box-shadow: 0 0 20px rgba(167,139,250,.15); }
.hw-icon-teal   { background: rgba(20,184,166,.2);  color: #5EEAD4; box-shadow: 0 0 20px rgba(20,184,166,.15); }
.hw-icon-green  { background: rgba(52,211,153,.2);  color: #6EE7B7; box-shadow: 0 0 20px rgba(52,211,153,.15); }

.hw-step h3 { font-size: 16px; font-weight: 700; color: white; margin-bottom: 8px; font-family: var(--font); }
.hw-step p  { font-size: 13px; color: rgba(255,255,255,.62); line-height: 1.65; margin-bottom: 20px; font-family: var(--font); }

.hw-time {
  display: inline-block;
  margin-top: auto;
  background: rgba(255,255,255,.1);
  color: rgba(255,255,255,.75);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 50px;
  border: 1px solid rgba(255,255,255,.14);
  font-family: var(--font);
  align-self: flex-start;
}

/* Arrow connector between steps */
.hw-connector {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  flex-shrink: 0;
  padding-top: 0;
  opacity: .5;
}

/* Mobile: stack vertically */
@media (max-width: 860px) {
  .hw-steps { flex-direction: column; gap: 16px; }
  .hw-connector { display: none; }
}

/* ── Testimonials: author with .ct-name/.ct-role ─── */
.ct-name { font-size: 14px; font-weight: 700; color: var(--text-h); }
.ct-role { font-size: 12px; color: var(--text-light); margin-top: 2px; }

/* ── Community stats row ─────────────────────────── */
.cs-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 56px;
}
.cs-card {
  background: white;
  border: 1px solid #FDE68A;
  border-radius: 20px;
  padding: 28px 24px;
  text-align: center;
  transition: box-shadow .25s, transform .25s;
}
.cs-card:hover { box-shadow: 0 12px 32px rgba(217,119,6,.12); transform: translateY(-3px); }
.cs-num  { font-size: 38px; font-weight: 900; color: #D97706; line-height: 1; margin-bottom: 6px; font-family: var(--font); }
.cs-lbl  { font-size: 13px; color: var(--text-light); font-family: var(--font); }

@media (max-width: 768px) {
  .cs-stats-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .cs-stats-row { grid-template-columns: 1fr; }
}

/* ── Section backgrounds — clean alternating ─────── */
.features-section   { background: #F8FAFF; }
.compliance-section { background: white; }
.reports-strip      { background: #F8FAFF; }
.apps-section       { background: white; }
.community-section  { background: white; padding: 96px 0; }
.cta-section        { background: linear-gradient(135deg, #1A1660 0%, #4338CA 50%, #6D28D9 100%); }

/* ── Pricing preview 4-column grid ──────────────── */
.pricing-preview-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 24px;
}
@media (max-width: 1024px) {
  .pricing-preview-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .pricing-preview-grid-4 { grid-template-columns: 1fr; }
}

/* Managed & GST plan card styles */
.price-card-managed {
  border-color: #D97706;
  background: linear-gradient(180deg, #FFF7ED 0%, white 100%);
}
.price-managed-badge {
  display: inline-block;
  background: linear-gradient(90deg, #D97706, #B45309);
  color: white;
  padding: 3px 12px;
  border-radius: 50px;
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 10px;
}
.price-gst-badge {
  display: inline-block;
  background: linear-gradient(90deg, #059669, #047857);
  color: white;
  padding: 3px 12px;
  border-radius: 50px;
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 10px;
}
.price-card-gst {
  border-color: #059669;
  background: linear-gradient(180deg, #ECFDF5 0%, white 100%);
}

/* ── Testimonial grid ─────────────────────────────── */
.ct-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 768px) {
  .ct-grid { grid-template-columns: 1fr; }
}


/* ── Trust bar ────────────────────────────────────── */
.trust-bar {
  margin-top: 48px;
  padding: 28px 32px;
  background: var(--bg-alt);
  border-radius: 16px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.trust-bar-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: .6px;
  white-space: nowrap;
}
.trust-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  flex: 1;
}
.trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: white;
  border: 1.5px solid var(--border);
  border-radius: 50px;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-h);
}
.trust-icon { font-size: 15px; }
@media (max-width: 600px) {
  .trust-bar { flex-direction: column; align-items: flex-start; }
}

/* ═══════════════════════════════════════════════════
   SOCIETY ECOSYSTEM / WORKFLOW SECTION
═══════════════════════════════════════════════════ */
.ecosystem-section {
  padding: 96px 0;
  background: linear-gradient(180deg, #06050F 0%, #0F0C2A 55%, #06050F 100%);
  position: relative;
  overflow: hidden;
}
.ecosystem-section::before {
  content: '';
  position: absolute;
  width: 900px; height: 900px;
  background: radial-gradient(circle, rgba(79,70,229,.13) 0%, transparent 65%);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.ecosystem-section .section-header { margin-bottom: 56px; }
.ecosystem-section .section-header h2 { color: white; }
.ecosystem-section .section-header p { color: rgba(255,255,255,.6); max-width: 620px; margin: 0 auto; }
.eco-tag {
  background: rgba(99,102,241,.2) !important;
  color: #A5B4FC !important;
  border: 1px solid rgba(99,102,241,.3) !important;
}

/* ── 5-column flow grid ── */
.eco-flow {
  display: grid;
  grid-template-columns: 1fr 44px 260px 44px 1fr;
  align-items: stretch;
  gap: 0;
  position: relative;
}

/* ── Actor columns ── */
.eco-actors {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ── Individual actor cards ── */
.eco-card {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  padding: 14px 16px;
  transition: background .25s, border-color .25s, transform .25s;
  cursor: default;
}
.eco-actors-left .eco-card:hover {
  background: rgba(99,102,241,.14);
  border-color: rgba(99,102,241,.45);
  transform: translateX(-4px);
}
.eco-actors-right .eco-card:hover {
  background: rgba(99,102,241,.14);
  border-color: rgba(99,102,241,.45);
  transform: translateX(4px);
}
.eco-card-icon { font-size: 24px; line-height: 1; flex-shrink: 0; margin-top: 2px; }
.eco-card-role { font-size: 13.5px; font-weight: 700; color: white; margin-bottom: 3px; }
.eco-card-acts { font-size: 11.5px; color: rgba(255,255,255,.5); line-height: 1.5; }

/* ── Arrow connector columns ── */
.eco-arrows-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  padding: 7px 0;
  position: relative;
  z-index: 1;
}
.eco-arrows-col::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 1px;
  left: 50%;
  background: linear-gradient(to bottom, transparent, rgba(99,102,241,.4) 20%, rgba(99,102,241,.4) 80%, transparent);
}
.eco-arr {
  font-size: 16px;
  color: #818CF8;
  line-height: 1;
  background: rgba(99,102,241,.25);
  border: 1px solid rgba(99,102,241,.4);
  border-radius: 50%;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}
.eco-arrows-right .eco-arr { transform: scaleX(1); }

/* ── Central hub card ── */
.eco-hub {
  background: linear-gradient(160deg, #1C1A50 0%, #312D8A 45%, #4C1D95 100%);
  border: 1.5px solid rgba(99,102,241,.55);
  border-radius: 24px;
  padding: 32px 22px;
  text-align: center;
  box-shadow: 0 0 80px rgba(79,70,229,.4), 0 0 180px rgba(124,58,237,.15), 0 24px 64px rgba(0,0,0,.55);
  position: relative;
  z-index: 3;
  align-self: center;
}
.eco-hub-mark { font-size: 30px; color: #818CF8; margin-bottom: 2px; }
.eco-hub-name { font-size: 22px; font-weight: 900; color: white; letter-spacing: -0.5px; }
.eco-hub-sub {
  font-size: 9.5px; font-weight: 700; color: rgba(255,255,255,.45);
  text-transform: uppercase; letter-spacing: .7px; margin-bottom: 18px;
}
.eco-hub-divider { height: 1px; background: rgba(255,255,255,.12); margin-bottom: 14px; }
.eco-hub-feats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.eco-feat {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  padding: 7px 9px;
  font-size: 10.5px; font-weight: 600;
  color: rgba(255,255,255,.8);
  text-align: left;
}

/* ── Mobile ── */
@media (max-width: 1100px) {
  .eco-flow {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    gap: 20px;
  }
  .eco-hub { grid-column: 1 / span 2; order: -1; }
  .eco-arrows-col { display: none; }
}
@media (max-width: 640px) {
  .eco-flow { grid-template-columns: 1fr; }
  .eco-hub { grid-column: 1; }
}

/* ── App roles full grid — update for 5 cards ── */
.app-roles-full-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}
@media (max-width: 900px) {
  .app-roles-full-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .app-roles-full-grid { grid-template-columns: 1fr; }
}


/* ═══════════════════════════════════════════════════════
   PASTEL THEME v8
   Overrides the dark-indigo theme with a light, airy
   pastel palette throughout.
═══════════════════════════════════════════════════════ */

/* ── 1. Root palette ────────────────────────────────── */
:root {
  --c-primary:        #5B54E8;
  --c-primary-dark:   #4338CA;
  --c-primary-light:  #EEEDFD;
  --c-accent:         #7C6FEB;
  --c-accent-light:   #F5F3FF;
  --c-green:          #059669;
  --c-green-light:    #ECFDF5;
  --c-orange:         #D97706;
  --c-orange-light:   #FFF7ED;
  --c-teal:           #0891B2;
  --c-teal-light:     #E0F9FD;
  --bg:               #FAFAFE;
  --bg-alt:           #F3F0FF;
  --border:           #E4E0F9;
  --text-h:           #1E1B3A;
  --text-body:        #4B5563;
  --text-light:       #6B7280;
}

/* ── 2. Nav — dark text on light hero ───────────────── */
.brand-mark  { color: var(--c-primary); }
.brand-text  { color: var(--c-primary); }
.brand-dot-ai { color: var(--c-accent); }
.nav-link    { color: var(--text-h); font-weight: 600; }
.nav-link:hover { color: var(--c-primary); background: var(--c-primary-light); }
.nav-active  { color: var(--c-primary) !important; background: var(--c-primary-light); font-weight: 700; }
.nav-btn     { background: var(--c-primary); color: white; border-color: var(--c-primary); box-shadow: 0 2px 8px rgba(79,70,229,.28); }
.nav-btn:hover { background: var(--c-primary-dark); color: white; }
.nav-toggle span { background: var(--text-h); }

/* ── 3. Hero — light pastel gradient ────────────────── */
.hero {
  background: linear-gradient(150deg, #FAFAFE 0%, #F0EDFF 30%, #E8E4FF 60%, #E4EFFE 100%);
  overflow: visible;
}
.hero-glow-1 {
  background: radial-gradient(circle, rgba(99,102,241,.18) 0%, transparent 70%);
  opacity: .7;
}
.hero-glow-2 {
  background: radial-gradient(circle, rgba(16,185,129,.12) 0%, transparent 70%);
  opacity: .6;
}
.hero-badge {
  background: rgba(91,84,232,.08);
  border-color: rgba(91,84,232,.22);
  color: var(--c-primary);
}
.badge-dot { background: #10B981; }
.hero-title { color: var(--text-h); }
.gradient-text { background: linear-gradient(90deg, #5B54E8, #8B5CF6); -webkit-background-clip: text; }
.hero-subtitle { color: var(--text-body); }
.hero-trust span { color: var(--text-body); }
.hero-trust span::before { color: #10B981; }

/* Buttons on light hero */
.btn-hero-primary {
  background: var(--c-primary);
  color: white;
  box-shadow: 0 4px 20px rgba(91,84,232,.32);
}
.btn-hero-primary:hover { box-shadow: 0 8px 32px rgba(91,84,232,.45); color: white; }
.btn-hero-outline {
  color: var(--c-primary);
  border-color: rgba(91,84,232,.35);
  background: rgba(91,84,232,.06);
}
.btn-hero-outline:hover { background: rgba(91,84,232,.12); color: var(--c-primary); }

/* ── 4. Stats strip ─────────────────────────────────── */
.stats-section { background: white; border-bottom: 1px solid var(--border); }
.stat-value { color: var(--c-primary); }
.stat-label { color: var(--text-light); }
.stat-sep { background: var(--border); }

/* ── 5. Section header defaults ─────────────────────── */
.section-tag {
  background: var(--c-primary-light);
  color: var(--c-primary);
  border: 1px solid rgba(91,84,232,.2);
}
.section-header h2 { color: var(--text-h); }
.section-header p { color: var(--text-light); }

/* ── 6. Features section ────────────────────────────── */
.features-section { background: var(--bg-alt); }
.feat-card { background: white; border-color: var(--border); }
.feat-card:hover { border-color: rgba(91,84,232,.35); box-shadow: 0 8px 32px rgba(91,84,232,.1); }

/* ── 7. How It Works / Onboarding section ───────────── */
.onboarding-section { background: white; }
.hw-step { background: white; border: 1.5px solid var(--border); }
.hw-step:hover { border-color: rgba(91,84,232,.3); }

/* ── 8. Pricing preview ─────────────────────────────── */
.pricing-preview-section { background: var(--bg-alt); }

/* ── 9. Apps section ────────────────────────────────── */
.apps-section { background: linear-gradient(150deg, #F0FDF9 0%, #E0F2FE 100%); }
.app-role-icon { box-shadow: 0 2px 8px rgba(0,0,0,.06); }

/* ── 10. Compliance section ─────────────────────────── */
.compliance-section { background: white; }
.comp-card { border-color: var(--border); }

/* ── 11. Reports strip ──────────────────────────────── */
.reports-strip { background: var(--bg-alt); }

/* ── 12. Ecosystem section — light pastel ───────────── */
.ecosystem-section {
  background: linear-gradient(150deg, #F3F0FF 0%, #EDE9FE 45%, #E4EFFE 100%);
}
.ecosystem-section::before {
  background: radial-gradient(circle, rgba(91,84,232,.07) 0%, transparent 65%);
}
.ecosystem-section .section-header h2 { color: var(--text-h); }
.ecosystem-section .section-header p  { color: var(--text-body); }
.eco-tag {
  background: rgba(91,84,232,.1) !important;
  color: var(--c-primary) !important;
  border-color: rgba(91,84,232,.22) !important;
}
.eco-card {
  background: rgba(255,255,255,.75);
  border-color: rgba(91,84,232,.14);
  backdrop-filter: blur(6px);
}
.eco-actors-left  .eco-card:hover,
.eco-actors-right .eco-card:hover {
  background: white;
  border-color: rgba(91,84,232,.38);
  transform: none;
  box-shadow: 0 4px 20px rgba(91,84,232,.1);
}
.eco-card-role { color: var(--text-h); }
.eco-card-acts { color: var(--text-light); }
.eco-arrows-col::before {
  background: linear-gradient(to bottom, transparent, rgba(91,84,232,.3) 20%, rgba(91,84,232,.3) 80%, transparent);
}
.eco-arr { background: rgba(91,84,232,.12); border-color: rgba(91,84,232,.28); color: var(--c-primary); }

/* ── 13. Community / Testimonials ───────────────────── */
.community-section { background: white; }
.ct-card { border-color: var(--border); }
.trust-bar { background: var(--bg-alt); border: 1px solid var(--border); }
.trust-badge { background: white; border-color: var(--border); color: var(--text-h); }

/* ── 14. CTA section — rich indigo stays dark ───────── */
.cta-section {
  background: linear-gradient(135deg, #1E1B4B 0%, #312E81 40%, #4C1D95 100%);
}

/* ── 15. Inner page hero ────────────────────────────── */
.page-hero {
  background: linear-gradient(150deg, #F3F0FF 0%, #EDE9FE 55%, #E4EFFE 100%);
  border-bottom: 1px solid var(--border);
}
.page-hero h1 { color: var(--text-h); }
.page-hero p, .page-hero .breadcrumb-nav, .page-hero .breadcrumb-nav a { color: var(--text-body); }
.page-hero .breadcrumb-nav a:hover { color: var(--c-primary); }
/* Badge was designed for dark hero — override for light pastel background */
.page-hero .page-hero-badge {
  background: rgba(79,70,229,.1);
  border-color: rgba(79,70,229,.28);
  color: var(--c-primary);
}
/* Availability strip was designed for dark hero — override for light pastel */
.page-hero .feat-availability-strip {
  background: rgba(255,255,255,.7);
  border-color: rgba(79,70,229,.18);
}
.page-hero .fas-live { color: #065F46; }
.page-hero .fas-soon { color: #92400E; }
.page-hero .fas-dot-live { background: #059669; box-shadow: 0 0 6px rgba(5,150,105,.5); }
.page-hero .fas-dot-soon { background: #D97706; }

/* ── 16. Pricing cards on /pricing page ─────────────── */
.pricing-section { background: white; }
.managed-explainer-section { background: var(--bg-alt); }
.addon-callout { background: linear-gradient(150deg, #F3F0FF, #EDE9FE); border: 1.5px solid rgba(91,84,232,.18); }
.comparison-section { background: white; }
.enach-section { background: var(--bg-alt); }
.faq-section { background: white; }

/* ── 17. Plan type strip ────────────────────────────── */
.plan-type-strip {
  background: var(--bg-alt);
  border: 1.5px solid var(--border);
  border-radius: 20px;
  padding: 24px 32px;
  display: flex;
  align-items: flex-start;
  gap: 32px;
}
.pts-self   .pts-title { color: var(--c-primary); }
.pts-managed .pts-title { color: #065F46; }

/* ── 18. Contact page ───────────────────────────────── */
.contact-section { background: white; }
.contact-form-wrap { background: var(--bg-alt); border: 1.5px solid var(--border); border-radius: 24px; }

/* ── 19. Staff login ────────────────────────────────── */
/* Staff login stays dark — it's intentionally separate */

/* ── 20. Features inner page ────────────────────────── */
.features-page-section { background: white; }
.features-page-section:nth-child(even) { background: var(--bg-alt); }
.app-role-card { border-color: var(--border); }

/* ── 21. Pricing page plan-type section ─────────────── */
.plan-type-section { background: var(--bg-alt); }

/* ── 22. Register page ──────────────────────────────── */
.register-page { background: var(--bg); min-height: 100vh; padding-bottom: 80px; }
.reg-hero {
  background: linear-gradient(150deg, #F3F0FF 0%, #EDE9FE 50%, #E4EFFE 100%);
  padding: 72px 0 56px;
  border-bottom: 1px solid var(--border);
  text-align: center;
}
.reg-hero h1 { font-size: clamp(26px, 4vw, 44px); font-weight: 900; color: var(--text-h); letter-spacing: -1px; margin-bottom: 12px; }
.reg-hero p { font-size: 17px; color: var(--text-body); max-width: 520px; margin: 0 auto 20px; }
.reg-trust-row { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }
.reg-trust-item { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text-body); }
.reg-trust-item span { color: #10B981; font-size: 15px; }

.reg-body { padding: 56px 24px; max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
@media (max-width: 860px) { .reg-body { grid-template-columns: 1fr; gap: 32px; } }

/* Left: benefits */
.reg-benefits { padding: 40px 36px; background: white; border: 1.5px solid var(--border); border-radius: 24px; }
.reg-benefits h2 { font-size: 22px; font-weight: 800; color: var(--text-h); margin-bottom: 6px; }
.reg-benefits-sub { font-size: 14px; color: var(--text-light); margin-bottom: 28px; }
.reg-benefit-item { display: flex; align-items: flex-start; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.reg-benefit-item:last-child { border-bottom: none; }
.reg-benefit-icon { font-size: 22px; flex-shrink: 0; margin-top: 2px; }
.reg-benefit-title { font-size: 14px; font-weight: 700; color: var(--text-h); margin-bottom: 2px; }
.reg-benefit-desc  { font-size: 12.5px; color: var(--text-light); line-height: 1.5; }

/* Right: form */
.reg-form-card {
  background: white;
  border: 1.5px solid var(--border);
  border-radius: 24px;
  padding: 40px 36px;
  box-shadow: 0 8px 32px rgba(91,84,232,.08);
}
.reg-form-card h3 { font-size: 20px; font-weight: 800; color: var(--text-h); margin-bottom: 4px; }
.reg-form-sub { font-size: 13px; color: var(--text-light); margin-bottom: 28px; }
.reg-form-row { margin-bottom: 18px; }
.reg-label { display: block; font-size: 13px; font-weight: 600; color: var(--text-body); margin-bottom: 6px; }
.reg-input, .reg-select {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  font-family: var(--font);
  font-size: 14px;
  color: var(--text-h);
  background: var(--bg);
  transition: border-color .2s, box-shadow .2s;
  outline: none;
  appearance: none;
}
.reg-input:focus, .reg-select:focus {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px rgba(91,84,232,.1);
  background: white;
}
.reg-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234B5563' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }
.reg-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.reg-submit {
  width: 100%;
  padding: 15px;
  background: var(--c-primary);
  color: white;
  border: none;
  border-radius: 50px;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s, box-shadow .2s;
  box-shadow: 0 4px 16px rgba(91,84,232,.28);
  margin-top: 8px;
}
.reg-submit:hover { background: var(--c-primary-dark); box-shadow: 0 6px 24px rgba(91,84,232,.4); }
.reg-disclaimer { font-size: 11.5px; color: var(--text-light); text-align: center; margin-top: 14px; line-height: 1.5; }
.reg-success { text-align: center; padding: 48px 24px; }
.reg-success-icon { font-size: 56px; margin-bottom: 16px; }
.reg-success h3 { font-size: 22px; font-weight: 800; color: var(--text-h); margin-bottom: 8px; }
.reg-success p { font-size: 15px; color: var(--text-body); max-width: 400px; margin: 0 auto 28px; }

/* ── 23. Building illustration ──────────────────────── */
.hero-illustration {
  position: absolute;
  right: 0;
  bottom: 0;
  width: min(460px, 40vw);
  pointer-events: none;
  opacity: .7;
}
@media (max-width: 900px) { .hero-illustration { display: none; } }


/* ═══════════════════════════════════════════════════════
   PASTEL READABILITY FIX v9
   Comprehensive fix for white-text-on-dark elements
   that became invisible after switching to pastel hero.
═══════════════════════════════════════════════════════ */

/* ── Hero: floating stat cards → white pill on light hero ── */
.hp-stat {
  background: rgba(255,255,255,.94);
  border: 1px solid var(--border);
  box-shadow: 0 4px 24px rgba(91,84,232,.12);
}
.hp-stat-val { color: var(--text-h); }
.hp-stat-lbl { color: var(--text-light); }

/* ── Onboarding section: orbs hidden, tag readable ── */
.ob-orb { opacity: 0; }
.ob-tag {
  background: var(--c-primary-light) !important;
  color: var(--c-primary) !important;
  border: 1px solid rgba(91,84,232,.22) !important;
  backdrop-filter: none !important;
}
.ob-header h2 { color: var(--text-h) !important; }
.ob-header p  { color: var(--text-body) !important; }

/* ── How-it-works step cards ────────────────────────── */
.hw-step h3  { color: var(--text-h); }
.hw-step p   { color: var(--text-body); }
.hw-step:hover {
  background: var(--bg-alt);
  border-color: rgba(91,84,232,.25);
}
.hw-time {
  background: var(--c-primary-light);
  color: var(--c-primary);
  border-color: rgba(91,84,232,.22);
  /* Ensure pill stays pinned to bottom of card regardless of text height */
  margin-top: auto !important;
  align-self: flex-start !important;
  display: inline-block;
}

/* Step icons: vivid colours for light background */
.hw-icon-blue   { background: #EEF2FF; color: #4F46E5; box-shadow: none; }
.hw-icon-violet { background: #F5F3FF; color: #7C3AED; box-shadow: none; }
.hw-icon-teal   { background: #CCFBF1; color: #0D9488; box-shadow: none; }
.hw-icon-green  { background: #D1FAE5; color: #059669; box-shadow: none; }

/* Step connector SVG: override hardcoded white stroke */
.hw-connector svg path { stroke: rgba(91,84,232,.25) !important; }

/* ── eNACH / Growth upgrade card in onboarding ── */
.onboarding-section .enach-growth-card {
  background: var(--bg-alt) !important;
  border: 1.5px solid var(--border) !important;
}
.onboarding-section .egc-content        { color: var(--text-body) !important; }
.onboarding-section .egc-content strong { color: var(--text-h) !important; }
.onboarding-section .egc-link           { color: var(--c-primary) !important; }

/* ── Pricing card: /unit/month on its own neat line ── */
.pc-period {
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--text-light);
  margin-top: 3px;
  line-height: 1.3;
}

/* ── Managed plan: minimum notice pill ── */
.pc-managed-min {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #FFF7ED;
  color: #B45309;
  border: 1px solid rgba(217,119,6,.25);
  border-radius: 50px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 700;
  margin-top: 6px;
}

/* ── CA & Auditor bundle section ── */
.ca-bundle-section { background: var(--bg-alt); padding: 64px 0; }
.ca-bundle-card {
  display: flex;
  align-items: flex-start;
  gap: 28px;
  background: white;
  border: 2px solid rgba(91,84,232,.18);
  border-radius: 24px;
  padding: 40px 48px;
  box-shadow: 0 8px 32px rgba(91,84,232,.07);
}
.ca-bundle-icon { font-size: 52px; flex-shrink: 0; }
.ca-bundle-body h2 {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-h);
  margin-bottom: 8px;
  letter-spacing: -.3px;
}
.ca-bundle-body p { font-size: 15px; color: var(--text-body); line-height: 1.7; margin-bottom: 20px; }
.ca-bundle-pills  { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
.ca-bundle-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--c-primary-light);
  color: var(--c-primary);
  border: 1px solid rgba(91,84,232,.2);
  border-radius: 50px;
  padding: 5px 14px;
  font-size: 13px;
  font-weight: 600;
}
@media (max-width: 768px) {
  .ca-bundle-card { flex-direction: column; padding: 28px 24px; }
}

/* ── Coming-soon badge for future features ── */
.feat-coming-soon {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #FFF7ED;
  color: #B45309;
  border: 1px solid rgba(217,119,6,.25);
  border-radius: 50px;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 700;
  margin-left: 8px;
  vertical-align: middle;
  white-space: nowrap;
}

/* ── Legal pages (privacy, terms) ── */
.legal-section { margin-bottom: 40px; }
.legal-section h2 { font-size: 18px; font-weight: 700; color: var(--text-h); margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.legal-section p { color: var(--text-body); margin-bottom: 12px; line-height: 1.7; }
.legal-section ul { padding-left: 20px; color: var(--text-body); line-height: 1.8; }
.legal-section ul li { margin-bottom: 6px; }
.legal-section a { color: var(--c-primary); }

/* ── 3-Phone apps illustration layout ── */
.apps-phones { height: 480px !important; }
/* All 3 phones are real screenshots — no CSS frame needed */
.mp-screenshot { position: absolute; }
.mp-screenshot img {
  display: block;
  border-radius: 24px;
  box-shadow: 0 24px 64px rgba(0,0,0,.35);
}
/* Position 1: top-left, front layer */
.mp1-screenshot { top: 0; left: 0; z-index: 3; }
.mp1-screenshot img { width: 188px; }
/* Position 2: center-right, mid layer */
.mp2-screenshot { top: 30px; right: 0; z-index: 2; }
.mp2-screenshot img { width: 208px; }
/* Position 3: bottom-left behind mp1, back layer */
.mp3-screenshot { bottom: 0; left: 24px; z-index: 1; }
.mp3-screenshot img { width: 172px; opacity: .88; }

/* ── App-style phone card header ── */
.mp-app-header {
  border-radius: 14px;
  padding: 14px 14px 12px;
  margin-bottom: 10px;
}
.mp-header-violet { background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%); }
.mp-header-rose   { background: linear-gradient(135deg, #E11D48 0%, #BE123C 100%); }
.mp-header-label  {
  font-size: 9px; color: rgba(255,255,255,.65);
  font-weight: 700; letter-spacing: .7px; margin-bottom: 4px;
}
.mp-header-value  { font-size: 18px; font-weight: 800; color: white; line-height: 1.1; }
.mp-header-sub    { font-size: 9px; color: rgba(255,255,255,.78); margin-top: 3px; }
.mp-header-badge  {
  display: inline-block;
  background: rgba(255,255,255,.18);
  color: rgba(255,255,255,.9);
  font-size: 8px; font-weight: 700;
  padding: 2px 8px; border-radius: 20px; margin-top: 6px;
}

/* ── App-style row list ── */
.mp-rows { margin-top: 2px; }
.mp-row {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 0; border-bottom: 1px solid #F1F5F9;
}
.mp-row:last-child { border-bottom: none; }
.mp-row-ico { font-size: 13px; min-width: 18px; text-align: center; }
.mp-row-txt { font-size: 10px; color: #374151; font-weight: 500; line-height: 1.3; }
.mp-bottom-note {
  font-size: 9px; color: #7C3AED; font-weight: 600;
  margin-top: 8px; text-align: center;
  padding-top: 7px; border-top: 1px solid #EDE9FE;
}

/* ── Global plan button consistency ─────────────────────────────────────── */
/* All plan card CTA buttons share the same size — only colour differs */
.btn-price-full { white-space: nowrap; }

/* ── Register form field hint ────────────────────────────────────────────── */
.reg-field-hint {
  font-size: 11px;
  color: var(--text-xs);
  margin-top: 5px;
  line-height: 1.4;
}

/* ── Features Sub-Nav ────────────────────────────────────────────────────── */
.features-subnav {
  position: sticky;
  top: var(--nav-h);
  z-index: 90;
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 var(--border);
}
.fsn-inner {
  display: flex;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
.fsn-inner::-webkit-scrollbar { display: none; }
.fsn-link {
  flex-shrink: 0;
  padding: 14px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-light);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color .18s, border-color .18s;
}
.fsn-link:hover { color: var(--c-primary); text-decoration: none; }
.fsn-link.fsn-active { color: var(--c-primary); border-bottom-color: var(--c-primary); }

/* ── Pricing Calculator ──────────────────────────────────────────────────── */
.calc-section { padding: 0 0 64px; }
.calc-card {
  background: linear-gradient(135deg, #F5F3FF 0%, #EEF2FF 100%);
  border: 1.5px solid #C4B5FD;
  border-radius: var(--radius-lg);
  padding: 40px;
}
.calc-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 32px;
}
.calc-icon { font-size: 36px; flex-shrink: 0; }
.calc-header h3 { font-size: 22px; font-weight: 800; color: var(--text-h); margin-bottom: 4px; }
.calc-subtitle { font-size: 14px; color: var(--text-light); margin: 0; }
.calc-label { display: block; font-size: 13px; font-weight: 700; color: var(--text-h); margin-bottom: 10px; letter-spacing: .2px; }
.calc-input-row { margin-bottom: 32px; }
.calc-input-wrap { display: flex; align-items: center; max-width: 280px; }
.calc-input {
  flex: 1;
  padding: 12px 16px;
  border: 1.5px solid #A5B4FC;
  border-right: none;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  font-size: 20px;
  font-weight: 700;
  color: var(--text-h);
  background: white;
  outline: none;
  width: 180px;
  -moz-appearance: textfield;
}
.calc-input::-webkit-inner-spin-button,
.calc-input::-webkit-outer-spin-button { -webkit-appearance: none; }
.calc-input:focus { border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(79,70,229,.12); }
.calc-input-suffix {
  padding: 12px 14px;
  background: white;
  border: 1.5px solid #A5B4FC;
  border-left: none;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-light);
}
.calc-plans-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 900px) { .calc-plans-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .calc-plans-grid { grid-template-columns: 1fr; } }
.calc-plan {
  background: white;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: opacity .2s, border-color .2s;
}
.calc-plan-featured { border-color: var(--c-primary); box-shadow: 0 4px 20px rgba(79,70,229,.12); }
.calc-plan-disabled { opacity: 0.42; pointer-events: none; }
.calc-plan-label { font-size: 10px; font-weight: 700; letter-spacing: .5px; border-radius: 20px; padding: 3px 10px; display: inline-block; width: fit-content; }
.calc-label-self { background: #EEF2FF; color: var(--c-primary); }
.calc-label-managed { background: #D1FAE5; color: #065F46; }
.calc-plan-name { font-size: 15px; font-weight: 800; color: var(--text-h); margin-top: 4px; }
.calc-plan-price { font-size: 22px; font-weight: 800; color: var(--c-primary); line-height: 1.1; min-height: 36px; }
.calc-plan-annual { font-size: 11px; color: var(--text-light); min-height: 28px; }
.calc-plan-note { font-size: 10px; color: var(--text-light); margin-bottom: 8px; }
.calc-plan-btn {
  display: block;
  text-align: center;
  padding: 11px 16px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  margin-top: auto;
  transition: transform .18s, box-shadow .18s, background .18s;
}
.calc-btn-outline { border: 1.5px solid var(--c-primary); color: var(--c-primary); }
.calc-btn-outline:hover { background: var(--c-primary-light); text-decoration: none; }
.calc-btn-primary { background: linear-gradient(90deg, var(--c-primary), var(--c-accent)); color: white; box-shadow: 0 4px 14px rgba(79,70,229,.28); }
.calc-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(79,70,229,.38); text-decoration: none; }
.calc-btn-managed { background: linear-gradient(135deg, #065F46, #047857); color: white; box-shadow: 0 4px 14px rgba(4,120,87,.28); }
.calc-btn-managed:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(13,148,136,.38); text-decoration: none; }
.calc-disclaimer { font-size: 11px; color: var(--text-body); text-align: center; margin-top: 24px; line-height: 1.6; }
@media (max-width: 640px) {
  .calc-card { padding: 24px 20px; }
  .calc-header { flex-direction: column; align-items: flex-start; gap: 10px; }
  .calc-icon { font-size: 28px; }
}

/* ── DPDP Consent Checkbox Rows ─────────────────────────────────────────── */
.reg-consent-row, .form-consent-row { margin: 18px 0 10px; }
.reg-consent-label, .form-consent-label {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 12.5px; color: var(--text-body); line-height: 1.6; cursor: pointer;
}
.reg-consent-label input[type="checkbox"],
.form-consent-label input[type="checkbox"] {
  margin-top: 3px; accent-color: var(--c-primary); flex-shrink: 0;
  width: 16px; height: 16px; cursor: pointer;
}
.reg-consent-label a, .form-consent-label a {
  color: var(--c-primary); text-decoration: underline;
}
.reg-error-msg {
  background: #FEF2F2; color: #DC2626; border: 1px solid #FECACA;
  border-radius: var(--radius-sm); padding: 10px 14px;
  font-size: 13px; margin-bottom: 12px;
}

/* ── Consent Page ───────────────────────────────────────────────────────── */
.consent-version-badge {
  display: inline-block; background: var(--c-primary-light);
  color: var(--c-primary); font-size: 12px; font-weight: 700;
  padding: 6px 14px; border-radius: 20px; margin-bottom: 32px;
  letter-spacing: 0.3px;
}
.consent-download-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 22px; background: var(--c-primary); color: white;
  border-radius: var(--radius-sm); font-size: 14px; font-weight: 600;
  text-decoration: none; cursor: pointer; border: none; font-family: var(--font);
}
.consent-download-btn:hover { background: var(--c-primary-dark); color: white; }
.consent-table {
  width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 13.5px;
}
.consent-table th {
  background: var(--bg-alt); font-weight: 600; text-align: left;
  color: var(--text-h);
}
.consent-table th, .consent-table td {
  padding: 10px 14px; border: 1px solid var(--border);
  vertical-align: top; color: var(--text-body);
}
.consent-table tr:hover td { background: var(--bg-alt); }
@media (max-width: 700px) {
  .consent-table thead { display: none; }
  .consent-table, .consent-table tbody, .consent-table tr, .consent-table td {
    display: block; width: 100%;
  }
  .consent-table td { border: none; border-bottom: 1px solid var(--border); padding: 8px 0; }
}

/* ── Print Styles (for Download as PDF) ────────────────────────────────── */
/* ══════════════════════════════════════════════════════
   EI PILLARS SECTION
══════════════════════════════════════════════════════ */
.ei-section {
  padding: 96px 0;
  background: linear-gradient(135deg, #0F0A2E 0%, #1E1142 50%, #0D1B3E 100%);
  position: relative;
  overflow: hidden;
}
.ei-section::before {
  content: '';
  position: absolute;
  top: -120px; left: 50%;
  transform: translateX(-50%);
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(79,70,229,.18) 0%, transparent 65%);
  pointer-events: none;
}
.ei-section .section-tag {
  background: rgba(167,139,250,.15);
  color: #C4B5FD;
  border: 1px solid rgba(167,139,250,.3);
}
.ei-section .section-header h2 { color: white; }
.ei-section .section-header p  { color: rgba(255,255,255,.6); }

.ei-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.ei-card {
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 24px;
  padding: 36px 28px;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: background .3s, border-color .3s, transform .25s;
}
.ei-card:hover {
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.22);
  transform: translateY(-4px);
}
.ei-card-1 { border-top: 3px solid #818CF8; }
.ei-card-2 { border-top: 3px solid #34D399; }
.ei-card-3 { border-top: 3px solid #F472B6; }
.ei-card-num {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: rgba(167,139,250,.7);
  margin-bottom: 14px;
  font-family: var(--font);
}
.ei-card-icon { font-size: 36px; margin-bottom: 16px; line-height: 1; }
.ei-card h3 {
  font-size: 20px;
  font-weight: 800;
  color: white;
  margin-bottom: 8px;
  font-family: var(--font);
}
.ei-tagline {
  font-size: 13px;
  font-style: italic;
  color: rgba(255,255,255,.78);
  margin-bottom: 14px;
  font-family: var(--font);
}
.ei-card > p {
  font-size: 14px;
  color: rgba(255,255,255,.62);
  line-height: 1.7;
  font-family: var(--font);
}
@media (max-width: 860px) {
  .ei-grid { grid-template-columns: 1fr; gap: 16px; }
}

/* ── Pain Points Section ────────────────────────────────────────────────── */
.pp-section {
  padding: 96px 0;
  background: var(--bg-alt);
}
.pp-tag { background: #FEF3C7; color: #92400E; border: 1px solid #FDE68A; }
.pp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}
.pp-card {
  background: white;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: box-shadow .25s, transform .25s;
}
.pp-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.pp-problem-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.pp-icon {
  width: 44px; height: 44px; min-width: 44px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  line-height: 1;
}
.pp-icon-red    { background: #FFF1F2; }
.pp-icon-orange { background: #FFF7ED; }
.pp-icon-yellow { background: #FFFBEB; }
.pp-icon-blue   { background: #EFF6FF; }
.pp-icon-teal   { background: #F0FDFA; }
.pp-icon-purple { background: #F5F3FF; }
.pp-problem {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-h);
  line-height: 1.4;
  padding-top: 2px;
}
.pp-arrow {
  font-size: 20px;
  color: var(--c-primary);
  font-weight: 800;
  padding-left: 4px;
  opacity: .5;
}
.pp-solution {
  background: var(--c-green-light);
  border: 1px solid #A7F3D0;
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  font-size: 13.5px;
  color: var(--text-body);
  line-height: 1.55;
}
.pp-check {
  font-weight: 800;
  color: var(--c-green);
  margin-right: 5px;
}

/* ── Page Hero Badge ────────────────────────────────────────────────────── */
.page-hero-badge {
  display: inline-block;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.25);
  color: rgba(255,255,255,.85);
  padding: 6px 16px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 16px;
  letter-spacing: .2px;
}

/* ── Competitive Comparison Section ────────────────────────────────────── */
.competitive-section {
  padding: 80px 0;
  background: var(--bg-alt);
}
.comp-compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 48px;
}
.comp-card {
  border-radius: var(--radius-xl);
  padding: 36px;
  border: 1.5px solid var(--border);
  background: white;
}
.comp-card-socei {
  border-color: var(--c-primary);
  background: linear-gradient(135deg, var(--c-primary-light) 0%, white 100%);
  box-shadow: 0 0 0 3px rgba(79,70,229,.12), var(--shadow-md);
}
.comp-card-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}
.comp-card-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
}
.comp-others-header .comp-card-icon { background: #F1F5F9; }
.comp-socei-header .comp-card-icon { background: var(--c-primary-light); }
.comp-card-header h3 { font-size: 17px; font-weight: 800; color: var(--text-h); }
.comp-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.comp-list li { font-size: 14px; line-height: 1.5; }
.comp-list-bad li { color: var(--text-light); padding-left: 20px; position: relative; }
.comp-list-bad li::before {
  content: '✗';
  position: absolute; left: 0;
  color: #EF4444;
  font-weight: 700;
}
.comp-list-good li { color: var(--text-body); font-weight: 500; }

/* ── Collapsible "What Makes Us Different" card ── */
.comp-card-collapsible > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 0;
}
.comp-card-collapsible > summary::-webkit-details-marker { display: none; }
.comp-card-collapsible > summary::marker { display: none; }
.comp-toggle {
  margin-left: auto;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(79,70,229,.1);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  color: var(--c-primary);
  transition: transform .25s, background .2s;
  flex-shrink: 0;
  line-height: 1;
}
.comp-card-collapsible[open] .comp-toggle { transform: rotate(180deg); background: rgba(79,70,229,.18); }
.comp-card-collapsible .comp-list { margin-top: 20px; }
/* Competitive section — no overflow clip (comp cards don't animate) */
.competitive-section { position: relative; }

@media (max-width: 860px) {
  .pp-grid { grid-template-columns: 1fr 1fr; }
  .comp-compare-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .pp-grid { grid-template-columns: 1fr; }
}

/* ── App Showcase (features page — per-app expanded sections) ───────────── */
.app-showcase {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 40px;
}
.app-showcase-item {
  background: white;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 28px 32px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .25s;
}
.app-showcase-item:hover { box-shadow: var(--shadow-md); }
.app-showcase-soon { opacity: .82; }
.app-showcase-soon:hover { opacity: .95; }
.app-showcase-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}
.app-showcase-icon {
  width: 52px; height: 52px; min-width: 52px;
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
}
.app-showcase-name {
  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 6px;
}
.app-live-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--c-green-light);
  border: 1px solid #A7F3D0;
  color: #065F46;
  padding: 3px 12px;
  border-radius: 50px;
  font-size: 12px;
  font-weight: 700;
}
.app-live-chip::before {
  content: '';
  display: inline-block;
  width: 7px; height: 7px;
  background: #34D399;
  border-radius: 50%;
  box-shadow: 0 0 5px rgba(52,211,153,.6);
}
.app-soon-chip {
  display: inline-flex;
  align-items: center;
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  color: #B45309;
  padding: 3px 12px;
  border-radius: 50px;
  font-size: 12px;
  font-weight: 700;
}
.app-showcase-features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.app-feat-group h5 {
  font-size: 12px;
  font-weight: 800;
  color: var(--text-h);
  letter-spacing: .3px;
  margin-bottom: 10px;
  line-height: 1.3;
}
.app-feat-group ul { list-style: none; padding: 0; }
.app-feat-group ul li {
  font-size: 12.5px;
  color: var(--text-light);
  padding: 4px 0 4px 14px;
  position: relative;
  line-height: 1.45;
  border-bottom: 1px solid #F1F5F9;
}
.app-feat-group ul li:last-child { border-bottom: none; }
.app-feat-group ul li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--c-primary);
  font-size: 10px;
  top: 5px;
}
@media (max-width: 1100px) {
  .app-showcase-features { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px) {
  .app-showcase-features { grid-template-columns: repeat(2, 1fr); }
  .app-showcase-item { padding: 22px 20px; }
}
@media (max-width: 540px) {
  .app-showcase-features { grid-template-columns: 1fr; }
}

/* ── Feature Cards: Coming Soon badges (homepage grid) ──────────────────── */
.feature-card-soon {
  position: relative;
  opacity: .76;
  border-style: dashed;
}
.feature-card-soon:hover { opacity: .9; }
.feat-soon-badge {
  display: inline-flex;
  align-items: center;
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  color: #B45309;
  border-radius: 50px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .3px;
  margin-bottom: 8px;
}

/* ── Features Page: Availability Strip (page hero) ──────────────────────── */
.feat-availability-strip {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  justify-content: center;
  margin: 24px auto 0;
  padding: 14px 24px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--radius-md);
  max-width: 720px;
}
.fas-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.fas-live { color: rgba(255,255,255,.82); }
.fas-soon { color: rgba(255,255,255,.55); }
.fas-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.fas-dot-live { background: #34D399; box-shadow: 0 0 6px rgba(52,211,153,.6); }
.fas-dot-soon { background: #FCD34D; }

/* ── Features Page: Live / Coming-Soon section banners ──────────────────── */
.feat-live-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  background: var(--c-green-light);
  border: 1px solid #A7F3D0;
  border-radius: var(--radius-md);
  font-size: 14px;
  color: #065F46;
  margin-bottom: 32px;
  line-height: 1.55;
}
.feat-live-dot {
  width: 10px; height: 10px;
  background: #34D399;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 8px rgba(52,211,153,.5);
}
.feat-coming-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 20px;
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  border-radius: var(--radius-md);
  font-size: 14px;
  color: #78350F;
  margin-bottom: 32px;
  line-height: 1.55;
}
.feat-coming-icon { font-size: 18px; line-height: 1.3; flex-shrink: 0; }
.feat-live-banner strong,
.feat-coming-banner strong { font-weight: 700; }

/* ── Managed Services Section ────────────────────────────────────────────── */
.ms-section {
  background: linear-gradient(135deg, #0F0E2A 0%, #1E1B4B 60%, #2D1B69 100%);
  padding: 100px 0;
  position: relative;
  overflow: hidden;
}
.ms-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.ms-orb-1 {
  top: -200px; right: -100px;
  width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(124,58,237,.18) 0%, transparent 70%);
}
.ms-orb-2 {
  bottom: -150px; left: -150px;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(79,70,229,.12) 0%, transparent 70%);
}
.ms-inner {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 72px;
  align-items: start;
}
.ms-badge {
  display: inline-flex;
  align-items: center;
  background: rgba(124,58,237,.22);
  border: 1px solid rgba(124,58,237,.4);
  color: #C4B5FD;
  padding: 6px 16px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .3px;
  margin-bottom: 22px;
}
.ms-headline {
  font-size: clamp(24px, 3.2vw, 36px);
  font-weight: 800;
  color: white;
  line-height: 1.22;
  margin-bottom: 20px;
}
.ms-headline-accent {
  background: linear-gradient(135deg, #A78BFA 0%, #60A5FA 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.ms-body {
  color: rgba(255,255,255,.70);
  font-size: 15.5px;
  line-height: 1.72;
  margin-bottom: 16px;
}
.ms-body strong { color: rgba(255,255,255,.88); }
.ms-includes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 16px;
  margin: 24px 0;
}
.ms-include-item {
  font-size: 13.5px;
  color: rgba(255,255,255,.88);
}
.ms-cta-row {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 28px;
}
.ms-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: white;
  color: var(--c-primary);
  font-weight: 700;
  padding: 14px 24px;
  border-radius: var(--radius-md);
  font-size: 15px;
  transition: transform .2s, box-shadow .2s;
  text-decoration: none;
  white-space: nowrap;
}
.ms-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  text-decoration: none;
  color: var(--c-primary);
}
.ms-link {
  font-size: 14px;
  color: rgba(255,255,255,.80);
  text-decoration: none;
  transition: color .2s;
}
.ms-link:hover { color: rgba(255,255,255,.8); text-decoration: none; }
.ms-flow-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .9px;
  color: rgba(255,255,255,.65);
  text-transform: uppercase;
  margin-bottom: 16px;
}
.ms-flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: stretch;
}
.ms-flow-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(167,139,250,.4);
  padding: 0 8px;
}
.ms-flow-card {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--radius-lg);
  padding: 22px 18px;
}
.ms-card-accountant {
  background: rgba(124,58,237,.18);
  border-color: rgba(167,139,250,.35);
}
.ms-card-committee {
  background: rgba(5,150,105,.14);
  border-color: rgba(52,211,153,.30);
}
.ms-flow-icon { font-size: 24px; margin-bottom: 12px; line-height: 1; }
.ms-flow-card h4 {
  font-size: 13px;
  font-weight: 800;
  color: white;
  margin-bottom: 12px;
}
.ms-flow-card ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ms-flow-card ul li { font-size: 12px; color: rgba(255,255,255,.82); line-height: 1.4; }
.ms-flow-card ul li::before { content: '· '; color: rgba(167,139,250,.6); font-weight: 800; }
.ms-card-committee ul li::before { color: rgba(52,211,153,.6); }
.ms-self-note {
  margin-top: 20px;
  padding: 14px 18px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--radius-md);
  font-size: 13px;
  color: rgba(255,255,255,.78);
  line-height: 1.55;
}
.ms-self-note strong { color: rgba(255,255,255,.95); }
@media (max-width: 960px) {
  .ms-inner { grid-template-columns: 1fr; gap: 48px; }
}
@media (max-width: 720px) {
  .ms-flow { grid-template-columns: 1fr; }
  .ms-flow-arrow { padding: 4px 0; }
  .ms-includes { grid-template-columns: 1fr; }
}

/* ── WhatsApp Floating Button ───────────────────────────────────────────── */
.wa-float {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 0 4px 20px rgba(37,211,102,.45), 0 2px 8px rgba(0,0,0,.15);
  z-index: 1100;
  transition: transform .2s, box-shadow .2s;
}
.wa-float:hover {
  transform: scale(1.1);
  box-shadow: 0 8px 28px rgba(37,211,102,.55), 0 4px 12px rgba(0,0,0,.18);
  text-decoration: none;
  color: white;
}
.wa-float svg { width: 30px; height: 30px; fill: white; }
@media (max-width: 768px) { .wa-float { bottom: 20px; right: 16px; width: 50px; height: 50px; } }
@media print { .wa-float { display: none !important; } }

/* ═══════════════════════════════════════════════════════
   MODERN SIMPLE UX PASS v10
   Purpose: calmer layout, stronger hierarchy, clearer cards,
   and simpler responsive behavior without changing routes.
═══════════════════════════════════════════════════════ */

:root {
  --surface: rgba(255,255,255,.86);
  --surface-strong: #FFFFFF;
  --ring: rgba(91,84,232,.16);
  --shadow-soft: 0 18px 48px rgba(30,27,58,.08);
  --shadow-card: 0 10px 30px rgba(30,27,58,.07);
  --grad-brand: linear-gradient(135deg, #5B54E8 0%, #7C6FEB 100%);
}

body.socei-body {
  background:
    radial-gradient(circle at 0 0, rgba(91,84,232,.06), transparent 34rem),
    linear-gradient(180deg, #FAFAFE 0%, #FFFFFF 46%, #FAFAFE 100%);
}

.socei-nav {
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(228,224,249,.72);
}
.nav-container { max-width: 1160px; }
.nav-brand { gap: 10px; }
.brand-mark {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--c-primary-light);
  box-shadow: inset 0 0 0 1px rgba(91,84,232,.12);
}
.brand-text { font-size: 19px; letter-spacing: -.7px; }
.nav-link { border-radius: 999px; }
.nav-btn,
.btn-hero-primary,
.btn-form-submit,
.btn-price-primary-full,
.calc-btn-primary {
  background: var(--grad-brand);
  box-shadow: 0 10px 24px rgba(91,84,232,.25);
}
.nav-btn:hover,
.btn-hero-primary:hover,
.btn-form-submit:hover,
.btn-price-primary-full:hover,
.calc-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(91,84,232,.32);
}

.hero { min-height: 82vh; overflow: hidden; }
.hero-inner {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 34px 24px 72px;
  gap: clamp(28px, 5vw, 72px);
}
.hero-content { max-width: 590px; padding: 54px 0; }
.hero-title { font-size: clamp(38px, 5.6vw, 68px); letter-spacing: -2px; }
.hero-subtitle { font-size: 18px; max-width: 560px; }
.hero-trust { gap: 10px; }
.hero-trust span,
.reg-trust-item,
.trust-badge {
  background: rgba(255,255,255,.74);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 7px 12px;
  box-shadow: 0 2px 10px rgba(30,27,58,.04);
}
.hp-frame,
.phone-mockup {
  box-shadow: 0 30px 70px rgba(30,27,58,.2), 0 0 0 1px rgba(255,255,255,.65);
}

.page-hero {
  padding: calc(var(--nav-h) + 44px) 0 54px;
  background:
    radial-gradient(circle at 88% 18%, rgba(124,111,235,.14), transparent 24rem),
    radial-gradient(circle at 12% 0%, rgba(16,185,129,.10), transparent 24rem),
    linear-gradient(150deg, #FAFAFE 0%, #F3F0FF 52%, #EEF5FF 100%);
}
.page-hero .container { max-width: 920px; }
.page-hero h1 { font-size: clamp(34px, 4.6vw, 58px); letter-spacing: -1.8px; line-height: 1.05; }
.page-hero p { max-width: 760px; font-size: 18px; line-height: 1.72; }
.breadcrumb-nav { margin-bottom: 18px; font-weight: 700; opacity: .8; }
.page-hero-badge,
.hero-badge,
.section-tag {
  border-radius: 999px;
  font-weight: 800;
}

.section-header { max-width: 760px; margin: 0 auto 48px; }
.section-header h2 { letter-spacing: -1px; line-height: 1.12; }
.section-header p { font-size: 16px; line-height: 1.75; }
.feature-deep-section,
.pricing-section,
.contact-section,
.pp-section,
.ei-section,
.community-section,
.dashboard-section,
.ecosystem-section {
  padding-top: 72px;
  padding-bottom: 72px;
}

.feat-deep-header {
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: 760px;
  margin-bottom: 30px;
}
.feat-deep-header h2 {
  font-size: clamp(26px, 3vw, 38px);
  color: var(--text-h);
  letter-spacing: -.8px;
  line-height: 1.15;
}
.feat-deep-header p { color: var(--text-light); font-size: 15px; margin-top: 5px; }
.feat-deep-icon,
.feat-detail-card,
.pricing-card,
.contact-form-card,
.contact-info-card,
.pp-card,
.faq-item,
.mb-card,
.calc-card,
.app-showcase-item {
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(228,224,249,.82);
}
.feat-detail-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.feat-detail-card {
  border-radius: 22px;
  padding: 24px;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.feat-detail-card:hover {
  transform: translateY(-3px);
  border-color: var(--ring);
  box-shadow: var(--shadow-soft);
}
.feat-detail-card h4 { font-size: 16px; letter-spacing: -.2px; }
.feat-detail-card p { font-size: 14.5px; color: var(--text-body); }

.features-subnav {
  background: rgba(255,255,255,.92);
  box-shadow: 0 8px 22px rgba(30,27,58,.05);
}
.fsn-inner { justify-content: center; }
.fsn-link {
  margin: 8px 3px;
  padding: 8px 13px;
  border: 1px solid transparent;
  border-radius: 999px;
}
.fsn-link:hover,
.fsn-link.fsn-active {
  background: var(--c-primary-light);
  border-color: rgba(91,84,232,.18);
}

.feat-availability-strip,
.feat-live-banner,
.feat-coming-banner {
  border-radius: 18px;
  box-shadow: 0 10px 28px rgba(30,27,58,.05);
}
.feat-availability-strip { max-width: 900px; }
.app-showcase { gap: 24px; }
.app-showcase-item { border-radius: 26px; padding: 30px; opacity: 1; }
.app-showcase-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.app-showcase-soon {
  opacity: 1;
  background: linear-gradient(180deg, #FFFFFF 0%, #FFFBF3 100%);
  border-style: solid;
}
.app-showcase-header { margin-bottom: 20px; padding-bottom: 18px; }
.app-showcase-icon { border-radius: 18px; }
.app-showcase-name { font-size: 20px; }
.app-showcase-features { gap: 16px; }
.app-feat-group {
  background: rgba(248,250,252,.72);
  border: 1px solid #EEF2F7;
  border-radius: 16px;
  padding: 14px;
}
.app-feat-group h5 { font-size: 13px; margin-bottom: 8px; }
.app-feat-group ul li {
  border-bottom: none;
  padding-top: 5px;
  padding-bottom: 5px;
  color: var(--text-body);
}
.app-feat-group ul li::before { content: '✓'; color: var(--c-green); font-weight: 800; }
.app-showcase-soon .app-feat-group ul li::before { content: '•'; color: #D97706; }

.pricing-cards-grid { gap: 22px; }
.pricing-card { border-radius: 26px; padding: 28px; }
.pricing-card-featured { transform: none; }
.pc-price { letter-spacing: -1.4px; }
.pc-feat { line-height: 1.45; }
.plan-type-strip,
.calc-card,
.enach-callout,
.ca-bundle-card,
.contact-form-card,
.contact-info-card,
.reg-form-card,
.reg-benefits {
  border-radius: 26px;
}
.form-group input,
.form-group select,
.form-group textarea,
.reg-input,
.reg-select {
  min-height: 46px;
  border-radius: 14px;
}

.socei-footer { border-top: 1px solid rgba(255,255,255,.08); }
.footer-inner { max-width: 1160px; gap: 54px; }
.wa-float { box-shadow: 0 14px 32px rgba(37,211,102,.32); }

@media (max-width: 1024px) {
  .feat-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero { min-height: auto; }
  .hero-content { max-width: 720px; text-align: center; margin: 0 auto; }
  .hero-actions, .hero-trust { justify-content: center; }
  .fsn-inner { justify-content: flex-start; }
}

@media (max-width: 768px) {
  :root { --nav-h: 64px; }
  .container, .nav-container { padding-left: 18px; padding-right: 18px; }
  .hero-inner { padding: 18px 18px 52px; }
  .hero-content { padding: 42px 0 18px; text-align: left; }
  .hero-title { font-size: clamp(34px, 11vw, 46px); letter-spacing: -1.4px; }
  .hero-subtitle { font-size: 16px; }
  .hero-actions, .hero-trust { justify-content: flex-start; }
  .page-hero { padding: calc(var(--nav-h) + 28px) 0 38px; text-align: left; }
  .page-hero p { font-size: 16px; }
  .feature-deep-section,
  .pricing-section,
  .contact-section,
  .pp-section,
  .ei-section,
  .community-section,
  .dashboard-section,
  .ecosystem-section {
    padding-top: 54px;
    padding-bottom: 54px;
  }
  .feat-deep-header { align-items: flex-start; }
  .feat-detail-grid,
  .pricing-cards-grid,
  .app-showcase-features,
  .managed-benefits-grid,
  .pp-grid,
  .faq-grid { grid-template-columns: 1fr !important; }
  .feat-detail-card,
  .pricing-card,
  .contact-form-card,
  .contact-info-card,
  .app-showcase-item { padding: 22px; border-radius: 22px; }
  .footer-links-grid { grid-template-columns: 1fr 1fr; gap: 22px; }
}

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

@media print {
  .socei-nav, .socei-footer, .consent-download-btn,
  .breadcrumb-nav, .OfflineBanner { display: none !important; }
  .page-hero {
    background: white !important; color: black !important;
    padding: 20px 0 10px !important; box-shadow: none !important;
  }
  .page-hero h1 { color: black !important; font-size: 22pt !important; }
  .page-hero p { color: #333 !important; }
  body.socei-body { background: white !important; }
  .legal-section { break-inside: avoid; }
  .consent-table { font-size: 10pt; }
  a { color: #333 !important; }
}