/* Mobile-first header/navbar styles */
header.navbar {
  box-sizing: border-box;
  z-index: 1050;
  width: 100%;
  left: 0;
  right: 0;
  border-radius: 0 !important;
}

/* Offcanvas Navigation: default to full-width on small screens,
   constrain on larger viewports */
#mainNav.offcanvas {
  width: 100%;
  max-width: 100%;
  right: 0 !important;
  left: auto !important;
  box-sizing: border-box;
}

@media (min-width: 400px) {
  #mainNav.offcanvas {
    max-width: 400px; 
    width: 80vw;
  }
}

body.offcanvas-open {
  overflow-x: hidden !important;
}

/* Flexbox Layouts for Custom Containers (mobile-first) */
.flex-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  max-width: var(--container-max);
  align-items: stretch;
  padding-left: var(--site-gutter);
  padding-right: var(--site-gutter);
  box-sizing: border-box;
} 

/* Hero Section Flex (stacked on mobile) */
.flex-hero {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: flex-start;
  align-items: stretch;
  padding-left: 0;
  padding-right: 0;
} 
.flex-hero-left, .flex-hero-right {
  flex: 1 1 100%;
  min-width: 0;
  max-width: 100%;
}

@media (min-width: 768px) {
  .flex-hero {
    flex-direction: row;
    align-items: center;
    gap: 1.5rem;
  }
  .flex-hero-left { flex: 0 1 55%; margin-right: 1.5rem; }
  .flex-hero-right { flex: 0 1 45%; margin-left: 1.5rem; }
}

@media (min-width: 992px) {
  .flex-container { gap: 2rem; max-width: 1200px; }
  .flex-hero {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .flex-hero-left, .flex-hero-right {
    flex: 1 1 320px;
    min-width: 280px;
    max-width: 600px;
  }
  .flex-hero-left { margin-right: 2rem; max-width: 56ch; }
  .flex-hero-right { margin-left: 2rem; }
} 

/* Responsive typography for hero */
.flex-hero h1.display-5 {
  font-size: clamp(1.8rem, 6.2vw, 3.6rem);
  line-height: 1.02;
  word-wrap: break-word;
  hyphens: auto;
  color: var(--color-text);
}

.flex-hero-right { max-width: 480px; }
.flex-hero-right .lead { color: var(--color-muted); max-width: 480px; }

.flex-container { max-width: var(--container-max); }


.flex-hero-right .lead {
  font-size: clamp(0.95rem, 2.2vw, 1.125rem);
}

/* Allow chips to wrap on small screens so they don't overflow */
.chip { white-space: normal; }

/* Slightly tighter gap on small hero to avoid large vertical empty space */
.flex-hero { gap: 0.75rem; }

/* Product Section Flex */
.flex-product {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: flex-start;
  align-items: stretch;
  padding-left: 0;
  padding-right: 0;
} 
.flex-product-left, .flex-product-right {
  flex: 1 1 100%;
  min-width: 0;
  max-width: 100%;
}
/* Mobile stacking order: show descriptive text first on small screens */
.flex-product-left { order: 2; margin-right: 0; }
.flex-product-right { order: 1; margin-left: 0; }

.flex-product-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 1rem;
}
.flex-product-step {
  display: flex;
}
.flex-product-step .card {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.flex-product-step .card .card-body {
  flex: 1 1 auto;
}

@media (min-width: 992px) {
  .flex-product {
    flex-direction: row;
    gap: calc(var(--site-gutter) / 2);
    align-items: flex-start;
    justify-content: space-between;
  }
  /* On desktop show cards left, text right */
  .flex-product-left { order: 1; flex: 0 0 60%; max-width: 60%; padding-right: calc(var(--site-gutter) / 2); }
  .flex-product-right { order: 2; flex: 0 0 38%; max-width: 38%; display: flex; align-items: center; padding-left: calc(var(--site-gutter) / 2); }

  /* Use a 2-column grid for steps so they stay within the left column and look like a 2x2 card layout */
  .flex-product-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; margin-top: 1.5rem; width: 100%; }
  .flex-product-step { min-width: 0; max-width: 100%; }
}

@media (min-width: 992px) {
  .flex-product {
    flex-direction: row;
    gap: calc(var(--site-gutter) / 2);
    align-items: flex-start;
    justify-content: space-between;
  }
  .flex-product-left, .flex-product-right {
    flex: 1 1 320px;
    min-width: 280px;
    max-width: 600px;
  }
  .flex-product-left { margin-right: 0; padding-right: calc(var(--site-gutter) / 2); }
  .flex-product-right { margin-left: 0; padding-left: calc(var(--site-gutter) / 2); }
  /* Use a 2-column grid for steps so they stay within the left column and don't overflow under the right card */
  .flex-product-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; margin-top: 1.5rem; width: 100%; }
  .flex-product-step { flex: unset; min-width: 0; max-width: 100%; }
  /* Make right card sit above steps to prevent visual overlap */
  .flex-product-right .card { position: relative; z-index: 2; }
  .flex-product-steps { z-index: 1; }
}
/* Root variables and resets */
:root {
  /* Facebook-style primary */
  --color-primary: #1877F2;
  --color-primary-dark: #165EDC;
  --color-accent: #F59E0B;
  --color-success: #22C55E;
  --color-text: #0F172A;
  --color-muted: #6B7280;
  --color-bg: #F5F7FB;
  --color-surface: #FFFFFF;
  --site-header-h: 56px; /* safer initial header height to avoid CLS on first paint */
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-heading: 'Space Grotesk', 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --radius: 12px;
  --container-max: 1200px;
  /* Horizontal gutter applied consistently across sections */
  --site-gutter: 24px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --shadow-soft: 0 12px 36px rgba(15, 23, 42, 0.08);
  --shadow-strong: 0 18px 48px rgba(15, 23, 42, 0.12);
} 

/* On larger viewports raise the header CSS variable so body padding-top increases without layout shift once CSS media queries apply. JS can still fine-tune if needed. */
@media (min-width: 576px) {
  :root { --site-header-h: 72px; }
} 

/* Increase header height slightly on larger viewports to account for larger brand lockups and nav spacing */
@media (min-width: 992px) {
  :root { --site-header-h: 88px; }
} 

/* Global resets */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; width: 100%; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* Dark mode overrides */
[data-theme="dark"] {
  --color-primary: #0b5fc4;
  --color-primary-dark: #0a4ea3;
  --color-accent: #f59e0b;
  --color-success: #22c55e;
  --color-text: #f5f7fb;
  --color-bg: #0f172a;
  --color-surface: #1a2332;
  --shadow-soft: 0 10px 30px rgba(15, 23, 42, 0.32);
}

body[data-theme="dark"], [data-theme="dark"] body { background: var(--color-bg); color: var(--color-text); }
.bg-surface[data-theme="dark"], [data-theme="dark"] .bg-surface { background: var(--color-surface) !important; }
.card[data-theme="dark"], [data-theme="dark"] .card { background: var(--color-surface); color: var(--color-text); border-color: #22304a; }
.navbar[data-theme="dark"], [data-theme="dark"] .navbar { background-color: #101a2b !important; }
.modal-content[data-theme="dark"], [data-theme="dark"] .modal-content { background: var(--color-surface); color: var(--color-text); }
.btn-outline-secondary[data-theme="dark"], [data-theme="dark"] .btn-outline-secondary { color: #f5f7fb; border-color: #f5f7fb; }
.btn-outline-secondary[data-theme="dark"]:hover, [data-theme="dark"] .btn-outline-secondary:hover { background: #22304a; color: #fff; }

/* Fixed header (mobile-first): JS updates --site-header-h dynamically */
header.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1050;
  box-shadow: 0 6px 20px rgba(15,23,42,0.07);
  min-height: var(--site-header-h);
  height: var(--site-header-h);
  align-items: center;
  background: linear-gradient(90deg, color-mix(in srgb, var(--color-primary) 70%, #fff) , var(--color-primary-dark));
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

header.navbar .brand-name { color: #fff; }

/* Emphasize nav color to match Facebook tone */
.navbar .nav-link { color: rgba(255,255,255,0.92) !important; }
.navbar .nav-link:hover, .navbar .nav-link:focus { color: #fff !important; }
 

/* Ensure page content is offset by header height */
body { padding-top: var(--site-header-h); }

@media (max-width: 575.98px) {
  :root { --site-header-h: 56px; }
  header.navbar { min-height: 56px !important; padding-left: 0 !important; padding-right: 0 !important; }
  /* Use width:100% (not 100vw) to avoid horizontal scroll with scrollbars and platform quirks */
  .container, .row, .card, .bg-gradient-hero, .bg-surface { width: 100%; max-width: 100%; margin-left: auto; margin-right: auto; padding-left: 12px; padding-right: 12px; box-sizing: border-box; }
  .brand-mark { max-width: 36px; max-height: 36px; width: 36px !important; height: 36px !important; margin-right: 8px !important; object-fit: contain; transition: none !important; padding:4px; margin-left: auto; margin-right: auto; display: block; border-radius: var(--radius); }
  .navbar .navbar-brand { padding-top: 0 !important; padding-bottom: 0 !important; align-items: center !important; }
  .navbar { min-height: 56px !important; }
}

/* Offcanvas behavior for app-like mobile look */
@media (max-width: 991.98px) {
  .offcanvas.offcanvas-end.offcanvas-nav {
    top: var(--site-header-h);
    height: calc(100vh - var(--site-header-h));
    width: 100%;
    max-width: 100%;
  }
  .offcanvas-backdrop { inset: 0; }
}

body {
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  font-size: 16px;
  line-height: 1.55;
}

/* Make Bootstrap .container respect our preferred max width and site gutter */
.container { max-width: var(--container-max); padding-left: var(--site-gutter); padding-right: var(--site-gutter); box-sizing: border-box; } 

/* Tweak text-muted color globally */
.text-body-secondary, .small { color: var(--color-muted) !important; }


.scroll-offset {
  scroll-margin-top: calc(var(--site-header-h) + 24px);
}

/* Ensure anchored section headings and sections are offset from the fixed header
   so clicking nav links doesn't hide content underneath the sticky header. */
section[id], .section-target, [id].section-target, [id] {
  scroll-margin-top: calc(var(--site-header-h) + 24px);
}

/* Optional: make in-page jumps smooth for better UX */
html {
  scroll-behavior: smooth;
}

@media (max-width: 575.98px) {
  .btn {
    min-height: 44px;
  }
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
}

.bg-primary {
  background-color: var(--color-primary) !important;
}

.text-primary {
  color: var(--color-primary) !important;
}

.btn-primary {
  background: linear-gradient(180deg, var(--color-primary), var(--color-primary-dark));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 8px 20px rgba(24,119,242,0.12);
  padding: 0.7rem 1.25rem;
  border-radius: 10px;
  font-weight: 600;
}

.btn-primary:hover { transform: translateY(-1px); box-shadow: var(--shadow-strong); }

/* Facebook-like primary tone for outline buttons and small text links */
.btn-outline-primary { color: var(--color-primary); border-color: color-mix(in srgb, var(--color-primary) 30%, transparent); }
.btn-outline-primary:hover { background: color-mix(in srgb, var(--color-primary) 8%, #ffffff); color: var(--color-primary-dark); }

a.link-underline { color: var(--color-primary); }
a.link-underline:hover { color: var(--color-primary-dark); }

.btn-outline-primary {
  color: var(--color-primary);
  border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
  background: rgba(255,255,255,0.9);
  border-radius: 10px;
}

.btn-outline-primary:hover {
  background: color-mix(in srgb, var(--color-primary) 6%, #ffffff);
  color: #08386a;
}


.hero-cta-link,
.hero-cta-link:hover,
.hero-cta-link:focus {
  text-decoration: none !important;
}

.btn-login {
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}

header.navbar {
  --nav-pad-y: 0.6rem;
  padding-top: var(--nav-pad-y);
  padding-bottom: var(--nav-pad-y);
}

header.navbar .container {
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

header.navbar .navbar-brand {
  padding-top: 0;
  padding-bottom: 0;
}

header.navbar .navbar-toggler {
  padding: 0.5rem 0.65rem;
  border-color: rgba(255, 255, 255, 0.35);
  border-radius: var(--radius);
  line-height: 1;
}

header.navbar .navbar-toggler:focus {
  box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.18);
}

header.navbar .navbar-toggler-icon {
  width: 1.4em;
  height: 1.4em;
}

.dropdown-item svg {
  width: 18px;
  height: 18px;
}

.navbar-brand {
  --brand-h: clamp(1.95rem, 3.4vw, 2.6rem);
  gap: clamp(0.35rem, 1vw, 0.75rem) !important;
}

.navbar .nav-link {
  font-family: system-ui;
  border-radius: 999px;
  transition: transform 160ms ease, background-color 160ms ease, color 160ms ease;
  transform-origin: left center;
  color: rgba(255,255,255,0.9) !important;
  /* font-weight: 600; */
  /* padding: 0.4rem 0.6rem; */
}

/* Slightly smaller nav links used for compact header items (FAQ/Contact duplicates) */
.nav-link.small-nav {
  padding: 0.25rem 0.5rem;
  font-weight: 600;
  opacity: 0.95;
}

.navbar .nav-link::after { content: ''; display: block; height: 2px; width: 0; background: rgba(255,255,255,0.14); transition: width 220ms ease; border-radius: 2px; }
.navbar .nav-link:hover::after, .navbar .nav-link:focus::after { width: 100%; }


@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .navbar .nav-link:hover,
  .navbar .nav-link:focus-visible {
    background: color-mix(in srgb, var(--color-primary) 14%, transparent);
    transform: translateY(-1px) scale(1.02);
  }
}

/* Keep nav items in one line on wide viewports and ensure login button is visible */
.navbar .navbar-nav {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: nowrap;
  margin-left: auto;
  overflow: visible;
}

.navbar .btn-login {
  display: inline-flex;
  white-space: nowrap;
  flex-shrink: 0; /* prevent button from shrinking when nav is tight */
  z-index: 1100;
}

.navbar .locale-select {
  min-width: 120px;
  max-width: 160px;
  flex-shrink: 0; /* keep the language control stable */
}

/* Slight spacing for the login item and ensure it remains visible */
.navbar .nav-item.login-item { margin-left: 1rem; }

@media (min-width: 1200px) {
  .navbar .navbar-nav { gap: 1.5rem; }
  .navbar .btn-login { padding-left: 1rem; padding-right: 1rem; }
}

/* Ensure the login button is always visible on large screens even when zoomed by reserving header right space
   and pinning the login item there. On small screens absolute positioning is disabled to keep the offcanvas behavior. */
@media (min-width: 992px) {
  .navbar .container {
    position: relative;
    /* reserve more room on the right so login + locale remain visible at all times */
    padding-right: calc(var(--site-gutter) + 220px) !important;
  }
  .navbar .navbar-nav { margin-right: 0; }
  .navbar .nav-item.login-item {
    position: absolute;
    right: var(--site-gutter);
    top: 50%;
    transform: translateY(-50%);
    margin-left: 0;
    z-index: 1200;
  }
  .navbar .locale-select { position: absolute; right: calc(var(--site-gutter) + 92px); top: 50%; transform: translateY(-50%); z-index: 1150; }
} 

@media (prefers-reduced-motion: reduce) {
  .navbar .nav-link {
    transition: none;
  }
}

@media (max-width: 991.98px) {
  .navbar .offcanvas.offcanvas-nav {
    top: var(--site-header-h);
    height: calc(100% - var(--site-header-h));
    background: color-mix(in srgb, var(--color-primary) 10%, #ffffff);
    color: var(--color-text);
  }

  .navbar .offcanvas.offcanvas-nav .navbar-nav {
    gap: 6px;
  }

  .navbar .offcanvas.offcanvas-nav .nav-item {
    width: 100%;
  }

  .navbar .offcanvas.offcanvas-nav .nav-link {
    padding: 10px 12px;
  }

  .navbar .offcanvas.offcanvas-nav .nav-link {
    color: var(--color-text) !important;
  }

  .navbar .offcanvas.offcanvas-nav .nav-link:hover,
  .navbar .offcanvas.offcanvas-nav .nav-link:focus {
    color: var(--color-primary-dark) !important;
  }

  .navbar .offcanvas.offcanvas-nav .locale-select {
    width: 100%;
  }

  .navbar .offcanvas.offcanvas-nav .btn-login {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
  }

  .navbar .offcanvas.offcanvas-nav .dropdown-menu {
    width: 100%;
  }
}

@media (min-width: 992px) {
  /* Ensure the offcanvas element behaves like a normal static collapse at desktop sizes */
  .navbar .offcanvas.offcanvas-nav {
    position: static !important;
    height: auto !important;
    background: transparent;
    transform: none !important;
    visibility: visible !important;
  }
  .navbar .offcanvas.offcanvas-nav .navbar-nav { gap: 1rem; }
} 

.brand-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.05rem, 2.0vw, 1.45rem);
  line-height: 1;
  letter-spacing: 0.02em;
}

.brand-mark {
  height: clamp(36px, 6.5vw, 64px);
  width: auto;
  display: inline-block;
  object-fit: contain;
  flex: 0 0 auto;
  /* Keep logo visually constrained so it never overflows the fixed header */
  max-height: calc(var(--site-header-h) - 12px);
  vertical-align: middle;
  /* Logo uses no background or extra chrome — keep it visually clean */
  background: transparent;
  border-radius: 0;
  padding: 0;
  border: none;
  box-shadow: none;
  box-sizing: border-box;
}

@media (min-width: 992px) {
  .brand-mark { height: 56px; max-height: calc(var(--site-header-h) - 18px); }
}

/* Extra safeguard scoped to the header for specificity */
.navbar .brand-mark { max-height: calc(var(--site-header-h) - 25px) !important; height: auto !important; } 

.brand-wordmark {
  height: var(--brand-h);
  width: auto;
  flex: 0 1 auto;
  min-width: 0;
}

.brand-inline-wordmark {
  height: 0.98em;
  width: auto;
  display: inline-block;
  vertical-align: -0.16em;
  margin-right: 0.2em;
}

/* Make images responsive by default to avoid overflow on narrow viewports */
img, .brand-inline-wordmark, .brand-wordmark, .brand-mark {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Keep inline wordmark horizontally aligned when used inline */
.brand-inline-wordmark { display: inline-block; height: 0.98em; vertical-align: -0.16em; }

/* Premium card upgrades (applied globally, with gentle border and stronger shadow) */
.card {
  border-radius: 12px;
  border: 1px solid rgba(11,95,196,0.06);
  box-shadow: 0 10px 30px rgba(11,95,196,0.04);
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.99));
}

.icon-circle { box-shadow: 0 4px 14px rgba(11,95,196,0.06); border: 1px solid rgba(11,95,196,0.06); }

/* Slightly larger headings for premium feel */
h1.display-5 { font-family: var(--font-heading); font-weight: 700; }

h2.fw-bold { font-family: var(--font-heading); font-weight: 700; color: var(--color-text); }

.brand-fallback {
  display: none;
  line-height: 1;
}

.pipeline {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

.pipeline-column {
  background: rgba(11, 95, 196, 0.04);
  border: 1px solid rgba(11, 95, 196, 0.12);
  border-radius: var(--radius);
  padding: var(--space-3);
  height: 100%;
}

@media (min-width: 992px) {
  .pipeline {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Premium, consistent section hero style used by Product / Integrations / Security / Legal / Pricing / FAQ / Contact */
.section-hero {
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-primary) 4%, #ffffff), transparent 40%);
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
  /* Cap the full-viewport behaviour so sections don't create excessive gaps */
  min-height: min(calc(100vh - var(--site-header-h)), 760px);
  display: flex;
  align-items: center;
}

.section-hero.bg-surface { /* alternate surface variant */
  background: var(--color-surface);
}

.section-hero .card {
  border-radius: 12px;
  box-shadow: var(--shadow-soft);
}

.section-hero h2 {
  font-size: clamp(1.25rem, 2.0vw, 1.9rem);
  color: var(--color-text);
}

/* Small visual tweak: keep buttons consistent */
.section-hero .btn-outline-primary {
  border-radius: 8px;
}

/* Ensure bootstrap accordion headers remain visibly styled on all themes */
.accordion-button {
  background: var(--color-surface) !important;
  color: var(--color-text) !important;
  border-radius: 10px;
  box-shadow: var(--shadow-soft);
}
.accordion-button::after {
  /* make sure the chevron is visible and not dimmed */
  opacity: 1 !important;
  filter: none !important;
}
.accordion .accordion-item { position: relative; z-index: 2; }

/* Enable scroll snapping on wider viewports so one section is visible at a time when scrolling */
@media (min-width: 768px) {
  /* Use proximity so keyboard and touch interactions feel natural */
  html, body { scroll-snap-type: y proximity; }
  section { scroll-snap-align: start; }
}

/* Fallback for short screens so sections don't produce large gaps */
@media (max-height: 700px) {
  .section-hero, .bg-gradient-hero { min-height: 60vh; }
}
/* Mobile (restore normal flow): disable full-viewport sections and scroll-snap for small screens */
@media (max-width: 767.98px) {
  .section-hero, .bg-gradient-hero {
    min-height: auto !important;
    display: block !important;
    align-items: stretch !important;
    overflow: visible !important;
    padding-top: var(--space-4) !important;
    padding-bottom: var(--space-4) !important;
  }

  /* Revert scroll snap behavior on mobile to standard flow */
  html, body { scroll-snap-type: none; }
  section { scroll-snap-align: none; }
}

.bg-gradient-hero {
  background: color-mix(in srgb, var(--color-primary) 6%, #ffffff);
  color: var(--color-text);
  /* Make hero fill the viewport (minus header) so only one section is visible on load */
  min-height: calc(100vh - var(--site-header-h));
  display: flex;
  align-items: center;
  overflow: hidden;
}

.bg-gradient-hero h1,
.bg-gradient-hero p,
.bg-gradient-hero a,
.bg-gradient-hero .chip {
  font-family: var(--font-body);
}

.bg-gradient-hero .card {
  background: #ffffff;
}

.bg-surface {
  background: var(--color-surface);
}


.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.06);
  background: #ffffff;
  padding: 6px;
}

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

.btn-icon-google {
  background: #fff;
  border-color: #e5e7eb;
}

.btn-icon-facebook {
  background: #e8f1ff;
  border-color: #d6e5ff;
}


.chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.icon-chip {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(11, 95, 196, 0.08);
  border: 1px solid rgba(11, 95, 196, 0.15);
  color: var(--color-primary);
}

.icon-chip i {
  font-size: 20px;
  line-height: 1;
}

.icon-chip svg {
  width: 22px;
  height: 22px;
}

.chip {
  background: rgba(11, 95, 196, 0.08);
  border: 1px solid rgba(11, 95, 196, 0.15);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 0.85rem;
  color: var(--color-text);
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}


.chip-primary {
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  border-color: color-mix(in srgb, var(--color-primary) 18%, transparent);
  color: var(--color-primary);
}

.chip-success {
  background: color-mix(in srgb, var(--color-success) 10%, transparent);
  border-color: color-mix(in srgb, var(--color-success) 18%, transparent);
  color: var(--color-success);
}

.chip-accent {
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
  border-color: color-mix(in srgb, var(--color-accent) 22%, transparent);
  color: var(--color-accent);
}

.router-card {
  background: rgba(11, 95, 196, 0.08);
  border-radius: var(--radius);
  padding: var(--space-3);
  border: 1px dashed rgba(11, 95, 196, 0.3);
}

.router-dot {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  margin: 0 auto var(--space-2);
}

.icon-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

.icon-circle i {
  font-size: 18px;
  line-height: 1;
}

.bg-primary-soft {
  background: rgba(11, 95, 196, 0.12);
}

.bg-accent-soft {
  background: rgba(245, 158, 11, 0.12);
}

.bg-success-soft {
  background: rgba(34, 197, 94, 0.12);
}

.text-accent {
  color: var(--color-accent) !important;
}

.text-success {
  color: var(--color-success) !important;
}

.link-underline {
  text-decoration: none;
  position: relative;
}

.link-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 2px;
  background: currentColor;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.link-underline:hover::after {
  opacity: 1;
}

.locale-select {
  min-width: 120px;
}

@media (min-width: 992px) {
  .py-lg-6 {
    padding-top: var(--space-8) !important;
    padding-bottom: var(--space-8) !important;
  }
}