/* base.css - Comprehensive styling for Loheden AI Solutions */

/* Font Definitions

   Self-hosted, never loaded from a third-party server: a request to
   fonts.googleapis.com hands every visitor's IP address to Google before they
   have consented to anything, which is the GDPR problem this avoids.

   Both families are SIL Open Font License 1.1, free for commercial use and
   embedding, served as the authors' own unmodified release files with each
   family's OFL.txt beside them in static/fonts/. Do not subset, rename or
   re-encode these files - the OFL's Reserved Font Name clause covers that. */

@font-face {
  font-family: 'Inter';
  src: url("/static/fonts/inter/Inter-Regular.3875f8357497.woff2") format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url("/static/fonts/inter/Inter-Medium.7b7f3cfa2944.woff2") format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url("/static/fonts/inter/Inter-SemiBold.b72fa2728a8e.woff2") format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Source Serif 4';
  src: url("/static/fonts/source-serif-4/SourceSerif4-Regular.otf.0db2e485c8c8.woff2") format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Only 400/500/600 of Inter ship, so anything asking for 700 would be
   synthesised into a smeared fake bold. Bootstrap's .fw-bold is the one that
   does; point it at the heaviest weight we actually serve. */
.fw-bold {
  font-weight: 600 !important;
}

/* ...except on the serif headings, where 400 is the only weight we ship. */
h1.fw-bold,
h2.fw-bold,
h3.fw-bold,
h4.fw-bold,
h5.fw-bold,
h6.fw-bold {
  font-weight: 400 !important;
}

/* Root Variables - Modern High-Tech Color Scheme */
:root {
  /* Primary Colors */
  --primary-color: #0B60D4; /* Vibrant tech blue */
  --primary-dark: #0847A1;
  --primary-light: #3E8AE9;
  
  /* Secondary Colors */
  --secondary-color: #6A3DE8; /* AI purple */
  --secondary-dark: #512DB6;
  --secondary-light: #8660F0;
  
  /* Accent Colors */
  --accent-color: #00C6D1; /* Analytics teal */
  --accent-dark: #00A0A9;
  --accent-light: #33E3ED;
  
  /* Neutral Colors */
  --dark: #121B35; /* Near black with a hint of blue */
  --light: #FFFFFF;
  --gray-100: #F8F9FB;
  --gray-200: #E9EDF5;
  --gray-300: #D2D9E8;
  --gray-400: #A7B2CA;
  --gray-500: #707B95;
  --gray-600: #4D5773;
  --gray-700: #363F57;
  --gray-800: #252C3E;
  
  /* Text Colors */
  --text-color-dark: var(--dark);
  --text-color-light: var(--light);
  --text-color-muted: var(--gray-500);
  
  /* Status Colors */
  --success: #15BD66;
  --warning: #FFB800;
  --error: #FF4950;
  --info: var(--accent-color);
  
  /* Spacing */
  --spacing-xs: 0.25rem;  /* 4px */
  --spacing-sm: 0.5rem;   /* 8px */
  --spacing-md: 1rem;     /* 16px */
  --spacing-lg: 1.5rem;   /* 24px */
  --spacing-xl: 2rem;     /* 32px */
  --spacing-2xl: 3rem;    /* 48px */
  --spacing-3xl: 4rem;    /* 64px */
  
  /* Border Radius */
  --radius-sm: 0.25rem;   /* 4px */
  --radius-md: 0.5rem;    /* 8px */
  --radius-lg: 1rem;      /* 16px */
  --radius-pill: 9999px;
  
  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(18, 27, 53, 0.05);
  --shadow-md: 0 4px 6px rgba(18, 27, 53, 0.1);
  --shadow-lg: 0 10px 15px rgba(18, 27, 53, 0.1);
  --shadow-xl: 0 20px 25px rgba(18, 27, 53, 0.1);
  
  /* Layout */
  --container-padding: 1rem;
  --container-max-width: 1200px;
  --header-height: 70px;
  --footer-height: auto;
  
  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-normal: 300ms ease;
  --transition-slow: 500ms ease;
  
  /* Z-index layers */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal: 400;
  --z-tooltip: 500;
}

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

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

body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--text-color-dark);
  line-height: 1.6;
  background-color: var(--gray-100);
  overflow-x: hidden;
}

img, svg {
  max-width: 100%;
  height: auto;
}

/* Images render as <picture> so AVIF and WebP can be offered ahead of the
   master file. The wrapper must not become a box of its own, or the sizing set
   on the <img> would resolve against it instead of the real container. */
picture {
  display: contents;
}

a {
  color: var(--primary-color);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--primary-dark);
  text-decoration: underline;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  margin-bottom: var(--spacing-md);
  line-height: 1.2;
  font-weight: 700;
  color: var(--dark);
}

h1 {
  font-size: 2.5rem;
  letter-spacing: -0.03em;
}

h2 {
  font-size: 2rem;
  letter-spacing: -0.02em;
}

h3 {
  font-size: 1.5rem;
}

h4 {
  font-size: 1.25rem;
}

h5 {
  font-size: 1.125rem;
}

h6 {
  font-size: 1rem;
}

p, ul, ol {
  margin-bottom: var(--spacing-md);
}

small {
  font-size: 0.875rem;
}

.text-lead {
  font-size: 1.25rem;
  font-weight: 400;
}

.text-light {
  color: var(--text-color-light);
}

.text-dark {
  color: var(--text-color-dark);
}

.text-muted {
  color: var(--text-color-muted);
}

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

.text-secondary {
  color: var(--secondary-color);
}

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

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.text-left {
  text-align: left;
}

/* Layout */
.container {
  width: 100%;
  max-width: var(--container-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -1rem;
  margin-right: -1rem;
}

.col {
  flex: 1;
  padding: 0 1rem;
}

.col-1 { flex: 0 0 8.333%; max-width: 8.333%; }
.col-2 { flex: 0 0 16.667%; max-width: 16.667%; }
.col-3 { flex: 0 0 25%; max-width: 25%; }
.col-4 { flex: 0 0 33.333%; max-width: 33.333%; }
.col-5 { flex: 0 0 41.667%; max-width: 41.667%; }
.col-6 { flex: 0 0 50%; max-width: 50%; }
.col-7 { flex: 0 0 58.333%; max-width: 58.333%; }
.col-8 { flex: 0 0 66.667%; max-width: 66.667%; }
.col-9 { flex: 0 0 75%; max-width: 75%; }
.col-10 { flex: 0 0 83.333%; max-width: 83.333%; }
.col-11 { flex: 0 0 91.667%; max-width: 91.667%; }
.col-12 { flex: 0 0 100%; max-width: 100%; }

.section {
  padding: var(--spacing-2xl) 0;
}

.section-sm {
  padding: var(--spacing-xl) 0;
}

.section-lg {
  padding: var(--spacing-3xl) 0;
}

.flex {
  display: flex;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-column {
  flex-direction: column;
}

.items-center {
  align-items: center;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}

.gap-sm {
  gap: var(--spacing-sm);
}

.gap-md {
  gap: var(--spacing-md);
}

.gap-lg {
  gap: var(--spacing-lg);
}

/* Header & Navigation */
.header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background-color: var(--light);
  box-shadow: var(--shadow-sm);
  height: var(--header-height);
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}

.logo {
  display: flex;
  align-items: center;
  font-weight: 700;
  font-size: 1.5rem;
}

.logo img {
  max-height: 40px;
  margin-right: var(--spacing-sm);
}

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

.nav-list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-item {
  margin-left: var(--spacing-md);
}

.nav-link {
  padding: var(--spacing-sm) var(--spacing-md);
  font-weight: 500;
  transition: color var(--transition-fast);
}

.nav-link.active {
  color: var(--primary-color);
  font-weight: 700;
}

.mobile-menu-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--text-color-dark);
  font-size: 1.5rem;
  cursor: pointer;
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-normal);
  border: 0;
}

.btn:hover {
  text-decoration: none;
}

.btn-primary {
  background-color: var(--primary-color);
  color: var(--light);
}

.btn-primary:hover {
  background-color: var(--primary-dark);
  color: var(--light);
}

.btn-secondary {
  background-color: var(--secondary-color);
  color: var(--light);
}

.btn-secondary:hover {
  background-color: var(--secondary-dark);
  color: var(--light);
}

.btn-accent {
  background-color: var(--accent-color);
  color: var(--dark);
}

.btn-accent:hover {
  background-color: var(--accent-dark);
  color: var(--dark);
}

.btn-outline {
  background-color: transparent;
  border: 2px solid currentColor;
}

.btn-outline-primary {
  color: var(--primary-color);
}

.btn-outline-primary:hover {
  background-color: var(--primary-color);
  color: var(--light);
}

.btn-lg {
  padding: 1rem 2rem;
  font-size: 1.125rem;
}

.btn-sm {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
}

/* Hero Section */
.hero {
  background: linear-gradient(135deg, var(--primary-dark) 0%, var(--secondary-color) 100%);
  color: var(--text-color-light);
  position: relative;
  overflow: hidden;
}

.hero-content {
  padding: var(--spacing-3xl) 0;
  position: relative;
  z-index: 2;
}

.hero-title {
  font-size: 3rem;
  margin-bottom: var(--spacing-lg);
  line-height: 1.1;
  color: var(--light);
}

.hero-text {
  font-size: 1.25rem;
  margin-bottom: var(--spacing-xl);
  max-width: 700px;
}

.hero-actions {
  display: flex;
  gap: var(--spacing-md);
}

.hero-image {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  max-height: 100%;
  z-index: 1;
  opacity: 0.7;
}

/* Cards */
.card {
  background-color: var(--light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
  height: 100%;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.card-header {
  padding: var(--spacing-md);
  border-bottom: 1px solid var(--gray-200);
}

.card-body {
  padding: var(--spacing-md);
}

.card-footer {
  padding: var(--spacing-md);
  border-top: 1px solid var(--gray-200);
  background-color: var(--gray-100);
}

.card-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

/* Feature Section */
.features {
  background-color: var(--light);
  padding: var(--spacing-2xl) 0;
}

.feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-md);
  background-color: var(--primary-light);
  color: var(--light);
}

/* Forms */
.form-group {
  margin-bottom: var(--spacing-md);
}

.form-label {
  display: block;
  margin-bottom: var(--spacing-xs);
  font-weight: 500;
}

.form-control {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--gray-300);
  background-color: var(--light);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-control:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(11, 96, 212, 0.2);
}

.form-control::placeholder {
  color: var(--gray-400);
}

.form-text {
  display: block;
  margin-top: var(--spacing-xs);
  font-size: 0.875rem;
  color: var(--text-color-muted);
}

/* Testimonials */
.testimonial {
  background-color: var(--light);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
  box-shadow: var(--shadow-md);
  position: relative;
}

.testimonial-content {
  font-style: italic;
  margin-bottom: var(--spacing-md);
}

.testimonial-author {
  display: flex;
  align-items: center;
}

.testimonial-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: var(--spacing-sm);
}

/* Footer */
.footer {
  background-color: var(--dark);
  background: linear-gradient(180deg, var(--dark) 0%, var(--primary-dark) 100%);
  color: var(--text-color-light);
  padding: var(--spacing-2xl) 0 var(--spacing-lg);
}

.footer-logo {
  margin-bottom: var(--spacing-lg);
  display: flex;
  align-items: center;
}

.footer-logo img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-right: 1rem;
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.3));
}

.footer-heading {
  font-size: 1.125rem;
  margin-bottom: var(--spacing-md);
  color: var(--light);
  font-weight: 600;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-link {
  margin-bottom: var(--spacing-sm);
}

.footer-link a {
  color: var(--gray-400);
  transition: color var(--transition-fast);
  text-decoration: none;
}

.footer-link a:hover {
  color: var(--accent-light);
  text-decoration: none;
}

.footer-social {
  display: flex;
  gap: var(--spacing-md);
  margin-top: var(--spacing-md);
}

.footer-social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--light);
  transition: all var(--transition-fast);
}

.footer-social-icon:hover {
  background-color: var(--accent-color);
  color: var(--dark);
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 198, 209, 0.3);
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: var(--spacing-md);
  margin-top: var(--spacing-2xl);
  text-align: center;
  color: var(--gray-400);
  font-size: 0.875rem;
}

.footer-bottom a {
  color: var(--gray-300);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.footer-bottom a:hover {
  color: var(--accent-light);
  text-decoration: none;
}

/* Utilities */
.bg-primary { background-color: var(--primary-color); }
.bg-secondary { background-color: var(--secondary-color); }
.bg-accent { background-color: var(--accent-color); }
.bg-dark { background-color: var(--dark); }
.bg-light { background-color: var(--light); }
.bg-gray { background-color: var(--gray-200); }

.py-xs { padding-top: var(--spacing-xs); padding-bottom: var(--spacing-xs); }
.py-sm { padding-top: var(--spacing-sm); padding-bottom: var(--spacing-sm); }
.py-md { padding-top: var(--spacing-md); padding-bottom: var(--spacing-md); }
.py-lg { padding-top: var(--spacing-lg); padding-bottom: var(--spacing-lg); }
.py-xl { padding-top: var(--spacing-xl); padding-bottom: var(--spacing-xl); }

.px-xs { padding-left: var(--spacing-xs); padding-right: var(--spacing-xs); }
.px-sm { padding-left: var(--spacing-sm); padding-right: var(--spacing-sm); }
.px-md { padding-left: var(--spacing-md); padding-right: var(--spacing-md); }
.px-lg { padding-left: var(--spacing-lg); padding-right: var(--spacing-lg); }
.px-xl { padding-left: var(--spacing-xl); padding-right: var(--spacing-xl); }

.my-xs { margin-top: var(--spacing-xs); margin-bottom: var(--spacing-xs); }
.my-sm { margin-top: var(--spacing-sm); margin-bottom: var(--spacing-sm); }
.my-md { margin-top: var(--spacing-md); margin-bottom: var(--spacing-md); }
.my-lg { margin-top: var(--spacing-lg); margin-bottom: var(--spacing-lg); }
.my-xl { margin-top: var(--spacing-xl); margin-bottom: var(--spacing-xl); }

.mx-xs { margin-left: var(--spacing-xs); margin-right: var(--spacing-xs); }
.mx-sm { margin-left: var(--spacing-sm); margin-right: var(--spacing-sm); }
.mx-md { margin-left: var(--spacing-md); margin-right: var(--spacing-md); }
.mx-lg { margin-left: var(--spacing-lg); margin-right: var(--spacing-lg); }
.mx-xl { margin-left: var(--spacing-xl); margin-right: var(--spacing-xl); }

/* Add enhanced gradient backgrounds */
.bg-gradient {
  background: linear-gradient(135deg, #1a237e 0%, #283593 10%, #3949ab 25%, #512DA8 50%, #673AB7 75%, #7E57C2 100%);
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.2);
}

/* Add animated background utility class */
.bg-gradient-animated {
  background: linear-gradient(270deg, var(--primary-color), var(--secondary-color), var(--accent-color));
  background-size: 600% 600%;
  animation: gradient-animation 15s ease infinite;
  position: relative;
  overflow: hidden;
}

@keyframes gradient-animation {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@media (max-width: 768px) {
  .mobile-menu-toggle {
    display: block;
  }
  .nav-list {
    display: none;
    position: absolute;
    top: var(--header-height);
    left: 0;
    width: 100%;
    flex-direction: column;
    background-color: var(--light);
    box-shadow: var(--shadow-md);
  }
  .nav-list.active {
    display: flex;
  }
  .nav-item {
    margin: 0;
  }
  .nav-link {
    padding: var(--spacing-md);
    display: block;
    border-bottom: 1px solid var(--gray-200);
  }
}

/* Animation Utilities */
.fade-in { animation: fadeIn 0.5s ease-in; }
.slide-up { animation: slideUp 0.5s ease-out; }
.pulse { animation: pulse 2s infinite; }

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}


/* Code blocks */
pre, code {
  font-family: monospace;
  background-color: var(--gray-800);
  color: var(--gray-100);
  border-radius: var(--radius-sm);
}

code {
  padding: 0.2em 0.4em;
  font-size: 0.875em;
}

pre {
  padding: var(--spacing-md);
  overflow-x: auto;
  margin-bottom: var(--spacing-md);
}

pre code {
  background-color: transparent;
  padding: 0;
}

/* Sitewide rollout overrides: unified design system */
:root {
  --primary-color: #0f4c47;
  --primary-dark: #0b3b37;
  --primary-light: #2d726d;

  --secondary-color: #9e643b;
  --secondary-dark: #7f4f2f;
  --secondary-light: #c28758;

  --accent-color: #c27941;
  --accent-dark: #a76231;
  --accent-light: #dfaa7f;

  --dark: #141311;
  --light: #fffdf9;
  --gray-100: #f6f2ea;
  --gray-200: #ede4d8;
  --gray-300: #dccbb8;
  --gray-400: #b49f89;
  --gray-500: #7e6d5d;
  --gray-600: #5d5044;
  --gray-700: #403830;
  --gray-800: #28231f;

  --text-color-dark: #1f1a15;
  --text-color-light: #fffdf9;
  --text-color-muted: #6d5f53;

  --shadow-sm: 0 2px 8px rgba(20, 16, 13, 0.07);
  --shadow-md: 0 10px 24px rgba(20, 16, 13, 0.1);
  --shadow-lg: 0 18px 38px rgba(20, 16, 13, 0.13);
  --shadow-xl: 0 26px 52px rgba(20, 16, 13, 0.15);

  --primary-rgb: 15, 76, 71;
  --secondary-rgb: 158, 100, 59;
  --accent-rgb: 194, 121, 65;
}

body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: radial-gradient(circle at 5% 8%, #f8f1e6 0%, #f4efe8 38%, #f2eeeb 72%, #efece9 100%);
  color: var(--text-color-dark);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
  color: var(--dark);
  /* Source Serif 4 ships at 400 only. Asking for a heavier weight makes the
     browser smear a synthetic bold, so headings state 400 and mean it - at
     display sizes a regular-weight serif is the intended editorial look.
     font-synthesis-weight belt-and-braces for anything that overrides this. */
  font-weight: 400;
  font-synthesis-weight: none;
}

a {
  color: var(--primary-color);
}

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

a:focus-visible,
button:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--accent-color);
  outline-offset: 2px;
}

.btn {
  border-radius: 999px;
  font-weight: 700;
}

.btn-primary {
  background: var(--primary-color);
  border-color: var(--primary-color);
}

.btn-primary:hover,
.btn-primary:focus-visible {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
}

.btn-secondary {
  background: var(--secondary-color);
  border-color: var(--secondary-color);
}

.btn-secondary:hover,
.btn-secondary:focus-visible {
  background: var(--secondary-dark);
  border-color: var(--secondary-dark);
}

.btn-accent {
  background: var(--accent-color);
  color: #fff;
}

.btn-accent:hover,
.btn-accent:focus-visible {
  background: var(--accent-dark);
  color: #fff;
}

.site-navbar {
  background: linear-gradient(180deg, #17120e 0%, #262019 100%);
  border-bottom: 1px solid rgba(255, 237, 214, 0.15);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
}

.site-brand {
  color: #fbf7f1;
  letter-spacing: 0.02em;
  font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
}

.site-brand:hover,
.site-brand:focus-visible {
  color: #fff4e8;
}

/* Navigation ---------------------------------------------------------------
   The desktop bar and the mobile panel share these rules; only the layout
   switches at the lg breakpoint, where Bootstrap stops collapsing the nav. */

.site-navbar__toggle {
  border-color: rgba(255, 237, 214, 0.3);
  padding: 0.5rem 0.7rem;
}

.site-navbar__toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(255, 237, 214, 0.25);
}

.site-nav__link {
  color: #f4ece2;
  font-weight: 500;
  letter-spacing: 0.01em;
  /* "Digital Marketing" and "Digital Products" are two words each; without this
     they break across two lines and the bar grows to fit. */
  white-space: nowrap;
}

.site-nav__link:hover,
.site-nav__link:focus-visible {
  color: #fff;
}

.site-nav__cta {
  display: inline-block;
  white-space: nowrap;
  background: var(--accent-color, #c27941);
  color: #1b1410;
  font-weight: 600;
  text-decoration: none;
  border-radius: 999px;
  padding: 0.55rem 1.25rem;
  transition: filter 0.15s ease;
}

.site-nav__cta:hover,
.site-nav__cta:focus-visible {
  filter: brightness(1.08);
  color: #1b1410;
}

/* Language switcher, shared by both layouts. */
.lang-switch {
  display: flex;
  gap: 0.5rem;
}

.lang-switch__option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid rgba(255, 237, 214, 0.3);
  border-radius: 999px;
  color: #f4ece2;
  text-decoration: none;
  font-weight: 500;
  padding: 0.4rem 0.9rem;
  white-space: nowrap;
}

.lang-switch__option img {
  border-radius: 50%;
}

.lang-switch__option.is-active {
  background: #fbf7f1;
  border-color: #fbf7f1;
  color: #1b1410;
}

.lang-switch__option:hover:not(.is-active),
.lang-switch__option:focus-visible:not(.is-active) {
  border-color: rgba(255, 237, 214, 0.7);
  color: #fff;
}

/* The compact desktop pills show the flag only; the label is for screen
   readers and for the roomier mobile rows. */
@media (min-width: 992px) {
  .lang-switch--compact .lang-switch__option {
    padding: 0.35rem 0.6rem;
  }

  .lang-switch--compact .lang-switch__option span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .site-nav__link {
    padding-left: 0.85rem;
    padding-right: 0.85rem;
  }

  .site-nav__cta-item,
  .site-nav__lang-item {
    margin-left: 0.75rem;
  }

  /* Keep the brand and the nav from colliding on a narrow laptop. */
  .site-navbar .navbar-brand {
    margin-right: 1.5rem;
  }
}

/* Phone and tablet: every row is full width and comfortable to tap, rather
   than a cramped copy of the desktop bar. */
@media (max-width: 991.98px) {
  #site-nav {
    padding: 0.5rem 0 1rem;
  }

  #site-nav .nav-item {
    border-top: 1px solid rgba(255, 237, 214, 0.12);
  }

  .site-nav__link {
    padding: 0.9rem 0.25rem;
    font-size: 1.05rem;
    white-space: normal;
  }

  .site-nav__cta-item {
    padding: 1rem 0.25rem 0.5rem;
  }

  .site-nav__cta {
    display: block;
    text-align: center;
    padding: 0.85rem 1.25rem;
  }

  .site-nav__lang-item {
    padding: 0.75rem 0.25rem 0;
  }

  .lang-switch--compact {
    flex-direction: column;
  }

  .lang-switch--compact .lang-switch__option {
    justify-content: center;
    padding: 0.75rem 1rem;
  }
}

.footer {
  background: linear-gradient(180deg, #17120e 0%, #2d241b 100%);
  color: #f9f4ee;
  border-top: 1px solid rgba(255, 236, 214, 0.12);
}

.footer-link a,
.footer-bottom,
.footer-bottom a {
  color: #e0d2c2;
}

.footer-link a:hover,
.footer-bottom a:hover {
  color: #f7c9a0;
}

.footer-social-icon {
  background-color: rgba(255, 219, 182, 0.14);
}

.footer-social-icon:hover {
  background-color: var(--accent-color);
  color: #fff;
  box-shadow: 0 8px 18px rgba(194, 121, 65, 0.35);
}

.custom-btn {
  min-width: 170px;
}

.error-state {
  max-width: 780px;
  margin-bottom: 4rem;
  background: var(--light);
  border: 1px solid rgba(15, 76, 71, 0.12);
  box-shadow: var(--shadow-md);
  border-radius: var(--radius-lg);
  padding: 2rem;
}

.error-state .lead {
  color: var(--text-color-muted);
}

/* Shared overflow safety for content containers. */
:where(.card, .error-state, .privacy-content, .terms-content) {
  min-width: 0;
}

:where(.card, .error-state, .privacy-content, .terms-content) :is(h1, h2, h3, h4, h5, h6, p, li, a, span, strong) {
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}
.footer-entity {
  color: rgba(249, 244, 238, 0.6);
  font-size: 0.875rem;
  margin-bottom: 1rem;
}

.footer-lang-note {
  opacity: 0.65;
  font-size: 0.8em;
}

.footer-contact {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}