/* ==========================================================================
   UPGARD — addons.css
   --------------------------------------------------------------------------
   Every style added during the marketing redesign lives in this file.
   Nothing in main.min.css / plugins.min.css was modified.

   Load order on every page (in <head>):
     loader.min.css → plugins.min.css → main.min.css → addons.css

   All new classes are prefixed "ug-" so they never collide with the
   Azurio template ("mxd-") classes.

   CONTENTS
     01. Tokens
     02. Base helpers (wrap, section, typography, eyebrow, buttons, badges)
     03. Reveal animations
     04. Header inline navigation + floating CTA
     05. Hero additions (badge, CTA group, trust line)
     06. Marquee (industries)
     07. Facts / counters band
     08. Before / After comparison
     09. How it works (steps loop)
     10. Tabs
     11. Product UI mockups (window, phone, bars, KPI tiles, charts)
     12. Feature bento cards
     13. Roles
     14. Security grid
     15. FAQ accordion
     16. CTA band
     17. Pricing additions
     18. Documentation page
     19. Contact / services / about / feature pages additions
     20. Template overrides (small layout fixes)
     21. Responsive
     22. Reduced motion
   ========================================================================== */


/* ==========================================================================
   01. Tokens
   ========================================================================== */
:root {
  --ug-accent: #006d78;
  --ug-accent-rgb: 0, 109, 120;
  --ug-accent-bright: #2ec5d1;
  --ug-accent-bright-rgb: 46, 197, 209;
  --ug-accent-soft: rgba(0, 109, 120, .16);
  --ug-bg: #0f0f0f;
  --ug-card: #151517;
  --ug-card-2: #1b1b1e;
  --ug-line: rgba(255, 255, 255, .08);
  --ug-line-2: rgba(255, 255, 255, .14);
  --ug-text: #ffffff;
  --ug-text-2: #a7abb6;
  --ug-text-3: #6d717c;
  --ug-ok: #22c55e;
  --ug-warn: #f59e0b;
  --ug-danger: #ef4444;
  --ug-info: #0ea5e9;
  --ug-orange: #f97316;
  --ug-radius: 2.4rem;
  --ug-radius-s: 1.4rem;
  --ug-radius-xs: .8rem;
  --ug-ease: cubic-bezier(.22, 1, .36, 1);
  --ug-font: var(--_font-default, "Manrope", sans-serif);
  --ug-mono: var(--_font-accent, "JetBrains Mono", monospace);
}


/* ==========================================================================
   02. Base helpers
   ========================================================================== */
.ug-section {
  position: relative;
  width: 100%;
  padding: 9rem 0;
}
.ug-section--tight { padding: 6rem 0; }
.ug-section--flush-top { padding-top: 0; }
.ug-section--flush-bottom { padding-bottom: 0; }

.ug-wrap {
  position: relative;
  width: 100%;
  padding: 0 2rem;
  margin: 0 auto;
}

.ug-head {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-bottom: 5rem;
  max-width: 92rem;
}
.ug-head--center {
  align-items: center;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.ug-head--split {
  max-width: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.4rem;
  align-items: end;
}

.ug-title {
  font: normal 600 3.6rem/1.08 var(--ug-font);
  letter-spacing: -.12rem;
  color: var(--ug-text);
  margin: 0;
}
.ug-title--xl { font-size: 4.2rem; }
.ug-title em,
.ug-title .ug-grad {
  font-style: normal;
  background: linear-gradient(100deg, var(--ug-accent-bright) 0%, #9ff3f8 45%, var(--ug-accent-bright) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: ug-shine 6s linear infinite;
}
.ug-lead {
  font: normal 500 1.7rem/1.6 var(--ug-font);
  color: var(--ug-text-2);
  margin: 0;
  max-width: 64rem;
}
.ug-lead strong { color: var(--ug-text); font-weight: 700; }
.ug-muted { color: var(--ug-text-3); }
.ug-accent-text { color: var(--ug-accent-bright); }

/* eyebrow pill */
.ug-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  width: fit-content;
  padding: .7rem 1.4rem .7rem 1.2rem;
  border: 1px solid var(--ug-line-2);
  border-radius: 10rem;
  background: rgba(255, 255, 255, .03);
  font: normal 500 1.15rem/1 var(--ug-mono);
  letter-spacing: .06rem;
  text-transform: uppercase;
  color: var(--ug-text-2);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.ug-eyebrow .ug-dot,
.ug-dot {
  position: relative;
  display: inline-block;
  width: .8rem;
  height: .8rem;
  border-radius: 50%;
  background: var(--ug-accent-bright);
  flex: 0 0 auto;
}
.ug-dot::after {
  content: "";
  position: absolute;
  inset: -.4rem;
  border-radius: 50%;
  border: 1px solid var(--ug-accent-bright);
  animation: ug-ping 2s var(--ug-ease) infinite;
}
.ug-eyebrow--accent {
  border-color: rgba(var(--ug-accent-bright-rgb), .35);
  background: rgba(var(--ug-accent-rgb), .18);
  color: #cdf7fa;
}

/* buttons */
.ug-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  height: 5.4rem;
  padding: 0 2.6rem;
  border-radius: 10rem;
  font: normal 700 1.5rem/1 var(--ug-font);
  letter-spacing: -.01rem;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: transform .4s var(--ug-ease), box-shadow .4s var(--ug-ease), background-color .3s, color .3s, border-color .3s;
}
.ug-btn i { font-size: 1.8rem; transition: transform .4s var(--ug-ease); }
.ug-btn:hover i { transform: translateX(.4rem); }
.ug-btn--primary {
  background: var(--ug-accent);
  color: #fff;
  box-shadow: 0 0 0 1px rgba(var(--ug-accent-bright-rgb), .45) inset, 0 1rem 3rem -1rem rgba(var(--ug-accent-bright-rgb), .55);
}
.ug-btn--primary::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(120deg, transparent 20%, rgba(255, 255, 255, .28) 50%, transparent 80%);
  transform: translateX(-120%);
  transition: transform .8s var(--ug-ease);
}
.ug-btn--primary:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px rgba(var(--ug-accent-bright-rgb), .7) inset, 0 1.6rem 4rem -1rem rgba(var(--ug-accent-bright-rgb), .7);
}
.ug-btn--primary:hover::before { transform: translateX(120%); }
.ug-btn--ghost {
  background: rgba(255, 255, 255, .04);
  color: var(--ug-text);
  border: 1px solid var(--ug-line-2);
}
.ug-btn--ghost:hover {
  color: var(--ug-text);
  background: rgba(255, 255, 255, .09);
  border-color: rgba(255, 255, 255, .28);
  transform: translateY(-2px);
}
.ug-btn--light {
  background: #fff;
  color: #0f0f0f;
}
.ug-btn--light:hover { color: #0f0f0f; transform: translateY(-2px); box-shadow: 0 1.4rem 3.4rem -1rem rgba(255, 255, 255, .35); }
.ug-btn--small { height: 4.4rem; padding: 0 2rem; font-size: 1.4rem; }
.ug-btn--block { width: 100%; }

.ug-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  align-items: center;
}

/* small inline link with arrow */
.ug-link {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font: normal 700 1.5rem/1.2 var(--ug-font);
  color: var(--ug-accent-bright);
  text-decoration: none;
}
.ug-link i { transition: transform .35s var(--ug-ease); }
.ug-link:hover { color: #9ff3f8; }
.ug-link:hover i { transform: translateX(.4rem); }

/* badges / chips */
.ug-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  height: 2.6rem;
  padding: 0 1rem;
  border-radius: 10rem;
  font: normal 600 1.15rem/1 var(--ug-font);
  white-space: nowrap;
  background: rgba(255, 255, 255, .06);
  color: var(--ug-text-2);
  border: 1px solid var(--ug-line);
}
.ug-badge--ok { background: rgba(34, 197, 94, .12); color: #6ee7a0; border-color: rgba(34, 197, 94, .25); }
.ug-badge--warn { background: rgba(245, 158, 11, .12); color: #fbbf5b; border-color: rgba(245, 158, 11, .25); }
.ug-badge--danger { background: rgba(239, 68, 68, .12); color: #fb8a8a; border-color: rgba(239, 68, 68, .28); }
.ug-badge--info { background: rgba(14, 165, 233, .12); color: #7dd3fc; border-color: rgba(14, 165, 233, .25); }
.ug-badge--accent { background: rgba(var(--ug-accent-bright-rgb), .12); color: #8ce9f0; border-color: rgba(var(--ug-accent-bright-rgb), .3); }

.ug-chips { display: flex; flex-wrap: wrap; gap: .8rem; }
.ug-chip {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .7rem 1.2rem;
  border-radius: 10rem;
  border: 1px solid var(--ug-line-2);
  font: normal 600 1.3rem/1 var(--ug-font);
  color: var(--ug-text-2);
  background: rgba(255, 255, 255, .02);
}
.ug-chip i { color: var(--ug-accent-bright); font-size: 1.5rem; }

/* icon tile */
.ug-icon {
  display: inline-grid;
  place-items: center;
  width: 5rem;
  height: 5rem;
  border-radius: 1.4rem;
  font-size: 2.4rem;
  color: var(--ug-accent-bright);
  background: linear-gradient(145deg, rgba(var(--ug-accent-rgb), .38), rgba(var(--ug-accent-rgb), .08));
  box-shadow: 0 0 0 1px rgba(var(--ug-accent-bright-rgb), .25) inset;
  flex: 0 0 auto;
}
.ug-icon--s { width: 3.8rem; height: 3.8rem; font-size: 1.9rem; border-radius: 1rem; }

/* check / cross lists */
.ug-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}
.ug-list li {
  position: relative;
  display: flex;
  gap: 1.2rem;
  align-items: flex-start;
  font: normal 500 1.6rem/1.5 var(--ug-font);
  color: var(--ug-text-2);
}
.ug-list li strong { color: var(--ug-text); font-weight: 700; }
.ug-list li > i {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  margin-top: .1rem;
  border-radius: 50%;
  font-size: 1.3rem;
  background: rgba(var(--ug-accent-bright-rgb), .14);
  color: var(--ug-accent-bright);
}
.ug-list--cross li > i { background: rgba(239, 68, 68, .12); color: #fb8a8a; }

/* decorative backgrounds */
.ug-gridbg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 6rem 6rem;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 20%, transparent 75%);
}
.ug-orb {
  position: absolute;
  width: 60rem;
  height: 60rem;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(var(--ug-accent-rgb), .45) 0%, rgba(var(--ug-accent-rgb), 0) 65%);
  filter: blur(20px);
  opacity: .7;
  animation: ug-float 14s ease-in-out infinite;
}
.ug-orb--r { right: -20rem; top: -10rem; }
.ug-orb--l { left: -25rem; bottom: -15rem; animation-delay: -6s; }

.ug-divider-line {
  height: 1px;
  width: 100%;
  background: linear-gradient(90deg, transparent, var(--ug-line-2), transparent);
}


/* ==========================================================================
   03. Reveal animations  (driven by js/addons.js — adds .is-in)
   ========================================================================== */
.ug-js [data-ug-reveal] {
  opacity: 0;
  transform: translate3d(0, 3.2rem, 0);
  transition: opacity .9s var(--ug-ease), transform .9s var(--ug-ease);
  transition-delay: var(--d, 0s);
}
.ug-js [data-ug-reveal="left"] { transform: translate3d(-3.2rem, 0, 0); }
.ug-js [data-ug-reveal="right"] { transform: translate3d(3.2rem, 0, 0); }
.ug-js [data-ug-reveal="zoom"] { transform: scale(.94); }
.ug-js [data-ug-reveal].is-in {
  opacity: 1;
  transform: none;
}

@keyframes ug-ping {
  0% { transform: scale(.6); opacity: .9; }
  80%, 100% { transform: scale(1.8); opacity: 0; }
}
@keyframes ug-shine {
  to { background-position: -200% 0; }
}
@keyframes ug-float {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(3rem, -3rem, 0) scale(1.08); }
}
@keyframes ug-marquee {
  to { transform: translate3d(-50%, 0, 0); }
}
@keyframes ug-blink {
  50% { opacity: 0; }
}
@keyframes ug-scan {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}
@keyframes ug-spin {
  to { transform: rotate(360deg); }
}
@keyframes ug-pulse-ring {
  0% { box-shadow: 0 0 0 0 rgba(var(--ug-accent-bright-rgb), .5); }
  100% { box-shadow: 0 0 0 1.4rem rgba(var(--ug-accent-bright-rgb), 0); }
}


/* ==========================================================================
   04. Header inline navigation + floating CTA
   ========================================================================== */
.ug-header-nav {
  display: none;
  align-items: center;
  gap: .4rem;
  margin: 0;
  padding: .5rem;
  list-style: none;
  border: 1px solid var(--ug-line);
  border-radius: 10rem;
  background: rgba(20, 20, 22, .55);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.ug-header-nav a {
  display: block;
  padding: 1rem 1.6rem;
  border-radius: 10rem;
  font: normal 600 1.4rem/1 var(--ug-font);
  color: var(--ug-text-2);
  text-decoration: none;
  transition: color .25s, background-color .25s;
}
.ug-header-nav a:hover,
.ug-header-nav a.is-active {
  color: var(--ug-text);
  background: rgba(255, 255, 255, .07);
}
.mxd-header__controls .ug-header-cta { display: none; }

/* floating CTA (appears once the header has scrolled away) */
.ug-float-cta {
  position: fixed;
  z-index: 90;
  left: 1.2rem;
  right: 1.2rem;
  bottom: 1.2rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .8rem .8rem .8rem 1.8rem;
  border-radius: 10rem;
  border: 1px solid var(--ug-line-2);
  background: rgba(18, 18, 20, .82);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 2rem 5rem -1.5rem rgba(0, 0, 0, .8);
  transform: translate3d(0, 140%, 0);
  opacity: 0;
  transition: transform .6s var(--ug-ease), opacity .4s;
  pointer-events: none;
}
.ug-float-cta.is-visible {
  transform: none;
  opacity: 1;
  pointer-events: auto;
}
.ug-float-cta__text {
  flex: 1 1 auto;
  min-width: 0;
  font: normal 600 1.3rem/1.3 var(--ug-font);
  color: var(--ug-text-2);
}
.ug-float-cta__text strong { display: block; color: var(--ug-text); font-size: 1.4rem; }
.ug-float-cta .ug-btn { height: 4.4rem; padding: 0 1.8rem; font-size: 1.4rem; }


/* ==========================================================================
   05. Hero additions
   ========================================================================== */
.ug-hero-badge {
  display: flex;
  justify-content: center;
  margin-bottom: 2.6rem;
}
.ug-hero-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  margin-top: 3.4rem;
  position: relative;
  z-index: 3;
}
.ug-hero-cta .ug-btns { justify-content: center; }
.ug-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .8rem 2.2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ug-trust li {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  font: normal 600 1.3rem/1.2 var(--ug-font);
  color: var(--ug-text-2);
}
.ug-trust li i { color: var(--ug-accent-bright); font-size: 1.6rem; }

/* inner-page hero helpers */
.ug-inner-cta { margin-top: 3.2rem; }


/* ==========================================================================
   06. Marquee (industries)
   ========================================================================== */
.ug-marquee-block {
  position: relative;
  padding: 4rem 0;
  border-top: 1px solid var(--ug-line);
  border-bottom: 1px solid var(--ug-line);
  overflow: hidden;
}
.ug-marquee-block__label {
  text-align: center;
  margin: 0 0 2.6rem;
  font: normal 500 1.2rem/1 var(--ug-mono);
  letter-spacing: .08rem;
  text-transform: uppercase;
  color: var(--ug-text-3);
}
.ug-marquee {
  display: flex;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.ug-marquee__track {
  display: flex;
  flex: 0 0 auto;
  gap: 1.2rem;
  padding-right: 1.2rem;
  animation: ug-marquee 40s linear infinite;
}
.ug-marquee:hover .ug-marquee__track { animation-play-state: paused; }
.ug-marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1.4rem 2.2rem;
  border-radius: 10rem;
  border: 1px solid var(--ug-line);
  background: var(--ug-card);
  font: normal 600 1.6rem/1 var(--ug-font);
  color: var(--ug-text);
  white-space: nowrap;
}
.ug-marquee__item i { font-size: 2.2rem; color: var(--ug-accent-bright); }


/* ==========================================================================
   07. Facts / counters band
   ========================================================================== */
.ug-facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border: 1px solid var(--ug-line);
  border-radius: var(--ug-radius);
  background: linear-gradient(180deg, rgba(255, 255, 255, .025), rgba(255, 255, 255, 0));
  overflow: hidden;
}
.ug-fact {
  position: relative;
  padding: 3rem 2.4rem;
  border-right: 1px solid var(--ug-line);
  border-bottom: 1px solid var(--ug-line);
}
.ug-fact__value {
  display: flex;
  align-items: baseline;
  gap: .3rem;
  font: normal 700 4.8rem/1 var(--ug-font);
  letter-spacing: -.2rem;
  color: var(--ug-text);
}
.ug-fact__value small {
  font-size: 2.2rem;
  letter-spacing: -.05rem;
  color: var(--ug-accent-bright);
}
.ug-fact__label {
  margin: 1.2rem 0 0;
  font: normal 600 1.5rem/1.35 var(--ug-font);
  color: var(--ug-text);
}
.ug-fact__sub {
  margin: .6rem 0 0;
  font: normal 500 1.3rem/1.45 var(--ug-font);
  color: var(--ug-text-3);
}


/* ==========================================================================
   08. Before / After comparison
   ========================================================================== */
.ug-compare {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.6rem;
}
.ug-compare__col {
  position: relative;
  padding: 3.4rem 2.6rem;
  border-radius: var(--ug-radius);
  border: 1px solid var(--ug-line);
  background: var(--ug-card);
  overflow: hidden;
}
.ug-compare__col--after {
  border-color: rgba(var(--ug-accent-bright-rgb), .35);
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(var(--ug-accent-rgb), .35), transparent 60%),
    var(--ug-card);
  box-shadow: 0 3rem 8rem -3rem rgba(var(--ug-accent-rgb), .6);
}
.ug-compare__tag {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  margin-bottom: 2.6rem;
  font: normal 600 1.2rem/1 var(--ug-mono);
  letter-spacing: .06rem;
  text-transform: uppercase;
  color: var(--ug-text-3);
}
.ug-compare__col--after .ug-compare__tag { color: var(--ug-accent-bright); }
.ug-compare__title {
  margin: 0 0 2.6rem;
  font: normal 700 2.6rem/1.15 var(--ug-font);
  letter-spacing: -.06rem;
  color: var(--ug-text);
}
.ug-compare__col--before .ug-list li { color: var(--ug-text-3); }


/* ==========================================================================
   09. How it works (steps loop)
   ========================================================================== */
.ug-steps {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.6rem;
  counter-reset: ugstep;
}
.ug-steps__rail {
  display: none;
}
.ug-step {
  position: relative;
  padding: 2.8rem 2.4rem;
  border-radius: var(--ug-radius);
  border: 1px solid var(--ug-line);
  background: var(--ug-card);
  transition: border-color .5s, transform .5s var(--ug-ease), background-color .5s;
}
.ug-step:hover {
  border-color: rgba(var(--ug-accent-bright-rgb), .4);
  transform: translateY(-.4rem);
}
.ug-step__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2.4rem;
}
.ug-step__num {
  font: normal 500 1.3rem/1 var(--ug-mono);
  color: var(--ug-text-3);
}
.ug-step__title {
  margin: 0 0 1rem;
  font: normal 700 2.2rem/1.15 var(--ug-font);
  letter-spacing: -.04rem;
  color: var(--ug-text);
}
.ug-step__text {
  margin: 0;
  font: normal 500 1.5rem/1.55 var(--ug-font);
  color: var(--ug-text-2);
}
.ug-step__who {
  display: inline-flex;
  gap: .6rem;
  align-items: center;
  margin-top: 1.8rem;
  font: normal 600 1.2rem/1 var(--ug-mono);
  text-transform: uppercase;
  letter-spacing: .04rem;
  color: var(--ug-accent-bright);
}
.ug-step.is-in .ug-icon { animation: ug-pulse-ring 1.6s var(--ug-ease) 1; animation-delay: var(--d, 0s); }

.ug-loop-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 3rem;
  font: normal 600 1.4rem/1.4 var(--ug-font);
  color: var(--ug-text-2);
  text-align: center;
}
.ug-loop-note i { color: var(--ug-accent-bright); font-size: 2rem; animation: ug-spin 8s linear infinite; }


/* ==========================================================================
   10. Tabs
   ========================================================================== */
.ug-tabs__list {
  display: inline-flex;
  flex-wrap: wrap;
  gap: .4rem;
  padding: .5rem;
  margin: 0 0 3.4rem;
  border: 1px solid var(--ug-line);
  border-radius: 1.8rem;
  background: var(--ug-card);
  list-style: none;
}
.ug-tabs__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  padding: 1.2rem 1.8rem;
  border: 0;
  border-radius: 1.4rem;
  background: transparent;
  font: normal 700 1.45rem/1 var(--ug-font);
  color: var(--ug-text-2);
  cursor: pointer;
  overflow: hidden;
  transition: color .3s, background-color .3s;
}
.ug-tabs__btn i { font-size: 1.8rem; }
.ug-tabs__btn:hover { color: var(--ug-text); }
.ug-tabs__btn.is-active {
  color: #fff;
  background: var(--ug-accent);
  box-shadow: 0 .8rem 2.4rem -1rem rgba(var(--ug-accent-bright-rgb), .8);
}
/* autoplay progress */
.ug-tabs__btn .ug-tabs__progress {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  background: rgba(255, 255, 255, .7);
}
.ug-tabs__panels {
  display: grid;
}
.ug-tabs__panel {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(1.6rem);
  transition: opacity .5s var(--ug-ease), transform .6s var(--ug-ease), visibility 0s linear .5s;
}
.ug-tabs__panel.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .6s var(--ug-ease), transform .7s var(--ug-ease), visibility 0s;
}

.ug-showcase {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3.6rem;
  align-items: center;
}
.ug-showcase__copy h3 {
  margin: 0 0 1.6rem;
  font: normal 700 3rem/1.12 var(--ug-font);
  letter-spacing: -.08rem;
  color: var(--ug-text);
}
.ug-showcase__copy .ug-lead { margin-bottom: 2.8rem; }
.ug-showcase__copy .ug-list { margin-bottom: 3rem; }


/* ==========================================================================
   11. Product UI mockups
   ========================================================================== */
.ug-mock {
  position: relative;
  border-radius: 2rem;
  border: 1px solid var(--ug-line-2);
  background: linear-gradient(180deg, #19191c, #121214);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, .6),
    0 4rem 10rem -3rem rgba(0, 0, 0, .9),
    0 0 12rem -4rem rgba(var(--ug-accent-rgb), .7);
  overflow: hidden;
  font-family: var(--ug-font);
  color: var(--ug-text);
  text-align: left;
}
.ug-mock::before {
  /* glossy top edge */
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent);
}
.ug-mock__bar {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  padding: 1.2rem 1.6rem;
  border-bottom: 1px solid var(--ug-line);
  background: rgba(255, 255, 255, .02);
}
.ug-mock__dots { display: flex; gap: .6rem; }
.ug-mock__dots span { width: 1rem; height: 1rem; border-radius: 50%; background: #3a3a40; }
.ug-mock__dots span:nth-child(1) { background: #ef4444; opacity: .8; }
.ug-mock__dots span:nth-child(2) { background: #f59e0b; opacity: .8; }
.ug-mock__dots span:nth-child(3) { background: #22c55e; opacity: .8; }
.ug-mock__url {
  flex: 1;
  max-width: 36rem;
  margin: 0 auto;
  padding: .6rem 1.2rem;
  border-radius: .8rem;
  background: rgba(255, 255, 255, .05);
  font: normal 500 1.15rem/1 var(--ug-mono);
  color: var(--ug-text-3);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ug-mock__body { padding: 2rem; }
.ug-mock__caption {
  margin: 1.4rem 0 0;
  text-align: center;
  font: normal 500 1.15rem/1.4 var(--ug-mono);
  color: var(--ug-text-3);
}

.ug-mock__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.8rem;
}
.ug-mock__title {
  margin: 0;
  font: normal 700 1.7rem/1.2 var(--ug-font);
  color: var(--ug-text);
}
.ug-mock__meta {
  margin: .4rem 0 0;
  font: normal 500 1.2rem/1.3 var(--ug-mono);
  color: var(--ug-text-3);
}

/* rows (faults, predictions, alerts) */
.ug-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: .6rem 1.2rem;
  align-items: center;
  padding: 1.3rem 1.4rem;
  border-radius: 1.2rem;
  border: 1px solid var(--ug-line);
  background: rgba(255, 255, 255, .02);
}
.ug-row + .ug-row { margin-top: .8rem; }
.ug-row--top {
  border-color: rgba(239, 68, 68, .35);
  background: rgba(239, 68, 68, .06);
}
.ug-row__rank {
  display: grid;
  place-items: center;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: .8rem;
  background: rgba(255, 255, 255, .06);
  font: normal 700 1.25rem/1 var(--ug-mono);
  color: var(--ug-text-2);
}
.ug-row__name {
  font: normal 700 1.4rem/1.25 var(--ug-font);
  color: var(--ug-text);
  min-width: 0;
}
.ug-row__name small {
  display: block;
  margin-top: .3rem;
  font: normal 500 1.15rem/1.3 var(--ug-font);
  color: var(--ug-text-3);
}
.ug-row__bar { grid-column: 2 / 4; }
.ug-row__pct {
  font: normal 700 1.4rem/1 var(--ug-mono);
  color: var(--ug-text);
}

/* progress bars — width animates from 0 to --v when parent gets .is-in / panel active */
.ug-bar {
  position: relative;
  height: .6rem;
  border-radius: 1rem;
  background: rgba(255, 255, 255, .07);
  overflow: hidden;
}
.ug-bar > i {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--ug-accent), var(--ug-accent-bright));
  transition: width 1.4s var(--ug-ease);
  transition-delay: var(--d, .2s);
}
.ug-bar--danger > i { background: linear-gradient(90deg, #b91c1c, #ef4444); }
.ug-bar--warn > i { background: linear-gradient(90deg, #b45309, #f59e0b); }
.ug-bar--ok > i { background: linear-gradient(90deg, #15803d, #22c55e); }
.is-in .ug-bar > i,
.is-active .ug-bar > i,
.ug-bar.is-in > i { width: var(--v, 50%); }

/* summary box (AI text) */
.ug-ai-box {
  position: relative;
  margin-top: 1.6rem;
  padding: 1.4rem 1.6rem 1.4rem 4.6rem;
  border-radius: 1.2rem;
  border: 1px solid rgba(var(--ug-accent-bright-rgb), .3);
  background: rgba(var(--ug-accent-rgb), .12);
  font: normal 500 1.35rem/1.55 var(--ug-font);
  color: #d6f6f8;
  min-height: 7rem;
}
.ug-ai-box > i {
  position: absolute;
  left: 1.5rem;
  top: 1.5rem;
  font-size: 2rem;
  color: var(--ug-accent-bright);
}
.ug-caret {
  display: inline-block;
  width: .7rem;
  height: 1.5rem;
  margin-left: .2rem;
  vertical-align: -.2rem;
  background: var(--ug-accent-bright);
  animation: ug-blink 1s steps(1) infinite;
}

/* KPI tiles (dashboard mock) */
.ug-kpis {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-bottom: 1.4rem;
}
.ug-kpi {
  padding: 1.4rem;
  border-radius: 1.2rem;
  border: 1px solid var(--ug-line);
  background: rgba(255, 255, 255, .025);
}
.ug-kpi__label {
  display: flex;
  align-items: center;
  gap: .6rem;
  font: normal 600 1.15rem/1.2 var(--ug-font);
  color: var(--ug-text-3);
}
.ug-kpi__label i { font-size: 1.4rem; color: var(--ug-accent-bright); }
.ug-kpi__value {
  margin-top: .8rem;
  font: normal 700 2.6rem/1 var(--ug-font);
  letter-spacing: -.08rem;
  color: var(--ug-text);
}
.ug-kpi__value small { font-size: 1.3rem; color: var(--ug-text-3); letter-spacing: 0; }

/* mini bar chart */
.ug-chart {
  display: flex;
  align-items: flex-end;
  gap: .8rem;
  height: 11rem;
  padding: 1.4rem 1.4rem 0;
  border-radius: 1.2rem;
  border: 1px solid var(--ug-line);
  background:
    repeating-linear-gradient(to top, rgba(255, 255, 255, .04) 0 1px, transparent 1px 2.6rem),
    rgba(255, 255, 255, .02);
}
.ug-chart span {
  flex: 1;
  height: 0;
  border-radius: .6rem .6rem 0 0;
  background: linear-gradient(180deg, var(--ug-accent-bright), rgba(var(--ug-accent-rgb), .3));
  transition: height 1.2s var(--ug-ease);
  transition-delay: var(--d, 0s);
}
.is-in .ug-chart span,
.is-active .ug-chart span { height: var(--v, 50%); }

/* dashboard layout inside window mock */
.ug-dash {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 34rem;
}
.ug-dash__side {
  display: none;
  padding: 1.8rem 1.2rem;
  border-right: 1px solid var(--ug-line);
  background: rgba(0, 0, 0, .2);
}
.ug-dash__logo {
  margin: 0 0 2rem .8rem;
  font: normal 800 1.5rem/1 var(--ug-font);
  letter-spacing: .02rem;
  color: var(--ug-accent-bright);
}
.ug-dash__nav { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.ug-dash__nav li {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .9rem 1rem;
  border-radius: .8rem;
  font: normal 600 1.25rem/1 var(--ug-font);
  color: var(--ug-text-3);
}
.ug-dash__nav li i { font-size: 1.5rem; }
.ug-dash__nav li.is-on { background: rgba(var(--ug-accent-rgb), .3); color: #fff; }
.ug-dash__main { padding: 1.8rem; min-width: 0; }
.ug-dash__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
.ug-panel {
  padding: 1.4rem;
  border-radius: 1.2rem;
  border: 1px solid var(--ug-line);
  background: rgba(255, 255, 255, .02);
}
.ug-panel__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 1.2rem;
  font: normal 700 1.3rem/1.2 var(--ug-font);
  color: var(--ug-text);
}
.ug-alert-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .9rem 0;
  border-top: 1px solid var(--ug-line);
  font: normal 600 1.2rem/1.3 var(--ug-font);
  color: var(--ug-text-2);
}
.ug-alert-item:first-of-type { border-top: 0; padding-top: 0; }
.ug-alert-item i { font-size: 1.6rem; }
.ug-alert-item span { flex: 1; min-width: 0; }

/* phone mockup */
.ug-phone {
  position: relative;
  width: 100%;
  max-width: 30rem;
  margin: 0 auto;
  padding: 1rem;
  border-radius: 4.4rem;
  background: linear-gradient(145deg, #2a2a2e, #111113);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .12) inset,
    0 0 0 1px #000,
    0 5rem 10rem -3rem rgba(0, 0, 0, .9),
    0 0 12rem -3rem rgba(var(--ug-accent-rgb), .7);
}
.ug-phone__screen {
  position: relative;
  border-radius: 3.6rem;
  overflow: hidden;
  background: #0d0d0f;
  min-height: 56rem;
}
.ug-phone__notch {
  position: absolute;
  top: .9rem;
  left: 50%;
  width: 9rem;
  height: 2.6rem;
  border-radius: 2rem;
  background: #000;
  transform: translateX(-50%);
  z-index: 3;
}
.ug-phone__header {
  padding: 4.6rem 1.8rem 1.8rem;
  background: linear-gradient(160deg, #006d78, #013f46);
}
.ug-phone__header p { margin: 0; font: normal 500 1.15rem/1.3 var(--ug-font); color: rgba(255, 255, 255, .75); }
.ug-phone__header h4 { margin: .4rem 0 1.2rem; font: normal 700 1.8rem/1.2 var(--ug-font); color: #fff; }
.ug-phone__steps { display: flex; gap: .4rem; }
.ug-phone__steps span { flex: 1; height: .4rem; border-radius: 1rem; background: rgba(255, 255, 255, .25); }
.ug-phone__steps span.on { background: #fff; }
.ug-phone__body { padding: 1.6rem 1.4rem 2rem; }
.ug-q {
  padding: 1.3rem;
  border-radius: 1.4rem;
  border: 1px solid var(--ug-line);
  background: rgba(255, 255, 255, .03);
}
.ug-q + .ug-q { margin-top: 1rem; }
.ug-q__label { margin: 0 0 1rem; font: normal 700 1.3rem/1.3 var(--ug-font); color: var(--ug-text); }
.ug-q__opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.ug-q__opt {
  padding: .8rem .4rem;
  border-radius: .8rem;
  border: 1px solid var(--ug-line);
  font: normal 700 1.1rem/1 var(--ug-font);
  text-align: center;
  color: var(--ug-text-3);
}
.ug-q__opt.ok { border-color: rgba(34, 197, 94, .5); background: rgba(34, 197, 94, .14); color: #86efac; }
.ug-q__opt.minor { border-color: rgba(245, 158, 11, .5); background: rgba(245, 158, 11, .14); color: #fcd34d; }
.ug-q__opt.major { border-color: rgba(239, 68, 68, .5); background: rgba(239, 68, 68, .14); color: #fca5a5; }
.ug-q__media { display: flex; gap: .6rem; margin-top: 1rem; }
.ug-q__thumb {
  display: grid;
  place-items: center;
  width: 4.6rem;
  height: 4.6rem;
  border-radius: 1rem;
  background: linear-gradient(135deg, #2b3a3c, #1a2224);
  color: rgba(255, 255, 255, .6);
  font-size: 1.8rem;
}
.ug-q__thumb.add { background: transparent; border: 1px dashed var(--ug-line-2); color: var(--ug-accent-bright); }
.ug-phone__cta {
  margin-top: 1.4rem;
  padding: 1.3rem;
  border-radius: 1.2rem;
  background: var(--ug-accent);
  text-align: center;
  font: normal 700 1.35rem/1 var(--ug-font);
  color: #fff;
}
.ug-phone__score {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.2rem;
  padding: 1.2rem 1.3rem;
  border-radius: 1.4rem;
  background: rgba(var(--ug-accent-rgb), .18);
  border: 1px solid rgba(var(--ug-accent-bright-rgb), .3);
  font: normal 600 1.2rem/1.3 var(--ug-font);
  color: #cdf7fa;
}
.ug-phone__score strong { font-size: 2rem; color: #fff; }

/* floating notification chip over mockups */
.ug-toast {
  position: absolute;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 28rem;
  padding: 1.1rem 1.4rem;
  border-radius: 1.4rem;
  border: 1px solid var(--ug-line-2);
  background: rgba(24, 24, 27, .9);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 2rem 4rem -1rem rgba(0, 0, 0, .8);
  font: normal 600 1.2rem/1.35 var(--ug-font);
  color: var(--ug-text-2);
  animation: ug-float 7s ease-in-out infinite;
}
.ug-toast strong { display: block; color: var(--ug-text); font-size: 1.3rem; }
.ug-toast > i {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 1rem;
  font-size: 1.8rem;
}
.ug-toast--danger > i { background: rgba(239, 68, 68, .16); color: #fb8a8a; }
.ug-toast--ok > i { background: rgba(34, 197, 94, .16); color: #6ee7a0; }
.ug-toast--accent > i { background: rgba(var(--ug-accent-bright-rgb), .16); color: var(--ug-accent-bright); }

/* guide steps inside mock */
.ug-guide__step {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.4rem;
}
.ug-guide__ol { margin: 0 0 1.4rem; padding: 0; list-style: none; counter-reset: ugli; display: grid; gap: .8rem; }
.ug-guide__ol li {
  counter-increment: ugli;
  display: flex;
  gap: 1rem;
  font: normal 500 1.3rem/1.45 var(--ug-font);
  color: var(--ug-text-2);
}
.ug-guide__ol li::before {
  content: counter(ugli);
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, .07);
  font: normal 700 1.1rem/1 var(--ug-mono);
  color: var(--ug-text);
}
.ug-note {
  display: flex;
  gap: 1rem;
  padding: 1.1rem 1.3rem;
  border-radius: 1rem;
  font: normal 600 1.25rem/1.45 var(--ug-font);
}
.ug-note + .ug-note { margin-top: .8rem; }
.ug-note i { font-size: 1.7rem; flex: 0 0 auto; }
.ug-note--warn { background: rgba(239, 68, 68, .09); color: #fca5a5; border: 1px solid rgba(239, 68, 68, .22); }
.ug-note--tip { background: rgba(34, 197, 94, .08); color: #86efac; border: 1px solid rgba(34, 197, 94, .2); }
.ug-note--info { background: rgba(var(--ug-accent-bright-rgb), .08); color: #a5f0f5; border: 1px solid rgba(var(--ug-accent-bright-rgb), .22); }

.ug-split-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* scan line effect */
.ug-scanline {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.ug-scanline::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 40%;
  background: linear-gradient(180deg, transparent, rgba(var(--ug-accent-bright-rgb), .07), transparent);
  animation: ug-scan 4.5s linear infinite;
}

/* stage that holds a mock + floating toasts */
.ug-stage {
  position: relative;
  padding: 2rem 0;
}
.ug-stage .ug-toast--a { top: 0; right: 0; }
.ug-stage .ug-toast--b { bottom: 0; left: 0; animation-delay: -3s; }


/* ==========================================================================
   12. Feature bento cards
   ========================================================================== */
.ug-bento {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.6rem;
}
.ug-card {
  --mx: 50%;
  --my: 50%;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  padding: 3rem 2.6rem;
  border-radius: var(--ug-radius);
  border: 1px solid var(--ug-line);
  background: var(--ug-card);
  overflow: hidden;
  isolation: isolate;
  transition: border-color .4s, transform .5s var(--ug-ease);
  text-decoration: none;
  color: inherit;
}
.ug-card::before {
  /* spotlight following the pointer (vars set in addons.js) */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  background: radial-gradient(40rem circle at var(--mx) var(--my), rgba(var(--ug-accent-bright-rgb), .13), transparent 45%);
  transition: opacity .4s;
}
.ug-card:hover { border-color: rgba(var(--ug-accent-bright-rgb), .35); transform: translateY(-.4rem); color: inherit; }
.ug-card:hover::before { opacity: 1; }
.ug-card__title {
  margin: .4rem 0 0;
  font: normal 700 2.1rem/1.2 var(--ug-font);
  letter-spacing: -.04rem;
  color: var(--ug-text);
}
.ug-card__text {
  margin: 0;
  font: normal 500 1.5rem/1.55 var(--ug-font);
  color: var(--ug-text-2);
}
.ug-card__foot {
  margin-top: auto;
  padding-top: 1rem;
}
.ug-card--accent {
  border-color: rgba(var(--ug-accent-bright-rgb), .3);
  background:
    radial-gradient(110% 90% at 0% 0%, rgba(var(--ug-accent-rgb), .45), transparent 60%),
    var(--ug-card);
}
.ug-card__num {
  position: absolute;
  top: 2.6rem;
  right: 2.6rem;
  font: normal 500 1.2rem/1 var(--ug-mono);
  color: var(--ug-text-3);
}


/* ==========================================================================
   13. Roles
   ========================================================================== */
.ug-role {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.4rem;
  padding: 3rem 2.6rem;
  border-radius: var(--ug-radius);
  border: 1px solid var(--ug-line);
  background:
    radial-gradient(90% 70% at 100% 0%, rgba(var(--ug-accent-rgb), .25), transparent 60%),
    var(--ug-card);
}
.ug-role__who {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  margin-bottom: 1.8rem;
}
.ug-role__who h3 {
  margin: 0;
  font: normal 700 2.6rem/1.1 var(--ug-font);
  letter-spacing: -.06rem;
  color: var(--ug-text);
}
.ug-role__who p { margin: .4rem 0 0; font: normal 500 1.4rem/1.3 var(--ug-font); color: var(--ug-text-3); }
.ug-role__quote {
  margin: 0;
  font: normal 600 1.8rem/1.45 var(--ug-font);
  color: var(--ug-text);
}
.ug-role__quote span { color: var(--ug-text-3); }


/* ==========================================================================
   14. Security grid
   ========================================================================== */
.ug-sec {
  position: relative;
  overflow: hidden;
  border-radius: 3.2rem;
  border: 1px solid var(--ug-line);
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(var(--ug-accent-rgb), .35), transparent 70%),
    #111113;
  padding: 5rem 2rem;
}
.ug-sec__shield {
  position: relative;
  display: grid;
  place-items: center;
  width: 9rem;
  height: 9rem;
  margin: 0 auto 3rem;
  border-radius: 2.6rem;
  font-size: 4.4rem;
  color: #fff;
  background: linear-gradient(160deg, #0a8c99, #004951);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .15) inset, 0 2rem 6rem -1rem rgba(var(--ug-accent-bright-rgb), .6);
}
.ug-sec__shield::before,
.ug-sec__shield::after {
  content: "";
  position: absolute;
  inset: -1.4rem;
  border-radius: 3.4rem;
  border: 1px solid rgba(var(--ug-accent-bright-rgb), .25);
}
.ug-sec__shield::after { inset: -2.8rem; border-radius: 4.2rem; opacity: .5; }
.ug-sec .ug-bento { margin-top: 4rem; }
.ug-sec .ug-card { background: rgba(21, 21, 23, .75); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }


/* ==========================================================================
   15. FAQ accordion (native <details>)
   ========================================================================== */
.ug-faq {
  display: grid;
  gap: 1rem;
}
.ug-faq details {
  border-radius: 1.8rem;
  border: 1px solid var(--ug-line);
  background: var(--ug-card);
  transition: border-color .3s, background-color .3s;
}
.ug-faq details[open] {
  border-color: rgba(var(--ug-accent-bright-rgb), .35);
  background: var(--ug-card-2);
}
.ug-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 2.2rem 2.4rem;
  list-style: none;
  cursor: pointer;
  font: normal 700 1.7rem/1.35 var(--ug-font);
  color: var(--ug-text);
}
.ug-faq summary::-webkit-details-marker { display: none; }
.ug-faq summary::after {
  content: "+";
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 50%;
  border: 1px solid var(--ug-line-2);
  font: normal 400 2rem/1 var(--ug-font);
  color: var(--ug-accent-bright);
  transition: transform .4s var(--ug-ease), background-color .3s;
}
.ug-faq details[open] summary::after {
  transform: rotate(45deg);
  background: rgba(var(--ug-accent-bright-rgb), .12);
}
.ug-faq__a {
  padding: 0 2.4rem 2.4rem;
  font: normal 500 1.55rem/1.65 var(--ug-font);
  color: var(--ug-text-2);
  animation: ug-faq-in .5s var(--ug-ease);
}
.ug-faq__a p { margin: 0; }
.ug-faq__a p + p { margin-top: 1rem; }
.ug-faq__a strong { color: var(--ug-text); }
@keyframes ug-faq-in {
  from { opacity: 0; transform: translateY(-.8rem); }
  to { opacity: 1; transform: none; }
}
.ug-faq-group + .ug-faq-group { margin-top: 5rem; }
.ug-faq-group__title {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin: 0 0 2rem;
  font: normal 700 2.2rem/1.2 var(--ug-font);
  color: var(--ug-text);
}


/* ==========================================================================
   16. CTA band
   ========================================================================== */
.ug-cta {
  position: relative;
  overflow: hidden;
  border-radius: 3.2rem;
  padding: 5rem 2.4rem;
  background:
    radial-gradient(70% 90% at 100% 100%, rgba(46, 197, 209, .35), transparent 60%),
    radial-gradient(60% 80% at 0% 0%, rgba(0, 0, 0, .35), transparent 60%),
    linear-gradient(135deg, #006d78 0%, #00454c 100%);
  box-shadow: 0 4rem 10rem -4rem rgba(var(--ug-accent-rgb), .9);
}
.ug-cta .ug-gridbg {
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, .08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, .08) 1px, transparent 1px);
}
.ug-cta__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
}
.ug-cta .ug-title { color: #fff; }
.ug-cta .ug-lead { color: rgba(255, 255, 255, .8); }
.ug-cta__points {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem 2rem;
  margin: 2.4rem 0 0;
  padding: 0;
  list-style: none;
}
.ug-cta__points li {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font: normal 600 1.4rem/1.3 var(--ug-font);
  color: #fff;
}
.ug-cta__points i { font-size: 1.7rem; color: #9ff3f8; }


/* ==========================================================================
   17. Pricing additions
   ========================================================================== */
.ug-plans {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.6rem;
  align-items: stretch;
}
.ug-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 3.4rem 2.8rem;
  border-radius: var(--ug-radius);
  border: 1px solid var(--ug-line);
  background: var(--ug-card);
}
.ug-plan--featured {
  border-color: rgba(var(--ug-accent-bright-rgb), .5);
  background:
    radial-gradient(100% 60% at 50% 0%, rgba(var(--ug-accent-rgb), .45), transparent 70%),
    var(--ug-card);
  box-shadow: 0 3rem 8rem -3rem rgba(var(--ug-accent-rgb), .8);
}
.ug-plan__flag {
  position: absolute;
  top: -1.3rem;
  left: 50%;
  transform: translateX(-50%);
  padding: .7rem 1.4rem;
  border-radius: 10rem;
  background: var(--ug-accent-bright);
  font: normal 700 1.15rem/1 var(--ug-mono);
  letter-spacing: .04rem;
  text-transform: uppercase;
  color: #002a2f;
  white-space: nowrap;
}
.ug-plan__name {
  margin: 0;
  font: normal 700 2.2rem/1.2 var(--ug-font);
  color: var(--ug-text);
}
.ug-plan__for {
  margin: .8rem 0 2.4rem;
  font: normal 500 1.45rem/1.5 var(--ug-font);
  color: var(--ug-text-2);
  min-height: 4.4rem;
}
.ug-plan__price {
  display: flex;
  align-items: baseline;
  gap: .8rem;
  margin-bottom: .6rem;
  font: normal 700 3.6rem/1 var(--ug-font);
  letter-spacing: -.12rem;
  color: var(--ug-text);
}
.ug-plan__price small { font-size: 1.4rem; font-weight: 600; letter-spacing: 0; color: var(--ug-text-3); }
.ug-plan__note { margin: 0 0 2.4rem; font: normal 500 1.3rem/1.4 var(--ug-font); color: var(--ug-text-3); }
.ug-plan .ug-btn { margin-bottom: 2.8rem; }
.ug-plan .ug-list li { font-size: 1.45rem; }
.ug-plan__sep {
  margin: 0 0 1.6rem;
  font: normal 600 1.2rem/1 var(--ug-mono);
  letter-spacing: .05rem;
  text-transform: uppercase;
  color: var(--ug-text-3);
}

/* comparison table */
.ug-table-wrap {
  overflow-x: auto;
  border-radius: var(--ug-radius);
  border: 1px solid var(--ug-line);
  background: var(--ug-card);
  -webkit-overflow-scrolling: touch;
}
.ug-table {
  width: 100%;
  min-width: 68rem;
  border-collapse: collapse;
  font: normal 500 1.45rem/1.4 var(--ug-font);
  color: var(--ug-text-2);
}
.ug-table th,
.ug-table td {
  padding: 1.6rem 2rem;
  border-bottom: 1px solid var(--ug-line);
  text-align: center;
  vertical-align: middle;
}
.ug-table th:first-child,
.ug-table td:first-child { text-align: left; color: var(--ug-text); }
.ug-table thead th {
  position: sticky;
  top: 0;
  background: #19191c;
  font: normal 700 1.5rem/1.2 var(--ug-font);
  color: var(--ug-text);
}
.ug-table thead th.is-featured { color: var(--ug-accent-bright); }
.ug-table tbody tr:hover td { background: rgba(255, 255, 255, .015); }
.ug-table .ug-group td {
  padding-top: 2.4rem;
  font: normal 600 1.2rem/1 var(--ug-mono);
  letter-spacing: .05rem;
  text-transform: uppercase;
  color: var(--ug-accent-bright);
  background: transparent;
}
.ug-table .yes { color: var(--ug-accent-bright); font-size: 2rem; }
.ug-table .no { color: #3f4148; font-size: 2rem; }
.ug-table tr:last-child td { border-bottom: 0; }

/* quote process */
.ug-process {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.6rem;
  counter-reset: ugproc;
}
.ug-process .ug-card { padding-top: 3.6rem; }
.ug-process .ug-card::after {
  counter-increment: ugproc;
  content: "0" counter(ugproc);
  position: absolute;
  top: 2.4rem;
  right: 2.6rem;
  font: normal 700 5rem/1 var(--ug-font);
  letter-spacing: -.2rem;
  color: rgba(255, 255, 255, .05);
}


/* ==========================================================================
   18. Documentation page
   ========================================================================== */
.ug-doc {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4rem;
  align-items: start;
}
.ug-doc__toc {
  display: none;
}
.ug-doc__toc-inner {
  position: sticky;
  top: 12rem;
  padding: 2.4rem;
  border-radius: var(--ug-radius-s);
  border: 1px solid var(--ug-line);
  background: var(--ug-card);
}
.ug-doc__toc-title {
  margin: 0 0 1.6rem;
  font: normal 600 1.2rem/1 var(--ug-mono);
  letter-spacing: .05rem;
  text-transform: uppercase;
  color: var(--ug-text-3);
}
.ug-doc__toc ol { margin: 0; padding: 0; list-style: none; display: grid; gap: .2rem; }
.ug-doc__toc a {
  display: flex;
  gap: 1rem;
  padding: .9rem 1rem;
  border-radius: .8rem;
  font: normal 600 1.4rem/1.3 var(--ug-font);
  color: var(--ug-text-2);
  text-decoration: none;
  transition: background-color .25s, color .25s;
}
.ug-doc__toc a span { font-family: var(--ug-mono); color: var(--ug-text-3); font-size: 1.2rem; padding-top: .15rem; }
.ug-doc__toc a:hover,
.ug-doc__toc a.is-active { background: rgba(var(--ug-accent-rgb), .22); color: #fff; }
.ug-doc__article {
  min-width: 0;
}
.ug-doc__section {
  padding: 4rem 0;
  border-top: 1px solid var(--ug-line);
  scroll-margin-top: 10rem;
}
.ug-doc__section:first-child { border-top: 0; padding-top: 0; }
.ug-doc__section h2 {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  max-width: none;
  margin: 0 0 1.6rem;
  text-align: left;
  font: normal 700 2.8rem/1.2 var(--ug-font);
  letter-spacing: -.06rem;
  color: var(--ug-text);
}
.ug-doc__section h3 {
  margin: 3rem 0 1.2rem;
  font: normal 700 1.9rem/1.3 var(--ug-font);
  color: var(--ug-text);
}
.ug-doc__section p,
.ug-doc__section li {
  font: normal 500 1.6rem/1.7 var(--ug-font);
  color: var(--ug-text-2);
}
.ug-doc__section p { margin: 0 0 1.4rem; }
.ug-doc__section strong { color: var(--ug-text); }
.ug-doc__steps {
  margin: 2rem 0;
  padding: 0;
  list-style: none;
  counter-reset: ugdoc;
  display: grid;
  gap: 1rem;
}
.ug-doc__steps li {
  counter-increment: ugdoc;
  position: relative;
  padding: 1.8rem 2rem 1.8rem 6.4rem;
  border-radius: 1.4rem;
  border: 1px solid var(--ug-line);
  background: var(--ug-card);
}
.ug-doc__steps li::before {
  content: counter(ugdoc);
  position: absolute;
  left: 1.8rem;
  top: 1.7rem;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: .9rem;
  background: var(--ug-accent);
  font: normal 700 1.3rem/1 var(--ug-mono);
  color: #fff;
}
.ug-doc__steps li strong { display: block; margin-bottom: .2rem; }
.ug-kbd {
  display: inline-block;
  padding: .2rem .8rem;
  border-radius: .6rem;
  border: 1px solid var(--ug-line-2);
  background: rgba(255, 255, 255, .05);
  font: normal 600 1.3rem/1.5 var(--ug-mono);
  color: var(--ug-text);
}
.ug-doc__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
  margin: 2rem 0;
}
.ug-doc-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.6rem;
}


/* ==========================================================================
   19. Contact / services / about / feature pages additions
   ========================================================================== */
/* "what happens next" timeline */
.ug-timeline {
  position: relative;
  margin: 0;
  padding: 0 0 0 3.4rem;
  list-style: none;
}
.ug-timeline::before {
  content: "";
  position: absolute;
  left: 1.1rem;
  top: .6rem;
  bottom: .6rem;
  width: 2px;
  background: linear-gradient(180deg, var(--ug-accent-bright), rgba(var(--ug-accent-rgb), .1));
}
.ug-timeline li { position: relative; padding-bottom: 2.8rem; }
.ug-timeline li:last-child { padding-bottom: 0; }
.ug-timeline li::before {
  content: "";
  position: absolute;
  left: -3.4rem;
  top: .2rem;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: #0f0f0f;
  border: 2px solid var(--ug-accent-bright);
  box-shadow: 0 0 0 .5rem rgba(var(--ug-accent-bright-rgb), .12);
}
.ug-timeline h4 {
  margin: 0 0 .6rem;
  font: normal 700 1.8rem/1.3 var(--ug-font);
  color: var(--ug-text);
}
.ug-timeline p {
  margin: 0;
  font: normal 500 1.5rem/1.55 var(--ug-font);
  color: var(--ug-text-2);
}
.ug-timeline .ug-badge { margin-bottom: 1rem; }

.ug-2col {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4rem;
  align-items: start;
}
.ug-2col--center { align-items: center; }

/* "promise" block that replaces the illustrative testimonial on feature pages */
.ug-promise {
  position: relative;
  padding: 4rem 2.6rem;
  border-radius: 3.2rem;
  border: 1px solid rgba(var(--ug-accent-bright-rgb), .25);
  background:
    radial-gradient(80% 90% at 0% 0%, rgba(var(--ug-accent-rgb), .35), transparent 60%),
    var(--ug-card);
  overflow: hidden;
}
.ug-promise__label {
  margin: 0 0 2rem;
  font: normal 600 1.2rem/1 var(--ug-mono);
  letter-spacing: .05rem;
  text-transform: uppercase;
  color: var(--ug-accent-bright);
}
.ug-promise__text {
  margin: 0 0 3.2rem;
  font: normal 700 2.8rem/1.25 var(--ug-font);
  letter-spacing: -.08rem;
  color: var(--ug-text);
  max-width: 100rem;
}
.ug-promise__text span { color: var(--ug-text-3); }
.ug-promise__stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.6rem;
}
.ug-promise__stat {
  padding-top: 1.6rem;
  border-top: 1px solid var(--ug-line-2);
}
.ug-promise__stat strong {
  display: block;
  margin-bottom: .6rem;
  font: normal 700 1.8rem/1.3 var(--ug-font);
  color: var(--ug-text);
}
.ug-promise__stat span { font: normal 500 1.45rem/1.5 var(--ug-font); color: var(--ug-text-2); }

/* module index on works.html */
.ug-module {
  display: flex;
  gap: 1.6rem;
  padding: 2.2rem;
  border-radius: 1.8rem;
  border: 1px solid var(--ug-line);
  background: var(--ug-card);
  transition: border-color .3s, transform .4s var(--ug-ease);
}
.ug-module:hover { border-color: rgba(var(--ug-accent-bright-rgb), .35); transform: translateY(-.3rem); }
.ug-module h3 { margin: 0 0 .6rem; font: normal 700 1.7rem/1.25 var(--ug-font); color: var(--ug-text); }
.ug-module p { margin: 0; font: normal 500 1.4rem/1.5 var(--ug-font); color: var(--ug-text-2); }
.ug-module .ug-badge { margin-top: 1rem; }
.ug-modules {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
}

/* contact reassurance cards */
.ug-reassure {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
}
.ug-reassure .ug-module { align-items: center; }

/* values (about) */
.ug-values .ug-card__title { font-size: 2.2rem; }

/* key-points band on feature pages */
.ug-keypoints {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.6rem;
}


/* ==========================================================================
   20. Template overrides (small layout fixes only)
   ========================================================================== */
/* hero: keep the new badge + CTA group centred with the template headline */
.mxd-hero-03__headline .ug-hero-cta { width: 100%; }
/* footer wordmark stays teal on the new pages too */
.ug-footer-brand { font-weight: 700; color: #006d78; }
/* never let the floating CTA cover the footer legal row on small screens */
/* (floating CTA hides itself over the footer — no extra footer padding needed) */
/* inner headline tags on documentation page */
.ug-doc-hero-tags { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 3rem; }


/* ==========================================================================
   21. Responsive
   ========================================================================== */
@media only screen and (min-width: 576px) {
  .ug-facts { grid-template-columns: repeat(3, 1fr); }
  .ug-kpis { grid-template-columns: repeat(4, 1fr); }
}

@media only screen and (min-width: 768px) {
  .ug-section { padding: 12rem 0; }
  .ug-section--tight { padding: 8rem 0; }
  .ug-section--flush-top { padding-top: 0; }
  .ug-section--flush-bottom { padding-bottom: 0; }
  .ug-wrap { padding: 0 6rem; }
  .ug-title { font-size: 4.8rem; letter-spacing: -.18rem; }
  .ug-title--xl { font-size: 5.8rem; }
  .ug-lead { font-size: 1.8rem; }
  .ug-compare { grid-template-columns: 1fr 1fr; }
  .ug-compare__col { padding: 4.4rem 3.8rem; }
  .ug-steps { grid-template-columns: repeat(2, 1fr); }
  .ug-bento { grid-template-columns: repeat(2, 1fr); }
  .ug-role { grid-template-columns: 1fr 1fr; padding: 4.4rem; gap: 4rem; }
  .ug-sec { padding: 8rem 5rem; }
  .ug-cta { padding: 7rem 6rem; }
  .ug-modules { grid-template-columns: repeat(2, 1fr); }
  .ug-reassure { grid-template-columns: repeat(3, 1fr); }
  .ug-process { grid-template-columns: repeat(3, 1fr); }
  .ug-promise { padding: 6rem 5rem; }
  .ug-promise__text { font-size: 3.6rem; }
  .ug-promise__stats { grid-template-columns: repeat(3, 1fr); gap: 3rem; }
  .ug-keypoints { grid-template-columns: repeat(2, 1fr); }
  .ug-doc-cards { grid-template-columns: repeat(2, 1fr); }
  .ug-doc__grid { grid-template-columns: repeat(2, 1fr); }
  .ug-dash__grid { grid-template-columns: 1.3fr 1fr; }
  .ug-float-cta {
    left: auto;
    right: 2.4rem;
    bottom: 2.4rem;
    max-width: 52rem;
  }
  .ug-stage { padding: 4rem 0; }
  .ug-stage .ug-toast--a { right: -2rem; }
  .ug-stage .ug-toast--b { left: -2rem; }
}

@media only screen and (min-width: 992px) {
  .ug-dash { grid-template-columns: 19rem 1fr; }
  .ug-dash__side { display: block; }
  .ug-plans { grid-template-columns: repeat(3, 1fr); }
  .ug-steps { grid-template-columns: repeat(3, 1fr); }
}

@media only screen and (min-width: 1200px) {
  .ug-section { padding: 16rem 0; }
  .ug-section--tight { padding: 10rem 0; }
  .ug-section--flush-top { padding-top: 0; }
  .ug-section--flush-bottom { padding-bottom: 0; }
  .ug-wrap { padding: 0 10rem; }
  .ug-title { font-size: 6rem; letter-spacing: -.24rem; }
  .ug-title--xl { font-size: 7.2rem; letter-spacing: -.3rem; }
  .ug-head { margin-bottom: 7rem; }
  .ug-head--split { grid-template-columns: 1.3fr 1fr; gap: 6rem; }
  .ug-facts { grid-template-columns: repeat(6, 1fr); }
  .ug-fact { border-bottom: 0; padding: 3.6rem 2.8rem; }
  .ug-fact:last-child { border-right: 0; }
  .ug-steps { grid-template-columns: repeat(5, 1fr); gap: 1.2rem; padding-top: 3.2rem; }
  .ug-steps__rail {
    display: block;
    position: absolute;
    left: 2.4rem;
    right: 2.4rem;
    top: 0;
    height: 2px;
    background: var(--ug-line-2);
    border-radius: 2px;
    overflow: hidden;
  }
  .ug-steps__rail i {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    background: linear-gradient(90deg, var(--ug-accent), var(--ug-accent-bright));
    box-shadow: 0 0 1.6rem var(--ug-accent-bright);
    transition: width 2.4s var(--ug-ease);
  }
  .ug-steps.is-in .ug-steps__rail i { width: 100%; }
  .ug-step { padding: 2.8rem 2.2rem; }
  .ug-showcase { grid-template-columns: .85fr 1.15fr; gap: 7rem; }
  .ug-showcase--flip .ug-showcase__copy { order: 2; }
  .ug-bento { grid-template-columns: repeat(3, 1fr); }
  .ug-bento .ug-card--wide { grid-column: span 2; }
  .ug-cta__inner { grid-template-columns: 1.4fr 1fr; gap: 6rem; }
  .ug-cta__inner .ug-btns { justify-content: flex-end; }
  .ug-header-nav { display: flex; }
  .mxd-header__controls .ug-header-cta { display: inline-flex; }
  .mxd-header__controls { align-items: center; gap: 1.6rem; }
  .ug-doc { grid-template-columns: 28rem 1fr; gap: 6rem; }
  .ug-doc__toc { display: block; }
  .ug-modules { grid-template-columns: repeat(3, 1fr); }
  .ug-2col { grid-template-columns: 1fr 1fr; gap: 8rem; }
  .ug-keypoints { grid-template-columns: repeat(4, 1fr); }
  .ug-sec { padding: 10rem 8rem; }
  .ug-float-cta { right: 3rem; bottom: 3rem; }
  .ug-promise { padding: 8rem 7rem; }
  .ug-promise__text { font-size: 4.4rem; }
}

@media only screen and (min-width: 1600px) {
  .ug-title { font-size: 7rem; }
  .ug-title--xl { font-size: 8.6rem; }
  .ug-lead { font-size: 2rem; }
  .ug-fact__value { font-size: 5.6rem; }
}

/* the template shows its large "Nous contacter" header button; on desktop we
   replace it with the inline nav + accent CTA, on mobile the template button
   stays as it was. */
@media only screen and (min-width: 1200px) {
  .mxd-header__controls .mxd-header__link.ug-hide-xl { display: none; }
}


/* ==========================================================================
   22. Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .ug-js [data-ug-reveal] { opacity: 1; transform: none; transition: none; }
  .ug-marquee__track,
  .ug-orb,
  .ug-toast,
  .ug-dot::after,
  .ug-title em,
  .ug-title .ug-grad,
  .ug-scanline::after,
  .ug-loop-note i { animation: none; }
  .ug-bar > i,
  .ug-chart span,
  .ug-steps__rail i { transition: none; }
}


/* ==========================================================================
   23. Homepage hero layout (scoped with .ug-hero on the hero section)
   The template's hero-03 floats the small video over the middle of the
   headline. For a sales page the message must stay readable, so the video
   now sits under the CTA group (the scroll-to-fullscreen Flip animation of
   the template still works — it measures positions at runtime).
   ========================================================================== */
.ug-hero .mxd-hero-03 {
  justify-content: flex-start;
  padding-top: 13rem;
  padding-bottom: 4rem;
}
.ug-hero .mxd-hero-03__headline {
  padding: 0 2rem;
}
.ug-hero .mxd-hero-03__headline h1 {
  font-size: 4.4rem;
  line-height: 1.02;
}
.ug-hero .inner-headline__subtitle {
  max-width: 78rem;
  margin: 2.4rem auto 0;
}
.ug-hero .inner-headline__subtitle p {
  font: normal 500 1.7rem/1.6 var(--ug-font);
  letter-spacing: 0;
  color: var(--ug-text-2);
}
.ug-hero .mxd-hero-03__headline .mxd-hero-media__small {
  position: relative;
  inset: auto;
  width: 100%;
  max-width: 120rem;
  aspect-ratio: 16 / 9;
  margin-top: 5rem;
  transform: none;
  /* no overflow:hidden here — the video leaves this box while it scales */
}
.ug-hero .mxd-hero-03__control-left,
.ug-hero .mxd-hero-03__control-right,
.ug-hero .mxd-hero-03__bottom {
  display: none;
}
@media only screen and (min-width: 768px) {
  .ug-hero .mxd-hero-03 { padding-top: 16rem; }
  .ug-hero .mxd-hero-03__headline h1 { font-size: 7rem; }
  .ug-hero .inner-headline__subtitle p { font-size: 1.9rem; }
}
@media only screen and (min-width: 1200px) {
  .ug-hero .mxd-hero-03 { padding-top: 17rem; }
  .ug-hero .mxd-hero-03__headline h1 { font-size: 9rem; letter-spacing: -.4rem; }
  .ug-hero .inner-headline__subtitle p { font-size: 2.1rem; }
  .ug-hero .mxd-hero-03__headline .mxd-hero-media__small { width: 88%; margin-top: 7rem; }
}
@media only screen and (min-width: 1600px) {
  .ug-hero .mxd-hero-03__headline h1 { font-size: 10.4rem; }
}

/* footer wordmark: keep the brand teal after the template splits it into chars */
.mxd-footer__fw-mark .fw-mark__content,
.mxd-footer__fw-mark .fw-mark__content * { color: #006d78; }

/* small screens: compact floating CTA + hero badge */
@media only screen and (max-width: 767px) {
  .ug-float-cta { padding: .6rem .6rem .6rem 1.6rem; }
  .ug-float-cta__text { font-size: 0; }
  .ug-float-cta__text strong { font-size: 1.3rem; line-height: 1.25; }
  .ug-float-cta .ug-btn { height: 4rem; padding: 0 1.4rem; font-size: 1.3rem; }
  .ug-hero-badge .ug-eyebrow { font-size: 1rem; letter-spacing: .03rem; text-align: left; }
  /* floating CTA on phones: a compact pill in the bottom-right corner (the
     sentence did not fit next to the button and the button text overflowed) */
  .ug-float-cta .ug-btn { flex: 0 0 auto; white-space: nowrap; }
  .ug-stage .ug-toast { max-width: 24rem; }
}
.ug-table td.ug-where { font: normal 600 1.25rem/1.2 var(--ug-mono); color: var(--ug-text-3); white-space: nowrap; }
.ug-table { min-width: 56rem; }

/* documentation: the TOC column must stretch so its inner box can stick */
.ug-doc__toc { align-self: stretch; }

/* pricing table on phones: drop the "Disponible sur" column, no side-scroll */
@media only screen and (max-width: 575px) {
  .ug-table { min-width: 0; }
  .ug-table th:nth-child(2), .ug-table td.ug-where { display: none; }
  .ug-table th, .ug-table td { padding: 1.3rem 1.4rem; }
}


/* ==========================================================================
   24. Full-screen menu (template "mxd-menu") — restyled
   - dark panel in the site palette instead of the light one
   - all 8 links fit in the viewport height (no scrolling)
   - bigger logo, teal accent (no default purple/blue link colours)
   - new hover: teal bar + slide + arrow
   ========================================================================== */
.mxd-menu {
  --base-opp: #111214;
  --base-opp-rgb: 17, 18, 20;
  --t-opp-bright: #ffffff;
  --t-opp-medium: #8e93a1;
  --t-opp-muted: #26282c;
}
.mxd-menu__overlay {
  background:
    radial-gradient(60% 60% at 100% 0%, rgba(0, 109, 120, .22), transparent 60%),
    #111214;
}
.mxd-menu a { color: inherit; }

/* logo */
.mxd-menu__logo .menu-logo { mix-blend-mode: normal; }
.mxd-menu__logo .menu-logo__text,
.mxd-menu__logo .menu-logo__text span {
  font: normal 800 3.2rem/1 var(--ug-font) !important;
  letter-spacing: .1rem;
  color: #19c3cf !important;
  text-shadow: 0 0 2.4rem rgba(0, 109, 120, .8);
}

/* list */
.main-menu__item { padding: 1.3rem 0 1.4rem 0; }
.main-menu__divider { background-color: rgba(255, 255, 255, .08); }
.main-menu__link {
  position: relative;
  gap: 1.8rem;
  width: 100%;
  text-decoration: none !important;
}
.main-menu__number {
  min-width: 4.2rem;
  font: normal 500 1.2rem/1 var(--ug-mono);
  color: var(--ug-text-3) !important;
  transition: color .3s;
}
.main-menu__caption {
  font: normal 700 2.6rem/1.15 var(--ug-font) !important;
  letter-spacing: -.06rem;
  color: #ffffff !important;
  transition: color .35s, transform .5s var(--ug-ease);
}
/* teal bar that grows in front of the caption */
.main-menu__link::before {
  content: "";
  position: absolute;
  left: 5.8rem;
  top: 50%;
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--ug-accent-bright);
  transform: translateY(-50%);
  transition: width .5s var(--ug-ease);
}
/* arrow on the right */
.main-menu__link::after {
  content: "\2192";
  margin-left: auto;
  font: normal 400 2.2rem/1 var(--ug-font);
  color: var(--ug-accent-bright);
  opacity: 0;
  transform: translateX(-1.2rem);
  transition: opacity .35s, transform .5s var(--ug-ease);
}
.no-touch .main-menu__toggle:hover .main-menu__caption,
.main-menu__link:hover .main-menu__caption,
.main-menu__link:focus-visible .main-menu__caption {
  color: #ffffff !important;
  transform: translateX(3.2rem);
}
.main-menu__link:hover .main-menu__number,
.main-menu__link.active .main-menu__number { color: var(--ug-accent-bright) !important; }
.main-menu__link:hover::before,
.main-menu__link:focus-visible::before { width: 2.2rem; }
.main-menu__link:hover::after,
.main-menu__link:focus-visible::after { opacity: 1; transform: none; }
/* current page */
.main-menu__link.active .main-menu__caption { color: #19c3cf !important; }
.main-menu__link.active::before { width: 1rem; background: #19c3cf; }
.main-menu__link.active .main-menu__caption { transform: translateX(2rem); }

/* right column + bottom line */
.menu-contact__list li a,
.menu-contact__list li span { color: var(--ug-text-2) !important; }
.no-touch .menu-contact__list li a:hover { color: #19c3cf !important; }
.mxd-menu__caption p,
.menu-data__text { color: var(--ug-text-3) !important; }
.mxd-menu__left { overflow-y: auto; }

@media only screen and (min-width: 1200px) {
  .main-menu__item { padding: 1.4rem 0 1.5rem 0; }
  .main-menu__caption { font-size: 3rem !important; }
  .mxd-menu__logo .menu-logo__text,
  .mxd-menu__logo .menu-logo__text span { font-size: 4rem !important; }
}
@media only screen and (max-height: 760px) and (min-width: 1200px) {
  .main-menu__item { padding: 1rem 0 1.1rem 0; }
  .main-menu__caption { font-size: 2.4rem !important; }
}
@media only screen and (max-width: 1199px) {
  .main-menu__item { padding: 1.1rem 0 1.2rem 0; }
  .main-menu__caption { font-size: 2.4rem !important; }
}
@media only screen and (max-width: 1199px) {
  .mxd-menu__left { height: auto; max-height: none; overflow: visible; flex: 0 0 auto; }
  .mxd-menu__inner { overflow-y: auto; }
  .main-menu__item { padding: .9rem 0 1rem 0; }
  .main-menu__caption { font-size: 2.2rem !important; }
  .menu-contact { padding-top: 2.4rem; }
}

/* phones and tablets: the logo stays fixed at the top of the menu, so the
   list scrolls in its own area that starts below it (a soft fade instead of
   links sliding under the logo), and the spacing is tightened so all 8 links
   fit on a phone screen without scrolling */
@media only screen and (max-width: 1199px) {
  .mxd-menu__navigation { padding-top: 9.6rem; }
  .mxd-menu__inner {
    padding-top: 1.6rem;
    padding-bottom: 3.2rem;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 1.6rem);
    mask-image: linear-gradient(to bottom, transparent 0, #000 1.6rem);
  }
  .mxd-menu__caption { margin-bottom: 2.4rem; }
  .mxd-menu__caption p { font-size: 1.2rem; line-height: 1.5; }
  .main-menu__item { padding: .8rem 0 .9rem 0; }
}
@media only screen and (max-width: 1199px) and (max-height: 760px) {
  .mxd-menu__caption { margin-bottom: 1.6rem; }
  .main-menu__item { padding: .7rem 0 .8rem 0; }
  .main-menu__caption { font-size: 2rem !important; }
  .menu-contact { padding-top: 2rem; }
}


/* ==========================================================================
   25. Template sections restyled to match the new UI
   (template animations untouched — only sizes, colours, radii, spacing)
   ========================================================================== */

/* --- colour tokens: remove the template's purple accents ----------------- */
:root {
  --pt-t-accent-bright: #ffffff;
  --pt-t-accent-medium: #9ff3f8;
  --pt-t-accent-muted: #6fd6de;
}
::selection { background: var(--ug-accent); color: #fff; }

/* --- headings ------------------------------------------------------------ */
.mxd-section h2 {
  font: normal 600 3.4rem/1.1 var(--ug-font);
  letter-spacing: -.12rem;
}
.mxd-section h2 span { color: var(--ug-text-3); }
h1.large, h1.medium, h1.small {
  font-size: 4.2rem;
  line-height: 1.05;
  letter-spacing: -.16rem;
  white-space: normal;
}
.inner-headline__subtitle a,
.inner-headline__subtitle p {
  font: normal 500 1.8rem/1.55 var(--ug-font);
  letter-spacing: 0;
  color: var(--ug-text-2);
  max-width: 76rem;
}
.inner-headline__subtitle a span,
.inner-headline__subtitle p span { color: var(--ug-text-3); }
.manifest,
.manifest.manifest-s,
.manifest.manifest-m,
.manifest.manifest-l {
  font: normal 600 2.2rem/1.4 var(--ug-font);
  letter-spacing: -.04rem;
}
.manifest span { color: var(--ug-text-3); }
p.t-large { font-size: 1.8rem; }

/* big muted numbers ("C/01", "W/02"…) become a small label */
.title-number {
  display: inline-flex;
  align-items: center;
  padding: .8rem 1.4rem;
  border: 1px solid var(--ug-line-2);
  border-radius: 10rem;
  font: normal 500 1.2rem/1 var(--ug-mono) !important;
  letter-spacing: .08rem !important;
  color: var(--ug-accent-bright) !important;
}

/* component titles */
.mxd-niche-cards__name p { font-size: 2.4rem; letter-spacing: -.06rem; }
.mxd-cpb-list__name { font-size: 2.4rem; letter-spacing: -.06rem; }
.services-card__title p { font-size: 3.6rem; letter-spacing: -.12rem; }
.mxd-process-points__title p { font-size: 2.2rem; letter-spacing: -.06rem; }
.pricing-header__title { font-size: 3rem; letter-spacing: -.08rem; }
.mxd-projects-list__title h3,
.mxd-projects-list__title p { font-size: 2.2rem; letter-spacing: -.06rem; }
.mxd-next-prj__caption p { font-size: 3.4rem; letter-spacing: -.12rem; }
.mxd-next-prj__name a,
.mxd-next-prj__name p { font-size: 2rem; letter-spacing: -.04rem; }
.mxd-accordion__title p { font-size: 1.8rem; letter-spacing: -.02rem; }
.project-name-s { font-size: 2rem; }
.blog-name-m { font-size: 1.9rem; }
.mxd-divider__caption h2,
.mxd-promo__caption h2 { max-width: 90rem; }

/* --- cards & media: rounded, bordered, same surface as the new cards ----- */
.mxd-niche-cards__inner {
  border-radius: var(--ug-radius);
  border: 1px solid var(--ug-line);
  background-color: var(--ug-card);
  overflow: hidden;
  transition: border-color .4s;
}
.mxd-niche-cards__inner.permanent { background-color: #0c0c0d; }
.mxd-niche-cards__item:hover .mxd-niche-cards__inner { border-color: rgba(var(--ug-accent-bright-rgb), .35); }
.mxd-project-item__media,
.mxd-blog-item__media,
.mxd-next-prj__media,
.mxd-object-link__media,
.mxd-images-grid__inner,
.mxd-cpb-list__image img {
  border-radius: 2rem;
  overflow: hidden;
}
.mxd-pricing-table__inner {
  border-radius: var(--ug-radius);
  border: 1px solid rgba(var(--ug-accent-bright-rgb), .3);
  background-color: var(--ug-card);
  overflow: hidden;
}
.mxd-accordion__divider,
.mxd-process-points__divider,
.mxd-cpb-list__divider,
.mxd-projects-list__divider,
.split-info__divider,
.split-data__divider { background-color: var(--ug-line-2) !important; }

/* full-width parallax dividers become large rounded panels */
.mxd-divider {
  margin: 0 1.2rem;
  border-radius: 2.4rem;
  height: 44rem;
}
.mxd-divider__image,
.mxd-divider__video { height: 100%; }


/* --- tags (inner page heroes) become chips -------------------------------- */
.inner-headline .tag,
.mxd-section .tag.tag-m {
  display: inline-flex;
  align-items: center;
  padding: .6rem 1.2rem;
  margin: 0 .4rem .6rem 0;
  border: 1px solid var(--ug-line-2);
  border-radius: 10rem;
  font: normal 600 1.2rem/1.2 var(--ug-mono);
  color: var(--ug-text-2);
  background: rgba(255, 255, 255, .02);
}

/* --- buttons: bracket buttons → pills, square buttons → rounded ---------- */
main .btn-line {
  padding: 1.2rem 2.2rem;
  border: 1px solid var(--ug-line-2);
  border-radius: 10rem;
  background: rgba(255, 255, 255, .03);
  font: normal 700 1.4rem/1.2 var(--ug-font);
  letter-spacing: 0;
  text-transform: none;
  transition: background-color .3s, border-color .3s, transform .4s var(--ug-ease);
}
main .btn-line::before,
main .btn-line::after { content: none; }
.no-touch main .btn-line:hover { background: rgba(255, 255, 255, .09); border-color: rgba(255, 255, 255, .3); transform: translateY(-2px); }
main .btn-line.btn-line-permanent { border-color: rgba(255, 255, 255, .45); background: rgba(0, 0, 0, .25); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
main .btn-default-icon,
main .btn-default-icon-small {
  border-radius: 10rem;
  padding: .5rem .5rem .5rem 2.2rem;
  font: normal 700 1.5rem/1 var(--ug-font);
  letter-spacing: 0;
  text-transform: none;
}
main .btn-default-icon i,
main .btn-default-icon-small i { border-radius: 50%; }
main .btn-default-accent { box-shadow: 0 1rem 3rem -1rem rgba(var(--ug-accent-bright-rgb), .6); }
main .btn-default-outline { border-color: var(--ug-line-2); }

/* --- section spacing: tighter rhythm (template values were 14–20rem) ----- */
.mxd-section.padding-bottom-default,
.mxd-section.padding-bottom-preview { padding-bottom: 9rem; }
.mxd-section.padding-top-number,
.mxd-section.padding-top-title,
.mxd-section.padding-top-subtitle { padding-top: 9rem; }
.mxd-section.padding-bottom-grid-l-to-title { padding-bottom: 6rem; }

/* --- contact page: the huge e-mail banner --------------------------------- */
.headline-email-text .fullwidth-text__content.small { font-size: 6.2cqw; }
.headline-email-text .fullwidth-text__content span { text-transform: none; letter-spacing: -.02em; }

@media only screen and (min-width: 768px) {
  .mxd-section h2 { font-size: 4.6rem; letter-spacing: -.16rem; }
  h1.large, h1.medium, h1.small { font-size: 6rem; letter-spacing: -.22rem; }
  .inner-headline__subtitle a, .inner-headline__subtitle p { font-size: 2rem; }
  .manifest, .manifest.manifest-s, .manifest.manifest-m, .manifest.manifest-l { font-size: 2.6rem; }
  .mxd-niche-cards__name p { font-size: 2.8rem; }
  .mxd-cpb-list__name { font-size: 2.8rem; }
  .services-card__title p { font-size: 4.6rem; }
  .mxd-next-prj__caption p { font-size: 4.4rem; }
  .mxd-accordion__title p { font-size: 2rem; }
  .mxd-divider { margin: 0 3rem; border-radius: 3.2rem; height: 56rem; }
  .mxd-section.padding-bottom-default,
  .mxd-section.padding-bottom-preview { padding-bottom: 12rem; }
  .mxd-section.padding-top-number,
  .mxd-section.padding-top-title,
  .mxd-section.padding-top-subtitle { padding-top: 12rem; }
}
@media only screen and (min-width: 1200px) {
  .mxd-section h2 { font-size: 5.6rem; letter-spacing: -.22rem; }
  h1.large, h1.medium, h1.small { font-size: 7.2rem; letter-spacing: -.28rem; }
  .inner-headline__subtitle a, .inner-headline__subtitle p { font-size: 2.1rem; }
  .manifest, .manifest.manifest-s, .manifest.manifest-m, .manifest.manifest-l { font-size: 2.8rem; }
  .services-card__title p { font-size: 5.4rem; }
  .mxd-next-prj__caption p { font-size: 5rem; }
  .mxd-next-prj__name a, .mxd-next-prj__name p { font-size: 2.4rem; }
  .pricing-header__title { font-size: 3.6rem; }
  .mxd-projects-list__title h3, .mxd-projects-list__title p { font-size: 2.6rem; }
  .mxd-divider { margin: 0 7rem; height: 64rem; }
  .mxd-section.padding-bottom-default,
  .mxd-section.padding-bottom-preview { padding-bottom: 14rem; }
  .mxd-section.padding-top-number,
  .mxd-section.padding-top-title,
  .mxd-section.padding-top-subtitle { padding-top: 14rem; }
}
@media only screen and (min-width: 1600px) {
  .mxd-section h2 { font-size: 6.4rem; }
  h1.large, h1.medium, h1.small { font-size: 8.4rem; letter-spacing: -.32rem; }
  .mxd-cpb-list__name { font-size: 3.2rem; max-width: 370px; }
  .mxd-niche-cards__name p { font-size: 3.2rem; }
}


/* ==========================================================================
   26. Compact CTA (replaces the template's repeated "CTA with Marquee")
   ========================================================================== */
.ug-cta--compact { padding: 4rem 2.4rem; border-radius: 2.8rem; }
.ug-cta--compact .ug-title { font-size: 3rem; letter-spacing: -.1rem; margin: 1.6rem 0 1.2rem; }
.ug-cta--compact .ug-lead { font-size: 1.6rem; color: rgba(255, 255, 255, .78); max-width: 56rem; }
.ug-eyebrow--light {
  border-color: rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .08);
  color: #e6fbfc;
}
.ug-cta--compact .ug-btn--ghost { border-color: rgba(255, 255, 255, .35); background: rgba(0, 0, 0, .12); }
.ug-cta--compact .ug-btn--ghost:hover { background: rgba(0, 0, 0, .25); }
.ug-cta--compact::after {
  /* slow light sweep */
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: -40%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .08), transparent);
  animation: ug-sweep 7s ease-in-out infinite;
  pointer-events: none;
}
@keyframes ug-sweep { 0%, 60% { left: -40%; } 100% { left: 120%; } }
@media only screen and (min-width: 768px) {
  .ug-cta--compact { padding: 5rem 5rem; }
  .ug-cta--compact .ug-title { font-size: 3.8rem; }
}
@media only screen and (min-width: 1200px) {
  .ug-cta--compact { padding: 5.6rem 6.4rem; }
  .ug-cta--compact .ug-title { font-size: 4.4rem; letter-spacing: -.16rem; }
  .ug-cta--compact .ug-cta__inner { grid-template-columns: 1.5fr 1fr; }
}


/* ==========================================================================
   27. Footer (rebuilt markup, .ug-footer)
   ========================================================================== */
.ug-footer {
  padding: 8rem 0 0;
  border-top: 1px solid var(--ug-line);
  background:
    radial-gradient(60% 50% at 50% 100%, rgba(0, 109, 120, .22), transparent 70%),
    var(--ug-bg);
}
.ug-footer__top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem 2.4rem;
}
.ug-footer__brand { grid-column: 1 / -1; max-width: 42rem; }
.ug-footer__logo {
  display: inline-block;
  margin-bottom: 1.6rem;
  font: normal 800 2.8rem/1 var(--ug-font);
  letter-spacing: .1rem;
  color: #19c3cf;
}
.ug-footer__logo:hover { color: #9ff3f8; }
.ug-footer__brand p {
  margin: 0 0 2.4rem;
  font: normal 500 1.5rem/1.6 var(--ug-font);
  color: var(--ug-text-2);
}
.ug-footer__title {
  margin: 0 0 1.8rem;
  font: normal 600 1.15rem/1 var(--ug-mono);
  letter-spacing: .08rem;
  text-transform: uppercase;
  color: var(--ug-text-3);
}
.ug-footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.ug-footer__col a,
.ug-footer__col span {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  font: normal 600 1.45rem/1.35 var(--ug-font);
  color: var(--ug-text-2);
  text-decoration: none;
  transition: color .25s, transform .35s var(--ug-ease);
}
.ug-footer__col a:hover { color: #fff; transform: translateX(.3rem); }
.ug-footer__contact a,
.ug-footer__contact span { font-size: 1.35rem; word-break: break-word; }
.ug-footer__contact i { color: var(--ug-accent-bright); font-size: 1.6rem; flex: 0 0 auto; }
.ug-footer__contact span { color: var(--ug-text-3); }

.ug-footer__mark { margin: 6rem 0 0; }
.ug-footer__mark .fw-mark__content { font-size: 21cqw; justify-content: center; }
.ug-footer__mark .fw-mark__content span {
  font-family: var(--ug-font);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: .8;
  color: #006d78;
}

.ug-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.2rem 2.4rem;
  padding: 2.4rem 0 3rem;
  border-top: 1px solid var(--ug-line);
}
.ug-footer__bottom p { margin: 0; font: normal 500 1.3rem/1.4 var(--ug-font); color: var(--ug-text-3); }
.ug-footer__bottom ul { display: flex; flex-wrap: wrap; gap: .6rem 2rem; margin: 0; padding: 0; list-style: none; }
.ug-footer__bottom ul a,
.ug-footer__top-btn {
  font: normal 600 1.3rem/1.4 var(--ug-font);
  color: var(--ug-text-2);
  text-decoration: none;
}
.ug-footer__bottom ul a:hover,
.ug-footer__top-btn:hover { color: #fff; }
.ug-footer__top-btn { display: inline-flex; align-items: center; gap: .6rem; margin-left: auto; }
.ug-footer__top-btn i { color: var(--ug-accent-bright); transition: transform .35s var(--ug-ease); }
.ug-footer__top-btn:hover i { transform: translateY(-.3rem); }

@media only screen and (min-width: 768px) {
  .ug-footer { padding-top: 10rem; }
  .ug-footer__top { grid-template-columns: repeat(4, 1fr); }
}
@media only screen and (min-width: 1200px) {
  .ug-footer__top { grid-template-columns: 1.6fr 1fr 1fr 1fr 1.3fr; gap: 4rem; }
  .ug-footer__brand { grid-column: auto; }
}
@media only screen and (max-width: 767px) {
  .ug-footer__top > .ug-footer__col:last-child { grid-column: 1 / -1; }
  .ug-footer__contact a, .ug-footer__contact span { word-break: normal; }
}

/* Matter.js CTA on the home page → rounded panel with pill tags */
.mxd-promo.mxd-gravity-section { margin: 0 1.2rem; border-radius: 2.8rem; overflow: hidden;
  background: radial-gradient(70% 90% at 100% 100%, rgba(46,197,209,.35), transparent 60%), linear-gradient(135deg, #006d78 0%, #00454c 100%); }
.mxd-gravity-section .object { border-radius: 10rem; box-shadow: 0 1rem 2.4rem -1rem rgba(0,0,0,.5); }
.mxd-gravity-section .object p { font-family: var(--ug-font); font-weight: 700; letter-spacing: 0; text-transform: none; }
@media only screen and (min-width: 768px) { .mxd-promo.mxd-gravity-section { margin: 0 3rem; border-radius: 3.2rem; } }
@media only screen and (min-width: 1200px) { .mxd-promo.mxd-gravity-section { margin: 0 7rem 4rem; } }

/* About hero: the 8 floating photos stay as a soft collage BEHIND the title */
[class*="headline-banner-0"] { opacity: .22 !important; z-index: 0 !important; filter: saturate(.7); border-radius: 1.6rem; overflow: hidden; pointer-events: none; }
.inner-headline__centered, .inner-headline__title.centered, .inner-headline__subtitle { position: relative; z-index: 2; }
.inner-headline .tag, .mxd-section .tag.tag-m { width: fit-content; }
.inner-headline__title.centered + .inner-headline__subtitle,
.inner-headline__centered .inner-headline__subtitle { margin-top: 2.4rem; }

/* contact page */
.headline-email-text .fullwidth-text__content span { color: #19c3cf; line-height: 1.05; }
.headline-email-text .fullwidth-text__wrap { padding-bottom: 1rem; }
.mxd-section.bg-color-accent {
  width: auto;
  margin: 0 1.2rem;
  border-radius: 2.8rem;
  padding-top: 6rem !important;
  padding-bottom: 4rem !important;
  background: radial-gradient(70% 90% at 100% 100%, rgba(46,197,209,.35), transparent 60%), linear-gradient(135deg, #006d78 0%, #00454c 100%) !important;
}
@media only screen and (min-width: 768px) { .mxd-section.bg-color-accent { margin: 0 3rem; border-radius: 3.2rem; } }
@media only screen and (min-width: 1200px) { .mxd-section.bg-color-accent { margin: 0 7rem; padding-top: 7rem !important; padding-bottom: 5rem !important; } }

/* pricing card (template) */
.pricing-header__title span { color: var(--ug-accent-bright); }
.mxd-check-list li { align-items: center; gap: 1rem; }
.mxd-check-list li span {
  font: normal 600 1.5rem/1.5 var(--ug-font) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--ug-text-2) !important;
}
.mxd-check-list li svg { fill: var(--ug-accent-bright) !important; flex: 0 0 auto; }
.pricing-data__btnholder .btn-default-outline {
  background: var(--ug-accent);
  border-color: var(--ug-accent);
  color: #fff;
  box-shadow: 0 1rem 3rem -1rem rgba(var(--ug-accent-bright-rgb), .6);
}
.pricing-plan__caption { color: var(--ug-text); }

/* phones: long French words must never overflow the hero */
@media only screen and (max-width: 767px) {
  .inner-headline h1, h1.large, h1.medium, h1.small {
    font-size: 3.4rem;
    letter-spacing: -.1rem;
    overflow-wrap: break-word;
    -webkit-hyphens: auto;
    hyphens: auto;
  }
  .mxd-section h2 { font-size: 3rem; overflow-wrap: break-word; }
  .services-card__title p { font-size: 3rem; }
}
@media only screen and (min-width: 768px) {
  .inner-headline h1:not(.large):not(.medium):not(.small) { font-size: 6rem; letter-spacing: -.22rem; }
}
@media only screen and (min-width: 1200px) {
  .inner-headline h1:not(.large):not(.medium):not(.small) { font-size: 7.2rem; letter-spacing: -.28rem; }
}
@media only screen and (max-width: 767px) {
  .inner-headline.fullheight .inner-headline__absolute { position: relative; height: 100%; }
  .inner-headline.fullheight .inner-headline__absolute > .mxd-container { width: 100%; }
  .inner-headline.fullheight .inner-headline__centered { position: relative; left: auto; top: auto; transform: none; padding: 0 2.4rem; }
}
.inner-headline__centered .inner-headline__subtitle p { text-align: center; margin-left: auto; margin-right: auto; }


/* ==========================================================================
   28. Third pass — home hero background, inner-page hero glow, final CTA
   ========================================================================== */

/* home hero: two-line title, "anticiper." in brand teal */
.ug-hero h1 .ug-h1-accent,
.ug-hero h1 .ug-h1-accent * {
  color: #19b8c4 !important;
  text-shadow: 0 0 4rem rgba(0, 150, 165, .45);
}

/* home hero: abstract background that starts behind the header and fades to dark */
.ug-hero { position: relative; }
.ug-hero::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 110vh;
  min-height: 80rem;
  background: url(../img/brand/hero-abstract.png) center top / cover no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 45%, rgba(0, 0, 0, .55) 70%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 45%, rgba(0, 0, 0, .55) 70%, transparent 100%);
  opacity: .95;
  pointer-events: none;
  z-index: 0;
}
.ug-hero > * { position: relative; z-index: 1; }
/* The hero children above sit at z-index 1, later in the DOM than the
   header (also z-index 1), so on the home page they covered the header and
   no nav link / CTA / logo could be clicked. Keep the header above page
   content but below the full-screen menu (z-index 11). */
.mxd-header { z-index: 5; }
.ug-hero .mxd-hero-03 { background: transparent; }

/* inner pages (except video heroes): teal glow + abstract texture behind the hero */
.ug-page-hero { position: relative; isolation: isolate; }
.ug-page-hero::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -14rem;
  height: calc(100% + 30rem);
  min-height: 84rem;
  background:
    radial-gradient(55% 60% at 12% 18%, rgba(0, 150, 165, .38), transparent 70%),
    radial-gradient(45% 55% at 92% 8%, rgba(0, 109, 120, .45), transparent 70%),
    url(../img/brand/hero-abstract.png) center top / cover no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 40%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 40%, transparent 100%);
  opacity: .7;
  pointer-events: none;
  z-index: -1;
}

/* final home CTA on the abstract teal image */
.ug-cta--abstract {
  padding: 5rem 2.4rem;
  background: url(../img/brand/cta-abstract.webp) center / cover no-repeat, linear-gradient(135deg, #006d78 0%, #00454c 100%);
}
.ug-cta--abstract .ug-title { font-size: 3.2rem; margin: 1.6rem 0 1.4rem; }
.ug-cta--abstract .ug-lead { color: rgba(255, 255, 255, .82); max-width: 60rem; }
@media only screen and (min-width: 768px) {
  .ug-cta--abstract { padding: 7rem 6rem; }
  .ug-cta--abstract .ug-title { font-size: 4.4rem; }
}
@media only screen and (min-width: 1200px) {
  .ug-cta--abstract { padding: 9rem 8rem; }
  .ug-cta--abstract .ug-title { font-size: 5.2rem; letter-spacing: -.2rem; }
  .ug-cta--abstract .ug-cta__inner { grid-template-columns: 1.5fr 1fr; }
  .ug-cta--compact .ug-title { font-size: 4rem; }
}

/* feature pages: the single screenshot keeps rounded corners */
.mxd-images-grid__item.wide .mxd-images-grid__inner { border-radius: 2.4rem; }

/* video heroes (Services, About): darken the teal video so the text and logo stay readable */
.inner-headline__bg .inner-headline__cover {
  background: linear-gradient(180deg, rgba(8, 10, 11, .78) 0%, rgba(8, 10, 11, .35) 30%, rgba(8, 10, 11, .45) 60%, rgba(15, 15, 15, .96) 100%) !important;
  opacity: 1 !important;
}
/* full-screen menu video: soft dark overlay so the logo reads on top */
.mxd-menu__media .menu-media__wrapper { position: relative; }
.mxd-menu__media .menu-media__wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(8, 10, 11, .75) 0%, rgba(8, 10, 11, 0) 30%),
    linear-gradient(90deg, rgba(8, 10, 11, 0) 70%, rgba(17, 18, 20, .9) 100%),
    rgba(8, 10, 11, .18);
  pointer-events: none;
}

/* ------------------------------------------------------------------
   Logo mark (U + wrench) next to the wordmark — header, menu, footer.
   The big "UPGARD" at the bottom of the footer is left as text.
   ------------------------------------------------------------------ */
.ug-logo-mark { display: inline-block; flex: none; width: auto; fill: currentColor; }
.mxd-logo { gap: 1rem; }
.mxd-logo__image.ug-logo-mark {
  height: 3rem;
  color: #19c3cf;
  filter: drop-shadow(0 0 1.2rem rgba(0, 150, 165, .45));
  transition: transform var(--_animspeed-medium, .3s) ease;
}
.mxd-logo:hover .ug-logo-mark { transform: rotate(-8deg); }
.mxd-header .mxd-logo__text { color: #19c3cf !important; }
.mxd-menu__logo .menu-logo { display: inline-flex; align-items: center; gap: 1.4rem; }
.menu-logo__mark {
  height: 3.6rem;
  color: #19c3cf;
  filter: drop-shadow(0 0 2rem rgba(0, 109, 120, .8));
}
.ug-footer__logo { display: inline-flex; align-items: center; gap: 1.2rem; }
.ug-footer__logo-mark { height: 3rem; }
@media only screen and (min-width: 1200px) {
  .menu-logo__mark { height: 4.4rem; }
}

/* ------------------------------------------------------------------
   About — "Approche": teal light coming in from the right edge
   (a soft glowing disc with faint rings, slowly breathing).
   ------------------------------------------------------------------ */
.ug-glow-right { position: relative; overflow-x: clip; overflow-y: visible; z-index: 0; }
.ug-glow-right + * { position: relative; z-index: 1; }
.ug-glow-right > *:not(.ug-glow-right__light) { position: relative; z-index: 1; }
.ug-glow-right__light {
  position: absolute;
  top: 50%;
  right: 0;
  width: min(78vw, 110rem);
  aspect-ratio: 1;
  transform: translate(46%, -50%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle, rgba(159, 243, 248, .6) 0%, rgba(25, 195, 207, .48) 10%, rgba(0, 150, 165, .32) 26%, rgba(0, 109, 120, .15) 44%, rgba(0, 109, 120, 0) 66%);
  filter: blur(6px);
  animation: ug-glow-breathe 9s ease-in-out infinite alternate;
}
/* faint concentric rings fading out with the light */
.ug-glow-right__light::after {
  content: "";
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, rgba(46, 197, 209, .16) 0 1px, transparent 1px 5.6rem);
  -webkit-mask-image: radial-gradient(circle, #000 0%, rgba(0, 0, 0, .55) 38%, transparent 68%);
          mask-image: radial-gradient(circle, #000 0%, rgba(0, 0, 0, .55) 38%, transparent 68%);
}
@keyframes ug-glow-breathe {
  from { opacity: .75; transform: translate(48%, -50%) scale(.96); }
  to   { opacity: 1;   transform: translate(44%, -50%) scale(1.04); }
}
@media only screen and (max-width: 767px) {
  .ug-glow-right__light { width: 120vw; top: 30%; transform: translate(62%, -50%); opacity: .7; animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ug-glow-right__light { animation: none; }
}


/* ==========================================================================
   26. Phone fixes (2026-09-27)
   ========================================================================== */
/* home hero tag: the full sentence ran onto two lines on phones ("IA" alone
   on the second one); phones get the short version on one line */
.ug-hero-badge__short { display: none; }
@media only screen and (max-width: 575px) {
  .ug-hero-badge__long { display: none; }
  .ug-hero-badge__short { display: inline; }
  .ug-hero-badge .ug-eyebrow { font-size: 1.1rem; letter-spacing: .05rem; white-space: nowrap; }

  .ug-float-cta {
    left: auto;
    right: 1.6rem;
    bottom: 1.6rem;
    padding: .5rem;
  }
  .ug-float-cta__text { display: none; }
  .ug-float-cta .ug-btn { height: 4.6rem; padding: 0 2rem; font-size: 1.4rem; }
}
/* the floating CTA never sits on top of the open menu */
body:has(.mxd-menu__hamburger.active) .ug-float-cta {
  opacity: 0;
  pointer-events: none;
}