/* ====================================================================
   DAN AGENCY — feuille de style consolidée
   Groupe ALT SHIFT — version statique nettoyée (sans React/Babel/CDN)

   Ordre :  1. Polices   2. Couleurs   3. Typographie   4. Espacements
            5. Base & utilitaires      6. Responsive + enhancements
            7. Styles de composants (générés, dé-inlinés du rendu React)
   ==================================================================== */

/* DAN AGENCY — Webfonts
   Familjen Grotesk (variable, 400–700) — primary grotesk for everything.
   Chopin Script — the calligraphic "A" of the wordmark; decorative use only. */

@font-face {
  font-family: "Familjen Grotesk";
  src: url("../assets/fonts/FamiljenGrotesk-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Familjen Grotesk";
  src: url("../assets/fonts/FamiljenGrotesk-Italic-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Chopin Script";
  src: url("../assets/fonts/ChopinScript.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

a.da-badge { transition: opacity var(--dur) var(--ease-out); }
a.da-badge:hover { opacity: 0.7; }

/* DAN AGENCY — Color tokens
   The brand is strictly monochrome: pure black, pure white, and a calibrated
   neutral grey scale between them. No hues. Contrast IS the brand.
   The site is dark-first (black canvas, white ink); the inverted "highlight
   box" (white surface, black ink) is the signature accent — used for section
   titles, primary buttons and key callouts. */

:root {
  /* ---- Base palette (raw values) ---- */
  --black: #000000;
  --white: #ffffff;

  --grey-950: #070707;
  --grey-900: #0d0d0d;
  --grey-850: #141414;
  --grey-800: #1a1a1a;
  --grey-700: #262626;
  --grey-600: #383838;
  --grey-500: #545454;
  --grey-400: #757575;
  --grey-300: #9b9b9b;
  --grey-200: #c4c4c4;
  --grey-100: #e4e4e4;
  --grey-50:  #f4f4f4;

  /* ---- Semantic aliases — DARK theme (default) ---- */
  --bg:              var(--black);
  --bg-elevated:     var(--grey-950);
  --surface:         var(--grey-900);
  --surface-raised:  var(--grey-850);
  --surface-hover:   var(--grey-800);

  --text:            var(--white);
  --text-muted:      var(--grey-300);
  --text-subtle:     var(--grey-400);
  --text-inverse:    var(--black);

  --border:          rgba(255, 255, 255, 0.12);
  --border-strong:   rgba(255, 255, 255, 0.24);
  --border-faint:    rgba(255, 255, 255, 0.06);

  /* The inverted highlight — signature DAN accent */
  --accent-surface:  var(--white);
  --accent-ink:      var(--black);

  /* Overlays & scrims */
  --scrim:           rgba(0, 0, 0, 0.6);
  --scrim-soft:      rgba(0, 0, 0, 0.35);
  --glass:           rgba(20, 20, 20, 0.72);

  /* Focus ring (kept monochrome) */
  --ring:            rgba(255, 255, 255, 0.55);
}

/* ---- Inverted / LIGHT scope ---- */
/* Apply .on-light to flip a region to white-paper, black-ink (e.g. a light
   section or the inside of a highlight panel). Mirrors every semantic token. */
.on-light {
  --bg:              var(--white);
  --bg-elevated:     var(--grey-50);
  --surface:         var(--grey-50);
  --surface-raised:  var(--white);
  --surface-hover:   var(--grey-100);

  --text:            var(--black);
  --text-muted:      var(--grey-500);
  --text-subtle:     var(--grey-400);
  --text-inverse:    var(--white);

  --border:          rgba(0, 0, 0, 0.14);
  --border-strong:   rgba(0, 0, 0, 0.28);
  --border-faint:    rgba(0, 0, 0, 0.06);

  --accent-surface:  var(--black);
  --accent-ink:      var(--white);

  --ring:            rgba(0, 0, 0, 0.55);

  background: var(--bg);
  color: var(--text);
}


/* DAN AGENCY — Typography tokens
   One family does almost all the work: Familjen Grotesk, ranged 400–700.
   Headlines are heavy (700) and tight; body is 500–600 for the slightly
   chunky, confident feel seen across the brand collateral. Chopin Script is
   reserved strictly for the calligraphic "A" flourish — never body copy. */

:root {
  /* ---- Families ---- */
  --font-grotesk: "Familjen Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-script:  "Chopin Script", "Familjen Grotesk", cursive;
  --font-sans:    var(--font-grotesk);

  /* ---- Weights ---- */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ---- Fluid type scale (clamped for responsive headlines) ---- */
  --text-display:  clamp(3rem, 1.2rem + 7.2vw, 6.5rem); /* @kind spacing */   /* hero headline */
  --text-h1:       clamp(2.4rem, 1.3rem + 4.4vw, 4.25rem); /* @kind spacing */ /* page title */
  --text-h2:       clamp(1.9rem, 1.2rem + 2.6vw, 3rem); /* @kind spacing */    /* section title */
  --text-h3:       clamp(1.4rem, 1.05rem + 1.3vw, 1.95rem); /* @kind spacing */ /* card / sub-head */
  --text-h4:       1.25rem;
  --text-lg:       1.125rem;   /* lead paragraph  */
  --text-base:     1rem;       /* body            */
  --text-sm:       0.875rem;   /* secondary       */
  --text-xs:       0.75rem;    /* labels / eyebrow*/

  /* ---- Line heights ---- */
  --leading-tight:   1.02;   /* big display headlines */
  --leading-snug:    1.12;
  --leading-heading: 1.18;
  --leading-body:    1.6;
  --leading-relaxed: 1.75;

  /* ---- Letter spacing ---- */
  --tracking-tight:   -0.03em;  /* display */
  --tracking-snug:    -0.015em; /* headings */
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-eyebrow: 0.18em;   /* uppercase eyebrows / labels */

  /* ---- Semantic text roles ---- */
  --text-body:   var(--text-base);
  --text-lead:   var(--text-lg);
  --text-label:  var(--text-xs);
}


/* DAN AGENCY — Spacing, radii, shadows, layout, motion
   Spacing is an 8px-based scale (with two sub-steps). Corners are nearly
   square — the brand leans brutalist/editorial; the signature highlight box
   has NO radius. Shadows are barely-there on a black canvas; depth comes from
   surface lightening and hairline borders, not glow. */

:root {
  /* ---- Spacing scale (4 / 8 base) ---- */
  --space-0:   0;
  --space-1:   0.25rem;  /* 4  */
  --space-2:   0.5rem;   /* 8  */
  --space-3:   0.75rem;  /* 12 */
  --space-4:   1rem;     /* 16 */
  --space-5:   1.5rem;   /* 24 */
  --space-6:   2rem;     /* 32 */
  --space-7:   2.5rem;   /* 40 */
  --space-8:   3rem;     /* 48 */
  --space-9:   4rem;     /* 64 */
  --space-10:  5rem;     /* 80 */
  --space-12:  6rem;     /* 96 */
  --space-16:  8rem;     /* 128 */

  /* ---- Section rhythm ---- */
  --section-y:    clamp(4rem, 2rem + 8vw, 8rem); /* @kind spacing */
  --gutter:       clamp(1.25rem, 0.5rem + 3vw, 3rem); /* @kind spacing */
  --maxw:         1240px;
  --maxw-narrow:  760px;

  /* ---- Radii — squared brand, modest softening on cards ---- */
  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   14px;
  --radius-xl:   22px;
  --radius-pill: 999px;

  /* ---- Border widths ---- */
  --bw-hair: 1px;
  --bw-thick: 2px;

  /* ---- Shadows (subtle on dark) ---- */
  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md:  0 8px 28px rgba(0, 0, 0, 0.55);
  --shadow-lg:  0 24px 64px rgba(0, 0, 0, 0.6);
  /* Light-on-dark lift: a faint white inner edge gives a "raised" hairline */
  --shadow-edge: inset 0 1px 0 rgba(255, 255, 255, 0.06);

  /* ---- Motion ---- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast:    140ms; /* @kind other */
  --dur:         240ms; /* @kind other */
  --dur-slow:    520ms; /* @kind other */

  /* ---- Z layers ---- */
  --z-header: 100; /* @kind other */
  --z-menu:   110; /* @kind other */
  --z-modal:  200; /* @kind other */
}


/* DAN AGENCY — Base element styles & primitive utilities
   Sets the dark canvas, default type, links, selection, focus, scrollbar.
   Kept minimal — components own their look. */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-grotesk);
  font-weight: var(--weight-medium);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  font-feature-settings: "ss01", "cv01";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: var(--weight-bold);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-snug);
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

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

::selection { background: var(--white); color: var(--black); }

:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

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

/* Thin monochrome scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--grey-600) transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background: var(--grey-700);
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--grey-600); }

/* ---- Eyebrow / kicker label ---- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}
.eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

/* ---- The signature highlight box: white block, black ink ---- */
.highlight {
  background: var(--accent-surface);
  color: var(--accent-ink);
  padding: 0.06em 0.3em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* ---- Script flourish (the calligraphic A) ---- */
.script {
  font-family: var(--font-script);
  font-weight: var(--weight-regular);
  letter-spacing: 0;
}

/* ---- Underscore bullet list (brand collateral motif) ---- */
.list-underscore {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}
.list-underscore li {
  position: relative;
  padding-left: 1.4em;
  color: var(--text-muted);
}
.list-underscore li::before {
  content: "_";
  position: absolute;
  left: 0;
  top: -0.05em;
  color: var(--text);
  font-weight: var(--weight-bold);
}

/* ---- Component interaction states (inline styles can't do :hover) ---- */
.da-btn { will-change: transform; }
.da-btn:not([aria-disabled="true"]):hover { transform: translateY(-1px); }
.da-btn:not([aria-disabled="true"]):active { transform: translateY(0) scale(0.985); }
.da-btn--primary:not([aria-disabled="true"]):hover { background: var(--grey-100) !important; border-color: var(--grey-100) !important; }
.da-btn--secondary:not([aria-disabled="true"]):hover { background: var(--surface-hover) !important; border-color: var(--border-strong) !important; }
.da-btn--ghost:not([aria-disabled="true"]):hover { background: var(--surface-hover) !important; }
.da-btn:hover .da-btn__arrow { transform: translateX(3px); }

.da-card--link { transition: border-color var(--dur) var(--ease-out), background var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); }
.da-card--link:hover { border-color: var(--border-strong); background: var(--surface-hover); transform: translateY(-2px); }
.da-card--link:hover .da-card__arrow { transform: translate(3px, -3px); }
.da-card__arrow { transition: transform var(--dur) var(--ease-out); }

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


/* ---------- Responsive (points de rupture 920px / 720px) ---------- */
.da-nav-mobile-toggle, .da-mobile-drawer { display: none; }
@media (max-width: 920px) {
  .da-nav-desktop { display: none !important; }
  .da-nav-mobile-toggle { display: inline-flex !important; }
  .da-grid-3 { grid-template-columns: 1fr 1fr !important; }
  .da-grid-4 { grid-template-columns: 1fr 1fr !important; }
  .da-solutions, .da-split, .da-contact, .da-detail, .da-legal { grid-template-columns: 1fr !important; }
  .da-solutions nav, .da-split > div:first-child, .da-legal nav { position: static !important; }
}
@media (max-width: 720px) {
  .da-stat-row { grid-template-columns: 1fr 1fr !important; }
  .da-stat-row > div { border-left: none !important; border-top: 1px solid var(--border); }
  .da-grid-3 { grid-template-columns: 1fr !important; }
  .da-grid-4 { grid-template-columns: 1fr !important; }
  .da-form-row { grid-template-columns: 1fr !important; }
}

/* ====================================================================
   ENHANCEMENTS — états gérés en JS (dan-agency.js)
   Remplacent le comportement dynamique que React assurait à l'origine.
   ==================================================================== */

/* Header collant : fond verre dépoli une fois la page défilée */
header.scrolled {
  border-bottom-color: var(--border) !important;
  background: var(--glass) !important;
  backdrop-filter: blur(14px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(120%) !important;
}

/* Tiroir de navigation mobile (injecté par dan-agency.js) */
.da-mobile-drawer {
  display: none;
  position: fixed;
  top: 104px;
  left: 0;
  right: 0;
  z-index: var(--z-header);
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4) var(--gutter) var(--space-6);
  background: var(--glass);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  border-bottom: 1px solid var(--border);
}
.da-mobile-drawer.open { display: flex; }
.da-mobile-drawer a {
  padding: var(--space-3) var(--space-2);
  font-weight: var(--weight-semibold);
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}
.da-mobile-drawer a:hover { color: var(--text); }

/* ====================================================================
   STYLES DE COMPOSANTS — extraits des styles inline du rendu React
   et dédupliqués. Chaque classe .uN regroupe un style identique
   réutilisé à travers le site.
   ==================================================================== */
.u1 {
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  z-index: var(--z-header);
  border-bottom: 1px solid transparent;
  background: transparent;
  backdrop-filter: none;
  transition: background var(--dur), border-color var(--dur);
}

.u2 {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  height: 104px;
}

.u3 {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.u4 {
  height: 64px;
  width: auto;
}

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

.u6 {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-weight: var(--weight-semibold);
  font-size: 0.95rem;
  color: var(--text-muted);
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  transition: color var(--dur);
}

.u7 {
  font-size: 0.7em;
  transform: none;
  transition: transform var(--dur);
}

.u8 {
  flex: 1 1 0%;
}

.u9 {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.6rem 1.15rem;
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--black);
  font-weight: var(--weight-semibold);
  font-size: 0.9rem;
  transition: background var(--dur);
}

.u10 {
  display: none;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  width: 42px;
  height: 42px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

.u11 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.u12 {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 104px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}

.u13 {
  padding-top: var(--space-2);
}

.u14 {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-lg);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
}

.u15 {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  transition: background var(--dur);
}

.u16 {
  display: inline-flex;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.u17 {
  display: grid;
  gap: 2px;
}

.u18 {
  font-weight: var(--weight-semibold);
  font-size: 0.95rem;
  line-height: 1.2;
}

.u19 {
  font-size: 0.78rem;
  color: var(--text-subtle);
  letter-spacing: 0.02em;
}

.u20 {
  grid-column: 1 / -1;
  margin-top: var(--space-2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--white);
  color: var(--black);
  font-weight: var(--weight-semibold);
}

.u21 {
  padding-top: 150px;
  padding-bottom: var(--space-8);
  border-bottom: 1px solid var(--border);
}

.u22 {
  font-size: var(--text-h1);
  letter-spacing: var(--tracking-tight);
  margin: var(--space-5) 0 0;
  max-width: 16ch;
}

.u23 {
  color: var(--text-subtle);
  margin-top: var(--space-4);
  font-size: 0.9rem;
}

.u24 {
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
  background: var(--white);
  color: var(--black);
}

.u25 {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  gap: var(--space-10);
  align-items: start;
}

.u26 {
  position: sticky;
  top: 110px;
  display: grid;
  gap: var(--space-2);
}

.u27 {
  margin-bottom: var(--space-2);
}

.u28 {
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.4;
  transition: color var(--dur);
}

.u29 {
  max-width: 70ch;
}

.u30 {
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  line-height: var(--leading-body);
  margin-bottom: var(--space-8);
}

.u31 {
  margin-bottom: var(--space-8);
  scroll-margin-top: 100px;
}

.u32 {
  font-size: var(--text-h3);
  letter-spacing: var(--tracking-snug);
  margin-bottom: var(--space-4);
}

.u33 {
  color: var(--text-muted);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  margin: 0 0 var(--space-3);
}

.u34 {
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
}

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

.u36 {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
}

.u37 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  font-family: var(--font-grotesk);
  font-weight: var(--weight-semibold);
  line-height: 1;
  letter-spacing: -0.01em;
  border-radius: var(--radius-pill);
  cursor: pointer;
  opacity: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur) var(--ease-out), color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
  padding: 0.75rem 1.35rem;
  font-size: 0.9375rem;
  background: var(--accent-surface);
  color: var(--accent-ink);
  border: 1px solid var(--accent-surface);
}

.u38 {
  display: inline-block;
  transition: transform var(--dur) var(--ease-out);
}

.u39 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  font-family: var(--font-grotesk);
  font-weight: var(--weight-semibold);
  line-height: 1;
  letter-spacing: -0.01em;
  border-radius: var(--radius-pill);
  cursor: pointer;
  opacity: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur) var(--ease-out), color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
  padding: 0.75rem 1.35rem;
  font-size: 0.9375rem;
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border-strong);
}

.u40 {
  border-top: 1px solid var(--border);
  background: var(--bg-elevated);
}

.u41 {
  padding-top: var(--space-10);
  padding-bottom: var(--space-8);
}

.u42 {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: var(--space-8);
}

.u43 {
  display: grid;
  gap: var(--space-4);
  align-content: start;
}

.u44 {
  height: 44px;
  width: auto;
}

.u45 {
  color: var(--text-muted);
  max-width: 34ch;
  font-weight: var(--weight-regular);
}

.u46 {
  color: var(--text-subtle);
  font-size: 0.9rem;
}

.u47 {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.u48 {
  display: grid;
  gap: var(--space-3);
  align-content: start;
}

.u49 {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-subtle);
  margin-bottom: var(--space-1);
}

.u50 {
  color: var(--text-muted);
  font-size: 0.95rem;
  transition: color var(--dur);
}

.u51 {
  color: var(--text);
  font-size: 0.95rem;
  transition: color var(--dur);
  font-weight: var(--weight-semibold);
}

.u52 {
  color: var(--text-subtle);
  font-size: 0.9rem;
  line-height: 1.5;
  margin-top: var(--space-1);
}

.u53 {
  margin-top: var(--space-9);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-faint);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: space-between;
  color: var(--text-subtle);
  font-size: 0.85rem;
}

.u54 {
  display: inline-flex;
  gap: var(--space-5);
}

.u55 {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-weight: var(--weight-semibold);
  font-size: 0.95rem;
  color: var(--text);
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  transition: color var(--dur);
}

.u56 {
  padding-top: 160px;
  padding-bottom: var(--section-y);
}

.u57 {
  font-size: var(--text-h1);
  letter-spacing: var(--tracking-tight);
  margin: var(--space-5) 0 0;
  max-width: 18ch;
}

.u58 {
  font-size: var(--text-lg);
  color: var(--text-muted);
  font-weight: var(--weight-regular);
  max-width: 56ch;
  margin-top: var(--space-5);
}

.u59 {
  display: grid;
  grid-template-columns: 1.3fr 0.85fr;
  gap: var(--space-9);
  margin-top: var(--space-9);
  align-items: start;
}

.u60 {
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--surface);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

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

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

.u63 {
  display: grid;
  gap: 0.5rem;
}

.u64 {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}

.u65 {
  width: 100%;
  font-family: var(--font-grotesk);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--text);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0.8rem 1rem;
  line-height: 1.4;
  outline: none;
  transition: border-color var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}

.u66 {
  width: 100%;
  font-family: var(--font-grotesk);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--text);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0.85rem 1rem;
  line-height: 1.4;
  min-height: 8rem;
  resize: vertical;
  outline: none;
  transition: border-color var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}

.u67 {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  font-family: var(--font-grotesk);
  font-weight: var(--weight-semibold);
  line-height: 1;
  letter-spacing: -0.01em;
  border-radius: var(--radius-pill);
  cursor: pointer;
  opacity: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur) var(--ease-out), color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
  padding: 1rem 1.9rem;
  font-size: 1.0625rem;
  background: var(--accent-surface);
  color: var(--accent-ink);
  border: 1px solid var(--accent-surface);
}

.u68 {
  font-size: 0.8rem;
  color: var(--text-subtle);
  margin: 0px;
}

.u69 {
  border-radius: var(--radius-lg);
  color: inherit;
}

.u70 {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.u71 {
  display: inline-flex;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.u72 {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-subtle);
}

.u73 {
  font-weight: var(--weight-semibold);
}

.u74 {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-elevated);
}

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

.u76 {
  font-size: 0.85rem;
  color: var(--text-subtle);
}

.u77 {
  padding-top: 160px;
  padding-bottom: var(--space-9);
  position: relative;
  overflow: hidden;
}

.u78 {
  position: absolute;
  right: -10%;
  bottom: -30%;
  width: min(60vw, 760px);
  opacity: 0.1;
  pointer-events: none;
}

.u79 {
  position: relative;
}

.u80 {
  font-size: var(--text-h1);
  letter-spacing: var(--tracking-tight);
  margin: var(--space-5) 0 0;
  max-width: 20ch;
}

.u81 {
  font-size: var(--text-lg);
  color: var(--text-muted);
  font-weight: var(--weight-regular);
  max-width: 62ch;
  margin-top: var(--space-5);
  line-height: var(--leading-body);
}

.u82 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-8);
}

.u83 {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  background: var(--surface);
}

.u84 {
  font-size: var(--text-h3);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-snug);
}

.u85 {
  color: var(--text-muted);
  margin-top: var(--space-2);
}

.u86 {
  display: grid;
  gap: var(--space-4);
  text-align: left;
  justify-items: start;
  max-width: none;
  margin-inline: 0px;
  margin-bottom: var(--space-8);
}

.u87 {
  font-size: var(--text-h2);
  letter-spacing: var(--tracking-snug);
  max-width: 20ch;
}

.u88 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

.u89 {
  opacity: 1;
  transform: translateY(0px);
  transition: opacity 0.7s var(--ease-out) 0ms, transform 0.7s var(--ease-out) 0ms;
}

.u90 {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  background: var(--surface);
  height: 100%;
  display: grid;
  gap: var(--space-3);
  align-content: start;
}

.u91 {
  display: inline-flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.u92 {
  font-size: var(--text-h4);
}

.u93 {
  color: var(--text-muted);
  font-weight: var(--weight-regular);
  margin: 0px;
  line-height: var(--leading-body);
}

.u94 {
  opacity: 1;
  transform: translateY(0px);
  transition: opacity 0.7s var(--ease-out) 70ms, transform 0.7s var(--ease-out) 70ms;
}

.u95 {
  opacity: 1;
  transform: translateY(0px);
  transition: opacity 0.7s var(--ease-out) 140ms, transform 0.7s var(--ease-out) 140ms;
}

.u96 {
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
}

.u97 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-10);
  align-items: center;
}

.u98 {
  font-size: var(--text-h2);
  letter-spacing: var(--tracking-snug);
  margin: var(--space-4) 0;
  max-width: 18ch;
}

.u99 {
  color: var(--text-muted);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
  max-width: 52ch;
}

.u100 {
  margin-top: var(--space-6);
}

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

.u102 {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  background: var(--surface);
  display: grid;
  gap: var(--space-1);
  aspect-ratio: 1 / 0.78;
  align-content: center;
}

.u103 {
  font-weight: var(--weight-bold);
  font-size: 1.05rem;
}

.u104 {
  color: var(--text-subtle);
  font-size: 0.85rem;
}

.u105 {
  background: var(--white);
  color: var(--black);
}

.u106 {
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
  display: grid;
  gap: var(--space-5);
  justify-items: center;
  text-align: center;
}

.u107 {
  font-size: var(--text-h1);
  letter-spacing: var(--tracking-tight);
  max-width: 22ch;
  color: var(--black);
}

.u108 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  font-family: var(--font-grotesk);
  font-weight: var(--weight-semibold);
  line-height: 1;
  letter-spacing: -0.01em;
  border-radius: var(--radius-pill);
  cursor: pointer;
  opacity: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur) var(--ease-out), color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
  padding: 1rem 1.9rem;
  font-size: 1.0625rem;
  background: var(--accent-surface);
  color: var(--accent-ink);
  border: 1px solid var(--accent-surface);
}

.u109 {
  position: relative;
  overflow: hidden;
  padding-top: 180px;
  padding-bottom: var(--space-10);
}

.u110 {
  position: absolute;
  right: -10%;
  top: -2%;
  width: min(72vw, 940px);
  opacity: 0.4;
  pointer-events: none;
  filter: brightness(1.8) contrast(1.15);
  mask-image: radial-gradient(closest-side, rgb(0, 0, 0) 60%, transparent 100%);
}

.u111 {
  max-width: 20ch;
}

.u112 {
  opacity: 1;
  transform: translateY(0px);
  transition: opacity 0.7s var(--ease-out) 60ms, transform 0.7s var(--ease-out) 60ms;
  font-size: var(--text-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: var(--space-5) 0 0;
  max-width: 16ch;
}

.u113 {
  color: var(--text-subtle);
}

.u114 {
  opacity: 1;
  transform: translateY(0px);
  transition: opacity 0.7s var(--ease-out) 140ms, transform 0.7s var(--ease-out) 140ms;
  font-size: var(--text-lg);
  color: var(--text-muted);
  font-weight: var(--weight-regular);
  max-width: 58ch;
  margin-top: var(--space-6);
  line-height: var(--leading-body);
}

.u115 {
  opacity: 1;
  transform: translateY(0px);
  transition: opacity 0.7s var(--ease-out) 220ms, transform 0.7s var(--ease-out) 220ms;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-7);
}

.u116 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  font-family: var(--font-grotesk);
  font-weight: var(--weight-semibold);
  line-height: 1;
  letter-spacing: -0.01em;
  border-radius: var(--radius-pill);
  cursor: pointer;
  opacity: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur) var(--ease-out), color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
  padding: 1rem 1.9rem;
  font-size: 1.0625rem;
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border-strong);
}

.u117 {
  margin-top: var(--space-10);
}

.u118 {
  opacity: 1;
  transform: translateY(0px);
  transition: opacity 0.7s var(--ease-out) 0ms, transform 0.7s var(--ease-out) 0ms;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.u119 {
  padding: var(--space-6) var(--space-5);
  border-left: none;
}

.u120 {
  display: grid;
  gap: 0.35rem;
}

.u121 {
  font-size: clamp(2.25rem, 1.4rem + 3vw, 3.5rem);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  line-height: 1;
}

.u122 {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--text);
}

.u123 {
  font-size: var(--text-sm);
  color: var(--text-subtle);
  font-weight: var(--weight-regular);
}

.u124 {
  padding: var(--space-6) var(--space-5);
  border-left: 1px solid var(--border);
}

.u125 {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-6);
  flex-wrap: wrap;
  margin-bottom: var(--space-8);
}

.u126 {
  font-size: var(--text-lg);
  color: var(--text-muted);
  font-weight: var(--weight-regular);
  max-width: 46rem;
}

.u127 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  font-family: var(--font-grotesk);
  font-weight: var(--weight-semibold);
  line-height: 1;
  letter-spacing: -0.01em;
  border-radius: var(--radius-pill);
  cursor: pointer;
  opacity: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur) var(--ease-out), color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
  padding: 0.75rem 1.35rem;
  font-size: 0.9375rem;
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border-strong);
  margin-bottom: var(--space-8);
}

.u128 {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  color: inherit;
  text-decoration: none;
  box-shadow: var(--shadow-edge);
  height: 100%;
}

.u129 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  flex-shrink: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text);
}

.u130 {
  font-size: var(--text-h3);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
}

.u131 {
  color: var(--text-muted);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
  margin: 0px;
}

.u132 {
  margin-top: auto;
  padding-top: var(--space-2);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
}

.u133 {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: var(--space-10);
  align-items: start;
}

.u134 {
  position: sticky;
  top: 110px;
}

.u135 {
  font-size: var(--text-h2);
  letter-spacing: var(--tracking-snug);
  margin: var(--space-4) 0;
  max-width: 16ch;
}

.u136 {
  color: var(--text-muted);
  font-weight: var(--weight-regular);
  max-width: 40ch;
  margin-bottom: var(--space-6);
}

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

.u138 {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-5);
  padding: var(--space-6);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.u139 {
  font-family: var(--font-grotesk);
  font-weight: var(--weight-bold);
  font-size: 1.5rem;
  color: var(--text-subtle);
}

.u140 {
  font-size: var(--text-h4);
  margin-bottom: var(--space-2);
}

.u141 {
  opacity: 1;
  transform: translateY(0px);
  transition: opacity 0.7s var(--ease-out) 60ms, transform 0.7s var(--ease-out) 60ms;
}

.u142 {
  opacity: 1;
  transform: translateY(0px);
  transition: opacity 0.7s var(--ease-out) 120ms, transform 0.7s var(--ease-out) 120ms;
}

.u143 {
  opacity: 1;
  transform: translateY(0px);
  transition: opacity 0.7s var(--ease-out) 180ms, transform 0.7s var(--ease-out) 180ms;
}

.u144 {
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
  background: var(--bg-elevated);
}

.u145 {
  margin-top: var(--space-5);
  margin-bottom: var(--space-7);
}

.u146 {
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--bg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.u147 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border);
}

.u148 {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: var(--weight-semibold);
  font-size: 0.95rem;
}

.u149 {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  color: var(--text-subtle);
}

.u150 {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--white);
  display: inline-block;
}

.u151 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1px;
  background: var(--border);
  border-bottom: 1px solid var(--border);
}

.u152 {
  background: var(--bg);
  padding: var(--space-4) var(--space-5);
}

.u153 {
  font-size: 1.7rem;
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
}

.u154 {
  font-size: 0.78rem;
  color: var(--text-subtle);
}

.u155 {
  padding: var(--space-3) var(--space-5) var(--space-5);
}

.u156 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 0.7rem 0px;
  border-bottom: 1px solid var(--border-faint);
}

.u157 {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.88rem;
  color: var(--text-muted);
}

.u158 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  color: var(--white);
}

.u159 {
  font-size: 0.8rem;
  font-weight: var(--weight-semibold);
  color: var(--text);
  white-space: nowrap;
}

.u160 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 0.7rem 0px;
  border-bottom: none;
}

.u161 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  color: var(--text-subtle);
}

.u162 {
  font-size: 0.8rem;
  font-weight: var(--weight-semibold);
  color: var(--text-subtle);
  white-space: nowrap;
}

.u163 {
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: clamp(2rem, 1rem + 4vw, 4rem);
  background: var(--surface-raised);
  display: grid;
  gap: var(--space-6);
  justify-items: center;
  text-align: center;
}

.u164 {
  font-size: var(--text-h2);
  letter-spacing: var(--tracking-snug);
  max-width: 24ch;
}

.u165 {
  color: var(--text-muted);
  font-weight: var(--weight-regular);
  max-width: 62ch;
}

.u166 {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
  margin-top: var(--space-2);
}

.u167 {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--font-grotesk);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: 0.4em 0.75em;
  border-radius: var(--radius-pill);
  line-height: 1;
  white-space: nowrap;
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
}

.u168 {
  background: var(--bg-elevated);
  border-top: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}

.u169 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(70vw, 760px);
  opacity: 0.08;
  pointer-events: none;
}

.u170 {
  position: relative;
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
  display: grid;
  gap: var(--space-6);
  justify-items: center;
  text-align: center;
}

.u171 {
  font-size: var(--text-h1);
  letter-spacing: var(--tracking-tight);
  max-width: 20ch;
}

.u172 {
  color: var(--text-muted);
  max-width: 52ch;
  font-weight: var(--weight-regular);
}

.u173 {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
}

.u174 {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0px;
  margin: 0 0 var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.u175 {
  padding: 0.7rem 1rem;
  font-weight: var(--weight-semibold);
  font-size: 0.9rem;
  border-top: none;
  border-right: 1px solid var(--border);
  white-space: nowrap;
}

.u176 {
  padding: 0.7rem 1rem;
  margin: 0px;
  color: var(--text-muted);
  font-weight: var(--weight-regular);
  font-size: 0.95rem;
  border-top: none;
}

.u177 {
  padding: 0.7rem 1rem;
  font-weight: var(--weight-semibold);
  font-size: 0.9rem;
  border-top: 1px solid var(--border);
  border-right: 1px solid var(--border);
  white-space: nowrap;
}

.u178 {
  padding: 0.7rem 1rem;
  margin: 0px;
  color: var(--text-muted);
  font-weight: var(--weight-regular);
  font-size: 0.95rem;
  border-top: 1px solid var(--border);
}

.u179 {
  position: relative;
  overflow: hidden;
  padding-top: 150px;
  padding-bottom: var(--space-10);
}

.u180 {
  position: absolute;
  right: -8%;
  top: -6%;
  width: min(52vw, 620px);
  opacity: 0.12;
  pointer-events: none;
  mask-image: radial-gradient(closest-side, rgb(0, 0, 0) 55%, transparent 100%);
}

.u181 {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.85rem;
  color: var(--text-subtle);
  margin-bottom: var(--space-6);
}

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

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

.u184 {
  display: inline-flex;
  width: 60px;
  height: 60px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.u185 {
  font-size: var(--text-h1);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
  max-width: 18ch;
}

.u186 {
  font-size: var(--text-lg);
  color: var(--text-muted);
  font-weight: var(--weight-regular);
  max-width: 60ch;
  margin-top: var(--space-5);
  line-height: var(--leading-body);
}

.u187 {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-7);
}

.u188 {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: var(--space-10);
  align-items: start;
}

.u189 {
  font-size: var(--text-h2);
  letter-spacing: var(--tracking-snug);
  margin: var(--space-4) 0 0;
  max-width: 14ch;
}

.u190 {
  list-style: none;
  margin: 0px;
  padding: 0px;
  display: grid;
  gap: var(--space-1);
}

.u191 {
  opacity: 1;
  transform: translateY(0px);
  transition: opacity 0.7s var(--ease-out) 0ms, transform 0.7s var(--ease-out) 0ms;
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border);
}

.u192 {
  font-family: var(--font-grotesk);
  font-weight: var(--weight-bold);
  color: var(--text-subtle);
  font-size: 0.95rem;
  min-width: 2ch;
}

.u193 {
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
}

.u194 {
  opacity: 1;
  transform: translateY(0px);
  transition: opacity 0.7s var(--ease-out) 45ms, transform 0.7s var(--ease-out) 45ms;
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border);
}

.u195 {
  opacity: 1;
  transform: translateY(0px);
  transition: opacity 0.7s var(--ease-out) 90ms, transform 0.7s var(--ease-out) 90ms;
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border);
}

.u196 {
  opacity: 1;
  transform: translateY(0px);
  transition: opacity 0.7s var(--ease-out) 135ms, transform 0.7s var(--ease-out) 135ms;
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border);
}

.u197 {
  opacity: 1;
  transform: translateY(0px);
  transition: opacity 0.7s var(--ease-out) 180ms, transform 0.7s var(--ease-out) 180ms;
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border);
}

.u198 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
}

.u199 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.u200 {
  display: inline-flex;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.u201 {
  font-weight: var(--weight-bold);
  color: var(--text-subtle);
}

.u202 {
  opacity: 1;
  transform: translateY(0px);
  transition: opacity 0.7s var(--ease-out) 210ms, transform 0.7s var(--ease-out) 210ms;
}

.u203 {
  background: var(--white);
  color: var(--black);
  position: relative;
  overflow: hidden;
}

.u204 {
  position: absolute;
  left: -7%;
  bottom: -22%;
  width: min(38vw, 380px);
  opacity: 0.08;
  pointer-events: none;
}

.u205 {
  position: relative;
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
}

.u206 {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--space-9);
  align-items: center;
}

.u207 {
  font-size: var(--text-h2);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-snug);
  line-height: var(--leading-snug);
  color: var(--black);
  max-width: 20ch;
}

.u208 {
  font-size: var(--text-lg);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
  color: var(--grey-500);
  max-width: 56ch;
}

.u209 {
  margin-top: var(--space-2);
}

.u210 {
  background: var(--black);
  color: var(--white);
  border-radius: var(--radius-xl);
  padding: var(--space-7);
  box-shadow: var(--shadow-lg);
}

.u211 {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: var(--space-5);
}

.u212 {
  display: grid;
  gap: 0px;
}

.u213 {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-4) 0;
  border-top: none;
}

.u214 {
  display: inline-flex;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-md);
  color: var(--white);
}

.u215 {
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  line-height: 1.3;
  color: var(--white);
}

.u216 {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-4) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.u217 {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-7);
}

.u218 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  font-family: var(--font-grotesk);
  font-weight: var(--weight-semibold);
  line-height: 1;
  letter-spacing: -0.01em;
  border-radius: var(--radius-pill);
  cursor: pointer;
  opacity: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur) var(--ease-out), color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
  padding: 0.75rem 1.35rem;
  font-size: 0.9375rem;
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border-strong);
  margin-bottom: var(--space-7);
}

.u219 {
  opacity: 1;
  transform: translateY(0px);
  transition: opacity 0.7s var(--ease-out) 225ms, transform 0.7s var(--ease-out) 225ms;
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border);
}

.u220 {
  position: relative;
  overflow: hidden;
  padding-top: 160px;
  padding-bottom: var(--space-9);
}

.u221 {
  position: absolute;
  right: -12%;
  top: 10%;
  width: min(56vw, 720px);
  opacity: 0.1;
  pointer-events: none;
}

.u222 {
  font-size: var(--text-lg);
  color: var(--text-muted);
  font-weight: var(--weight-regular);
  max-width: 60ch;
  margin-top: var(--space-5);
}

.u223 {
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--surface);
  padding: clamp(2rem, 1rem + 4vw, 3.5rem);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-6);
  flex-wrap: wrap;
}

.u224 {
  font-size: var(--text-h2);
  letter-spacing: var(--tracking-snug);
  max-width: 22ch;
}

.u225 {
  color: var(--text-muted);
  font-weight: var(--weight-regular);
  margin-top: var(--space-3);
  max-width: 50ch;
}

/* ====================================================================
   ANIMATIONS — restituées via JS (dan-agency.js)
   ==================================================================== */

/* Reveal au scroll : l'état "caché" ne s'applique QUE si JS est actif,
   pour que le contenu reste visible sans JavaScript. La transition (et son
   délai en cascade) est portée par la classe .uNN d'origine de l'élément. */
html.js .reveal:not(.is-visible) {
  opacity: 0;
  transform: translateY(22px);
}
@media (prefers-reduced-motion: reduce) {
  html.js .reveal:not(.is-visible) { opacity: 1; transform: none; }
}

/* Méga-menu "Solutions" : état ouvert (survol géré en JS) */
.da-mega.da-mega-open {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.da-chevron-open {
  transform: rotate(180deg);
  transition: transform var(--dur) var(--ease-out);
}