/* ==========================================================================
   STech — Modern Digital Agency Stylesheet
   Pure Vanilla CSS3
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CSS Custom Properties / Variables
   -------------------------------------------------------------------------- */
:root {
  /* Couleurs : quatre bleus et un blanc.
     Bleu principal pour les actions, bleu clair pour les détails,
     bleu intermédiaire pour les surfaces sombres,
     bleu foncé pour les titres et les sections de fond bleu. */
  --color-primary: #11285C;       /* Bleu foncé — titres, sections sombres */
  --color-primary-light: #153A95; /* Bleu intermédiaire — surfaces sombres */
  --color-brand: #1744B1;         /* Bleu principal — actions, liens, focus */
  --color-brand-hover: #11285C;
  --color-brand-glow: rgba(23, 68, 177, 0.18);
  --color-brand-soft: rgba(23, 68, 177, 0.08);

  --color-accent: #194FD4;        /* Bleu clair — accents et détails */
  --color-accent-light: #5B85F0;
  --color-accent-glow: rgba(25, 79, 212, 0.2);

  --color-whatsapp: #25d366;      /* Couleur officielle WhatsApp (ne pas modifier) */
  --color-whatsapp-hover: #1ebc57;
  --color-whatsapp-glow: rgba(37, 211, 102, 0.25);

  /* Fonds : le blanc domine, le bleu n'apparaît que par superposition légère. */
  --bg-main: #ffffff;            /* Blanc */
  --bg-card: #ffffff;
  --bg-card-hover: #F7F9FE;
  --bg-surface-subtle: #F2F6FE;
  --bg-dark: #0A1842;            /* Fond bleu profond des sections sombres */
  --bg-glass: rgba(255, 255, 255, 0.82);

  /* Textes */
  --text-dark: #11285C;
  --text-body: #3E4A66;
  --text-muted: #5A678A;
  --text-white: #ffffff;
  --text-white-muted: #A9B6D6;

  /* Bordures */
  --border-light: #E2E9F8;
  --border-focus: #8FB0F5;
  --border-glass: rgba(255, 255, 255, 0.16);

  /* Typographie : Manrope partout. Une seule famille, des graisses contrastées,
     c'est ce qui donne au site son air contemporain. */
  --font-heading: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Ombres : teintées de bleu, jamais grises. */
  --shadow-sm: 0 1px 2px rgba(17, 40, 92, 0.06);
  --shadow-md: 0 2px 4px rgba(17, 40, 92, 0.04), 0 8px 20px -8px rgba(17, 40, 92, 0.14);
  --shadow-lg: 0 2px 6px rgba(17, 40, 92, 0.05), 0 18px 40px -20px rgba(17, 40, 92, 0.24);
  --shadow-xl: 0 32px 64px -28px rgba(17, 40, 92, 0.3);
  --shadow-glow: 0 14px 30px -14px rgba(23, 68, 177, 0.5);

  /* Courbes : des sorties franches (ease-out), jamais de ease-in qui rend flou. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --transition-fast: 0.16s var(--ease-out);
  --transition-normal: 0.26s var(--ease-out);
  --transition-slow: 0.48s var(--ease-in-out);

  /* Rayons : plus arrondis qu'un atelier, moins qu'une application. */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 9999px;

  --header-height: 76px;
}

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--text-body);
  background-color: var(--bg-main);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg {
  display: block;
  max-width: 100%;
}

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

:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.contact-section :focus-visible {
  outline-color: #5B85F0;
}

ul,
ol {
  list-style: none;
}

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

/* Typography Helpers */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--text-dark);
  line-height: 1.25;
  font-weight: 700;
}

/* Container */
.container {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.section {
  padding: 5.5rem 0;
  position: relative;
}

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

/* Surlignage « main » : une bande de couleur chaude sous les mots qui comptent.
   Remplace un dégradé de couleur, qui donnait un rendu automatique et publicitaire. */
.text-mark {
  background-image: linear-gradient(transparent 58%, rgba(25, 79, 212, 0.26) 58%, rgba(25, 79, 212, 0.26) 92%, transparent 92%);
  background-repeat: no-repeat;
  padding: 0 0.08em;
}

/* Badges / Pills */
.badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 1rem;
  background-color: rgba(23, 68, 177, 0.08);
  border: 1px solid rgba(23, 68, 177, 0.2);
  border-radius: var(--radius-full);
  color: var(--color-brand);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: 1.25rem;
}

.badge-pill-light {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
  color: #93A9EC;
}

.badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-accent);
  display: inline-block;
}

.badge-pill-light .badge-dot {
  background-color: #5B85F0;
}

/* Section Header Structure */
.section-header {
  max-width: 680px;
  margin: 0 auto 3.5rem auto;
}

.section-title {
  font-size: clamp(2.05rem, 3.6vw, 2.85rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  margin-bottom: 1rem;
}

.section-subtitle {
  font-size: 1.075rem;
  color: var(--text-muted);
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   3. Page Loader (écran de chargement affiché au démarrage)
   -------------------------------------------------------------------------- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.page-loader {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bg-main);
  background-image: radial-gradient(rgba(17, 40, 92, 0.06) 1px, transparent 1px);
  background-size: 26px 26px;
  transition: opacity 0.45s ease, visibility 0.45s ease;
  /* Filet de sécurité : l'écran se retire même si le script ne s'exécute pas */
  animation: loader-failsafe 0.5s ease 3.5s forwards;
}

/* Masquage déclenché par script.js une fois la page chargée */
body.is-loaded .page-loader {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@keyframes loader-failsafe {
  to {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

.loader-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.15rem;
  animation: loader-appear 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.loader-logo {
  display: block;
  animation: loader-breathe 2.4s var(--ease-in-out) infinite;
}

.loader-wordmark {
  font-family: var(--font-heading);
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text-dark);
}

.loader-wordmark-accent {
  color: var(--color-brand);
}

.loader-bar {
  position: relative;
  width: 148px;
  height: 3px;
  border-radius: var(--radius-full);
  background: rgba(17, 40, 92, 0.08);
  overflow: hidden;
}

.loader-bar-fill {
  position: absolute;
  inset: 0;
  width: 45%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--color-brand), var(--color-accent));
  animation: loader-sweep 1.4s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes loader-appear {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes loader-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

@keyframes loader-sweep {
  from { transform: translateX(-100%); }
  to { transform: translateX(222%); }
}

/* --------------------------------------------------------------------------
   4. Buttons & Interactive Links
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.75rem 1.6rem;
  border-radius: var(--radius-full);
  /* On ne transitionne que ce qui change : « all » anime aussi la couleur de fond
     et provoque un clignotement au survol. */
  transition: transform var(--transition-fast), box-shadow var(--transition-normal), background-color var(--transition-normal), border-color var(--transition-normal), color var(--transition-normal);
  white-space: nowrap;
}

/* Retour de pression : le bouton s'enfonce quand on le pousse. */
.btn:active {
  transform: scale(0.97);
}

.btn-sm {
  padding: 0.55rem 1.25rem;
  font-size: 0.875rem;
}

.btn-lg {
  padding: 0.9rem 2rem;
  font-size: 1.05rem;
}

.btn-primary {
  background: linear-gradient(135deg, var(--color-brand) 0%, #11285C 100%);
  color: var(--text-white);
  box-shadow: 0 2px 10px 0 rgba(23, 68, 177, 0.22);
}

.btn-primary svg {
  transition: transform var(--transition-normal);
}

@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px 0 rgba(23, 68, 177, 0.3);
    background: linear-gradient(135deg, #11285C 0%, #0B1B48 100%);
  }

  .btn-primary:hover svg {
    transform: translateX(4px);
  }
}

.btn-secondary {
  background-color: var(--bg-card);
  color: var(--text-dark);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm);
}

.btn-secondary:hover {
  background-color: var(--bg-surface-subtle);
  border-color: #D6E0F5;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  color: var(--color-brand);
}

/* --------------------------------------------------------------------------
   5. Header & Navigation Bar
   -------------------------------------------------------------------------- */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-height);
  z-index: 1000;
  background-color: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: background-color var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal), height var(--transition-normal);
}

.header.scrolled {
  background-color: rgba(255, 255, 255, 0.95);
  border-color: rgba(226, 233, 248, 0.8);
  box-shadow: 0 4px 20px -2px rgba(17, 40, 92, 0.06);
  height: 70px;
}

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

/* Logo */
.logo {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-dark);
  text-decoration: none;
  letter-spacing: -0.03em;
}

.logo-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition-normal);
}

.logo:hover .logo-icon {
  transform: rotate(-5deg) scale(1.05);
}

.logo-highlight {
  color: var(--color-brand);
}

/* Navigation Menu */
.nav-menu {
  display: flex;
  align-items: center;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: 1.75rem;
}

.nav-link {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-body);
  padding: 0.4rem 0.2rem;
  position: relative;
  transition: color var(--transition-fast);
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--color-brand);
  border-radius: var(--radius-full);
  transition: width var(--transition-normal);
}

.nav-link:hover,
.nav-link.active {
  color: var(--color-brand);
}

.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}

/* Header CTA & Actions */
.header-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 8px;
  border-radius: var(--radius-sm);
  background-color: var(--bg-surface-subtle);
  border: 1px solid var(--border-light);
  z-index: 1001;
}

.hamburger-bar {
  width: 100%;
  height: 2px;
  background-color: var(--text-dark);
  border-radius: 2px;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal),
              border-color var(--transition-normal), background-color var(--transition-normal);
}

/* --------------------------------------------------------------------------
   6. Hero Section
   -------------------------------------------------------------------------- */
.hero-section {
  position: relative;
  padding-top: calc(var(--header-height) + 3.5rem);
  padding-bottom: 6rem;
  overflow: hidden;
  background: radial-gradient(circle at 15% 30%, rgba(23, 68, 177, 0.06) 0%, transparent 60%),
              radial-gradient(circle at 85% 70%, rgba(25, 79, 212, 0.05) 0%, transparent 50%);
}

/* Un voile de couleur diffus et unique, sans halo lumineux ni flou coûteux. */
.hero-bg-wash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(60rem 32rem at 8% -10%, rgba(23, 68, 177, 0.1), transparent 60%),
    radial-gradient(48rem 30rem at 105% 25%, rgba(25, 79, 212, 0.08), transparent 60%);
}

.hero-grid-pattern {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(rgba(169, 182, 214, 0.25) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
  pointer-events: none;
  z-index: 0;
}

.hero-container {
  display: grid;
  grid-template-columns: 1fr 0.95fr;
  align-items: center;
  gap: 3rem;
  position: relative;
  z-index: 1;
}

.hero-title {
  font-size: clamp(2.4rem, 4.6vw, 3.9rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.12;
  margin-bottom: 1.35rem;
}

.hero-description {
  font-size: 1.125rem;
  color: var(--text-body);
  line-height: 1.7;
  margin-bottom: 2rem;
  max-width: 580px;
}

.hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 3rem;
}

/* Quick Hero Stats */
.hero-stats {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--border-light);
}

.stat-item {
  display: flex;
  flex-direction: column;
}

.stat-number {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.2;
}

.stat-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 500;
}

.stat-divider {
  width: 1px;
  height: 32px;
  background-color: var(--border-light);
}

/* Hero : les vrais projets, pas un tableau de bord simulé */
.hero-visual {
  position: relative;
}

.work-stack {
  position: relative;
  margin: 0;
  padding-bottom: 3.5rem;
}

/* Cadre de navigateur minimal : trois points et une fine bordure. */
.work-frame {
  display: block;
  overflow: hidden;
  background-color: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
}

.work-frame-bar {
  display: flex;
  gap: 0.375rem;
  align-items: center;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--border-light);
  background-color: var(--bg-surface-subtle);
}

.work-frame-bar i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--border-light);
}

.work-frame img {
  width: 100%;
  height: auto;
  aspect-ratio: 1365 / 655;
  object-fit: cover;
  object-position: top center;
}

/* Le projet principal, au premier plan */
.work-frame-main {
  position: relative;
  z-index: 2;
}

/* Une seconde capture en retrait, purement décorative : elle donne de la
   profondeur et montre qu'il y a du travail réel derrière. */
.work-frame-back {
  position: absolute;
  z-index: 1;
  right: -1.25rem;
  top: 2.75rem;
  width: 82%;
  opacity: 0.5;
  filter: saturate(0.8);
  box-shadow: var(--shadow-md);
}

@media (hover: hover) and (pointer: fine) {
  .work-frame-main:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
    border-color: rgba(23, 68, 177, 0.35);
  }
}

.work-stack-caption {
  position: absolute;
  z-index: 3;
  left: 1.25rem;
  right: 1.25rem;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1.1rem;
  background-color: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.work-stack-name {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-dark);
  line-height: 1.3;
}

.work-stack-meta {
  display: block;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.work-stack-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-brand);
  white-space: nowrap;
}

.work-stack-link svg {
  transition: transform var(--transition-fast);
}

@media (hover: hover) and (pointer: fine) {
  .work-stack-link:hover {
    color: var(--color-brand-hover);
  }

  .work-stack-link:hover svg {
    transform: translateX(3px);
  }
}

/* --------------------------------------------------------------------------
   7. Services Section
   -------------------------------------------------------------------------- */
.services-section {
  background-color: #ffffff;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.service-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  padding: 2.25rem 2rem;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal),
              border-color var(--transition-normal), opacity var(--transition-normal);
  display: flex;
  flex-direction: column;
  position: relative;
}

.service-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--color-brand), var(--color-accent));
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 32px -4px rgba(17, 40, 92, 0.08);
  border-color: rgba(23, 68, 177, 0.3);
}

.service-card:hover::before {
  opacity: 1;
}

.service-icon-box {
  width: 58px;
  height: 58px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(23, 68, 177, 0.08) 0%, rgba(25, 79, 212, 0.08) 100%);
  color: var(--color-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  border: 1px solid rgba(23, 68, 177, 0.15);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal),
              border-color var(--transition-normal), background-color var(--transition-normal);
}

.service-card:hover .service-icon-box {
  background: linear-gradient(135deg, var(--color-brand) 0%, var(--color-accent) 100%);
  color: #ffffff;
  transform: scale(1.05);
}

.service-title {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 0.85rem;
}

.service-description {
  font-size: 0.95rem;
  color: var(--text-body);
  line-height: 1.6;
  margin-bottom: 1.5rem;
  flex-grow: 1;
}

.service-features {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--border-light);
}

.service-features li {
  font-size: 0.85rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.service-features li::before {
  content: '✓';
  color: var(--color-accent);
  font-weight: bold;
}

/* --------------------------------------------------------------------------
   8. About Section
   -------------------------------------------------------------------------- */
.about-section {
  background-color: #ffffff;
  overflow: hidden;
}

.about-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  align-items: center;
  gap: 4.5rem;
}

.about-visual {
  position: relative;
}

.about-card-container {
  position: relative;
}

.about-main-card {
  background: linear-gradient(158deg, var(--color-primary-light) 0%, var(--bg-dark) 72%);
  color: var(--text-white);
  padding: 2.75rem 2.25rem;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: var(--shadow-xl), 0 0 0 1px rgba(23, 68, 177, 0.12);
}

.pulse-indicator {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: #5B85F0;
  flex-shrink: 0;
}

.about-badge-header {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #7FA3F0;
  margin-bottom: 1.25rem;
}

.about-card-title {
  font-size: 1.65rem;
  color: var(--text-white);
  margin-bottom: 1rem;
  line-height: 1.3;
}

.about-card-text {
  font-size: 0.95rem;
  color: var(--text-white-muted);
  line-height: 1.65;
  margin-bottom: 2rem;
}

.about-metrics-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.about-metric .num {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  color: #7FA3F0;
}

.about-metric .lbl {
  font-size: 0.8rem;
  color: var(--text-white-muted);
}

.about-secondary-card {
  position: absolute;
  bottom: -20px;
  right: -20px;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  box-shadow: var(--shadow-lg);
}

.about-sec-icon {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-md);
  background: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-sec-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-dark);
}

.about-sec-sub {
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* About Content Right */
.about-text-lead {
  font-size: 1.15rem;
  color: var(--text-dark);
  line-height: 1.7;
  margin-bottom: 1.25rem;
}

.about-text-sub {
  font-size: 1rem;
  color: var(--text-body);
  line-height: 1.65;
  margin-bottom: 2.25rem;
}

.about-pillars-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.pillar-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  background: var(--bg-card);
  padding: 1.25rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
  transition: transform var(--transition-fast), border-color var(--transition-fast);
}

.pillar-item:hover {
  transform: translateY(-3px);
  border-color: rgba(23, 68, 177, 0.3);
}

.pillar-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: rgba(23, 68, 177, 0.08);
  color: var(--color-brand);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pillar-title {
  font-size: 1.05rem;
  margin-bottom: 0.25rem;
}

.pillar-desc {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.45;
}

/* --------------------------------------------------------------------------
   9. Process Section — « Comment ça se passe »
   --------------------------------------------------------------------------
   Une liste numérotée, pas une grille de cards : la section raconte une suite,
   elle ne doit pas ressembler aux sections qui la précèdent. */
.process-section {
  background-color: var(--bg-surface-subtle);
}

.process-list {
  max-width: 46rem;
  margin: 0 auto;
  border-top: 1px solid rgba(23, 68, 177, 0.16);
}

.process-step {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: 0 1.5rem;
  padding: 2.25rem 0;
  border-bottom: 1px solid rgba(23, 68, 177, 0.16);
  transition: background-color var(--transition-normal);
}

.process-num {
  font-family: var(--font-heading);
  font-size: 2.1rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--color-accent);
  font-variant-numeric: lining-nums tabular-nums;
}

.process-title {
  font-size: 1.35rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  letter-spacing: -0.01em;
}

.process-text {
  color: var(--text-body);
  line-height: 1.7;
  max-width: 40rem;
}

.process-note {
  margin-top: 2.5rem;
  text-align: center;
  font-size: 0.95rem;
  color: var(--text-muted);
}

@media (hover: hover) and (pointer: fine) {
  .process-step:hover {
    background-color: var(--bg-surface-subtle);
  }
}

/* --------------------------------------------------------------------------
   10. Portfolio / Réalisations Section
   -------------------------------------------------------------------------- */
.work-section {
  background-color: var(--bg-main);
}

/* Un projet « masqué » doit disparaître complètement : pas de display concurrent
   sur .work-card, et donc rien nulle part à l'écran ni au clavier. */
[hidden] {
  display: none !important;
}

.work-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.work-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
}

.work-card:hover {
  transform: translateY(-5px);
  border-color: rgba(23, 68, 177, 0.28);
  box-shadow: 0 18px 34px -6px rgba(17, 40, 92, 0.12);
}

/* Media: real screenshot once available, neutral preview otherwise */
.work-media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--bg-surface-subtle);
  border-bottom: 1px solid var(--border-light);
  overflow: hidden;
}

.work-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.work-card:hover .work-image {
  transform: scale(1.03);
}

.work-preview {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
}

.work-preview-bar {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.6rem 0.85rem;
  background: #ffffff;
  border-bottom: 1px solid var(--border-light);
}

.work-preview-bar span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #D6E0F5;
}

.work-preview-canvas {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  background: linear-gradient(180deg, #FFFFFF 0%, #EEF3FD 100%);
}

.work-preview-mono {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 700;
  color: #ffffff;
  background: var(--work-accent, var(--color-brand));
  box-shadow: 0 10px 20px -10px rgba(17, 40, 92, 0.45);
}

.work-preview-hint {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: center;
  color: var(--text-muted);
  padding: 0 1rem;
}

/* Emplacement du fichier image à fournir */
.work-preview-path {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Courier New', monospace;
  font-size: 0.78rem;
  text-align: center;
  color: var(--text-body);
  background: #ffffff;
  border: 1px dashed #D6E0F5;
  border-radius: var(--radius-sm);
  padding: 0.3rem 0.7rem;
  max-width: 90%;
  overflow-wrap: anywhere;
}

/* Card content */
.work-body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 1.75rem 1.75rem 1.6rem;
}

.work-category {
  align-self: flex-start;
  padding: 0.3rem 0.75rem;
  margin-bottom: 0.9rem;
  font-size: 0.73rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-accent);
  background: rgba(25, 79, 212, 0.08);
  border: 1px solid rgba(25, 79, 212, 0.18);
  border-radius: var(--radius-full);
}

.work-title {
  font-size: 1.3rem;
  margin-bottom: 0.6rem;
}

.work-description {
  font-size: 0.95rem;
  color: var(--text-body);
  line-height: 1.6;
  margin-bottom: 1.6rem;
  flex-grow: 1;
}

.work-cta {
  align-self: flex-start;
  box-shadow: none;
}

.work-cta svg {
  transition: transform var(--transition-normal);
}

.work-cta:hover svg,
.work-cta:focus-visible svg {
  transform: translateX(4px);
}

/* Closing note under the grid */
.work-more {
  margin-top: 2.75rem;
  text-align: center;
}

.work-more-btn svg {
  transition: transform var(--transition-normal);
}

/* La flèche se retourne quand la liste est dépliée : le bouton indique
   alors qu'il va refermer, pas ouvrir davantage. */
.work-more-btn.is-expanded svg {
  transform: rotate(180deg);
}

/* Apparition des projets débloqués par le bouton. */
@keyframes work-reveal {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

/* Sans « both » : l'animation est purement décorative. Si elle est ignorée ou
   interrompue, la carte retombe sur ses styles normaux, toujours visibles. */
.work-card.is-new {
  animation: work-reveal 0.5s var(--ease-out);
}

.work-footnote {
  margin-top: 2.75rem;
  text-align: center;
}

.work-footnote p {
  font-size: 0.95rem;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
}

.work-footnote-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 600;
  color: var(--color-brand);
}

.work-footnote-link:hover {
  color: var(--color-brand-hover);
}

.work-footnote-link svg {
  transition: transform var(--transition-normal);
}

.work-footnote-link:hover svg {
  transform: translateX(4px);
}

/* Fallback when JavaScript is disabled */
.work-noscript {
  grid-column: 1 / -1;
  text-align: center;
  padding: 1.75rem;
  color: var(--text-muted);
  background: var(--bg-card);
  border: 1px dashed var(--border-light);
  border-radius: var(--radius-lg);
}

.work-noscript-list {
  grid-column: 1 / -1;
  display: grid;
  gap: 0.75rem;
  max-width: 42rem;
  margin: 0 auto;
  padding: 1.5rem 1.75rem;
  text-align: left;
  color: var(--text-muted);
  background: var(--bg-card);
  border: 1px dashed var(--border-light);
  border-radius: var(--radius-lg);
}

.work-noscript-list a {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
}

.work-noscript-list a:hover {
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   11. Contact Section (No Form)
   -------------------------------------------------------------------------- */
.contact-section {
  background: linear-gradient(180deg, #ffffff 0%, var(--bg-surface-subtle) 100%);
}

.contact-wrapper {
  background: radial-gradient(circle at 50% 0%, #0D1E52 0%, #11285C 70%);
  border-radius: var(--radius-xl);
  padding: 4.5rem 3rem;
  color: var(--text-white);
  box-shadow: 0 25px 50px -12px rgba(17, 40, 92, 0.25);
  position: relative;
  overflow: hidden;
}

.contact-wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
}

.contact-header {
  max-width: 650px;
  margin: 0 auto 3rem auto;
  position: relative;
  z-index: 1;
}

.contact-title {
  font-size: clamp(2.2rem, 3.8vw, 3rem);
  color: var(--text-white);
  margin-bottom: 1rem;
}

.contact-subtitle {
  font-size: 1.1rem;
  color: #D6E0F5;
  line-height: 1.65;
}

/* Direct Action Cards Grid */
.contact-cards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.75rem;
  max-width: 860px;
  margin: 0 auto 3rem auto;
  position: relative;
  z-index: 1;
}

.contact-channel-card {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-xl);
  padding: 1.75rem 2rem;
  backdrop-filter: blur(10px);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal),
              border-color var(--transition-normal), background-color var(--transition-normal);
  color: var(--text-white);
  text-decoration: none;
}

.contact-channel-card:hover {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, 0.14);
}

.whatsapp-card:hover {
  border-color: rgba(37, 211, 102, 0.5);
  box-shadow: 0 12px 28px -4px var(--color-whatsapp-glow);
}

.email-card:hover {
  border-color: rgba(127, 163, 240, 0.5);
  box-shadow: 0 12px 28px -4px rgba(127, 163, 240, 0.3);
}

.channel-icon-circle {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform var(--transition-normal);
}

.contact-channel-card:hover .channel-icon-circle {
  transform: scale(1.08);
}

.whatsapp-circle {
  background: linear-gradient(135deg, #25d366 0%, #194FD4 100%);
  color: #ffffff;
  box-shadow: 0 4px 15px rgba(37, 211, 102, 0.35);
}

.email-circle {
  background: linear-gradient(135deg, #7FA3F0 0%, #1744B1 100%);
  color: #ffffff;
  box-shadow: 0 4px 15px rgba(23, 68, 177, 0.35);
}

.channel-details {
  flex-grow: 1;
}

.channel-label {
  display: block;
  font-size: 0.85rem;
  color: #A9B6D6;
  font-weight: 500;
  margin-bottom: 0.2rem;
}

.channel-value {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-white);
  margin-bottom: 0.4rem;
}

.channel-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.15);
  color: #E2E9F8;
}

.channel-arrow {
  color: rgba(255, 255, 255, 0.5);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal),
              border-color var(--transition-normal), background-color var(--transition-normal);
}

.contact-channel-card:hover .channel-arrow {
  color: #ffffff;
  transform: translateX(4px);
}

/* Social Media Follow Box */
.social-contact-wrapper {
  text-align: center;
  position: relative;
  z-index: 1;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 2rem;
}

.social-prompt {
  display: block;
  font-size: 0.95rem;
  color: #D6E0F5;
  margin-bottom: 1.25rem;
}

.social-links-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.social-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1.4rem;
  border-radius: var(--radius-full);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-white);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal),
              border-color var(--transition-normal), background-color var(--transition-normal);
}

.social-btn:hover {
  transform: translateY(-2px);
}

.instagram-btn:hover {
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  border-color: transparent;
  box-shadow: 0 4px 15px rgba(220, 39, 67, 0.35);
}

.facebook-btn:hover {
  background: #1877f2;
  border-color: transparent;
  box-shadow: 0 4px 15px rgba(24, 119, 242, 0.35);
}

/* Contact Form Block */
.contact-form-block {
  max-width: 760px;
  margin: 0 auto 3rem auto;
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-xl);
  padding: 2.5rem;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.contact-form-heading {
  text-align: center;
  margin-bottom: 2rem;
}

.contact-form-title {
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 2.5vw, 1.9rem);
  color: var(--text-white);
  margin-bottom: 0.5rem;
}

.contact-form-sub {
  color: #D6E0F5;
  font-size: 0.95rem;
}

.contact-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

.form-field {
  margin-bottom: 1.25rem;
}

.form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: #E2E9F8;
  margin-bottom: 0.4rem;
}

.form-optional {
  font-weight: 400;
  color: #A9B6D6;
}

.form-input {
  width: 100%;
  padding: 0.8rem 1rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--text-white);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-md);
  transition: transform var(--transition-fast), background-color var(--transition-fast),
              border-color var(--transition-fast), color var(--transition-fast);
}

.form-input::placeholder {
  color: #6B7799;
}

.form-input:focus {
  outline: none;
  border-color: var(--color-brand);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 0 3px rgba(23, 68, 177, 0.25);
}

.form-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1rem;
  cursor: pointer;
}

.form-select option {
  color: var(--text-dark);
  background: #ffffff;
}

.form-textarea {
  resize: vertical;
  min-height: 130px;
}

.form-error {
  color: #fca5a5;
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 1rem;
  text-align: center;
}

.form-error-link {
  color: #fca5a5;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.form-error-link:hover {
  color: #fecaca;
}

.contact-form-btn {
  width: 100%;
}

.contact-form-btn svg {
  transition: transform var(--transition-normal);
}

.contact-form-btn:hover svg {
  transform: scale(1.1);
}

/* --------------------------------------------------------------------------
   12. Footer
   -------------------------------------------------------------------------- */
.footer {
  background: linear-gradient(180deg, var(--bg-dark) 0%, #0d2154 100%);
  color: var(--text-white-muted);
  padding: 5rem 0 2.5rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
  gap: 3rem;
  margin-bottom: 4rem;
}

.footer-logo {
  color: var(--text-white);
  margin-bottom: 1.25rem;
}

.footer-bio {
  font-size: 0.9rem;
  line-height: 1.65;
  margin-bottom: 1.5rem;
  max-width: 320px;
}

.footer-socials {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.social-icon-link {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition-fast), background-color var(--transition-fast),
              border-color var(--transition-fast), color var(--transition-fast);
}

.social-icon-link:hover {
  background: var(--color-brand);
  border-color: var(--color-brand);
  transform: translateY(-2px);
}

.footer-heading {
  font-size: 1.05rem;
  color: var(--text-white);
  margin-bottom: 1.25rem;
}

.footer-nav {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.footer-nav a {
  font-size: 0.9rem;
  color: var(--text-white-muted);
  transition: color var(--transition-fast);
}

.footer-nav a:hover {
  color: #7FA3F0;
  padding-left: 3px;
}

.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 0.9rem;
  margin-bottom: 0.85rem;
  line-height: 1.5;
}

.footer-contact-item a {
  color: var(--text-white-muted);
}

/* Pictogrammes de contact : une ligne sobre, dans la teinte du texte secondaire. */
.f-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  color: #A9B6D6;
}

.footer-contact-item a:hover {
  color: #7FA3F0;
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.85rem;
}

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

.footer-tagline {
  color: rgba(255, 255, 255, 0.4);
}

/* --------------------------------------------------------------------------
   13. Back to Top Button
   -------------------------------------------------------------------------- */
.back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--color-brand);
  color: var(--text-white);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(23, 68, 177, 0.35);
  opacity: 0;
  visibility: hidden;
  transform: translateY(15px);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal),
              border-color var(--transition-normal), background-color var(--transition-normal);
  z-index: 999;
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  background: var(--color-brand-hover);
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(23, 68, 177, 0.45);
}

/* --------------------------------------------------------------------------
   14. Scroll Reveal Animations (Vanilla JS Observer)
   -------------------------------------------------------------------------- */
.reveal-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

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

/* --------------------------------------------------------------------------
   15. Responsive Media Queries
   -------------------------------------------------------------------------- */

/* Tablets and Laptops (max-width: 1024px) */
@media (max-width: 1024px) {
  .hero-container {
    grid-template-columns: 1fr;
    gap: 3.5rem;
    text-align: center;
  }

  .hero-content {
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

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

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

  .hero-visual {
    max-width: 580px;
    margin: 0 auto;
    width: 100%;
  }

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

  .about-grid {
    grid-template-columns: 1fr;
    gap: 3.5rem;
  }

  .about-visual {
    max-width: 540px;
    margin: 0 auto;
    width: 100%;
  }

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

  .work-body {
    padding: 1.5rem 1.4rem 1.4rem;
  }

  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
  }
}

/* Mobile Devices (max-width: 768px) */
@media (max-width: 900px) {
  :root {
    --header-height: 70px;
  }

  .section {
    padding: 4rem 0;
  }

  .nav-toggle {
    display: flex;
  }

  /* Mobile Slide-down Navigation */
  .nav-menu {
    position: fixed;
    top: var(--header-height);
    left: 0;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border-light);
    padding: 2rem 1.5rem;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    transform: translateY(-120%);
    opacity: 0;
    visibility: hidden;
    transition: transform var(--transition-normal), box-shadow var(--transition-normal),
              border-color var(--transition-normal), background-color var(--transition-normal);
    z-index: 999;
  }

  .nav-menu.open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }

  .nav-list {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
    width: 100%;
  }

  .nav-item {
    width: 100%;
  }

  .nav-link {
    display: block;
    font-size: 1.15rem;
    padding: 0.5rem 0;
    width: 100%;
    border-bottom: 1px solid rgba(226, 233, 248, 0.5);
  }

  .header-cta {
    display: none;
  }

  /* Hamburger Active Animation (X Shape) */
  .nav-toggle.open .hamburger-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .nav-toggle.open .hamburger-bar:nth-child(2) {
    opacity: 0;
  }

  .nav-toggle.open .hamburger-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  .services-grid {
    grid-template-columns: 1fr;
  }

  .process-step {
    grid-template-columns: 3.25rem 1fr;
    gap: 0 1rem;
    padding: 1.75rem 0;
  }

  .process-num {
    font-size: 1.6rem;
  }

  .work-grid {
    grid-template-columns: 1fr;
  }

  .about-pillars-grid {
    grid-template-columns: 1fr;
  }

  .contact-wrapper {
    padding: 3rem 1.5rem;
  }

  .contact-cards-grid {
    grid-template-columns: 1fr;
  }

  .contact-form-row {
    grid-template-columns: 1fr;
  }

  .contact-form-block {
    padding: 1.75rem 1.25rem;
  }

  .footer-top {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 0.75rem;
    text-align: center;
  }

  .work-stack {
    padding-bottom: 3.25rem;
  }

  .work-frame-back {
    right: -0.5rem;
    top: 2rem;
    width: 88%;
  }

  .work-stack-caption {
    left: 0.75rem;
    right: 0.75rem;
    padding: 0.75rem 0.9rem;
  }

  .about-secondary-card {
    position: static;
    margin-top: 1rem;
  }
}

/* Reduced motion: keep the portfolio section instant and calm */
@media (prefers-reduced-motion: reduce) {
  .reveal-up {
    transform: none;
    transition: opacity 0.25s linear;
  }

  .process-step,
  .btn,
  .work-frame-main,
  .work-stack-link svg {
    transition: none;
  }

  .work-card.is-new {
    animation: none;
  }

  .work-card,
  .work-image,
  .work-cta svg,
  .work-footnote-link svg {
    transition: none;
  }

  .work-card:hover,
  .work-card:hover .work-image {
    transform: none;
  }

  .page-loader {
    transition-duration: 0.2s;
  }

  .loader-inner,
  .loader-logo,
  .loader-bar-fill {
    animation: none;
  }

  .loader-bar-fill {
    transform: none;
    width: 100%;
  }
}

/* Small Screens (max-width: 480px) */
@media (max-width: 480px) {
  .hero-buttons {
    flex-direction: column;
    width: 100%;
  }

  .hero-buttons .btn {
    width: 100%;
  }

  .hero-stats {
    flex-direction: column;
    gap: 1rem;
    align-items: center;
  }

  .stat-divider {
    width: 60px;
    height: 1px;
  }

  .contact-channel-card {
    flex-direction: column;
    text-align: center;
    padding: 1.5rem;
  }

  .channel-arrow {
    display: none;
  }

  .back-to-top {
    bottom: 1.25rem;
    right: 1.25rem;
    width: 40px;
    height: 40px;
  }
}