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

/* Font Definitions

   Schibsted Grotesk, one family for everything (the owner's typography rule,
   2026-10-07). 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.

   SIL Open Font License 1.1, free for commercial use and embedding, served as
   the authors' own unmodified WOFF2 files from release 1.100 with OFL.txt
   beside them in static/fonts/schibsted-grotesk/. Do not subset or re-encode
   them. Only Regular, Medium and SemiBold ship. */

@font-face {
  font-family: 'Schibsted Grotesk';
  src: url("/static/fonts/schibsted-grotesk/SchibstedGrotesk-Regular.12804c89cc48.woff2") format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Schibsted Grotesk';
  src: url("/static/fonts/schibsted-grotesk/SchibstedGrotesk-Medium.d8ff08ec1c17.woff2") format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Schibsted Grotesk';
  src: url("/static/fonts/schibsted-grotesk/SchibstedGrotesk-SemiBold.fcd8cd302dad.woff2") format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Only 400/500/600 ship, so anything asking for 700 would be synthesised into
   a smeared fake bold. Bootstrap's .fw-bold and the browser's bold for <b> and
   <strong> are pointed at the heaviest weight we actually serve, and so are the
   display headings, which Bootstrap sets light. */
.fw-bold {
  font-weight: 600 !important;
}

b,
strong,
.display-1,
.display-2,
.display-3,
.display-4,
.display-5,
.display-6 {
  font-weight: 600;
}

/* 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: "Schibsted Grotesk", -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: 600;
  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: 600;
  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: 600;
}

.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: "Schibsted Grotesk", -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 {
  color: var(--dark);
  /* Titles in Schibsted Grotesk SemiBold, set slightly tight. Nothing heavier
     ships, so font-synthesis-weight stops the browser faking one. */
  font-weight: 600;
  letter-spacing: -0.015em;
  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: 600;
}

.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;
}

.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;
}