/* ==========================================================================
   PAUSALITY CMS - BRAND-ALIGNED COMPONENT STYLES
   Updated with official brand guidelines
   ========================================================================== */

/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Michroma&family=Rock+Salt&display=swap');

/* CSS Custom Properties / Design Tokens
   ========================================================================== */
:root {
  /* Primary Brand Colors */
  --color-deep-navy: #22253A;         /* Primary background - dark, grounding */
  --color-soft-sage: #5FC89B;         /* Primary accent - human, warm */
  --color-soft-sage-light: #96F0BE;   /* Light accent variant */
  
  /* Gradient Colors (45° from bottom-left to top-right) */
  --color-clearwater-blue: #3A61AD;   /* Gradient start - engagement */
  --color-ocean-blue: #1479B6;        /* Gradient mid */
  --color-gradient-sage: #5FC89B;     /* Gradient end - calm */
  --color-gradient-light: #96F0BE;    /* Gradient highlight */
  
  /* Brand Gradient */
  --gradient-brand: linear-gradient(45deg, #3A61AD 0%, #1479B6 33%, #5FC89B 66%, #96F0BE 100%);
  --gradient-logo: linear-gradient(45deg, #3A61AD 0%, #5FC89B 100%);
  
  /* Neutral Colors */
  --color-white: #FFFFFF;
  --color-black: #000000;
  --color-gray-100: #F7F8FA;
  --color-gray-200: #E8E9ED;
  --color-gray-300: #D1D3DA;
  --color-gray-400: #9A9DAB;
  --color-gray-500: #6B6F7E;
  --color-gray-600: #4A4D5C;
  
  /* Semantic Colors */
  --color-text-dark: #22253A;
  --color-text-light: #FFFFFF;
  --color-text-muted: #6B6F7E;
  --color-accent: #5FC89B;
  --color-accent-hover: #4BB889;
  
  /* Typography - Poppins */
  --font-primary: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
  
  /* Font Weights */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  
  /* Font Sizes */
  --text-xs: 0.75rem;      /* 12px */
  --text-sm: 0.875rem;     /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg: 1.125rem;     /* 18px */
  --text-xl: 1.25rem;      /* 20px */
  --text-2xl: 1.5rem;      /* 24px */
  --text-3xl: 2rem;        /* 32px */
  --text-4xl: 2.5rem;      /* 40px */
  --text-5xl: 3rem;        /* 48px */
  --text-6xl: 3.75rem;     /* 60px */
  --text-7xl: 4.5rem;      /* 72px */
  
  /* Line Heights */
  --leading-tight: 1.1;
  --leading-snug: 1.25;    /* Brand spec for body copy */
  --leading-normal: 1.5;
  --leading-relaxed: 1.75;
  
  /* Letter Spacing */
  --tracking-tight: -0.025em;  /* Brand spec for body copy */
  --tracking-normal: 0;
  --tracking-wide: 0.05em;
  
  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;
  
  /* Container */
  --container-max: 1280px;
  --container-padding: 1.5rem;
  
  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(34, 37, 58, 0.05);
  --shadow-md: 0 4px 6px rgba(34, 37, 58, 0.07);
  --shadow-lg: 0 10px 15px rgba(34, 37, 58, 0.1);
  --shadow-xl: 0 20px 25px rgba(34, 37, 58, 0.1);
  
  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;
}

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-light);
  font-size: var(--text-base);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-dark);
  background-color: var(--color-white);
}

/* Custom cursor - pure CSS using cursor property */
/* Dot cursor (default) */
body.cursor-dot,
body.cursor-dot * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Ccircle cx='7' cy='7' r='6' fill='%235FC89B'/%3E%3C/svg%3E") 7 7, auto !important;
}
body.cursor-dot a, body.cursor-dot button, body.cursor-dot [role="button"],
body.cursor-dot .btn, body.cursor-dot .clickable, body.cursor-dot input[type="submit"] {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='12' cy='12' r='10' fill='%235FC89B' opacity='0.7'/%3E%3C/svg%3E") 12 12, pointer !important;
}

/* Cross cursor */
body.cursor-cross,
body.cursor-cross * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M8 3v10M3 8h10' stroke='%235FC89B' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") 8 8, auto !important;
}
body.cursor-cross a, body.cursor-cross button, body.cursor-cross [role="button"],
body.cursor-cross .btn, body.cursor-cross .clickable, body.cursor-cross input[type="submit"] {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M12 4v16M4 12h16' stroke='%235FC89B' stroke-width='2.5' stroke-linecap='round' opacity='0.7'/%3E%3C/svg%3E") 12 12, pointer !important;
}

/* Star of Life cursor */
body.cursor-star,
body.cursor-star * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='%235FC89B'%3E%3Cpath d='M10 2h4v6.27l5.43-3.14 2 3.46L16 11.73l5.43 3.14-2 3.46L14 15.19V21h-4v-5.81l-5.43 3.14-2-3.46L8 11.73 2.57 8.59l2-3.46L10 8.27V2z'/%3E%3C/svg%3E") 8 8, auto !important;
}
body.cursor-star a, body.cursor-star button, body.cursor-star [role="button"],
body.cursor-star .btn, body.cursor-star .clickable, body.cursor-star input[type="submit"] {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%235FC89B' opacity='0.7'%3E%3Cpath d='M10 2h4v6.27l5.43-3.14 2 3.46L16 11.73l5.43 3.14-2 3.46L14 15.19V21h-4v-5.81l-5.43 3.14-2-3.46L8 11.73 2.57 8.59l2-3.46L10 8.27V2z'/%3E%3C/svg%3E") 12 12, pointer !important;
}

/* Touch devices - normal cursor */
@media (hover: none) and (pointer: coarse) {
  body.cursor-dot, body.cursor-dot *,
  body.cursor-cross, body.cursor-cross *,
  body.cursor-star, body.cursor-star * {
    cursor: auto !important;
  }
}

/* Cursor options - simple inline buttons */
.cursor-options {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.cursor-options__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.cursor-options__btn svg {
  width: 16px;
  height: 16px;
  color: var(--color-soft-sage);
}

.cursor-options__btn:hover svg {
  color: #fff;
}

.cursor-options__btn.active {
  background: rgba(255, 255, 255, 0.15);
}

.cursor-options__btn.active svg {
  color: #fff;
}

/* Light theme (default) */
body.theme-light {
  --bg-primary: var(--color-white);
  --bg-secondary: var(--color-gray-100);
  --text-primary: var(--color-text-dark);
  --text-secondary: var(--color-gray-500);
}

/* Dark theme */
body.theme-dark {
  --bg-primary: var(--color-deep-navy);
  --bg-secondary: #1a1c2e;
  --text-primary: var(--color-white);
  --text-secondary: var(--color-gray-400);
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Placeholder background for all images */
img {
  background-color: rgba(95, 200, 155, 0.3);
  background-image: url('images/glyph-pattern-bg.svg');
  background-size: cover;
  background-position: center;
}

img[src*="logo"],
img[src*="Logo"],
img[src*="wordmark"],
img[src*="Wordmark"],
img[src*="badge"],
img[src*="Badge"],
img[src*="App_Store"],
img[src*="app-store"],
.app-store-badge img,
.feature__image--has-image img {
  background-color: transparent;
  background-image: none;
  width: auto;
  height: auto;
}

/* Reset width/height for feature images */
.feature__image--has-image img {
  width: 100%;
  height: 100%;
}

/* Avatar images - override default img background and logo transparency */
.article-meta__avatar,
.author-bio__avatar {
  background-image: none !important;
  background-color: #E8EAED !important;
}

.article-meta__avatar--photo,
.article-meta__avatar--initials,
.author-bio__avatar--photo,
.author-bio__avatar--initials {
  background-color: transparent !important;
}

/* Feature/section image containers - placeholder shown when no image */
.feature__image {
  background-color: rgba(95, 200, 155, 0.3);
  background-image: url('images/glyph-pattern-bg.svg');
  background-size: cover;
  background-position: center;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-xl);
  overflow: hidden;
}

/* When an actual image URL is present, hide placeholder background */
.feature__image--has-image {
  background: none;
  background-color: transparent;
  background-image: none;
}

.feature__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* SVG images - no background, contain fit */
.feature__image--svg {
  background: none !important;
  background-image: none !important;
  background-color: transparent !important;
}

.feature__image--svg img {
  object-fit: contain;
  padding: var(--space-4);
}

/* Icon-sized images (SVG, PNG) - smaller, square aspect ratio */
.feature__image--icon {
  max-width: 200px;
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
}

.feature__image--icon img {
  object-fit: contain;
  padding: var(--space-2);
}

.hero__image {
  background-color: transparent;
  border-radius: 30px;
  overflow: hidden;
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.4);
  border: 3px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.hero__image:empty {
  display: none;
  border: none;
  box-shadow: none;
}

.hero__image img {
  width: 290px;
  height: 580px;
  display: block;
  object-fit: cover;
  object-position: top center;
  background-color: transparent;
  background-image: none;
}

.hero__image:hover {
  border-color: #1479B6;
  box-shadow: 0 20px 60px rgba(20, 121, 182, 0.4);
}

/* Ensure hero CTA images (App Store badge) are not affected */
.hero__actions img {
  width: auto;
  height: auto;
  background-color: transparent;
}

/* Card images */
.card__image {
  background-color: rgba(95, 200, 155, 0.3);
  background-image: url('images/glyph-pattern-bg.svg');
  background-size: cover;
  background-position: center;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  width: 100%;
  height: auto;
}

/* Team card placeholder */
.team-card__image {
  background-color: rgba(95, 200, 155, 0.3);
  background-image: url('images/glyph-pattern-bg.svg');
  background-size: cover;
  background-position: center;
  width: 160px;
  height: 160px;
}

/* Story card avatar placeholder */
.story-card__avatar {
  background-color: rgba(95, 200, 155, 0.3);
}

/* Partner logo placeholder */
.partner-logo {
  background-color: var(--color-gray-100);
}

.partner-logo img {
  object-fit: contain;
  background-color: transparent;
  background-image: none;
}

/* Inline avatar placeholders */
.card__meta img {
  background-color: rgba(95, 200, 155, 0.3);
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

/* Typography
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-normal);  /* Poppins Normal for headers */
  line-height: var(--leading-tight);
}

/* Body copy uses Poppins Light with tight letter-spacing */
p, li, td, th {
  font-weight: var(--font-weight-light);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
}

.headline-hero {
  font-size: clamp(2.5rem, 6vw, var(--text-7xl));
  font-weight: var(--font-weight-light);
  letter-spacing: -0.02em;
  line-height: var(--leading-tight);
}

/* Prevent headline break at awkward width ranges */
/* Desktop - cap the max size so it doesn't break on wide screens */
@media (min-width: 1175px) {
  .headline-hero {
    font-size: 4rem; /* Fixed size that fits on one line */
  }
}

/* Mid-range desktop - scale down slightly */
@media (min-width: 1025px) and (max-width: 1174px) {
  .headline-hero {
    font-size: clamp(2.5rem, 5vw, 3.75rem);
  }
}

/* Mobile - size for elegant 2-line break */
@media (max-width: 767px) {
  .headline-hero {
    font-size: clamp(2.25rem, 9vw, 3rem);
  }
}

.headline-xlarge {
  font-size: clamp(2.5rem, 5vw, 4.2rem);
  font-weight: var(--font-weight-normal);
  letter-spacing: -0.01em;
  line-height: 1.15;
}

.headline-large {
  font-size: clamp(2rem, 4vw, var(--text-5xl));
  font-weight: var(--font-weight-normal);
  letter-spacing: -0.01em;
}

.headline-medium {
  font-size: clamp(1.5rem, 3vw, var(--text-3xl));
  font-weight: var(--font-weight-normal);
}

.headline-small {
  font-size: var(--text-xl);
  font-weight: var(--font-weight-normal);
}

.body-xlarge {
  font-size: 1.55rem;
  font-weight: var(--font-weight-light);
  line-height: 1.4;
  letter-spacing: var(--tracking-tight);
}

.body-large {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-light);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}

.body-base {
  font-size: var(--text-base);
  font-weight: var(--font-weight-light);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}

.body-small {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-light);
  line-height: var(--leading-snug);
}

.label {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Gradient text effect */
.text-gradient {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

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

.section {
  padding-top: var(--space-20);
  padding-bottom: var(--space-20);
}

.section--large {
  padding-top: var(--space-32);
  padding-bottom: var(--space-32);
}

.section--light {
  background-color: var(--color-white);
  color: var(--color-text-dark);
}

.section--gray {
  background-color: var(--color-gray-100);
  color: var(--color-text-dark);
}

.section--dark {
  background-color: var(--color-deep-navy);
  color: var(--color-white);
}

/* Navy - Lightened Navy Blue */
.section--navy {
  background: #2C3E75; /* Actual lightened navy blue */
  color: var(--color-white);
}

/* Blue - Clearwater Blue (#3A61AD) */
.section--blue {
  background: #3A61AD;
  color: var(--color-white);
}

/* Sage - Soft Sage (#5FC89B) */
.section--sage {
  background: #5FC89B;
  color: var(--color-white);
}

/* Sage Light - Light Mint (#96F0BE) */
.section--sagelight {
  background: #96F0BE;
  color: #22253A;
}

/* Gradient - Brand gradient (Clearwater to Ocean Blue) */
.section--gradient {
  background: linear-gradient(135deg, #3A61AD 0%, #1479B6 100%);
  color: var(--color-white);
}

/* Gradient Sage - Sage gradient (Sage to Light Sage) */
.section--gradientsage {
  background: linear-gradient(135deg, #5FC89B 0%, #96F0BE 100%);
  color: var(--color-white);
}


.grid {
  display: grid;
  gap: var(--space-8);
}

.grid--2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid--4 {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 768px) {
  .grid--2, .grid--3, .grid--4 {
    grid-template-columns: 1fr;
  }
}

/* Header / Navigation
   ========================================================================== */
.header {
  position: fixed;
  top: 12px;
  left: 12px;
  right: 12px;
  z-index: 100;
  background: rgba(34, 37, 58, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-xl);
  transition: transform 0.3s ease;
}

.header--hidden {
  transform: translateY(calc(-100% - 24px));
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}

.header__logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.header__logo .logo-icon {
  width: 44px;
  height: 44px;
}

.header__logo .logo-wordmark {
  height: 34px;
}

.header__nav {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.header__link {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-normal);
  color: rgba(255, 255, 255, 0.7);
  transition: color var(--transition-fast), font-weight var(--transition-fast);
}

.header__link:hover {
  color: var(--color-soft-sage);
}

.header__link--active {
  color: var(--color-white);
  font-weight: var(--font-weight-semibold);
}

.header__cta {
  margin-left: var(--space-4);
}

/* Mobile Navigation */
.header__menu-btn {
  display: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
}

@media (max-width: 835px) {
  /* Reduce header size on mobile */
  .header__inner {
    height: 60px;
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }
  
  .header__logo .logo-icon {
    width: 36px;
    height: 36px;
  }
  
  .header__logo .logo-wordmark {
    height: 28px;
  }
  
  .header__nav {
    display: none;
  }
  
  .header__menu-btn {
    display: flex;
    width: 36px;
    height: 36px;
  }
  
  .header__menu-btn svg {
    width: 20px;
    height: 20px;
  }
  
  .header__nav--open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-deep-navy);
    padding: var(--space-4) var(--space-6); /* Tighter top/bottom padding */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    gap: var(--space-2); /* Tighter gap between items */
  }
  
  /* Increase mobile dropdown text size by 80% (was 50%, now +20% more) */
  .header__nav--open .header__link {
    font-size: calc(var(--text-sm) * 1.8); /* 80% larger (1.5 * 1.2) */
    padding: var(--space-2) 0; /* Tighter vertical spacing */
  }
  
  .header__nav--open .header__cta {
    font-size: calc(var(--text-sm) * 1.8); /* 80% larger */
    padding: var(--space-3) var(--space-6); /* Tighter button padding */
    margin-top: var(--space-1); /* Less space above CTA */
  }
}

/* Buttons
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-full);  /* Rounded pill buttons per brand */
  transition: all var(--transition-fast);
}

.btn--primary {
  background-color: var(--color-soft-sage);
  color: var(--color-deep-navy);
}

.btn--primary:hover {
  background-color: var(--color-white);
  color: var(--color-deep-navy);
}

.btn--secondary {
  background-color: var(--color-deep-navy);
  color: var(--color-white);
}

.btn--secondary:hover {
  background-color: #2d3150;
}

.btn--dark {
  background-color: var(--color-gray-900, #1a1a1a);
  color: var(--color-white);
}

.btn--dark:hover {
  background-color: var(--color-gray-800, #333);
}

.btn--outline {
  background-color: transparent;
  color: var(--color-deep-navy);
  border: 1px solid var(--color-gray-300);
}

.btn--outline:hover {
  background-color: var(--color-gray-100);
}

.btn--gradient {
  background: var(--gradient-brand);
  color: var(--color-white);
}

.btn--large {
  padding: var(--space-4) var(--space-8);
  font-size: var(--text-base);
}

/* App Store Badge */
.app-store-badge {
  display: inline-block;
  height: 44px;
  transition: transform var(--transition-fast);
}

.app-store-badge:hover {
  transform: scale(1.05);
}

.app-store-badge img {
  height: 100%;
  width: auto;
}

/* Cards
   ========================================================================== */
.card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

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

.card__image {
  aspect-ratio: 16 / 10;
  object-fit: cover;
  width: 100%;
}

.card__content {
  padding: var(--space-6);
}

.card__label {
  display: inline-block;
  margin-bottom: var(--space-2);
  color: var(--color-soft-sage);
}

.card__title {
  margin-bottom: var(--space-3);
}

.card__excerpt {
  color: var(--color-gray-500);
  margin-bottom: var(--space-4);
}

.card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-gray-500);
}

/* Dark card variant */
.card--dark {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.card--dark:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* Team Card */
.team-card {
  text-align: left;
}

.team-card__image {
  width: 100%;
  height: 50vh;
  min-height: 350px;
  max-height: 550px;
  object-fit: cover;
  object-position: top center;
  margin: 0 auto var(--space-6);
  border-radius: var(--radius-lg);
  background-color: rgba(34, 37, 58, 0.3);
}

.team-card__name {
  font-size: var(--text-xl);
  font-weight: var(--font-weight-normal);
  margin-bottom: var(--space-1);
  text-align: left;
}

.team-card__role {
  font-size: var(--text-sm);
  color: var(--color-soft-sage);
  margin-bottom: var(--space-3);
  text-align: left;
}

.team-card__bio {
  color: var(--color-gray-500);
  font-size: var(--text-sm);
  margin-bottom: var(--space-4);
  text-align: left;
}

.team-card__linkedin {
  display: inline-flex;
  align-items: left;
  gap: var(--space-2);
  color: var(--color-soft-sage);
  font-size: var(--text-sm);
  transition: color var(--transition-fast);
}

.team-card__linkedin:hover {
  color: var(--color-accent-hover);
}

/* Hero Sections
   ========================================================================== */
.hero {
  padding-top: calc(96px + var(--space-20));
  padding-bottom: var(--space-20);
}

.hero--large {
  padding-top: calc(96px + var(--space-32));
  padding-bottom: var(--space-32);
  min-height: 80vh;
  display: flex;
  align-items: center;
}

/* Compact hero for secondary/utility pages (FAQ, Contact, Legal, etc.) */
.hero--compact {
  padding-top: calc(96px + var(--space-12));
  padding-bottom: var(--space-12);
  min-height: 340px;
  display: flex;
  align-items: center;
}

.hero--compact .hero__title {
  font-size: var(--text-4xl);
}

.hero--compact .hero__subtitle {
  font-size: var(--text-lg);
  max-width: 600px;
}

@media (max-width: 768px) {
  .hero--compact {
    padding-top: calc(80px + var(--space-8));
    padding-bottom: var(--space-8);
    min-height: 280px;
  }

  .hero--compact .hero__title {
    font-size: var(--text-3xl);
  }

  .hero--compact .hero__subtitle {
    font-size: var(--text-base);
  }
}

.hero--dark {
  background-color: var(--color-deep-navy);
  color: var(--color-white);
}

.hero--bg {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--color-deep-navy);
  color: var(--color-white);
  position: relative;
  max-height: 70vh;
}

.hero--bg::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    180deg,
    rgba(34, 37, 58, 0.45) 0%,
    rgba(34, 37, 58, 0.20) 50%,
    rgba(34, 37, 58, 0.35) 100%
  );
  z-index: 1;
}

/* Mobile: Darker overlay for better text readability */
@media (max-width: 768px) {
  .hero--bg::before {
    background: linear-gradient(
      180deg,
      rgba(34, 37, 58, 0.50) 0%,
      rgba(34, 37, 58, 0.30) 50%,
      rgba(34, 37, 58, 0.40) 100%
    );
  }

  /* No overlay on mobile */
  .hero--bg.hero--no-overlay::before {
    display: none !important;
  }
}

/* No overlay modifier - removes the dark gradient overlay */
.hero--bg.hero--no-overlay::before {
  display: none;
}

/* Animated hero background - subtle float effect */
.hero--bg.hero--animated {
  overflow: hidden;
  background-image: none !important;
}

.hero__animated-layer {
  position: absolute;
  top: -5%;
  left: -5%;
  width: 110%;
  height: 110%;
  background-size: cover;
  background-position: center;
  z-index: 0;
  animation: heroFloat 30s ease-in-out infinite;
}

@keyframes heroFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(1%, -0.5%) scale(1.02); }
  50% { transform: translate(-0.5%, 1%) scale(1); }
  75% { transform: translate(0.5%, 0.5%) scale(1.01); }
}

.hero--bg > .container {
  position: relative;
  z-index: 2;
}

.hero--bg .hero__content {
  max-width: 1100px;
}

.hero--bg .hero__content--with-image {
  max-width: 100%;
}

.hero--bg .hero__label {
  color: var(--color-soft-sage);
}

.hero--bg .hero__subtitle {
  color: rgba(255, 255, 255, 0.8);
}

.hero__content {
  max-width: 1100px;
}

/* Hero with image - flex layout only when image is present */
.hero__content--with-image {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  max-width: 100%;
}

.hero__content--with-image.hero__content--image-left {
  flex-direction: row-reverse;
}

.hero__content--with-image .hero__text {
  flex: 1 1 600px;
  min-width: 300px;
}

.hero__content--with-image .hero__image {
  flex-shrink: 0;
}

.hero__content--with-image .hero__actions {
  /* Desktop: actions are inside hero__text */
}

/* Hero with Image - Tablet */
@media (max-width: 1024px) {
  .hero__content--with-image {
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    text-align: center;
  }
  
  .hero__content--with-image.hero__content--image-left {
    flex-direction: column;
  }
  
  .hero__content--with-image .hero__text {
    flex: none;
    width: 100%;
    padding-top: 0;
    order: 1;
  }
  
  .hero__image {
    margin-left: auto;
    margin-right: auto;
    margin-top: var(--space-4);
    order: 2;
    border-radius: 40px;
    overflow: hidden;
    background: #1a1c2e;
    padding: 8px;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.3));
  }
  
  .hero__image img {
    width: 220px;
    height: 440px;
    max-width: 35vw;
    height: auto;
    border-radius: 32px;
    border: none;
    background: transparent;
    filter: none;
    display: block;
  }
  
  /* Position CTA after phone image */
  .hero__actions {
    order: 3;
    width: 100%;
    justify-content: flex-start; /* Keep left-aligned even when text is centered */
    margin-top: var(--space-4);
    margin-bottom: 0;
  }
  
  /* Remove extra margin from subtitle */
  .hero__subtitle {
    margin-bottom: var(--space-4);
  }
  
  .hero__label {
    margin-bottom: var(--space-3);
  }
}

/* Hero with Image - Mobile (Standard Phones) */
@media (max-width: 768px) {
  .hero__content--with-image {
    gap: var(--space-3);
    display: flex;
    flex-direction: column;
  }
  
  .hero__content--with-image .hero__text {
    padding-top: 0;
    order: 1;
  }
  
  /* Increase vertical spacing between headline and description */
  .hero__title {
    margin-bottom: var(--space-4);
    line-height: 1.15;
  }
  
  /* Improve subtitle readability */
  .hero__subtitle {
    font-size: 0.95rem;
    line-height: 1.55;
    margin-bottom: var(--space-3);
  }
  
  /* Smaller label for mobile */
  .hero__label {
    font-size: 0.7rem;
    margin-bottom: var(--space-2);
  }
  
  /* MOBILE HERO - Fill screen with hint of next section */
  .hero--large {
    min-height: 90vh !important; /* Fill most of screen, leave ~10% for scroll hint */
    padding-top: calc(60px + var(--space-10)) !important; /* Comfortable top spacing */
    padding-bottom: var(--space-10) !important; /* Comfortable bottom */
  }
  
  .hero {
    padding-top: calc(60px + var(--space-8)) !important;
    padding-bottom: var(--space-8) !important;
  }
  
  .hero__image {
    margin-top: var(--space-3);
    order: 2;
    border-radius: 35px;
    overflow: hidden;
    background: #1a1c2e;
    padding: 6px;
    filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.4));
  }
  
  /* Phone mockup with proper cropping */
  .hero__image img {
    width: 170px;
    height: 340px;
    max-width: 65vw;
    height: auto;
    border-radius: 29px;
    border: none;
    background: transparent;
    filter: none;
    display: block;
  }
  
  /* Add subtle fade at bottom of phone */
  .hero__image::after {
    content: '';
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 30px;
    background: linear-gradient(
      to bottom,
      rgba(34, 37, 58, 0),
      rgba(34, 37, 58, 0.1)
    );
    filter: blur(8px);
    pointer-events: none;
  }
  
  .hero__actions {
    margin-top: var(--space-3);
    order: 3;
  }
  
  /* Ensure text section has minimal bottom margin */
  .hero__text {
    margin-bottom: 0;
  }
}

/* Hero with Image - Small Mobile (iPhone SE, etc.) */
@media (max-width: 480px) {
  .hero__content--with-image .hero__text {
    padding-top: 0;
  }
  
  .hero__title {
    margin-bottom: var(--space-3);
  }

  .hero__subtitle {
    font-size: 0.9rem;
    margin-bottom: var(--space-3);
  }

  .hero__image {
    padding: 5px;
    border-radius: 30px;
  }
  
  .hero__image img {
    width: 150px;
    height: 300px;
    max-width: 60vw;
    height: auto;
    border-radius: 25px;
  }
  
  .hero__actions {
    margin-top: var(--space-3);
  }
}

/* Hero with Image - Larger Mobile (iPhone Pro Max, etc.) */
@media (min-width: 481px) and (max-width: 768px) {
  .hero__title {
    /* font-size controlled by .headline-hero */
  }
  
  .hero__subtitle {
    font-size: 1rem;
    margin-bottom: var(--space-3);
  }
  
  .hero__image {
    padding: 6px;
    border-radius: 38px;
  }
  
  .hero__image img {
    width: 180px;
    height: 360px;
    max-width: 65vw;
    height: auto;
    border-radius: 32px;
  }
  
  .hero__actions {
    margin-top: var(--space-3);
  }
}

.hero__label {
  margin-bottom: var(--space-4);
  color: var(--color-soft-sage);
}

.hero__title {
  margin-bottom: var(--space-6);
}

.hero__subtitle {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-400);
  margin-bottom: var(--space-8);
  max-width: 560px;
}

.hero--dark .hero__subtitle {
  color: rgba(255, 255, 255, 0.7);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

/* Stats Section
   ========================================================================== */
/* Stats Section - Side-by-side grid layout like features
   ========================================================================== */
.stats-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
  min-height: 500px;
  padding: var(--space-20) 0;
}

.stats-section--right {
  direction: rtl;
}

.stats-section--right > * {
  direction: ltr;
}

.stats-section__number-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.stats-section__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.stats-section__number {
  font-family: 'Michroma', 'Courier New', monospace; /* Futuristic/technical font */
  font-size: clamp(10rem, 25vw, 20rem); /* MASSIVE: 160px - 320px (increased from 128-256) */
  font-weight: 400;
  line-height: 0.85;
  color: rgba(95, 200, 155, 0.15); /* Faded/transparent sage - subtle background element */
  letter-spacing: -0.05em;
  white-space: nowrap;
  text-align: center;
  display: inline-block;
  font-variant-numeric: tabular-nums; /* Use monospaced number glyphs to prevent shift */
  min-width: 2ch; /* Reserve minimum space for 2 characters - prevents text floating */
}

.stats-section__label {
  font-family: 'Michroma', 'Courier New', monospace;
  font-size: var(--text-sm);
  color: rgba(95, 200, 155, 0.3); /* Faded sage for label too */
  text-transform: uppercase;
  letter-spacing: 0.2em;
  margin-top: var(--space-4);
  font-weight: 400;
  text-align: center;
  display: block;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .stats-section {
    grid-template-columns: 1fr;
    gap: var(--space-12);
    min-height: 400px;
    padding: var(--space-16) 0;
  }
  
  .stats-section--right {
    direction: ltr; /* Reset on mobile */
  }
  
  .stats-section__number {
    font-size: clamp(6rem, 25vw, 10rem);
  }
  
  .stats-section__label {
    font-size: var(--text-xs);
  }
}

/* Old stats styles (kept for backward compatibility) */
.stats {
  display: flex;
  gap: var(--space-16);
  justify-content: center;
  text-align: center;
}

.stat__number {
  font-family: var(--font-primary);
  font-size: clamp(4rem, 12vw, 8rem);
  font-weight: var(--font-weight-light);
  line-height: 1;
  margin-bottom: var(--space-2);
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.stat__label {
  font-size: var(--text-sm);
  color: var(--color-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Feature Sections
   ========================================================================== */
.feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
}

.feature--reverse {
  direction: rtl;
}

.feature--reverse > * {
  direction: ltr;
}

.feature__content {
  max-width: 480px;
}

.feature__label {
  margin-bottom: var(--space-4);
  color: var(--color-soft-sage);
}

.feature__title {
  margin-bottom: var(--space-4);
}

.feature__text {
  color: var(--color-gray-500);
}

.feature__image {
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--color-gray-100);
  aspect-ratio: 4 / 3;
}

/* When an actual image URL is present, hide placeholder background */
.feature__image.feature__image--has-image {
  background: none;
  background-color: transparent;
  background-image: none;
}

/* Icon-sized images in feature sections - override base styles */
.feature__image.feature__image--icon {
  width: 200px;
  min-width: 200px;
  max-width: 200px;
  aspect-ratio: 1 / 1;
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
}

.feature__image.feature__image--icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.feature__image.feature__image--svg {
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* When feature has icon, allow text content to expand */
.feature--with-icon .feature__content {
  max-width: none;
}

/* Feature layout with icon - image takes only needed space */
.feature--with-icon {
  grid-template-columns: auto 1fr;
}

.feature--with-icon.feature--reverse {
  grid-template-columns: 1fr auto;
}

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

  .feature--reverse {
    direction: ltr;
  }

  .feature--with-icon,
  .feature--with-icon.feature--reverse {
    grid-template-columns: 1fr;
  }

  /* Reduce SVG glyph size by 20% on mobile */
  .feature__image.feature__image--icon {
    width: 160px;
    min-width: 160px;
    max-width: 160px;
  }

  .feature__image--svg img,
  .feature__image--icon img {
    max-width: 160px;
  }
}

/* FAQ Accordion
   ========================================================================== */
.faq-list {
  max-width: 720px;
  margin: 0 auto;
}

.faq-item {
  border-bottom: 1px solid var(--color-gray-200);
}

.faq-item__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-6) 0;
  font-size: var(--text-lg);
  font-weight: var(--font-weight-normal);
  text-align: left;
  cursor: pointer;
}

.faq-item__icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--color-soft-sage);
  transition: transform var(--transition-fast);
}

.faq-item--open .faq-item__icon {
  transform: rotate(45deg);
}

.faq-item__answer {
  display: none;
  padding-bottom: var(--space-6);
  color: var(--color-gray-500);
}

.faq-item--open .faq-item__answer {
  display: block;
}

/* Contact Form
   ========================================================================== */
.form {
  max-width: 560px;
}

.form__group {
  margin-bottom: var(--space-6);
}

.form__label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-normal);
}

.form__input,
.form__textarea {
  width: 100%;
  padding: var(--space-4);
  font-family: var(--font-primary);
  font-size: var(--text-base);
  font-weight: var(--font-weight-light);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form__input:focus,
.form__textarea:focus {
  outline: none;
  border-color: var(--color-soft-sage);
  box-shadow: 0 0 0 3px rgba(95, 200, 155, 0.15);
}

.form__textarea {
  min-height: 160px;
  resize: vertical;
}

/* Success Message */
.form-success {
  text-align: center;
  padding: var(--space-16) 0;
}

.form-success__icon {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--space-6);
  background: var(--color-soft-sage);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-deep-navy);
}

/* CTA Section
   ========================================================================== */
.cta-section {
  padding: var(--space-24) 0;
  /* Background comes from section background classes (section--dark, section--navy, etc.) */
  /* Default to dark if no background class is specified */
}

/* Ensure CTA section has a background - default to dark navy */
.cta-section:not([class*="section--"]) {
  background: var(--color-deep-navy);
  color: var(--color-white);
}

/* Text color defaults for dark backgrounds */
.section--dark.cta-section,
.section--navy.cta-section,
.section--blue.cta-section,
.section--gradient.cta-section,
.section--gradientsage.cta-section {
  color: var(--color-white);
}

/* Sage backgrounds NOT ALLOWED on CTA sections (clashes with mint green buttons) */
.section--sage.cta-section,
.section--sagelight.cta-section {
  background: var(--color-deep-navy) !important; /* Force to dark navy */
  color: var(--color-white);
}

/* Text color for light backgrounds */
.section--light.cta-section,
.section--gray.cta-section {
  color: var(--color-deep-navy);
}

.cta-section .container {
  max-width: 800px; /* Match text-only sections */
  text-align: left; /* Left-align content */
}

.cta-section__title {
  margin-bottom: var(--space-6);
}

.cta-section__subtitle {
  margin-bottom: var(--space-8);
  /* Color adapts based on background */
}

/* Subtitle for dark backgrounds */
.section--dark.cta-section .cta-section__subtitle,
.section--navy.cta-section .cta-section__subtitle,
.section--blue.cta-section .cta-section__subtitle,
.section--gradient.cta-section .cta-section__subtitle,
.section--gradientsage.cta-section .cta-section__subtitle,
.section--sage.cta-section .cta-section__subtitle,
.section--sagelight.cta-section .cta-section__subtitle,
.cta-section:not([class*="section--"]) .cta-section__subtitle {
  color: rgba(255, 255, 255, 0.7);
}

/* Subtitle for light backgrounds */
.section--light.cta-section .cta-section__subtitle,
.section--gray.cta-section .cta-section__subtitle {
  color: rgba(34, 37, 58, 0.7);
}

.cta-section__text-link {
  display: inline-block;
  color: var(--color-soft-sage);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-medium);
  text-decoration: underline;
  transition: color var(--transition-fast);
}

.cta-section__text-link:hover {
  color: var(--color-soft-sage-light);
  text-decoration: none;
}

/* Footer
   ========================================================================== */
.footer {
  background: var(--color-deep-navy);
  color: var(--color-white);
  padding: var(--space-16) 0 var(--space-8);
}

.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-12);
  margin-bottom: var(--space-12);
}

.footer__brand {
  max-width: 280px;
}

.footer__logo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.footer__logo img {
  /* Increased by 20px from original inline styles */
}

.footer__logo img:first-child {
  height: 52px !important; /* Logo icon: was 32px, now 52px (+20px) */
}

.footer__logo img:last-child {
  height: 38px !important; /* Wordmark: was 18px, now 38px (+20px) */
}

.footer__logo-text {
  font-size: var(--text-xl);
  font-weight: var(--font-weight-normal);
}

.footer__tagline {
  color: rgba(255, 255, 255, 0.6);
  font-size: var(--text-sm);
  margin-bottom: var(--space-6);
}

.footer__heading {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-4);
  color: rgba(255, 255, 255, 0.5);
}

.footer__links {
  list-style: none;
}

.footer__link {
  display: block;
  padding: var(--space-2) 0;
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.7);
  transition: color var(--transition-fast);
}

.footer__link:hover {
  color: var(--color-soft-sage);
}

.footer__social {
  display: flex;
  gap: var(--space-4);
  margin-top: var(--space-4);
}

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

.footer__social-link:hover {
  background: var(--color-soft-sage);
  color: var(--color-deep-navy);
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  padding-top: var(--space-8);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.5);
}

.footer__made-in {
  color: rgba(255, 255, 255, 0.5);
  font-size: var(--text-sm);
}

.footer__legal {
  display: flex;
  gap: var(--space-6);
}

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

  .footer__brand {
    grid-column: 1 / -1;
  }

  .footer__bottom {
    flex-direction: column;
    gap: var(--space-3);
    text-align: center;
  }

  .footer__bottom #copyright-text {
    order: 1;
  }

  .footer__bottom .footer__made-in {
    order: 2;
  }

  .footer__bottom .footer__legal {
    order: 3;
  }
}

/* Bibliography
   ========================================================================== */
.bibliography {
  /* No max-width - uses full container width like other sections */
}

.bibliography__item {
  padding: var(--space-8);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-6);
  background: var(--color-white);
  transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
  position: relative;
}

.bibliography__item:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border-color: var(--color-gray-300);
}

.bibliography__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
}

.bibliography__header-content {
  flex: 1;
}

.bibliography__subheadline {
  font-size: var(--text-sm);
  color: var(--color-soft-sage);
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--space-2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.bibliography__authors {
  font-weight: var(--font-weight-normal);
  margin-bottom: var(--space-2);
  font-size: var(--text-base);
}

.bibliography__title {
  font-style: italic;
  margin-bottom: var(--space-2);
  font-size: var(--text-base);
  line-height: 1.5;
}

.bibliography__journal {
  font-size: var(--text-sm);
  color: var(--color-gray-500);
  margin-bottom: var(--space-3);
}

/* External link button - separate from title */
.bibliography__link-button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-white);
  border: 1.5px solid var(--color-gray-300);
  border-radius: var(--radius-sm);
  color: var(--color-gray-700);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  transition: all var(--transition-fast);
  white-space: nowrap;
  flex-shrink: 0;
}

.bibliography__link-button:hover {
  background: var(--color-soft-sage);
  border-color: var(--color-soft-sage);
  color: var(--color-white);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.bibliography__link-icon {
  width: 16px;
  height: 16px;
  stroke-width: 2;
}

.bibliography__description {
  font-size: var(--text-sm);
  color: var(--color-gray-600);
  line-height: 1.6;
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-gray-100);
}

/* Partner Grid
   ========================================================================== */
.partner-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-8);
}

.partner-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
  background: var(--color-gray-100);
  border-radius: var(--radius-lg);
  aspect-ratio: 16 / 9;
  transition: background var(--transition-fast);
}

.partner-logo:hover {
  background: var(--color-gray-200);
}

.partner-logo img {
  width: 180px;
  height: auto;
  max-height: 80px;
  opacity: 0.6;
  transition: opacity var(--transition-fast);
}

.partner-logo img[src*=".svg"] {
  width: 180px;
  height: 80px;
  object-fit: contain;
}

.partner-logo:hover img {
  opacity: 1;
}

/* Article Content
   ========================================================================== */
.article-content {
  max-width: 720px;
  margin: 0 auto;
}

.article-content h2 {
  margin-top: var(--space-12);
  margin-bottom: var(--space-4);
}

.article-content h3 {
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
}

.article-content p {
  margin-bottom: var(--space-6);
  color: var(--color-gray-600);
}

.article-content ul,
.article-content ol {
  margin-bottom: var(--space-6);
  padding-left: var(--space-6);
  color: var(--color-gray-600);
}

.article-content li {
  margin-bottom: var(--space-2);
}

.article-content blockquote {
  margin: var(--space-8) 0;
  padding-left: var(--space-6);
  border-left: 3px solid var(--color-soft-sage);
  font-size: var(--text-xl);
  font-style: italic;
  color: var(--color-text-dark);
}

.article-content img {
  border-radius: var(--radius-lg);
  margin: var(--space-8) 0;
}

/* Story Card */
.story-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  padding: var(--space-8);
  background: var(--color-gray-100);
  border-radius: var(--radius-lg);
}

.story-card__quote {
  font-size: var(--text-xl);
  font-style: italic;
  line-height: var(--leading-snug);
}

.story-card__author {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.story-card__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}

.story-card__name {
  font-weight: var(--font-weight-normal);
}

.story-card__role {
  font-size: var(--text-sm);
  color: var(--color-gray-500);
}

/* Utility Classes
   ========================================================================== */
.text-center {
  text-align: center;
}

.text-gray {
  color: var(--color-gray-500);
}

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

.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.mb-12 { margin-bottom: var(--space-12); }
.mb-16 { margin-bottom: var(--space-16); }

.mt-4 { margin-top: var(--space-4); }
.mt-8 { margin-top: var(--space-8); }
.mt-12 { margin-top: var(--space-12); }
.mt-16 { margin-top: var(--space-16); }

/* Animations
   ========================================================================== */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-in {
  animation: fadeInUp 0.6s ease forwards;
}

.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; }

/* Scroll-triggered reveal animations
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered reveal delays for child elements */
.reveal-stagger > .reveal:nth-child(1) { transition-delay: 0s; }
.reveal-stagger > .reveal:nth-child(2) { transition-delay: 0.1s; }
.reveal-stagger > .reveal:nth-child(3) { transition-delay: 0.15s; }
.reveal-stagger > .reveal:nth-child(4) { transition-delay: 0.2s; }
.reveal-stagger > .reveal:nth-child(5) { transition-delay: 0.25s; }
.reveal-stagger > .reveal:nth-child(6) { transition-delay: 0.3s; }

/* Alternative reveal styles */
.reveal--fade {
  opacity: 0;
  transition: opacity 0.6s ease;
  transform: none;
}

.reveal--fade.revealed {
  opacity: 1;
}

.reveal--scale {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.reveal--scale.revealed {
  opacity: 1;
  transform: scale(1);
}

/* Image loading state */
.img-lazy {
  opacity: 0;
  transition: opacity 0.4s ease;
}

.img-lazy.loaded {
  opacity: 1;
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal--fade,
  .reveal--scale,
  .img-lazy {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .reveal.revealed,
  .reveal--fade.revealed,
  .reveal--scale.revealed,
  .img-lazy.loaded {
    opacity: 1;
    transform: none;
  }
}

/* Logo SVG styling */
.logo-icon {
  width: 32px;
  height: 32px;
}

.logo-icon--large {
  width: 48px;
  height: 48px;
}

.logo-wordmark {
  height: 20px;
  width: auto;
}

/* Footer logo layout */
.footer__logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
/* ==========================================================================
   MOBILE OPTIMIZATIONS - Hero Enhancements
   ========================================================================== */

/* Scroll Indicator - Mobile/Tablet Only */
.scroll-indicator {
  position: absolute;
  bottom: var(--space-8);
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: none; /* Hidden by default (desktop) */
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.75rem;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  animation: scrollBounce 2s infinite ease-in-out;
}

/* Show scroll indicator on tablet and below */
@media (max-width: 1024px) {
  .scroll-indicator {
    display: flex;
  }
}

.scroll-indicator svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

@keyframes scrollBounce {
  0%, 100% {
    transform: translateX(-50%) translateY(0);
  }
  50% {
    transform: translateX(-50%) translateY(8px);
  }
}

@media (max-width: 768px) {
  .scroll-indicator {
    bottom: var(--space-6);
    font-size: 0.7rem;
  }
  
  .scroll-indicator svg {
    width: 20px;
    height: 20px;
  }
}

/* App Store Badge Mobile Sizing */
@media (max-width: 768px) {
  .app-store-badge img {
    width: 140px;
    height: auto;
  }
}

@media (max-width: 480px) {
  .app-store-badge img {
    width: 130px;
    height: auto;
  }
}

@media (min-width: 414px) and (max-width: 768px) {
  .app-store-badge img {
    width: 150px;
    height: auto;
  }
}

/* Ensure hero image has position relative for ::after pseudo-element */
.hero__image {
  position: relative;
}

/* Container padding adjustments for mobile */
@media (max-width: 768px) {
  .container {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}

/* Hero mobile padding adjustments - REMOVED DUPLICATE
   Mobile hero padding is defined in the main hero section above (lines ~992-1001)
   with !important flags for consistent behavior */

/* ==========================================================================
   APP PREVIEW SECTION
   Side-by-side layout with phone mockup (like feature sections)
   ========================================================================== */

.app-preview {
  padding: var(--space-20) 0;
  background: #3A61AD; /* Clearwater Blue - brand color */
  color: var(--color-white);
  position: relative;
  overflow: hidden;
}

.app-preview .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
}

/* Content on left, phone on right (default) */
.app-preview__content {
  max-width: 480px;
  text-align: left;
}

.app-preview__label {
  color: var(--color-soft-sage);
  margin-bottom: var(--space-4);
  font-size: 0.95rem; /* Larger label */
}

.app-preview__title {
  margin-bottom: var(--space-4);
  /* Uses headline-large class for consistent sizing across all sections */
}

.app-preview__subtitle {
  color: rgba(255, 255, 255, 0.85);
  /* Uses body-large class for consistent sizing across all sections */
}

/* Phone container */
.app-preview__phone {
  position: relative;
  display: inline-block;
  border-radius: 40px;
  overflow: hidden;
  background: #1a1c2e;
  padding: 8px;
  box-shadow: 
    0 20px 60px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.1);
  transition: all var(--transition-base);
  justify-self: center;
}

.app-preview__phone:hover {
  transform: translateY(-8px);
  box-shadow: 
    0 30px 80px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(95, 200, 155, 0.3);
}

.app-preview__phone img,
.app-preview__phone video {
  width: 290px !important;
  height: 580px !important;
  max-width: 290px !important;
  max-height: 580px !important;
  display: block;
  border-radius: 32px;
  object-fit: cover;
  object-position: top center;
  background-color: #000 !important;
  background-image: none !important;
}

/* Loader animation */
.app-preview__loader {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 1;
  opacity: 1;
  transition: opacity 0.4s ease;
}

.app-preview__media {
  position: relative;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.app-preview__phone.loaded .app-preview__loader {
  opacity: 0;
  pointer-events: none;
}

.app-preview__phone.loaded .app-preview__media {
  opacity: 1;
}

/* Video replay button */
.app-preview__replay {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.app-preview__replay.visible {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.app-preview__replay:hover {
  background: rgba(95, 200, 155, 0.8);
  border-color: rgba(95, 200, 155, 0.5);
}

/* Reverse layout - phone on left, content on right */
.app-preview--reverse .container {
  direction: rtl;
}

.app-preview--reverse .app-preview__content {
  direction: ltr;
}

/* Light background variant */
.app-preview.section--gray {
  background: var(--color-gray-100);
  color: var(--color-text-dark);
}

.app-preview.section--gray .app-preview__subtitle {
  color: var(--color-gray-500);
}

.app-preview.section--gray .app-preview__label {
  color: var(--color-soft-sage);
}

/* Dark background - override with brand color */
.app-preview.section--dark {
  background: #353952 !important; /* Lightened deep navy */
  color: var(--color-white);
}

/* Navy - Lightened deep navy (#353952) */
.app-preview.section--navy {
  background: #353952 !important;
  color: var(--color-white);
}

/* Blue - Clearwater Blue (#3A61AD) */
.app-preview.section--blue {
  background: #3A61AD !important;
  color: var(--color-white);
}

/* Sage - Soft Sage (#5FC89B) */
.app-preview.section--sage {
  background: #5FC89B !important;
  color: var(--color-white);
}

/* Sage Light - Light Mint (#96F0BE) */
.app-preview.section--sagelight {
  background: #96F0BE !important;
  color: #22253A; /* Dark text for lighter background */
}

.app-preview.section--sagelight .app-preview__subtitle {
  color: rgba(34, 37, 58, 0.8);
}

.app-preview.section--sagelight .app-preview__label {
  color: #3A61AD; /* Clearwater blue for accent */
}

/* Gradient - Brand gradient (Clearwater to Ocean Blue) */
.app-preview.section--gradient {
  background: linear-gradient(135deg, #3A61AD 0%, #1479B6 100%) !important;
  color: var(--color-white);
}

/* Gradient Sage - Sage gradient (Sage to Light Sage) */
.app-preview.section--gradientsage {
  background: linear-gradient(135deg, #5FC89B 0%, #96F0BE 100%) !important;
  color: var(--color-white);
}

.app-preview.section--gradientsage .app-preview__subtitle {
  color: rgba(255, 255, 255, 0.95);
}

/* Light - White background */
.app-preview.section--light {
  background: var(--color-white);
  color: var(--color-text-dark);
}

.app-preview.section--light .app-preview__subtitle {
  color: var(--color-gray-600);
}

.app-preview.section--light .app-preview__label {
  color: var(--color-soft-sage);
}

/* Tablet */
@media (max-width: 1024px) {
  .app-preview {
    padding: var(--space-16) 0;
  }
  
  .app-preview .container {
    grid-template-columns: 1fr 1fr; /* Keep side-by-side */
    gap: var(--space-12); /* Reduce gap - was too wide */
    align-items: center;
  }
  
  .app-preview__content {
    max-width: 420px; /* Slightly larger for tablet */
    text-align: left; /* Keep left-aligned */
  }
  
  /* app-preview__title uses headline-large class - no override needed */
  
  /* app-preview__subtitle uses body-large class - no override needed */
  
  .app-preview__phone {
    padding: 6px;
    border-radius: 38px;
    /* Inherit justify-self: center from desktop - don't override */
  }

  .app-preview__phone img,
  .app-preview__phone video {
    width: 220px !important;
    height: 440px !important;
    max-width: 220px !important;
    max-height: 440px !important;
    border-radius: 32px;
  }

  .app-preview__loader {
    top: 6px;
    left: 6px;
  }

  /* Keep reverse layout working on tablet */
  .app-preview--reverse .app-preview__phone {
    /* Also inherit center alignment */
  }
}

/* Mobile */
@media (max-width: 768px) {
  .app-preview {
    padding: var(--space-12) 0;
  }
  
  .app-preview .container {
    grid-template-columns: 1fr; /* Stack vertically */
    gap: var(--space-8);
  }
  
  .app-preview__content {
    max-width: 100%; /* Full width */
    margin: 0 auto;
    text-align: left; /* Left-aligned text */
  }
  
  /* app-preview__title uses headline-large class - no override needed */
  
  /* app-preview__subtitle uses body-large class - no override needed */
  
  .app-preview__phone {
    padding: 5px;
    border-radius: 30px;
    justify-self: center; /* Center the phone */
    margin: 0 auto;
  }

  .app-preview__phone img,
  .app-preview__phone video {
    width: 248px !important;  /* 38% larger than 180px (216 * 1.15 = 248.4) */
    height: 496px !important; /* 38% larger than 360px (432 * 1.15 = 496.8) */
    max-width: 248px !important;
    max-height: 496px !important;
    border-radius: 25px;
  }

  .app-preview__loader {
    top: 5px;
    left: 5px;
  }

  /* Reset reverse layout on mobile */
  .app-preview--reverse .container {
    direction: ltr;
  }

  .app-preview--reverse .app-preview__phone {
    justify-self: center;
  }
}

/* Small mobile */
@media (max-width: 480px) {
  .app-preview__phone {
    padding: 4px;
    border-radius: 26px;
  }

  .app-preview__phone img,
  .app-preview__phone video {
    width: 221px !important;  /* 38% larger than 160px (160 * 1.38 = 220.8) */
    height: 442px !important; /* 38% larger than 320px (320 * 1.38 = 441.6) */
    max-width: 221px !important;
    max-height: 442px !important;
    border-radius: 22px;
  }

  .app-preview__loader {
    top: 4px;
    left: 4px;
  }
}

/* ==========================================================================
   APPLE WATCH PREVIEW SECTION
   Similar to app preview but with watch frame styling
   ========================================================================== */

/* Watch container - rounded square shape */
.watch-preview__watch {
  position: relative;
  display: inline-block;
  border-radius: 52px;
  overflow: hidden;
  background: #1a1c2e;
  padding: 8px;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.1);
  transition: all var(--transition-base);
  justify-self: center;
}

.watch-preview__watch:hover {
  transform: translateY(-8px);
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(95, 200, 155, 0.3);
}

.watch-preview__watch img,
.watch-preview__watch video {
  width: 220px !important;
  height: 268px !important;
  max-width: 220px !important;
  max-height: 268px !important;
  display: block;
  border-radius: 44px;
  object-fit: cover;
  object-position: center;
  background-color: #000 !important;
  background-image: none !important;
}

/* Loader animation for watch */
.watch-preview__loader {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 1;
  opacity: 1;
  transition: opacity 0.4s ease;
}

.watch-preview__media {
  position: relative;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.watch-preview__watch.loaded .watch-preview__loader {
  opacity: 0;
  pointer-events: none;
}

.watch-preview__watch.loaded .watch-preview__media {
  opacity: 1;
}

/* Tablet */
@media (max-width: 1024px) {
  .watch-preview__watch {
    padding: 6px;
    border-radius: 48px;
  }

  .watch-preview__watch img,
  .watch-preview__watch video {
    width: 198px !important;
    height: 242px !important;
    max-width: 198px !important;
    max-height: 242px !important;
    border-radius: 40px;
  }

  .watch-preview__loader {
    top: 6px;
    left: 6px;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .watch-preview__watch {
    padding: 5px;
    border-radius: 44px;
    justify-self: center;
    margin: 0 auto;
  }

  .watch-preview__watch img,
  .watch-preview__watch video {
    width: 176px !important;
    height: 215px !important;
    max-width: 176px !important;
    max-height: 215px !important;
    border-radius: 36px;
  }

  .watch-preview__loader {
    top: 5px;
    left: 5px;
  }
}

/* Small mobile */
@media (max-width: 480px) {
  .watch-preview__watch {
    padding: 4px;
    border-radius: 40px;
  }

  .watch-preview__watch img,
  .watch-preview__watch video {
    width: 154px !important;
    height: 188px !important;
    max-width: 154px !important;
    max-height: 188px !important;
    border-radius: 32px;
  }

  .watch-preview__loader {
    top: 4px;
    left: 4px;
  }
}

/* ==========================================================================
   COMBO PREVIEW SECTION (Phone + Watch together)
   Watch overlaps phone on upper right
   ========================================================================== */

.combo-preview__devices {
  position: relative;
  display: inline-block;
  justify-self: center;
  padding-right: 175px; /* Make room for watch on right */
}

/* Watch positioned on bottom right of phone with 10px gap */
.combo-preview__watch {
  position: absolute;
  bottom: 10px;
  right: 0;
  z-index: 10;
  display: inline-block;
  border-radius: 40px;
  overflow: hidden;
  background: #1a1c2e;
  padding: 5px;
  box-shadow:
    0 15px 45px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.15);
  transition: all var(--transition-base);
}

.combo-preview__watch:hover {
  transform: translateY(-4px);
  box-shadow:
    0 20px 55px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(95, 200, 155, 0.3);
}

.combo-preview__watch img,
.combo-preview__watch video {
  width: 155px !important;
  height: 189px !important;
  max-width: 155px !important;
  max-height: 189px !important;
  display: block;
  border-radius: 36px;
  object-fit: cover;
  object-position: center;
  background-color: #000 !important;
  background-image: none !important;
}

/* Watch loader */
.combo-preview__watch-loader {
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 1;
  opacity: 1;
  transition: opacity 0.4s ease;
  width: 155px !important;
  height: 189px !important;
  border-radius: 36px;
  object-fit: cover;
}

.combo-preview__watch-media {
  position: relative;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.combo-preview__watch.loaded .combo-preview__watch-loader {
  opacity: 0;
  pointer-events: none;
}

.combo-preview__watch.loaded .combo-preview__watch-media {
  opacity: 1;
}

/* Tablet */
@media (max-width: 1024px) {
  .combo-preview__devices {
    padding-right: 155px;
  }

  .combo-preview__watch {
    bottom: 10px;
    right: 0;
    padding: 4px;
    border-radius: 36px;
  }

  .combo-preview__watch img,
  .combo-preview__watch video,
  .combo-preview__watch-loader {
    width: 135px !important;
    height: 165px !important;
    max-width: 135px !important;
    max-height: 165px !important;
    border-radius: 32px;
  }

  .combo-preview__watch-loader {
    top: 4px;
    left: 4px;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .combo-preview__devices {
    padding-right: 126px;
  }

  .combo-preview__watch {
    bottom: 10px;
    right: 0;
    padding: 3px;
    border-radius: 32px;
  }

  .combo-preview__watch img,
  .combo-preview__watch video,
  .combo-preview__watch-loader {
    width: 110px !important;
    height: 134px !important;
    max-width: 110px !important;
    max-height: 134px !important;
    border-radius: 28px;
  }

  .combo-preview__watch-loader {
    top: 3px;
    left: 3px;
  }
}

/* Small mobile */
@media (max-width: 480px) {
  .combo-preview__devices {
    padding-right: 106px;
  }

  .combo-preview__watch {
    bottom: 10px;
    right: 0;
    padding: 3px;
    border-radius: 28px;
  }

  .combo-preview__watch img,
  .combo-preview__watch video,
  .combo-preview__watch-loader {
    width: 90px !important;
    height: 110px !important;
    max-width: 90px !important;
    max-height: 110px !important;
    border-radius: 24px;
  }

  .combo-preview__watch-loader {
    top: 3px;
    left: 3px;
  }
}