/* ══════════════════════════════════════════════════════════
   LUMOS BUILDING AUTOMATION — style.css
   Color Palette:
     Gold   : #d4af37  /  #ffb347  /  #f0d578
     Navy   : #0f1729  /  #1a2745  /  #0a0f1e
     Teal   : #5eb3b7  /  #2abfb0  /  #00d9ff
   Fonts    : Josefin Sans (headings) · Inter (body)
══════════════════════════════════════════════════════════ */

/* ─── 1. RESET & VARIABLES ─────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --navy:          #0f1729;
  --navy-deep:     #0a0f1e;
  --navy-mid:      #1a2745;
  --gold:          #d4af37;
  --gold-light:    #f0d578;
  --amber:         #ffb347;
  --teal:          #5eb3b7;
  --teal-vivid:    #2abfb0;
  --cyan:          #00d9ff;
  --white:         #f8f9fa;
  --gray:          #9ca3af;
  --glass-bg:      rgba(15,23,41,0.85);
  --glass-border:  rgba(212,175,55,0.3);
  --glow-gold:     rgba(212,175,55,0.4);
  --glow-teal:     rgba(42,191,176,0.4);
  --font-head:     'Josefin Sans', sans-serif;
  --font-body:     'Josefin Sans', sans-serif;
  --radius:        1rem;
  --radius-lg:     1.5rem;
  --radius-xl:     2rem;
  --radius-pill:   9999px;
}

html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: var(--font-body);
  color: var(--white);
  background: linear-gradient(to bottom, var(--navy) 0%, var(--navy-mid) 50%, var(--navy) 100%);
  background-attachment: fixed;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--navy-deep); }
::-webkit-scrollbar-thumb { background: linear-gradient(to bottom, var(--gold), var(--teal)); border-radius: var(--radius-pill); }
::selection { background: rgba(212,175,55,0.3); color: var(--white); }

/* ─── 2. UTILITY CLASSES ───────────────────────────────── */
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
.glass-panel { background: var(--glass-bg); border: 1px solid var(--glass-border); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.glass-card  { background: rgba(26,39,69,0.7); border: 1px solid rgba(212,175,55,0.2); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }

.gold-text { color: var(--gold); -webkit-text-fill-color: currentColor; }
.teal-text { color: var(--teal-vivid); -webkit-text-fill-color: currentColor; }
.lumos-gradient-text { color: var(--gold); -webkit-text-fill-color: currentColor; }

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .gold-text {
    background: linear-gradient(135deg,#d4af37,#ffb347,#d4af37);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
  .teal-text {
    background: linear-gradient(135deg,#5eb3b7,#2abfb0,#00d9ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
  .lumos-gradient-text {
    background: linear-gradient(135deg,#d4af37 0%,#ffb347 45%,#5eb3b7 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}
.teal-accent { color: var(--teal-vivid); }

.btn-gold {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .75rem 1.75rem;
  background: linear-gradient(135deg, var(--gold), var(--amber));
  color: var(--navy-deep) !important;
  font-family: var(--font-head); font-weight: 700; letter-spacing: .1em; font-size: .85rem;
  border-radius: var(--radius-pill); border: none; cursor: pointer; text-decoration: none;
  transition: box-shadow .3s, transform .2s;
  position: relative; overflow: hidden; isolation: isolate;
}
.btn-gold::after { content:''; position:absolute; inset:0; background:linear-gradient(135deg,var(--amber),var(--gold)); opacity:0; transition:opacity .3s; z-index:-1; }
.btn-gold:hover { box-shadow: 0 0 30px rgba(212,175,55,.55); transform: scale(1.03); }
.btn-gold:hover::after { opacity:1; }
.btn-gold > * { position:relative; z-index:1; }

.btn-outline-gold {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .75rem 1.75rem;
  background: transparent;
  border: 2px solid var(--gold);
  color: var(--gold); font-family: var(--font-head); font-weight: 700;
  letter-spacing: .1em; font-size: .85rem; border-radius: var(--radius-pill);
  cursor: pointer; text-decoration: none; transition: all .3s;
}
.btn-outline-gold:hover { background: var(--gold); color: var(--navy-deep); box-shadow: 0 0 20px rgba(212,175,55,.4); }

.btn-teal {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .75rem 1.75rem;
  background: linear-gradient(135deg, var(--teal), var(--teal-vivid));
  color: var(--navy-deep); font-family: var(--font-head); font-weight: 700;
  letter-spacing: .1em; font-size: .85rem; border-radius: var(--radius-pill);
  border: none; cursor: pointer; text-decoration: none; transition: all .3s;
  position: relative; overflow: hidden;
}
.btn-teal:hover { box-shadow: 0 0 30px rgba(42,191,176,.5); transform: scale(1.03); }

.section-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .4rem 1.2rem; border-radius: var(--radius-pill);
  background: linear-gradient(135deg, rgba(212,175,55,.15), rgba(94,179,183,.15));
  border: 1px solid rgba(212,175,55,.3); backdrop-filter: blur(12px);
  font-family: var(--font-head); font-weight: 700; font-size: .7rem;
  color: var(--gold); letter-spacing: .2em; text-transform: uppercase;
  margin-bottom: 1rem;
}
.section-badge--portfolio{
  font-size: clamp(.85rem, 1.6vw, 1.05rem);
  padding: .55rem 1.6rem;
  letter-spacing: .28em;
  color: var(--white);
  border: 1px solid transparent;
  background:
    linear-gradient(rgba(15,23,41,.60), rgba(15,23,41,.60)) padding-box,
    linear-gradient(90deg, rgba(212,175,55,.7), rgba(42,191,176,.65), rgba(0,217,255,.6), rgba(212,175,55,.7)) border-box;
  background-size: 100% 100%, 260% 100%;
  animation: badge-border-shift 8s linear infinite;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 18px 55px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.06) inset;
}
.section-badge--portfolio::before{
  content:'';
  position:absolute;
  inset:-80% -40%;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.22) 50%, transparent 70%);
  transform: translateX(-55%) rotate(14deg);
  animation: badge-sweep 3.2s ease-in-out infinite;
  opacity:.75;
  pointer-events:none;
  mix-blend-mode: overlay;
}
.section-badge--portfolio::after{
  content:'';
  position:absolute; inset:0;
  background:
    radial-gradient(240px 80px at 25% 50%, rgba(212,175,55,.18) 0%, transparent 70%),
    radial-gradient(240px 80px at 75% 50%, rgba(42,191,176,.16) 0%, transparent 70%);
  opacity:.9;
  pointer-events:none;
  z-index:-1;
}
@keyframes badge-border-shift {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 0 0, 260% 0; }
}
@keyframes badge-sweep {
  0%   { transform: translateX(-65%) rotate(14deg); }
  55%  { transform: translateX(65%) rotate(14deg); }
  100% { transform: translateX(65%) rotate(14deg); }
}
@media (prefers-reduced-motion: reduce) {
  .section-badge--portfolio,
  .section-badge--portfolio::before,
  .portfolio .section-title::after {
    animation: none !important;
  }
}
.section-badge--teal {
  font-family: var(--font-head); font-weight: 700; font-size: .75rem;
  color: var(--teal-vivid); letter-spacing: .25em; text-transform: uppercase;
  display: block; margin-bottom: .5rem;
}
.section-label {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-head); font-weight: 700; font-size: .7rem;
  color: var(--gold); letter-spacing: .25em; text-transform: uppercase;
  margin-bottom: 1rem;
}
.section-title {
  font-family: var(--font-head); font-size: clamp(2.05rem, 5vw, 3.7rem);
  font-weight: 900; color: var(--white); line-height: 1.1; margin-bottom: 1rem;
  text-align: center;
}
.section-subtitle { color: var(--gray); max-width: 40rem; margin: 0 auto; line-height: 1.7; }
.section-header { text-align: center; margin-bottom: 3.5rem; }

.h-line { display:inline-block; width:3rem; height:2px; background:linear-gradient(to right,var(--teal-vivid),transparent); }
.dot { display:inline-block; width:.5rem; height:.5rem; border-radius:50%; background:var(--gold); animation: pulse 2s ease-in-out infinite; }
.pulse-dot { display:inline-block; width:.5rem; height:.5rem; border-radius:50%; background:var(--gold); animation: pulse 2s ease-in-out infinite; }

.corner-bracket { position:absolute; width:3rem; height:3rem; pointer-events:none; }
.corner-bracket--tl { top:.75rem; left:.75rem; border-left:2px solid rgba(42,191,176,.4); border-top:2px solid rgba(42,191,176,.4); }
.corner-bracket--br { bottom:.75rem; right:.75rem; border-right:2px solid rgba(42,191,176,.4); border-bottom:2px solid rgba(42,191,176,.4); }
.corner-bracket.teal { border-color: var(--teal-vivid) !important; opacity: .5; }

.section-bg {
  position:absolute; inset:0;
  background: linear-gradient(to bottom, var(--navy), var(--navy-mid), var(--navy));
  z-index: 0;
}

/* ─── 3. ANIMATIONS ────────────────────────────────────── */
@keyframes pulse        { 0%,100%{transform:scale(1);opacity:.5} 50%{transform:scale(1.5);opacity:1} }
@keyframes float-up     { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
@keyframes float-dn     { 0%,100%{transform:translateY(0)} 50%{transform:translateY(12px)} }
@keyframes scan-h       { 0%{transform:translateX(-100%)} 100%{transform:translateX(100%)} }
@keyframes scan-v       { 0%{transform:translateY(-100%)} 100%{transform:translateY(100%)} }
@keyframes swing        { from{transform:rotate(3deg)} to{transform:rotate(-3deg)} }
@keyframes bounce-y     { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes border-flow  { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
@keyframes shimmer-move { 0%{background-position:-1000px 0} 100%{background-position:1000px 0} }
@keyframes rotate-360   { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
@keyframes glow-pulse   { 0%,100%{box-shadow:0 0 20px var(--glow-gold)} 50%{box-shadow:0 0 50px var(--glow-gold),0 0 80px rgba(212,175,55,.2)} }
@keyframes reveal-up    { from{opacity:0;transform:translateY(40px)} to{opacity:1;transform:translateY(0)} }
@keyframes fade-in      { from{opacity:0} to{opacity:1} }
@keyframes count-glow   { 0%,100%{text-shadow:0 0 20px rgba(42,191,176,.3)} 50%{text-shadow:0 0 40px rgba(42,191,176,.8),0 0 60px rgba(42,191,176,.4)} }
@keyframes hero-scroll  { 0%,100%{transform:translateY(0)} 50%{transform:translateY(10px)} }
@keyframes gradient-pan { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
@keyframes particle-float { 0%,100%{transform:translateY(0) scale(1);opacity:.3} 50%{transform:translateY(-25px) scale(1.4);opacity:1} }

/* Reveal on scroll */
.reveal { opacity: 1; transform: translateY(0); transition: opacity .8s cubic-bezier(.25,.46,.45,.94), transform .8s cubic-bezier(.25,.46,.45,.94); }
.reveal.visible { opacity: 1; transform: translateY(0); }
.fade-in-up  { opacity: 1 !important; transform: translateY(0) !important; animation: none !important; }
.fade-in-right { opacity: 1 !important; transform: translateX(0) !important; animation: none !important; }

/* ─── 4. CURSOR GLOW ───────────────────────────────────── */
.cursor-glow {
  pointer-events: none; position: fixed; z-index: 9998;
  width: 480px; height: 480px; border-radius: 50%;
  background: radial-gradient(circle, rgba(212,175,55,.07) 0%, transparent 65%);
  transform: translate(-50%,-50%);
  transition: left .15s ease-out, top .15s ease-out;
  will-change: left, top;
}

/* ─── 5. AMBIENT GLOWS ─────────────────────────────────── */
.ambient-glow { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.ambient-glow__tl {
  position: absolute; top: -15%; left: -10%; width: 45vw; height: 45vw; border-radius: 50%;
  background: radial-gradient(circle, rgba(212,175,55,.07) 0%, transparent 70%);
  animation: float-up 12s ease-in-out infinite;
}
.ambient-glow__br {
  position: absolute; bottom: -15%; right: -10%; width: 45vw; height: 45vw; border-radius: 50%;
  background: radial-gradient(circle, rgba(94,179,183,.07) 0%, transparent 70%);
  animation: float-dn 15s ease-in-out infinite;
}
.ambient-glow__center {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 35vw; height: 35vw; border-radius: 50%;
  background: radial-gradient(circle, rgba(42,191,176,.04) 0%, transparent 70%);
}

/* ─── 6. NAVBAR ────────────────────────────────────────── */
.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  display: flex; flex-direction: column; align-items: center;
  padding: 1.6rem 1rem;
  transition: transform .4s ease, padding .3s;
}
.navbar.hidden { transform: translateY(-120%); }
.navbar.scrolled { padding: 1.05rem 1rem; }

.navbar__pill {
  position: relative; display: flex; align-items: center;
  width: min(1300px, calc(100% - 2rem));
  gap: 2rem; padding: 0.8rem 2.25rem; border-radius: var(--radius-pill);
  background: linear-gradient(135deg, rgba(10,15,30,0.15), rgba(26,39,69,0.1));
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1.5px solid rgba(212,175,55,0.25);
  box-shadow: 0 0 30px rgba(212,175,55,0.2), 0 8px 20px rgba(0,0,0,0.15), inset 0 1px 1px rgba(255,255,255,0.08);
  overflow: visible;
  transition: all .4s cubic-bezier(.25,.46,.45,.94);
}
.navbar__pill:hover { 
  background: linear-gradient(135deg, rgba(10,15,30,0.25), rgba(26,39,69,0.18));
  box-shadow: 0 0 50px rgba(212,175,55,0.35), 0 12px 40px rgba(0,0,0,0.25), inset 0 1px 1px rgba(255,255,255,0.1);
  border-color: rgba(212,175,55,0.4);
}

 .navbar__logo { display:flex; align-items:center; gap:.75rem; text-decoration:none; position:relative; z-index:1; cursor:pointer; transition: transform .3s; }
 .navbar__logo:hover { transform: scale(1.05); }
 .navbar__logo-img { width:auto; height:68px; display:block; object-fit:contain; filter: drop-shadow(0 8px 20px rgba(0,0,0,.35)) brightness(1.1); transition: filter .3s; }
 .navbar__logo-img--large { height:78px; }
 .navbar__logo-img--full { max-width:320px; }
 .navbar__logo-img--mark { height:60px; display:none; }
 .navbar__logo:hover .navbar__logo-img { filter: drop-shadow(0 12px 30px rgba(212,175,55,.25)) brightness(1.15); }
 .navbar__logo-stack { display:flex; flex-direction:column; line-height:1; }
 .navbar__logo-text { font-family:var(--font-head); font-weight:700; font-size:1.05rem; letter-spacing:.15em; color:var(--gold); line-height:1; }
 .navbar__logo-sub  { font-family:var(--font-head); font-size:.45rem; letter-spacing:.2em; color:rgba(255,255,255,.5); text-transform:uppercase; }

 @media (max-width:640px) {
   .navbar__logo-img--full { display:none; }
   .navbar__logo-img--mark { display:block; }
 }

.navbar__links { display:flex; gap:2.5rem; list-style:none; position:relative; z-index:1; margin:0 auto; }
.navbar__item { position:relative; display:flex; align-items:center; }
.navbar__link {
  font-family:var(--font-head); font-weight:700; font-size:1.15rem; letter-spacing:.15em;
  color: rgba(255,255,255,.85); text-decoration:none; position:relative;
  transition: color .3s; cursor:pointer;
}
.navbar__link::after {
  content:''; position:absolute; bottom:-3px; left:0; height:2px; width:0;
  background: linear-gradient(to right, var(--gold), var(--amber));
  border-radius: var(--radius-pill); transition: width .3s;
}
.navbar__link:hover { color: var(--gold); }
.navbar__link:hover::after { width:100%; }
.navbar__link--dropdown {
  display:inline-flex; align-items:center; gap:.55rem;
}
.navbar__dropdown-caret {
  width:.55rem; height:.55rem;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  transition: transform .25s ease;
}
.navbar__item--dropdown:hover .navbar__dropdown-caret,
.navbar__item--dropdown:focus-within .navbar__dropdown-caret {
  transform: rotate(225deg) translateY(-1px);
}
.navbar__dropdown {
  position:absolute;
  top: calc(100% + 1rem);
  left: 0;
  z-index: 20;
  min-width: 18.5rem;
  display:grid;
  gap:.35rem;
  padding:.75rem;
  border-radius:1rem;
  background: rgba(10,15,30,.96);
  border:1px solid rgba(255,255,255,.08);
  box-shadow: 0 20px 50px rgba(0,0,0,.28);
  opacity:0;
  visibility:hidden;
  transform: translateY(.5rem);
  transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
}
.navbar__item--dropdown:hover .navbar__dropdown,
.navbar__item--dropdown:focus-within .navbar__dropdown {
  opacity:1;
  visibility:visible;
  transform: translateY(0);
}
.navbar__dropdown-link {
  display:flex;
  align-items:center;
  padding:.78rem .9rem;
  border-radius:.85rem;
  color: rgba(248,249,250,.86);
  font-family:var(--font-head);
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.12em;
  text-decoration:none;
  text-transform:uppercase;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.navbar__dropdown-link:hover {
  background: rgba(255,255,255,.06);
  color: var(--gold);
  transform: translateX(3px);
}

.navbar__cta { font-size:.75rem; padding:.6rem 1.4rem; position:relative; z-index:1; }
.navbar__social {
  display:flex; align-items:center; gap:.65rem; position:relative; z-index:1;
}
.social-btn--header {
  width:2.8rem; height:2.8rem;
  background:rgba(255,255,255,.04);
}

.navbar__hamburger {
  display: none; flex-direction:column; gap:5px; background:rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1); border-radius: .75rem;
  padding: .5rem .6rem; cursor:pointer; position:relative; z-index:1;
}
.navbar__hamburger span { display:block; width:22px; height:2px; background:var(--white); border-radius:2px; transition:all .3s; }
.navbar__hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px,5px); }
.navbar__hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.navbar__hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }

.mobile-menu {
  display: none; flex-direction:column; gap:.75rem;
  margin-top: .75rem; padding: 1.5rem;
  background: rgba(10,15,30,.95); backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius-xl);
  width: calc(100% - 2rem); max-width: 480px;
}
.mobile-menu.open { display: flex; }
.mobile-menu__link {
  font-family:var(--font-head); font-weight:700; font-size:.8rem; letter-spacing:.15em;
  color: rgba(255,255,255,.85); text-decoration:none; padding:.75rem 1rem;
  border-radius: .75rem; background:rgba(255,255,255,.04);
  transition: background .2s, color .2s;
}
.mobile-menu__link:hover { background: rgba(255,255,255,.08); color: var(--gold); }
.mobile-menu__cta { text-align:center; }
.mobile-menu__social {
  display:flex; align-items:center; justify-content:center; gap:.75rem;
  margin-top:.35rem;
}
.mobile-menu__group {
  border-radius:.9rem;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  overflow:hidden;
}
.mobile-menu__summary {
  list-style:none;
  cursor:pointer;
  font-family:var(--font-head);
  font-weight:700;
  font-size:.8rem;
  letter-spacing:.15em;
  color: rgba(255,255,255,.85);
  padding:.85rem 1rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.mobile-menu__summary::-webkit-details-marker {
  display:none;
}
.mobile-menu__summary::after {
  content:'';
  width:.55rem;
  height:.55rem;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .25s ease;
}
.mobile-menu__group[open] .mobile-menu__summary::after {
  transform: rotate(225deg);
}
.mobile-menu__sublist {
  display:grid;
  gap:.35rem;
  padding:0 .55rem .75rem;
}
.mobile-menu__sublink {
  display:block;
  padding:.72rem .9rem .72rem 1.2rem;
  border-radius:.7rem;
  color: rgba(248,249,250,.78);
  font-family:var(--font-head);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.12em;
  text-decoration:none;
  text-transform:uppercase;
  background: rgba(255,255,255,.03);
  transition: background .2s ease, color .2s ease;
}
.mobile-menu__sublink:hover,
.mobile-menu__sublink[aria-current="page"] {
  background: rgba(255,255,255,.08);
  color: var(--gold);
}

/* ─── 7. SOLUTIONS OVERLAY ─────────────────────────────── */
.solutions-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: linear-gradient(to bottom, var(--navy-deep), var(--navy), #000d1d);
  overflow-y: auto;
  transform: translateY(100%); opacity: 0;
  transition: transform .5s cubic-bezier(.25,.46,.45,.94), opacity .4s;
  pointer-events: none;
}
.solutions-overlay.open {
  transform: translateY(0); opacity: 1; pointer-events: all;
}

.solutions-overlay__hero {
  position: relative; height: 50vh; min-height: 360px; overflow: hidden;
}
.solutions-overlay__bg {
  width:100%; height:100%; object-fit:cover; opacity:.35;
  transform: scale(1); transition: transform 20s ease;
}
.solutions-overlay__bg:hover { transform: scale(1.08); }
.solutions-overlay__hero-gradient {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 30%, var(--navy));
}
.solutions-overlay__hero-content {
  position: absolute; inset: 0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  padding: calc(2.5rem + env(safe-area-inset-top)) 1.5rem 2.5rem;
  gap: 1.25rem;
}
.solutions-overlay__title {
  font-family: var(--font-head); font-size: clamp(4.25rem,12.5vw,9.5rem);
  font-weight: 900; line-height: 1;
}
.solutions-overlay__divider {
  width: 10rem; height: 3px; margin: .75rem auto 0;
  background: linear-gradient(to right, var(--gold), var(--teal));
  border-radius: var(--radius-pill);
}
.solutions-overlay__body { max-width: 1200px; margin: 0 auto; padding: 5rem 2rem; }

.solution-item {
  display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem;
  align-items: center; margin-bottom: 6rem;
}
.solution-item--reverse { direction: rtl; }
.solution-item--reverse > * { direction: ltr; }

.solution-item__image {
  position: relative; border-radius: var(--radius); overflow: hidden;
  aspect-ratio: 4/3; border: 2px solid rgba(255,255,255,.1);
}
.solution-item__image img { width:100%; height:100%; object-fit:cover; transition: transform .6s; }
.solution-item__image:hover img { transform: scale(1.06); }
.solution-item__img-overlay {
  position:absolute; inset:0;
  background: linear-gradient(to top, var(--navy) 0%, transparent 60%);
}
.solution-item__content { display:flex; flex-direction:column; gap:1rem; }
.solution-item__content h3 { font-family:var(--font-head); font-size:2.3rem; font-weight:900; color:var(--white); }
.solution-item__text-box { padding: 1.5rem; border-radius: var(--radius-lg); border-left: 4px solid var(--gold) !important; }
.solution-item__text-box p { color:var(--gray); line-height:1.8; }

.solutions-overlay__back { text-align:center; padding: 3rem 2rem 6rem; }
.solutions-overlay__back-btn { font-size:1rem; padding:1.2rem 2.5rem; }

@media (max-width: 768px) {
  .solution-item, .solution-item--reverse { grid-template-columns: 1fr; direction: ltr; }
}

/* ─── 7B. SOLUTIONS SHOWCASE ───────────────────────────── */
.solutions-showcase {
  position: relative;
  background: linear-gradient(180deg, #07101c 0%, #040b16 100%);
  overflow: hidden;
  scroll-margin-top: 8rem;
}
.solutions-showcase__hero {
  position: relative;
  min-height: clamp(28rem, 56vw, 44rem);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(2.8rem, 4.8vw, 5rem) 1.5rem 8.5rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.solutions-showcase__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(.32) saturate(.9);
}
.solutions-showcase__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(6,10,18,.28) 0%, rgba(5,10,18,.62) 58%, #040b16 100%),
    linear-gradient(90deg, rgba(4,8,15,.65) 0%, transparent 20%, transparent 80%, rgba(4,8,15,.65) 100%);
}
.solutions-showcase__hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.solutions-showcase__eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .32rem .85rem;
  border-radius: 999px;
  background: rgba(212,175,55,.14);
  border: 1px solid rgba(212,175,55,.32);
  color: rgba(255,238,191,.92);
  font-family: var(--font-head);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.solutions-showcase__title {
  margin: .7rem 0 .2rem;
  font-family: var(--font-head);
  font-size: clamp(2.1rem, 4vw, 3.6rem);
  font-weight: 900;
  color: var(--gold);
  line-height: 1;
}
.solutions-showcase__divider {
  width: 3rem;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(to right, rgba(212,175,55,.2), var(--gold), rgba(212,175,55,.2));
}
.solutions-showcase__body {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: -6.75rem auto 0;
  padding: 0 1.5rem 6rem;
}
.solutions-showcase__stack {
  width: min(1100px, 100%);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}
.solutions-showcase__item {
  margin-bottom: 0;
  gap: 1.25rem;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-items: stretch;
}
.solutions-showcase__item .solution-item__image {
  aspect-ratio: 16 / 9;
  min-height: 16rem;
  border-radius: 1rem;
  border: 1px solid rgba(212,175,55,.2);
  box-shadow: 0 22px 50px rgba(0,0,0,.28);
}
.solutions-showcase__item .solution-item__content {
  gap: .85rem;
}
.solutions-showcase__panel {
  min-height: 100%;
  justify-content: center;
  padding: 1.4rem 1.5rem;
  border-radius: 1rem;
  background: linear-gradient(135deg, rgba(15,23,41,.82), rgba(17,28,49,.65));
}
.solutions-showcase__panel h3 {
  margin: 0;
  font-size: 1.55rem;
  line-height: 1.08;
}
.solutions-showcase__panel p {
  margin: 0;
  font-size: .98rem;
  line-height: 1.7;
  color: rgba(234,239,245,.72);
}
.solutions-showcase__cta {
  display: flex;
  justify-content: center;
  margin-top: 1.35rem;
}
.solutions-showcase__cta .btn-gold {
  padding: .9rem 1.8rem;
  font-size: .78rem;
  letter-spacing: .14em;
}
@media (max-width: 900px) {
  .solutions-showcase__hero { padding-bottom: 6rem; }
  .solutions-showcase__body { margin-top: -3.4rem; }
  .solutions-showcase__item { grid-template-columns: 1fr; }
  .solutions-showcase__item.solution-item--reverse { direction: ltr; }
  .solutions-showcase__item .solution-item__image { min-height: 14rem; }
}
@media (max-width: 640px) {
  .solutions-showcase__stack { width: 100%; }
  .solutions-showcase__item,
  .solutions-showcase__item.solution-item--reverse { grid-template-columns: 1fr; gap: .7rem; }
  .solutions-showcase__hero { min-height: 20rem; padding: 2.5rem 1rem 4.4rem; }
  .solutions-showcase__body { margin-top: -1.4rem; padding: 0 1rem 3rem; }
  .solutions-showcase__item .solution-item__image { min-height: 12rem; }
  .solutions-showcase__panel { padding: 1.05rem 1.1rem; }
  .solutions-showcase__panel h3 { font-size: 1.2rem; }
  .solutions-showcase__panel p { font-size: .9rem; }
}

/* ─── 8. HERO ───────────────────────────────────────────── */
.hero {
  position: relative; min-height: 100vh;
  display: flex; align-items: center;
  overflow: hidden; padding: 7rem 2rem 3rem;
  background: #000;
  background-color: #000;
}
.hero__bg-slider {
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
}
.hero__media{
  position:absolute; inset:0;
  background-size:cover;
  background-position:center;
  opacity:0;
  transform:none;
  transition: opacity .6s ease;
  will-change: opacity;
}
.hero__media.active{
  opacity:1;
  transform:none;
}
.hero.hero--instant .hero__media{
  transition:none !important;
  transform:none !important;
}
.hero.hero--instant .hero__media.active{
  transform:none !important;
}
.hero__media--video{
  overflow:hidden;
  background:#000;
  contain:paint;
}
.hero__bg-video{
  position:absolute; inset:0;
  display:block;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center;
  filter:none;
  transform:translate3d(0,0,0) scale(1.01);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.hero__bg-slider .hero__gradient-overlay { display:none; }
.hero__mesh {
  position:absolute; border-radius:50%; filter:blur(120px); pointer-events:none;
  z-index:1;
  display:none;
}
.hero__mesh--gold {
  top:-10%; left:20%; width:600px; height:600px; opacity:.18;
  background: radial-gradient(circle,#d4af37,transparent 70%);
  animation: float-up 20s ease-in-out infinite;
}
.hero__mesh--teal {
  bottom:-10%; right:20%; width:500px; height:500px; opacity:.15;
  background: radial-gradient(circle,#5eb3b7,transparent 70%);
  animation: float-dn 18s ease-in-out infinite;
}
.hero__grid {
  position:absolute; inset:0; pointer-events:none; opacity:.025;
  z-index:1;
  background-image: linear-gradient(var(--gold) 1px, transparent 1px), linear-gradient(90deg, var(--gold) 1px, transparent 1px);
  background-size: 50px 50px;
  display:none;
}
.hero__particles { position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:1; display:none; }
.hero__particles .particle {
  position:absolute; width:3px; height:3px; background:var(--gold); border-radius:50%;
  animation: particle-float var(--d,4s) var(--del,0s) ease-in-out infinite;
  opacity:.3;
}
.hero__cursor-glow {
  position:absolute; width:400px; height:400px; border-radius:50%; pointer-events:none;
  background: radial-gradient(circle, rgba(212,175,55,.12) 0%, transparent 70%);
  transform: translate(-50%,-50%); z-index:1; transition: left .1s, top .1s;
  will-change: left, top;
  display:none;
}

.hero__device{
  position:absolute;
  right: clamp(1rem, 4vw, 3.5rem);
  top: 54%;
  transform: translateY(-50%);
  width: min(340px, 32vw);
  z-index:2;
  pointer-events:auto;
}
@media (max-width:1024px){ .hero__device{ display:none; } }

/* Phone-only hero mode */
.hero[data-hero="phone-only"] .hero__content{ display:none; }
.hero[data-hero="phone-only"] .hero__container{
  max-width: 560px;
  justify-items:center;
}
.hero[data-hero="phone-only"] .hero__device{
  position:relative;
  right:auto;
  top:auto;
  transform:none;
  width: min(380px, 92vw);
}
.hero[data-hero="phone-only"] .hero__device::before{
  content:'';
  position:absolute;
  inset: -2.2rem -2rem;
  border: 3px solid rgba(255,255,255,.82);
  border-radius: 1.25rem;
  box-shadow: 0 25px 70px rgba(0,0,0,.35);
  opacity:.92;
  pointer-events:none;
}
.hero[data-hero="phone-only"] .hero__scroll{ display:none; }
@media (max-width:1024px){
  .hero[data-hero="phone-only"] .hero__device{ display:block; }
}

.hero-phone{ position:relative; width:100%; aspect-ratio: 9 / 16; }
.hero-phone__outline{
  position:absolute; inset:-.9rem;
  border: 3px solid rgba(255,255,255,.55);
  border-radius: 2.25rem;
  opacity:.85;
  box-shadow: 0 0 0 1px rgba(255,255,255,.15), 0 25px 70px rgba(0,0,0,.45);
}
.hero-phone__outer{
  position:absolute; inset:0;
  border-radius: 2.25rem;
  padding: .9rem;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  animation: phone-float 7s ease-in-out infinite;
}
.hero-phone__screen{
  height:100%;
  border-radius: 1.65rem;
  overflow:hidden;
  background:
    radial-gradient(circle at 30% 10%, rgba(42,191,176,.22), transparent 55%),
    radial-gradient(circle at 70% 0%, rgba(212,175,55,.18), transparent 55%),
    linear-gradient(180deg, rgba(0,13,29,.72), rgba(0,21,46,.88));
  border: 1px solid rgba(255,255,255,.12);
  position:relative;
}
.hero-phone__screen::after{
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(120deg, transparent 15%, rgba(255,255,255,.08) 45%, transparent 75%);
  transform: translateX(-60%);
  opacity:.25;
  animation: phone-shine 6.5s ease-in-out infinite;
  pointer-events:none;
}
.hero-phone__status{
  display:flex; align-items:center; justify-content:space-between;
  padding:.85rem 1rem .35rem;
  font-family:var(--font-head);
  font-weight:800;
  letter-spacing:.12em;
  font-size:.65rem;
  color: rgba(255,255,255,.75);
  text-transform:uppercase;
  position:relative;
  z-index:1;
}
.hero-phone__status-right{ display:flex; align-items:center; gap:.5rem; }
.hero-phone__signal{
  width:1.25rem; height:.55rem; border-radius:999px;
  background: linear-gradient(90deg, rgba(255,255,255,.2), rgba(255,255,255,.55));
}
.hero-phone__battery{
  width:1.35rem; height:.6rem; border-radius:.2rem;
  border:1px solid rgba(255,255,255,.55);
  position:relative;
}
.hero-phone__battery::after{
  content:''; position:absolute; top:2px; bottom:2px; left:2px; right:6px;
  background: linear-gradient(135deg, var(--teal-vivid), var(--cyan));
  border-radius:2px;
}
.hero-phone__app{
  position:relative;
  z-index:1;
  padding: 1.1rem 1.1rem 1.25rem;
  display:flex;
  flex-direction:column;
  gap:.75rem;
}
.hero-phone__brand{
  width: 100%;
  max-width: 230px;
  height:auto;
  opacity: .95;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,.35));
}
.hero-phone__subtitle{
  font-family:var(--font-head);
  font-weight:800;
  letter-spacing:.18em;
  font-size:.65rem;
  color: rgba(255,255,255,.78);
  text-transform:uppercase;
}
.hero-phone__tiles{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.75rem;
  margin-top:.25rem;
}
.hero-phone__tile{
  padding:.9rem .8rem;
  border-radius:1rem;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  font-family:var(--font-head);
  font-weight:800;
  letter-spacing:.08em;
  font-size:.7rem;
  color: rgba(255,255,255,.92);
  text-transform:uppercase;
  box-shadow: 0 18px 35px rgba(0,0,0,.25);
  position:relative;
  overflow:hidden;
  appearance:none;
  -webkit-appearance:none;
  cursor:pointer;
  text-align:left;
  width:100%;
}
.hero-phone__tile:focus-visible{
  outline: 2px solid rgba(212,175,55,.7);
  outline-offset: 2px;
}
.hero-phone__tile::before{
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(135deg, rgba(212,175,55,.18), rgba(42,191,176,.14));
  opacity:0;
  transition: opacity .35s ease;
}
.hero-phone__tile::after{
  content:'OFF';
  position:absolute;
  top:.65rem; right:.7rem;
  font-size:.6rem;
  letter-spacing:.14em;
  padding:.25rem .55rem;
  border-radius:999px;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.75);
}
.hero-phone__tile[aria-pressed="true"]{
  border-color: rgba(42,191,176,.55);
  box-shadow: 0 18px 35px rgba(0,0,0,.25), 0 0 25px rgba(42,191,176,.25);
}
.hero-phone__tile[aria-pressed="true"]::before{ opacity:1; }
.hero-phone__tile[aria-pressed="true"]::after{
  content:'ON';
  background: rgba(42,191,176,.16);
  border-color: rgba(42,191,176,.35);
  color: rgba(255,255,255,.9);
}
.hero-phone__tile:nth-child(2)::before{ background: linear-gradient(135deg, rgba(42,191,176,.18), rgba(0,217,255,.14)); }
.hero-phone__tile:nth-child(3)::before{ background: linear-gradient(135deg, rgba(255,179,71,.18), rgba(212,175,55,.14)); }
.hero-phone__tile:nth-child(4)::before{ background: linear-gradient(135deg, rgba(0,217,255,.18), rgba(42,191,176,.14)); }
.hero-phone__tile > *{ position:relative; z-index:1; }
.hero--media-changed .hero-phone__tile::before{ opacity:1; }
.hero-phone__link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.65rem 1rem;
  border-radius:999px;
  text-decoration:none;
  font-family:var(--font-head);
  font-weight:800;
  letter-spacing:.12em;
  font-size:.7rem;
  text-transform:uppercase;
  color: var(--navy-deep);
  background: linear-gradient(135deg, var(--gold), var(--amber));
  box-shadow: 0 18px 40px rgba(212,175,55,.22);
  width:fit-content;
}
.hero-phone__link:hover{ filter: brightness(1.03); }
.hero-phone__hint{
  margin-top:.25rem;
  font-size:.78rem;
  color: rgba(156,163,175,.92);
  line-height:1.4;
}

/* Hero phone: OOB-style app controls (demo) */
.hero-phone--control .hero-phone__screen{
  background: linear-gradient(180deg, rgba(9,110,165,.92) 0%, rgba(7,88,138,.92) 32%, rgba(0,21,46,.92) 62%, rgba(0,13,29,.94) 100%);
}
.app-ui{
  position:relative;
  z-index:1;
  padding: .45rem .75rem .85rem;
  display:flex;
  flex-direction:column;
  gap:.55rem;
}
.app-ui__top{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; }
.app-ui__menu{
  width:2.25rem; height:2.25rem; border-radius:.75rem;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.9);
  cursor:pointer;
  display:grid; place-items:center;
  box-shadow: 0 12px 25px rgba(0,0,0,.20);
}
.app-ui__menu > span{
  width: 1rem; height: 2px; border-radius: 999px;
  background: rgba(255,255,255,.9);
  position:relative;
}
.app-ui__menu > span::before,
.app-ui__menu > span::after{
  content:''; position:absolute; left:0; right:0; height:2px; border-radius:999px;
  background: rgba(255,255,255,.9);
}
.app-ui__menu > span::before{ top:-6px; opacity:.9; }
.app-ui__menu > span::after{ top: 6px; opacity:.8; }
.app-ui__brand{ min-width:0; flex:1; text-align:center; }
.app-ui__brand-name{
  font-family:var(--font-head);
  font-weight:900;
  letter-spacing:.12em;
  font-size:.62rem;
  color: rgba(255,255,255,.92);
  text-transform:uppercase;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.app-ui__brand-sub{
  font-size:.58rem;
  letter-spacing:.08em;
  color: rgba(255,255,255,.68);
  margin-top:.05rem;
}
.app-ui__dots{ display:flex; gap:.22rem; width:2.25rem; justify-content:flex-end; }
.app-ui__dots span{ width:.28rem; height:.28rem; border-radius:50%; background: rgba(255,255,255,.75); opacity:.7; }
.app-ui__quick{ display:grid; grid-template-columns:repeat(3, 1fr); gap:.55rem; }
.app-ui__quick-btn{
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
  border-radius: .95rem;
  padding: .55rem .4rem .5rem;
  color: rgba(255,255,255,.92);
  font-family:var(--font-head);
  font-weight:800;
  letter-spacing:.08em;
  font-size:.55rem;
  text-transform:uppercase;
  cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:.35rem;
}
.app-ui__quick-btn svg{ width:1.05rem; height:1.05rem; opacity:.92; }
.app-ui__quick-btn.is-active{
  border-color: rgba(255,255,255,.35);
  background: rgba(255,255,255,.12);
  box-shadow: 0 14px 26px rgba(0,0,0,.18), 0 0 22px rgba(255,255,255,.08);
}
.app-ui.all-on .app-ui__quick-btn.is-active{
  box-shadow: 0 16px 34px rgba(0,0,0,.22), 0 0 34px rgba(255,255,255,.10);
}
.app-ui__rooms{
  display:flex; gap:.35rem; padding:.28rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.07);
  overflow:auto hidden;
  -webkit-overflow-scrolling: touch;
}
.app-ui__rooms::-webkit-scrollbar{ height:0; }
.app-ui__room{
  flex:0 0 auto;
  border:0;
  cursor:pointer;
  padding: .42rem .7rem;
  border-radius: 999px;
  background: transparent;
  color: rgba(255,255,255,.78);
  font-family:var(--font-head);
  font-weight:900;
  letter-spacing:.08em;
  font-size:.52rem;
  text-transform:uppercase;
}
.app-ui__room.is-active{ background: rgba(255,255,255,.16); color: rgba(255,255,255,.95); }
.app-ui__panel{ display:none; }
.app-ui__panel.is-active{ display:block; }
.app-ui__list{
  background: rgba(255,255,255,.94);
  border-radius: 1.05rem;
  overflow:hidden;
  border: 1px solid rgba(15, 23, 42, .10);
  box-shadow: 0 22px 42px rgba(0,0,0,.20);
}
.app-ui.all-on .app-ui__list{
  box-shadow: 0 26px 52px rgba(0,0,0,.28), 0 0 40px rgba(14,165,233,.12);
}
.app-ui__item{
  display:flex; align-items:center; gap:.55rem;
  padding: .62rem .65rem;
  border-bottom: 1px solid rgba(15,23,42,.08);
  color: #0f172a;
  background: rgba(255,255,255,.88);
  transition: background .25s ease;
  cursor:pointer;
}
.app-ui__item:last-child{ border-bottom:0; }
.app-ui__item.is-on{ background: linear-gradient(90deg, rgba(14,165,233,.12), rgba(255,255,255,.90)); }
.app-ui__left{ display:flex; align-items:center; gap:.55rem; min-width:0; flex:1; }
.app-ui__icon{ width:1.05rem; height:1.05rem; color: #0891b2; opacity:.95; flex:0 0 auto; }
.app-ui__label{ font-family:var(--font-body); font-weight:700; font-size:.72rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.app-ui__gear{
  width:2rem; height:2rem; border-radius:999px;
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(15,23,42,.03);
  color: rgba(15,23,42,.65);
  cursor:pointer;
  display:grid; place-items:center;
}
.app-ui__gear svg{ width:1.05rem; height:1.05rem; }
.app-ui__toggle{ position:relative; display:inline-flex; width:46px; height:24px; }
.app-ui__toggle-input{ position:absolute; inset:0; opacity:0; }
.app-ui__toggle-slider{
  width:100%; height:100%; border-radius:999px;
  background: rgba(15,23,42,.14);
  box-shadow: inset 0 0 0 1px rgba(15,23,42,.12);
  transition: background .25s ease, box-shadow .25s ease;
  position:relative;
}
.app-ui__toggle-slider::after{
  content:'';
  position:absolute;
  top:3px; left:3px;
  width:18px; height:18px; border-radius:50%;
  background:#fff;
  box-shadow: 0 10px 18px rgba(0,0,0,.20);
  transition: transform .25s ease;
}
.app-ui__toggle-input:checked + .app-ui__toggle-slider{
  background: linear-gradient(135deg, #06b6d4, #0ea5e9);
  box-shadow: inset 0 0 0 1px rgba(14,165,233,.35), 0 0 18px rgba(14,165,233,.18);
}
.app-ui__toggle-input:checked + .app-ui__toggle-slider::after{ transform: translateX(22px); }
.app-ui__toggle-input:focus-visible + .app-ui__toggle-slider{ outline: 2px solid rgba(212,175,55,.75); outline-offset: 2px; }

@keyframes phone-float{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-10px); }
}
@keyframes phone-shine{
  0%,100%{ transform: translateX(-60%); opacity:.15; }
  50%{ transform: translateX(60%); opacity:.35; }
}

.hero__container {
  position:relative; z-index:2; max-width:1180px; margin:0 auto; width:100%;
  display: grid; grid-template-columns: 1fr; gap: 2.75rem; align-items: center;
}
.hero__content {
  display:flex; flex-direction:column; gap:2.1rem; max-width:760px;
  padding: 0;
}

.hero__badge {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .76rem 1.72rem; border-radius: var(--radius-pill);
  background: linear-gradient(135deg, rgba(212,175,55,.15), rgba(94,179,183,.15));
  border: 1px solid rgba(212,175,55,.3); backdrop-filter: blur(12px);
  font-family: var(--font-head); font-weight:700; font-size:.91rem;
  color: var(--gold); letter-spacing:.2em; text-transform:uppercase; width:fit-content;
}
.hero__badge-icon { width:1.1rem; height:1.1rem; color:var(--gold); animation:rotate-360 3s linear infinite; }

.hero__title { display:flex; flex-direction:column; gap:.18rem; align-items:flex-start; text-align:left; padding-bottom:.14em; }
.hero__title-line1 {
  display:block;
  font-family: var(--font-head); font-size: clamp(3.45rem,7.9vw,6.1rem);
  font-weight: 800; color: var(--white); line-height: 1.04;
  padding-bottom: .06em;
  letter-spacing:-.045em;
  animation: gradient-pan 3s ease-in-out infinite;
  -webkit-text-fill-color: currentColor;
  text-shadow: 0 12px 40px rgba(0,0,0,.35);
}
.hero__title-line2 {
  display:block;
  font-family: var(--font-head); font-size: clamp(3.45rem,7.9vw,6.1rem);
  font-weight: 800; line-height: 1.04; color: var(--gold);
  padding-bottom: .12em;
  letter-spacing:-.045em;
  -webkit-text-fill-color: currentColor;
  animation: gradient-pan 5s linear infinite;
  text-shadow: 0 12px 40px rgba(0,0,0,.35);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero__title-line1 {
    background: linear-gradient(135deg, var(--white) 0%, rgba(255,255,255,.7) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    background-size: 200%;
  }
  .hero__title-line2 {
    background: linear-gradient(135deg, var(--gold) 0%, var(--amber) 45%, var(--teal) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    background-size: 200%;
  }
}

.hero__cta-group { display:flex; gap:1rem; flex-wrap:wrap; }
.hero__cta-primary  { font-size:1.16rem; padding:1.32rem 3.2rem; }
.hero__cta-primary svg { width:1.1rem; height:1.1rem; }
.hero__cta-secondary {
  display:inline-flex; align-items:center; padding:1.32rem 3.2rem;
  background:rgba(255,255,255,.05); backdrop-filter:blur(16px);
  border: 2px solid rgba(255,255,255,.1); border-radius:var(--radius-pill);
  color: var(--white); font-family:var(--font-head); font-weight:700;
  font-size:1.16rem; letter-spacing:.1em; text-decoration:none;
  transition: background .3s, border-color .3s;
}
.hero__cta-secondary:hover { background:rgba(255,255,255,.1); border-color:rgba(212,175,55,.4); }

.hero__stats-row { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-top:3rem; }
.hero__stat-card {
  display:flex; flex-direction:column; gap:.8rem; padding:1.5rem;
  border-radius:var(--radius-lg); cursor:default; text-align:center;
  transition: transform .3s, box-shadow .3s; position:relative; overflow:hidden;
  background: rgba(15,23,41,.6); border: 1px solid rgba(212,175,55,.2);
  backdrop-filter: blur(10px);
}
.hero__stat-card::before {
  content:''; position:absolute; inset:0;
  background: linear-gradient(135deg, rgba(212,175,55,.15), transparent);
  opacity:0; transition:opacity .3s;
}
.hero__stat-card:hover { transform:translateY(-6px) scale(1.05); box-shadow:0 10px 30px rgba(212,175,55,.2); }
.hero__stat-card:hover::before { opacity:1; }
.hero__stat-card svg { width:1.75rem; height:1.75rem; }
.hero__stat-label { font-size:0.85rem; color:var(--gray); font-family:var(--font-body); }
.hero__stat-value { font-family:var(--font-head); font-weight:700; font-size:1.2rem; color:var(--white); }

.hero__visual { position:relative; height:600px; }
.hero__visual-glow {
  position:absolute; inset:-20px; border-radius:var(--radius-xl);
  animation: glow-pulse 4s ease-in-out infinite;
}
.hero__slider {
  position:relative; width:100%; height:100%;
  border-radius:var(--radius-xl); overflow:hidden;
  border: 2px solid rgba(255,255,255,.1);
}
.hero__slide {
  position:absolute; inset:0; background-size:cover; background-position:center;
  opacity:0; transition: opacity 2s, transform 2s;
  transform: scale(1.05);
}
.hero__slide.active { opacity:1; transform:scale(1); }
.hero__gradient-overlay {
  position:absolute; inset:0;
  background: linear-gradient(to top, rgba(10,15,30,.92) 0%, rgba(10,15,30,.45) 48%, rgba(10,15,30,.18) 100%);
}
.hero.hero--all-on .hero__gradient-overlay{
  background: linear-gradient(to top, rgba(0,13,29,.55) 0%, rgba(0,0,0,.18) 55%, transparent 100%);
}
.hero.hero--all-on .hero__grid{ opacity:.04; }
.hero__slide-info {
  position:absolute; bottom:2rem; left:2rem; right:2rem;
  padding:1.25rem 1.5rem; border-radius:var(--radius-lg);
  display:flex; align-items:center; justify-content:space-between;
}
.hero__slide-live {
  display:flex; align-items:center; gap:.5rem;
  font-family:var(--font-head); font-size:.7rem; color:var(--gold);
  font-weight:700; letter-spacing:.1em; margin-bottom:.4rem;
  animation: pulse 2s infinite;
}
.hero__slide-title { font-family:var(--font-head); font-weight:700; font-size:1.15rem; color:var(--white); }
.hero__slide-arrow {
  width:3rem; height:3rem; border-radius:50%; display:flex; align-items:center;
  justify-content:center; font-size:1.1rem; cursor:pointer;
  flex-shrink:0; padding:0;
}

.hero__float-card {
  position:absolute; padding:1.4rem 1.75rem; border-radius:var(--radius-lg);
  text-align:center; cursor:default; transition:transform .3s;
}
.hero__float-card:hover { transform:scale(1.08) rotate(3deg); }
.hero__float-card--left  { left:-1.5rem; top:25%; }
.hero__float-card--right { right:-1.5rem; bottom:33%; }
.hero__float-number { font-family:var(--font-head); font-size:2.5rem; font-weight:900; line-height:1; }
.hero__float-label  { font-size:.65rem; color:var(--gray); margin-top:.25rem; white-space:nowrap; }

.hero__scroll {
  position:absolute; bottom:3rem; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.75rem; z-index:2;
}
.hero__scroll span { font-family:var(--font-head); font-size:.6rem; letter-spacing:.3em; color:var(--gray); }
.hero__scroll-mouse {
  width:1.5rem; height:2.5rem;
  border: 2px solid rgba(212,175,55,.5); border-radius:var(--radius-pill);
  display:flex; align-items:flex-start; justify-content:center; padding:.4rem;
}
.hero__scroll-dot {
  width:.35rem; height:.35rem; background:var(--gold); border-radius:50%;
  animation: hero-scroll 1.5s ease-in-out infinite;
}

.hero__media--image {
  filter: brightness(.78) saturate(.97) contrast(1.02);
  transform: scale(1.04);
}
.hero__media--image.active {
  transform: scale(1.02);
}
.hero__backdrop {
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(8,12,20,.62) 0%, rgba(8,12,20,.36) 42%, rgba(8,12,20,.08) 100%),
    linear-gradient(180deg, rgba(8,12,20,.12) 0%, rgba(8,12,20,.04) 40%, rgba(8,12,20,.42) 100%);
}
.hero .hero__grid {
  display:none;
}
.hero .hero__particles {
  display:none;
}
.hero .hero__cursor-glow {
  display:none;
}
.hero__content {
  position:relative;
  overflow:visible;
  isolation:isolate;
  padding: clamp(1.6rem, 4vw, 2.6rem);
  border-radius: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.hero__content > * {
  position:relative;
  z-index:1;
}
.hero__content::before {
  content:none;
  position:absolute;
  inset:0 auto auto 0;
  width: 11rem;
  height: 3px;
  background: linear-gradient(90deg, rgba(255,250,242,.95), rgba(194,131,53,.95), rgba(84,132,157,.85));
  border-radius: 999px;
  z-index:0;
}
.hero__badge {
  background: rgba(255,250,242,.08);
  border-color: rgba(255,250,242,.18);
  color: #fffaf2;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
}
.hero__badge-icon {
  color: #efc07d;
}
.hero__title {
  gap: .45rem;
}
.hero .hero__title-line1 {
  color: #fffaf2;
  text-shadow: 0 18px 45px rgba(0,0,0,.38);
}
.hero .hero__title-line2 {
  color: #43c0c7;
  text-shadow: 0 18px 45px rgba(0,0,0,.38);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero .hero__title-line1 {
    background: linear-gradient(135deg, #fffaf2 0%, rgba(255,250,242,.76) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
  .hero .hero__title-line2 {
    background: linear-gradient(135deg, #63c8c0 0%, #43c0c7 46%, #27bad1 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}
.hero__title-line3 {
  font-family: var(--font-head);
  font-size: clamp(1.18rem, 2.5vw, 1.95rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(255,250,242,.84);
  text-shadow: 0 12px 30px rgba(0,0,0,.34);
}
.hero__subtitle {
  max-width: 42rem;
  font-size: clamp(.98rem, 1.3vw, 1.14rem);
  line-height: 1.8;
  color: rgba(255,250,242,.86);
  text-wrap: pretty;
}
.hero__capabilities {
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
}
.hero__capabilities span {
  display:inline-flex;
  align-items:center;
  padding:.72rem 1rem;
  border-radius:999px;
  border:1px solid rgba(255,250,242,.12);
  background: rgba(255,250,242,.07);
  color:#fffaf2;
  font-family:var(--font-head);
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.hero__capabilities span:nth-child(2n) {
  border-color: rgba(194,131,53,.35);
}
.hero__capabilities span:nth-child(3n) {
  border-color: rgba(84,132,157,.42);
}
.hero__cta-group {
  margin-top: .2rem;
}
.hero__cta-primary.btn-gold {
  letter-spacing: .14em;
  background: linear-gradient(135deg, #53c8c4 0%, #39c0cf 55%, #25b8d4 100%);
  color: #fffaf2 !important;
  box-shadow: 0 18px 40px rgba(57,192,207,.26);
}
.hero__cta-primary.btn-gold::after {
  background: linear-gradient(135deg, #2dbbcf 0%, #43c0c7 52%, #67cec0 100%);
}
.hero__cta-primary.btn-gold:hover {
  box-shadow: 0 24px 48px rgba(57,192,207,.34);
}
.hero__scroll {
  text-decoration:none;
}
.hero__scroll span {
  color: rgba(255,250,242,.72);
}
.hero__scroll-mouse {
  border-color: rgba(255,250,242,.42);
}
.hero__scroll-dot {
  background: #efc07d;
}

.hero__bg-settings{
  position:absolute;
  top: 1.25rem;
  right: 1.25rem;
  z-index:3;
  pointer-events:auto;
}
.hero__bg-settings-btn{
  width:3rem; height:3rem;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  color: var(--white);
  font-family: var(--font-head);
  font-weight: 900;
  letter-spacing: .08em;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.hero__bg-settings-btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.09);
  border-color: rgba(212,175,55,.5);
}
.hero__bg-panel{
  margin-top: .75rem;
  width: min(360px, calc(100vw - 2.5rem));
  padding: 1rem;
  border-radius: var(--radius-lg);
}
.hero__bg-panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: .75rem;
  margin-bottom: .75rem;
}
.hero__bg-panel-title{
  font-family: var(--font-head);
  font-weight: 900;
  letter-spacing: .08em;
  font-size: .8rem;
  color: var(--white);
  text-transform: uppercase;
}
.hero__bg-panel-close{
  width:2.25rem; height:2.25rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: var(--gray);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 1.35rem;
  line-height: 1;
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.hero__bg-panel-close:hover{
  background: rgba(255,255,255,.10);
  border-color: rgba(212,175,55,.45);
  color: var(--white);
}
.hero__bg-auto{
  display:flex;
  align-items:center;
  gap:.6rem;
  color: var(--gray);
  font-size: .85rem;
  user-select:none;
  margin-bottom: .85rem;
}
.hero__bg-auto input{
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--gold);
}
.hero__bg-thumbs{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(56px, 1fr));
  gap: .6rem;
}
.hero__bg-thumb{
  position:relative;
  aspect-ratio: 1 / 1;
  border-radius: .85rem;
  border: 1px solid rgba(255,255,255,.14);
  background-size: cover;
  background-position: center;
  cursor:pointer;
  opacity: .88;
  transition: transform .2s ease, border-color .2s ease, opacity .2s ease, box-shadow .2s ease;
}
.hero__bg-thumb:hover{
  transform: translateY(-2px);
  opacity: 1;
  border-color: rgba(255,255,255,.3);
  box-shadow: 0 10px 22px rgba(0,0,0,.25);
}
.hero__bg-thumb[aria-pressed="true"]{
  opacity:1;
  border-color: rgba(212,175,55,.85);
  box-shadow: 0 0 0 1px rgba(212,175,55,.35), 0 14px 28px rgba(0,0,0,.32);
}

.hero__bg-nav{
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
}
.hero__bg-arrow{
  pointer-events:auto;
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  width:3rem; height:3rem;
  border-radius:999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.85);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transition: transform .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
.hero__bg-arrow svg{ width:1.25rem; height:1.25rem; }
.hero__bg-arrow:hover{
  background: rgba(255,255,255,.10);
  border-color: rgba(212,175,55,.45);
  color: var(--white);
}
.hero__bg-arrow:active{ transform: translateY(-50%) scale(.97); }
.hero__bg-arrow--prev{ left: 1.1rem; }
.hero__bg-arrow--next{ right: 1.1rem; }

@media (max-width: 640px){
  .hero__bg-arrow{ width:2.75rem; height:2.75rem; }
  .hero__bg-arrow--prev{ left: .75rem; }
  .hero__bg-arrow--next{ right: .75rem; }
}

@media (max-width:1024px) {
  .hero__container { grid-template-columns:1fr; }
  .hero__visual { display:none; }
  .hero__stats-row { grid-template-columns:repeat(2,1fr); }
  .hero__content { max-width: 700px; }
  .hero__subtitle { font-size: 1.2rem; max-width: 36rem; }
  .hero__scroll { bottom: 2rem; }
}
@media (max-width:640px) {
  .hero__stats-row { grid-template-columns:1fr; }
  .hero { padding:6rem 1.25rem 3rem; }
  .hero__content { gap: 1.5rem; padding: 1.35rem; border-radius: 1.45rem; }
  .hero__badge { font-size: .72rem; padding: .65rem 1.15rem; }
  .hero__title-line1,
  .hero__title-line2 { font-size: clamp(2.7rem, 12vw, 4.2rem); }
  .hero__title-line3 { font-size: clamp(.95rem, 4.5vw, 1.25rem); letter-spacing: .1em; }
  .hero__subtitle { font-size: 1rem; max-width: 100%; }
  .hero__cta-primary,
  .hero__cta-secondary { font-size: .93rem; padding: 1rem 1.85rem; }
  .hero__capabilities { gap: .55rem; }
  .hero__capabilities span { font-size: .68rem; padding: .6rem .82rem; letter-spacing: .1em; }
  .hero__scroll { display: none; }
  .hero .hero__grid,
  .hero .hero__particles,
  .hero .hero__cursor-glow { display: none; }
}

/* ─── 9. SERVICES BAR ───────────────────────────────────── */
.services-bar { position:relative; z-index:10; padding:3rem 1.5rem; }
.services-bar__inner {
  max-width:1280px; margin:0 auto;
  display:grid; grid-template-columns:repeat(5,1fr); gap:1.25rem;
}
.service-card {
  padding:1.5rem 1.25rem; border-radius:var(--radius-lg);
  display:flex; flex-direction:column; gap:.75rem;
  transition: transform .3s, box-shadow .3s; cursor:default;
}
.service-card:hover { transform:translateY(-6px); box-shadow:0 12px 30px rgba(212,175,55,.15); }
.service-card__icon svg { width:2rem; height:2rem; }
.service-card h4 { font-family:var(--font-head); font-weight:700; font-size:.9rem; color:var(--white); }
.service-card p  { font-size:.8rem; color:var(--gray); line-height:1.6; }

@media (max-width:1100px) { .services-bar__inner { grid-template-columns:repeat(3,1fr); } }
@media (max-width:680px)  { .services-bar__inner { grid-template-columns:1fr 1fr; } }
@media (max-width:420px)  { .services-bar__inner { grid-template-columns:1fr; } }

/* ─── 10. AUTOMATION FEATURES ──────────────────────────── */
.automation-features { 
  position:relative; padding:6rem 1.5rem; overflow:hidden; 
  background:
    linear-gradient(135deg, rgba(10,15,30,.92), rgba(15,23,41,.88)),
    url('https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=1600&q=80');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
.navbar + .automation-features { padding-top: 9rem; }
.automation-features__container { max-width:1280px; margin:0 auto; position:relative; z-index:1; }

.section-subtitle { 
  font-size:1rem; color:var(--gray); margin-top:1rem; max-width:600px; 
  margin-left:auto; margin-right:auto; text-align:center; line-height:1.6;
}

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

.automation-card {
  padding:2rem; border-radius:var(--radius-lg); border:1px solid rgba(27,23,18,.08);
  background: linear-gradient(180deg, rgba(255,250,242,.92), rgba(248,242,234,.9));
  box-shadow: 0 18px 44px rgba(40,25,8,.12);
  backdrop-filter: blur(10px); transition: transform .3s, border-color .3s, box-shadow .3s;
  display:flex; flex-direction:column;
}

.automation-card:hover {
  transform:translateY(-8px); border-color:rgba(194,131,53,.24);
  box-shadow: 0 24px 52px rgba(40,25,8,.16);
}

.automation-card__icon {
  width:3.5rem; height:3.5rem; border-radius:var(--radius-lg);
  display:flex; align-items:center; justify-content:center; margin-bottom:1.5rem;
}

.automation-card__icon svg { width:1.75rem; height:1.75rem; }

.automation-card h3 {
  font-family:var(--font-head); font-weight:700; font-size:1.3rem;
  color:#1b1712; margin-bottom:0.75rem;
}

.automation-card__copy {
  margin-top: .2rem;
  padding: 1.15rem 1.2rem;
  border-radius: 1.35rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(250, 244, 236, 0.96));
  border: 1px solid rgba(27, 23, 18, 0.08);
  box-shadow: 0 16px 34px rgba(40, 25, 8, 0.12);
}

.automation-card__copy > p {
  font-size:0.95rem; color:#3b332b; font-weight:600; line-height:1.7; margin:0 0 1rem;
}

.automation-features__list {
  list-style:none; display:flex; flex-direction:column; gap:0.7rem; margin:0; padding:0;
}

.automation-features__list li {
  font-size:0.85rem; color:#3b332b; font-weight:600; padding-left:1.5rem; position:relative;
}

.brands .section-title {
  text-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
}

.section-title,
.about__title,
.solutions-page__title,
.solutions-page__hero-overlay h2 {
  text-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);
}

.automation-features__list li::before {
  content:'✓'; position:absolute; left:0; color:var(--gold); font-weight:bold;
}

@media (max-width:1024px) { .automation-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px) { .automation-grid { grid-template-columns:1fr; } }

.automation-features__list li::before {
  content:'\2713';
}

/* ─── 11. PORTFOLIO ─────────────────────────────────────── */
.portfolio { 
  position:relative; padding:6rem 1.5rem; overflow:hidden;
  background:
    linear-gradient(135deg, rgba(10,15,30,.90), rgba(15,23,41,.86)),
    url('https://images.unsplash.com/photo-1664860676652-7c3ecc65e71e?w=1600&q=80');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
.navbar + .portfolio { padding-top: 10rem; }
.portfolio__container { max-width:1280px; margin:0 auto; position:relative; z-index:1; }

.portfolio .section-header { position:relative; margin-bottom: 2.25rem; }
.portfolio .section-header::before{
  content:'';
  position:absolute;
  left:50%;
  top:-2.75rem;
  transform:translateX(-50%);
  width:min(56rem, 92vw);
  height:12rem;
  background:
    radial-gradient(closest-side at 25% 40%, rgba(212,175,55,.22) 0%, transparent 70%),
    radial-gradient(closest-side at 75% 60%, rgba(42,191,176,.18) 0%, transparent 70%),
    radial-gradient(closest-side at 50% 10%, rgba(0,217,255,.10) 0%, transparent 70%);
  filter: blur(36px);
  opacity:.9;
  pointer-events:none;
  z-index:-1;
}
.portfolio .section-title{
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  letter-spacing:.01em;
  text-shadow: 0 20px 80px rgba(0,0,0,.55), 0 0 40px rgba(42,191,176,.14);
}
.portfolio .section-title::after{
  content:'';
  display:block;
  height: 4px;
  width: clamp(9rem, 28vw, 18rem);
  margin: .9rem auto 0;
  border-radius: var(--radius-pill);
  background: linear-gradient(to right, transparent, rgba(212,175,55,.95), rgba(42,191,176,.95), transparent);
  background-size: 200% 100%;
  animation: shimmer-move 4.5s linear infinite;
  opacity:.92;
  filter: drop-shadow(0 0 14px rgba(42,191,176,.18));
}

.portfolio__subheader{
  position: relative;
  text-align: center;
  margin: 0 0 2.25rem;
}
.portfolio__subheader::before{
  content:'';
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  width: min(42rem, 92vw);
  height: 7.5rem;
  background:
    radial-gradient(closest-side at 22% 55%, rgba(42,191,176,.18) 0%, transparent 72%),
    radial-gradient(closest-side at 78% 50%, rgba(212,175,55,.18) 0%, transparent 72%),
    radial-gradient(closest-side at 50% 10%, rgba(0,217,255,.10) 0%, transparent 70%);
  filter: blur(30px);
  opacity: .85;
  pointer-events: none;
  z-index: 0;
}
.portfolio__subheader .section-badge{ position: relative; z-index: 1; }

.portfolio__carousel-wrapper {
  position:relative; display:flex; align-items:center; gap:1rem; margin-bottom:3rem;
}
.carousel-btn {
  flex-shrink:0; width:3rem; height:3rem; border-radius:50%;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition: all .3s;
}
.carousel-btn svg { width:1.25rem; height:1.25rem; color:var(--gray); }
.carousel-btn:hover { background:rgba(212,175,55,.15); border-color:var(--gold); }
.carousel-btn:hover svg { color:var(--gold); }

.portfolio__track-clip { flex:1; overflow:hidden; }
.portfolio__track {
  display:flex; gap:.75rem;
  transition: transform .5s cubic-bezier(.25,.46,.45,.94);
}
.portfolio__slide { flex-shrink:0; width:calc((100% - 1.5rem) / 3); }
.portfolio__card {
  display:block;
  text-decoration:none;
  color: inherit;
  position:relative; height:280px; border-radius:var(--radius-lg);
  background-size:cover; background-position:center; background-repeat:no-repeat;
  background-color: rgba(15,23,41,.35);
  overflow:hidden; cursor:zoom-in;
  transition: transform .5s;
}
.portfolio__card:hover { transform:scale(1.03); }
.portfolio__card-border {
  position:absolute; inset:0;
  border-radius:inherit;
  border:2px solid rgba(42,191,176,.65);
  box-shadow:
    inset 0 0 0 1px rgba(212,175,55,.10),
    0 24px 70px rgba(0,0,0,.35);
  pointer-events:none;
}

.portfolio__grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:.75rem; margin-bottom:2rem;
}
.portfolio__grid-card {
  position: relative;
  isolation: isolate;
  /* Full portrait / Reels-style (9:16) */
  aspect-ratio: 9 / 16;
  height: 460px; /* fallback */
  border-radius:var(--radius);
  background:#000;
  background-size:cover; background-position:center; overflow:hidden; cursor:pointer;
  border: 2px solid transparent; transition: transform .3s, border-color .3s;
}
.portfolio__grid-card::before,
.portfolio__grid-card::after{
  position: absolute;
  left: 50%;
  top: 50%;
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  transition: opacity .22s ease, transform .22s ease;
  transform: translate(-50%, -50%) scale(.92);
}
.portfolio__grid-card::before{
  content: "";
  width: 72px;
  height: 72px;
  border-radius: 999px;
  background: rgba(10,15,30,.55);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow:
    0 18px 55px rgba(0,0,0,.45),
    inset 0 0 0 1px rgba(42,191,176,.20);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.portfolio__grid-card::after{
  content: "";
  width: 0;
  height: 0;
  margin-left: 3px;
  border-style: solid;
  border-width: 11px 0 11px 17px;
  border-color: transparent transparent transparent rgba(255,255,255,.92);
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.45));
}
.portfolio__grid-card:hover::before,
.portfolio__grid-card:hover::after,
.portfolio__grid-card:focus-within::before,
.portfolio__grid-card:focus-within::after{
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.portfolio__grid-card.is-playing::before,
.portfolio__grid-card.is-playing::after{
  opacity: 0;
}
.portfolio__grid-card--youtube{
  aspect-ratio: 16 / 9;
  height: 315px; /* fallback */
  grid-column: 1 / -1;
  max-width: 920px;
  justify-self: center;
}
.portfolio__grid-card--youtube .portfolio__grid-media{ object-fit: contain; }
@supports (aspect-ratio: 1 / 1) {
  .portfolio__grid-card { height: auto; }
}
.portfolio__grid-card:hover { transform:scale(1.02); border-color:rgba(42,191,176,.5); }
.portfolio__grid-card.is-playing { border-color: rgba(212,175,55,.7); box-shadow: 0 0 28px rgba(212,175,55,.18); }
.portfolio__grid-card::before,
.portfolio__grid-card::after {
  display: none;
}
.portfolio__grid-media {
  width: 100%;
  height: 100%;
  /* Fill the portrait frame */
  object-fit: cover;
  display: block;
  border-radius: inherit;
  background:#000;
}
.portfolio__video-copy{
  position:absolute;
  top:1rem;
  left:1rem;
  z-index:3;
  display:grid;
  gap:.42rem;
  max-width:min(72%, 24rem);
  padding:.9rem 1rem;
  border-radius:1.1rem;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg, rgba(6,16,28,.84), rgba(6,16,28,.56));
  box-shadow:0 16px 40px rgba(0,0,0,.34);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  pointer-events:none;
}
.portfolio__video-kicker{
  color:var(--teal-vivid);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.portfolio__video-title{
  color:var(--white);
  font-family:var(--font-head);
  font-size:clamp(1rem, 2.2vw, 1.55rem);
  font-weight:700;
  letter-spacing:.04em;
  line-height:1.05;
}
.portfolio__grid-card--youtube .portfolio__video-copy{
  top:1.2rem;
  left:1.2rem;
  max-width:min(48%, 26rem);
}
.portfolio__timeline {
  position:absolute;
  left:.85rem;
  right:.85rem;
  bottom:.85rem;
  z-index:3;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:.75rem;
  padding:.72rem .9rem;
  border-radius:999px;
  background:rgba(6,16,28,.78);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 14px 30px rgba(0,0,0,.34);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
.portfolio__grid-card:hover .portfolio__timeline,
.portfolio__grid-card.is-playing .portfolio__timeline {
  border-color:rgba(212,175,55,.28);
  box-shadow:0 16px 34px rgba(0,0,0,.38);
}
.portfolio__time {
  min-width:2.5rem;
  color:rgba(248,249,250,.84);
  font-family:var(--font-head);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.08em;
  text-align:center;
}
.portfolio__timeline-slider {
  position:relative;
  display:flex;
  align-items:center;
  width:100%;
  min-width:0;
  height:1rem;
}
.portfolio__timeline-track,
.portfolio__timeline-fill {
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  height:.28rem;
  border-radius:999px;
  pointer-events:none;
}
.portfolio__timeline-track {
  width:100%;
  background:rgba(255,255,255,.18);
}
.portfolio__timeline-fill {
  width:0;
  background:linear-gradient(90deg, var(--gold), var(--teal-vivid));
  box-shadow:0 0 16px rgba(212,175,55,.24);
}
.portfolio__timeline-range {
  position:relative;
  z-index:1;
  width:100%;
  margin:0;
  appearance:none;
  -webkit-appearance:none;
  background:transparent;
  cursor:pointer;
}
.portfolio__timeline-range:disabled {
  cursor:default;
}
.portfolio__timeline-range::-webkit-slider-runnable-track {
  height:.28rem;
  background:transparent;
}
.portfolio__timeline-range::-webkit-slider-thumb {
  -webkit-appearance:none;
  width:.85rem;
  height:.85rem;
  margin-top:-.28rem;
  border-radius:50%;
  border:2px solid rgba(6,16,28,.78);
  background:var(--white);
  box-shadow:0 0 0 4px rgba(212,175,55,.14);
}
.portfolio__timeline-range::-moz-range-track {
  height:.28rem;
  background:transparent;
  border:none;
}
.portfolio__timeline-range::-moz-range-progress {
  height:.28rem;
  background:transparent;
}
.portfolio__timeline-range::-moz-range-thumb {
  width:.85rem;
  height:.85rem;
  border-radius:50%;
  border:2px solid rgba(6,16,28,.78);
  background:var(--white);
  box-shadow:0 0 0 4px rgba(212,175,55,.14);
}
.portfolio__video-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  margin: 0 0 1.25rem;
}

.portfolio__view-more {
  text-align: center;
  max-width: 56rem;
  margin: 2.25rem auto 0;
  padding: 2rem 1.5rem;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(135deg, rgba(26,39,69,.65), rgba(15,23,41,.35));
  box-shadow: 0 24px 80px rgba(0,0,0,.35);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.portfolio__view-more::before{
  content:'';
  position:absolute;
  inset:-60% -20%;
  background:
    radial-gradient(closest-side at 28% 55%, rgba(42,191,176,.20) 0%, transparent 70%),
    radial-gradient(closest-side at 72% 45%, rgba(212,175,55,.18) 0%, transparent 70%);
  filter: blur(28px);
  opacity:.95;
  pointer-events:none;
  z-index:-1;
}
.portfolio__view-more .btn-outline-gold,
.portfolio__view-more .btn-gold {
  min-width: 220px;
}
.portfolio__back-home {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
}

@media (max-width:900px) {
  .portfolio__slide { width:calc((100% - .75rem) / 2); }
  .portfolio__grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:580px) {
  .portfolio__slide { width:100%; }
  .portfolio__grid  { grid-template-columns:1fr; }
  .portfolio__video-copy{
    top:.8rem;
    left:.8rem;
    right:.8rem;
    max-width:none;
    padding:.72rem .82rem;
    gap:.28rem;
  }
  .portfolio__video-kicker{
    font-size:.62rem;
    letter-spacing:.14em;
  }
  .portfolio__video-title{
    font-size:1rem;
  }
  .portfolio__timeline {
    left:.7rem;
    right:.7rem;
    bottom:.7rem;
    gap:.55rem;
    padding:.68rem .72rem;
  }
  .portfolio__time {
    min-width:2.2rem;
    font-size:.66rem;
  }
}

/* ─── 11B. LIGHTBOX (Fullscreen image view) ─────────────── */
.lightbox{
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  place-items: center;
  padding: 1.25rem;
}
.lightbox.is-open{ display: grid; }
.lightbox__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.lightbox__dialog{
  position: relative;
  width: min(1400px, 96vw);
  padding: .75rem;
  border-radius: var(--radius-xl);
  border-color: rgba(255,255,255,.08) !important;
  box-shadow: 0 30px 100px rgba(0,0,0,.55);
  z-index: 1;
}
.lightbox__img{
  width: 100%;
  height: auto;
  max-height: 88vh;
  object-fit: contain;
  display: block;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(10,15,30,.35);
}
.lightbox__close{
  position: absolute;
  top: .65rem;
  right: .65rem;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(15,23,41,.55);
  color: var(--white);
  cursor: pointer;
  font-size: 1.6rem;
  line-height: 1;
  display: grid;
  place-items: center;
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.lightbox__close:hover{ transform: scale(1.05); border-color: rgba(212,175,55,.55); box-shadow: 0 0 30px rgba(212,175,55,.18); }
.lightbox__nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(15,23,41,.45);
  color: var(--white);
  cursor: pointer;
  font-size: 2rem;
  line-height: 1;
  display: grid;
  place-items: center;
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.lightbox__nav:hover{ transform: translateY(-50%) scale(1.05); border-color: rgba(42,191,176,.55); box-shadow: 0 0 30px rgba(42,191,176,.18); }
.lightbox__nav--prev{ left: .65rem; }
.lightbox__nav--next{ right: .65rem; }

@media (max-width:640px){
  .lightbox__nav{ width: 2.6rem; height: 2.6rem; font-size: 1.8rem; }
  .lightbox__img{ max-height: 74vh; }
}

/* ─── 11. ABOUT ─────────────────────────────────────────── */
.about { 
  position:relative; padding:6rem 1.5rem; overflow:hidden; isolation:isolate;
  background: linear-gradient(180deg, #08111c 0%, #0b1523 52%, #091320 100%);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
.about::before,
.about::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 0;
  filter: blur(18px);
}

.about::before {
  top: -9rem;
  left: -8rem;
  width: 28rem;
  height: 28rem;
  background: radial-gradient(circle, rgba(42, 191, 176, 0.22) 0%, rgba(42, 191, 176, 0) 68%);
}

.about::after {
  right: -9rem;
  bottom: -10rem;
  width: 30rem;
  height: 30rem;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.18) 0%, rgba(212, 175, 55, 0) 70%);
}
.navbar + .about { padding-top: 9rem; }
.about__container {
  max-width:1280px; margin:0 auto; position:relative; z-index:1;
  display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center;
}
.about__images { position:relative; height:500px; }
.about__img-main {
  position:absolute; top:0; right:3rem; width:72%; height:72%;
  border-radius:var(--radius); overflow:hidden; z-index:2;
  animation: float-up 6s ease-in-out infinite;
}
.about__img-main img { width:100%; height:100%; object-fit:cover; transition:transform .7s; }
.about__img-main:hover img { transform:scale(1.06); }
.about__scan-line {
  position:absolute; inset:0;
  background: linear-gradient(to bottom, transparent, rgba(42,191,176,.2), transparent);
  animation: scan-v 2s linear infinite; opacity:0; pointer-events:none;
  transition:opacity .3s;
}
.about__img-main:hover .about__scan-line { opacity:1; }

.about__img-secondary {
  position:absolute; bottom:3rem; left:0; width:60%; height:52%;
  border-radius:var(--radius); overflow:hidden; z-index:3;
  background:rgba(15,23,41,.9); border:1px solid rgba(255,255,255,.15);
  animation: float-dn 7s ease-in-out infinite; animation-delay:1s;
}
.about__img-secondary img { width:100%; height:100%; object-fit:cover; transition:transform .7s; }
.about__img-secondary:hover img { transform:scale(1.06); }

.about__node { position:absolute; border-radius:50%; }
.about__node--1 { top:5rem; left:5rem; width:.75rem; height:.75rem; background:var(--teal-vivid); animation:pulse 2s infinite; }
.about__node--2 { bottom:8rem; right:5rem; width:.6rem; height:.6rem; background:var(--cyan); animation:pulse 2.5s .5s infinite; }

.about__content {
  position:relative; padding:3.5rem; border-radius:var(--radius-xl); overflow:hidden;
}
.about__label { margin-bottom:1.5rem; }
.about__title {
  font-family:var(--font-head); font-size:clamp(1.9rem,3.8vw,3rem); font-weight:900;
  color:var(--white); line-height:1.2; margin-bottom:2rem; text-align:center;
}
.about__text-card {
  padding:1.5rem; border-radius:var(--radius-lg); margin-bottom:1.25rem;
  border-left:4px solid transparent !important;
}
.about__text-card--teal  { border-left-color:var(--teal-vivid) !important; }
.about__text-card--cyan  { border-left-color:var(--cyan) !important; }
.about__text-card p { color:var(--gray); line-height:1.8; }
.about__text-card strong { color:var(--teal-vivid); }
.about__why { margin-top: 1.5rem; }
.about__cta { margin-top:.5rem; }
.about__cta svg { width:1.1rem; height:1.1rem; }

@media (max-width:1024px) { .about__container { grid-template-columns:1fr; } .about__images { display:none; } }

.journey-roadmap {
  position: relative;
  padding: 0 1.5rem 5.5rem;
  scroll-margin-top: 7.5rem;
  overflow: hidden;
  background:
    radial-gradient(circle at 10% 16%, rgba(42,191,176,.12), transparent 18%),
    radial-gradient(circle at 88% 12%, rgba(0,217,255,.12), transparent 16%),
    linear-gradient(180deg, #fffdf8 0%, #f8f3ea 54%, #ece1cd 100%);
}
.journey-roadmap::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(17, 54, 62, 0.03) 0, rgba(17, 54, 62, 0.03) 1px, transparent 1px, transparent 92px),
    linear-gradient(180deg, rgba(17, 54, 62, 0.03) 0, rgba(17, 54, 62, 0.03) 1px, transparent 1px, transparent 92px);
  opacity: .45;
  pointer-events: none;
}
.journey-roadmap__container {
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.journey-roadmap__intro {
  max-width: 50rem;
  margin: 1.65rem auto 3.6rem;
  text-align: center;
}
.journey-roadmap .section-title {
  color: #102430;
  text-shadow: 0 10px 28px rgba(255,255,255,.42);
}
.journey-roadmap .section-subtitle {
  color: rgba(16,36,48,.72);
}
.journey-roadmap__canvas {
  position: relative;
  padding-top: 1.2rem;
}
.journey-roadmap__launch {
  position: absolute;
  top: 0;
  right: 7%;
  width: 5.9rem;
  height: 8.2rem;
  display: grid;
  place-items: center;
  border-radius: 2rem;
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.34));
  border: 1px solid rgba(15,23,41,.08);
  box-shadow: 0 26px 50px rgba(14,30,41,.16);
}
.journey-roadmap__launch::after {
  content: '';
  position: absolute;
  top: calc(100% - .4rem);
  left: 50%;
  width: 1.15rem;
  height: 4.25rem;
  transform: translateX(-50%);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,168,93,.95), rgba(255,168,93,0));
  filter: blur(2px);
}
.journey-roadmap__launch svg {
  width: 3.65rem;
  height: 3.65rem;
}
.journey-roadmap__track {
  position: relative;
  display: grid;
  gap: 2rem;
  padding-bottom: 1rem;
}
.journey-roadmap__track::before {
  content: '';
  position: absolute;
  top: .75rem;
  bottom: 1.25rem;
  left: 50%;
  width: .95rem;
  transform: translateX(-50%);
  border-radius: 999px;
  background: linear-gradient(180deg, #1f9ba7 0%, #0f6f79 56%, #164857 100%);
  box-shadow:
    0 18px 40px rgba(15,90,101,.22),
    0 0 0 18px rgba(31,155,167,.07);
}
.journey-roadmap__track::after {
  content: '';
  position: absolute;
  top: 1rem;
  bottom: 1.5rem;
  left: 50%;
  width: 4rem;
  transform: translateX(-50%);
  border-radius: 999px;
  background: radial-gradient(circle at 50% 50%, rgba(31,155,167,.2), transparent 72%);
  filter: blur(12px);
  pointer-events: none;
}
.journey-step {
  position: relative;
  width: calc(50% - 4rem);
  padding: 1.4rem 1.5rem 1.35rem;
  border-radius: 1.75rem;
  border: 1px solid rgba(15,23,41,.09);
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(252,246,237,.93));
  box-shadow: 0 24px 44px rgba(16,35,49,.12);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.journey-step:hover {
  transform: translateY(-4px);
  border-color: rgba(26,134,145,.26);
  box-shadow: 0 28px 50px rgba(16,35,49,.16);
}
.journey-step--left {
  margin-right: auto;
}
.journey-step--right {
  margin-left: auto;
}
.journey-step::before {
  content: '';
  position: absolute;
  top: 1.55rem;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #2abfb0, #0f6f79);
  border: 4px solid rgba(255,253,248,.98);
  box-shadow: 0 0 0 10px rgba(42,191,176,.08);
  z-index: 1;
}
.journey-step::after {
  content: '';
  position: absolute;
  top: 2rem;
  width: 3.2rem;
  height: 2px;
  background: linear-gradient(90deg, rgba(15,111,121,.82), rgba(15,23,41,.12));
}
.journey-step--left::before {
  right: -4.52rem;
}
.journey-step--left::after {
  right: -3.2rem;
}
.journey-step--right::before {
  left: -4.52rem;
}
.journey-step--right::after {
  left: -3.2rem;
  background: linear-gradient(90deg, rgba(15,23,41,.12), rgba(15,111,121,.82));
}
.journey-step__index {
  display: inline-flex;
  margin-bottom: .7rem;
  color: rgba(16,36,48,.38);
  font-family: var(--font-head);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
}
.journey-step__year {
  display: block;
  margin-bottom: .65rem;
  font-family: var(--font-head);
  font-size: clamp(2.2rem, 5vw, 3.35rem);
  font-weight: 900;
  letter-spacing: .04em;
  line-height: .95;
  color: #0d7a86;
}
.journey-step__tag {
  display: inline-flex;
  align-items: center;
  margin-bottom: .8rem;
  padding: .36rem .82rem;
  border-radius: 999px;
  background: rgba(16,36,48,.06);
  color: #1b2e39;
  font-family: var(--font-head);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.journey-step h3 {
  margin: 0 0 .55rem;
  font-family: var(--font-head);
  font-size: 1.38rem;
  line-height: 1.12;
  color: #121a20;
}
.journey-step p {
  margin: 0;
  color: rgba(18,26,32,.74);
  font-size: .98rem;
  line-height: 1.72;
}

@media (max-width: 1024px) {
  .journey-roadmap__launch {
    right: 2%;
  }
  .journey-step {
    width: calc(50% - 3.2rem);
  }
  .journey-step--left::before {
    right: -3.72rem;
  }
  .journey-step--right::before {
    left: -3.72rem;
  }
}

@media (max-width: 820px) {
  .journey-roadmap {
    padding: 0 1rem 4.5rem;
  }
  .journey-roadmap__intro {
    margin-bottom: 2.4rem;
  }
  .journey-roadmap__launch {
    position: relative;
    top: auto;
    right: auto;
    margin: 0 auto 1.5rem;
  }
  .journey-roadmap__track {
    gap: 1.15rem;
    padding-left: 3.55rem;
  }
  .journey-roadmap__track::before {
    left: 1.2rem;
    top: 0;
    bottom: 0;
    width: .8rem;
    transform: none;
  }
  .journey-roadmap__track::after {
    left: 1.2rem;
    width: 3rem;
    transform: translateX(-1.1rem);
  }
  .journey-step,
  .journey-step--left,
  .journey-step--right {
    width: 100%;
    margin: 0;
  }
  .journey-step::before,
  .journey-step--left::before,
  .journey-step--right::before {
    left: -2.9rem;
    right: auto;
  }
  .journey-step::after,
  .journey-step--left::after,
  .journey-step--right::after {
    left: -1.95rem;
    right: auto;
    width: 1.95rem;
    background: linear-gradient(90deg, rgba(15,111,121,.82), rgba(15,23,41,.12));
  }
}

/* ─── 12. BRANDS ────────────────────────────────────────── */
.brands { 
  position:relative; padding:5rem 1.5rem; overflow:hidden; 
  background:
    linear-gradient(135deg, rgba(10,15,30,.89), rgba(15,23,41,.86)),
    url('https://images.unsplash.com/photo-1670487270304-e38c61fc64db?w=1600&q=80');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
.brands__container { max-width:1280px; margin:0 auto; position:relative; z-index:1; }
.brands__grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem;
  margin-top:1rem;
}
.brand-item {
  padding:2rem 1.5rem; border-radius:var(--radius-lg);
  display:flex; align-items:center; justify-content:center;
  min-height:112px;
  color:var(--gray); cursor:default;
}
.brand-item__logo {
  display:block;
  width:100%; height:auto; max-width:220px; max-height:64px;
  object-fit:contain;
  opacity:1;
  filter:none;
}
@media (max-width:900px) { .brands__grid { grid-template-columns:repeat(2,1fr); } }

/* ─── 13. STATS ─────────────────────────────────────────── */
 .stats { 
  position:relative; padding:6rem 1.5rem 5rem; overflow:hidden; isolation:isolate; 
  --lamp-color: 42,191,176;
  background:
    radial-gradient(circle at 50% 40%, rgba(84,132,157,.16) 0%, transparent 16%),
    radial-gradient(circle at 50% 50%, rgba(194,131,53,.08) 0%, transparent 28%),
    linear-gradient(180deg, #0f172b 0%, #0b1221 100%);
}
.stats::after{
  content:'';
  position:absolute;
  inset:-14% -10% -24%;
  z-index:0;
  pointer-events:none;
  opacity:0;
  transition: opacity .75s ease;
  background:
    radial-gradient(1200px 900px at 50% 0%, rgba(0,0,0,0) 0%, rgba(0,0,0,.22) 60%, rgba(0,0,0,.46) 100%),
    radial-gradient(760px 540px at 12% 42%, rgba(0,0,0,.20) 0%, transparent 70%),
    radial-gradient(760px 540px at 88% 42%, rgba(0,0,0,.20) 0%, transparent 70%);
}
.stats::before{
  content:'';
  position:absolute;
  inset:-12% -10% -22%;
  z-index:3;
  pointer-events:none;
  opacity:0;
  transition: opacity .75s ease;
  mix-blend-mode: screen;
  background:
    radial-gradient(760px 560px at 22% 0%, rgba(var(--cob-warm), .26) 0%, transparent 72%),
    radial-gradient(720px 520px at 38% 0%, rgba(var(--cob-warm), .18) 0%, transparent 72%),
    radial-gradient(720px 520px at 62% 0%, rgba(var(--cob-warm), .18) 0%, transparent 72%),
    radial-gradient(760px 560px at 78% 0%, rgba(var(--cob-warm), .26) 0%, transparent 72%),
    radial-gradient(1200px 900px at 50% 35%, rgba(var(--cob-warm), .08) 0%, transparent 70%);
  filter: blur(.2px) saturate(1.12);
}
.stats__container { max-width:1100px; margin:0 auto; position:relative; z-index:2; }
.stats__label { justify-content:center; gap:.75rem; color:var(--teal-vivid); }
.stats .section-title,
.stats .section-label{
  transition: transform .6s ease, text-shadow .6s ease, filter .6s ease, color .6s ease;
}

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

.stat-card {
  position:relative; padding:3rem 2rem; border-radius:var(--radius-xl);
  text-align:center; overflow:hidden; cursor:default;
  transition: transform .3s, box-shadow .3s;
}
.stat-card::before{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
  transition: opacity .65s ease;
  background:
    radial-gradient(680px 420px at 50% 0%, rgba(var(--cob-warm), .10) 0%, transparent 65%),
    linear-gradient(to bottom, rgba(255,255,255,.06), transparent 55%);
  mix-blend-mode: screen;
}
.stat-card:hover { transform:translateY(-8px) scale(1.02); box-shadow:0 20px 50px rgba(42,191,176,.2); }
.stat-card__number {
  font-family:var(--font-head); font-size:clamp(3rem,6vw,4.5rem); font-weight:900;
  margin-bottom:1rem; animation:count-glow 2s ease-in-out infinite;
}
.stat-card__underline {
  width:8rem; height:3px; margin:0 auto .75rem;
  background: linear-gradient(to right, transparent, var(--teal-vivid), transparent);
}
.stat-card__label { font-family:var(--font-body); color:var(--gray); font-size:.95rem; }
.stat-card__dots { display:flex; justify-content:center; gap:.75rem; margin-top:1.5rem; }
.stat-card__dots span {
  width:.5rem; height:.5rem; border-radius:50%; background:var(--teal-vivid);
  opacity:.3; animation:pulse 2s infinite;
}
.stat-card__dots span:nth-child(2) { animation-delay:.3s; }
.stat-card__dots span:nth-child(3) { animation-delay:.6s; }

/* Hanging lamps */
.lamp { position:absolute; top:0; z-index:5; pointer-events:none; --wire-h: 118px; }
/* Positions tuned to look balanced with the COB lighting panel */
.stats { --lamp-outer-x: clamp(2.75rem, 5.5vw, 7rem); --lamp-inner-x: clamp(8rem, 13vw, 16rem); --lamp-right-bias: clamp(0rem, 3vw, 5rem); --cob-warm: 255, 200, 120; --light-level: 0; --dimmer-percent: 80%; }
.lamp--left  { left: var(--lamp-outer-x); }
.lamp--left2 { left: var(--lamp-inner-x); --wire-h: 138px; opacity:.9; }
.lamp--right { right: calc(var(--lamp-outer-x) + var(--lamp-right-bias)); --wire-h: 132px; }
.lamp--right2{ right: calc(var(--lamp-inner-x) + var(--lamp-right-bias)); --wire-h: 112px; opacity:.9; }
 .lamp__wire  { width:2px; height:var(--wire-h); background:linear-gradient(to bottom,#4b5563,rgba(var(--lamp-color),.55)); margin:0 auto; box-shadow:0 0 6px rgba(var(--lamp-color),.35); }
 .lamp__cap   { width:28px; height:38px; background:#1a1a1a; border-radius:3px 3px 0 0; margin:0 auto; border:1px solid rgba(var(--lamp-color),.32); }
.lamp__bulb  {
  width:76px; height:76px; border-radius:50%; margin:0 auto;
  background:rgba(255,255,255,.04); border:2px solid rgba(var(--lamp-color),.22);
  transition: background .5s ease, border-color .5s ease, box-shadow .5s ease;
  box-shadow:0 0 0 transparent;
}
.lamp__bulb.on {
  background:#ffffff; border-color:rgba(var(--lamp-color),.95);
  box-shadow:
    0 0 calc(24px + 66px * var(--light-level)) rgba(var(--lamp-color), calc(.12 + .68 * var(--light-level))),
    0 0 calc(48px + 122px * var(--light-level)) rgba(var(--lamp-color), calc(.08 + .38 * var(--light-level))),
    0 0 calc(110px + 210px * var(--light-level)) rgba(var(--lamp-color), calc(.03 + .18 * var(--light-level))),
    inset 0 0 calc(8px + 26px * var(--light-level)) rgba(255,255,255, calc(.25 + .7 * var(--light-level)));
}
.lamp--left  { animation: swing 2.0s ease-in-out infinite alternate; transform-origin:top center; }
.lamp--left2 { animation: swing 2.6s ease-in-out infinite alternate-reverse; transform-origin:top center; }
.lamp--right { animation: swing 1.65s ease-in-out infinite alternate-reverse; transform-origin:top center; }
.lamp--right2{ animation: swing 2.35s ease-in-out infinite alternate; transform-origin:top center; }

/* COB lights */
.stats__ceiling{ position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.95; }
.cob-row{
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:180px;
}
.cob-light{
  --cob-beam-width: clamp(180px, 15vw, 260px);
  --cob-beam-height: clamp(210px, 23vw, 330px);
  position:absolute;
  top:18px;
  width:14px;
  height:18px;
  border-radius:4px 4px 6px 6px;
  background:linear-gradient(180deg, rgba(30,35,39,.96), rgba(17,20,24,.98));
  border:1px solid rgba(255,244,214,.12);
  box-shadow:0 6px 16px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.04);
  transition:transform .5s ease, background .5s ease, border-color .5s ease, box-shadow .5s ease;
}
.cob-light::before{
  content:'';
  position:absolute;
  left:50%;
  top:-8px;
  width:12px;
  height:12px;
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,248,225,.95) 0%, rgba(var(--cob-warm),.34) 48%, transparent 82%);
  opacity:0;
  transition:opacity .5s ease, box-shadow .5s ease;
}
.cob-light::after{
  content:'';
  position:absolute;
  top:14px;
  left:50%;
  width:var(--cob-beam-width);
  height:var(--cob-beam-height);
  transform:translateX(-50%);
  border-radius:18px 18px 34px 34px;
  clip-path:polygon(9% 0, 91% 0, 100% 100%, 0 100%);
  background:
    linear-gradient(180deg, rgba(255,249,228,.24) 0%, rgba(255,244,214,.12) 18%, rgba(var(--cob-warm),.08) 42%, rgba(9,16,28,0) 100%),
    radial-gradient(ellipse at top, rgba(255,250,236,.44) 0%, rgba(var(--cob-warm),.24) 18%, rgba(var(--cob-warm),.12) 42%, rgba(var(--cob-warm),.05) 62%, transparent 88%);
  opacity:0;
  filter:blur(1.2px);
  mix-blend-mode:screen;
  box-shadow:inset 0 1px 0 rgba(255,248,220,.08), 0 0 44px rgba(var(--cob-warm), .05);
  transition:opacity .65s ease, transform .65s ease, box-shadow .65s ease;
  pointer-events:none;
}
.cob-light.on{
  background:linear-gradient(180deg, rgba(56,60,64,.96), rgba(26,29,34,.98));
  border-color:rgba(var(--cob-warm),.52);
  box-shadow:0 8px 20px rgba(0,0,0,.34), 0 0 16px rgba(var(--cob-warm),.16), inset 0 1px 0 rgba(255,255,255,.08);
}
.cob-light.on::before{
  opacity:calc(.14 + .86 * var(--light-level));
  box-shadow:0 0 calc(4px + 14px * var(--light-level)) rgba(var(--cob-warm), calc(.06 + .22 * var(--light-level)));
}
.cob-light.on::after{
  opacity:calc(.08 + .88 * var(--light-level));
  transform:translateX(-50%) scaleY(calc(.82 + .20 * var(--light-level)));
  box-shadow:
    inset 0 1px 0 rgba(255,248,220, calc(.04 + .08 * var(--light-level))),
    0 0 calc(18px + 50px * var(--light-level)) rgba(var(--cob-warm), calc(.02 + .08 * var(--light-level)));
}
.cob-light:nth-child(1){
  left:9%;
  --cob-beam-width: clamp(150px, 12vw, 220px);
}
.cob-light:nth-child(2){ left:26%; }
.cob-light:nth-child(3){ left:50%; }
.cob-light:nth-child(4){ left:74%; }
.cob-light:nth-child(5){
  left:91%;
  --cob-beam-width: clamp(150px, 12vw, 220px);
}

/* Lighting controls */
.lighting-panel{
  position:absolute;
  top:74%;
  right:1.15rem;
  transform:translateY(-50%);
  z-index:10;
  width:min(380px, calc(100% - 2.3rem));
  margin:0;
  padding:1rem 1rem 1.05rem;
  border-radius:1.4rem;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg, rgba(8,13,24,.84), rgba(8,13,24,.68));
  box-shadow:0 28px 80px rgba(0,0,0,.4), 0 0 40px rgba(212,175,55,.08);
}
.lighting-panel__header{
  display:grid;
  gap:.32rem;
  margin-bottom:.15rem;
}
.lighting-panel__eyebrow{
  color:rgba(248,249,250,.58);
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.24em;
  text-transform:uppercase;
}
.lighting-panel__title{
  color:var(--white);
  font-family:var(--font-head);
  font-size:1.18rem;
  font-weight:700;
  letter-spacing:.06em;
}
.lighting-control{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.1rem;
  padding:.8rem 0 0;
}
.lighting-control__copy{
  display:grid;
  gap:.45rem;
}
.lighting-control__label{
  color:var(--white);
  font-family:var(--font-head);
  font-size:1.08rem;
  font-weight:700;
  letter-spacing:.08em;
}
.lighting-control__status{
  display:inline-flex;
  align-items:center;
  width:max-content;
  padding:.3rem .7rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.05);
  color:rgba(248,249,250,.64);
  font-size:.74rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  transition:color .3s ease, border-color .3s ease, background .3s ease, box-shadow .3s ease;
}
.lighting-control__status.is-on{
  color:var(--teal-vivid);
  border-color:rgba(var(--lamp-color), .34);
  background:rgba(var(--lamp-color), .12);
  box-shadow:0 0 24px rgba(var(--lamp-color), .14);
}
.lighting-control__actions{
  display:flex;
  gap:.6rem;
}
.lighting-button{
  min-width:5rem;
  padding:.78rem 1rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
  color:rgba(248,249,250,.72);
  font-family:var(--font-head);
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  cursor:pointer;
  transition:transform .2s ease, color .3s ease, border-color .3s ease, background .3s ease, box-shadow .3s ease;
}
.lighting-button:hover{
  transform:translateY(-1px);
  color:var(--white);
  border-color:rgba(255,255,255,.2);
}
.lighting-button:focus-visible{
  outline:2px solid rgba(255,255,255,.85);
  outline-offset:2px;
}
.lighting-button[data-light-state="on"].is-active{
  color:var(--teal-vivid);
  border-color:rgba(var(--lamp-color), .5);
  background:rgba(var(--lamp-color), .14);
  box-shadow:0 0 28px rgba(var(--lamp-color), .16);
}
.lighting-button[data-light-state="off"].is-active{
  color:var(--white);
  border-color:rgba(255,255,255,.24);
  background:rgba(255,255,255,.08);
  box-shadow:none;
}
.lighting-dimmer{
  margin-top:.85rem;
  padding-top:.85rem;
  border-top:1px solid rgba(255,255,255,.08);
}
.lighting-dimmer__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:.6rem;
}
.lighting-dimmer__label{
  color:rgba(248,249,250,.82);
  font-family:var(--font-head);
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.lighting-dimmer__value{
  color:var(--teal-vivid);
  font-family:var(--font-head);
  font-size:.85rem;
  font-weight:700;
  letter-spacing:.08em;
}
.lighting-dimmer__scale{
  display:grid;
  gap:.45rem;
}
.lighting-dimmer__slider{
  -webkit-appearance:none;
  appearance:none;
  width:100%;
  height:.36rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(90deg, rgba(var(--lamp-color), .95) 0%, rgba(var(--lamp-color), .72) var(--dimmer-percent), rgba(255,255,255,.08) var(--dimmer-percent), rgba(255,255,255,.08) 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03);
  outline:none;
  cursor:pointer;
}
.lighting-dimmer__slider::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:1rem;
  height:1rem;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.82);
  background:linear-gradient(180deg, rgba(42,191,176,.98), rgba(18,127,120,.98));
  box-shadow:0 0 0 5px rgba(42,191,176,.12), 0 8px 18px rgba(0,0,0,.28);
}
.lighting-dimmer__slider::-moz-range-thumb{
  width:1rem;
  height:1rem;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.82);
  background:linear-gradient(180deg, rgba(42,191,176,.98), rgba(18,127,120,.98));
  box-shadow:0 0 0 5px rgba(42,191,176,.12), 0 8px 18px rgba(0,0,0,.28);
}
.lighting-dimmer__slider::-moz-range-track{
  height:.36rem;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.08);
}
.lighting-dimmer__labels{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  color:rgba(248,249,250,.56);
  font-size:.66rem;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
}

.room-light {
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(circle at 10% 0%,rgba(var(--lamp-color),.20),transparent 60%),radial-gradient(circle at 90% 0%,rgba(var(--lamp-color),.20),transparent 60%);
  opacity:0; transition:opacity .7s ease;
}
.room-light.on { opacity:calc(.08 + .92 * var(--light-level)); }

@media (max-width:1100px) {
  .lighting-panel{
    position:relative;
    top:auto;
    right:auto;
    transform:none;
    width:min(100%, 420px);
    margin:0 auto 1.9rem;
  }
}
@media (max-width:768px) {
  .stats__cards { grid-template-columns:1fr; }
  .lamp, .stats__ceiling { display:none; }
}
@media (max-width:560px) {
  .lighting-panel{
    width:calc(100% - 1rem);
    padding:.9rem;
  }
  .lighting-control{
    flex-direction:column;
    align-items:flex-start;
  }
  .lighting-control__actions{
    width:100%;
  }
  .lighting-button{
    flex:1;
    min-width:0;
  }
}

/* ─── 14. WORKS WITH ────────────────────────────────────── */
.works-with {
  position:relative;
  padding:2.5rem 1.5rem 3.8rem;
  overflow:hidden;
  isolation:isolate;
  background:#0c1325;
}
.works-with .section-bg {
  background:
    radial-gradient(circle at 50% 40%, rgba(84,132,157,.16) 0%, transparent 16%),
    radial-gradient(circle at 50% 50%, rgba(194,131,53,.08) 0%, transparent 28%),
    linear-gradient(180deg, #0f172b 0%, #0b1221 100%);
}
.works-with__container {
  max-width:1280px;
  margin:0 auto;
  position:relative;
  z-index:1;
}
.works-with__header {
  max-width:min(54rem, 100%);
  margin-bottom:2rem;
}
.works-with__header:empty {
  display:none;
}
.works-with__header .section-title {
  max-width:none;
  font-size:clamp(2.4rem, 6.2vw, 4.8rem);
  letter-spacing:.18em;
  text-transform:uppercase;
}
.works-with__header .section-subtitle {
  max-width:38rem;
  font-size:1.02rem;
  line-height:1.85;
}
.hub-diagram {
  position:relative;
  width:min(100%, 800px);
  aspect-ratio:920 / 540;
  min-height:29rem;
  margin:-1rem auto 2.15rem;
  overflow:visible;
}
.hub-diagram__network {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
}
.hub-ring {
  transform-origin:center;
}
.hub-ring--inner {
  animation: hub-ring-glow 4.6s ease-in-out infinite;
}
.hub-ring--mid {
  animation: hub-ring-breathe 6.4s ease-in-out infinite;
}
.hub-ring--outer {
  animation: hub-ring-breathe 7.2s ease-in-out infinite reverse;
}
.hub-link {
  stroke-linecap:round;
  animation: hub-link-flow 6.2s linear infinite;
}
.hub-link--security {
  animation-delay:-0.6s;
}
.hub-link--hvac {
  animation-delay:-1.2s;
}
.hub-link--audio {
  animation-delay:-1.8s;
}
.hub-link--drapes {
  animation-delay:-2.5s;
}
.hub-link--energy {
  animation-delay:-3.8s;
}
.hub-spark {
  transform-origin:center;
  opacity:.92;
}
.hub-node {
  position:absolute;
  z-index:1;
  width:4.95rem;
  aspect-ratio:1;
  border-radius:50%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.26rem;
  padding:.66rem;
  transform:translate(-50%, -50%);
  background:rgba(10,16,31,.72);
  border:1.5px solid rgba(255,255,255,.16);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03), 0 10px 28px rgba(0,0,0,.22);
  transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;
  text-decoration:none;
  text-align:center;
  cursor:pointer;
}
.hub-node__icon,
.hub-node__core-icon {
  display:flex;
  align-items:center;
  justify-content:center;
  width:1.14rem;
  height:1.14rem;
}
.hub-node__icon svg,
.hub-node__core-icon svg {
  width:100%;
  height:100%;
  stroke:currentColor;
  transform-origin:center;
}
.hub-node__label {
  font-family:var(--font-head);
  font-size:.59rem;
  font-weight:700;
  letter-spacing:.04em;
  color:rgba(234,239,246,.84);
}
.hub-node--gold {
  color:#e4b82f;
  border-color:rgba(228,184,47,.88);
  box-shadow: inset 0 0 0 1px rgba(228,184,47,.08), 0 0 26px rgba(228,184,47,.1);
}
.hub-node--cyan {
  color:#5ed2e5;
  border-color:rgba(94,210,229,.9);
  box-shadow: inset 0 0 0 1px rgba(94,210,229,.08), 0 0 26px rgba(94,210,229,.1);
}
.hub-node--center {
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  width:6.85rem;
  background:
    radial-gradient(circle at 50% 34%, rgba(228,184,47,.18), transparent 48%),
    linear-gradient(180deg, rgba(19,27,46,.96), rgba(10,16,31,.98));
  color:#e4b82f;
  border-color:rgba(228,184,47,.82);
  box-shadow:
    inset 0 0 0 1px rgba(228,184,47,.08),
    0 0 32px rgba(228,184,47,.14),
    0 0 0 18px rgba(84,132,157,.03),
    0 0 0 36px rgba(84,132,157,.02);
  animation: hub-core-pulse 5.6s ease-in-out infinite;
}
.hub-node__core-icon {
  width:1.46rem;
  height:1.46rem;
  animation: hub-core-spin 11s linear infinite;
}
.hub-node__core-copy {
  display:block;
  font-family:var(--font-head);
  font-size:.62rem;
  font-weight:700;
  line-height:1.02;
  letter-spacing:.14em;
  color:#f8f3e8;
}
.hub-node--lights { top:23.33%; left:32.28%; }
.hub-node--security { top:50%; left:22.39%; }
.hub-node--drapes { top:76.67%; left:32.28%; }
.hub-node--hvac { top:23.33%; left:67.72%; }
.hub-node--audio { top:50%; left:77.61%; }
.hub-node--energy { top:76.67%; left:67.72%; }
.hub-node--lights {
  animation: hub-float-light 4.4s ease-in-out infinite;
}
.hub-node--lights .hub-node__icon svg {
  animation: hub-lights-icon 2.8s ease-in-out infinite;
}
.hub-node--security {
  animation: hub-security-guard 5.2s ease-in-out infinite;
}
.hub-node--security .hub-node__icon svg {
  animation: hub-security-icon 3.6s ease-in-out infinite;
}
.hub-node--drapes {
  animation: hub-drapes-sway 5s ease-in-out infinite;
}
.hub-node--drapes .hub-node__icon svg {
  animation: hub-drapes-icon 3.8s ease-in-out infinite;
}
.hub-node--hvac {
  animation: hub-hvac-hover 4.8s ease-in-out infinite;
}
.hub-node--hvac .hub-node__icon svg {
  animation: hub-hvac-icon 5.5s linear infinite;
}
.hub-node--audio {
  animation: hub-audio-bounce 4.2s ease-in-out infinite;
}
.hub-node--audio .hub-node__icon svg {
  animation: hub-audio-icon 2.2s ease-in-out infinite;
}
.hub-node--energy {
  animation: hub-energy-charge 3.8s ease-in-out infinite;
}
.hub-node--energy .hub-node__icon svg {
  animation: hub-energy-icon 2.6s ease-in-out infinite;
}
.hub-node:hover {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 0 0 32px rgba(255,255,255,.08), 0 14px 34px rgba(0,0,0,.26);
}
.hub-node:focus-visible {
  outline:2px solid rgba(255,250,242,.92);
  outline-offset:4px;
}
.hub-node--gold:hover {
  border-color:rgba(228,184,47,1);
}
.hub-node--cyan:hover {
  border-color:rgba(94,210,229,1);
}
.works-with__compat {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1.5rem;
  flex-wrap:wrap;
}
.works-with__label {
  font-family:var(--font-head);
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.34em;
  color:rgba(248,243,232,.86);
}
.works-with__logos {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.85rem;
}
.works-logo {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:11rem;
  min-width:11rem;
  min-height:4rem;
  padding:.85rem 1.2rem;
  border-radius:999px;
  border:1px solid rgba(222,209,190,.72);
  background:linear-gradient(180deg, rgba(255,253,248,.96), rgba(248,243,234,.92));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 12px 26px rgba(20,19,18,.12);
  cursor:default;
  transition:transform .25s ease, border-color .25s ease, background .25s ease, box-shadow .25s ease;
}
.works-logo:hover {
  transform:translateY(-2px);
  border-color:rgba(94,210,229,.34);
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,243,234,.96));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 18px 34px rgba(20,19,18,.16);
}
.works-logo__img {
  display:block;
  width:8.5rem;
  height:1.8rem;
  max-width:8.5rem;
  object-fit:contain;
}
.works-logo--google .works-logo__img,
.works-logo--homekit .works-logo__img,
.works-logo--alexa .works-logo__img,
.works-logo--knx .works-logo__img {
  width:8.5rem;
  height:1.8rem;
  max-width:8.5rem;
}
@keyframes hub-ring-glow {
  0%, 100% { opacity:.45; transform:scale(1); }
  50% { opacity:.92; transform:scale(1.045); }
}
@keyframes hub-ring-breathe {
  0%, 100% { opacity:.4; transform:scale(1); }
  50% { opacity:.72; transform:scale(1.03); }
}
@keyframes hub-link-flow {
  from { stroke-dashoffset: 0; opacity:.46; }
  50% { opacity:.95; }
  to { stroke-dashoffset: -64; opacity:.46; }
}
@keyframes hub-spark-pop {
  0%, 100% { opacity:.55; transform:scale(1); }
  50% { opacity:1; transform:scale(1.35); }
}
@keyframes hub-core-pulse {
  0%, 100% { box-shadow: inset 0 0 0 1px rgba(228,184,47,.08), 0 0 32px rgba(228,184,47,.14), 0 0 0 18px rgba(84,132,157,.03), 0 0 0 36px rgba(84,132,157,.02); }
  50% { box-shadow: inset 0 0 0 1px rgba(228,184,47,.16), 0 0 42px rgba(228,184,47,.24), 0 0 0 22px rgba(84,132,157,.05), 0 0 0 44px rgba(84,132,157,.028); }
}
@keyframes hub-core-spin {
  from { transform:rotate(0deg); }
  to { transform:rotate(360deg); }
}
@keyframes hub-float-light {
  0%, 100% { transform:translate(-50%, -50%); }
  50% { transform:translate(-50%, calc(-50% - 10px)); }
}
@keyframes hub-lights-icon {
  0%, 100% { filter:drop-shadow(0 0 0 rgba(228,184,47,0)); transform:scale(1); }
  50% { filter:drop-shadow(0 0 8px rgba(228,184,47,.55)); transform:scale(1.12); }
}
@keyframes hub-security-guard {
  0%, 100% { transform:translate(-50%, -50%) scale(1); }
  50% { transform:translate(calc(-50% - 5px), -50%) scale(1.04); }
}
@keyframes hub-security-icon {
  0%, 100% { transform:scale(1); }
  50% { transform:scale(1.08); }
}
@keyframes hub-drapes-sway {
  0%, 100% { transform:translate(-50%, -50%) rotate(0deg); }
  25% { transform:translate(calc(-50% - 2px), calc(-50% + 2px)) rotate(-2deg); }
  75% { transform:translate(calc(-50% + 2px), calc(-50% - 2px)) rotate(2deg); }
}
@keyframes hub-drapes-icon {
  0%, 100% { transform:translateX(0); }
  50% { transform:translateX(2px) scaleX(.96); }
}
@keyframes hub-hvac-hover {
  0%, 100% { transform:translate(-50%, -50%); }
  50% { transform:translate(-50%, calc(-50% - 8px)); }
}
@keyframes hub-hvac-icon {
  from { transform:rotate(0deg); }
  to { transform:rotate(360deg); }
}
@keyframes hub-audio-bounce {
  0%, 100% { transform:translate(-50%, -50%); }
  30% { transform:translate(-50%, calc(-50% - 8px)); }
  60% { transform:translate(-50%, calc(-50% + 2px)); }
}
@keyframes hub-audio-icon {
  0%, 100% { transform:scale(1); }
  50% { transform:scale(1.12) translateY(-1px); }
}
@keyframes hub-energy-charge {
  0%, 100% { transform:translate(-50%, -50%); box-shadow: inset 0 0 0 1px rgba(94,210,229,.08), 0 0 26px rgba(94,210,229,.1); }
  50% { transform:translate(-50%, calc(-50% - 9px)); box-shadow: inset 0 0 0 1px rgba(94,210,229,.16), 0 0 34px rgba(94,210,229,.24); }
}
@keyframes hub-energy-icon {
  0%, 100% { transform:skewX(0deg) scale(1); }
  40% { transform:skewX(-8deg) scale(1.08); }
  60% { transform:skewX(8deg) scale(.98); }
}
@media (max-width:900px) {
  .hub-diagram {
    width:min(100%, 650px);
  }
  .hub-node {
    width:4.45rem;
  }
  .hub-node--center {
    width:6.25rem;
  }
}
@media (max-width:680px) {
  .works-with {
    padding:2.45rem 1rem 3.1rem;
  }
  .hub-diagram {
    width:min(100%, 380px);
    aspect-ratio:auto;
    min-height:0;
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    justify-items:center;
    gap:.82rem .65rem;
  }
  .hub-diagram__network {
    display:none;
  }
  .hub-node {
    position:relative;
    inset:auto;
    transform:none;
    width:5.85rem;
    animation:none !important;
  }
  .hub-node--center {
    order:-1;
    grid-column:1 / -1;
    width:7.25rem;
    margin-bottom:.45rem;
  }
  .works-with__compat {
    gap:1rem;
  }
  .works-with__label {
    width:100%;
    text-align:center;
  }
  .works-logo {
    width:100%;
    min-width:0;
    min-height:4.15rem;
    padding:.78rem 1rem;
  }
  .works-logo__img {
    width:7.8rem;
    height:1.7rem;
    max-width:100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hub-ring,
  .hub-link,
  .hub-spark,
  .hub-node,
  .hub-node__icon svg,
  .hub-node__core-icon,
  .hub-node__core-copy {
    animation: none !important;
  }
}

/* ─── 15. AUTOMATION MARQUEE ────────────────────────────── */
.automation-marquee {
  position:relative; height:400px; display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  background:
    linear-gradient(135deg, rgba(10,15,30,.95), rgba(15,23,41,.92)),
    url('https://images.unsplash.com/photo-1726865493923-f2f26e63be0d?w=1600&q=80');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
.automation-marquee__grid {
  position:absolute; inset:0; opacity:.025;
  background-image:linear-gradient(var(--gold) 1px,transparent 1px),linear-gradient(90deg,var(--gold) 1px,transparent 1px);
  background-size:50px 50px;
}
.automation-marquee__sweep {
  position:absolute; inset:0;
  background:linear-gradient(to right,transparent,rgba(42,191,176,.3),transparent);
  transform:skewX(-12deg); animation:scan-h 3s ease-in-out infinite; animation-delay:2s;
}
.automation-marquee__text {
  position:relative; z-index:2; text-align:center; cursor:default;
  animation:float-up 3s ease-in-out infinite;
}
.automation-marquee__line1 {
  display:block; font-family:var(--font-head); font-size:clamp(3.5rem,10vw,6.5rem);
  font-weight:900; color:var(--white); line-height:1;
  -webkit-text-fill-color: currentColor;
  animation:gradient-pan 8s ease-in-out infinite;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .automation-marquee__line1 {
    background:linear-gradient(135deg,var(--white) 0%,rgba(255,255,255,.6) 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color: transparent;
    -webkit-text-fill-color:transparent;
    background-size:200%;
  }
}
.automation-marquee__line2 {
  display:block; font-family:var(--font-head); font-size:clamp(3.5rem,10vw,6.5rem);
  font-weight:900; line-height:1;
}

/* ─── 16. FEATURES ──────────────────────────────────────── */
.features { 
  position:relative; padding:6rem 1.5rem 3.1rem; overflow:hidden; 
  background:
    linear-gradient(135deg, rgba(10,15,30,.91), rgba(15,23,41,.87)),
    url('https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=1600&q=80');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
.features__grid-bg {
  position:absolute; inset:0; opacity:.03;
  background-image:linear-gradient(#d4af37 2px,transparent 2px),linear-gradient(90deg,#d4af37 2px,transparent 2px);
  background-size:100px 100px;
}
.features__container { max-width:1280px; margin:0 auto; position:relative; z-index:1; }
.features__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; margin-bottom:1.2rem; }

.feature-card {
  position:relative; padding:2.25rem 2rem; border-radius:var(--radius-xl);
  overflow:hidden; cursor:default; transition:transform .3s, box-shadow .3s;
}
.feature-card:hover { transform:translateY(-12px) scale(1.02); }
.feature-card__bg {
  position:absolute; inset:0; opacity:0; transition:opacity .5s;
  background:radial-gradient(circle at center, var(--c,#d4af37) 0%, transparent 65%);
}
.feature-card:hover .feature-card__bg { opacity:.15; }
.feature-card__top-bar {
  position:absolute; top:0; left:0; right:0; height:3px; opacity:0; transform:scaleX(0);
  background:linear-gradient(to right, var(--c,#d4af37), transparent);
  transition:opacity .4s, transform .4s; transform-origin:left;
}
.feature-card:hover .feature-card__top-bar { opacity:1; transform:scaleX(1); }

.feature-card__icon-wrap {
  width:5rem; height:5rem; border-radius:var(--radius-lg);
  display:flex; align-items:center; justify-content:center; margin-bottom:1.5rem;
  transition:box-shadow .3s;
}
.feature-card:hover .feature-card__icon-wrap { box-shadow:0 0 25px var(--c,#d4af37); }
.feature-card__icon-wrap svg { width:2.5rem; height:2.5rem; }

.feature-card h3 { font-family:var(--font-head); font-size:1.3rem; font-weight:700; color:var(--white); margin-bottom:.75rem; transition:color .3s; }
.feature-card:hover h3 { color:var(--gold); }
.feature-card p  { color:var(--gray); line-height:1.7; font-size:.9rem; }

.feature-card__bar {
  height:3px; border-radius:var(--radius-pill); margin-top:1.25rem;
  background:rgba(255,255,255,.06); overflow:hidden; position:relative;
}
.feature-card__bar::after {
  content:''; position:absolute; inset-block:0; left:-100%; width:100%;
  background:var(--c,#d4af37); transition:left .5s ease;
}
.feature-card:hover .feature-card__bar::after { left:0; }

.features__stats { display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; }
.feature-stat {
  padding:2rem 1.5rem; border-radius:var(--radius-lg); text-align:center;
  cursor:default; transition:transform .3s;
}
.feature-stat:hover { transform:translateY(-5px) scale(1.04); }
.feature-stat__val { font-family:var(--font-head); font-size:2.5rem; font-weight:900; margin-bottom:.5rem; }
.feature-stat__lbl { color:var(--gray); font-size:.85rem; }

@media (max-width:900px) { .features__grid { grid-template-columns:repeat(2,1fr); } .features__stats { grid-template-columns:repeat(2,1fr); } }
@media (max-width:580px) { .features__grid { grid-template-columns:1fr; } .features__stats { grid-template-columns:repeat(2,1fr); } }

/* ─── 17. SCENE TABS ────────────────────────────────────── */
.scene-tabs { 
  position:relative; padding:6rem 1.5rem; overflow:hidden; 
  background:
    linear-gradient(135deg, rgba(10,15,30,.90), rgba(15,23,41,.86)),
    url('https://images.unsplash.com/photo-1748286008847-3f3f8e5ab8d1?w=1600&q=80');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
.scene-tabs__container { max-width:1280px; margin:0 auto; position:relative; z-index:1; }
.scene-tabs__nav {
  display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem; margin-bottom:2.5rem;
  padding:.5rem; background:rgba(0,21,46,.8); backdrop-filter:blur(24px);
  border:1px solid rgba(42,191,176,.2); border-radius:var(--radius-pill);
  width:fit-content; margin-left:auto; margin-right:auto;
  box-shadow:0 0 40px rgba(42,191,176,.12);
}
.scene-tab {
  padding:.75rem 2rem; border-radius:var(--radius-pill); border:none;
  background:transparent; color:var(--gray); font-family:var(--font-head);
  font-weight:700; font-size:.75rem; letter-spacing:.15em; text-transform:uppercase;
  cursor:pointer; position:relative; transition:color .3s;
}
.scene-tab.active { color:var(--white); }
.scene-tab.active::before {
  content:''; position:absolute; inset:0; border-radius:var(--radius-pill);
  border:1px solid var(--tab-color, var(--teal-vivid));
  background:linear-gradient(135deg,rgba(42,191,176,.2),rgba(42,191,176,.35));
  box-shadow:0 0 20px rgba(42,191,176,.3),inset 0 0 8px rgba(42,191,176,.15);
}
.scene-tab:not(.active):hover { color:rgba(255,255,255,.7); }

.scene-tabs__display {
  --scene-accent: var(--teal-vivid);
  position:relative; border-radius:var(--radius-xl); overflow:hidden;
  height:320px; border:4px solid rgba(255,255,255,.08);
  box-shadow:0 30px 80px rgba(0,0,0,.5);
  background:rgba(4,10,20,.35);
}
.scene-tabs__display::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(5,10,20,.10) 0%, rgba(5,10,20,.04) 34%, rgba(5,10,20,.24) 70%, rgba(5,10,20,.62) 100%),
    radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--scene-accent) 22%, transparent) 0%, transparent 36%);
}
@media (min-width:768px) { .scene-tabs__display { height:500px; } }

.scene-panel {
  position:absolute; inset:0; background-size:cover; background-position:center;
  opacity:0; transform:scale(1.03); transition:opacity .6s ease, transform .75s ease;
}
.scene-panel__video {
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  pointer-events:none;
}
.scene-panel__image {
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  display:block;
  pointer-events:none;
  transform:scale(1.01);
  filter:saturate(1.02) contrast(1.03);
}
.scene-panel.active { opacity:1; transform:scale(1); }

/* Curtain overlay + switch (scene tabs) */
.curtain-overlay{
  position:absolute; inset:0;
  pointer-events:none;
  z-index:2;
}
.curtain-overlay__panel{
  position:absolute; top:0; bottom:0; width:56%;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0px, rgba(255,255,255,.02) 22px, rgba(0,0,0,.18) 44px),
    linear-gradient(180deg, rgba(0,13,29,.78), rgba(0,0,0,.88));
  box-shadow: inset 0 0 50px rgba(0,0,0,.55);
  transition: transform .9s cubic-bezier(.25,.46,.45,.94);
}
.curtain-overlay__panel--left{ left:0; transform: translateX(0); }
.curtain-overlay__panel--right{ right:0; transform: translateX(0); }
.curtain-overlay__seam{
  position:absolute; top:0; bottom:0; left:50%;
  width:7px; transform: translateX(-50%);
  background: linear-gradient(180deg, transparent 0%, rgba(255,255,255,.14) 15%, rgba(0,0,0,.55) 50%, rgba(255,255,255,.10) 85%, transparent 100%);
  opacity:1;
  transition: opacity .25s ease;
}
.scene-tabs__display.curtains-on .curtain-overlay__panel--left{ transform: translateX(-105%); }
.scene-tabs__display.curtains-on .curtain-overlay__panel--right{ transform: translateX(105%); }
.scene-tabs__display.curtains-on .curtain-overlay__seam{ opacity:0; }

.scene-switch{
  position:absolute; top:1.25rem; right:1.25rem; z-index:8;
  display:flex; align-items:center; gap:.75rem;
  padding:.55rem .85rem;
  border-radius:var(--radius-pill);
  background:rgba(0,13,29,.65);
  border:1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(16px);
  cursor:pointer;
}
.scene-switch__label{
  font-family:var(--font-head); font-weight:700; font-size:.7rem;
  letter-spacing:.18em; text-transform:uppercase;
  color: rgba(255,255,255,.82);
  transition: color .3s;
}
.scene-switch__state{
  margin-left:.45rem;
  font-size:.65rem;
  letter-spacing:.22em;
  opacity:.85;
}
.scene-switch__track{
  position:relative; width:3.6rem; height:1.9rem;
  border-radius:var(--radius-pill);
  background:rgba(255,255,255,.06);
  border:1px solid rgba(42,191,176,.35);
  transition: background .3s, border-color .3s, box-shadow .3s;
  overflow:hidden;
}
.scene-switch__knob{
  position:absolute; top:.15rem; left:.15rem;
  width:1.55rem; height:1.55rem; border-radius:50%;
  background:rgba(255,255,255,.65);
  box-shadow:0 2px 10px rgba(0,0,0,.35);
  transition: transform .35s cubic-bezier(.68,-0.55,.27,1.55), background .3s;
}
.scene-switch:hover .scene-switch__label{ color: var(--teal-vivid); }
.scene-tabs__display.curtains-on .scene-switch__label{ color: var(--gold); }
.scene-tabs__display.curtains-on .scene-switch__track{
  border-color: rgba(212,175,55,.65);
  background: rgba(212,175,55,.12);
  box-shadow: 0 0 18px rgba(212,175,55,.22);
}
.scene-tabs__display.curtains-on .scene-switch__knob{
  transform: translateX(1.65rem);
  background: var(--gold);
}
.scene-tabs__overlay-bar {
  z-index:7;
  position:absolute; bottom:2rem; left:50%; transform:translateX(-50%);
  display:grid;
  gap:.32rem;
  width:min(32rem, calc(100% - 2rem));
  padding:.95rem 1.35rem 1rem;
  border-radius:1.35rem;
  color:var(--white);
  background:rgba(0,13,29,.82);
  border:1px solid color-mix(in srgb, var(--scene-accent) 34%, rgba(255,255,255,.1));
  backdrop-filter:blur(16px);
  box-shadow:
    0 22px 45px rgba(0,0,0,.3),
    0 0 26px color-mix(in srgb, var(--scene-accent) 18%, transparent);
}
.scene-tabs__overlay-title{
  font-family:var(--font-head);
  font-size:1rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.scene-tabs__overlay-detail{
  color:rgba(255,255,255,.78);
  font-size:.9rem;
  line-height:1.55;
}
@media (max-width:640px) {
  .scene-tabs__overlay-bar {
    width:calc(100% - 1.2rem);
    bottom:1rem;
    padding:.8rem .95rem .9rem;
    gap:.25rem;
    text-align:center;
  }
  .scene-tabs__overlay-title { font-size:.84rem; letter-spacing:.12em; }
  .scene-tabs__overlay-detail { font-size:.8rem; line-height:1.45; }
}

/* ─── 18. TESTIMONIALS ──────────────────────────────────── */
.testimonials { 
  position:relative; padding:4.5rem 1.5rem; overflow:hidden; 
  background:
    linear-gradient(135deg, rgba(10,15,30,.89), rgba(15,23,41,.85)),
    url('https://images.unsplash.com/photo-1707787701636-f37898982424?w=1600&q=80');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
.testimonials__container { max-width:1280px; margin:0 auto; position:relative; z-index:1; }
.testimonials__inner {
  position:relative; border-radius:var(--radius-xl); overflow:hidden;
  display:grid; grid-template-columns:1fr 1fr; border:1px solid rgba(255,255,255,.08);
}
.testimonials__inner--single { grid-template-columns: 1fr; }
.testimonials__scan-line {
  position:absolute; top:0; left:0; width:100%; height:2px;
  background:linear-gradient(to right,transparent,var(--teal-vivid),transparent);
  animation:scan-h 4s linear infinite; animation-delay:2s;
}
.testimonials__why, .testimonials__reviews { padding:2.5rem; }
.testimonials__why { background:rgba(0,13,29,.5); border-right:1px solid rgba(42,191,176,.08); }
.testimonials__inner--single .testimonials__why { border-right: none; }
.testimonials__reviews { background:rgba(0,13,29,.3); }
.testimonials__reviews > .section-badge { display:flex; width:fit-content; margin:0 auto 1rem; }
.testimonials__why-title { font-family:var(--font-head); font-size:clamp(1.55rem,3.1vw,2.3rem); font-weight:900; color:var(--white); line-height:1.2; margin-bottom:1.5rem; }
.testimonials__reviews-title { font-family:var(--font-head); font-size:1.6rem; font-weight:900; color:var(--white); margin-bottom:1.5rem; text-align:center; }

.why-list { display:flex; flex-direction:column; gap:1rem; }
.why-item {
  display:flex; gap:1rem; padding:1.25rem; border-radius:var(--radius-lg);
  border:1px solid rgba(255,255,255,.04) !important;
  transition:border-color .3s;
}
.why-item:hover { border-color:rgba(42,191,176,.3) !important; }
.why-item__icon {
  flex-shrink:0; width:3.5rem; height:3.5rem; border-radius:.75rem;
  background:linear-gradient(135deg,rgba(42,191,176,.2),rgba(0,217,255,.1));
  display:flex; align-items:center; justify-content:center;
}
.why-item__icon svg { width:1.25rem; height:1.25rem; }
.why-item h4 { font-family:var(--font-head); font-weight:700; font-size:.95rem; color:var(--white); margin-bottom:.3rem; }
.why-item p  { color:var(--gray); font-size:.82rem; line-height:1.6; }

.review-card {
  position:relative; padding:1.15rem; border-radius:var(--radius-lg);
  margin-bottom:1rem; overflow:hidden;
  transition:border-color .3s; border:1px solid rgba(255,255,255,.05) !important;
}
.review-card:hover { border-color:rgba(42,191,176,.3) !important; }
.review-card__quote {
  position:absolute; top:.6rem; right:.9rem; font-size:3.2rem; color:rgba(42,191,176,.08); font-family:var(--font-head); line-height:1;
}
.stars { color:var(--teal-vivid); font-size:.9rem; letter-spacing:.1rem; margin-bottom:.6rem; }
.review-card p { color:var(--gray); font-size:.82rem; line-height:1.7; margin-bottom:.85rem; }
.review-card__author { display:flex; align-items:center; gap:.75rem; }
.review-card__avatar {
  width:2.2rem; height:2.2rem; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg,var(--teal-vivid),var(--cyan));
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-head); font-weight:700; color:var(--navy-deep);
}
.review-card__name  { font-family:var(--font-head); font-size:.85rem; font-weight:700; color:var(--white); }
.review-card__badge { font-size:.75rem; color:var(--teal-vivid); }

@media (max-width:900px) { .testimonials__inner { grid-template-columns:1fr; } .testimonials__why { border-right:none; border-bottom:1px solid rgba(42,191,176,.08); } }

/* ─── 19. BLOG ──────────────────────────────────────────── */
.blog { 
  position:relative; padding:6rem 1.5rem; overflow:hidden; 
  background:
    linear-gradient(135deg, rgba(10,15,30,.89), rgba(15,23,41,.85)),
    url('https://images.unsplash.com/photo-1633356122544-f134324ef6db?w=1600&q=80');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
.blog__container { max-width:1280px; margin:0 auto; position:relative; z-index:1; }
.blog__header { display:flex; flex-direction:column; align-items:center; margin-bottom:3rem; gap:1.5rem; text-align:center; }
.blog__header .section-badge { display:flex; width:fit-content; margin:0 auto 1rem; }
.blog__view-all {
  padding:.75rem 1.5rem; border-radius:var(--radius-pill); cursor:pointer;
  font-family:var(--font-head); font-weight:700; font-size:.8rem;
  color:var(--white); white-space:nowrap; transition:all .3s;
  border-color:rgba(255,255,255,.1) !important;
}
.blog__view-all:hover { border-color:rgba(42,191,176,.5) !important; color:var(--teal-vivid); }
.blog__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; }

.blog-card {
  border-radius:var(--radius); overflow:hidden; cursor:pointer;
  transition:transform .4s, box-shadow .4s; border:1px solid rgba(255,255,255,.06) !important;
}
.blog-card:hover { transform:translateY(-8px); box-shadow:0 20px 50px rgba(42,191,176,.2); border-color:rgba(42,191,176,.4) !important; }
.blog-card__img { position:relative; height:240px; overflow:hidden; }
.blog-card__img img { width:100%; height:100%; object-fit:cover; transition:transform .6s; }
.blog-card:hover .blog-card__img img { transform:scale(1.08); }
.blog-card__scan-line {
  position:absolute; inset:0;
  background:linear-gradient(to bottom,transparent,rgba(42,191,176,.25),transparent);
  animation:scan-v 1.5s linear infinite; opacity:0; transition:opacity .3s;
}
.blog-card:hover .blog-card__scan-line { opacity:1; }
.blog-card__cat {
  position:absolute; top:1rem; left:1rem; z-index:2;
  background:var(--teal-vivid); color:var(--navy-deep);
  font-family:var(--font-head); font-weight:700; font-size:.7rem;
  letter-spacing:.12em; text-transform:uppercase; padding:.4rem .9rem; border-radius:var(--radius-pill);
}
.blog-card__overlay { position:absolute; inset:0; background:linear-gradient(to top,var(--navy-deep),transparent 60%); }
.blog-card__body { padding:1.5rem; }
.blog-card__meta { display:flex; align-items:center; gap:.5rem; color:var(--gray); font-size:.75rem; margin-bottom:.75rem; }
.dot-sep { width:.3rem; height:.3rem; background:var(--teal-vivid); border-radius:50%; }
.blog-card h3 { font-family:var(--font-head); font-size:1.15rem; font-weight:700; color:var(--white); margin-bottom:.75rem; line-height:1.35; transition:color .3s; }
.blog-card:hover h3 { color:var(--teal-vivid); }
.blog-card p {
  color:var(--gray);
  font-size:.85rem;
  line-height:1.65;
  margin-bottom:1rem;
  max-height:calc(1.65em * 3);
  overflow:hidden;
}
.blog-card__read { font-family:var(--font-head); font-size:.8rem; font-weight:700; text-decoration:none; letter-spacing:.1em; transition:gap .3s; }

@media (max-width:900px) { .blog__grid { grid-template-columns:1fr 1fr; } }
@media (max-width:580px) { .blog__grid { grid-template-columns:1fr; } }

/* ─── 20. FOOTER ────────────────────────────────────────── */
.footer { 
  position:relative; overflow:hidden; padding:5rem 1.5rem 0;
  background: linear-gradient(to bottom, rgba(10,15,30,.25), rgba(10,15,30,.75) 50%, rgba(10,15,30,.88));
  isolation:isolate;
}
.footer::before{
  content:'';
  position:absolute; inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.035;
  background-image:
    linear-gradient(rgba(212,175,55,.55) 1px, transparent 1px),
    linear-gradient(90deg, rgba(94,179,183,.45) 1px, transparent 1px);
  background-size: 90px 90px;
  animation: footer-grid 22s linear infinite;
}
@keyframes footer-grid {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 90px 90px, -90px -90px; }
}
@keyframes footer-border-shift {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 0 0, 300% 0; }
}

.footer__ambient { position:absolute; border-radius:50%; pointer-events:none; filter:blur(150px); z-index:0; }
.footer__ambient--gold { top:0; left:25%; width:400px; height:400px; background:rgba(212,175,55,.08); animation: float-up 12s ease-in-out infinite; }
.footer__ambient--teal { bottom:0; right:25%; width:400px; height:400px; background:rgba(94,179,183,.08); animation: float-dn 14s ease-in-out infinite; }
.footer__container { max-width:1280px; margin:0 auto; position:relative; z-index:1; }
.footer__newsletter {
  padding:2.5rem; border-radius:var(--radius-xl); margin-bottom:4rem;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:2rem;
  border:1px solid transparent;
  background:
    linear-gradient(rgba(15,23,41,.86), rgba(15,23,41,.86)) padding-box,
    linear-gradient(90deg, rgba(212,175,55,.35), rgba(42,191,176,.35), rgba(0,217,255,.35), rgba(212,175,55,.35)) border-box;
  background-size:100% 100%, 300% 100%;
  animation: footer-border-shift 10s linear infinite;
  transition: transform .35s ease, box-shadow .35s ease, filter .35s ease;
}
.footer__newsletter:hover { transform: translateY(-6px); box-shadow: 0 26px 80px rgba(0,0,0,.35); filter: saturate(1.05); }
.footer__newsletter { position:relative; overflow:hidden; }
.footer__newsletter::before{
  content:'';
  position:absolute; left:-30%; top:0; width:160%; height:3px;
  background: linear-gradient(to right, transparent, var(--gold), var(--teal), transparent);
  background-size: 200% 100%;
  animation: shimmer-move 6s linear infinite;
  opacity:.95;
}
.footer__newsletter::after{
  content:'';
  position:absolute; inset:0;
  background:
    radial-gradient(700px 320px at 18% 0%, rgba(212,175,55,.16) 0%, transparent 60%),
    radial-gradient(700px 320px at 82% 100%, rgba(42,191,176,.14) 0%, transparent 60%);
  opacity:.75;
  pointer-events:none;
}
.footer__newsletter > * { position:relative; z-index:1; }
.footer__newsletter h3 { font-family:var(--font-head); font-size:1.75rem; font-weight:900; margin-bottom:.4rem; }
.footer__newsletter p { color:var(--gray); font-size:.9rem; }
.footer__form { display:flex; gap:.75rem; flex-wrap:wrap; }
.footer__input {
  flex:1; min-width:220px; padding:.9rem 1.5rem;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
  border-radius:var(--radius-pill); color:var(--white); font-family:var(--font-body);
  font-size:.9rem; outline:none; transition:border-color .3s;
}
.footer__input:focus { border-color:var(--gold); box-shadow:0 0 0 3px rgba(212,175,55,.15); }
.footer__subscribe { white-space:nowrap; }
.footer__newsletter--contact{
  display:block;
  padding:0;
}
.footer__contact-layout{
  display:grid;
  grid-template-columns:minmax(300px, .92fr) minmax(0, 1.25fr);
  gap:0;
  align-items:stretch;
}
.footer__contact-side{
  position:relative;
  display:grid;
  align-content:start;
  gap:1.15rem;
  padding:2.5rem;
  border-right:1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(180deg, rgba(8,16,29,.78), rgba(8,16,29,.56)),
    radial-gradient(600px 280px at 20% 0%, rgba(42,191,176,.12) 0%, transparent 68%);
}
.footer__contact-side::before{
  content:'';
  position:absolute;
  inset:1.2rem 1.2rem auto;
  height:1px;
  background:linear-gradient(to right, rgba(42,191,176,.45), rgba(212,175,55,.08), transparent);
  pointer-events:none;
}
.footer__contact-side .section-badge--portfolio{
  width:fit-content;
  padding:0;
  font-size:.8rem;
  letter-spacing:.22em;
  background:none;
  border:none;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.footer__contact-side .section-badge--portfolio::before,
.footer__contact-side .section-badge--portfolio::after{
  content:none;
}
.footer__newsletter-copy{
  display:grid;
  gap:.9rem;
}
.footer__newsletter-copy p{
  max-width:34ch;
  line-height:1.8;
}
.footer__contact-points{
  display:grid;
  gap:.95rem;
  margin-top:.25rem;
}
.footer__contact-card{
  display:grid;
  grid-template-columns:3.15rem minmax(0, 1fr);
  gap:1rem;
  align-items:start;
  padding:1rem 1.1rem;
  border-radius:1.35rem;
  text-decoration:none;
  color:var(--white);
  border:1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.footer__contact-card:hover{
  transform:translateY(-4px);
  border-color:rgba(42,191,176,.34);
  box-shadow:0 18px 40px rgba(0,0,0,.2), 0 0 26px rgba(42,191,176,.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
}
.footer__contact-card--location{
  align-items:center;
}
.footer__contact-card-icon{
  width:3.15rem;
  height:3.15rem;
  display:grid;
  place-items:center;
  border-radius:1rem;
  color:var(--gold);
  background:
    linear-gradient(135deg, rgba(212,175,55,.16), rgba(42,191,176,.12));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.footer__contact-card-icon svg{
  width:1.25rem;
  height:1.25rem;
}
.footer__contact-card-copy{
  display:grid;
  gap:.28rem;
  min-width:0;
}
.footer__contact-card-label{
  color:rgba(248,249,250,.58);
  font-family:var(--font-head);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.footer__contact-card-value{
  color:var(--white);
  font-family:var(--font-head);
  font-size:1rem;
  font-weight:700;
  line-height:1.6;
  word-break:break-word;
}
.footer__contact-form{
  position:relative;
  display:grid;
  gap:1rem;
  padding:2.5rem;
}
.footer__form-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:1rem;
}
.footer__field{
  display:grid;
  gap:.45rem;
}
.footer__field--full{
  grid-column:1 / -1;
}
.footer__field-label{
  color:rgba(248,249,250,.76);
  font-family:var(--font-head);
  font-size:.73rem;
  font-weight:700;
  letter-spacing:.17em;
  text-transform:uppercase;
}
.footer__textarea{
  min-height:9.5rem;
  padding:1rem 1.15rem;
  resize:vertical;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  border-radius:1.35rem;
  color:var(--white);
  font-family:var(--font-body);
  font-size:.95rem;
  line-height:1.65;
  outline:none;
  transition:border-color .3s, box-shadow .3s;
}
.footer__textarea:focus{
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(212,175,55,.15);
}
.footer__honeypot{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}
.footer__captcha-wrap{
  display:grid;
  gap:.65rem;
}
.footer__captcha-box{
  width:max-content;
  max-width:100%;
  padding:.7rem;
  border-radius:1.35rem;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.footer__captcha-widget{
  width:304px;
  max-width:100%;
}
.footer__captcha-note{
  max-width:44rem;
  color:rgba(255,255,255,.56) !important;
  font-size:.78rem !important;
  line-height:1.7;
}
.footer__form-actions{
  display:flex;
  align-items:center;
  gap:1rem;
  flex-wrap:wrap;
}
.footer__submit{
  justify-content:center;
}
.footer__form-status{
  min-height:1.35rem;
  color:var(--gray);
  font-size:.85rem;
}
.footer__form-status[data-tone="error"]{
  color:#fda4af;
}
.footer__form-status[data-tone="success"]{
  color:var(--teal-vivid);
}

.footer__links {
  display:grid; grid-template-columns:2fr 1fr 1fr; gap:3rem; margin-bottom:3.4rem;
  align-items: start;
}
.footer__brand { display:flex; flex-direction:column; }
.footer__brand-top { display:flex; align-items:center; justify-content:flex-start; gap:.75rem; margin-bottom:1rem; flex-wrap:wrap; }
.footer__logo { display:inline-flex; width:fit-content; text-decoration:none; margin:0; }
.footer__logo-img{
  width: clamp(130px, 16vw, 200px);
  height: auto;
  filter: drop-shadow(0 16px 32px rgba(0,0,0,.55));
  transition: transform .35s ease, filter .35s ease;
  transform-origin: left center;
}
.footer__logo:hover .footer__logo-img{
  transform: translateY(-2px) scale(1.02);
  filter: drop-shadow(0 22px 44px rgba(0,0,0,.62));
}
.footer__brand-name { font-family:var(--font-head); font-size:1.75rem; font-weight:900; line-height:1.2; margin:0; }
.footer__brand p { color:var(--gray); line-height:1.7; margin-bottom:1.5rem; }
.footer__social { display:flex; gap:.75rem; }
.social-btn {
  width:3rem; height:3rem; border-radius:50%; display:flex; align-items:center; justify-content:center;
  text-decoration:none; cursor:pointer; transition:all .3s;
  border-color:rgba(255,255,255,.08) !important;
}
.social-btn__img {
  width:1.9rem; height:1.9rem; display:block; object-fit:contain;
  filter: brightness(1.04) contrast(1.08) saturate(1.06);
  transition: transform .3s, filter .3s;
}
.social-btn:hover { border-color:rgba(212,175,55,.5) !important; transform:scale(1.15); }
.social-btn:hover .social-btn__img { transform:scale(1.08); filter: brightness(1.14) contrast(1.1) saturate(1.1); }
.footer__col h4 { 
  position:relative;
  font-family:var(--font-head); font-weight:700; font-size:.95rem; letter-spacing:.12em;
  text-transform:uppercase; margin-bottom:1.5rem;
}
.footer__col h4::after{
  content:'';
  position:absolute; left:0; bottom:-0.6rem;
  width:2.25rem; height:2px;
  background: linear-gradient(to right, var(--gold), var(--teal));
  border-radius: var(--radius-pill);
  opacity:.55;
  transform-origin:left;
  transform: scaleX(.55);
  transition: transform .3s, opacity .3s;
}
.footer__col:hover h4::after{ transform: scaleX(1); opacity:1; }
.footer__col ul { list-style:none; display:flex; flex-direction:column; gap:.75rem; }
.footer__col a { color:var(--gray); text-decoration:none; font-size:.9rem; transition:color .3s, padding-left .3s; display:flex; align-items:center; gap:.4rem; }
.footer__col a::before { content:''; display:inline-block; width:0; height:2px; background:var(--gold); transition:width .3s; }
.footer__col a:hover { color:var(--gold); padding-left:.25rem; }
.footer__col a:hover::before { width:1rem; }

.footer__bottom {
  padding:2rem 0; border-top:1px solid rgba(255,255,255,.07);
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:1rem;
}
.footer__bottom p { color:var(--gray); font-size:.85rem; }
.footer__bottom-links { display:flex; gap:1.5rem; }
.footer__bottom-links a { color:var(--gray); text-decoration:none; font-size:.85rem; transition:color .3s; }
.footer__bottom-links a:hover { color:var(--gold); }
.footer__gradient-bar {
  height:3px; margin-top:1rem;
  background:linear-gradient(to right,transparent,var(--gold) 30%,var(--teal) 70%,transparent);
  animation:shimmer-move 4s linear infinite; background-size:200% 100%;
}

@media (max-width:1024px) {
  .footer__links { grid-template-columns:1fr 1fr; }
  .footer__brand { grid-column:1/-1; }
  .footer__form-grid { grid-template-columns:1fr; }
  .footer__contact-layout{ grid-template-columns:1fr; }
  .footer__contact-side{
    border-right:none;
    border-bottom:1px solid rgba(255,255,255,.08);
  }
}
@media (max-width:768px)  {
  .footer__links { grid-template-columns:1fr 1fr; }
  .footer__newsletter { padding:1.4rem; }
  .footer__newsletter--contact { padding:0; }
  .footer__contact-side,
  .footer__contact-form{
    padding:1.4rem;
  }
  .footer__captcha-box{
    width:100%;
    overflow-x:auto;
  }
}
@media (max-width:480px)  { .footer__links { grid-template-columns:1fr; } }

@media (prefers-reduced-motion: reduce) {
  .footer::before,
  .footer__ambient--gold,
  .footer__ambient--teal,
  .footer__newsletter,
  .footer__newsletter::before,
  .footer__gradient-bar {
    animation: none !important;
  }
}

/* ─── 21. SCROLL TO TOP ─────────────────────────────────── */
.scroll-top {
  position:fixed; bottom:2rem; right:12rem; z-index:900;
  width:3rem; height:3rem; border-radius:50%; border:none; cursor:pointer;
  color:var(--white); font-size:1.2rem; line-height:1;
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transform:translateY(1.5rem);
  transition:opacity .3s, transform .3s, box-shadow .3s;
  border-color:rgba(42,191,176,.3) !important;
}
.scroll-top.visible { opacity:1; pointer-events:all; transform:translateY(0); }
.scroll-top:hover { box-shadow:0 0 40px rgba(42,191,176,.5); transform:translateY(-3px); }
@media (max-width:900px) {
  .scroll-top {
    right: 1.25rem;
    bottom: 1.25rem;
  }
}
@media (max-width:640px) {
  .scroll-top {
    right: .85rem;
    bottom: .85rem;
  }
}

/* ─── 22. NAVBAR RESPONSIVE ────────────────────────────── */
@media (max-width:1024px) { .navbar__links, .navbar__social, .navbar__cta { display:none; } .navbar__hamburger { display:flex; } }

/* ─── 23. SOLUTIONS PAGE ─────────────────────────────── */
.solutions-page {
  position: relative;
  padding-top: 9rem;
  overflow: hidden;
  background:
    radial-gradient(circle at top left, rgba(212,175,55,.14), transparent 30%),
    radial-gradient(circle at bottom right, rgba(42,191,176,.14), transparent 34%),
    linear-gradient(180deg, #06101c 0%, #0a1422 45%, #08101a 100%);
}
.solutions-page__hero {
  position: relative;
  padding: 2.25rem 1.5rem 4.5rem;
  overflow: hidden;
}
.solutions-page__hero-grid {
  position: absolute;
  inset: 0;
  opacity: .05;
  background-image:
    linear-gradient(rgba(212,175,55,.7) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212,175,55,.7) 1px, transparent 1px);
  background-size: 74px 74px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.9), transparent 92%);
  animation: solutions-grid-drift 18s linear infinite;
}
.solutions-page__hero-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
  pointer-events: none;
}
.solutions-page__hero-glow--gold {
  top: -6rem;
  left: -5rem;
  width: 25rem;
  height: 25rem;
  background: rgba(212,175,55,.18);
  animation: float-up 16s ease-in-out infinite;
}
.solutions-page__hero-glow--teal {
  right: -6rem;
  bottom: -2rem;
  width: 26rem;
  height: 26rem;
  background: rgba(42,191,176,.16);
  animation: float-dn 18s ease-in-out infinite;
}
.solutions-page__container {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(360px, .98fr);
  gap: 2.25rem;
  align-items: center;
}
.solutions-page__copy {
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
  max-width: 43rem;
}
.solutions-page__title {
  font-family: var(--font-head);
  font-size: clamp(3.3rem, 6.3vw, 5.8rem);
  line-height: .98;
  font-weight: 900;
  color: var(--white);
  margin: 0;
  max-width: 11ch;
  text-shadow: 0 18px 60px rgba(0,0,0,.35);
}
.solutions-page__subtitle {
  max-width: 39rem;
  font-size: 1.05rem;
  line-height: 1.9;
  color: rgba(248,249,250,.74);
  margin: 0;
}
.solutions-page__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: .3rem;
}
.solutions-page__mini-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: .75rem;
}
.solutions-page__mini-card {
  min-height: 7.25rem;
  padding: 1.1rem 1.15rem;
  border-radius: 1.2rem;
  border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(26,39,69,.62), rgba(15,23,41,.42));
}
.solutions-page__mini-card strong {
  display: block;
  margin-bottom: .55rem;
  color: var(--white);
  font-family: var(--font-head);
  font-size: .98rem;
  font-weight: 700;
}
.solutions-page__mini-card span {
  display: block;
  color: rgba(248,249,250,.72);
  font-size: .92rem;
  line-height: 1.6;
}
.solutions-page__hero-visual {
  position: relative;
  min-height: 38rem;
  border-radius: 2rem;
  border: 1px solid rgba(212,175,55,.16);
  box-shadow: 0 30px 80px rgba(0,0,0,.34);
  overflow: hidden;
}
.solutions-page__hero-visual::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(4,11,20,.1), rgba(4,11,20,.55)),
    linear-gradient(0deg, rgba(8,13,24,.72), rgba(8,13,24,.12) 45%, transparent 75%);
  pointer-events: none;
  z-index: 1;
}
.solutions-page__hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.solutions-page__hero-overlay {
  position: absolute;
  left: 1.5rem;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 2;
  padding: 1.5rem;
  border-radius: 1.5rem;
  background: linear-gradient(180deg, rgba(8,13,24,.44), rgba(8,13,24,.88));
  border: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(16px);
}
.solutions-page__hero-kicker {
  display: inline-flex;
  margin-bottom: .85rem;
  color: var(--gold);
  font-family: var(--font-head);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.solutions-page__hero-overlay h2 {
  margin: 0 0 .85rem;
  color: var(--white);
  font-family: var(--font-head);
  font-size: clamp(1.5rem, 2.8vw, 2.35rem);
  line-height: 1.12;
}
.solutions-page__hero-points {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .7rem;
}
.solutions-page__hero-points li {
  position: relative;
  padding-left: 1.35rem;
  color: rgba(248,249,250,.82);
  font-size: .96rem;
  line-height: 1.7;
}
.solutions-page__hero-points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .62rem;
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--teal-vivid));
  box-shadow: 0 0 16px rgba(212,175,55,.35);
}

.solutions-catalog {
  position: relative;
  padding: 0 1.5rem 5rem;
}
.solutions-catalog__container {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
}
.solutions-catalog__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.4rem;
  margin-top: 2.25rem;
}
.solution-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  overflow: hidden;
  border-radius: 1.6rem;
  border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(26,39,69,.58), rgba(12,20,35,.5));
  box-shadow: 0 24px 60px rgba(0,0,0,.22);
  transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.solution-card:hover {
  transform: translateY(-6px);
  border-color: rgba(212,175,55,.3);
  box-shadow: 0 32px 70px rgba(0,0,0,.28);
}
.solution-card__media {
  position: relative;
  height: 16rem;
  overflow: hidden;
}
.solution-card__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8,13,24,.05), rgba(8,13,24,.45));
  pointer-events: none;
}
.solution-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s ease;
}
.solution-card:hover .solution-card__media img { transform: scale(1.05); }
.solution-card__tag {
  position: absolute;
  left: 1rem;
  top: 1rem;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  padding: .5rem .8rem;
  border-radius: 999px;
  background: rgba(8,13,24,.74);
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(248,249,250,.88);
  font-family: var(--font-head);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.solution-card__body {
  position: relative;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .85rem;
  flex: 1;
}
.solution-card__eyebrow {
  display: inline-flex;
  margin: 0;
  color: var(--gold);
  font-family: var(--font-head);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.solution-card__body h3 {
  font-family: var(--font-head);
  font-size: 1.45rem;
  line-height: 1.18;
  color: var(--white);
  margin: 0;
}
.solution-card__body p {
  color: rgba(248,249,250,.74);
  font-size: .96rem;
  line-height: 1.75;
  margin: 0;
}
.solution-card__list,
.solutions-page__hero-points {
  list-style: none;
}
.solution-card__list {
  margin: .15rem 0 0;
  padding: 0;
  display: grid;
  gap: .7rem;
}
.solution-card__list li {
  position: relative;
  padding-left: 1.35rem;
  color: rgba(248,249,250,.8);
  font-size: .93rem;
  line-height: 1.65;
}
.solution-card__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .55rem;
  width: .45rem;
  height: .45rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--teal-vivid));
}

.solutions-process {
  padding: 0 1.5rem 5rem;
}
.solutions-process__container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem;
  border-radius: 1.9rem;
  border: 1px solid rgba(212,175,55,.12);
  box-shadow: 0 26px 70px rgba(0,0,0,.22);
}
.solutions-process__copy {
  max-width: 46rem;
  margin-bottom: 2rem;
}
.solutions-process__steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.2rem;
}
.solutions-step {
  padding: 1.35rem;
  border-radius: 1.3rem;
  border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(26,39,69,.5), rgba(15,23,41,.38));
}
.solutions-step__num {
  display: inline-flex;
  margin-bottom: .9rem;
  color: var(--teal-vivid);
  font-family: var(--font-head);
  font-size: .86rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.solutions-step h3 {
  margin: 0 0 .75rem;
  color: var(--white);
  font-family: var(--font-head);
  font-size: 1.2rem;
  line-height: 1.2;
}
.solutions-step p {
  margin: 0;
  color: rgba(248,249,250,.72);
  font-size: .94rem;
  line-height: 1.7;
}

.solutions-cta {
  padding: 0 1.5rem 5rem;
}
.solutions-cta__container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.5rem;
  align-items: center;
  border-radius: 1.9rem;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 24px 65px rgba(0,0,0,.22);
}
.solutions-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

@keyframes solutions-grid-drift {
  from { transform: translateY(0); }
  to { transform: translateY(68px); }
}

@media (max-width: 1024px) {
  .solutions-page__container,
  .solutions-cta__container {
    grid-template-columns: 1fr;
  }
  .solutions-page__copy { max-width: none; }
  .solutions-page__title { max-width: none; }
  .solutions-catalog__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .solutions-process__steps { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .solutions-page {
    padding-top: 8rem;
  }
  .solutions-page__hero {
    padding-inline: 1rem;
    padding-bottom: 3rem;
  }
  .solutions-catalog,
  .solutions-process,
  .solutions-cta {
    padding-inline: 1rem;
    padding-bottom: 4rem;
  }
  .solutions-page__title {
    font-size: clamp(2.8rem, 12vw, 4.4rem);
  }
  .solutions-page__subtitle,
  .solution-card__body p,
  .solutions-step p {
    font-size: .95rem;
    line-height: 1.8;
  }
  .solutions-page__mini-grid,
  .solutions-catalog__grid {
    grid-template-columns: 1fr;
  }
  .solutions-page__hero-visual {
    min-height: 31rem;
  }
  .solutions-page__hero-overlay,
  .solutions-process__container,
  .solutions-cta__container {
    padding: 1.35rem;
  }
}
@media (max-width: 540px) {
  .solutions-page__actions,
  .solutions-cta__actions {
    flex-direction: column;
  }
  .solutions-page__actions > *,
  .solutions-cta__actions > * {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
  .solution-card__tag,
  .solution-card__eyebrow,
  .solutions-page__hero-kicker,
  .solutions-step__num {
    letter-spacing: .12em;
  }
}
@media (prefers-reduced-motion: reduce) {
  .solutions-page__hero-grid,
  .solutions-page__hero-glow {
    animation: none !important;
  }
}

/* Solutions Page Refresh */
.solutions-page {
  background:
    radial-gradient(circle at 12% 0%, rgba(212,175,55,.12), transparent 28%),
    radial-gradient(circle at 88% 18%, rgba(42,191,176,.12), transparent 32%),
    linear-gradient(180deg, #07111b 0%, #0b1521 42%, #08111a 100%);
}
.solutions-page__hero {
  padding: 2.25rem 1.5rem 3.5rem;
}
.solutions-page__hero-grid {
  opacity: .04;
  background-image:
    linear-gradient(rgba(255,255,255,.4) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.4) 1px, transparent 1px);
  background-size: 88px 88px;
}
.solutions-page__hero-glow {
  filter: blur(120px);
  opacity: .9;
}
.solutions-page__hero-glow--gold {
  width: 28rem;
  height: 28rem;
  background: rgba(212,175,55,.16);
}
.solutions-page__hero-glow--teal {
  width: 28rem;
  height: 28rem;
  background: rgba(42,191,176,.14);
}
.solutions-page__container {
  gap: 3rem;
}
.solutions-page__copy {
  gap: 1.4rem;
  max-width: 44rem;
}
.solutions-page__eyebrow-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .9rem;
}
.solutions-page__eyebrow-note {
  color: rgba(248,249,250,.58);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.solutions-page__title {
  font-size: clamp(3.5rem, 6.6vw, 6.25rem);
  line-height: .94;
  max-width: 9.5ch;
}
.solutions-page__subtitle {
  font-size: 1.04rem;
  line-height: 1.95;
}
.solutions-page__micro-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}
.solutions-page__micro-points li {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .62rem .9rem;
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(248,249,250,.76);
  font-size: .82rem;
  line-height: 1.2;
}
.solutions-page__micro-points li::before {
  content: '';
  width: .42rem;
  height: .42rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--teal-vivid));
  box-shadow: 0 0 14px rgba(212,175,55,.22);
}
.solutions-page__mini-grid {
  margin-top: .15rem;
}
.solutions-page__mini-card {
  position: relative;
  min-height: 7.4rem;
  padding: 1.15rem 1.2rem;
  border-radius: 1.3rem;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.solutions-page__mini-card::before {
  content: '';
  position: absolute;
  left: 1.2rem;
  top: 0;
  width: 3rem;
  height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
}
.solutions-page__hero-visual {
  min-height: 42rem;
  border: 1px solid rgba(255,255,255,.08);
  background: #09111b;
}
.solutions-page__hero-visual::before {
  background:
    linear-gradient(180deg, rgba(4,11,20,.08), rgba(4,11,20,.42)),
    linear-gradient(0deg, rgba(8,13,24,.74), rgba(8,13,24,.08) 42%, transparent 72%);
}
.solutions-page__hero-status {
  position: absolute;
  top: 1.2rem;
  left: 1.2rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  padding: .55rem .8rem;
  border-radius: 999px;
  background: rgba(8,13,24,.72);
  border: 1px solid rgba(255,255,255,.1);
  color: rgba(248,249,250,.9);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  backdrop-filter: blur(14px);
}
.solutions-page__hero-floating {
  position: absolute;
  right: 1.2rem;
  bottom: 10rem;
  z-index: 3;
  width: min(18rem, calc(100% - 2.4rem));
  padding: 1rem 1.05rem;
  border-radius: 1.3rem;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(8,13,24,.78);
  box-shadow: 0 20px 40px rgba(0,0,0,.28);
}
.solutions-page__hero-floating-label {
  display: block;
  margin-bottom: .45rem;
  color: var(--gold);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.solutions-page__hero-floating strong {
  display: block;
  color: var(--white);
  font-family: var(--font-head);
  font-size: 1.08rem;
  line-height: 1.4;
}
.solutions-page__hero-overlay {
  left: 1.2rem;
  right: 1.2rem;
  bottom: 1.2rem;
  padding: 1.35rem;
  background: linear-gradient(180deg, rgba(8,13,24,.38), rgba(8,13,24,.9));
}
.solutions-page__hero-kicker {
  margin-bottom: .7rem;
}
.solutions-page__hero-overlay h2 {
  margin: 0 0 .8rem;
  font-size: clamp(1.55rem, 2.7vw, 2.4rem);
}
.solutions-page__hero-strip {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-top: 1rem;
}
.solutions-page__hero-strip span {
  display: inline-flex;
  align-items: center;
  padding: .45rem .75rem;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(248,249,250,.8);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.solutions-rail {
  padding: 0 1.5rem 4.5rem;
}
.solutions-rail__container {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.solutions-rail__item {
  position: relative;
  padding: 1.35rem 1.4rem 1.45rem;
  border-radius: 1.45rem;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 18px 46px rgba(0,0,0,.18);
}
.solutions-rail__item::before {
  content: '';
  position: absolute;
  left: 1.4rem;
  top: 0;
  width: 3.5rem;
  height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
}
.solutions-rail__item span {
  display: inline-flex;
  margin-bottom: .75rem;
  color: var(--teal-vivid);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.solutions-rail__item h3 {
  margin: 0 0 .55rem;
  color: var(--white);
  font-family: var(--font-head);
  font-size: 1.2rem;
  line-height: 1.2;
}
.solutions-rail__item p {
  margin: 0;
  color: rgba(248,249,250,.72);
  font-size: .94rem;
  line-height: 1.75;
}

.solutions-catalog__intro {
  display: grid;
  grid-template-columns: minmax(180px, auto) minmax(0, 1fr);
  align-items: end;
  gap: 1.5rem;
  margin-bottom: 2rem;
}
.solutions-catalog__intro .section-badge {
  margin-bottom: 0;
  align-self: start;
}
.solutions-catalog__intro .section-title,
.solutions-catalog__intro .section-subtitle,
.solutions-process__copy .section-title,
.solutions-process__copy .section-subtitle,
.solutions-cta__container .section-title,
.solutions-cta__container .section-subtitle {
  text-align: left;
  margin-left: 0;
  margin-right: 0;
}
.solutions-catalog__intro .section-title {
  margin-bottom: .75rem;
  max-width: 14ch;
}
.solutions-catalog__intro .section-subtitle {
  max-width: 52rem;
  color: rgba(248,249,250,.72);
}
.solutions-catalog__grid {
  gap: 1.35rem;
  margin-top: 0;
}
.solution-card {
  border-radius: 1.55rem;
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
  box-shadow: 0 24px 58px rgba(0,0,0,.22);
}
.solution-card[id] {
  scroll-margin-top: 9rem;
}
.solution-card:hover {
  transform: translateY(-8px);
  border-color: rgba(212,175,55,.24);
  box-shadow: 0 32px 76px rgba(0,0,0,.28);
}
.solution-card__media {
  height: 15.5rem;
  background: #09111b;
}
.solution-card__media::after {
  background: linear-gradient(180deg, rgba(8,13,24,.04), rgba(8,13,24,.48));
}
.solution-card__body {
  padding: 1.45rem 1.45rem 1.35rem;
  gap: .9rem;
}
.solution-card__body h3 {
  font-size: 1.38rem;
}
.solution-card__footer {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-top: auto;
  padding-top: .15rem;
}
.solution-card__footer span {
  display: inline-flex;
  align-items: center;
  padding: .45rem .72rem;
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(248,249,250,.76);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.solutions-process__container {
  padding: 2.1rem;
  border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
}
.solutions-process__steps {
  gap: 1rem;
}
.solutions-step {
  position: relative;
  border-radius: 1.4rem;
  background: rgba(255,255,255,.03);
}
.solutions-step::before {
  content: '';
  position: absolute;
  left: 1.35rem;
  top: 0;
  width: 3rem;
  height: 1px;
  background: linear-gradient(90deg, var(--teal-vivid), transparent);
}

.solutions-cta__container {
  padding: 2.15rem;
  background: linear-gradient(135deg, rgba(255,255,255,.045), rgba(255,255,255,.018));
  position: relative;
  overflow: hidden;
}
.solutions-cta__container::before {
  content: '';
  position: absolute;
  inset: -40% 40% 40% -10%;
  background: radial-gradient(circle, rgba(212,175,55,.16) 0%, transparent 65%);
  opacity: .85;
  pointer-events: none;
}
.solutions-cta__container > * {
  position: relative;
  z-index: 1;
}

@media (max-width: 1024px) {
  .solutions-page__container,
  .solutions-cta__container,
  .solutions-rail__container,
  .solutions-process__steps,
  .solutions-catalog__intro {
    grid-template-columns: 1fr;
  }
  .solutions-page__copy {
    max-width: none;
  }
  .solutions-page__title {
    max-width: none;
  }
}
@media (max-width: 768px) {
  .solutions-page {
    padding-top: 8rem;
  }
  .solutions-page__hero {
    padding-inline: 1rem;
    padding-bottom: 3rem;
  }
  .solutions-rail,
  .solutions-catalog,
  .solutions-process,
  .solutions-cta {
    padding-inline: 1rem;
    padding-bottom: 4rem;
  }
  .solutions-page__title {
    font-size: clamp(2.9rem, 12vw, 4.6rem);
  }
  .solutions-page__subtitle,
  .solutions-rail__item p,
  .solution-card__body p,
  .solutions-step p {
    font-size: .95rem;
    line-height: 1.8;
  }
  .solutions-page__mini-grid,
  .solutions-catalog__grid {
    grid-template-columns: 1fr;
  }
  .solutions-page__hero-visual {
    min-height: 34rem;
  }
  .solutions-page__hero-floating {
    top: 4.25rem;
    right: 1rem;
    bottom: auto;
    width: min(15rem, calc(100% - 2rem));
  }
  .solutions-page__hero-overlay,
  .solutions-process__container,
  .solutions-cta__container {
    padding: 1.35rem;
  }
}
@media (max-width: 540px) {
  .solutions-page__actions,
  .solutions-cta__actions {
    flex-direction: column;
  }
  .solutions-page__actions > *,
  .solutions-cta__actions > * {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
  .solutions-page__eyebrow-note {
    letter-spacing: .14em;
  }
  .solution-card__tag,
  .solution-card__eyebrow,
  .solutions-page__hero-kicker,
  .solutions-step__num,
  .solutions-rail__item span,
  .solutions-page__hero-status {
    letter-spacing: .12em;
  }
}
@media (prefers-reduced-motion: reduce) {
  .solution-card__media img {
    transition: none !important;
  }
}

@media (max-width: 900px) {
  .cursor-glow,
  .ambient-glow {
    display: none;
  }

  .navbar {
    padding: 1rem .75rem;
  }
  .navbar.scrolled {
    padding: .8rem .75rem;
  }
  .navbar__pill {
    width: calc(100% - .5rem);
    gap: .85rem;
    padding: .7rem .95rem;
    border-radius: 1.25rem;
  }
  .navbar__logo-img,
  .navbar__logo-img--large {
    height: 58px;
  }
  .navbar__hamburger {
    padding: .45rem .55rem;
  }
  .mobile-menu {
    width: calc(100% - .5rem);
    padding: 1rem;
    border-radius: 1.25rem;
  }
  .mobile-menu__social {
    flex-wrap: wrap;
  }

  .section-header {
    margin-bottom: 2.25rem;
  }
  .section-title {
    font-size: clamp(1.9rem, 8.6vw, 3rem);
  }
  .section-subtitle {
    max-width: 100%;
    font-size: .96rem;
    padding-inline: .15rem;
  }
  .section-badge--portfolio {
    max-width: 100%;
    justify-content: center;
    text-align: center;
    font-size: .74rem;
    letter-spacing: .16em;
    padding: .55rem 1rem;
  }

  .portfolio,
  .about,
  .brands,
  .stats,
  .features,
  .testimonials,
  .blog {
    background-attachment: scroll;
  }

  .portfolio,
  .about,
  .brands,
  .stats,
  .features,
  .testimonials,
  .blog,
  .footer {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .about__content {
    padding: 1.6rem;
  }
  .about__title {
    margin-bottom: 1.35rem;
  }
  .about__text-card {
    padding: 1.1rem;
  }
  .about__cta {
    width: 100%;
    justify-content: center;
  }

  .brands__grid {
    gap: .9rem;
  }
  .brand-item {
    min-height: 88px;
    padding: 1rem;
  }
  .brand-item__logo {
    max-width: 170px;
    max-height: 50px;
  }

  .portfolio {
    padding-top: 8rem;
    padding-bottom: 4rem;
  }
  .navbar + .portfolio {
    padding-top: 8.75rem;
  }
  .portfolio__carousel-wrapper {
    flex-wrap: wrap;
    gap: .75rem;
  }
  .portfolio__track-clip {
    flex: 0 0 100%;
    order: 1;
  }
  .carousel-btn {
    order: 2;
    flex: 1 1 calc(50% - .375rem);
    min-width: 0;
    height: 2.75rem;
  }
  .portfolio__grid-card {
    width: 100%;
    max-width: 420px;
    justify-self: center;
  }
  .portfolio__grid-card--youtube {
    max-width: 100%;
  }
  .portfolio__back-home a {
    width: 100%;
    max-width: 320px;
    justify-content: center;
  }

  .footer__contact-side,
  .footer__contact-form {
    padding: 1.2rem;
  }
  .footer__contact-card {
    grid-template-columns: 2.75rem minmax(0, 1fr);
    gap: .85rem;
    padding: .95rem;
  }
  .footer__contact-card-icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: .85rem;
  }
  .footer__contact-card-value {
    font-size: .94rem;
  }
  .footer__links {
    gap: 1.5rem;
  }
  .footer__brand-top {
    align-items: flex-start;
  }
  .footer__social {
    flex-wrap: wrap;
  }
  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }
  .footer__bottom-links {
    flex-wrap: wrap;
    gap: .75rem 1rem;
  }
  .footer__captcha-box {
    padding: .5rem;
  }
}

@media (max-width: 540px) {
  .navbar__pill {
    width: calc(100% - .25rem);
    padding: .65rem .85rem;
  }
  .navbar__logo-img,
  .navbar__logo-img--large {
    height: 50px;
  }
  .mobile-menu {
    width: calc(100% - .25rem);
    padding: .9rem;
  }

  .section-title {
    font-size: clamp(1.75rem, 9vw, 2.4rem);
  }
  .section-badge--portfolio {
    font-size: .68rem;
    letter-spacing: .12em;
  }

  .hero {
    min-height: 72vh;
    padding: 5.5rem 1rem 2rem;
  }

  .about {
    padding-top: 7.5rem;
  }
  .about__content {
    padding: 1.2rem;
    border-radius: 1.25rem;
  }

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

  .portfolio .section-title {
    font-size: clamp(2rem, 10vw, 2.6rem);
  }
  .portfolio__grid-card {
    max-width: 100%;
  }
  .portfolio__grid-card--youtube {
    aspect-ratio: 16 / 10;
  }

  .solutions-page {
    padding-top: 7rem;
  }
  .solutions-page__hero {
    padding-inline: .85rem;
    padding-bottom: 2.5rem;
  }
  .solutions-page__hero-visual {
    min-height: 28rem;
    border-radius: 1.4rem;
  }
  .solutions-page__hero-status {
    top: .85rem;
    left: .85rem;
    font-size: .62rem;
  }
  .solutions-page__hero-floating {
    display: none;
  }
  .solutions-page__hero-overlay {
    left: .85rem;
    right: .85rem;
    bottom: .85rem;
    padding: 1rem;
    border-radius: 1rem;
  }
  .solutions-page__hero-overlay h2 {
    font-size: 1.25rem;
  }
  .solutions-page__hero-points li {
    font-size: .88rem;
    line-height: 1.55;
  }
  .solutions-page__mini-card,
  .solutions-rail__item,
  .solution-card__body,
  .solutions-process__container,
  .solutions-cta__container {
    padding: 1rem;
  }

  .footer__contact-card {
    grid-template-columns: 1fr;
  }
  .footer__contact-card-icon {
    width: 2.5rem;
    height: 2.5rem;
  }
  .footer__form-actions {
    align-items: stretch;
  }
  .footer__submit {
    width: 100%;
  }
}

/* Layout Polish */
.solutions-page__hero-grid {
  display: none !important;
  background: none !important;
  animation: none !important;
}
.section-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .85rem;
  max-width: min(48rem, 100%);
  margin: 0 auto 3rem;
}
.section-header > .section-title,
.section-header > .section-subtitle {
  margin: 0;
}
.section-title {
  line-height: 1.08;
  text-wrap: balance;
}
.section-subtitle {
  max-width: 58ch;
  line-height: 1.75;
  text-wrap: pretty;
}

.about__container,
.solutions-page__container {
  align-items: start;
  gap: clamp(2rem, 4vw, 3.5rem);
}
.about__content {
  padding: clamp(1.5rem, 3vw, 3rem);
}
.about__label,
.about__why .section-label {
  justify-content: flex-start;
}
.about__title {
  margin: 0 0 1.5rem;
  max-width: 14ch;
  text-align: left;
  text-wrap: balance;
}
.about__text-card,
.why-item,
.solution-card__body,
.solutions-page__mini-card {
  padding: clamp(1rem, 2vw, 1.25rem);
}
.about__text-card p,
.why-item p,
.solution-card__body p,
.solutions-page__subtitle,
.solutions-rail__item p,
.solutions-step p {
  margin: 0;
  line-height: 1.75;
  text-wrap: pretty;
}
.why-item {
  align-items: flex-start;
}
.why-item > div:last-child {
  display: flex;
  flex-direction: column;
  gap: .3rem;
}

.solutions-page__copy {
  gap: 1.15rem;
  max-width: 42rem;
}
.solutions-page__title {
  display: grid;
  gap: .12em;
  max-width: 14.5ch;
  font-size: clamp(2.65rem, 5.1vw, 4.65rem);
  line-height: .96;
  letter-spacing: -.03em;
  text-wrap: balance;
}
.solutions-page__title-line {
  display: block;
}
.solutions-page__subtitle {
  max-width: 58ch;
  font-size: 1rem;
}
.solutions-page__micro-points {
  max-width: 42rem;
}
.solutions-page__mini-grid {
  margin-top: .25rem;
  gap: 1rem;
}
.solutions-page__mini-card {
  min-height: auto;
}
.solutions-page__hero-floating strong,
.solutions-page__hero-overlay h2,
.solution-card__body h3,
.solutions-rail__item h3 {
  text-wrap: balance;
}
.solutions-page__hero-overlay h2 {
  max-width: 13ch;
}
.solutions-page__hero-floating strong {
  line-height: 1.5;
}

@media (max-width: 768px) {
  .section-header {
    margin-bottom: 2.5rem;
  }
  .solutions-page__title {
    font-size: clamp(2.08rem, 7.2vw, 3.35rem);
    max-width: 16ch;
  }
  .solutions-page__subtitle {
    max-width: 100%;
  }
}

@media (max-width: 540px) {
  .section-header {
    gap: .7rem;
    margin-bottom: 2.25rem;
  }
  .about__title {
    max-width: none;
  }
  .solutions-page__title {
    font-size: clamp(1.78rem, 8.1vw, 2.4rem);
    max-width: none;
  }
  .solutions-page__eyebrow-row {
    gap: .55rem;
  }
  .solutions-page__subtitle {
    font-size: .95rem;
  }
}

/* Global Theme Sync */
:root {
  --navy: #f7f1e7;
  --navy-deep: #1b1712;
  --navy-mid: #f1e8db;
  --gold: #c28335;
  --gold-light: #efc07d;
  --amber: #a56722;
  --teal: #54849d;
  --teal-vivid: #54849d;
  --cyan: #7aa7b8;
  --white: #1b1712;
  --gray: #685f54;
  --glass-bg: rgba(255,250,242,.9);
  --glass-border: rgba(27,23,18,.08);
  --glow-gold: rgba(194,131,53,.24);
  --glow-teal: rgba(84,132,157,.18);
}

body {
  color: var(--white);
  background:
    radial-gradient(circle at top left, rgba(194,131,53,.12), transparent 30%),
    radial-gradient(circle at 85% 15%, rgba(84,132,157,.08), transparent 24%),
    linear-gradient(180deg, #f7f1e7 0%, #f1e8db 42%, #f8f2ea 100%);
}

::-webkit-scrollbar-track {
  background: rgba(27,23,18,.1);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, #d89f4f, #54849d);
}

::selection {
  background: rgba(194,131,53,.18);
  color: #1b1712;
}

.glass-panel {
  background: rgba(255,250,242,.92);
  border-color: rgba(27,23,18,.08);
}

.glass-card {
  background: rgba(255,250,242,.78);
  border-color: rgba(27,23,18,.08);
}

.section-bg {
  background: linear-gradient(180deg, #f7f1e7 0%, #f1e8db 50%, #f8f2ea 100%);
}

.btn-gold {
  background: linear-gradient(135deg, #d89f4f, #b67326);
  color: #fffaf2 !important;
  box-shadow: 0 18px 35px rgba(182,115,38,.2);
}

.btn-gold::after {
  background: linear-gradient(135deg, #b67326, #d89f4f);
}

.btn-gold:hover {
  box-shadow: 0 24px 50px rgba(182,115,38,.28);
}

.btn-outline-gold {
  border-color: rgba(27,23,18,.12);
  color: #1b1712;
  background: rgba(255,250,242,.5);
}

.btn-outline-gold:hover {
  background: #1b1712;
  border-color: #1b1712;
  color: #fffaf2;
  box-shadow: none;
}

.btn-teal {
  background: linear-gradient(135deg, #c28335, #54849d);
  color: #fffaf2;
}

.navbar__pill {
  background: rgba(255,250,242,.84);
  border-color: rgba(27,23,18,.08);
  box-shadow: 0 12px 45px rgba(40,25,8,.08);
}

.navbar__pill:hover {
  background: rgba(255,250,242,.92);
  border-color: rgba(27,23,18,.14);
  box-shadow: 0 16px 55px rgba(40,25,8,.12);
}

.navbar__link,
.mobile-menu__link,
.navbar__dropdown-link,
.footer__col a,
.footer__bottom p,
.footer__bottom-links a,
.footer__newsletter p,
.footer__brand p,
.footer__captcha-note,
.portfolio__video-copy,
.hero__stat-label,
.section-subtitle {
  color: var(--gray);
}

.navbar__link,
.mobile-menu__link,
.navbar__dropdown-link,
.footer__brand-name,
.footer__contact-card-value,
.footer__field-label,
.section-title,
.about__title,
.solutions-page__hero-overlay h2,
.solutions-page__hero-status,
.solutions-page__hero-kicker,
.solutions-page__hero-strip span,
.solutions-rail__item h3,
.solution-card__body h3,
.blog-card h3,
.review-card__name,
.why-item h4,
.feature-card h3,
.stat-card__label,
.lighting-panel__title,
.lighting-dimmer__label,
.lighting-control__label {
  color: var(--white);
}

.navbar__link:hover,
.mobile-menu__link:hover,
.navbar__dropdown-link:hover,
.footer__col a:hover,
.footer__bottom-links a:hover {
  color: var(--gold);
}

.navbar__hamburger {
  background: rgba(255,250,242,.78);
  border-color: rgba(27,23,18,.12);
}

.navbar__hamburger span {
  background: #1b1712;
}

.mobile-menu,
.navbar__dropdown {
  background: rgba(255,250,242,.96);
  border-color: rgba(27,23,18,.08);
  box-shadow: 0 16px 45px rgba(40,25,8,.12);
}

.mobile-menu__link {
  background: rgba(27,23,18,.04);
}

.mobile-menu__link:hover {
  background: rgba(194,131,53,.12);
  color: var(--amber);
}

.social-btn,
.social-btn--header {
  background: rgba(255,250,242,.7);
  border-color: rgba(27,23,18,.1) !important;
}

.social-btn:hover {
  border-color: rgba(194,131,53,.35) !important;
}

.solutions-page,
.footer {
  background:
    radial-gradient(circle at top left, rgba(194,131,53,.12), transparent 30%),
    radial-gradient(circle at 85% 15%, rgba(84,132,157,.08), transparent 24%),
    linear-gradient(180deg, #f7f1e7 0%, #f1e8db 42%, #f8f2ea 100%);
}

.solutions-page__hero-visual,
.solutions-page__hero-overlay,
.solutions-page__hero-status,
.solutions-page__hero-strip span,
.solutions-rail__item,
.solution-card__body,
.solutions-process__container,
.solutions-cta__container,
.about__content,
.about__text-card,
.why-item,
.feature-card,
.blog-card,
.review-card,
.testimonials__why,
.testimonials__reviews,
.footer__newsletter,
.footer__contact-side,
.footer__contact-form,
.footer__captcha-box,
.lighting-panel,
.hero__stat-card,
.stat-card {
  background: rgba(255,250,242,.86);
  border-color: rgba(27,23,18,.08) !important;
  box-shadow: 0 18px 45px rgba(40,25,8,.08);
}

.solutions-page__hero-overlay,
.solutions-page__hero-status,
.lighting-panel,
.footer__captcha-box {
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.solutions-page__hero-image,
.portfolio__grid-media,
.hero__bg-video {
  background: #ece1cd;
}

/* Contrast Corrections */
.portfolio .section-title,
.portfolio .section-subtitle,
.brands .section-title,
.brands .section-subtitle,
.stats .section-title,
.stats .section-subtitle,
.works-with .section-title,
.works-with .section-subtitle,
.features .section-title,
.features .section-subtitle,
.scene-tabs .section-title,
.scene-tabs .section-subtitle,
.blog .section-title,
.blog .section-subtitle,
.feature-stat__val {
  color: #fffaf2;
}

.portfolio .section-subtitle,
.brands .section-subtitle,
.stats .section-subtitle,
.works-with .section-subtitle,
.features .section-subtitle,
.scene-tabs .section-subtitle,
.blog .section-subtitle,
.feature-stat__lbl {
  color: rgba(255, 244, 229, 0.82);
}

.carousel-btn {
  background: rgba(255, 250, 242, 0.12);
  border-color: rgba(255, 250, 242, 0.14);
}

.carousel-btn svg {
  color: rgba(255, 244, 229, 0.82);
}

.portfolio__carousel-wrapper {
  padding-inline: 4.5rem;
}

.portfolio__carousel-wrapper .portfolio__track-clip {
  width: 100%;
}

.portfolio__carousel-wrapper .carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 999px;
  background: rgba(7, 17, 30, 0.86);
  border: 1px solid rgba(255, 250, 242, 0.24);
  box-shadow:
    0 20px 44px rgba(0, 0, 0, 0.32),
    inset 0 0 0 1px rgba(42, 191, 176, 0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.portfolio__carousel-wrapper .carousel-btn--prev {
  left: 0;
}

.portfolio__carousel-wrapper .carousel-btn--next {
  right: 0;
}

.portfolio__carousel-wrapper .carousel-btn svg {
  width: 1.35rem;
  height: 1.35rem;
  color: #fffaf2;
}

.portfolio__carousel-wrapper .carousel-btn:hover,
.portfolio__carousel-wrapper .carousel-btn:focus-visible {
  background: rgba(212, 175, 55, 0.2);
  border-color: rgba(255, 231, 179, 0.68);
  box-shadow:
    0 22px 48px rgba(0, 0, 0, 0.36),
    0 0 0 4px rgba(42, 191, 176, 0.12);
}

.portfolio__carousel-wrapper .carousel-btn:hover svg,
.portfolio__carousel-wrapper .carousel-btn:focus-visible svg {
  color: #f6d37f;
}

.portfolio__carousel-wrapper .carousel-btn:disabled {
  opacity: 0.58;
  cursor: not-allowed;
  box-shadow: none;
  background: rgba(7, 17, 30, 0.58);
  border-color: rgba(255, 250, 242, 0.16);
}

.portfolio__carousel-wrapper .carousel-btn:disabled svg {
  color: rgba(255, 250, 242, 0.62);
}

@media (max-width: 900px) {
  .portfolio__carousel-wrapper {
    padding-inline: 0;
  }

  .portfolio__carousel-wrapper .carousel-btn {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    transform: none;
    width: auto;
    height: 2.75rem;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.2);
  }
}

.blog__view-all {
  color: #fffaf2;
  background: rgba(27, 23, 18, 0.35);
  border-color: rgba(255, 250, 242, 0.14) !important;
}

.blog__view-all:hover {
  color: #efc07d;
  border-color: rgba(239, 192, 125, 0.42) !important;
}

.portfolio__video-copy {
  color: #fffaf2;
}

.portfolio__video-kicker {
  color: #efc07d;
}

.portfolio__video-title,
.portfolio__time {
  color: #fffaf2;
}

.scene-tabs__nav {
  background: rgba(27, 23, 18, 0.7);
  border-color: rgba(255, 250, 242, 0.14);
  box-shadow: 0 18px 40px rgba(27, 23, 18, 0.18);
}

.scene-tab {
  color: rgba(255, 244, 229, 0.76);
}

.scene-tab.active {
  color: #fffaf2;
}

.scene-tab:not(.active):hover {
  color: rgba(255, 250, 242, 0.96);
}

.scene-switch {
  background: rgba(27, 23, 18, 0.68);
  border-color: rgba(255, 250, 242, 0.14);
}

.scene-switch__label {
  color: rgba(255, 244, 229, 0.84);
}

.scene-switch__track {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 250, 242, 0.24);
}

.scene-switch__knob {
  background: rgba(255, 250, 242, 0.84);
}

.scene-tabs__overlay-bar {
  color: #fffaf2;
  background: rgba(27, 23, 18, 0.78);
  border-color: rgba(255, 250, 242, 0.14);
}

.scene-tabs__overlay-detail {
  color: rgba(255, 244, 229, 0.82);
}

.footer__contact-form .footer__field {
  align-content: start;
}

.footer__contact-form .footer__input,
.footer__contact-form .footer__textarea {
  width: 100%;
  min-width: 0;
  min-height: 4.15rem;
  background: rgba(255, 251, 245, 0.96);
  border: 1px solid rgba(194, 131, 53, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), 0 10px 28px rgba(194, 131, 53, 0.08);
  color: #1b1712;
}

.footer__contact-form .footer__textarea {
  min-height: 9.5rem;
}

.footer__contact-form .footer__input::placeholder,
.footer__contact-form .footer__textarea::placeholder {
  color: rgba(104, 95, 84, 0.9);
}

.footer__contact-form .footer__input:hover,
.footer__contact-form .footer__textarea:hover {
  border-color: rgba(194, 131, 53, 0.68);
}

.footer__contact-form .footer__input:focus,
.footer__contact-form .footer__textarea:focus {
  border-color: #c28335;
  box-shadow: 0 0 0 4px rgba(194, 131, 53, 0.12), 0 14px 32px rgba(194, 131, 53, 0.12);
}

.section-badge--portfolio,
.footer__contact-side .section-badge--portfolio {
  --title-dot-size: .46rem;
  --title-dot-ring: 0 0 0 4px rgba(27, 23, 18, 0.06);
  align-items: center;
  justify-content: center;
  gap: .7rem;
  padding: .75rem 1.85rem;
  border: 2px solid rgba(27, 23, 18, 0.12) !important;
  background: rgba(255, 250, 242, 0.64) !important;
  border-radius: var(--radius-pill);
  color: #1b1712 !important;
  -webkit-text-fill-color: #1b1712 !important;
  font-size: clamp(.82rem, 1.35vw, .95rem);
  letter-spacing: .16em;
  box-shadow: 0 10px 26px rgba(40, 25, 8, 0.06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  animation: none !important;
  text-shadow: none;
  line-height: 1;
  white-space: nowrap;
  transition: background .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.section-badge--portfolio *,
.footer__contact-side .section-badge--portfolio * {
  color: #1b1712 !important;
  -webkit-text-fill-color: #1b1712 !important;
  text-shadow: none;
}

.section-badge--portfolio:hover,
.footer__contact-side .section-badge--portfolio:hover {
  background: #1b1712 !important;
  border-color: #1b1712 !important;
  color: #fffaf2 !important;
  -webkit-text-fill-color: #fffaf2 !important;
  box-shadow: 0 14px 30px rgba(27, 23, 18, 0.16);
}

.section-badge--portfolio:hover *,
.footer__contact-side .section-badge--portfolio:hover * {
  color: #fffaf2 !important;
  -webkit-text-fill-color: #fffaf2 !important;
}

.section-badge--portfolio::before,
.section-badge--portfolio::after,
.footer__contact-side .section-badge--portfolio::before,
.footer__contact-side .section-badge--portfolio::after {
  content: "";
  display: block;
  position: static;
  inset: auto;
  width: var(--title-dot-size);
  height: var(--title-dot-size);
  flex: 0 0 var(--title-dot-size);
  border-radius: 50%;
  background: currentColor !important;
  background-image: none !important;
  box-shadow: var(--title-dot-ring) !important;
  transform: none !important;
  animation: none !important;
  mix-blend-mode: normal;
  pointer-events: none;
  opacity: .92;
}

@media (max-width: 900px) {
  .section-badge--portfolio,
  .footer__contact-side .section-badge--portfolio {
    --title-dot-size: .4rem;
    padding-inline: 1.45rem;
  }

  .section-badge--portfolio::before,
  .section-badge--portfolio::after,
  .footer__contact-side .section-badge--portfolio::before,
  .footer__contact-side .section-badge--portfolio::after {
    flex-basis: var(--title-dot-size);
  }
}

.section-title,
.about__title,
.solutions-page__title,
.solutions-page__hero-overlay h2,
.solutions-page__hero-status,
.solutions-page__hero-kicker,
.solutions-page__hero-strip span,
.solutions-rail__item h3,
.solution-card__body h3,
.blog-card h3,
.review-card__name,
.why-item h4,
.feature-card h3,
.stat-card__label,
.lighting-panel__title,
.lighting-dimmer__label,
.lighting-control__label,
.footer__brand-name,
.footer__contact-card-value,
.footer__field-label,
.hero__stat-value {
  color: #1b1712;
  text-shadow: none;
}

.section-subtitle,
.solutions-page__subtitle,
.footer__brand p,
.footer__captcha-note,
.hero__stat-label,
.blog-card__meta {
  color: #5e564b;
}

.solutions-rail__item h3,
.solution-card__body h3 {
  color: #fffaf2 !important;
}

.solutions-rail__item p,
.solution-card__body p,
.solution-card__list li {
  color: rgba(255, 244, 229, 0.84) !important;
}

.solution-card__body,
.solution-card__body *,
.solution-card__tag {
  color: #fffaf2 !important;
  -webkit-text-fill-color: #fffaf2 !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}

.works-with .section-title,
.works-with .section-subtitle,
.features .section-title,
.features .section-subtitle,
.blog .section-title {
  text-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
}

.blog .section-title .teal-text {
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.18));
}

.footer__contact-layout {
  align-items: center;
}

.footer__contact-side {
  justify-items: center;
  align-content: center;
  text-align: center;
}

.footer__contact-side::before {
  left: 50%;
  inset: 1.2rem auto auto;
  width: calc(100% - 2.4rem);
  transform: translateX(-50%);
}

.footer__contact-side > h3,
.footer__contact-side > p {
  margin-inline: auto;
  max-width: 34rem;
}

.footer__contact-side .section-badge--portfolio {
  margin-inline: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.1rem;
  padding-inline: 2rem;
  text-align: center;
}

.footer__contact-side .section-badge--portfolio .section-badge__label {
  display: block;
  line-height: 1;
  text-align: center;
}

.footer__contact-points {
  width: min(100%, 34rem);
  margin-inline: auto;
}

.footer__contact-layout {
  gap: clamp(1rem, 2vw, 1.6rem);
  align-items: start;
}

.footer__contact-side {
  border-right: none;
}

.footer__contact-side::before {
  content: none;
}

.footer__contact-card {
  width: 100%;
  grid-template-columns: 3.35rem minmax(0, 1fr);
  column-gap: 1.1rem;
  align-items: center;
  min-height: 5.65rem;
  padding: 1.15rem 1.25rem;
  text-align: left;
}

.footer__contact-card-icon {
  width: 3.35rem;
  height: 3.35rem;
  justify-self: center;
  align-self: center;
}

.footer__contact-card-copy {
  min-height: 100%;
  align-self: center;
  align-content: center;
  justify-items: start;
  text-align: left;
}

.footer__contact-card-value {
  justify-self: start;
}

.footer__contact-card--location {
  align-items: start;
  min-height: 6.9rem;
}

.footer__contact-card--location .footer__contact-card-icon,
.footer__contact-card--location .footer__contact-card-copy {
  align-self: start;
}

.footer__contact-card--location .footer__contact-card-copy {
  padding-top: 0.08rem;
}

@media (max-width: 540px) {
  .footer__contact-card {
    grid-template-columns: 2.5rem minmax(0, 1fr);
  }

  .footer__contact-card-copy {
    align-content: start;
  }
}

.works-with .section-badge--portfolio {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: #fffaf2 !important;
  -webkit-text-fill-color: #fffaf2 !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.16);
}

.works-with .section-badge--portfolio *,
.works-with .section-badge--portfolio:hover * {
  color: #fffaf2 !important;
  -webkit-text-fill-color: #fffaf2 !important;
}

.works-with .section-badge--portfolio:hover {
  background: rgba(255,255,255,.1) !important;
  border-color: rgba(94,210,229,.34) !important;
  color: #fffaf2 !important;
  -webkit-text-fill-color: #fffaf2 !important;
}

.works-with .section-title,
.works-with .section-subtitle {
  text-shadow: none;
}

/* Keep the stats demo controls floating without a card behind them */
.lighting-panel {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.lighting-panel__title,
.lighting-dimmer__label,
.lighting-control__label {
  color: #fffaf2 !important;
}

.lighting-panel__eyebrow,
.lighting-dimmer__labels {
  color: rgba(255, 250, 242, 0.68) !important;
}

/* Interactive room control showcase */
.scene-tabs {
  position: relative;
  padding: 3.1rem 1.5rem 5.2rem;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 18%, rgba(41, 198, 214, 0.14), transparent 18%),
    radial-gradient(circle at 82% 10%, rgba(125, 211, 252, 0.12), transparent 18%),
    linear-gradient(180deg, #0c1527 0%, #08111f 100%);
}

.scene-tabs::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(4, 10, 19, 0.08) 0%, rgba(4, 10, 19, 0.3) 100%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 0, rgba(255, 255, 255, 0.02) 1px, transparent 1px, transparent 72px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0, rgba(255, 255, 255, 0.02) 1px, transparent 1px, transparent 72px);
  opacity: 0.28;
  pointer-events: none;
}

.scene-tabs__container {
  position: relative;
  z-index: 1;
}

.scene-tabs .section-header {
  display: grid;
  justify-items: center;
  width: auto;
  max-width: min(100%, 42rem);
  margin: 0 auto 1.2rem;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.scene-tabs .section-title {
  color: #fffaf2;
  text-shadow:
    0 10px 28px rgba(0, 0, 0, 0.6),
    0 0 24px rgba(47, 209, 195, 0.14);
}

.scene-tabs .section-badge {
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.scene-tabs__nav {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7rem;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 1.35rem;
  padding: 0.55rem;
  border-radius: 999px;
  border: 1px solid rgba(150, 174, 201, 0.14);
  background: rgba(7, 12, 24, 0.76);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.02),
    0 24px 48px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  overflow: hidden;
  isolation: isolate;
}

.scene-tabs__nav::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(118deg, transparent 18%, rgba(65, 221, 235, 0.16) 50%, transparent 82%);
  transform: translateX(-120%);
  pointer-events: none;
  animation: scene-nav-scan 6.4s linear infinite;
}

.scene-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.95rem 1.4rem;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: rgba(230, 238, 248, 0.72);
  font-family: var(--font-head);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: none;
  line-height: 1;
  cursor: pointer;
  transition:
    color 0.25s ease,
    border-color 0.25s ease,
    background 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease;
  overflow: hidden;
  isolation: isolate;
}

.scene-tab::before,
.scene-tab.active::before {
  content: none;
}

.scene-tab:hover {
  color: #f4fbff;
}

.scene-tab.active {
  color: #f4fbff;
  border-color: var(--tab-color, rgba(48, 213, 226, 0.36));
  background: color-mix(in srgb, var(--tab-color, #30d5e2) 16%, rgba(9, 44, 54, 0.84));
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--tab-color, #30d5e2) 20%, transparent),
    0 16px 30px rgba(14, 123, 141, 0.18);
  transform: translateY(-1px);
  animation: scene-tab-pulse 3.2s ease-in-out infinite;
}

.scene-tab.active::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(118deg, transparent 22%, rgba(255, 255, 255, 0.18) 50%, transparent 78%);
  transform: translateX(-120%);
  pointer-events: none;
  animation: scene-tab-sweep 2.8s ease-in-out infinite;
}

.scene-tab__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  color: rgba(218, 229, 239, 0.76);
}

.scene-tab.active .scene-tab__icon {
  color: var(--tab-color, #30d5e2);
  animation: scene-tab-icon-float 2.6s ease-in-out infinite;
}

.scene-tab__icon svg {
  width: 1rem;
  height: 1rem;
}

.scene-tab__text {
  white-space: nowrap;
}

.scene-tabs__display {
  --scene-light-dot: #ffd87a;
  --scene-light-dot-glow: rgba(255, 216, 122, 0.52);
  position: relative;
  height: clamp(420px, 56vw, 640px);
  border-radius: 2rem;
  overflow: hidden;
  border: 1px solid rgba(111, 132, 163, 0.24);
  background: #050d19;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.03),
    0 34px 72px rgba(0, 0, 0, 0.42);
  isolation: isolate;
}

.scene-tabs__display::before {
  content: none;
}

.scene-tabs__display::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
    inset 0 0 0 2px rgba(77, 203, 220, 0.08);
}

.scene-panel {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.28s ease;
}

.scene-panel::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  width: 54%;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(255, 245, 244, 0.12) 0 18px, rgba(164, 20, 36, 0.08) 18px 36px, rgba(57, 4, 14, 0.28) 36px 54px),
    linear-gradient(180deg, rgba(138, 20, 36, 0.96), rgba(78, 6, 18, 0.98));
  border-right: 1px solid rgba(255, 223, 184, 0.12);
  box-shadow:
    inset -18px 0 30px rgba(43, 3, 10, 0.28),
    inset 0 0 52px rgba(28, 0, 6, 0.46),
    0 0 24px rgba(132, 18, 35, 0.14);
  opacity: 0;
  transform-origin: right center;
  transform: translateX(-104%);
  will-change: transform, opacity;
}

.scene-panel::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 54%;
  z-index: 2;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(255, 245, 244, 0.12) 0 18px, rgba(164, 20, 36, 0.08) 18px 36px, rgba(57, 4, 14, 0.28) 36px 54px),
    linear-gradient(180deg, rgba(138, 20, 36, 0.96), rgba(78, 6, 18, 0.98));
  border-left: 1px solid rgba(255, 223, 184, 0.12);
  box-shadow:
    inset 18px 0 30px rgba(43, 3, 10, 0.28),
    inset 0 0 52px rgba(28, 0, 6, 0.46),
    0 0 24px rgba(132, 18, 35, 0.14);
  opacity: 0;
  transform-origin: left center;
  transform: translateX(104%);
  will-change: transform, opacity;
}

.scene-panel.active {
  opacity: 1;
}

.scene-panel.active::before {
  animation: scene-curtain-open-left 1.9s cubic-bezier(0.18, 0.84, 0.24, 1) both;
}

.scene-panel.active::after {
  animation: scene-curtain-open-right 1.9s cubic-bezier(0.18, 0.84, 0.24, 1) both;
}

.scene-panel__image {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: none;
  transform: none;
}

@keyframes scene-nav-scan {
  0%,
  18% {
    transform: translateX(-120%);
    opacity: 0;
  }

  32%,
  58% {
    opacity: 1;
  }

  82%,
  100% {
    transform: translateX(120%);
    opacity: 0;
  }
}

@keyframes scene-tab-sweep {
  0%,
  20% {
    transform: translateX(-125%);
    opacity: 0;
  }

  35%,
  70% {
    opacity: 1;
  }

  100% {
    transform: translateX(125%);
    opacity: 0;
  }
}

@keyframes scene-tab-pulse {
  0%,
  100% {
    box-shadow:
      inset 0 0 0 1px color-mix(in srgb, var(--tab-color, #30d5e2) 20%, transparent),
      0 16px 30px rgba(14, 123, 141, 0.18);
  }

  50% {
    box-shadow:
      inset 0 0 0 1px color-mix(in srgb, var(--tab-color, #30d5e2) 30%, transparent),
      0 18px 34px rgba(14, 123, 141, 0.24),
      0 0 0 1px rgba(255, 255, 255, 0.06);
  }
}

@keyframes scene-tab-icon-float {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-1px);
  }
}

@keyframes scene-display-scan {
  0%,
  16% {
    transform: translateX(-125%);
    opacity: 0;
  }

  30%,
  62% {
    opacity: 1;
  }

  88%,
  100% {
    transform: translateX(125%);
    opacity: 0;
  }
}

@keyframes scene-curtain-open-left {
  0% {
    opacity: 1;
    transform: translateX(0);
  }

  66% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateX(-104%);
  }
}

@keyframes scene-curtain-open-right {
  0% {
    opacity: 1;
    transform: translateX(0);
  }

  66% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateX(104%);
  }
}

@media (max-width: 900px) {
  .scene-tabs__display {
    height: clamp(520px, 92vw, 720px);
  }
}

@media (max-width: 640px) {
  .scene-tabs {
    padding: 2.5rem 1rem 4.2rem;
  }

  .scene-tabs__nav {
    flex-wrap: nowrap;
    justify-content: flex-start;
    width: 100%;
    overflow-x: auto;
    margin-bottom: 1.2rem;
  }

  .scene-tabs__nav::-webkit-scrollbar {
    display: none;
  }

  .scene-tab {
    padding: 0.88rem 1.1rem;
  }

  .scene-tabs__display {
    height: 34rem;
    border-radius: 1.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scene-tabs__nav::after,
  .scene-tab.active,
  .scene-tab.active::after,
  .scene-tab.active .scene-tab__icon,
  .scene-panel.active::before,
  .scene-panel.active::after {
    animation: none !important;
  }

  .scene-panel {
    transition: opacity 0.01s linear !important;
  }

  .scene-panel::before,
  .scene-panel::after {
    opacity: 0 !important;
  }
}

/* Right-side quick contact rail */
.quick-contact {
  position: fixed;
  top: 50%;
  right: 0.9rem;
  z-index: 980;
  transform: translateY(-50%);
  display: grid;
  gap: 0.7rem;
  padding: 0.7rem;
  border-radius: 1.5rem;
  background: rgba(5, 10, 20, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow:
    0 22px 48px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.quick-contact__toggle,
.quick-contact__action {
  width: 3.25rem;
  height: 3.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 0.95rem;
  color: #fffaf2;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    filter 0.25s ease,
    opacity 0.25s ease;
}

.quick-contact__toggle {
  background: linear-gradient(180deg, #52c7c3 0%, #39c0cf 56%, #27b9d4 100%);
  box-shadow: 0 12px 24px rgba(57, 192, 207, 0.24);
}

.quick-contact__toggle svg,
.quick-contact__action svg {
  width: 1.5rem;
  height: 1.5rem;
}

.quick-contact__actions {
  display: grid;
  gap: 0.7rem;
  justify-items: center;
  transform-origin: top center;
  transition:
    opacity 0.25s ease,
    transform 0.25s ease,
    max-height 0.25s ease;
  max-height: 18rem;
}

.quick-contact__action--social {
  width: 3.15rem;
  height: 3.15rem;
  border-radius: 50%;
  background: #f8f3ea;
  border: 1px solid rgba(214, 200, 180, 0.7);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 10px 22px rgba(122, 92, 48, 0.12);
}

.quick-contact__icon-img {
  width: 1.58rem;
  height: 1.58rem;
  display: block;
  object-fit: contain;
}

.quick-contact__action--mail {
  background: linear-gradient(180deg, #3f434d 0%, #2a2e35 100%);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22);
}

.quick-contact__action--brochure {
  background: linear-gradient(180deg, #ff9b42 0%, #ff8b2c 100%);
  box-shadow: 0 12px 24px rgba(255, 139, 44, 0.28);
}

.quick-contact__action--whatsapp {
  background: linear-gradient(180deg, #31d255 0%, #16b844 100%);
  box-shadow: 0 12px 24px rgba(22, 184, 68, 0.24);
}

.quick-contact__toggle:hover,
.quick-contact__action:hover {
  transform: translateX(-0.22rem) scale(1.04);
  filter: brightness(1.05);
}

.quick-contact__action--social:hover {
  border-color: rgba(194, 131, 53, 0.38);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    0 14px 26px rgba(122, 92, 48, 0.18);
}

.quick-contact:not(.is-open) .quick-contact__actions {
  opacity: 0;
  transform: translateY(-0.35rem) scaleY(0.92);
  pointer-events: none;
  max-height: 0;
  overflow: hidden;
}

.quick-contact:not(.is-open) .quick-contact__toggle svg {
  transform: rotate(180deg);
}

.quick-contact.is-open .quick-contact__toggle svg {
  transform: rotate(0deg);
}

.quick-contact__toggle svg {
  transition: transform 0.25s ease;
}

@media (max-width: 640px) {
  .quick-contact {
    right: 0.65rem;
    gap: 0.55rem;
    padding: 0.55rem;
    border-radius: 1.15rem;
  }

  .quick-contact__toggle,
  .quick-contact__action {
    width: 2.9rem;
    height: 2.9rem;
    border-radius: 0.82rem;
  }

  .quick-contact__action--social {
    border-radius: 50%;
  }
}

/* Social icons like the provided reference */
.navbar__social,
.mobile-menu__social,
.footer__social {
  gap: 0.85rem;
}

.social-btn,
.social-btn--header {
  width: 3.15rem !important;
  height: 3.15rem !important;
  border-radius: 50% !important;
  background: #f8f3ea !important;
  border: 1px solid rgba(214, 200, 180, 0.7) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 10px 22px rgba(122, 92, 48, 0.12) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.social-btn__img {
  width: 1.58rem;
  height: 1.58rem;
  filter: none !important;
}

.social-btn:hover,
.social-btn--header:hover {
  transform: translateY(-2px) scale(1.04);
  border-color: rgba(194, 131, 53, 0.38) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    0 14px 26px rgba(122, 92, 48, 0.18) !important;
}

.social-btn:hover .social-btn__img,
.social-btn--header:hover .social-btn__img {
  transform: none;
  filter: none !important;
}

/* Make the Features subtitle read clearly over the dark image */
.features .section-header {
  max-width: 52rem;
  margin-left: auto;
  margin-right: auto;
}

.features .section-header > .section-subtitle {
  color: #fffaf2 !important;
  max-width: 46rem;
  margin-top: 1.15rem;
  padding: 0.95rem 1.3rem;
  border: 1px solid rgba(65, 213, 208, 0.22);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(6, 12, 24, 0.78), rgba(17, 29, 47, 0.48));
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(12px);
  font-size: clamp(1rem, 1.3vw, 1.12rem);
  font-weight: 500;
  line-height: 1.85;
  letter-spacing: 0.01em;
  text-shadow: 0 4px 16px rgba(0, 0, 0, 0.52);
}

@media (max-width: 768px) {
  .features .section-header > .section-subtitle {
    padding: 0.95rem 1rem;
    border-radius: 1.4rem;
    line-height: 1.75;
  }
}

/* Remove the cream box behind the stats cards */
.stats .stat-card,
.stats .stat-card.glass-panel {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.stats .stat-card:hover {
  box-shadow: none !important;
}

.stats .stat-card__label {
  color: #fffaf2 !important;
  text-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}

/* Make the stats cards a bit smaller and sit more to the left on desktop */
.stats .stats__cards {
  max-width: 860px;
  gap: 1.35rem;
  margin-left: 0;
  margin-right: auto;
}

.stats .stat-card {
  padding: 2.35rem 1.35rem;
}

.stats .stat-card__number {
  font-size: clamp(2.6rem, 4.8vw, 3.95rem);
}

.stats .stat-card__underline {
  width: 6.5rem;
}

.stats .corner-bracket {
  width: 2.45rem;
  height: 2.45rem;
}

@media (max-width: 1100px) {
  .stats .stats__cards {
    max-width: none;
    gap: 2rem;
    margin-left: auto;
  }

  .stats .stat-card {
    padding: 3rem 2rem;
  }

  .stats .stat-card__underline {
    width: 8rem;
  }

  .stats .corner-bracket {
    width: 3rem;
    height: 3rem;
  }
}

/* Modern redesign for the achievements section */
.stats {
  padding: clamp(5.5rem, 9vw, 7.5rem) 1.5rem 5.5rem;
  background:
    radial-gradient(circle at 14% 16%, rgba(42, 191, 176, 0.12) 0%, transparent 22%),
    radial-gradient(circle at 88% 18%, rgba(94, 210, 229, 0.08) 0%, transparent 18%),
    linear-gradient(180deg, #08101d 0%, #0b1728 48%, #07111d 100%);
}

.stats::after {
  inset: -8% -8% -18%;
  opacity: 1;
  background:
    radial-gradient(860px 520px at 50% -6%, rgba(94, 210, 229, 0.12) 0%, transparent 58%),
    radial-gradient(680px 420px at 20% 55%, rgba(42, 191, 176, 0.08) 0%, transparent 64%),
    radial-gradient(680px 420px at 82% 30%, rgba(76, 148, 255, 0.08) 0%, transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0) 34%);
}

.stats::before {
  inset: -14% -14% -22%;
  opacity: 0.9;
  background:
    radial-gradient(540px 280px at 27% 8%, rgba(42, 191, 176, 0.18) 0%, transparent 70%),
    radial-gradient(520px 260px at 73% 14%, rgba(94, 210, 229, 0.14) 0%, transparent 72%),
    radial-gradient(900px 520px at 50% 40%, rgba(255, 210, 160, 0.06) 0%, transparent 74%);
  filter: blur(18px) saturate(1.06);
}

.stats__container {
  max-width: 1180px;
  position: relative;
  z-index: 4;
}

.stats__badge {
  display: flex;
  width: fit-content;
  margin: -2.55rem auto 1.45rem;
  position: relative;
  z-index: 5;
}

.stats__layout {
  position: relative;
  z-index: 2;
  display: grid;
  max-width: 860px;
  margin: 0 auto;
  grid-template-columns: minmax(0, 1fr);
  justify-content: stretch;
  gap: clamp(0.85rem, 1.6vw, 1.2rem);
  align-items: start;
}

.stats__header {
  max-width: 36rem;
  margin: 0;
  padding-top: 0.85rem;
  text-align: left;
}

.stats__header .section-title {
  max-width: 10.5ch;
  margin-bottom: 0;
  text-align: left;
  font-size: clamp(2.55rem, 5vw, 4.4rem);
  line-height: 0.98;
}

.stats__header .section-title .teal-text {
  text-shadow: 0 0 30px rgba(61, 223, 210, 0.16);
}

.stats__copy {
  max-width: 36rem;
  margin: 0;
  color: rgba(217, 229, 238, 0.78);
  font-size: 0.95rem;
  line-height: 1.75;
}

.stats__signal {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 1.1rem;
  padding: 0.72rem 0.96rem;
  border: 1px solid rgba(94, 210, 229, 0.18);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(8, 17, 30, 0.72), rgba(16, 28, 46, 0.5));
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.18);
}

.stats__signal-dot {
  width: 0.62rem;
  height: 0.62rem;
  border-radius: 50%;
  background: #3ddfd2;
  box-shadow: 0 0 0 7px rgba(61, 223, 210, 0.11), 0 0 24px rgba(61, 223, 210, 0.42);
  animation: pulse 2.2s ease-in-out infinite;
}

.stats__signal-text {
  color: #fffaf2;
  font-family: var(--font-head);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.stats .lighting-panel {
  position: sticky;
  top: 1.25rem;
  right: auto;
  transform: none;
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  align-self: start;
  width: min(100%, 292px);
  margin: -4.1rem 0 0;
  padding: 0.92rem;
  border-radius: 1.32rem;
  background: linear-gradient(180deg, rgba(9, 16, 28, 0.92), rgba(11, 19, 33, 0.76)) !important;
  border: 1px solid rgba(110, 176, 204, 0.16) !important;
  box-shadow:
    0 28px 65px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  overflow: hidden;
}

.stats .lighting-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at top right, rgba(42, 191, 176, 0.16) 0%, transparent 38%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.05), transparent 42%);
  pointer-events: none;
}

.stats .lighting-panel__header,
.stats .lighting-control,
.stats .lighting-dimmer,
.stats .lighting-panel__hint {
  position: relative;
  z-index: 1;
}

.stats .lighting-panel__header {
  gap: 0.28rem;
  margin-bottom: 0.72rem;
  padding-bottom: 0.68rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.stats .lighting-panel__eyebrow {
  color: rgba(189, 226, 236, 0.7) !important;
  font-size: 0.61rem;
  letter-spacing: 0.22em;
}

.stats .lighting-panel__title {
  color: #fffaf2 !important;
  font-size: 0.98rem;
  letter-spacing: 0.04em;
}

.stats .lighting-control {
  align-items: flex-start;
  gap: 0.8rem;
  padding-top: 0;
}

.stats .lighting-control__copy {
  display: grid;
  gap: 0.38rem;
}

.stats .lighting-control__label {
  color: rgba(255, 250, 242, 0.78) !important;
  font-size: 0.66rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.stats .lighting-control__status {
  padding: 0.38rem 0.78rem;
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 250, 242, 0.66);
  letter-spacing: 0.16em;
}

.stats .lighting-control__status.is-on {
  color: #49dfd3;
  border-color: rgba(73, 223, 211, 0.28);
  background: rgba(73, 223, 211, 0.12);
  box-shadow: 0 0 24px rgba(73, 223, 211, 0.14);
}

.stats .lighting-control__actions {
  gap: 0.5rem;
  align-self: flex-start;
  margin-top: -0.15rem;
}

.stats .lighting-button {
  min-width: 3.7rem;
  padding: 0.58rem 0.72rem;
  font-size: 0.7rem;
  background: rgba(255, 255, 255, 0.04);
}

.stats .lighting-button[data-light-state="on"].is-active {
  background: rgba(42, 191, 176, 0.16);
}

.stats .lighting-dimmer {
  margin-top: 0.68rem;
  padding: 0.72rem 0.76rem;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 1rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
}

.stats .lighting-dimmer__label {
  font-size: 0.73rem;
  letter-spacing: 0.11em;
}

.stats .lighting-dimmer__value {
  color: #9bf3ed;
  font-size: 0.8rem;
}

.stats .lighting-dimmer__top {
  margin-bottom: 0.48rem;
}

.stats .lighting-dimmer__labels {
  font-size: 0.6rem;
  letter-spacing: 0.16em;
}

.stats .lighting-panel__hint {
  margin: 0.85rem 0 0;
  color: rgba(201, 214, 224, 0.72);
  font-size: 0.86rem;
  line-height: 1.65;
}

.stats .stats__cards {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
  max-width: 860px;
  margin: 1rem auto 0;
}

.stats .stat-card,
.stats .stat-card.glass-panel {
  --offset-y: 0px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 12.1rem;
  padding: 0.72rem 0.85rem 0.8rem !important;
  border-radius: 1.5rem;
  background: linear-gradient(180deg, rgba(10, 18, 31, 0.88), rgba(8, 14, 24, 0.68)) !important;
  border: 1px solid rgba(116, 170, 188, 0.14) !important;
  box-shadow:
    0 24px 56px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  text-align: left;
  transform: translateY(var(--offset-y));
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  overflow: hidden;
}

.stats .stat-card::before {
  opacity: 1;
  background:
    radial-gradient(circle at top left, rgba(42, 191, 176, 0.18) 0%, transparent 38%),
    radial-gradient(circle at bottom right, rgba(255, 255, 255, 0.08) 0%, transparent 32%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 52%);
  mix-blend-mode: screen;
}

.stats .stat-card::after {
  content: none;
}

.stats .stat-card:hover {
  transform: translateY(calc(var(--offset-y) - 10px)) scale(1.01);
  border-color: rgba(94, 210, 229, 0.24) !important;
  box-shadow:
    0 30px 64px rgba(0, 0, 0, 0.34),
    0 0 34px rgba(42, 191, 176, 0.12) !important;
}

.stats .stat-card--experience {
  --offset-y: 0px;
}

.stats .stat-card--projects {
  --offset-y: 0px;
}

.stats .stat-card--support {
  --offset-y: 0px;
}

.stats .stat-card__eyebrow {
  order: 4;
  display: inline-flex;
  align-items: center;
  margin-top: auto;
  padding: 0.38rem 0.56rem;
  border-radius: 999px;
  border: 1px solid rgba(94, 210, 229, 0.12);
  background: linear-gradient(135deg, rgba(94, 210, 229, 0.12), rgba(94, 210, 229, 0.04));
  color: rgba(197, 231, 238, 0.84);
  font-family: var(--font-head);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.stats .stat-card__number {
  order: 1;
  margin: 0.68rem 0 0.42rem;
  font-size: clamp(2.1rem, 3.6vw, 3.25rem) !important;
  line-height: 0.95;
  letter-spacing: -0.04em;
  text-shadow:
    0 0 32px rgba(42, 191, 176, 0.24),
    0 14px 30px rgba(0, 0, 0, 0.25);
}

.stats .stat-card__underline {
  order: 2;
  width: 100%;
  max-width: 6.4rem;
  height: 1px;
  margin: 0 0 0.58rem;
  background: linear-gradient(90deg, rgba(94, 210, 229, 0.92) 0%, rgba(94, 210, 229, 0.18) 68%, transparent 100%);
  box-shadow: 0 0 24px rgba(94, 210, 229, 0.2);
}

.stats .stat-card__label {
  order: 3;
  color: #fffaf2 !important;
  font-size: 0.84rem;
  font-weight: 700;
  text-shadow: none;
}

.stats .stat-card__note {
  margin: 0.62rem 0 0;
  color: rgba(198, 213, 221, 0.76);
  font-size: 0.86rem;
  line-height: 1.62;
}

.stats .stat-card__dots {
  order: 5;
  justify-content: flex-start;
  gap: 0.52rem;
  margin-top: 0.48rem;
}

.stats .stat-card__dots span {
  width: 0.44rem;
  height: 0.44rem;
  background: rgba(94, 210, 229, 0.88);
  box-shadow: 0 0 16px rgba(94, 210, 229, 0.2);
  opacity: 0.58;
}

@media (max-width: 1150px) {
  .stats__badge {
    margin: -1.65rem auto 1.1rem;
  }

  .stats__layout {
    max-width: none;
    grid-template-columns: 1fr;
  }

  .stats .lighting-panel {
    position: relative;
    top: auto;
    grid-column: 1;
    grid-row: auto;
    max-width: 420px;
    width: 100%;
    justify-self: start;
    align-self: start;
    margin-top: 0.2rem;
  }

  .stats .stats__cards {
    grid-column: 1;
  }
}

@media (max-width: 900px) {
  .stats__header {
    padding-top: 0.45rem;
  }

  .stats__header .section-title {
    max-width: none;
  }

  .stats .stats__cards {
    grid-template-columns: 1fr;
  }

  .stats .stat-card,
  .stats .stat-card.glass-panel {
    min-height: auto;
    transform: none;
  }

  .stats .stat-card:hover {
    transform: translateY(-8px) scale(1.01);
  }
}

@media (max-width: 640px) {
  .stats__signal {
    border-radius: 1.15rem;
    align-items: flex-start;
    padding: 0.82rem 0.95rem;
  }

  .stats .lighting-panel {
    max-width: none;
  }

  .stats .lighting-control {
    flex-direction: column;
  }

  .stats .lighting-control__actions {
    width: 100%;
  }

  .stats .lighting-button {
    flex: 1;
  }
}

/* Testimonials redesign */
.testimonials {
  padding: 5rem 1.5rem;
  background:
    radial-gradient(circle at 12% 14%, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0) 18%),
    radial-gradient(circle at 86% 12%, rgba(255, 248, 237, 0.92) 0%, rgba(255, 248, 237, 0) 20%),
    radial-gradient(circle at 50% 0%, rgba(212, 175, 55, 0.08) 0%, rgba(212, 175, 55, 0) 26%),
    linear-gradient(180deg, #fffdf8 0%, #f8f3ea 56%, #ece1cd 100%) !important;
}

.testimonials .section-bg,
.testimonials__scan-line,
.testimonials .corner-bracket {
  display: none !important;
}

.testimonials__container {
  max-width: 1280px;
  position: relative;
  z-index: 1;
}

.testimonials__inner {
  display: block;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.testimonials__header {
  display: grid;
  justify-items: center;
  gap: 0.35rem;
  margin-bottom: 1.45rem;
  text-align: center;
}

.testimonials__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.55rem;
}

.testimonials__grid {
  display: none !important;
}

.testimonials__carousel {
  --testimonial-gap: 1.55rem;
  --testimonial-visible: 4;
  display: grid;
  gap: 1.4rem;
}

.testimonials__viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y pinch-zoom;
  overscroll-behavior-x: contain;
  user-select: none;
  -webkit-user-select: none;
}

.testimonials__viewport.is-dragging {
  cursor: grabbing;
}

.testimonials__track {
  min-width: 100%;
  display: flex;
  gap: var(--testimonial-gap);
  transition: transform 0.95s cubic-bezier(.22,.74,.2,1);
  will-change: transform;
}

.testimonials__slide {
  min-width: 0;
  flex: 0 0 calc((100% - (var(--testimonial-visible) - 1) * var(--testimonial-gap)) / var(--testimonial-visible));
}

.testimonials__dots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.65rem;
}

.testimonials__dot {
  width: 0.78rem;
  height: 0.78rem;
  border: 0;
  border-radius: 50%;
  padding: 0;
  background: rgba(27, 23, 18, 0.14);
  box-shadow: inset 0 0 0 1px rgba(27, 23, 18, 0.08);
  cursor: pointer;
  transition: transform .25s ease, background .25s ease, box-shadow .25s ease;
}

.testimonials__dot:hover {
  transform: scale(1.08);
}

.testimonials__dot.is-active {
  background: linear-gradient(180deg, #4fd0d5, #24bfd2);
  box-shadow: 0 0 0 5px rgba(79, 208, 213, 0.12);
}

.testimonials__header > .section-badge {
  grid-column: 1 / -1;
  display: flex;
  width: fit-content;
  margin: 0 auto 0.35rem;
}

.testimonials__reviews-title {
  grid-column: 1 / -1;
  margin: 0 0 1.2rem;
  text-align: center;
  color: #1b1712 !important;
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  line-height: 1.08;
  text-shadow: none;
}

.testimonials .review-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  margin: 0;
  padding: 1.7rem 1.6rem 1.45rem !important;
  border-radius: 1.7rem;
  background: linear-gradient(180deg, rgba(10, 17, 31, 0.97), rgba(8, 13, 25, 0.95)) !important;
  border: 1px solid rgba(76, 93, 126, 0.34) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    0 22px 44px rgba(115, 88, 44, 0.12) !important;
  overflow: hidden;
}

.testimonials .review-card::before {
  content: "";
  position: absolute;
  inset: 0.95rem;
  border-radius: 1.15rem;
  border: 1px solid rgba(101, 117, 150, 0.12);
  pointer-events: none;
}

.testimonials .review-card:hover {
  transform: none;
  border-color: rgba(76, 93, 126, 0.34) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    0 22px 44px rgba(115, 88, 44, 0.12) !important;
}

.testimonials .stars {
  color: #f4c93f;
  font-size: 0;
  letter-spacing: 0;
  margin-bottom: 1.15rem;
}

.testimonials .stars::before {
  content: "\2605\2605\2605\2605\2605";
  font-size: 0.82rem;
  letter-spacing: 0.12rem;
}

.testimonials .review-card__quote {
  position: absolute;
  top: 0.8rem;
  right: 1.15rem;
  font-size: 0;
  line-height: 1;
}

.testimonials .review-card__quote::before {
  content: "\201D\201D";
  font-family: var(--font-head);
  font-size: 4rem;
  letter-spacing: -0.28rem;
  color: rgba(61, 223, 210, 0.08);
}

.testimonials .review-card p {
  color: rgba(206, 217, 232, 0.76);
  font-size: 0.95rem;
  line-height: 1.62;
  margin: 0 0 1.55rem;
  max-width: none;
  flex: 1;
}

.testimonials .review-card__author {
  gap: 0.85rem;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.testimonials .review-card__avatar {
  width: 2.7rem;
  height: 2.7rem;
  font-size: 1rem;
  box-shadow: 0 12px 22px rgba(0, 0, 0, 0.18);
}

.testimonials .review-card:nth-of-type(1) .review-card__avatar {
  background: linear-gradient(180deg, #2bd4e1, #2bb7c9);
}

.testimonials .review-card:nth-of-type(2) .review-card__avatar {
  background: linear-gradient(180deg, #f4d14a, #f7b748);
}

.testimonials .review-card:nth-of-type(3) .review-card__avatar {
  background: linear-gradient(180deg, #63d9df, #3fbec5);
}

.testimonials__slide:nth-child(1) .review-card__avatar {
  background: linear-gradient(180deg, #2bd4e1, #2bb7c9);
}

.testimonials__slide:nth-child(2) .review-card__avatar {
  background: linear-gradient(180deg, #f4d14a, #f7b748);
}

.testimonials__slide:nth-child(3) .review-card__avatar {
  background: linear-gradient(180deg, #63d9df, #3fbec5);
}

.testimonials__slide:nth-child(4) .review-card__avatar {
  background: linear-gradient(180deg, #6fe2cb, #47c2aa);
}

.testimonials__slide:nth-child(5) .review-card__avatar {
  background: linear-gradient(180deg, #ffc96f, #f3a853);
}

.testimonials__slide:nth-child(6) .review-card__avatar {
  background: linear-gradient(180deg, #8ae3ef, #4ec1d3);
}

.testimonials__slide:nth-child(7) .review-card__avatar {
  background: linear-gradient(180deg, #f1cf79, #dca95d);
}

.testimonials__slide:nth-child(8) .review-card__avatar {
  background: linear-gradient(180deg, #7adfd0, #45bdae);
}

.testimonials__slide:nth-child(9) .review-card__avatar {
  background: linear-gradient(180deg, #79d3eb, #4caed1);
}

.testimonials .review-card__name {
  color: #fffaf2 !important;
  font-size: 1.02rem;
  font-weight: 800;
}

.testimonials .review-card__badge {
  color: #44d1cf !important;
  font-size: 0.88rem;
  letter-spacing: 0.04em;
}

@media (max-width: 980px) {
  .testimonials__carousel {
    --testimonial-visible: 2;
  }

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

  .testimonials .review-card p {
    max-width: none;
  }
}

@media (max-width: 640px) {
  .testimonials {
    padding: 4rem 1rem;
  }

  .testimonials__carousel {
    --testimonial-visible: 1;
    --testimonial-gap: 1rem;
    gap: 1rem;
  }

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

  .testimonials .review-card {
    min-height: auto;
    padding: 1.4rem 1.2rem 1.2rem !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .testimonials__track {
    transition: none !important;
  }
}

/* Blog redesign */
.blog {
  padding: 4.6rem 1.2rem 4.9rem;
  background:
    radial-gradient(circle at 12% 10%, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0) 14%),
    radial-gradient(circle at 84% 12%, rgba(255, 248, 237, 0.95) 0%, rgba(255, 248, 237, 0) 18%),
    radial-gradient(circle at 50% 0%, rgba(212, 175, 55, 0.09) 0%, rgba(212, 175, 55, 0) 18%),
    linear-gradient(180deg, #fffdf8 0%, #f8f3ea 54%, #ece1cd 100%) !important;
}

.blog .section-bg,
.blog .corner-bracket,
.blog-card__scan-line {
  display: none !important;
}

.blog__container {
  max-width: 1180px;
}

.blog__header {
  display: grid;
  justify-items: center;
  gap: 0.55rem;
  margin-bottom: 1.65rem;
  text-align: center;
}

.blog__header .section-title {
  color: #1b1712 !important;
  text-shadow: none;
}

.blog__intro {
  max-width: 37rem;
  color: #625647;
  font-size: 0.94rem;
  line-height: 1.68;
}

.blog__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
  align-items: stretch;
}

.blog-card {
  position: relative;
  display: grid;
  min-height: 0;
  border-radius: 1.35rem;
  overflow: hidden;
  border: 1px solid rgba(73, 89, 120, 0.26) !important;
  background: linear-gradient(180deg, rgba(15, 23, 38, 0.98), rgba(9, 15, 27, 0.97)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    0 18px 34px rgba(115, 88, 44, 0.12) !important;
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease;
  isolation: isolate;
}

.blog-card::before {
  content: "";
  position: absolute;
  inset: 0.72rem;
  border-radius: 0.96rem;
  border: 1px solid rgba(113, 130, 163, 0.1);
  pointer-events: none;
}

.blog-card::after {
  content: "";
  position: absolute;
  left: 1rem;
  right: 1rem;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(244, 201, 63, 0.75), rgba(61, 223, 210, 0.5), transparent);
  opacity: 0.9;
}

.blog-card:hover {
  transform: translateY(-6px);
  border-color: rgba(94, 210, 229, 0.26) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 24px 42px rgba(115, 88, 44, 0.18),
    0 0 24px rgba(61, 223, 210, 0.08) !important;
}

.blog-card--feature {
  grid-row: auto;
  grid-template-columns: 1fr;
}

.blog-card--feature .blog-card__img {
  height: 148px;
  min-height: 148px;
}

.blog-card__img {
  position: relative;
  height: 148px;
  overflow: hidden;
}

.blog-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease, filter 0.4s ease;
  filter: saturate(0.9) contrast(1.03);
}

.blog-card:hover .blog-card__img img {
  transform: scale(1.05);
  filter: saturate(1) contrast(1.08);
}

.blog-card__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(6, 9, 16, 0.18), rgba(6, 9, 16, 0.62)),
    linear-gradient(to top, rgba(10, 16, 28, 0.85), rgba(10, 16, 28, 0.1) 54%);
}

.blog-card__cat {
  position: absolute;
  top: 0.72rem;
  left: 0.72rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  padding: 0.36rem 0.68rem;
  border-radius: 999px;
  background: rgba(255, 250, 242, 0.9);
  border: 1px solid rgba(212, 175, 55, 0.18);
  color: #1b1712;
  font-family: var(--font-head);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.blog-card__body {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 0.92rem 0.92rem 0.98rem;
  gap: 0.52rem;
}

.blog-card--feature .blog-card__body {
  padding: 0.92rem 0.92rem 0.98rem;
}

.blog-card__meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: rgba(230, 235, 243, 0.62);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  order: 0;
}

.blog .dot-sep {
  background: rgba(244, 201, 63, 0.86);
}

.blog-card h3 {
  color: #fffaf2 !important;
  font-size: 0.9rem;
  line-height: 1.18;
  margin: 0;
  order: 1;
}

.blog-card--feature h3 {
  font-size: 0.9rem;
  line-height: 1.18;
  max-width: none;
}

.blog-card__body > p:first-of-type {
  color: rgba(214, 223, 235, 0.78);
  font-size: 0.76rem;
  line-height: 1.5;
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  order: 2;
}

.blog-card--feature .blog-card__body > p:first-of-type {
  -webkit-line-clamp: 3;
}

.blog-card__body > .blog-card__detail-shell + p {
  display: none;
}

.blog-card__read {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  width: fit-content;
  margin-top: auto;
  padding: 0.48rem 0.78rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 250, 242, 0.12);
  background: rgba(255, 255, 255, 0.04);
  text-decoration: none;
  font-size: 0;
  color: transparent;
  order: 3;
  cursor: pointer;
  user-select: none;
  transition:
    border-color 0.3s ease,
    background 0.3s ease,
    transform 0.3s ease;
}

.blog-card__read::before {
  content: "Read More";
  color: #fffaf2;
  font-family: var(--font-head);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.blog-card__read::after {
  content: "+";
  display: grid;
  place-items: center;
  width: 1rem;
  height: 1rem;
  border-radius: 999px;
  background: rgba(68, 209, 207, 0.14);
  color: #44d1cf;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1;
}

.blog-card__read:hover {
  border-color: rgba(68, 209, 207, 0.28);
  background: rgba(68, 209, 207, 0.08);
  transform: translateY(-1px);
}

.blog-card__read:focus-visible {
  outline: none;
  border-color: rgba(68, 209, 207, 0.38);
  box-shadow: 0 0 0 3px rgba(68, 209, 207, 0.14);
}

.blog-card.is-open .blog-card__read::after {
  content: "-";
}

.blog-card__detail-shell {
  display: grid;
  grid-template-rows: 0fr;
  order: 4;
  margin-top: 0;
  opacity: 0;
  transition:
    grid-template-rows 0.45s cubic-bezier(.2, .88, .2, 1),
    opacity 0.28s ease,
    margin-top 0.28s ease;
}

.blog-card.is-open .blog-card__detail-shell {
  grid-template-rows: 1fr;
  margin-top: 0.1rem;
  opacity: 1;
}

.blog-card__detail {
  min-height: 0;
  overflow: hidden;
  padding-top: 0;
  border-top: 1px solid rgba(131, 154, 187, 0.12);
}

.blog-card.is-open .blog-card__detail {
  padding-top: 0.82rem;
}

.blog-card__detail p {
  margin: 0;
  color: rgba(214, 223, 235, 0.82);
  font-size: 0.74rem;
  line-height: 1.5;
}

.blog-card__detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.72rem;
}

.blog-card__detail-tags span {
  display: inline-flex;
  align-items: center;
  padding: 0.32rem 0.58rem;
  border-radius: 999px;
  background: rgba(248, 243, 234, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #dfe9f5;
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

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

  .blog-card--feature {
    grid-row: auto;
    grid-template-columns: 1fr;
  }

  .blog-card--feature .blog-card__img {
    min-height: 230px;
    height: 230px;
  }
}

@media (max-width: 640px) {
  .blog {
    padding: 4rem 1rem 4.2rem;
  }

  .blog-card__body,
  .blog-card--feature .blog-card__body {
    padding: 1rem;
  }

  .blog-card__img,
  .blog-card--feature .blog-card__img {
    height: 195px;
    min-height: 195px;
  }
}

/* Modern shared title refresh */
:root {
  --title-accent-fill: linear-gradient(90deg, rgba(212,175,55,.24), rgba(42,191,176,.28) 52%, rgba(0,217,255,.14));
  --title-shadow-soft: 0 16px 34px rgba(0,0,0,.16);
}

:is(
  .section-header > .section-title,
  .stats__header .section-title,
  .journey-roadmap__intro .section-title,
  .blog__header .section-title,
  .solutions-catalog__intro .section-title,
  .solutions-process__copy .section-title,
  .solutions-cta__container .section-title,
  .testimonials__reviews-title
) {
  position: relative;
  display: inline-block;
  max-width: 100%;
  padding-bottom: .28em;
  font-weight: 800;
  letter-spacing: -.055em;
  line-height: .97;
  text-wrap: balance;
  text-shadow: var(--title-shadow-soft);
}

:is(
  .section-header > .section-title,
  .stats__header .section-title,
  .journey-roadmap__intro .section-title,
  .blog__header .section-title,
  .solutions-catalog__intro .section-title,
  .solutions-process__copy .section-title,
  .solutions-cta__container .section-title,
  .testimonials__reviews-title
)::after {
  content: none;
  display: none;
}

:is(.about__title, .solutions-page__title, .testimonials__why-title) {
  position: relative;
  display: block;
  padding-bottom: .28em;
  font-weight: 800;
  letter-spacing: -.055em;
  line-height: .98;
  text-wrap: balance;
  text-shadow: var(--title-shadow-soft);
}

:is(.about__title, .solutions-page__title, .testimonials__why-title)::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: .04em;
  width: clamp(4rem, 12vw, 7rem);
  height: .24em;
  border-radius: 999px;
  transform: skewX(-18deg);
  background: var(--title-accent-fill);
  box-shadow: 0 12px 28px rgba(42,191,176,.1);
  z-index: -1;
}

:is(
  .solution-card__body h3,
  .feature-card h3,
  .blog-card h3,
  .journey-step h3,
  .why-item h4,
  .footer__newsletter h3,
  .lighting-panel__title
) {
  letter-spacing: -.04em;
  line-height: 1.08;
  text-wrap: balance;
}

.hero__title {
  gap: .3rem;
}

.hero .hero__title-line1,
.hero .hero__title-line2 {
  letter-spacing: -.07em;
  line-height: 1.02;
  text-shadow:
    0 18px 40px rgba(0,0,0,.34),
    0 2px 0 rgba(255,255,255,.06);
}

.hero__title-line3 {
  letter-spacing: .22em;
}

.journey-step__year,
.stat-card__number,
.hero__stat-value {
  letter-spacing: -.045em;
}

@media (max-width: 768px) {
  :is(
    .section-header > .section-title,
    .stats__header .section-title,
    .journey-roadmap__intro .section-title,
    .blog__header .section-title,
    .solutions-catalog__intro .section-title,
    .solutions-process__copy .section-title,
    .solutions-cta__container .section-title,
    .testimonials__reviews-title,
    .about__title,
    .solutions-page__title,
    .testimonials__why-title
  ) {
    padding-bottom: .22em;
    letter-spacing: -.045em;
    line-height: 1;
  }

  .hero__title {
    gap: .22rem;
  }

  .hero .hero__title-line1,
  .hero .hero__title-line2 {
    line-height: 1.03;
  }

  .hero__title-line3 {
    letter-spacing: .16em;
  }
}

.scene-tabs .section-header > .section-title {
  font-size: clamp(2.45rem, 4.8vw, 3.9rem);
  padding-bottom: .24em;
  text-shadow:
    0 12px 26px rgba(0, 0, 0, 0.42),
    0 24px 46px rgba(0, 0, 0, 0.2),
    0 0 18px rgba(255, 250, 242, 0.14);
}

.scene-tabs .section-header > .section-title::after {
  width: clamp(3.5rem, 10vw, 6rem);
  height: .2em;
}

@media (max-width: 768px) {
  .scene-tabs .section-header > .section-title {
    font-size: clamp(2.05rem, 8vw, 3rem);
    text-shadow:
      0 10px 22px rgba(0, 0, 0, 0.4),
      0 18px 36px rgba(0, 0, 0, 0.18);
  }
}

/* Signature title motion for selected homepage headings */
.title-motion {
  --title-motion-shadow-1: rgba(0, 0, 0, 0.28);
  --title-motion-shadow-2: rgba(0, 0, 0, 0.14);
  --title-motion-underline: rgba(42, 191, 176, 0.16);
  --title-motion-ease: cubic-bezier(.2, .88, .2, 1);
  --title-motion-duration: 1.5s;
  --title-motion-distance: 2rem;
  --title-motion-delay: .08s;
  display: inline-flex !important;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  column-gap: .28em;
  row-gap: .02em;
  position: relative;
  isolation: isolate;
}

.title-motion--light {
  --title-motion-shadow-1: rgba(0, 0, 0, 0.42);
  --title-motion-shadow-2: rgba(0, 0, 0, 0.2);
  --title-motion-underline: rgba(42, 191, 176, 0.16);
}

.title-motion--dark {
  --title-motion-shadow-1: rgba(22, 28, 35, 0.12);
  --title-motion-shadow-2: rgba(22, 28, 35, 0.06);
  --title-motion-underline: rgba(194, 131, 53, 0.12);
}

.title-motion--slow {
  --title-motion-duration: 2s;
  --title-motion-distance: 2.9rem;
  --title-motion-delay: .14s;
}

.title-motion::before {
  content: none;
}

.title-motion::after {
  content: none;
  opacity: 0;
  box-shadow: none;
  background: none;
  transform: translateX(-50%) skewX(-18deg) scaleX(1);
  transition:
    opacity calc(var(--title-motion-duration) - .25s) ease,
    transform calc(var(--title-motion-duration) - .15s) var(--title-motion-ease);
  transition-delay: calc(var(--title-motion-delay) + .22s);
}

.title-motion__part {
  display: inline-flex;
  align-items: baseline;
  opacity: 1;
  filter: blur(0);
  will-change: transform, opacity, filter;
  transition:
    transform var(--title-motion-duration) var(--title-motion-ease),
    opacity calc(var(--title-motion-duration) - .35s) ease,
    filter var(--title-motion-duration) ease;
  transition-delay: var(--title-motion-delay);
}

.title-motion__part--left {
  transform-origin: right center;
}

.title-motion__part--right {
  transform-origin: left center;
}

.title-motion__accent,
.title-motion .lumos-gradient-text,
.title-motion .teal-text {
  display: inline-block;
  background-size: 220% 120%;
  filter: none;
  transition:
    transform var(--title-motion-duration) var(--title-motion-ease),
    opacity calc(var(--title-motion-duration) - .35s) ease,
    filter var(--title-motion-duration) ease;
  transition-delay: calc(var(--title-motion-delay) + .08s);
}

.reveal:not(.visible) .title-motion__part {
  opacity: 0;
  filter: blur(10px);
}

.reveal:not(.visible) .title-motion__part--left {
  transform: translateX(calc(var(--title-motion-distance) * -1));
}

.reveal:not(.visible) .title-motion__part--right {
  transform: translateX(var(--title-motion-distance));
}

.reveal:not(.visible) .title-motion::after {
  opacity: 0;
  transform: translateX(-50%) skewX(-18deg) scaleX(0);
}

.reveal:not(.visible) .title-motion__accent,
.reveal:not(.visible) .title-motion .lumos-gradient-text,
.reveal:not(.visible) .title-motion .teal-text {
  opacity: 0;
  filter: blur(10px);
  transform: translateX(.8rem);
}

.reveal.visible .title-motion__part {
  opacity: 1;
  filter: blur(0);
}

.reveal.visible .title-motion__part--left {
  transform: translateX(0);
}

.reveal.visible .title-motion__part--right {
  transform: translateX(0);
}

.reveal.visible .title-motion::after {
  opacity: 1;
  transform: translateX(-50%) skewX(-18deg) scaleX(1);
}

.reveal.visible .title-motion__accent,
.reveal.visible .title-motion .lumos-gradient-text,
.reveal.visible .title-motion .teal-text {
  opacity: 1;
  filter: blur(0);
  transform: translateX(0);
  animation: title-motion-gradient 9.5s ease-in-out infinite calc(var(--title-motion-duration) + .25s);
}

.title-motion.title-motion--light {
  text-shadow:
    0 10px 22px var(--title-motion-shadow-1),
    0 16px 32px var(--title-motion-shadow-2);
}

.automation-features .title-motion.title-motion--light {
  text-shadow:
    0 6px 14px rgba(0, 0, 0, 0.22),
    0 10px 22px rgba(0, 0, 0, 0.1);
}

.features .title-motion.title-motion--light,
.scene-tabs .title-motion.title-motion--light,
.footer__contact-title.title-motion.title-motion--light {
  text-shadow:
    0 6px 14px rgba(0, 0, 0, 0.2),
    0 10px 22px rgba(0, 0, 0, 0.09);
}

.title-motion.title-motion--dark {
  text-shadow:
    0 6px 14px var(--title-motion-shadow-1),
    0 10px 20px var(--title-motion-shadow-2);
}

@keyframes title-motion-gradient {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

@media (max-width: 768px) {
  .title-motion {
    column-gap: .2em;
    row-gap: .04em;
    --title-motion-duration: 1.35s;
    --title-motion-distance: 1.25rem;
  }

  .reveal:not(.visible) .title-motion__part--left {
    transform: translateX(calc(var(--title-motion-distance) * -1));
  }

  .reveal:not(.visible) .title-motion__part--right {
    transform: translateX(var(--title-motion-distance));
  }
}

@media (prefers-reduced-motion: reduce) {
  .title-motion__part,
  .title-motion::after,
  .title-motion__accent,
  .title-motion .lumos-gradient-text,
  .title-motion .teal-text {
    transition: none !important;
    animation: none !important;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }
}

.footer__contact-title {
  margin: 0 0 .4rem;
  max-width: 12ch;
  font-family: var(--font-head);
  font-size: clamp(2rem, 3.6vw, 2.9rem);
  font-weight: 800;
  line-height: .98;
  text-align: left;
}

.footer__contact-title.title-motion {
  justify-content: flex-start;
}

.footer__contact-title.title-motion .title-motion__part,
.footer__brand-name.title-motion .title-motion__part {
  color: #1b1712;
  -webkit-text-fill-color: currentColor;
  text-shadow: none;
}

.footer__contact-title.title-motion::after {
  left: 0;
  right: auto;
  width: clamp(4rem, 9vw, 6.2rem);
  transform: skewX(-18deg) scaleX(1);
  transform-origin: left center;
}

.reveal:not(.visible) .footer__contact-title.title-motion::after {
  transform: skewX(-18deg) scaleX(0);
}

.reveal.visible .footer__contact-title.title-motion::after {
  transform: skewX(-18deg) scaleX(1);
}

@media (max-width: 768px) {
  .footer__contact-title {
    max-width: 100%;
    font-size: clamp(1.8rem, 8vw, 2.45rem);
  }
}

.footer__brand-name.title-motion {
  justify-content: flex-start;
  width: fit-content;
  max-width: none;
  row-gap: .08em;
  text-shadow: none;
}

.footer__brand-name.title-motion::after {
  content: none;
}

.footer__brand-name.title-motion .title-motion__part--left {
  white-space: nowrap;
}

.footer__brand-name.title-motion .title-motion__part--right {
  flex-basis: 100%;
}

@media (max-width: 768px) {
  .footer__brand-name.title-motion {
    max-width: 100%;
  }
}

.about__container {
  gap: 1.35rem;
  align-items: stretch;
  grid-template-columns: 1fr;
}

.about .section-bg {
  background:
    radial-gradient(circle at 12% 18%, rgba(42, 191, 176, 0.16), transparent 24%),
    radial-gradient(circle at 86% 14%, rgba(212, 175, 55, 0.14), transparent 22%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0, rgba(255, 255, 255, 0.03) 1px, transparent 1px, transparent 92px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.025) 0, rgba(255, 255, 255, 0.025) 1px, transparent 1px, transparent 92px),
    linear-gradient(180deg, rgba(7, 16, 29, 0.88), rgba(9, 21, 36, 0.94), rgba(8, 16, 28, 0.92));
}

.about__images {
  display: none !important;
}

.about__visual,
.about__insight {
  position: relative;
  overflow: hidden;
  border-radius: 1.6rem;
}

.about__visual {
  min-height: 100%;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.16);
}

.about__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s ease;
}

.about__visual:hover img {
  transform: scale(1.05);
}

.about__visual--wide {
  grid-column: 1 / -1;
  min-height: 15rem;
}

.about__visual--portrait {
  grid-column: 1;
  grid-row: 2 / 4;
  min-height: 20rem;
}

.about__visual--detail {
  grid-column: 2;
  grid-row: 2;
  min-height: 9rem;
}

.about__visual-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(7, 14, 27, 0.06), rgba(7, 14, 27, 0.44)),
    linear-gradient(0deg, rgba(7, 14, 27, 0.62), transparent 55%);
  pointer-events: none;
}

.about__visual-badge {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 0.85rem;
  border-radius: var(--radius-pill);
  background: rgba(7, 14, 27, 0.74);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fffaf2;
  font-family: var(--font-head);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.about__insight {
  grid-column: 2;
  grid-row: 3;
  display: grid;
  align-content: start;
  gap: 0.75rem;
  padding: 1.25rem;
  background: linear-gradient(180deg, rgba(9, 20, 33, 0.9), rgba(14, 32, 46, 0.96));
  border: 1px solid rgba(42, 191, 176, 0.18);
  box-shadow: 0 24px 44px rgba(0, 0, 0, 0.18);
}

.about__insight-label {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 0.36rem 0.72rem;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--gold-light);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.about__insight h3 {
  margin: 0;
  color: #fffaf2;
  font-family: var(--font-head);
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.about__insight p {
  margin: 0;
  color: rgba(248, 249, 250, 0.8);
  font-size: 0.92rem;
  line-height: 1.72;
}

.about__insight-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 0.15rem;
}

.about__insight-metric {
  display: grid;
  gap: 0.18rem;
  padding: 0.8rem 0.85rem;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.about__insight-metric strong {
  color: #fffaf2;
  font-family: var(--font-head);
  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1;
}

.about__insight-metric span {
  color: rgba(248, 249, 250, 0.7);
  font-size: 0.74rem;
  line-height: 1.45;
}

.about__story {
  position: relative;
  width: min(100%, 74rem);
  margin: 0 auto;
  padding: clamp(1.3rem, 2.8vw, 2.2rem) clamp(1.35rem, 3vw, 2.45rem) clamp(1.45rem, 3vw, 2.35rem);
  display: grid;
  gap: 1.35rem;
  overflow: hidden;
  isolation: isolate;
  border-radius: 2rem;
  background:
    radial-gradient(circle at 12% 15%, rgba(212, 175, 55, 0.15), transparent 25%),
    radial-gradient(circle at 88% 12%, rgba(42, 191, 176, 0.16), transparent 22%),
    linear-gradient(180deg, rgba(11, 18, 33, 0.97), rgba(12, 24, 41, 0.98) 56%, rgba(10, 19, 34, 0.98) 100%);
  border: 1px solid rgba(182, 115, 38, 0.18);
  box-shadow:
    0 30px 68px rgba(90, 69, 44, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.about__story::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0, rgba(255, 255, 255, 0.03) 1px, transparent 1px, transparent 96px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.025) 0, rgba(255, 255, 255, 0.025) 1px, transparent 1px, transparent 96px);
  opacity: 0.16;
  pointer-events: none;
}

.about__story > * {
  position: relative;
  z-index: 1;
}

.about__story .corner-bracket {
  width: 2.35rem;
  height: 2.35rem;
}

.about__story .corner-bracket--tl {
  top: 0.45rem;
  left: 0.45rem;
}

.about__story .corner-bracket--br {
  bottom: 0.45rem;
  right: 0.45rem;
}

.about__story-top {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem 1.65rem;
  align-items: stretch;
  margin-top: 0;
}

.about__story-copy {
  display: grid;
  gap: 1.2rem;
  align-content: start;
  min-width: 0;
}

.about__story-note {
  display: grid;
  gap: 0.45rem;
  min-width: 0;
  padding: 1.3rem 1.4rem;
  border-radius: 1.45rem;
  background:
    linear-gradient(180deg, rgba(17, 30, 53, 0.92), rgba(11, 22, 39, 0.96)),
    radial-gradient(circle at 100% 0, rgba(42, 191, 176, 0.14), transparent 40%);
  border: 1px solid rgba(42, 191, 176, 0.18) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 18px 36px rgba(52, 40, 24, 0.14);
}

.about__story-note-label {
  display: none;
}

.about__story-note p {
  margin: 0;
  color: rgba(248, 249, 250, 0.86);
  font-size: 0.96rem;
  line-height: 1.72;
  text-wrap: pretty;
}

.about__story-divider {
  height: 1px;
  margin: 0.1rem 0 0.15rem;
  background: linear-gradient(90deg, rgba(212, 175, 55, 0.36), rgba(42, 191, 176, 0.34), transparent 88%);
}

.about__content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: min(100%, 64rem);
  margin: 0 auto;
  padding: clamp(1.5rem, 3vw, 2.75rem);
  background: linear-gradient(180deg, rgba(10, 15, 30, 0.88), rgba(9, 20, 33, 0.94));
  border: 1px solid rgba(212, 175, 55, 0.16);
  box-shadow: 0 24px 54px rgba(3, 8, 17, 0.3);
}

.about__label {
  margin-bottom: 0.2rem;
}

.about__title {
  margin: 0;
  max-width: none;
  color: #fffaf2;
  font-size: clamp(1.3rem, 2.35vw, 1.95rem);
  line-height: 0.92;
  letter-spacing: -0.045em;
  text-align: left;
  text-shadow: 0 14px 30px rgba(0, 0, 0, 0.32);
  text-wrap: balance;
}

.about__title--hero {
  max-width: none;
  width: 100%;
  margin-inline: auto;
  text-align: center;
}

.about__title--hero .about__title-line {
  white-space: nowrap;
}

@media (max-width: 920px) {
  .about__title--hero .about__title-line {
    white-space: normal;
  }
}

.about__title::after {
  content: none;
  display: none;
}

.about__title-line {
  display: block;
  white-space: normal;
  text-wrap: balance;
}

.about__title .teal-text {
  display: inline;
  white-space: normal;
  text-wrap: pretty;
}

.about__title-accent {
  margin-top: 0;
}

.about__text-card {
  margin-bottom: 0;
  position: relative;
  overflow: hidden;
  padding: 1.2rem 1.35rem 1.15rem;
  border-radius: 1.35rem;
  background: linear-gradient(180deg, rgba(15, 25, 43, 0.94), rgba(11, 20, 35, 0.9));
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 18px 34px rgba(52, 40, 24, 0.12);
}

.about__text-card::before {
  content: "";
  position: absolute;
  left: 1.35rem;
  top: 0;
  width: 5.2rem;
  height: 0.22rem;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(212, 175, 55, 0.8), rgba(42, 191, 176, 0.9));
}

.about__text-card p {
  margin: 0;
  color: rgba(248, 249, 250, 0.86);
  font-size: 1rem;
  line-height: 1.78;
}

.about__text-card strong {
  color: var(--gold-light);
}

.about__credentials {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.05rem;
}

.about__credentials span {
  display: inline-flex;
  align-items: center;
  padding: 0.58rem 0.95rem;
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.025));
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(248, 249, 250, 0.88);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.about__advantage {
  display: grid;
  gap: 1.1rem;
  margin-top: 0.1rem;
}

.about__advantage-board {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 1rem;
  padding: 1rem;
  border-radius: 1.65rem;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 12%, rgba(212, 175, 55, 0.12), transparent 26%),
    radial-gradient(circle at 88% 16%, rgba(42, 191, 176, 0.14), transparent 28%),
    linear-gradient(180deg, rgba(8, 16, 30, 0.92), rgba(11, 23, 39, 0.96));
  border: 1px solid rgba(42, 191, 176, 0.16) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 20px 38px rgba(52, 40, 24, 0.12);
}

.about__advantage-board::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0, rgba(255, 255, 255, 0.03) 1px, transparent 1px, transparent 84px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.025) 0, rgba(255, 255, 255, 0.025) 1px, transparent 1px, transparent 84px);
  opacity: 0.14;
  pointer-events: none;
}

.about__advantage-board > * {
  position: relative;
  z-index: 1;
}

.advantage-anchor {
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.85rem;
  min-height: 100%;
  padding: 1.3rem 1.35rem;
  border-radius: 1.35rem;
  overflow: hidden;
  background:
    radial-gradient(circle at 100% 0, rgba(212, 175, 55, 0.12), transparent 38%),
    linear-gradient(180deg, rgba(17, 32, 57, 0.96), rgba(11, 22, 38, 0.92));
  border: 1px solid rgba(212, 175, 55, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 18px 34px rgba(52, 40, 24, 0.12);
}

.advantage-anchor::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 0.24rem;
  background: linear-gradient(180deg, rgba(212, 175, 55, 0.95), rgba(42, 191, 176, 0.92));
}

.advantage-anchor__eyebrow {
  display: inline-flex;
  align-items: center;
  width: max-content;
  padding: 0.42rem 0.8rem;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.09);
  font-family: var(--font-head);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-light);
}

.advantage-anchor h4 {
  margin: 0;
  max-width: 12ch;
  font-family: var(--font-head);
  font-size: clamp(1.45rem, 2.8vw, 2.15rem);
  font-weight: 800;
  line-height: 1.02;
  color: #fffaf2;
}

.advantage-anchor p {
  margin: 0;
  color: rgba(248, 249, 250, 0.82);
  font-size: 0.95rem;
  line-height: 1.72;
  text-wrap: pretty;
}

.advantage-anchor__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.1rem;
}

.advantage-anchor__tags span {
  padding: 0.42rem 0.72rem;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #d9ebef;
}

.advantage-signal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.95rem;
}

.advantage-signal {
  position: relative;
  display: grid;
  gap: 0.6rem;
  min-height: 100%;
  padding: 1.05rem 1rem 1rem;
  border-radius: 1.2rem;
  overflow: hidden;
  background:
    radial-gradient(circle at 100% 0, rgba(42, 191, 176, 0.08), transparent 34%),
    linear-gradient(180deg, rgba(14, 25, 43, 0.96), rgba(10, 19, 34, 0.92));
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 16px 30px rgba(52, 40, 24, 0.1);
  transition:
    transform 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}

.advantage-signal::before {
  content: "";
  position: absolute;
  top: 0;
  left: 1rem;
  width: 3.1rem;
  height: 0.18rem;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(212, 175, 55, 0.88), rgba(42, 191, 176, 0.94));
}

.advantage-signal__value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  min-width: 3.25rem;
  padding: 0.42rem 0.74rem;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-family: var(--font-head);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-light);
}

.advantage-signal h4 {
  margin: 0;
  font-family: var(--font-head);
  font-size: 1.02rem;
  font-weight: 800;
  line-height: 1.18;
  color: #fffaf2;
}

.advantage-signal p {
  margin: 0;
  color: rgba(248, 249, 250, 0.76);
  font-size: 0.9rem;
  line-height: 1.62;
  text-wrap: pretty;
}

.advantage-signal:hover {
  transform: translateY(-0.28rem);
  border-color: rgba(42, 191, 176, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 22px 36px rgba(52, 40, 24, 0.13);
}

.about__why-proof {
  position: relative;
  overflow: hidden;
  margin-top: 1.25rem;
  padding: 1.2rem 1.35rem;
  border-radius: 1.45rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: 0.95rem 1.2rem;
  align-items: center;
  background:
    radial-gradient(circle at 100% 0, rgba(42, 191, 176, 0.12), transparent 35%),
    linear-gradient(90deg, rgba(16, 35, 39, 0.94), rgba(18, 43, 53, 0.94));
  border: 1px solid rgba(42, 191, 176, 0.18) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 18px 34px rgba(52, 40, 24, 0.12);
}

.about__why-proof::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 0.24rem;
  background: linear-gradient(180deg, rgba(212, 175, 55, 0.95), rgba(42, 191, 176, 0.9));
}

.why-proof {
  display: grid;
  gap: 0.28rem;
}

.why-proof__value {
  font-family: var(--font-head);
  font-size: clamp(2rem, 3.6vw, 2.7rem);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.04em;
  color: #fffaf2;
}

.why-proof__label {
  max-width: 15rem;
  color: rgba(248, 249, 250, 0.84);
  font-size: 0.82rem;
  line-height: 1.52;
}

.about__story .about__cta {
  font-size: 0.74rem;
  padding: 0.94rem 1.4rem;
  letter-spacing: 0.14em;
  box-shadow: 0 16px 30px rgba(212, 175, 55, 0.22);
}

.journey-roadmap__intro {
  display: grid;
  grid-template-columns: minmax(0, 1.24fr) minmax(18rem, 0.76fr);
  gap: clamp(1.4rem, 3vw, 2.6rem);
  align-items: end;
  max-width: none;
  margin: 1.3rem auto 3.35rem;
}

.journey-roadmap__intro .section-badge--portfolio {
  justify-self: start;
  width: fit-content;
  padding: 0.68rem 1.08rem;
  border: 1px solid rgba(16, 36, 48, 0.12) !important;
  background: rgba(255, 255, 255, 0.76) !important;
  color: #102430 !important;
  -webkit-text-fill-color: #102430 !important;
  font-size: clamp(0.72rem, 0.94vw, 0.8rem);
  letter-spacing: 0.18em;
  box-shadow: 0 14px 32px rgba(16, 35, 49, 0.06);
}

.journey-roadmap__intro .section-badge--portfolio:hover {
  background: rgba(255, 255, 255, 0.9) !important;
  border-color: rgba(16, 36, 48, 0.16) !important;
  color: #102430 !important;
  -webkit-text-fill-color: #102430 !important;
  box-shadow: 0 16px 36px rgba(16, 35, 49, 0.08);
}

.journey-roadmap__intro .section-badge--portfolio *,
.journey-roadmap__intro .section-badge--portfolio:hover * {
  color: #102430 !important;
  -webkit-text-fill-color: #102430 !important;
}

.journey-roadmap__intro .section-badge--portfolio::before,
.journey-roadmap__intro .section-badge--portfolio::after {
  content: none;
}

.journey-roadmap__intro-copy {
  display: grid;
  gap: 0.9rem;
  max-width: 44rem;
  text-align: left;
}

.journey-roadmap__kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  color: rgba(16, 36, 48, 0.6);
  font-family: var(--font-head);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.journey-roadmap__kicker::before {
  content: "";
  width: 2.4rem;
  height: 1px;
  background: linear-gradient(90deg, rgba(16, 36, 48, 0.16), rgba(42, 191, 176, 0.72));
}

.journey-roadmap__summary {
  position: relative;
  display: grid;
  gap: 0.85rem;
  padding: 1.3rem 1.35rem;
  border-radius: 1.8rem;
  border: 1px solid rgba(16, 36, 48, 0.08);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(246, 241, 233, 0.9));
  box-shadow: 0 22px 42px rgba(16, 35, 49, 0.08);
  overflow: hidden;
}

.journey-roadmap__summary::before {
  content: "";
  position: absolute;
  inset: auto -12% -22% auto;
  width: 11rem;
  height: 11rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(42, 191, 176, 0.12), transparent 70%);
  pointer-events: none;
}

.journey-roadmap__summary-label {
  position: relative;
  z-index: 1;
  color: rgba(16, 36, 48, 0.56);
  font-family: var(--font-head);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.journey-roadmap__summary-range {
  position: relative;
  z-index: 1;
  font-family: var(--font-head);
  font-size: clamp(2rem, 3vw, 2.85rem);
  font-weight: 900;
  line-height: 0.92;
  letter-spacing: -0.06em;
  color: #102430;
}

.journey-roadmap__summary p {
  position: relative;
  z-index: 1;
  margin: 0;
  color: rgba(16, 36, 48, 0.74);
  font-size: 0.92rem;
  line-height: 1.72;
}

.journey-roadmap__summary-tags {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.journey-roadmap__summary-tags span {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.7rem;
  border-radius: 999px;
  background: rgba(16, 36, 48, 0.06);
  color: rgba(16, 36, 48, 0.78);
  font-family: var(--font-head);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.journey-roadmap__summary-tags span::before {
  content: "";
  width: 0.36rem;
  height: 0.36rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #2abfb0, #d89f4f);
}

.journey-roadmap .section-title {
  max-width: 10ch;
  margin: 0;
  font-size: clamp(2.45rem, 4.8vw, 4.85rem);
  line-height: 0.92;
  letter-spacing: -0.065em;
  text-align: left;
  color: #102430;
  text-shadow:
    0 18px 40px rgba(255, 255, 255, 0.48),
    0 10px 24px rgba(16, 35, 49, 0.08);
}

.journey-roadmap .section-subtitle {
  max-width: 36rem;
  margin: 0;
  text-align: left;
  color: rgba(16, 36, 48, 0.74);
  font-size: 1rem;
  line-height: 1.82;
}

@keyframes journey-road-lane-flow {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -52; }
}

@keyframes journey-road-glow-pulse {
  0%, 100% { opacity: 0.48; }
  50% { opacity: 0.88; }
}

@keyframes journey-launch-float {
  0%, 100% { transform: translateX(-50%) translateY(0) rotate(-8deg) scale(1); }
  50% { transform: translateX(-50%) translateY(-0.45rem) rotate(-4deg) scale(1.03); }
}

@keyframes journey-track-lane-flow {
  from { background-position: 0 0; }
  to { background-position: 0 -3.65rem; }
}

@keyframes journey-connector-flow {
  from { background-position: 0 0, 0 0; }
  to { background-position: 220% 0, 0 0; }
}

@keyframes journey-node-pulse {
  0%, 100% {
    border-color: #2abfb0;
    box-shadow:
      0 0 0 10px rgba(42, 191, 176, 0.08),
      0 8px 18px rgba(16, 35, 49, 0.12);
  }
  50% {
    border-color: #d89f4f;
    box-shadow:
      0 0 0 14px rgba(216, 159, 79, 0.12),
      0 12px 22px rgba(16, 35, 49, 0.16);
  }
}

@keyframes journey-year-shift {
  from { background-position: 0% 50%; }
  to { background-position: 200% 50%; }
}

.journey-roadmap__canvas {
  position: relative;
  margin-top: 0.9rem;
  padding: 6.5rem 0 1.2rem;
}

.journey-roadmap__canvas::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 5.5rem;
  bottom: 0;
  width: 12rem;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(42, 191, 176, 0.12), rgba(216, 159, 79, 0.06) 46%, transparent 74%);
  filter: blur(20px);
  pointer-events: none;
}

.journey-roadmap__canvas.reveal::before {
  opacity: 0;
  transform: translateX(-50%) scale(0.72, 0.38);
  transition:
    opacity 0.85s ease,
    transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.journey-roadmap__canvas.reveal.visible::before {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

.journey-roadmap__road {
  position: absolute;
  left: 50%;
  top: 3.6rem;
  bottom: 0;
  width: min(46rem, 56vw);
  height: calc(100% - 3.6rem);
  transform: translateX(-50%);
  overflow: visible;
  pointer-events: none;
}

.journey-roadmap__road path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.journey-roadmap__road-glow {
  stroke: rgba(133, 172, 176, 0.16);
  stroke-width: 200;
  filter: blur(22px);
}

.journey-roadmap__road-shadow {
  stroke: rgba(18, 31, 42, 0.16);
  stroke-width: 182;
  filter: blur(8px);
  opacity: 0.68;
}

.journey-roadmap__road-edge {
  stroke: url(#journeyHighwayShoulder);
  stroke-width: 164;
}

.journey-roadmap__road-stripe {
  stroke: rgba(255, 250, 242, 0.98);
  stroke-width: 128;
}

.journey-roadmap__road-surface {
  stroke: url(#journeyHighwaySurface);
  stroke-width: 108;
  filter:
    drop-shadow(0 28px 30px rgba(16, 35, 49, 0.14))
    drop-shadow(0 6px 14px rgba(16, 35, 49, 0.12));
}

.journey-roadmap__road-lane {
  stroke: url(#journeyHighwayDivider);
  stroke-width: 8;
  stroke-dasharray: 16 30;
}

.journey-roadmap__canvas.reveal .journey-roadmap__road-glow,
.journey-roadmap__canvas.reveal .journey-roadmap__road-shadow,
.journey-roadmap__canvas.reveal .journey-roadmap__road-edge,
.journey-roadmap__canvas.reveal .journey-roadmap__road-stripe,
.journey-roadmap__canvas.reveal .journey-roadmap__road-surface {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}

.journey-roadmap__canvas.reveal .journey-roadmap__road-glow {
  opacity: 0;
  transition:
    opacity 0.8s ease;
}

.journey-roadmap__canvas.reveal .journey-roadmap__road-shadow {
  opacity: 0;
  transition:
    stroke-dashoffset 1.9s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.85s ease;
}

.journey-roadmap__canvas.reveal .journey-roadmap__road-edge {
  transition: stroke-dashoffset 1.9s cubic-bezier(0.22, 1, 0.36, 1) 0.08s;
}

.journey-roadmap__canvas.reveal .journey-roadmap__road-stripe {
  transition: stroke-dashoffset 1.9s cubic-bezier(0.22, 1, 0.36, 1) 0.16s;
}

.journey-roadmap__canvas.reveal .journey-roadmap__road-surface {
  transition: stroke-dashoffset 1.9s cubic-bezier(0.22, 1, 0.36, 1) 0.22s;
}

.journey-roadmap__canvas.reveal .journey-roadmap__road-lane {
  opacity: 0;
  transition: opacity 0.55s ease;
}

.journey-roadmap__canvas.reveal:not(.visible) .journey-roadmap__road-glow,
.journey-roadmap__canvas.reveal:not(.visible) .journey-roadmap__road-shadow,
.journey-roadmap__canvas.reveal:not(.visible) .journey-roadmap__road-edge,
.journey-roadmap__canvas.reveal:not(.visible) .journey-roadmap__road-stripe,
.journey-roadmap__canvas.reveal:not(.visible) .journey-roadmap__road-surface {
  stroke-dashoffset: 100;
}

.journey-roadmap__canvas.reveal:not(.visible) .journey-roadmap__road-lane {
  opacity: 0;
  animation: none;
}

.journey-roadmap__canvas.reveal.visible .journey-roadmap__road-glow,
.journey-roadmap__canvas.reveal.visible .journey-roadmap__road-shadow,
.journey-roadmap__canvas.reveal.visible .journey-roadmap__road-edge,
.journey-roadmap__canvas.reveal.visible .journey-roadmap__road-stripe,
.journey-roadmap__canvas.reveal.visible .journey-roadmap__road-surface {
  stroke-dashoffset: 0;
}

.journey-roadmap__canvas.reveal.visible .journey-roadmap__road-glow {
  opacity: 0.7;
  animation: journey-road-glow-pulse 4.6s ease-in-out infinite;
  animation-delay: 1.05s;
}

.journey-roadmap__canvas.reveal.visible .journey-roadmap__road-shadow {
  opacity: 0.68;
}

.journey-roadmap__canvas.reveal.visible .journey-roadmap__road-lane {
  opacity: 1;
  animation: journey-road-lane-flow 2.55s linear infinite;
  animation-delay: 1.05s;
}

.journey-roadmap__launch {
  position: absolute;
  left: 50%;
  top: 0.35rem;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 5rem;
  height: 5rem;
  margin: 0;
  transform: translateX(-50%) rotate(-8deg);
  border-radius: 1.6rem;
  border: 1px solid rgba(16, 36, 48, 0.08);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(232, 245, 242, 0.88));
  box-shadow: 0 26px 48px rgba(16, 35, 49, 0.14);
}

.journey-roadmap__canvas.reveal .journey-roadmap__launch {
  opacity: 0;
  transform: translateX(-50%) translateY(-0.85rem) rotate(-14deg) scale(0.86);
  transition:
    opacity 0.7s ease 0.12s,
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.12s;
}

.journey-roadmap__canvas.reveal.visible .journey-roadmap__launch {
  opacity: 1;
  transform: translateX(-50%) translateY(0) rotate(-8deg) scale(1);
  animation: journey-launch-float 4.8s ease-in-out infinite;
  animation-delay: 1.05s;
}

.journey-roadmap__launch::after {
  content: "";
  position: absolute;
  top: calc(100% - 0.15rem);
  left: 50%;
  width: 2px;
  height: 2.7rem;
  transform: translateX(-50%);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(42, 191, 176, 0.92), rgba(216, 159, 79, 0.42), rgba(16, 36, 48, 0));
  box-shadow: 0 0 18px rgba(42, 191, 176, 0.16);
}

.journey-roadmap__canvas.reveal .journey-roadmap__launch::after {
  opacity: 0;
  transform: translateX(-50%) scaleY(0.08);
  transform-origin: top center;
  transition:
    opacity 0.55s ease 0.5s,
    transform 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.5s;
}

.journey-roadmap__canvas.reveal.visible .journey-roadmap__launch::after {
  opacity: 1;
  transform: translateX(-50%) scaleY(1);
}

.journey-roadmap__launch svg {
  width: 68%;
  height: 68%;
  filter: drop-shadow(0 10px 22px rgba(16, 35, 49, 0.16));
}

.journey-roadmap__track {
  --journey-road-gap: clamp(11rem, 17vw, 15rem);
  --journey-connector: clamp(2.6rem, 4.5vw, 3.4rem);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--journey-road-gap) minmax(0, 1fr);
  gap: 1.15rem 0;
  padding-top: 2.8rem;
}

.journey-roadmap__track::before {
  content: none;
}

.journey-roadmap__track::after {
  content: none;
}

.journey-step,
.journey-step--left,
.journey-step--right {
  width: auto;
  margin: 0;
}

.journey-step {
  --journey-card-tilt: 0deg;
  --journey-reveal-delay: 0s;
  position: relative;
  z-index: 1;
  width: min(100%, 20.5rem);
  padding: 1.3rem 1.3rem 1.18rem;
  border-radius: 1.65rem;
  border: 1px solid rgba(16, 36, 48, 0.08);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(249, 244, 236, 0.94));
  box-shadow:
    0 24px 48px rgba(16, 35, 49, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
  display: grid;
  align-content: start;
  gap: 0.42rem;
  overflow: hidden;
  text-align: left;
  opacity: 1;
  transform: rotate(var(--journey-card-tilt));
  transition:
    opacity 0.7s ease,
    transform 0.76s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.28s ease,
    border-color 0.28s ease;
  transition-delay: 0s;
}

.journey-step:hover {
  transform: translateY(-7px) rotate(0deg);
  border-color: rgba(42, 191, 176, 0.18);
  box-shadow:
    0 30px 56px rgba(16, 35, 49, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.journey-step::before {
  content: "";
  position: absolute;
  top: 2.85rem;
  width: var(--journey-connector);
  height: 12px;
  border-radius: 999px;
  background:
    repeating-linear-gradient(90deg, transparent 0 1.05rem, rgba(255, 225, 141, 0.96) 1.05rem 1.5rem, transparent 1.5rem 2.45rem),
    linear-gradient(90deg, rgba(230, 219, 197, 0.98) 0 8%, rgba(255, 250, 242, 0.98) 8% 14%, rgba(40, 52, 62, 0.98) 14% 86%, rgba(255, 250, 242, 0.98) 86% 92%, rgba(230, 219, 197, 0.98) 92% 100%);
  background-size: 220% 100%, 100% 100%;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 10px 16px rgba(16, 35, 49, 0.08);
  animation: journey-connector-flow 3.4s linear infinite;
  animation-delay: calc(var(--journey-reveal-delay) + 1s);
  animation-play-state: paused;
}

.journey-step::after {
  content: "";
  position: absolute;
  top: calc(2.85rem - 0.58rem);
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #fffdf8, #fff1d0);
  border: 4px solid #2abfb0;
  box-shadow:
    0 0 0 10px rgba(42, 191, 176, 0.08),
    0 8px 18px rgba(16, 35, 49, 0.12);
  animation: journey-node-pulse 2.8s ease-in-out infinite;
  animation-delay: calc(var(--journey-reveal-delay) + 1.05s);
  animation-play-state: paused;
}

.journey-step:nth-child(odd) {
  grid-column: 1;
  grid-row: auto;
  justify-self: end;
  margin-right: calc(var(--journey-connector) + 1.2rem);
  --journey-card-tilt: -1.2deg;
}

.journey-step:nth-child(odd)::before {
  right: calc((var(--journey-connector) + 1.2rem) * -1);
}

.journey-step:nth-child(odd)::after {
  right: calc((var(--journey-connector) + 1.2rem) * -1 - 0.58rem);
}

.journey-step:nth-child(even) {
  grid-column: 3;
  grid-row: auto;
  justify-self: start;
  margin-left: calc(var(--journey-connector) + 1.2rem);
  --journey-card-tilt: 1.2deg;
}

.journey-step:nth-child(even)::before {
  left: calc((var(--journey-connector) + 1.2rem) * -1);
}

.journey-step:nth-child(even)::after {
  left: calc((var(--journey-connector) + 1.2rem) * -1 - 0.58rem);
}

.journey-step:nth-child(1) { grid-row: 1; margin-top: 0.5rem; --journey-reveal-delay: 0.08s; }
.journey-step:nth-child(2) { grid-row: 2; margin-top: 1.7rem; --journey-reveal-delay: 0.16s; }
.journey-step:nth-child(3) { grid-row: 3; margin-top: 0.25rem; --journey-reveal-delay: 0.24s; }
.journey-step:nth-child(4) { grid-row: 4; margin-top: 1.5rem; --journey-reveal-delay: 0.32s; }
.journey-step:nth-child(5) { grid-row: 5; margin-top: 0.35rem; --journey-reveal-delay: 0.4s; }
.journey-step:nth-child(6) { grid-row: 6; margin-top: 1.7rem; --journey-reveal-delay: 0.48s; }
.journey-step:nth-child(7) { grid-row: 7; margin-top: 0.45rem; --journey-reveal-delay: 0.56s; }

.journey-step:nth-child(1),
.journey-step:nth-child(5),
.journey-step:nth-child(7) {
  margin-right: calc(var(--journey-connector) + 3.1rem);
}

.journey-step:nth-child(1)::before,
.journey-step:nth-child(5)::before,
.journey-step:nth-child(7)::before {
  right: calc((var(--journey-connector) + 3.1rem) * -1);
  width: calc(var(--journey-connector) + 3.1rem);
}

.journey-step:nth-child(1)::after,
.journey-step:nth-child(5)::after,
.journey-step:nth-child(7)::after {
  right: calc((var(--journey-connector) + 3.1rem) * -1 - 0.58rem);
}

.journey-step:nth-child(2),
.journey-step:nth-child(4),
.journey-step:nth-child(6) {
  margin-left: calc(var(--journey-connector) + 2.8rem);
}

.journey-step:nth-child(2)::before,
.journey-step:nth-child(4)::before,
.journey-step:nth-child(6)::before {
  left: calc((var(--journey-connector) + 2.8rem) * -1);
  width: calc(var(--journey-connector) + 2.8rem);
}

.journey-step:nth-child(2)::after,
.journey-step:nth-child(4)::after,
.journey-step:nth-child(6)::after {
  left: calc((var(--journey-connector) + 2.8rem) * -1 - 0.58rem);
}

.journey-step__index {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 0.35rem;
  padding: 0.26rem 0.58rem;
  border-radius: var(--radius-pill);
  background: rgba(16, 36, 48, 0.05);
  color: rgba(16, 36, 48, 0.46);
  font-family: var(--font-head);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.journey-step__year {
  display: block;
  margin-bottom: 0.25rem;
  font-family: var(--font-head);
  font-size: clamp(2.4rem, 4.4vw, 3.35rem);
  font-weight: 900;
  letter-spacing: -0.06em;
  line-height: 0.88;
  background: linear-gradient(135deg, #13394f 0%, #0f7e91 55%, #d89f4f 100%);
  background-size: 200% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: journey-year-shift 5.8s linear infinite;
  animation-delay: calc(var(--journey-reveal-delay) + 0.9s);
  animation-play-state: paused;
}

.journey-step__tag {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  width: fit-content;
  margin-bottom: 0.25rem;
  padding: 0.38rem 0.76rem;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(42, 191, 176, 0.1), rgba(216, 159, 79, 0.12));
  color: #1b2e39;
  font-family: var(--font-head);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.journey-step__tag::before {
  content: "";
  width: 0.38rem;
  height: 0.38rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #2abfb0, #d89f4f);
}

.journey-step h3 {
  margin: 0.1rem 0 0;
  max-width: 14ch;
  font-size: 1.15rem;
  line-height: 1.08;
  color: #102430;
}

.journey-step p {
  margin: 0;
  color: rgba(16, 36, 48, 0.78);
  font-size: 0.88rem;
  line-height: 1.7;
}

.journey-step.reveal:not(.visible) {
  opacity: 0;
  box-shadow:
    0 14px 26px rgba(16, 35, 49, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.56);
}

.journey-step:nth-child(odd).reveal:not(.visible) {
  transform: translate3d(-1.55rem, 0.95rem, 0) rotate(-6deg);
}

.journey-step:nth-child(even).reveal:not(.visible) {
  transform: translate3d(1.55rem, 0.95rem, 0) rotate(6deg);
}

.journey-step.reveal.visible {
  opacity: 1;
  transform: rotate(var(--journey-card-tilt));
  transition-delay: var(--journey-reveal-delay);
}

.journey-step.reveal:hover {
  transition-delay: 0s;
}

.journey-roadmap__canvas.reveal.visible .journey-step::before,
.journey-roadmap__canvas.reveal.visible .journey-step::after,
.journey-roadmap__canvas.reveal.visible .journey-step__year {
  animation-play-state: running;
}

.about__cta {
  margin-top: 0;
  align-self: center;
  justify-self: end;
  white-space: nowrap;
}

@media (max-width: 1180px) {
  .about__story {
    width: min(100%, 68rem);
  }

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

  .about__story-top,
  .about__advantage-board {
    grid-template-columns: 1fr;
  }

  .about__story-note {
    max-width: none;
  }

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

  .about__cta {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .journey-roadmap__intro {
    grid-template-columns: 1fr;
    gap: 1.1rem;
    margin-bottom: 2.8rem;
  }

  .journey-roadmap__intro-copy,
  .journey-roadmap .section-subtitle {
    max-width: none;
  }

  .journey-roadmap__summary {
    justify-self: start;
    max-width: 34rem;
  }

  .journey-roadmap__canvas {
    margin-top: 0.45rem;
    padding-top: 4.9rem;
  }

  .journey-roadmap__canvas::before {
    left: 1.75rem;
    top: 4.6rem;
    width: 4rem;
    transform: translateX(-50%);
  }

  .journey-roadmap__road {
    display: none;
  }

  .journey-roadmap__launch {
    left: 1.75rem;
    top: 0.55rem;
    width: 4.5rem;
    height: 4.5rem;
    transform: translateX(-50%) rotate(-8deg);
  }

  .journey-roadmap__launch::after {
    height: 2.5rem;
  }

  .journey-roadmap__track {
    --journey-connector: 1.5rem;
    grid-template-columns: 3.5rem minmax(0, 1fr);
    gap: 1rem;
    padding-top: 3.85rem;
  }

  .journey-roadmap__track::before {
    content: "";
    left: 1.75rem;
    top: 0;
    bottom: 0;
    width: 1.72rem;
    transform: translateX(-50%);
    border-radius: 999px;
    background:
      linear-gradient(90deg, rgba(235, 225, 204, 0.96) 0 0.18rem, rgba(255, 250, 242, 0.98) 0.18rem 0.31rem, rgba(42, 54, 64, 0.98) 0.31rem calc(100% - 0.31rem), rgba(255, 250, 242, 0.98) calc(100% - 0.31rem) calc(100% - 0.18rem), rgba(235, 225, 204, 0.96) calc(100% - 0.18rem) 100%),
      linear-gradient(180deg, #3f4b56 0%, #27333d 55%, #1d2731 100%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.14),
      0 20px 32px rgba(16, 35, 49, 0.12);
    transition:
      opacity 0.8s ease,
      transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .journey-roadmap__track::after {
    content: "";
    left: 1.75rem;
    top: 0;
    bottom: 0;
    width: 0.18rem;
    transform: translateX(-50%);
    background: repeating-linear-gradient(180deg, rgba(255, 235, 171, 0.96) 0 1.3rem, transparent 1.3rem 2.35rem);
    transition: opacity 0.55s ease;
  }

  .journey-roadmap__canvas.reveal:not(.visible) .journey-roadmap__track::before {
    opacity: 0.18;
    transform: translateX(-50%) scaleY(0.08);
    transform-origin: top center;
  }

  .journey-roadmap__canvas.reveal:not(.visible) .journey-roadmap__track::after {
    opacity: 0;
    animation: none;
  }

  .journey-roadmap__canvas.reveal.visible .journey-roadmap__track::before {
    opacity: 1;
    transform: translateX(-50%) scaleY(1);
  }

  .journey-roadmap__canvas.reveal.visible .journey-roadmap__track::after {
    opacity: 1;
    animation: journey-track-lane-flow 2.9s linear infinite;
    animation-delay: 1s;
  }

  .journey-step,
  .journey-step--left,
  .journey-step--right,
  .journey-step:nth-child(odd),
  .journey-step:nth-child(even) {
    grid-column: 2;
    justify-self: stretch;
    margin: 0;
    --journey-card-tilt: 0deg;
    transform: none;
  }

  .journey-step::before {
    top: 2.85rem;
    left: calc(var(--journey-connector) * -1);
    right: auto;
    width: var(--journey-connector);
    height: 12px;
    background:
      repeating-linear-gradient(90deg, transparent 0 1.05rem, rgba(255, 225, 141, 0.96) 1.05rem 1.5rem, transparent 1.5rem 2.45rem),
      linear-gradient(90deg, rgba(230, 219, 197, 0.98) 0 8%, rgba(255, 250, 242, 0.98) 8% 14%, rgba(40, 52, 62, 0.98) 14% 86%, rgba(255, 250, 242, 0.98) 86% 92%, rgba(230, 219, 197, 0.98) 92% 100%);
    background-size: 220% 100%, 100% 100%;
  }

  .journey-step::after {
    top: calc(2.85rem - 0.58rem);
    left: calc((var(--journey-connector) * -1) - 0.58rem);
    right: auto;
  }

  .journey-step:nth-child(odd)::before,
  .journey-step:nth-child(even)::before {
    left: calc(var(--journey-connector) * -1);
    right: auto;
    width: var(--journey-connector);
    background:
      repeating-linear-gradient(90deg, transparent 0 1.05rem, rgba(255, 225, 141, 0.96) 1.05rem 1.5rem, transparent 1.5rem 2.45rem),
      linear-gradient(90deg, rgba(230, 219, 197, 0.98) 0 8%, rgba(255, 250, 242, 0.98) 8% 14%, rgba(40, 52, 62, 0.98) 14% 86%, rgba(255, 250, 242, 0.98) 86% 92%, rgba(230, 219, 197, 0.98) 92% 100%);
    background-size: 220% 100%, 100% 100%;
  }

  .journey-step:nth-child(odd)::after,
  .journey-step:nth-child(even)::after {
    left: calc((var(--journey-connector) * -1) - 0.58rem);
    right: auto;
  }

  .journey-step:nth-child(1),
  .journey-step:nth-child(2),
  .journey-step:nth-child(3),
  .journey-step:nth-child(4),
  .journey-step:nth-child(5),
  .journey-step:nth-child(6),
  .journey-step:nth-child(7) {
    margin: 0;
  }

  .journey-step:nth-child(1)::before,
  .journey-step:nth-child(2)::before,
  .journey-step:nth-child(3)::before,
  .journey-step:nth-child(4)::before,
  .journey-step:nth-child(5)::before,
  .journey-step:nth-child(6)::before,
  .journey-step:nth-child(7)::before {
    left: calc(var(--journey-connector) * -1);
    right: auto;
    width: var(--journey-connector);
  }

  .journey-step:nth-child(1)::after,
  .journey-step:nth-child(2)::after,
  .journey-step:nth-child(3)::after,
  .journey-step:nth-child(4)::after,
  .journey-step:nth-child(5)::after,
  .journey-step:nth-child(6)::after,
  .journey-step:nth-child(7)::after {
    left: calc((var(--journey-connector) * -1) - 0.58rem);
    right: auto;
  }

  .journey-step {
    width: min(100%, 34rem);
    max-width: none;
  }

  .journey-step h3 {
    max-width: none;
  }
}

@media (max-width: 640px) {
  .about__images {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 0.85rem;
  }

  .about__visual--wide,
  .about__visual--portrait,
  .about__visual--detail,
  .about__insight {
    grid-column: auto;
    grid-row: auto;
  }

  .about__visual--wide,
  .about__visual--portrait {
    min-height: 13rem;
  }

  .about__visual--detail {
    min-height: 10rem;
  }

  .about__story,
  .about__content {
    gap: 0.85rem;
    padding: 1.25rem;
  }

  .about__advantage-board {
    padding: 0.9rem;
  }

  .about__story-note {
    padding: 1rem;
  }

  .about__credentials {
    flex-direction: column;
  }

  .about__title {
    max-width: 100%;
    font-size: clamp(1.2rem, 5.2vw, 1.6rem);
  }

  .about__title--hero .about__title-line {
    white-space: normal;
  }

  .about__title-line,
  .about__title .teal-text {
    white-space: normal;
  }

  .about__story {
    padding: 1.15rem 1rem 1.2rem;
    gap: 1rem;
    border-radius: 1.5rem;
  }

  .advantage-signal-grid,
  .about__why-proof,
  .about__insight-metrics {
    grid-template-columns: 1fr;
  }

  .advantage-anchor,
  .advantage-signal {
    padding: 1rem;
  }

  .about__title {
    font-size: clamp(1.2rem, 5.8vw, 1.7rem);
  }

  .about__title::after {
    width: 5rem;
    height: 0.28rem;
    margin-top: 0.8rem;
  }

  .about__text-card p,
  .about__story-note p,
  .advantage-anchor p,
  .advantage-signal p {
    font-size: 0.9rem;
  }

  .advantage-anchor h4 {
    max-width: none;
    font-size: clamp(1.35rem, 6.2vw, 1.8rem);
  }

  .about__why-proof {
    padding: 1rem 1rem 1.05rem;
  }

  .about__cta {
    width: 100%;
    justify-self: start;
    justify-content: center;
  }

  .journey-roadmap__intro .section-badge--portfolio {
    padding: 0.62rem 0.92rem;
    font-size: 0.68rem;
    letter-spacing: 0.14em;
  }

  .journey-roadmap__kicker {
    gap: 0.55rem;
    font-size: 0.68rem;
    letter-spacing: 0.16em;
  }

  .journey-roadmap__kicker::before {
    width: 1.8rem;
  }

  .journey-roadmap .section-title {
    font-size: clamp(2rem, 10vw, 3rem);
  }

  .journey-roadmap .section-subtitle {
    font-size: 0.92rem;
    line-height: 1.72;
  }

  .journey-roadmap__summary {
    padding: 1rem;
    border-radius: 1.45rem;
  }

  .journey-roadmap__summary-range {
    font-size: 1.9rem;
  }

  .journey-roadmap__summary-tags {
    gap: 0.45rem;
  }

  .journey-roadmap__launch {
    left: 1.3rem;
    width: 4.05rem;
    height: 4.05rem;
  }

  .journey-roadmap__track {
    --journey-connector: 1.25rem;
    grid-template-columns: 2.6rem minmax(0, 1fr);
    padding-top: 3.75rem;
  }

  .journey-roadmap__track::before {
    left: 1.3rem;
    width: 1.38rem;
  }

  .journey-roadmap__track::after {
    left: 1.3rem;
    width: 0.14rem;
  }

  .journey-step {
    padding: 1rem 0.95rem 0.95rem;
    border-radius: 1.35rem;
  }

  .journey-step::before {
    top: 2.55rem;
    left: -1.3rem;
    width: 1.3rem;
    height: 10px;
  }

  .journey-step::after {
    top: calc(2.55rem - 0.48rem);
    left: -1.74rem;
    width: 0.9rem;
    height: 0.9rem;
  }

  .journey-step:nth-child(1)::before,
  .journey-step:nth-child(2)::before,
  .journey-step:nth-child(3)::before,
  .journey-step:nth-child(4)::before,
  .journey-step:nth-child(5)::before,
  .journey-step:nth-child(6)::before,
  .journey-step:nth-child(7)::before {
    left: -1.25rem;
    width: 1.25rem;
  }

  .journey-step:nth-child(1)::after,
  .journey-step:nth-child(2)::after,
  .journey-step:nth-child(3)::after,
  .journey-step:nth-child(4)::after,
  .journey-step:nth-child(5)::after,
  .journey-step:nth-child(6)::after,
  .journey-step:nth-child(7)::after {
    left: -1.7rem;
  }

  .journey-step__year {
    font-size: 1.95rem;
  }

  .journey-step h3 {
    font-size: 1rem;
  }

  .journey-step p {
    font-size: 0.78rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .journey-roadmap__canvas::before,
  .journey-roadmap__road-glow,
  .journey-roadmap__road-shadow,
  .journey-roadmap__road-edge,
  .journey-roadmap__road-stripe,
  .journey-roadmap__road-surface,
  .journey-roadmap__road-lane,
  .journey-roadmap__launch,
  .journey-roadmap__launch::after,
  .journey-roadmap__track::before,
  .journey-roadmap__track::after,
  .journey-step,
  .journey-step::before,
  .journey-step::after,
  .journey-step__year {
    animation: none !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
  .journey-roadmap__canvas.reveal::before,
  .journey-roadmap__canvas.reveal:not(.visible)::before,
  .journey-roadmap__canvas.reveal.visible::before {
    opacity: 1;
    transform: translateX(-50%) scale(1);
  }

  .journey-roadmap__canvas.reveal .journey-roadmap__road-glow,
  .journey-roadmap__canvas.reveal .journey-roadmap__road-shadow,
  .journey-roadmap__canvas.reveal .journey-roadmap__road-edge,
  .journey-roadmap__canvas.reveal .journey-roadmap__road-stripe,
  .journey-roadmap__canvas.reveal .journey-roadmap__road-surface {
    opacity: 1;
    stroke-dasharray: none;
    stroke-dashoffset: 0;
  }

  .journey-roadmap__canvas.reveal .journey-roadmap__road-lane {
    opacity: 1;
  }

  .journey-roadmap__canvas.reveal .journey-roadmap__launch {
    opacity: 1;
    transform: translateX(-50%) rotate(-8deg);
  }

  .journey-roadmap__canvas.reveal .journey-roadmap__launch::after {
    opacity: 1;
    transform: translateX(-50%) scaleY(1);
  }

  .journey-roadmap__canvas.reveal .journey-roadmap__track::before {
    opacity: 1;
    transform: translateX(-50%) scaleY(1);
  }

  .journey-roadmap__canvas.reveal .journey-roadmap__track::after {
    opacity: 1;
    background-position: 0 0;
  }

  .journey-step.reveal,
  .journey-step.reveal:not(.visible),
  .journey-step.reveal.visible {
    opacity: 1;
    transform: rotate(var(--journey-card-tilt));
  }
}

.brands__marquee {
  --brands-gap: clamp(1rem, 1.8vw, 1.4rem);
  position: relative;
  overflow: hidden;
  margin-top: 0;
  padding: 1rem 0 0.85rem;
  z-index: 2;
}

.brands__marquee::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(10, 15, 30, 0.98) 0%,
    rgba(10, 15, 30, 0) 10%,
    rgba(10, 15, 30, 0) 90%,
    rgba(10, 15, 30, 0.98) 100%
  );
}

.brands__showcase {
  display: grid;
  gap: 1.35rem;
  margin-top: 1.25rem;
}

.brands__showcase-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.brands__intro {
  max-width: 42rem;
  margin: 0;
  color: rgba(248, 249, 250, 0.76);
  font-size: 0.96rem;
  line-height: 1.7;
  text-wrap: pretty;
}

.brands__signal {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.72rem 1rem;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(7, 16, 29, 0.82), rgba(9, 21, 36, 0.92));
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.12);
  color: #edf4f8;
  font-family: var(--font-head);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.brands__signal-dot {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-light), var(--teal-vivid));
  box-shadow: 0 0 0 0 rgba(42, 191, 176, 0.32);
  animation: brands-signal-pulse 2.4s ease-in-out infinite;
}

.brands__runway {
  position: relative;
  overflow: hidden;
  padding: 1rem 1rem 1.05rem;
  border-radius: 2rem;
  clip-path: polygon(1.75rem 0, calc(100% - 1.75rem) 0, 100% 1.75rem, 100% calc(100% - 1.75rem), calc(100% - 1.75rem) 100%, 1.75rem 100%, 0 calc(100% - 1.75rem), 0 1.75rem);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0, rgba(255, 255, 255, 0.03) 1px, transparent 1px, transparent 88px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0, rgba(255, 255, 255, 0.03) 1px, transparent 1px, transparent 88px),
    radial-gradient(circle at 50% 50%, rgba(42, 191, 176, 0.1), transparent 30%),
    radial-gradient(circle at 50% 15%, rgba(212, 175, 55, 0.12), transparent 24%),
    linear-gradient(180deg, rgba(6, 15, 29, 0.92), rgba(8, 18, 34, 0.96));
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 26px 58px rgba(3, 8, 17, 0.26);
}

.brands__runway::before {
  content: "";
  position: absolute;
  inset: 1.2rem 1rem;
  border-radius: 1.45rem;
  border: 1px solid rgba(255, 255, 255, 0.05);
  pointer-events: none;
}

.brands__runway::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 18%, rgba(42, 191, 176, 0.16), transparent 18%),
    radial-gradient(circle at 88% 78%, rgba(212, 175, 55, 0.14), transparent 18%);
  opacity: 0.8;
}

.brands__runway-line {
  position: absolute;
  left: 1rem;
  right: 1rem;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent);
}

.brands__runway-line--top {
  top: 1.1rem;
}

.brands__runway-line--bottom {
  bottom: 1.1rem;
}

.brands__runway-core {
  position: absolute;
  inset: 50% auto auto 50%;
  width: min(54vw, 36rem);
  height: 7rem;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.16), rgba(42, 191, 176, 0.08) 35%, transparent 72%);
  filter: blur(18px);
  opacity: 0.95;
}

.brands__runway-meta {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.65rem;
  margin-bottom: 0.3rem;
}

.brands__runway-meta span {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 0.82rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(248, 249, 250, 0.82);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.brands__marquee::after {
  content: "";
  position: absolute;
  top: 0.35rem;
  bottom: 0.35rem;
  left: -16%;
  width: 28%;
  z-index: 1;
  pointer-events: none;
  opacity: 0.55;
  filter: blur(2px);
  background: linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, 0.14) 45%, transparent 82%);
  animation: brands-glint 8s linear infinite;
}

.brands__marquee-track {
  display: flex;
  align-items: center;
  gap: var(--brands-gap);
  width: max-content;
  animation: brands-marquee 28s linear infinite;
  will-change: transform;
  transform-style: preserve-3d;
  padding-inline: 0.25rem;
}

.brands__marquee:hover .brands__marquee-track {
  animation-play-state: paused;
}

.brand-rail__item {
  position: relative;
  flex: 0 0 clamp(152px, 13vw, 190px);
  min-height: 104px;
  padding: 1.15rem 1.05rem 1.05rem;
  border-radius: 1.55rem;
  clip-path: polygon(1rem 0, 100% 0, 100% calc(100% - 1rem), calc(100% - 1rem) 100%, 0 100%, 0 1rem);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.04) !important;
  box-shadow: none;
  transform-origin: center;
  transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, background 0.35s ease;
  animation: brands-card-float-a 6.8s ease-in-out infinite;
}

.brand-rail__item::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 1.45rem;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), transparent 45%, rgba(42, 191, 176, 0.08));
}

.brand-rail__item::after {
  content: "";
  position: absolute;
  inset: auto 18% -42% 18%;
  height: 42%;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(42, 191, 176, 0.2), transparent 72%);
  opacity: 0.55;
  filter: blur(14px);
  transform: scaleX(0.9);
}

.brand-rail__item:nth-child(4n + 2) {
  animation-name: brands-card-float-b;
  animation-duration: 7.6s;
  animation-delay: -1.1s;
}

.brand-rail__item:nth-child(4n + 3) {
  animation-name: brands-card-float-c;
  animation-duration: 6.2s;
  animation-delay: -1.8s;
}

.brand-rail__item:nth-child(4n + 4) {
  animation-name: brands-card-float-d;
  animation-duration: 7.1s;
  animation-delay: -2.2s;
}

.brand-rail__item:hover {
  animation-play-state: paused;
  transform: translateY(-7px) scale(1.035);
  border-color: rgba(212, 175, 55, 0.28) !important;
  background: transparent;
  box-shadow: 0 0 24px rgba(42, 191, 176, 0.1);
}

.brand-rail__logo {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  max-width: 142px;
  max-height: 46px;
  object-fit: contain;
  opacity: 1;
  filter: none;
  transition: transform 0.35s ease, filter 0.35s ease, opacity 0.35s ease;
}

.brand-rail__item:hover .brand-rail__logo {
  opacity: 1;
  filter: none;
  transform: scale(1.05);
}

.brands__runway-footer {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.15rem;
  padding: 0.85rem 0.2rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.brands__runway-note {
  max-width: 34rem;
  margin: 0;
  color: rgba(248, 249, 250, 0.7);
  font-size: 0.84rem;
  line-height: 1.65;
}

.brands__runway-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.6rem;
}

.brands__runway-stats span {
  display: inline-flex;
  align-items: center;
  padding: 0.58rem 0.88rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #f3f7fb;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

@keyframes brands-marquee {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(calc(-50% - (var(--brands-gap) / 2)), 0, 0);
  }
}

@keyframes brands-glint {
  from {
    transform: translateX(0) skewX(-18deg);
  }
  to {
    transform: translateX(440%) skewX(-18deg);
  }
}

@keyframes brands-signal-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(42, 191, 176, 0.32);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(42, 191, 176, 0);
  }
}

@keyframes brands-card-float-a {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  25% {
    transform: translate3d(0, -7px, 0) rotate(-1.2deg);
  }
  50% {
    transform: translate3d(0, 3px, 0) rotate(0.8deg);
  }
  75% {
    transform: translate3d(0, -4px, 0) rotate(-0.4deg);
  }
}

@keyframes brands-card-float-b {
  0%, 100% {
    transform: translate3d(0, 1px, 0) rotate(0.7deg);
  }
  30% {
    transform: translate3d(0, -6px, 0) rotate(-0.9deg);
  }
  60% {
    transform: translate3d(0, 5px, 0) rotate(0.3deg);
  }
}

@keyframes brands-card-float-c {
  0%, 100% {
    transform: translate3d(0, -2px, 0) rotate(-0.8deg);
  }
  35% {
    transform: translate3d(0, 4px, 0) rotate(0.8deg);
  }
  70% {
    transform: translate3d(0, -6px, 0) rotate(-0.2deg);
  }
}

@keyframes brands-card-float-d {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(0.9deg);
  }
  20% {
    transform: translate3d(0, -5px, 0) rotate(0deg);
  }
  55% {
    transform: translate3d(0, 5px, 0) rotate(-0.9deg);
  }
  80% {
    transform: translate3d(0, -3px, 0) rotate(0.3deg);
  }
}

@media (max-width: 980px) {
  .brands__showcase-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .brands__signal {
    align-self: flex-start;
  }

  .brands__runway-footer {
    flex-direction: column;
    align-items: flex-start;
  }

  .brands__runway-stats {
    justify-content: flex-start;
  }
}

@media (max-width: 640px) {
  .brands__showcase {
    gap: 1rem;
    margin-top: 1rem;
  }

  .brands__showcase-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .brands__intro {
    font-size: 0.92rem;
  }

  .brands__signal {
    width: 100%;
    justify-content: center;
    white-space: normal;
    text-align: center;
  }

  .brands__runway {
    padding: 0.9rem 0.7rem;
    border-radius: 1.5rem;
    clip-path: none;
  }

  .brands__marquee {
    padding: 0.75rem 0;
  }

  .brands__marquee-track {
    animation-duration: 22s;
  }

  .brand-rail__item {
    flex-basis: 142px;
    min-height: 86px;
    padding: 0.95rem 0.85rem;
    clip-path: none;
  }

  .brand-rail__logo {
    max-width: 118px;
    max-height: 40px;
  }

  .brands__runway-meta {
    justify-content: flex-start;
    margin-bottom: 0.15rem;
  }

  .brands__runway-footer {
    gap: 0.8rem;
    padding-top: 0.75rem;
  }

  .brands__runway-note {
    font-size: 0.8rem;
  }

  .brands__runway-stats {
    justify-content: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .brands__marquee {
    overflow-x: auto;
    padding-bottom: 0.35rem;
  }

  .brands__marquee::after {
    display: none;
  }

  .brands__marquee-track {
    animation: none;
    padding-right: var(--brands-gap);
  }

  .brands__marquee-track .brand-rail__item[aria-hidden="true"] {
    display: none;
  }

  .brand-rail__item {
    animation: none;
  }

  .brands__signal-dot {
    animation: none;
  }

  .brands__light-line::after {
    animation: none;
    left: 40%;
    opacity: 0.7;
  }
}

.brands__showcase {
  gap: 0.9rem;
  position: relative;
  isolation: isolate;
}

.brands__signal {
  box-shadow: none;
}

.brands__signal-dot {
  box-shadow: none;
  animation: none;
}

.brands__runway {
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
  clip-path: none;
  position: relative;
}

.brands__runway::before,
.brands__runway::after,
.brands__runway-line,
.brands__runway-core,
.brands__runway-meta,
.brands__runway-footer {
  display: none !important;
}

.brands__marquee {
  padding: 0.2rem 0;
  position: relative;
  z-index: 2;
}

.brands__light-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

.brands__light-line--top {
  top: -0.08rem;
}

.brands__light-line--bottom {
  bottom: -0.08rem;
}

.brands__light-line::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(41, 194, 201, 0.16) 18%, rgba(41, 194, 201, 0.3) 50%, rgba(41, 194, 201, 0.16) 82%, transparent 100%);
  opacity: 0.75;
}

.brands__light-line::after {
  content: "";
  position: absolute;
  top: 50%;
  left: -18%;
  width: 18%;
  height: 7px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(111, 240, 255, 0.96) 35%, rgba(255, 255, 255, 0.92) 52%, rgba(41, 194, 201, 0.84) 68%, rgba(255, 255, 255, 0));
  filter: blur(2px);
  box-shadow: 0 0 12px rgba(41, 194, 201, 0.22);
  animation: brands-light-travel 5.8s cubic-bezier(.37, .05, .34, 1) infinite;
}

.brands__light-line--bottom::after {
  animation-duration: 6.6s;
  animation-delay: -2.2s;
}

.brands__light-line--top::after {
  animation-delay: -0.7s;
}

.brand-rail__item {
  min-height: 74px;
  padding: 0.55rem 0.8rem;
  background: transparent;
  border: none !important;
  box-shadow: none;
  clip-path: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.brand-rail__item::before,
.brand-rail__item::after {
  content: none;
}

.brand-rail__item:hover {
  background: transparent;
  border: none !important;
  box-shadow: none;
  transform: translateY(-4px) scale(1.02);
}

@media (max-width: 640px) {
  .brands__marquee {
    padding: 0.15rem 0;
  }

  .brands__light-line::after {
    width: 24%;
    height: 6px;
  }

  .brand-rail__item {
    min-height: 66px;
    padding: 0.45rem 0.6rem;
  }
}

.brands__marquee::before {
  display: none !important;
}

.brands .section-title {
  text-shadow: none;
}

.brands .title-motion__accent,
.brands .title-motion .teal-text {
  background: none !important;
  color: #43c0c7 !important;
  -webkit-text-fill-color: currentColor !important;
  animation: none !important;
  text-shadow: 0 8px 18px rgba(67, 192, 199, 0.16);
}

.automation-features .title-motion__accent,
.automation-features .title-motion .teal-text,
.brands .title-motion__accent,
.brands .title-motion .teal-text,
.stats .title-motion__accent,
.stats .title-motion .teal-text,
.features .title-motion__accent,
.features .title-motion .teal-text,
.scene-tabs .title-motion__accent,
.scene-tabs .title-motion .teal-text,
.testimonials .title-motion__accent,
.testimonials .title-motion .teal-text,
.blog .title-motion__accent,
.blog .title-motion .teal-text {
  background: none !important;
  color: #43c0c7 !important;
  -webkit-text-fill-color: currentColor !important;
  animation: none !important;
  filter: none !important;
  text-shadow: 0 8px 18px rgba(67, 192, 199, 0.16);
}

.title-motion--light .title-motion__part {
  color: #fffaf2;
  -webkit-text-fill-color: currentColor;
}

.title-motion--dark .title-motion__part {
  color: #1b1712;
  -webkit-text-fill-color: currentColor;
}

.brands__showcase::before,
.brands__showcase::after {
  content: "";
  position: absolute;
  top: -0.9rem;
  width: 8rem;
  height: 5rem;
  pointer-events: none;
  z-index: -1;
  opacity: 0.55;
  filter: blur(20px);
}

.brands__showcase::before {
  left: 0.5rem;
  background: radial-gradient(circle at top left, rgba(0, 0, 0, 0.12), rgba(41, 194, 201, 0.08) 42%, transparent 72%);
}

.brands__showcase::after {
  right: 0.5rem;
  background: radial-gradient(circle at top right, rgba(0, 0, 0, 0.12), rgba(41, 194, 201, 0.08) 42%, transparent 72%);
}

@keyframes brands-light-travel {
  0% {
    left: -20%;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  100% {
    left: 102%;
    opacity: 0;
  }
}

.brands__showcase-head {
  align-items: end;
  margin-bottom: 0.1rem;
}

.brands__showcase-copy {
  display: grid;
  gap: 0.42rem;
  max-width: 46rem;
}

.brands__eyebrow {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 0.38rem 0.7rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(248, 249, 250, 0.82);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.brands__intro {
  margin: 0;
  max-width: 42rem;
  color: rgba(248, 249, 250, 0.78);
}

.brands__compat-block {
  display: grid;
  gap: 1rem;
  padding: 1.1rem 1.15rem;
  border-radius: 1.5rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.brands__compat-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  text-align: center;
}

.brands__compat-kicker {
  --title-dot-size: .46rem;
  --title-dot-ring: 0 0 0 4px rgba(41, 194, 201, 0.12);
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  width: fit-content;
  margin: 0 auto;
  padding: 0.72rem 1.65rem;
  border-radius: 999px;
  border: 1px solid rgba(222, 209, 190, 0.78);
  background: linear-gradient(180deg, rgba(255, 253, 248, 0.98), rgba(246, 239, 229, 0.96));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    0 12px 24px rgba(20, 19, 18, 0.08);
  color: #181411;
  font-family: var(--font-head);
  font-size: 0.84rem;
  font-weight: 800;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  line-height: 1;
  text-shadow: none;
  cursor: pointer;
  transition:
    background 0.24s ease,
    color 0.24s ease,
    border-color 0.24s ease,
    box-shadow 0.24s ease,
    transform 0.2s ease;
}

.brands__compat-kicker::before,
.brands__compat-kicker::after {
  content: "";
  display: block;
  position: static;
  inset: auto;
  width: var(--title-dot-size);
  height: var(--title-dot-size);
  flex: 0 0 var(--title-dot-size);
  border-radius: 50%;
  background: currentColor !important;
  background-image: none !important;
  box-shadow: var(--title-dot-ring) !important;
  transform: none !important;
  animation: none !important;
  pointer-events: none;
  opacity: .92;
}

.brands__compat-kicker:hover,
.brands__compat-kicker:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(41, 194, 201, 0.34);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(247, 241, 232, 0.98));
  color: #111111;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 14px 28px rgba(20, 19, 18, 0.12);
  text-shadow: none;
}

.brands__compat-kicker:focus-visible {
  outline: none;
}

.brands__compat-kicker[aria-pressed="true"] {
  border-color: rgba(41, 194, 201, 0.32);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(244, 238, 228, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 14px 28px rgba(20, 19, 18, 0.12);
  color: #111111;
  text-shadow: none;
}

.brands__compat-copy {
  max-width: 34rem;
  margin: 0;
  color: rgba(248, 249, 250, 0.7);
  font-size: 0.9rem;
  line-height: 1.65;
}

.brands__compat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.85rem;
}

.brands__compat-grid .works-logo {
  width: 100%;
  min-width: 0;
  min-height: 4.4rem;
  padding: 0.95rem 1.15rem;
  border-radius: 1.2rem;
  border: 1px solid rgba(222, 209, 190, 0.52);
  background: linear-gradient(180deg, rgba(255, 253, 248, 0.96), rgba(248, 243, 234, 0.92));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 10px 22px rgba(20, 19, 18, 0.08);
}

.brands__compat-grid .works-logo:hover {
  transform: translateY(-2px);
  border-color: rgba(41, 194, 201, 0.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.98), 0 14px 26px rgba(20, 19, 18, 0.12);
}

.brands__compat-grid .works-logo__img,
.brands__compat-grid .works-logo--google .works-logo__img,
.brands__compat-grid .works-logo--homekit .works-logo__img,
.brands__compat-grid .works-logo--alexa .works-logo__img,
.brands__compat-grid .works-logo--knx .works-logo__img {
  width: min(100%, 10rem);
  height: 2.35rem;
  max-width: 10rem;
}

.brands__compat-grid .works-logo--google .works-logo__img {
  width: min(100%, 11.1rem);
  height: 2.65rem;
  max-width: 11.1rem;
}

.brands__compat-grid .works-logo--homekit .works-logo__img {
  width: min(100%, 11.2rem);
  height: 2.75rem;
  max-width: 11.2rem;
}

@media (max-width: 900px) {
  .brands__compat-head {
    flex-direction: column;
    align-items: center;
  }

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

@media (max-width: 640px) {
  .brands__showcase-head {
    margin-bottom: 0;
  }

  .brands__showcase-copy {
    gap: 0.35rem;
  }

  .brands__eyebrow {
    font-size: 0.64rem;
    letter-spacing: 0.12em;
  }

  .brands__compat-block {
    padding: 0.95rem;
    gap: 0.85rem;
  }

  .brands__compat-kicker {
    --title-dot-size: .4rem;
    width: min(100%, 16rem);
    padding: 0.7rem 1.2rem;
    font-size: 0.74rem;
    letter-spacing: 0.24em;
  }

  .brands__compat-kicker::before,
  .brands__compat-kicker::after {
    flex-basis: var(--title-dot-size);
  }

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

  .brands__compat-grid .works-logo {
    min-height: 4rem;
    padding: 0.85rem 1rem;
  }

  .brands__compat-grid .works-logo__img,
  .brands__compat-grid .works-logo--google .works-logo__img,
  .brands__compat-grid .works-logo--homekit .works-logo__img,
  .brands__compat-grid .works-logo--alexa .works-logo__img,
  .brands__compat-grid .works-logo--knx .works-logo__img {
    width: min(100%, 9rem);
    height: 2.1rem;
    max-width: 9rem;
  }

  .brands__compat-grid .works-logo--google .works-logo__img {
    width: min(100%, 9.8rem);
    height: 2.3rem;
    max-width: 9.8rem;
  }

  .brands__compat-grid .works-logo--homekit .works-logo__img {
    width: min(100%, 10rem);
    height: 2.45rem;
    max-width: 10rem;
  }
}

/* Performance Tune */
body {
  background-attachment: scroll;
}

.cursor-glow,
.ambient-glow,
.hero__particles,
.hero__cursor-glow {
  display: none !important;
}

.automation-features,
.portfolio,
.about,
.brands,
.automation-marquee,
.features,
.scene-tabs,
.testimonials,
.blog {
  background-attachment: scroll !important;
}

.automation-features {
  background: linear-gradient(180deg, #08111c 0%, #0b1523 100%) !important;
}

.portfolio {
  background: linear-gradient(180deg, #09121e 0%, #0c1726 100%) !important;
}

.about {
  background: linear-gradient(180deg, #08111c 0%, #0b1523 52%, #091320 100%) !important;
}

.brands {
  background: linear-gradient(180deg, #08111c 0%, #0d1624 100%) !important;
}

.automation-marquee {
  background: linear-gradient(180deg, #091320 0%, #0c1726 100%) !important;
}

.features {
  background: linear-gradient(180deg, #09131f 0%, #0d1827 100%) !important;
}

.scene-tabs {
  background: linear-gradient(180deg, #0c1527 0%, #08111f 100%) !important;
}

.testimonials {
  background: linear-gradient(180deg, #09131f 0%, #0d1827 100%) !important;
}

.blog {
  background: linear-gradient(180deg, #09121e 0%, #0d1624 100%) !important;
}

/* Journey roadmap redesign */
@keyframes journey-sequence-drift {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -42; }
}

@keyframes journey-sequence-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

@keyframes journey-sequence-icon {
  0%, 100% { transform: translateY(-50%) scale(1); }
  50% { transform: translateY(calc(-50% - 5px)) scale(1.04); }
}

@keyframes journey-sequence-node {
  0%, 100% {
    box-shadow:
      0 0 0 0 rgba(28, 197, 205, 0.16),
      0 0 0 0.4rem rgba(255, 255, 255, 0.72),
      0 10px 22px rgba(17, 29, 40, 0.16);
  }
  50% {
    box-shadow:
      0 0 0 0.95rem rgba(28, 197, 205, 0.08),
      0 0 0 0.4rem rgba(255, 255, 255, 0.8),
      0 14px 28px rgba(17, 29, 40, 0.18);
  }
}

@keyframes journey-sequence-aura {
  0%, 100% { opacity: 0.22; }
  50% { opacity: 0.46; }
}

@keyframes journey-sequence-sheen {
  0%, 100% { transform: translate3d(0, 0, 0); opacity: 0.72; }
  50% { transform: translate3d(0.5rem, -0.5rem, 0); opacity: 0.96; }
}

.journey-roadmap {
  position: relative;
  padding: 3.15rem 1.2rem 4.3rem;
  scroll-margin-top: 9rem;
}

.journey-roadmap__container {
  width: min(100%, 90rem);
  margin: 0 auto;
}

.journey-roadmap__canvas {
  position: relative;
  margin: 0 auto;
  padding: 2.25rem 1.55rem 2.15rem;
  border-radius: 2.75rem;
  border: 1px solid rgba(171, 190, 204, 0.38);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.84), rgba(236, 244, 246, 0.56)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.12));
  box-shadow:
    0 28px 64px rgba(20, 24, 29, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  overflow: hidden;
  isolation: isolate;
}

.journey-roadmap__canvas::before {
  content: "";
  position: absolute;
  inset: 1rem;
  z-index: 0;
  border-radius: 2.15rem;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.12), transparent 32%, rgba(33, 117, 153, 0.08) 58%, transparent 84%),
    repeating-linear-gradient(90deg, rgba(100, 109, 118, 0.05) 0 1px, transparent 1px 6.5rem),
    repeating-linear-gradient(180deg, rgba(100, 109, 118, 0.045) 0 1px, transparent 1px 6.5rem);
  opacity: 0.86;
  pointer-events: none;
}

.journey-roadmap__canvas::after {
  content: "";
  position: absolute;
  inset: auto -10% -20% -10%;
  z-index: 0;
  height: 64%;
  background:
    radial-gradient(circle at 12% 18%, rgba(28, 197, 205, 0.24), transparent 34%),
    radial-gradient(circle at 84% 32%, rgba(79, 105, 184, 0.18), transparent 30%),
    radial-gradient(circle at 50% 84%, rgba(255, 255, 255, 0.34), transparent 38%);
  filter: blur(30px);
  opacity: 0.96;
  pointer-events: none;
}

.journey-roadmap__guide {
  position: absolute;
  inset: 1.2rem auto 1.2rem 50%;
  z-index: 1;
  width: min(16rem, 19vw);
  height: calc(100% - 2.4rem);
  transform: translateX(-50%);
  overflow: visible;
  pointer-events: none;
}

.journey-roadmap__guide-aura {
  fill: none;
  stroke: url(#journeyGuideGradient);
  stroke-width: 17;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  filter: blur(7px);
}

.journey-roadmap__guide-path {
  fill: none;
  stroke: url(#journeyGuideGradient);
  stroke-width: 5.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 0.1 12;
  opacity: 0;
}

.journey-roadmap__guide-core {
  fill: none;
  stroke: rgba(255, 255, 255, 0.92);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 0.1 12;
  opacity: 0;
}

.journey-roadmap__guide-cap {
  opacity: 0;
  transform-origin: center;
  transform-box: fill-box;
  filter: drop-shadow(0 0 16px rgba(32, 183, 197, 0.35));
}

.journey-roadmap__canvas.reveal:not(.visible) .journey-roadmap__guide-aura,
.journey-roadmap__canvas.reveal:not(.visible) .journey-roadmap__guide-path,
.journey-roadmap__canvas.reveal:not(.visible) .journey-roadmap__guide-core {
  opacity: 0;
  stroke-dashoffset: 26;
}

.journey-roadmap__canvas.reveal.visible .journey-roadmap__guide-aura {
  opacity: 0.26;
  stroke-dashoffset: 0;
  animation:
    journey-sequence-drift 16s linear infinite,
    journey-sequence-aura 5.8s ease-in-out infinite;
}

.journey-roadmap__canvas.reveal.visible .journey-roadmap__guide-path,
.journey-roadmap__canvas.reveal.visible .journey-roadmap__guide-core {
  opacity: 1;
  stroke-dashoffset: 0;
  animation: journey-sequence-drift 15s linear infinite;
}

.journey-roadmap__canvas.reveal:not(.visible) .journey-roadmap__guide-cap {
  opacity: 0;
  transform: scale(0.4);
}

.journey-roadmap__canvas.reveal.visible .journey-roadmap__guide-cap {
  opacity: 1;
  transform: scale(1);
  transition:
    opacity 0.7s ease,
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.journey-roadmap__road,
.journey-roadmap__launch {
  display: none !important;
}

.journey-roadmap__track {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 1.18rem;
  max-width: 78rem;
  margin: 0 auto;
  padding: 0.35rem 0;
}

.journey-roadmap__track::before,
.journey-roadmap__track::after {
  content: none;
}

.journey-step,
.journey-step--left,
.journey-step--right,
.journey-roadmap__track > .journey-step:nth-child(odd),
.journey-roadmap__track > .journey-step:nth-child(even),
.journey-roadmap__track > .journey-step:nth-child(n) {
  --journey-order: 1;
  --journey-accent: #22c8d0;
  --journey-pill-start: #16334b;
  --journey-pill-end: #1f7bb4;
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 18.15rem 1.75rem 18.15rem;
  justify-content: center;
  align-items: center;
  gap: 0;
  width: min(100%, 38.05rem);
  max-width: 38.05rem;
  min-height: 12.45rem;
  margin: 0 auto;
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
  overflow: visible;
  text-align: initial;
}

.journey-step::before {
  content: "";
  position: absolute;
  top: 50%;
  width: 3.5rem;
  height: 1px;
  border-radius: 999px;
  opacity: 0.9;
  pointer-events: none;
  transform: translateY(-50%);
  filter: drop-shadow(0 0 10px rgba(34, 200, 208, 0.22));
}

.journey-step::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 0.16rem;
  background: rgba(255, 255, 255, 0.86);
  opacity: 0.82;
  pointer-events: none;
  transform: translateY(-50%) rotate(45deg);
  box-shadow: 0 0 14px rgba(34, 200, 208, 0.22);
}

.journey-step--left::before {
  right: calc(50% + 1.2rem);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.92), var(--journey-accent));
}

.journey-step--left::after {
  right: calc(50% + 4.35rem);
}

.journey-step--right::before {
  left: calc(50% + 1.2rem);
  background: linear-gradient(90deg, var(--journey-accent), rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.04));
}

.journey-step--right::after {
  left: calc(50% + 4.35rem);
}

.journey-roadmap__track > .journey-step:nth-child(1) {
  --journey-order: 1;
  --journey-accent: #20c7d1;
  --journey-pill-start: #12314a;
  --journey-pill-end: #1d88be;
}

.journey-roadmap__track > .journey-step:nth-child(2) {
  --journey-order: 2;
  --journey-accent: #2695d2;
  --journey-pill-start: #152f49;
  --journey-pill-end: #356b9d;
}

.journey-roadmap__track > .journey-step:nth-child(3) {
  --journey-order: 3;
  --journey-accent: #3a739d;
  --journey-pill-start: #102738;
  --journey-pill-end: #1c496c;
}

.journey-roadmap__track > .journey-step:nth-child(4) {
  --journey-order: 4;
  --journey-accent: #7486b8;
  --journey-pill-start: #192d43;
  --journey-pill-end: #445784;
}

.journey-roadmap__track > .journey-step:nth-child(5) {
  --journey-order: 5;
  --journey-accent: #22b8bb;
  --journey-pill-start: #123245;
  --journey-pill-end: #1b7a9e;
}

.journey-roadmap__track > .journey-step:nth-child(6) {
  --journey-order: 6;
  --journey-accent: #4f86ae;
  --journey-pill-start: #132b3d;
  --journey-pill-end: #31567b;
}

.journey-roadmap__track > .journey-step:nth-child(7) {
  --journey-order: 7;
  --journey-accent: #2fb9c4;
  --journey-pill-start: #163145;
  --journey-pill-end: #286792;
}

.journey-step.reveal {
  opacity: 0;
  transition:
    opacity 0.76s ease,
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.journey-step--left.reveal {
  transform: translate3d(-2rem, 0.6rem, 0);
}

.journey-step--right.reveal {
  transform: translate3d(2rem, 0.6rem, 0);
}

.journey-step.reveal.visible {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--journey-order) * 0.08s);
}

.journey-step__stage {
  position: relative;
  display: grid;
  width: fit-content;
  min-width: 7.3rem;
  gap: 0.14rem;
  padding: 0.95rem 1rem 0.94rem;
  border-radius: 1.55rem;
  align-content: center;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(232, 240, 244, 0.62));
  border: 1px solid rgba(165, 181, 194, 0.38);
  box-shadow:
    0 18px 32px rgba(22, 30, 36, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.journey-step__stage::before {
  content: "";
  position: absolute;
  top: 0.72rem;
  width: 2.3rem;
  height: 0.22rem;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--journey-accent), rgba(255, 255, 255, 0.24));
}

.journey-step__stage::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 1.8rem;
  height: 1px;
  background: linear-gradient(90deg, rgba(90, 100, 111, 0.12), rgba(90, 100, 111, 0.76));
  transform: translateY(-50%);
}

.journey-step--left .journey-step__stage {
  grid-column: 3;
  justify-self: start;
  text-align: left;
  border-radius: 1.65rem 1.65rem 1.1rem 1.65rem;
}

.journey-step--left .journey-step__stage::before {
  left: 1rem;
}

.journey-step--left .journey-step__stage::after {
  left: -1.8rem;
}

.journey-step--right .journey-step__stage {
  grid-column: 1;
  justify-self: end;
  text-align: right;
  border-radius: 1.65rem 1.65rem 1.65rem 1.1rem;
}

.journey-step--right .journey-step__stage::before {
  right: 1rem;
}

.journey-step--right .journey-step__stage::after {
  right: -1.8rem;
}

.journey-step__stage-text {
  color: rgba(83, 92, 102, 0.76);
  font-family: var(--font-head);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.journey-step__stage-number {
  color: var(--journey-accent);
  font-family: var(--font-head);
  font-size: clamp(2.2rem, 4.2vw, 3.05rem);
  font-weight: 900;
  line-height: 0.92;
  letter-spacing: -0.06em;
}

.journey-step__node {
  position: relative;
  grid-column: 2;
  justify-self: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.94);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(236, 239, 242, 0.94));
  box-shadow:
    0 0 0 0.48rem rgba(255, 255, 255, 0.74),
    0 12px 24px rgba(17, 29, 40, 0.18);
}

.journey-step__node::before {
  content: "";
  position: absolute;
  inset: 0.24rem;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.96), var(--journey-accent) 72%);
}

.journey-step__node::after {
  content: "";
  position: absolute;
  inset: -0.58rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.46);
}

.journey-step__pill {
  position: relative;
  display: flex;
  align-items: center;
  width: 17.6rem;
  min-height: 12.2rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 32%),
    linear-gradient(145deg, rgba(7, 17, 27, 0.98) 0%, rgba(13, 28, 40, 0.96) 22%, var(--journey-pill-start) 54%, var(--journey-pill-end) 100%);
  box-shadow:
    0 28px 52px rgba(10, 17, 25, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -16px 26px rgba(0, 0, 0, 0.12);
  isolation: isolate;
  overflow: hidden;
  transition:
    transform 0.28s ease,
    box-shadow 0.28s ease,
    filter 0.28s ease;
}

.journey-step__pill::before {
  content: "";
  position: absolute;
  top: 50%;
  width: 2.75rem;
  height: 2px;
  border-radius: 999px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.88), var(--journey-accent));
  opacity: 0.9;
  z-index: 1;
}

.journey-step__pill::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background:
    linear-gradient(125deg, rgba(255, 255, 255, 0.16), transparent 34%),
    radial-gradient(circle at 10% 0%, rgba(255, 255, 255, 0.22), transparent 30%),
    radial-gradient(circle at 100% 100%, rgba(116, 184, 231, 0.14), transparent 38%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 4.8rem),
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 56%);
  opacity: 0.9;
  pointer-events: none;
  z-index: 0;
}

.journey-step:hover .journey-step__pill {
  transform: translateY(-4px);
  filter: saturate(1.06);
  box-shadow:
    0 28px 52px rgba(10, 17, 25, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -14px 24px rgba(0, 0, 0, 0.08);
}

.journey-step:hover .journey-step__icon {
  box-shadow:
    0 20px 32px rgba(13, 29, 42, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.98);
}

.journey-step--left .journey-step__pill {
  grid-column: 1;
  justify-self: end;
  padding: 1.55rem 5.8rem 1.5rem 1.55rem;
  border-radius: 2.4rem 2.8rem 2.3rem 1.2rem;
}

.journey-step--left .journey-step__pill::before {
  right: -1.45rem;
}

.journey-step--right .journey-step__pill {
  grid-column: 3;
  justify-self: start;
  padding: 1.55rem 1.55rem 1.5rem 5.8rem;
  border-radius: 2.8rem 2.4rem 1.2rem 2.3rem;
}

.journey-step--right .journey-step__pill::before {
  left: -1.45rem;
}

.journey-step__icon {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 4.4rem;
  height: 4.4rem;
  border: 1px solid rgba(255, 255, 255, 0.86);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(236, 241, 245, 0.92));
  box-shadow:
    0 20px 34px rgba(13, 29, 42, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.98);
  transform: translateY(-50%);
}

.journey-step__icon::before {
  content: "";
  position: absolute;
  inset: -0.48rem;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, 0.28);
  filter: drop-shadow(0 0 12px rgba(34, 200, 208, 0.1));
}

.journey-step__icon::after {
  content: "";
  position: absolute;
  inset: 0.44rem;
  border-radius: inherit;
  border: 1px solid rgba(65, 82, 96, 0.1);
}

.journey-step__icon svg {
  position: relative;
  z-index: 1;
  width: 1.82rem;
  height: 1.82rem;
  stroke: #5b6e7d;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.journey-step--left .journey-step__icon {
  right: -1.15rem;
  border-radius: 1.6rem 1.15rem 1.6rem 1.15rem;
}

.journey-step--right .journey-step__icon {
  left: -1.15rem;
  border-radius: 1.15rem 1.6rem 1.15rem 1.6rem;
}

.journey-step__content {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0.74rem;
}

.journey-step__content::before {
  content: "";
  width: 3.15rem;
  height: 0.2rem;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--journey-accent), rgba(255, 255, 255, 0.16));
}

.journey-step__content::after {
  content: "";
  position: absolute;
  top: 0.08rem;
  width: 2.9rem;
  height: 2.1rem;
  opacity: 0.18;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0)),
    radial-gradient(circle, rgba(255, 255, 255, 0.96) 0, rgba(255, 255, 255, 0.96) 1px, transparent 1.2px) 0 0 / 0.55rem 0.55rem;
}

.journey-step--left .journey-step__content::after {
  right: 0;
}

.journey-step--right .journey-step__content::after {
  left: 0;
}

.journey-step__eyebrow {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.journey-step__year {
  margin: 0;
  color: rgba(255, 255, 255, 0.92);
  font-family: var(--font-head);
  font-size: 0.66rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  animation: none;
}

.journey-step__tag {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  margin: 0;
  padding: 0.34rem 0.72rem;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.07));
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.journey-step__tag::before {
  content: "";
  width: 0.32rem;
  height: 0.32rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.88);
}

.journey-step h3 {
  margin: 0;
  max-width: 12.6ch;
  color: #ffffff;
  font-size: 1.22rem;
  line-height: 1.16;
  letter-spacing: -0.03em;
}

.journey-step p {
  margin: 0;
  max-width: 20rem;
  color: rgba(235, 241, 245, 0.84);
  font-size: 0.82rem;
  line-height: 1.66;
}

.journey-roadmap__canvas.reveal.visible .journey-step__pill {
  animation: journey-sequence-float 6.2s ease-in-out infinite;
  animation-delay: calc(var(--journey-order) * 0.28s);
}

.journey-roadmap__canvas.reveal.visible .journey-step__pill::after {
  animation: journey-sequence-sheen 8.5s ease-in-out infinite;
  animation-delay: calc(var(--journey-order) * 0.32s);
}

.journey-roadmap__canvas.reveal.visible .journey-step__icon {
  animation: journey-sequence-icon 5.2s ease-in-out infinite;
  animation-delay: calc(var(--journey-order) * 0.18s);
}

.journey-roadmap__canvas.reveal.visible .journey-step__node {
  animation: journey-sequence-node 2.8s ease-in-out infinite;
  animation-delay: calc(var(--journey-order) * 0.16s);
}

@media (max-width: 1120px) {
  .journey-roadmap {
    padding: 2.6rem 1rem 3.8rem;
  }

  .journey-roadmap__canvas {
    padding: 1.9rem 1.05rem 1.85rem;
    border-radius: 2.35rem;
  }

  .journey-roadmap__guide {
    width: min(13rem, 16vw);
  }

  .journey-step,
  .journey-step--left,
  .journey-step--right,
  .journey-roadmap__track > .journey-step:nth-child(odd),
  .journey-roadmap__track > .journey-step:nth-child(even),
  .journey-roadmap__track > .journey-step:nth-child(n) {
    grid-template-columns: 16rem 1.45rem 16rem;
    width: min(100%, 33.45rem);
    max-width: 33.45rem;
    min-height: 11.55rem;
  }

  .journey-step__stage {
    min-width: 6.45rem;
    padding: 0.84rem 0.88rem 0.84rem;
  }

  .journey-step__stage-number {
    font-size: clamp(1.95rem, 4vw, 2.7rem);
  }

  .journey-step__pill {
    width: 15.25rem;
    min-height: 11.15rem;
  }

  .journey-step--left .journey-step__pill {
    padding: 1.36rem 5.2rem 1.34rem 1.36rem;
  }

  .journey-step--right .journey-step__pill {
    padding: 1.36rem 1.36rem 1.34rem 5.2rem;
  }

  .journey-step__icon {
    width: 4rem;
    height: 4rem;
  }

  .journey-step__content::after {
    width: 2.55rem;
    height: 1.9rem;
  }

  .journey-step__icon svg {
    width: 1.66rem;
    height: 1.66rem;
  }
}

@media (max-width: 860px) {
  .journey-roadmap {
    padding: 1.9rem 0.9rem 3rem;
  }

  .journey-roadmap__canvas {
    padding: 1.35rem 0.9rem 1.35rem;
    border-radius: 1.9rem;
  }

  .journey-roadmap__canvas::before {
    inset: 0.8rem;
    border-radius: 1.5rem;
  }

  .journey-roadmap__guide {
    display: none;
  }

  .journey-roadmap__track {
    gap: 0.95rem;
    max-width: 40rem;
  }

  .journey-roadmap__track::before {
    content: "";
    position: absolute;
    left: 5.15rem;
    top: 0.8rem;
    bottom: 0.8rem;
    width: 0.62rem;
    transform: translateX(-50%);
    border-radius: 999px;
    background:
      linear-gradient(180deg, rgba(30, 195, 203, 0.16), rgba(81, 105, 157, 0.12)),
      radial-gradient(circle, rgba(255, 255, 255, 0.92) 0, rgba(255, 255, 255, 0.92) 2px, transparent 2.2px) center top / 0.62rem 1.15rem repeat-y;
    box-shadow: 0 0 18px rgba(28, 197, 205, 0.1);
  }

  .journey-step,
  .journey-step--left,
  .journey-step--right,
  .journey-roadmap__track > .journey-step:nth-child(odd),
  .journey-roadmap__track > .journey-step:nth-child(even),
  .journey-roadmap__track > .journey-step:nth-child(n) {
    grid-template-columns: 4.6rem minmax(0, 1fr);
    width: 100%;
    max-width: none;
    min-height: auto;
    gap: 1rem;
  }

  .journey-step::before,
  .journey-step::after {
    content: none;
  }

  .journey-step__stage,
  .journey-step--left .journey-step__stage,
  .journey-step--right .journey-step__stage {
    grid-column: 1;
    justify-self: end;
    text-align: right;
  }

  .journey-step__stage::after,
  .journey-step__stage::before,
  .journey-step--left .journey-step__stage::after,
  .journey-step--left .journey-step__stage::before,
  .journey-step--right .journey-step__stage::after,
  .journey-step--right .journey-step__stage::before {
    content: none;
  }

  .journey-step__stage {
    min-width: 4.4rem;
    padding: 0.6rem 0.6rem 0.68rem;
    border-radius: 1.2rem;
  }

  .journey-step__stage-text {
    font-size: 0.58rem;
  }

  .journey-step__stage-number {
    font-size: 2rem;
  }

  .journey-step__node {
    position: absolute;
    left: 5.15rem;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 1.28rem;
    height: 1.28rem;
  }

  .journey-step__node::before {
    inset: 0.2rem;
  }

  .journey-step__pill,
  .journey-step--left .journey-step__pill,
  .journey-step--right .journey-step__pill {
    grid-column: 2;
    justify-self: stretch;
    width: 100%;
    min-height: 9.3rem;
    border-radius: 1.9rem 1.9rem 1.3rem 1.3rem;
    padding: 1.12rem 1.15rem 1.12rem 4.95rem;
  }

  .journey-step__pill::before,
  .journey-step--left .journey-step__pill::before,
  .journey-step--right .journey-step__pill::before {
    left: -0.9rem;
    right: auto;
    width: 1.45rem;
  }

  .journey-step__icon,
  .journey-step--left .journey-step__icon,
  .journey-step--right .journey-step__icon {
    left: -0.45rem;
    right: auto;
    width: 3.75rem;
    height: 3.75rem;
    border-radius: 1.2rem 1.45rem 1.2rem 1.45rem;
  }

  .journey-step__icon svg {
    width: 1.56rem;
    height: 1.56rem;
  }

  .journey-step h3,
  .journey-step p {
    max-width: none;
  }
}

@media (max-width: 560px) {
  .journey-roadmap {
    padding: 1.45rem 0.7rem 2.45rem;
  }

  .journey-roadmap__canvas {
    padding: 1.05rem 0.72rem 1.12rem;
    border-radius: 1.65rem;
  }

  .journey-roadmap__track {
    gap: 0.8rem;
  }

  .journey-roadmap__track::before {
    left: 4.45rem;
    width: 0.5rem;
  }

  .journey-step,
  .journey-step--left,
  .journey-step--right,
  .journey-roadmap__track > .journey-step:nth-child(odd),
  .journey-roadmap__track > .journey-step:nth-child(even),
  .journey-roadmap__track > .journey-step:nth-child(n) {
    grid-template-columns: 3.95rem minmax(0, 1fr);
    gap: 0.82rem;
  }

  .journey-step__stage {
    min-width: 3.85rem;
    padding: 0.52rem 0.5rem 0.58rem;
    border-radius: 1rem;
  }

  .journey-step__stage::before {
    top: 0.5rem;
    width: 1.55rem;
    height: 0.16rem;
  }

  .journey-step__stage-text {
    font-size: 0.54rem;
  }

  .journey-step__stage-number {
    font-size: 1.66rem;
  }

  .journey-step__node {
    left: 4.45rem;
    width: 1.1rem;
    height: 1.1rem;
  }

  .journey-step__pill,
  .journey-step--left .journey-step__pill,
  .journey-step--right .journey-step__pill {
    min-height: 8.45rem;
    border-radius: 1.6rem 1.6rem 1.1rem 1.1rem;
    padding: 0.95rem 0.95rem 0.95rem 4.05rem;
  }

  .journey-step__icon,
  .journey-step--left .journey-step__icon,
  .journey-step--right .journey-step__icon {
    left: -0.28rem;
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 1rem 1.2rem 1rem 1.2rem;
  }

  .journey-step__icon svg {
    width: 1.38rem;
    height: 1.38rem;
  }

  .journey-step__eyebrow {
    gap: 0.35rem;
  }

  .journey-step__content {
    gap: 0.58rem;
  }

  .journey-step__content::before {
    width: 2.2rem;
    height: 0.16rem;
  }

  .journey-step__content::after {
    width: 2rem;
    height: 1.5rem;
  }

  .journey-step__year,
  .journey-step__tag {
    font-size: 0.56rem;
  }

  .journey-step h3 {
    font-size: 0.96rem;
  }

  .journey-step p {
    font-size: 0.72rem;
    line-height: 1.5;
  }
}

@media (prefers-reduced-motion: reduce) {
  .journey-roadmap__guide-aura,
  .journey-roadmap__guide-path,
  .journey-roadmap__guide-core,
  .journey-roadmap__guide-cap,
  .journey-step,
  .journey-step__pill,
  .journey-step__pill::after,
  .journey-step__icon,
  .journey-step__node {
    animation: none !important;
    transition: none !important;
  }

  .journey-roadmap__canvas.reveal .journey-roadmap__guide-aura,
  .journey-roadmap__canvas.reveal.visible .journey-roadmap__guide-aura {
    opacity: 0.26;
    stroke-dashoffset: 0;
  }

  .journey-roadmap__canvas.reveal .journey-roadmap__guide-path,
  .journey-roadmap__canvas.reveal.visible .journey-roadmap__guide-path,
  .journey-roadmap__canvas.reveal .journey-roadmap__guide-core,
  .journey-roadmap__canvas.reveal.visible .journey-roadmap__guide-core {
    opacity: 1;
    stroke-dashoffset: 0;
  }

  .journey-roadmap__canvas.reveal .journey-roadmap__guide-cap,
  .journey-roadmap__canvas.reveal.visible .journey-roadmap__guide-cap {
    opacity: 1;
    transform: scale(1);
  }

  .journey-step.reveal,
  .journey-step.reveal.visible {
    opacity: 1;
    transform: none;
  }
}

/* Journey roadmap format refresh */
.journey-roadmap__guide {
  display: none;
}

.journey-roadmap__canvas {
  padding: 2.15rem 1.15rem 2.2rem;
  border-radius: 2.5rem;
  overflow: hidden;
}

.journey-roadmap__track {
  max-width: 60rem;
  gap: 1.08rem;
  padding: 0.35rem 0;
}

.journey-roadmap__track::before {
  content: "";
  position: absolute;
  left: 7.1rem;
  top: 0.9rem;
  bottom: 0.9rem;
  width: 0.72rem;
  transform: translateX(-50%);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(31, 200, 207, 0.18), rgba(80, 108, 172, 0.16)),
    radial-gradient(circle, rgba(255, 255, 255, 0.95) 0, rgba(255, 255, 255, 0.95) 2px, transparent 2.3px) center top / 0.72rem 1.08rem repeat-y;
  box-shadow: 0 0 18px rgba(31, 200, 207, 0.14);
  z-index: 0;
  pointer-events: none;
}

.journey-roadmap__track::after {
  content: "";
  position: absolute;
  left: 7.1rem;
  top: 1.2rem;
  bottom: 1.2rem;
  width: 2.6rem;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(41, 204, 211, 0.18), rgba(255, 255, 255, 0));
  filter: blur(18px);
  opacity: 0.58;
  pointer-events: none;
}

.journey-step,
.journey-step--left,
.journey-step--right,
.journey-roadmap__track > .journey-step:nth-child(odd),
.journey-roadmap__track > .journey-step:nth-child(even),
.journey-roadmap__track > .journey-step:nth-child(n) {
  grid-template-columns: 5.9rem 1.45rem minmax(0, 1fr);
  width: 100%;
  max-width: 60rem;
  min-height: auto;
  gap: 1.15rem;
}

.journey-step::before,
.journey-step::after {
  content: none;
}

.journey-step__stage,
.journey-step--left .journey-step__stage,
.journey-step--right .journey-step__stage {
  grid-column: 1;
  justify-self: end;
  text-align: right;
  min-width: 5.7rem;
  padding: 0.82rem 0.82rem 0.86rem;
  border-radius: 1.45rem;
}

.journey-step__stage::before,
.journey-step--left .journey-step__stage::before,
.journey-step--right .journey-step__stage::before {
  left: auto;
  right: 0.82rem;
  width: 1.95rem;
}

.journey-step__stage::after,
.journey-step--left .journey-step__stage::after,
.journey-step--right .journey-step__stage::after {
  content: none;
}

.journey-step__node {
  position: absolute;
  left: 7.1rem;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 1.42rem;
  height: 1.42rem;
  box-shadow:
    0 0 0 0.42rem rgba(255, 255, 255, 0.78),
    0 12px 24px rgba(17, 29, 40, 0.16);
}

.journey-step__node::before {
  inset: 0.22rem;
}

.journey-step__node::after {
  inset: -0.52rem;
}

.journey-step__pill,
.journey-step--left .journey-step__pill,
.journey-step--right .journey-step__pill {
  grid-column: 3;
  justify-self: stretch;
  width: 100%;
  min-height: 11.35rem;
  padding: 1.38rem 1.45rem 1.38rem 5.45rem;
  border-radius: 2.15rem 2.6rem 2.1rem 1.15rem;
}

.journey-roadmap__track > .journey-step:nth-child(even) .journey-step__pill {
  border-radius: 2.6rem 2.15rem 1.15rem 2.1rem;
}

.journey-step__pill::before,
.journey-step--left .journey-step__pill::before,
.journey-step--right .journey-step__pill::before {
  left: -0.95rem;
  right: auto;
  width: 1.55rem;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.88), var(--journey-accent));
}

.journey-step__pill::after {
  background:
    linear-gradient(130deg, rgba(255, 255, 255, 0.15), transparent 38%),
    radial-gradient(circle at 100% 100%, rgba(116, 184, 231, 0.13), transparent 38%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 4.2rem),
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent 58%);
}

.journey-step__icon,
.journey-step--left .journey-step__icon,
.journey-step--right .journey-step__icon {
  left: -0.38rem;
  right: auto;
  width: 4.05rem;
  height: 4.05rem;
  border-radius: 1.15rem 1.45rem 1.15rem 1.45rem;
}

.journey-roadmap__track > .journey-step:nth-child(even) .journey-step__icon {
  border-radius: 1.45rem 1.15rem 1.45rem 1.15rem;
}

.journey-step__icon::before,
.journey-step__icon::after {
  border-radius: inherit;
}

.journey-step__content {
  gap: 0.7rem;
}

.journey-step__content::before {
  width: 3rem;
  height: 0.18rem;
}

.journey-step__content::after {
  left: auto;
  right: 0;
  width: 2.6rem;
  height: 1.85rem;
}

.journey-roadmap__track > .journey-step:nth-child(even) .journey-step__content::after {
  left: 0;
  right: auto;
}

.journey-step__tag {
  padding: 0.32rem 0.72rem;
}

.journey-step h3 {
  max-width: 18ch;
  font-size: 1.2rem;
}

.journey-step p {
  max-width: 34rem;
  font-size: 0.82rem;
}

@media (max-width: 1120px) {
  .journey-roadmap__canvas {
    padding: 1.95rem 1rem 2rem;
  }

  .journey-roadmap__track::before {
    left: 6.65rem;
  }

  .journey-roadmap__track::after {
    left: 6.65rem;
  }

  .journey-step,
  .journey-step--left,
  .journey-step--right,
  .journey-roadmap__track > .journey-step:nth-child(odd),
  .journey-roadmap__track > .journey-step:nth-child(even),
  .journey-roadmap__track > .journey-step:nth-child(n) {
    grid-template-columns: 5.45rem 1.35rem minmax(0, 1fr);
    gap: 1rem;
  }

  .journey-step__node {
    left: 6.65rem;
  }

  .journey-step__pill,
  .journey-step--left .journey-step__pill,
  .journey-step--right .journey-step__pill {
    min-height: 10.95rem;
    padding: 1.3rem 1.32rem 1.3rem 5.1rem;
  }
}

@media (max-width: 860px) {
  .journey-roadmap__canvas {
    padding: 1.35rem 0.82rem 1.45rem;
  }

  .journey-roadmap__track {
    gap: 0.95rem;
  }

  .journey-roadmap__track::before {
    left: 5rem;
    width: 0.58rem;
  }

  .journey-roadmap__track::after {
    left: 5rem;
  }

  .journey-step,
  .journey-step--left,
  .journey-step--right,
  .journey-roadmap__track > .journey-step:nth-child(odd),
  .journey-roadmap__track > .journey-step:nth-child(even),
  .journey-roadmap__track > .journey-step:nth-child(n) {
    grid-template-columns: 4.45rem 1rem minmax(0, 1fr);
    gap: 0.9rem;
  }

  .journey-step__stage,
  .journey-step--left .journey-step__stage,
  .journey-step--right .journey-step__stage {
    min-width: 4.25rem;
    padding: 0.58rem 0.58rem 0.62rem;
  }

  .journey-step__stage::before,
  .journey-step--left .journey-step__stage::before,
  .journey-step--right .journey-step__stage::before {
    width: 1.45rem;
    height: 0.16rem;
    right: 0.58rem;
    top: 0.48rem;
  }

  .journey-step__node {
    left: 5rem;
    width: 1.22rem;
    height: 1.22rem;
  }

  .journey-step__pill,
  .journey-step--left .journey-step__pill,
  .journey-step--right .journey-step__pill {
    min-height: 9.1rem;
    padding: 1.06rem 1.05rem 1.06rem 4.62rem;
    border-radius: 1.8rem 2rem 1.25rem 1.1rem;
  }

  .journey-roadmap__track > .journey-step:nth-child(even) .journey-step__pill {
    border-radius: 2rem 1.8rem 1.1rem 1.25rem;
  }

  .journey-step__icon,
  .journey-step--left .journey-step__icon,
  .journey-step--right .journey-step__icon {
    left: -0.28rem;
    width: 3.58rem;
    height: 3.58rem;
  }

  .journey-step h3 {
    max-width: none;
    font-size: 1rem;
  }
}

@media (max-width: 560px) {
  .journey-roadmap__canvas {
    padding: 1.05rem 0.7rem 1.12rem;
    border-radius: 1.75rem;
  }

  .journey-roadmap__track::before {
    left: 4.35rem;
    width: 0.48rem;
  }

  .journey-roadmap__track::after {
    left: 4.35rem;
    width: 2rem;
  }

  .journey-step,
  .journey-step--left,
  .journey-step--right,
  .journey-roadmap__track > .journey-step:nth-child(odd),
  .journey-roadmap__track > .journey-step:nth-child(even),
  .journey-roadmap__track > .journey-step:nth-child(n) {
    grid-template-columns: 3.85rem 0.88rem minmax(0, 1fr);
    gap: 0.8rem;
  }

  .journey-step__stage,
  .journey-step--left .journey-step__stage,
  .journey-step--right .journey-step__stage {
    min-width: 3.7rem;
    padding: 0.5rem 0.48rem 0.55rem;
    border-radius: 1rem;
  }

  .journey-step__stage-number {
    font-size: 1.64rem;
  }

  .journey-step__node {
    left: 4.35rem;
    width: 1.02rem;
    height: 1.02rem;
  }

  .journey-step__pill,
  .journey-step--left .journey-step__pill,
  .journey-step--right .journey-step__pill {
    min-height: 8.35rem;
    padding: 0.9rem 0.92rem 0.9rem 3.95rem;
    border-radius: 1.45rem 1.65rem 1.05rem 0.96rem;
  }

  .journey-roadmap__track > .journey-step:nth-child(even) .journey-step__pill {
    border-radius: 1.65rem 1.45rem 0.96rem 1.05rem;
  }

  .journey-step__icon,
  .journey-step--left .journey-step__icon,
  .journey-step--right .journey-step__icon {
    left: -0.18rem;
    width: 3.05rem;
    height: 3.05rem;
  }

  .journey-step__content {
    gap: 0.56rem;
  }

  .journey-step__content::before {
    width: 2.15rem;
  }

  .journey-step__content::after {
    width: 1.85rem;
    height: 1.35rem;
  }
}

/* Business roadmap */
.business-roadmap {
  position: relative;
  padding: 6.5rem 1rem 7rem;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 14%, rgba(94, 179, 183, 0.14), transparent 18rem),
    radial-gradient(circle at 82% 16%, rgba(212, 175, 55, 0.12), transparent 16rem),
    linear-gradient(180deg, #ede5d6 0%, #f8f4ec 46%, #efe6d7 100%);
}

.business-roadmap::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.25), transparent 34%),
    radial-gradient(circle at 50% 0, rgba(255, 255, 255, 0.38), transparent 28%);
  pointer-events: none;
}

.business-roadmap__container {
  position: relative;
  z-index: 1;
  width: min(1180px, calc(100% - 2rem));
  margin: 0 auto;
}

.business-roadmap__header {
  margin-bottom: 2.75rem;
}

.business-roadmap .section-title {
  color: #1c2c3a;
}

.business-roadmap .section-subtitle {
  max-width: 48rem;
  color: rgba(28, 44, 58, 0.72);
}

.business-roadmap__panel {
  position: relative;
  padding: 3.15rem 2.4rem;
  border-radius: 2rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(246, 243, 237, 0.92));
  border: 1px solid rgba(34, 49, 63, 0.08);
  box-shadow:
    0 2rem 4rem rgba(34, 47, 58, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
  overflow: hidden;
  isolation: isolate;
}

.business-roadmap__panel::before {
  content: "";
  position: absolute;
  inset: 1rem;
  border-radius: 1.5rem;
  border: 1px solid rgba(34, 49, 63, 0.06);
  pointer-events: none;
}

.business-roadmap__line {
  position: absolute;
  top: 2.4rem;
  bottom: 2.4rem;
  left: 50%;
  width: 0.32rem;
  transform: translateX(-50%);
  clip-path: inset(0 0 100% 0 round 999px);
  background: repeating-linear-gradient(
    180deg,
    rgba(72, 77, 84, 0.78) 0 0.35rem,
    transparent 0.35rem 0.95rem
  );
  transition: clip-path 1.2s cubic-bezier(.22, 1, .36, 1);
}

.business-roadmap__line::before {
  content: "";
  position: absolute;
  inset: 0;
  filter: blur(12px);
  opacity: 0;
  background: linear-gradient(180deg, rgba(94, 179, 183, 0.8), rgba(94, 179, 183, 0));
  transition: opacity 0.8s ease 0.5s;
}

.business-roadmap__items {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 1.5rem;
}

.business-roadmap__item {
  --business-roadmap-delay: 0s;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 23rem) 6.35rem minmax(0, 23rem);
  column-gap: 0;
  justify-content: center;
  align-items: center;
  min-height: 6.8rem;
  opacity: 1;
  transition:
    opacity 0.8s cubic-bezier(.22, 1, .36, 1),
    transform 0.8s cubic-bezier(.22, 1, .36, 1);
}

.business-roadmap__item::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.78rem;
  height: 0.78rem;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #ffffff;
  z-index: 3;
  box-shadow:
    0 0 0 0.32rem rgba(94, 179, 183, 0.12),
    0 0.65rem 1.15rem rgba(34, 47, 58, 0.12);
}

.business-roadmap__content {
  width: 100%;
}

.business-roadmap__item--left .business-roadmap__content {
  grid-column: 1;
  justify-self: end;
  padding-right: 0.8rem;
}

.business-roadmap__item--right .business-roadmap__content {
  grid-column: 3;
  justify-self: start;
  padding-left: 0.8rem;
}

.business-roadmap__item--left .business-roadmap__year {
  grid-column: 2;
  justify-self: center;
  --business-roadmap-year-base: translateX(0) rotate(0deg);
  transform: var(--business-roadmap-year-base);
  border-radius: 1.35rem;
}

.business-roadmap__item--right .business-roadmap__year {
  grid-column: 2;
  justify-self: center;
  --business-roadmap-year-base: translateX(0) rotate(0deg);
  transform: var(--business-roadmap-year-base);
  border-radius: 1.35rem;
}

.business-roadmap__card {
  position: relative;
  width: 100%;
  min-height: 6.1rem;
  padding: 1rem 4.6rem 1rem 1.25rem;
  border-radius: 999px;
  border: 1px solid rgba(110, 118, 126, 0.14);
  background: linear-gradient(180deg, #f1f2f4 0%, #dadddf 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.94),
    0 1rem 2rem rgba(32, 43, 53, 0.12);
  overflow: visible;
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    opacity 0.65s ease;
}

.business-roadmap__item--right .business-roadmap__card {
  padding: 1rem 1.25rem 1rem 4.6rem;
}

.business-roadmap__item--left .business-roadmap__card {
  transform-origin: right center;
}

.business-roadmap__item--right .business-roadmap__card {
  transform-origin: left center;
}

.business-roadmap__item--left .business-roadmap__card::before,
.business-roadmap__item--right .business-roadmap__card::before {
  content: "";
  position: absolute;
  top: 50%;
  width: 1.05rem;
  height: 0.24rem;
  transform: translateY(-50%);
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(214, 217, 221, 0.15), rgba(181, 187, 194, 0.92));
  box-shadow: 0 0 0 1px rgba(143, 151, 160, 0.12);
}

.business-roadmap__item--left .business-roadmap__card::before {
  right: -0.82rem;
}

.business-roadmap__item--right .business-roadmap__card::before {
  left: -0.82rem;
}

.business-roadmap__card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(120deg, transparent 24%, rgba(255, 255, 255, 0.58) 50%, transparent 76%);
  transform: translateX(-130%);
  opacity: 0.75;
  pointer-events: none;
}

.business-roadmap__text {
  display: grid;
  gap: 0.22rem;
}

.business-roadmap__eyebrow {
  display: inline-block;
  color: #7c8690;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.business-roadmap__card h3 {
  margin: 0;
  color: #213142;
  font-family: var(--font-head);
  font-size: 1rem;
  line-height: 1.05;
}

.business-roadmap__card p {
  margin: 0;
  max-width: 16rem;
  color: rgba(33, 49, 66, 0.74);
  font-size: 0.76rem;
  line-height: 1.44;
}

.business-roadmap__icon {
  position: absolute;
  top: 50%;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  transform: translateY(-50%);
  border-radius: 50%;
  box-shadow:
    0 0.8rem 1.45rem rgba(31, 43, 53, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    opacity 0.6s ease;
}

.business-roadmap__item--left .business-roadmap__icon {
  right: -0.18rem;
}

.business-roadmap__item--right .business-roadmap__icon {
  left: -0.18rem;
}

.business-roadmap__icon svg {
  width: 1.4rem;
  height: 1.4rem;
  fill: none;
  stroke: #ffffff;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
}

.business-roadmap__icon--cyan {
  background: linear-gradient(135deg, #40cfe0, #149db3);
}

.business-roadmap__icon--blue {
  background: linear-gradient(135deg, #4d66dc, #3048b4);
}

.business-roadmap__icon--lime {
  background: linear-gradient(135deg, #c7d649, #91a51d);
}

.business-roadmap__icon--gold {
  background: linear-gradient(135deg, #f1bd4a, #d88f14);
}

.business-roadmap__icon--teal {
  background: linear-gradient(135deg, #4bdac9, #18a79b);
}

.business-roadmap__icon--orange {
  background: linear-gradient(135deg, #ffb154, #ee7f20);
}

.business-roadmap__icon--plum {
  background: linear-gradient(135deg, #7e73dd, #564ec2);
}

.business-roadmap__year {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 0.16rem;
  justify-items: center;
  width: 6.35rem;
  min-width: 6.35rem;
  padding: 0.72rem 0.85rem 0.82rem;
  background: linear-gradient(180deg, #ffffff 0%, #f0eeec 100%);
  color: rgba(145, 149, 156, 0.84);
  font-family: var(--font-head);
  text-align: center;
  box-shadow: 0 1.1rem 2rem rgba(27, 37, 45, 0.16);
  transition:
    transform 0.65s cubic-bezier(.22, 1, .36, 1),
    opacity 0.65s ease,
    box-shadow 0.35s ease;
}

.business-roadmap__year::before {
  content: "";
  position: absolute;
  inset: 0.22rem;
  border: 1px solid rgba(153, 158, 165, 0.16);
  border-radius: inherit;
}

.business-roadmap__year-label,
.business-roadmap__year-value {
  position: relative;
  z-index: 1;
}

.business-roadmap__year-label {
  color: #91a2af;
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  line-height: 1;
  text-transform: uppercase;
}

.business-roadmap__year-value {
  color: rgba(104, 112, 121, 0.92);
  font-family: var(--font-head);
  font-size: clamp(1.55rem, 2vw, 2rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
}

.business-roadmap__item:nth-child(1) { --business-roadmap-delay: 0.06s; }
.business-roadmap__item:nth-child(2) { --business-roadmap-delay: 0.14s; }
.business-roadmap__item:nth-child(3) { --business-roadmap-delay: 0.22s; }
.business-roadmap__item:nth-child(4) { --business-roadmap-delay: 0.3s; }
.business-roadmap__item:nth-child(5) { --business-roadmap-delay: 0.38s; }
.business-roadmap__item:nth-child(6) { --business-roadmap-delay: 0.46s; }
.business-roadmap__item:nth-child(7) { --business-roadmap-delay: 0.54s; }

.business-roadmap__panel.reveal:not(.visible) .business-roadmap__line {
  clip-path: inset(0 0 100% 0 round 999px);
}

.business-roadmap__panel.reveal.visible .business-roadmap__line {
  clip-path: inset(0 0 0 0 round 999px);
  animation: business-roadmap-line-flow 8s linear infinite 1.1s;
}

.business-roadmap__panel.reveal.visible .business-roadmap__line::before {
  opacity: 0.28;
  animation: business-roadmap-line-glow 4.6s ease-in-out infinite 1.1s;
}

.business-roadmap__item.reveal:not(.visible) {
  opacity: 0;
}

.business-roadmap__item--left.reveal:not(.visible) {
  transform: translate3d(-2.2rem, 1rem, 0);
}

.business-roadmap__item--right.reveal:not(.visible) {
  transform: translate3d(2.2rem, 1rem, 0);
}

.business-roadmap__item.reveal:not(.visible) .business-roadmap__card {
  opacity: 0;
  transform: scale(0.76);
}

.business-roadmap__item.reveal:not(.visible) .business-roadmap__year {
  opacity: 0;
  transform: var(--business-roadmap-year-base) scale(0.82);
}

.business-roadmap__item.reveal:not(.visible) .business-roadmap__icon {
  opacity: 0;
  transform: translateY(-50%) scale(0.68);
}

.business-roadmap__item.reveal.visible {
  opacity: 1;
  transform: none;
  transition-delay: var(--business-roadmap-delay);
}

.business-roadmap__item.reveal.visible .business-roadmap__card {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--business-roadmap-delay) + 0.06s);
  animation: business-roadmap-card-pop 0.9s cubic-bezier(.18, 1, .32, 1) both;
  animation-delay: calc(var(--business-roadmap-delay) + 0.04s);
}

.business-roadmap__item.reveal.visible .business-roadmap__year {
  opacity: 1;
  transform: var(--business-roadmap-year-base);
  transition-delay: calc(var(--business-roadmap-delay) + 0.12s);
}

.business-roadmap__item.reveal.visible .business-roadmap__icon {
  opacity: 1;
  transform: translateY(-50%) scale(1);
  transition-delay: calc(var(--business-roadmap-delay) + 0.16s);
}

.business-roadmap__panel.reveal.visible .business-roadmap__item::after {
  animation: business-roadmap-node-pulse 2.8s ease-in-out infinite;
  animation-delay: calc(var(--business-roadmap-delay) + 0.9s);
}

.business-roadmap__panel.reveal.visible .business-roadmap__year {
  animation: business-roadmap-tag-float 5.8s ease-in-out infinite;
  animation-delay: calc(var(--business-roadmap-delay) + 1.1s);
}

.business-roadmap__panel.reveal.visible .business-roadmap__icon {
  animation: business-roadmap-icon-bob 4.6s ease-in-out infinite;
  animation-delay: calc(var(--business-roadmap-delay) + 1s);
}

.business-roadmap__panel.reveal.visible .business-roadmap__card::after {
  animation: business-roadmap-sheen 8.8s ease-in-out infinite;
  animation-delay: calc(var(--business-roadmap-delay) + 1.4s);
}

.business-roadmap__item:hover .business-roadmap__card {
  transform: scale(1.055);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    0 1.45rem 2.5rem rgba(32, 43, 53, 0.18);
}

.business-roadmap__item:hover .business-roadmap__year {
  box-shadow: 0 1.25rem 2.2rem rgba(27, 37, 45, 0.2);
}

.business-roadmap__item:hover .business-roadmap__icon {
  box-shadow:
    0 1rem 1.7rem rgba(31, 43, 53, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.34);
}

@keyframes business-roadmap-line-flow {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 0 1.3rem;
  }
}

@keyframes business-roadmap-line-glow {
  0%,
  100% {
    opacity: 0.2;
  }
  50% {
    opacity: 0.4;
  }
}

@keyframes business-roadmap-node-pulse {
  0%,
  100% {
    box-shadow:
      0 0 0 0.32rem rgba(94, 179, 183, 0.12),
      0 0.65rem 1.15rem rgba(34, 47, 58, 0.12);
  }
  50% {
    box-shadow:
      0 0 0 0.55rem rgba(94, 179, 183, 0.18),
      0 0.85rem 1.35rem rgba(34, 47, 58, 0.16);
  }
}

@keyframes business-roadmap-tag-float {
  0%,
  100% {
    transform: var(--business-roadmap-year-base) translateY(0);
  }
  50% {
    transform: var(--business-roadmap-year-base) translateY(-0.28rem);
  }
}

@keyframes business-roadmap-card-pop {
  0% {
    opacity: 0;
    transform: scale(0.76);
  }
  62% {
    opacity: 1;
    transform: scale(1.06);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes business-roadmap-icon-bob {
  0%,
  100% {
    transform: translateY(-50%) translateY(0) scale(1);
  }
  50% {
    transform: translateY(-50%) translateY(-0.25rem) scale(1.04);
  }
}

@keyframes business-roadmap-sheen {
  0%,
  68%,
  100% {
    transform: translateX(-130%);
  }
  78%,
  88% {
    transform: translateX(130%);
  }
}

@media (max-width: 1040px) {
  .business-roadmap__panel {
    padding: 2.6rem 1.6rem;
  }

  .business-roadmap__item {
    grid-template-columns: minmax(0, 20rem) 5.95rem minmax(0, 20rem);
  }

  .business-roadmap__content {
    width: 100%;
  }

  .business-roadmap__item--left .business-roadmap__content {
    padding-right: 0.7rem;
  }

  .business-roadmap__item--right .business-roadmap__content {
    padding-left: 0.7rem;
  }

  .business-roadmap__year {
    width: 5.95rem;
    min-width: 5.95rem;
  }
}

@media (max-width: 860px) {
  .business-roadmap {
    padding: 5rem 0.75rem 5.6rem;
  }

  .business-roadmap__container {
    width: min(100%, calc(100% - 1rem));
  }

  .business-roadmap__panel {
    padding: 1.5rem 0.8rem 1.4rem;
    border-radius: 1.5rem;
  }

  .business-roadmap__panel::before {
    inset: 0.55rem;
    border-radius: 1.15rem;
  }

  .business-roadmap__line {
    left: 2.15rem;
    top: 1.35rem;
    bottom: 1.35rem;
    transform: none;
  }

  .business-roadmap__items {
    gap: 1rem;
  }

  .business-roadmap__item {
    grid-template-columns: 4.15rem minmax(0, 1fr);
    gap: 0.8rem;
    min-height: auto;
  }

  .business-roadmap__item::after {
    left: 2.31rem;
  }

  .business-roadmap__item--left .business-roadmap__content,
  .business-roadmap__item--right .business-roadmap__content {
    grid-column: 2;
    justify-self: stretch;
    padding: 0;
  }

  .business-roadmap__item--left .business-roadmap__year,
  .business-roadmap__item--right .business-roadmap__year {
    --business-roadmap-year-base: translateX(0) rotate(0deg);
    grid-column: 1;
    justify-self: center;
    width: 100%;
    padding: 0.72rem 0.3rem;
    transform: var(--business-roadmap-year-base);
    border-radius: 1rem;
  }

  .business-roadmap__card,
  .business-roadmap__item--right .business-roadmap__card {
    width: 100%;
    min-height: auto;
    padding: 0.9rem 1rem 0.9rem 4rem;
    border-radius: 1.35rem;
  }

  .business-roadmap__item--left .business-roadmap__card::before,
  .business-roadmap__item--right .business-roadmap__card::before {
    width: 0.95rem;
    left: -0.78rem;
    right: auto;
  }

  .business-roadmap__item--left .business-roadmap__icon,
  .business-roadmap__item--right .business-roadmap__icon {
    left: 0.7rem;
    right: auto;
    width: 2.7rem;
    height: 2.7rem;
  }

  .business-roadmap__card p {
    max-width: none;
  }
}

@media (max-width: 560px) {
  .business-roadmap {
    padding: 4.2rem 0.55rem 4.8rem;
  }

  .business-roadmap__panel {
    padding: 1.2rem 0.55rem 1.05rem;
    border-radius: 1.2rem;
  }

  .business-roadmap__item {
    grid-template-columns: 3.55rem minmax(0, 1fr);
    gap: 0.65rem;
  }

  .business-roadmap__line {
    left: 1.82rem;
  }

  .business-roadmap__item::after {
    left: 1.98rem;
    width: 0.68rem;
    height: 0.68rem;
  }

  .business-roadmap__year {
    width: 100%;
    min-width: 0;
  }

  .business-roadmap__card,
  .business-roadmap__item--right .business-roadmap__card {
    padding: 0.85rem 0.85rem 0.85rem 3.55rem;
  }

  .business-roadmap__item--left .business-roadmap__icon,
  .business-roadmap__item--right .business-roadmap__icon {
    left: 0.55rem;
    width: 2.45rem;
    height: 2.45rem;
  }

  .business-roadmap__icon svg {
    width: 1.18rem;
    height: 1.18rem;
  }

  .business-roadmap__card h3 {
    font-size: 0.9rem;
  }

  .business-roadmap__card p {
    font-size: 0.69rem;
    line-height: 1.4;
  }

  .business-roadmap__year-label {
    font-size: 0.48rem;
  }

  .business-roadmap__year-value {
    font-size: 0.96rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .business-roadmap__line,
  .business-roadmap__line::before,
  .business-roadmap__item,
  .business-roadmap__item::after,
  .business-roadmap__card,
  .business-roadmap__card::after,
  .business-roadmap__icon,
  .business-roadmap__year {
    animation: none !important;
    transition: none !important;
  }

  .business-roadmap__panel.reveal .business-roadmap__line,
  .business-roadmap__panel.reveal.visible .business-roadmap__line {
    clip-path: inset(0 0 0 0 round 999px);
  }

  .business-roadmap__panel.reveal .business-roadmap__line::before,
  .business-roadmap__panel.reveal.visible .business-roadmap__line::before {
    opacity: 0.24;
  }

  .business-roadmap__item.reveal,
  .business-roadmap__item.reveal:not(.visible),
  .business-roadmap__item.reveal.visible {
    opacity: 1;
    transform: none;
  }

  .business-roadmap__item.reveal .business-roadmap__card,
  .business-roadmap__item.reveal .business-roadmap__icon,
  .business-roadmap__item.reveal .business-roadmap__year,
  .business-roadmap__item.reveal:not(.visible) .business-roadmap__card,
  .business-roadmap__item.reveal:not(.visible) .business-roadmap__icon,
  .business-roadmap__item.reveal:not(.visible) .business-roadmap__year,
  .business-roadmap__item.reveal.visible .business-roadmap__card,
  .business-roadmap__item.reveal.visible .business-roadmap__icon,
  .business-roadmap__item.reveal.visible .business-roadmap__year {
    opacity: 1;
    transform: none;
  }

  .business-roadmap__item--left .business-roadmap__year,
  .business-roadmap__item--right .business-roadmap__year {
    transform: var(--business-roadmap-year-base);
    animation: none !important;
  }

  .business-roadmap__item--left .business-roadmap__icon,
  .business-roadmap__item--right .business-roadmap__icon {
    transform: translateY(-50%);
    animation: none !important;
  }

  .business-roadmap__item.reveal .business-roadmap__card,
  .business-roadmap__item.reveal.visible .business-roadmap__card {
    animation: none !important;
  }
}

/* Business roadmap redesign */
.business-roadmap {
  position: relative;
  padding: 6.25rem 1rem 7rem;
  overflow: hidden;
  scroll-margin-top: 8.5rem;
  background:
    radial-gradient(circle at 50% 0, rgba(255, 255, 255, 0.78), transparent 34rem),
    linear-gradient(180deg, #d7d8da 0%, #ececed 43%, #d8dadc 100%);
}

.business-roadmap::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(74deg, transparent 32%, rgba(255, 255, 255, 0.52) 50%, transparent 68%) top center / 30% 52% no-repeat,
    linear-gradient(106deg, transparent 32%, rgba(255, 255, 255, 0.44) 50%, transparent 68%) top center / 28% 58% no-repeat,
    radial-gradient(circle at 50% 100%, rgba(255, 255, 255, 0.58), transparent 32%);
  opacity: 0.88;
  pointer-events: none;
}

.business-roadmap::after {
  content: "";
  position: absolute;
  left: -8%;
  right: -8%;
  bottom: -22%;
  height: 40%;
  background: radial-gradient(circle at 50% 0, rgba(255, 255, 255, 0.62), transparent 48%);
  filter: blur(24px);
  opacity: 0.8;
  pointer-events: none;
}

.business-roadmap__container {
  position: relative;
  z-index: 1;
  width: min(1220px, calc(100% - 2rem));
  margin: 0 auto;
}

.business-roadmap__header {
  margin-bottom: 2.75rem;
}

.business-roadmap .section-title {
  color: #37404a;
}

.business-roadmap .section-subtitle {
  max-width: 48rem;
  color: rgba(55, 64, 74, 0.76);
}

.business-roadmap__scene {
  position: relative;
  width: min(100%, 70rem);
  min-height: clamp(48rem, 78vw, 64rem);
  margin: 0 auto;
  border-radius: 2.55rem;
  border: 1px solid rgba(164, 171, 180, 0.34);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.06)),
    linear-gradient(180deg, rgba(214, 217, 220, 0.52), rgba(243, 243, 244, 0.22));
  box-shadow:
    0 2rem 4rem rgba(32, 37, 44, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  overflow: hidden;
  isolation: isolate;
}

.business-roadmap__scene::before {
  content: "";
  position: absolute;
  inset: 1rem;
  border-radius: 1.95rem;
  border: 1px solid rgba(255, 255, 255, 0.44);
  pointer-events: none;
}

.business-roadmap__scene::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 0.75rem;
  height: 16%;
  background: radial-gradient(circle at 50% 0, rgba(255, 255, 255, 0.82), transparent 68%);
  opacity: 0.84;
  filter: blur(18px);
  pointer-events: none;
}

.business-roadmap__lights {
  position: absolute;
  inset: -4% 0 38%;
  z-index: 0;
  pointer-events: none;
}

.business-roadmap__beam {
  --business-roadmap-beam-rotate: 0deg;
  position: absolute;
  top: 0;
  width: 24%;
  height: 100%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0));
  clip-path: polygon(48% 0, 54% 0, 100% 100%, 0 100%);
  filter: blur(9px);
  opacity: 0.34;
  mix-blend-mode: screen;
  transform-origin: top center;
  transform: rotate(var(--business-roadmap-beam-rotate));
  transition:
    opacity 0.9s ease,
    transform 1.1s cubic-bezier(.22, 1, .36, 1);
}

.business-roadmap__beam--left {
  left: 22%;
  --business-roadmap-beam-rotate: -14deg;
}

.business-roadmap__beam--center {
  left: 38%;
}

.business-roadmap__beam--right {
  right: 22%;
  --business-roadmap-beam-rotate: 14deg;
}

.business-roadmap__stage {
  position: absolute;
  top: 13.5%;
  left: 50%;
  z-index: 2;
  width: min(27rem, 56%);
  height: 12rem;
  transform: translateX(-50%);
  pointer-events: none;
  transition:
    opacity 0.9s ease,
    transform 1.05s cubic-bezier(.22, 1, .36, 1);
}

.business-roadmap__stage::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: -0.65rem;
  height: 1.25rem;
  border-radius: 50%;
  background: rgba(61, 68, 74, 0.2);
  filter: blur(10px);
  opacity: 0.55;
}

.business-roadmap__stage-ring {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: linear-gradient(180deg, #ffffff 0%, #dee1e5 62%, #b4b8be 100%);
  box-shadow:
    0 1rem 1.45rem rgba(28, 34, 40, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.business-roadmap__stage-ring::before {
  content: "";
  position: absolute;
  inset: 10% 11%;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, 0.72);
}

.business-roadmap__stage-ring--back {
  bottom: 0;
  width: 72%;
  height: 20%;
}

.business-roadmap__stage-ring--mid {
  bottom: 15%;
  width: 56%;
  height: 18%;
}

.business-roadmap__stage-ring--front {
  bottom: 31%;
  width: 40%;
  height: 17%;
}

.business-roadmap__stage-core {
  position: absolute;
  left: 50%;
  bottom: 1%;
  width: 0.3rem;
  height: 42%;
  transform: translateX(-50%);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.18));
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.46);
}

.business-roadmap__road {
  position: absolute;
  inset: 16% 7% 2.5% 7%;
  z-index: 1;
  pointer-events: none;
}

.business-roadmap__road-shadow,
.business-roadmap__shoulder,
.business-roadmap__road-surface,
.business-roadmap__lane {
  position: absolute;
  transition:
    opacity 0.9s ease,
    transform 1.05s cubic-bezier(.22, 1, .36, 1);
}

.business-roadmap__road-shadow {
  inset: 2% 0 0;
  clip-path: polygon(43.5% 0, 56.5% 0, 84% 100%, 16% 100%);
  background: linear-gradient(180deg, rgba(80, 84, 89, 0.28), rgba(24, 27, 31, 0.22));
  filter: blur(12px);
  opacity: 0.56;
}

.business-roadmap__shoulder {
  top: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(250, 250, 250, 0.82));
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.22);
}

.business-roadmap__shoulder--left {
  left: 0;
  right: 0;
  clip-path: polygon(45.7% 0, 47.6% 0, 23.2% 100%, 20.7% 100%);
}

.business-roadmap__shoulder--right {
  left: 0;
  right: 0;
  clip-path: polygon(52.4% 0, 54.3% 0, 79.3% 100%, 76.8% 100%);
}

.business-roadmap__road-surface {
  inset: 0;
  clip-path: polygon(47.6% 0, 52.4% 0, 76.8% 100%, 23.2% 100%);
  background:
    linear-gradient(180deg, #7b7e82 0%, #56595d 22%, #37393d 64%, #25272a 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    inset 0 0 3.2rem rgba(0, 0, 0, 0.12);
  overflow: hidden;
}

.business-roadmap__road-surface::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 18%, transparent 78%, rgba(0, 0, 0, 0.18) 100%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06), transparent 22%, transparent 78%, rgba(255, 255, 255, 0.06));
}

.business-roadmap__road-surface::after {
  content: "";
  position: absolute;
  inset: -15% -30%;
  background: linear-gradient(120deg, transparent 34%, rgba(255, 255, 255, 0.18) 50%, transparent 66%);
  transform: translateX(-120%);
  opacity: 0.58;
}

.business-roadmap__lane {
  left: 50%;
  transform: translateX(-50%);
  border-radius: 0.22rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.86));
  box-shadow: 0 0.35rem 0.75rem rgba(12, 14, 16, 0.1);
}

.business-roadmap__lane--1 {
  bottom: 5.5%;
  width: 1.18rem;
  height: 10.4%;
}

.business-roadmap__lane--2 {
  bottom: 23.8%;
  width: 0.98rem;
  height: 8.4%;
}

.business-roadmap__lane--3 {
  bottom: 40.1%;
  width: 0.8rem;
  height: 6.9%;
}

.business-roadmap__lane--4 {
  bottom: 54.8%;
  width: 0.66rem;
  height: 5.6%;
}

.business-roadmap__lane--5 {
  bottom: 67%;
  width: 0.56rem;
  height: 4.5%;
}

.business-roadmap__lane--6 {
  bottom: 76.5%;
  width: 0.45rem;
  height: 3.7%;
}

.business-roadmap__milestones {
  position: absolute;
  inset: 0;
  z-index: 4;
}

.business-roadmap__milestone {
  --business-roadmap-accent: #ff7f58;
  --business-roadmap-accent-strong: #f05d3f;
  --business-roadmap-base-transform: translate3d(0, 0, 0);
  --business-roadmap-enter-x: 0rem;
  --business-roadmap-order: 1;
  position: absolute;
  display: flex;
  align-items: center;
  gap: 1rem;
  width: min(19rem, 34%);
  transform: var(--business-roadmap-base-transform);
  z-index: 4;
  transition:
    opacity 0.78s ease,
    transform 0.92s cubic-bezier(.22, 1, .36, 1);
}

.business-roadmap__milestone--left {
  text-align: right;
  --business-roadmap-enter-x: -1.8rem;
}

.business-roadmap__milestone--right {
  flex-direction: row-reverse;
  text-align: left;
  --business-roadmap-enter-x: 1.8rem;
}

.business-roadmap__milestone--summit {
  text-align: right;
  --business-roadmap-enter-x: -1.8rem;
}

.business-roadmap__milestone:nth-child(1) {
  left: 5.25%;
  bottom: 2.5%;
  --business-roadmap-accent: #ff7f58;
  --business-roadmap-accent-strong: #f05d3f;
  --business-roadmap-order: 1;
}

.business-roadmap__milestone:nth-child(2) {
  right: 8.25%;
  bottom: 18%;
  --business-roadmap-accent: #1b8fe0;
  --business-roadmap-accent-strong: #0f66c6;
  --business-roadmap-order: 2;
}

.business-roadmap__milestone:nth-child(3) {
  left: 14.5%;
  bottom: 36%;
  --business-roadmap-accent: #8c9298;
  --business-roadmap-accent-strong: #6e747c;
  --business-roadmap-order: 3;
}

.business-roadmap__milestone:nth-child(4) {
  right: 16.25%;
  bottom: 48.2%;
  --business-roadmap-accent: #21bcc6;
  --business-roadmap-accent-strong: #089cab;
  --business-roadmap-order: 4;
}

.business-roadmap__milestone:nth-child(5) {
  left: 16.75%;
  bottom: 56%;
  --business-roadmap-accent: #5b7ad0;
  --business-roadmap-accent-strong: #375cb8;
  --business-roadmap-order: 5;
}

.business-roadmap__milestone:nth-child(6) {
  right: 20.5%;
  bottom: 71%;
  --business-roadmap-accent: #23bbc2;
  --business-roadmap-accent-strong: #1197a3;
  --business-roadmap-order: 6;
}

.business-roadmap__milestone:nth-child(7) {
  top: 8.8%;
  left: 46.25%;
  width: min(21rem, 38%);
  --business-roadmap-accent: #cf70b7;
  --business-roadmap-accent-strong: #b45298;
  --business-roadmap-base-transform: translateX(-72%);
  --business-roadmap-order: 7;
}

.business-roadmap__detail,
.business-roadmap__pin {
  transition:
    opacity 0.6s ease,
    transform 0.6s cubic-bezier(.22, 1, .36, 1),
    box-shadow 0.35s ease;
}

.business-roadmap__detail {
  display: grid;
  gap: 0.28rem;
  max-width: 11.75rem;
}

.business-roadmap__milestone--left .business-roadmap__detail {
  justify-items: end;
}

.business-roadmap__milestone--right .business-roadmap__detail {
  justify-items: start;
}

.business-roadmap__milestone--summit .business-roadmap__detail {
  justify-items: end;
}

.business-roadmap__detail-year {
  color: var(--business-roadmap-accent);
  font-family: var(--font-head);
  font-size: clamp(2.05rem, 3.2vw, 2.9rem);
  font-weight: 900;
  line-height: 0.92;
  letter-spacing: -0.06em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

.business-roadmap__detail-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.62rem;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(239, 240, 242, 0.7));
  border: 1px solid rgba(255, 255, 255, 0.8);
  color: rgba(71, 76, 82, 0.8);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  box-shadow: 0 0.4rem 0.9rem rgba(28, 31, 35, 0.08);
}

.business-roadmap__detail h3 {
  margin: 0;
  color: #4a4f55;
  font-size: 1.05rem;
  line-height: 1.12;
  letter-spacing: -0.03em;
}

.business-roadmap__detail p {
  margin: 0;
  color: rgba(73, 79, 86, 0.84);
  font-size: 0.75rem;
  line-height: 1.48;
}

.business-roadmap__pin {
  position: relative;
  flex: 0 0 auto;
  width: clamp(5.15rem, 7vw, 6.2rem);
  height: clamp(5.15rem, 7vw, 6.2rem);
  border-radius: 50%;
  background: linear-gradient(180deg, #ffffff 0%, #dfe3e7 100%);
  border: 1px solid rgba(255, 255, 255, 0.94);
  box-shadow:
    0 1.1rem 1.8rem rgba(24, 29, 34, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.98);
}

.business-roadmap__pin::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0.22rem;
  width: 1.95rem;
  height: 1.95rem;
  transform: translateX(-18%);
  border-radius: 0.45rem 0.45rem 1.05rem 0.45rem;
  background: linear-gradient(180deg, #fbfbfb 0%, #d8dde1 100%);
  z-index: 0;
}

.business-roadmap__pin::after {
  content: "";
  position: absolute;
  left: 16%;
  right: 16%;
  bottom: -0.75rem;
  height: 0.8rem;
  border-radius: 50%;
  background: rgba(33, 38, 43, 0.28);
  filter: blur(6px);
  opacity: 0.45;
}

.business-roadmap__pin-core {
  position: absolute;
  inset: 0.72rem;
  z-index: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--business-roadmap-accent), var(--business-roadmap-accent-strong));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    0 0.65rem 1rem rgba(23, 29, 33, 0.18);
}

.business-roadmap__pin-core svg {
  width: 1.65rem;
  height: 1.65rem;
  fill: none;
  stroke: #ffffff;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.business-roadmap__scene.reveal:not(.visible) .business-roadmap__beam {
  opacity: 0;
  transform: translateY(-2.1rem) rotate(var(--business-roadmap-beam-rotate)) scaleY(0.8);
}

.business-roadmap__scene.reveal:not(.visible) .business-roadmap__stage {
  opacity: 0;
  transform: translateX(-50%) translateY(-1.8rem) scale(0.9);
}

.business-roadmap__scene.reveal:not(.visible) .business-roadmap__road-shadow,
.business-roadmap__scene.reveal:not(.visible) .business-roadmap__shoulder,
.business-roadmap__scene.reveal:not(.visible) .business-roadmap__road-surface {
  opacity: 0;
  transform: translateY(2rem) scaleY(0.9);
}

.business-roadmap__scene.reveal:not(.visible) .business-roadmap__lane {
  opacity: 0;
  transform: translateX(-50%) translateY(1.2rem) scaleY(0.5);
}

.business-roadmap__scene.reveal.visible .business-roadmap__beam {
  opacity: 0.34;
}

.business-roadmap__scene.reveal.visible .business-roadmap__stage,
.business-roadmap__scene.reveal.visible .business-roadmap__road-shadow,
.business-roadmap__scene.reveal.visible .business-roadmap__shoulder,
.business-roadmap__scene.reveal.visible .business-roadmap__road-surface,
.business-roadmap__scene.reveal.visible .business-roadmap__lane {
  opacity: 1;
  transform: none;
}

.business-roadmap__scene.reveal.visible .business-roadmap__beam {
  animation: business-roadmap-beam-sway 9.5s ease-in-out infinite;
}

.business-roadmap__scene.reveal.visible .business-roadmap__beam--center {
  animation-duration: 10.8s;
}

.business-roadmap__scene.reveal.visible .business-roadmap__stage-ring {
  animation: business-roadmap-stage-float 6.6s ease-in-out infinite;
}

.business-roadmap__scene.reveal.visible .business-roadmap__stage-ring--mid {
  animation-delay: -1.1s;
}

.business-roadmap__scene.reveal.visible .business-roadmap__stage-ring--front {
  animation-delay: -2s;
}

.business-roadmap__scene.reveal.visible .business-roadmap__road-surface::after {
  animation: business-roadmap-road-sheen 10s ease-in-out infinite;
}

.business-roadmap__scene.reveal.visible .business-roadmap__lane {
  animation: business-roadmap-lane-drift 3.6s ease-in-out infinite;
}

.business-roadmap__scene.reveal.visible .business-roadmap__lane--2 {
  animation-delay: -0.5s;
}

.business-roadmap__scene.reveal.visible .business-roadmap__lane--3 {
  animation-delay: -0.9s;
}

.business-roadmap__scene.reveal.visible .business-roadmap__lane--4 {
  animation-delay: -1.3s;
}

.business-roadmap__scene.reveal.visible .business-roadmap__lane--5 {
  animation-delay: -1.7s;
}

.business-roadmap__scene.reveal.visible .business-roadmap__lane--6 {
  animation-delay: -2.1s;
}

.business-roadmap__milestone.reveal:not(.visible) {
  opacity: 0;
  transform: var(--business-roadmap-base-transform) translate3d(var(--business-roadmap-enter-x), 1.7rem, 0) scale(0.78);
}

.business-roadmap__milestone.reveal:not(.visible) .business-roadmap__detail {
  opacity: 0;
  transform: translateY(0.55rem);
}

.business-roadmap__milestone.reveal:not(.visible) .business-roadmap__pin {
  opacity: 0;
  transform: scale(0.72);
}

.business-roadmap__milestone.reveal.visible {
  opacity: 1;
  transform: var(--business-roadmap-base-transform) translate3d(0, 0, 0) scale(1);
  transition-delay: calc(var(--business-roadmap-order) * 0.08s);
}

.business-roadmap__milestone.reveal.visible .business-roadmap__detail {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--business-roadmap-order) * 0.08s + 0.08s);
}

.business-roadmap__milestone.reveal.visible .business-roadmap__pin {
  opacity: 1;
  transform: scale(1);
  transition-delay: calc(var(--business-roadmap-order) * 0.08s + 0.12s);
}

.business-roadmap__scene.reveal.visible .business-roadmap__milestone .business-roadmap__pin-core {
  animation: business-roadmap-core-pulse 4.8s ease-in-out infinite;
  animation-delay: calc(var(--business-roadmap-order) * 0.26s + 1s);
}

.business-roadmap__milestone:hover .business-roadmap__detail {
  transform: translateY(-0.18rem);
}

.business-roadmap__milestone:hover .business-roadmap__pin {
  box-shadow:
    0 1.3rem 2rem rgba(24, 29, 34, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}

.business-roadmap__milestone:hover .business-roadmap__pin-core {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 0.75rem 1.2rem rgba(23, 29, 33, 0.24);
}

@keyframes business-roadmap-beam-sway {
  0%,
  100% {
    transform: translateY(0) rotate(var(--business-roadmap-beam-rotate));
  }
  50% {
    transform: translateY(0.15rem) rotate(calc(var(--business-roadmap-beam-rotate) + 2deg));
  }
}

@keyframes business-roadmap-stage-float {
  0%,
  100% {
    transform: translateX(-50%) translateY(0);
  }
  50% {
    transform: translateX(-50%) translateY(-0.2rem);
  }
}

@keyframes business-roadmap-road-sheen {
  0%,
  62%,
  100% {
    transform: translateX(-120%);
  }
  76%,
  88% {
    transform: translateX(120%);
  }
}

@keyframes business-roadmap-lane-drift {
  0%,
  100% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  50% {
    opacity: 0.78;
    transform: translateX(-50%) translateY(0.28rem);
  }
}

@keyframes business-roadmap-core-pulse {
  0%,
  100% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.26),
      0 0.65rem 1rem rgba(23, 29, 33, 0.18);
    filter: saturate(1);
  }
  50% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.26),
      0 0.8rem 1.18rem rgba(23, 29, 33, 0.22);
    filter: saturate(1.14);
  }
}

@media (max-width: 1180px) {
  .business-roadmap__scene {
    min-height: clamp(45rem, 80vw, 58rem);
  }

  .business-roadmap__milestone {
    width: min(16.75rem, 33%);
    gap: 0.85rem;
  }

  .business-roadmap__milestone:nth-child(1) {
    left: 3.25%;
    bottom: 2%;
  }

  .business-roadmap__milestone:nth-child(2) {
    right: 5.75%;
  }

  .business-roadmap__milestone:nth-child(3) {
    left: 12.5%;
    bottom: 35.2%;
  }

  .business-roadmap__milestone:nth-child(4) {
    right: 13.75%;
  }

  .business-roadmap__milestone:nth-child(5) {
    left: 14.75%;
    bottom: 55%;
  }

  .business-roadmap__milestone:nth-child(6) {
    right: 17.5%;
    bottom: 70%;
  }

  .business-roadmap__milestone:nth-child(7) {
    left: 45.25%;
    top: 8%;
  }

  .business-roadmap__detail {
    max-width: 10.4rem;
  }

  .business-roadmap__detail h3 {
    font-size: 0.98rem;
  }
}

@media (max-width: 960px) {
  .business-roadmap {
    padding: 5rem 0.8rem 5.8rem;
  }

  .business-roadmap__container {
    width: min(100%, calc(100% - 1rem));
  }

  .business-roadmap__scene {
    min-height: auto;
    padding: 1.3rem 0.8rem 1.4rem;
    border-radius: 1.95rem;
  }

  .business-roadmap__scene::before {
    inset: 0.75rem;
    border-radius: 1.45rem;
  }

  .business-roadmap__lights {
    inset: -6% 0 auto;
    height: 9rem;
  }

  .business-roadmap__beam {
    opacity: 0.22;
  }

  .business-roadmap__stage {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: 5.4rem;
    margin: 0 auto 0.75rem;
    transform: none;
  }

  .business-roadmap__stage::after {
    left: 24%;
    right: 24%;
    bottom: 0.15rem;
  }

  .business-roadmap__stage-ring--back {
    width: 14rem;
    height: 1.2rem;
  }

  .business-roadmap__stage-ring--mid {
    width: 10.2rem;
    height: 1.05rem;
    bottom: 1rem;
  }

  .business-roadmap__stage-ring--front {
    width: 7rem;
    height: 0.95rem;
    bottom: 2rem;
  }

  .business-roadmap__stage-core {
    bottom: 0.4rem;
    height: 2rem;
  }

  .business-roadmap__road {
    inset: auto auto 1rem 0.55rem;
    top: 5.7rem;
    width: 4.15rem;
  }

  .business-roadmap__road-shadow {
    inset: 0 auto 0 0;
    width: 4.15rem;
    clip-path: none;
    border-radius: 999px;
    filter: blur(8px);
  }

  .business-roadmap__shoulder,
  .business-roadmap__road-surface {
    clip-path: none;
    border-radius: 999px;
  }

  .business-roadmap__road-surface {
    left: 1.1rem;
    right: 1.1rem;
    top: 0;
    bottom: 0;
    background: linear-gradient(180deg, #7b7e82 0%, #53565a 24%, #2a2c2f 100%);
  }

  .business-roadmap__road-surface::before {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 12%, transparent 82%, rgba(0, 0, 0, 0.18) 100%);
  }

  .business-roadmap__road-surface::after {
    inset: 0;
    left: 50%;
    right: auto;
    width: 0.42rem;
    transform: translateX(-50%);
    border-radius: 999px;
    background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 1) 0 1rem, transparent 1rem 2rem);
    opacity: 0.96;
    animation: business-roadmap-mobile-lane 3.6s linear infinite;
  }

  .business-roadmap__shoulder--left {
    left: 0.75rem;
    right: auto;
    width: 0.26rem;
    top: 0;
    bottom: 0;
    box-shadow: none;
  }

  .business-roadmap__shoulder--right {
    right: 0.75rem;
    left: auto;
    width: 0.26rem;
    top: 0;
    bottom: 0;
    box-shadow: none;
  }

  .business-roadmap__lane {
    display: none;
  }

  .business-roadmap__milestones {
    position: relative;
    display: grid;
    gap: 1rem;
    padding: 0.2rem 0 0 4.9rem;
  }

  .business-roadmap__milestone {
    position: relative;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 100%;
    min-height: 4.4rem;
    display: block;
    transform: none !important;
    padding-top: 0.08rem;
  }

  .business-roadmap__milestone--left,
  .business-roadmap__milestone--right,
  .business-roadmap__milestone--summit {
    text-align: left;
    --business-roadmap-base-transform: translate3d(0, 0, 0);
    --business-roadmap-enter-x: 0rem;
  }

  .business-roadmap__detail,
  .business-roadmap__milestone--left .business-roadmap__detail,
  .business-roadmap__milestone--right .business-roadmap__detail,
  .business-roadmap__milestone--summit .business-roadmap__detail {
    max-width: none;
    justify-items: start;
  }

  .business-roadmap__detail-year {
    font-size: clamp(1.75rem, 7vw, 2.25rem);
  }

  .business-roadmap__pin {
    position: absolute;
    left: -4.65rem;
    top: 0.1rem;
    width: 3.95rem;
    height: 3.95rem;
  }

  .business-roadmap__pin::before {
    width: 1.4rem;
    height: 1.45rem;
  }

  .business-roadmap__pin-core {
    inset: 0.56rem;
  }

  .business-roadmap__pin-core svg {
    width: 1.28rem;
    height: 1.28rem;
  }

  .business-roadmap__detail h3 {
    font-size: 1rem;
  }

  .business-roadmap__detail p {
    font-size: 0.74rem;
  }
}

@media (max-width: 560px) {
  .business-roadmap {
    padding: 4.3rem 0.55rem 4.9rem;
  }

  .business-roadmap__scene {
    padding: 1.15rem 0.6rem 1.2rem;
    border-radius: 1.55rem;
  }

  .business-roadmap__scene::before {
    inset: 0.55rem;
    border-radius: 1.15rem;
  }

  .business-roadmap__stage {
    height: 4.5rem;
    margin-bottom: 0.5rem;
  }

  .business-roadmap__stage-ring--back {
    width: 11rem;
    height: 0.95rem;
  }

  .business-roadmap__stage-ring--mid {
    width: 8rem;
    height: 0.82rem;
  }

  .business-roadmap__stage-ring--front {
    width: 5.5rem;
    height: 0.72rem;
    bottom: 1.65rem;
  }

  .business-roadmap__road {
    left: 0.35rem;
    width: 3.7rem;
  }

  .business-roadmap__milestones {
    padding-left: 4.2rem;
    gap: 0.9rem;
  }

  .business-roadmap__pin {
    left: -3.95rem;
    width: 3.4rem;
    height: 3.4rem;
  }

  .business-roadmap__detail-tag {
    font-size: 0.54rem;
    padding-inline: 0.55rem;
  }

  .business-roadmap__detail h3 {
    font-size: 0.92rem;
  }

  .business-roadmap__detail p {
    font-size: 0.7rem;
    line-height: 1.42;
  }
}

@keyframes business-roadmap-mobile-lane {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 0 3rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .business-roadmap__beam,
  .business-roadmap__stage,
  .business-roadmap__stage-ring,
  .business-roadmap__road-shadow,
  .business-roadmap__shoulder,
  .business-roadmap__road-surface,
  .business-roadmap__road-surface::after,
  .business-roadmap__lane,
  .business-roadmap__milestone,
  .business-roadmap__detail,
  .business-roadmap__pin,
  .business-roadmap__pin-core {
    animation: none !important;
    transition: none !important;
  }

  .business-roadmap__scene.reveal,
  .business-roadmap__scene.reveal:not(.visible),
  .business-roadmap__scene.reveal.visible,
  .business-roadmap__milestone.reveal,
  .business-roadmap__milestone.reveal:not(.visible),
  .business-roadmap__milestone.reveal.visible {
    opacity: 1;
    transform: none !important;
  }

  .business-roadmap__scene.reveal .business-roadmap__beam,
  .business-roadmap__scene.reveal .business-roadmap__stage,
  .business-roadmap__scene.reveal .business-roadmap__road-shadow,
  .business-roadmap__scene.reveal .business-roadmap__shoulder,
  .business-roadmap__scene.reveal .business-roadmap__road-surface,
  .business-roadmap__scene.reveal .business-roadmap__lane,
  .business-roadmap__milestone.reveal .business-roadmap__detail,
  .business-roadmap__milestone.reveal .business-roadmap__pin {
    opacity: 1;
    transform: none !important;
  }
}

/* Business roadmap final alignment pass */
@media (min-width: 961px) {
  .business-roadmap {
    background:
      radial-gradient(circle at 15% 18%, rgba(0, 217, 255, 0.08), transparent 18rem),
      radial-gradient(circle at 85% 14%, rgba(42, 191, 176, 0.1), transparent 18rem),
      linear-gradient(180deg, #e7e8eb 0%, #f6f5f2 48%, #ebe7df 100%);
  }

  .business-roadmap__scene {
    --roadmap-card-width: min(13.5rem, 23vw);
    --roadmap-pin-size: clamp(4.5rem, 6vw, 5.4rem);
    --roadmap-gap: clamp(0.68rem, 1vw, 0.85rem);
    min-height: clamp(50rem, 76vw, 60rem);
    border-radius: 2.6rem;
    background:
      radial-gradient(circle at 50% 0, rgba(255, 255, 255, 0.84), transparent 24%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.12)),
      linear-gradient(180deg, #dfe2e6 0%, #f3f4f5 34%, #ece8e0 100%);
    box-shadow:
      0 2.4rem 4.8rem rgba(30, 36, 43, 0.14),
      inset 0 1px 0 rgba(255, 255, 255, 0.9);
  }

  .business-roadmap__lights,
  .business-roadmap__stage {
    display: none;
  }

  .business-roadmap__road {
    inset: 8% 7% 3% 7%;
  }

  .business-roadmap__road-shadow,
  .business-roadmap__shoulder,
  .business-roadmap__road-surface,
  .business-roadmap__lane {
    transition:
      opacity 0.8s ease,
      transform 1s cubic-bezier(.22, 1, .36, 1);
  }

  .business-roadmap__road-shadow {
    inset: 1.6% 0 0;
    clip-path: polygon(43.3% 0, 56.7% 0, 76.6% 100%, 23.4% 100%);
    background: linear-gradient(180deg, rgba(71, 77, 84, 0.22), rgba(19, 22, 26, 0.3));
    filter: blur(15px);
    opacity: 0.55;
  }

  .business-roadmap__shoulder {
    top: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(242, 244, 246, 0.88));
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.32),
      0 0 18px rgba(255, 255, 255, 0.18);
  }

  .business-roadmap__shoulder--left {
    left: 0;
    right: 0;
    clip-path: polygon(43.9% 0, 47.2% 0, 27.2% 100%, 23.9% 100%);
  }

  .business-roadmap__shoulder--right {
    left: 0;
    right: 0;
    clip-path: polygon(52.8% 0, 56.1% 0, 76.1% 100%, 72.8% 100%);
  }

  .business-roadmap__road-surface {
    inset: 0;
    clip-path: polygon(47.2% 0, 52.8% 0, 72.8% 100%, 27.2% 100%);
    background:
      linear-gradient(180deg, #868b91 0%, #5b6066 20%, #34383d 62%, #24272c 100%);
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.06),
      inset 0 0 4rem rgba(0, 0, 0, 0.16);
    overflow: hidden;
  }

  .business-roadmap__road-surface::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 16%, transparent 84%, rgba(0, 0, 0, 0.18) 100%),
      linear-gradient(90deg, rgba(255, 255, 255, 0.06), transparent 20%, transparent 80%, rgba(255, 255, 255, 0.06));
  }

  .business-roadmap__road-surface::after {
    content: "";
    position: absolute;
    inset: -18% -30%;
    background: linear-gradient(120deg, transparent 34%, rgba(255, 255, 255, 0.18) 50%, transparent 66%);
    transform: translateX(-120%);
    opacity: 0.54;
  }

  .business-roadmap__lane {
    left: 50%;
    transform: translateX(-50%);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.88));
    box-shadow: 0 0.35rem 0.75rem rgba(12, 14, 16, 0.1);
  }

  .business-roadmap__lane--1 { bottom: 5.5%; width: 1rem; height: 10.6%; }
  .business-roadmap__lane--2 { bottom: 22.4%; width: 0.86rem; height: 8.3%; }
  .business-roadmap__lane--3 { bottom: 38.2%; width: 0.74rem; height: 6.9%; }
  .business-roadmap__lane--4 { bottom: 53.1%; width: 0.62rem; height: 5.7%; }
  .business-roadmap__lane--5 { bottom: 66.7%; width: 0.52rem; height: 4.6%; }
  .business-roadmap__lane--6 { bottom: 78.3%; width: 0.42rem; height: 3.5%; }

  .business-roadmap__milestones {
    position: absolute;
    inset: 0;
    z-index: 4;
  }

  .business-roadmap__milestone {
    position: absolute;
    top: var(--pin-y);
    width: calc(var(--roadmap-card-width) + var(--roadmap-pin-size) + var(--roadmap-gap));
    display: grid;
    align-items: center;
    gap: var(--roadmap-gap);
    opacity: 0;
    transform: translateY(-50%) translateY(1.55rem) scale(0.86);
    transition:
      opacity 0.58s ease,
      transform 0.82s cubic-bezier(.18, 1, .32, 1);
    transition-delay: calc((var(--business-roadmap-order) - 1) * 0.14s + 0.18s);
    z-index: calc(10 + var(--business-roadmap-order));
  }

  .business-roadmap__milestone::before {
    content: "";
    position: absolute;
    top: 50%;
    width: calc(var(--roadmap-gap) + 0.6rem);
    height: 2px;
    border-radius: 999px;
    opacity: 0;
    transform: translateY(-50%) scaleX(0);
    transition:
      opacity 0.3s ease,
      transform 0.45s ease;
    transition-delay: calc((var(--business-roadmap-order) - 1) * 0.14s + 0.28s);
  }

  .business-roadmap__milestone--left,
  .business-roadmap__milestone--summit {
    left: calc(var(--pin-x) - var(--roadmap-card-width) - var(--roadmap-gap) - (var(--roadmap-pin-size) / 2));
    grid-template-columns: minmax(0, 1fr) var(--roadmap-pin-size);
    text-align: right;
  }

  .business-roadmap__milestone--right {
    left: calc(var(--pin-x) - (var(--roadmap-pin-size) / 2));
    grid-template-columns: var(--roadmap-pin-size) minmax(0, 1fr);
    text-align: left;
  }

  .business-roadmap__milestone--left::before,
  .business-roadmap__milestone--summit::before {
    right: calc((var(--roadmap-pin-size) / 2) - 0.15rem);
    background: linear-gradient(90deg, rgba(195, 201, 208, 0), rgba(195, 201, 208, 0.96));
    transform-origin: right center;
  }

  .business-roadmap__milestone--right::before {
    left: calc((var(--roadmap-pin-size) / 2) - 0.15rem);
    background: linear-gradient(90deg, rgba(195, 201, 208, 0.96), rgba(195, 201, 208, 0));
    transform-origin: left center;
  }

  .business-roadmap__milestone:nth-child(1) { --pin-x: 28.6%; --pin-y: 88.5%; }
  .business-roadmap__milestone:nth-child(2) { --pin-x: 68.4%; --pin-y: 75%; }
  .business-roadmap__milestone:nth-child(3) { --pin-x: 35.9%; --pin-y: 58.5%; }
  .business-roadmap__milestone:nth-child(4) { --pin-x: 61.8%; --pin-y: 46%; }
  .business-roadmap__milestone:nth-child(5) { --pin-x: 40.3%; --pin-y: 33.5%; }
  .business-roadmap__milestone:nth-child(6) { --pin-x: 58.4%; --pin-y: 19.5%; }
  .business-roadmap__milestone:nth-child(7) { --pin-x: 44.2%; --pin-y: 8.5%; }

  .business-roadmap__detail {
    max-width: var(--roadmap-card-width);
    display: grid;
    gap: 0.34rem;
    opacity: 0;
    transform: translateY(0.6rem);
    transition:
      opacity 0.46s ease,
      transform 0.56s cubic-bezier(.22, 1, .36, 1);
    transition-delay: calc((var(--business-roadmap-order) - 1) * 0.14s + 0.28s);
  }

  .business-roadmap__milestone--left .business-roadmap__detail,
  .business-roadmap__milestone--summit .business-roadmap__detail {
    justify-items: end;
  }

  .business-roadmap__milestone--right .business-roadmap__detail {
    justify-items: start;
  }

  .business-roadmap__detail-year {
    font-size: clamp(1.85rem, 2.7vw, 2.6rem);
    line-height: 0.88;
    letter-spacing: -0.055em;
  }

  .business-roadmap__detail-tag {
    padding: 0.22rem 0.68rem;
    letter-spacing: 0.14em;
    font-size: 0.61rem;
  }

  .business-roadmap__detail h3 {
    font-size: clamp(0.96rem, 1.3vw, 1.12rem);
    line-height: 1.04;
  }

  .business-roadmap__detail p {
    max-width: 12.2rem;
    font-size: 0.74rem;
    line-height: 1.5;
  }

  .business-roadmap__pin {
    width: var(--roadmap-pin-size);
    height: var(--roadmap-pin-size);
    opacity: 0;
    transform: scale(0.72);
    transition:
      opacity 0.45s ease,
      transform 0.6s cubic-bezier(.18, 1, .32, 1),
      box-shadow 0.35s ease;
    transition-delay: calc((var(--business-roadmap-order) - 1) * 0.14s + 0.36s);
  }

  .business-roadmap__pin-core {
    inset: 0.68rem;
  }

  .business-roadmap__pin-core svg {
    width: 1.56rem;
    height: 1.56rem;
  }

  .business-roadmap__scene.reveal:not(.visible) .business-roadmap__road-shadow,
  .business-roadmap__scene.reveal:not(.visible) .business-roadmap__shoulder,
  .business-roadmap__scene.reveal:not(.visible) .business-roadmap__road-surface {
    opacity: 0;
    transform: translateY(2rem) scaleY(0.9);
  }

  .business-roadmap__scene.reveal:not(.visible) .business-roadmap__lane {
    opacity: 0;
    transform: translateX(-50%) translateY(1.2rem) scaleY(0.5);
  }

  .business-roadmap__scene.reveal.visible .business-roadmap__road-shadow,
  .business-roadmap__scene.reveal.visible .business-roadmap__shoulder,
  .business-roadmap__scene.reveal.visible .business-roadmap__road-surface,
  .business-roadmap__scene.reveal.visible .business-roadmap__lane {
    opacity: 1;
    transform: none;
  }

  .business-roadmap__scene.reveal.visible .business-roadmap__road-surface::after {
    animation: business-roadmap-road-sheen 9.5s ease-in-out infinite;
  }

  .business-roadmap__scene.reveal.visible .business-roadmap__lane {
    animation: business-roadmap-lane-drift 3.8s ease-in-out infinite;
  }

  .business-roadmap__scene.reveal.visible .business-roadmap__lane--2 { animation-delay: -0.45s; }
  .business-roadmap__scene.reveal.visible .business-roadmap__lane--3 { animation-delay: -0.9s; }
  .business-roadmap__scene.reveal.visible .business-roadmap__lane--4 { animation-delay: -1.3s; }
  .business-roadmap__scene.reveal.visible .business-roadmap__lane--5 { animation-delay: -1.75s; }
  .business-roadmap__scene.reveal.visible .business-roadmap__lane--6 { animation-delay: -2.15s; }

  .business-roadmap__scene.reveal.visible .business-roadmap__milestone {
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }

  .business-roadmap__scene.reveal.visible .business-roadmap__milestone::before {
    opacity: 0.8;
    transform: translateY(-50%) scaleX(1);
  }

  .business-roadmap__scene.reveal.visible .business-roadmap__detail {
    opacity: 1;
    transform: none;
  }

  .business-roadmap__scene.reveal.visible .business-roadmap__pin {
    opacity: 1;
    transform: scale(1);
  }

  .business-roadmap__scene.reveal.visible .business-roadmap__pin-core {
    animation: business-roadmap-core-pulse 4.8s ease-in-out infinite;
    animation-delay: calc((var(--business-roadmap-order) - 1) * 0.22s + 0.95s);
  }

  .business-roadmap__milestone:hover {
    z-index: 20;
  }

  .business-roadmap__milestone:hover .business-roadmap__detail {
    transform: translateY(-0.2rem);
  }

  .business-roadmap__milestone:hover .business-roadmap__pin {
    box-shadow:
      0 1.35rem 2.2rem rgba(24, 29, 34, 0.24),
      inset 0 1px 0 rgba(255, 255, 255, 1);
  }
}

@media (min-width: 961px) and (max-width: 1180px) {
  .business-roadmap__scene {
    --roadmap-card-width: min(11.8rem, 20vw);
    --roadmap-pin-size: clamp(3.95rem, 4.9vw, 4.65rem);
    --roadmap-gap: 0.66rem;
    min-height: clamp(45rem, 78vw, 55rem);
  }

  .business-roadmap__detail-year {
    font-size: clamp(1.68rem, 2.3vw, 2.2rem);
  }

  .business-roadmap__detail h3 {
    font-size: clamp(0.88rem, 1.1vw, 1rem);
  }

  .business-roadmap__detail p {
    max-width: 10.6rem;
    font-size: 0.68rem;
  }
}

@media (min-width: 961px) and (prefers-reduced-motion: reduce) {
  .business-roadmap__road-shadow,
  .business-roadmap__shoulder,
  .business-roadmap__road-surface,
  .business-roadmap__road-surface::after,
  .business-roadmap__lane,
  .business-roadmap__milestone,
  .business-roadmap__milestone::before,
  .business-roadmap__detail,
  .business-roadmap__pin,
  .business-roadmap__pin-core {
    animation: none !important;
    transition: none !important;
  }
 
  .business-roadmap__scene.reveal .business-roadmap__road-shadow,           
  .business-roadmap__scene.reveal .business-roadmap__shoulder,          
  .business-roadmap__scene.reveal .business-roadmap__road-surface,          
  .business-roadmap__scene.reveal .business-roadmap__lane,         
  .business-roadmap__scene.reveal .business-roadmap__milestone::before,       
  .business-roadmap__scene.reveal .business-roadmap__detail,  
  .business-roadmap__scene.reveal .business-roadmap__pin {               
    opacity: 1;
    transform: none !important;
  }

  .business-roadmap__scene.reveal .business-roadmap__milestone,
  .business-roadmap__scene.reveal.visible .business-roadmap__milestone {
    opacity: 1;
    transform: translateY(-50%) !important;
  }

  .business-roadmap__scene.reveal .business-roadmap__lane,
  .business-roadmap__scene.reveal .business-roadmap__milestone::before,
  .business-roadmap__scene.reveal .business-roadmap__detail,
  .business-roadmap__scene.reveal .business-roadmap__pin {
    opacity: 1;
    transform: none !important;
  }
}

/* Journey roadline redesign */
.journey-roadline {
  position: relative;
  padding: clamp(4.75rem, 8vw, 6.8rem) 0;
  background:
    radial-gradient(circle at 14% 14%, rgba(255, 123, 77, 0.12), transparent 24%),
    radial-gradient(circle at 86% 78%, rgba(24, 183, 197, 0.12), transparent 26%),
    linear-gradient(180deg, #f5f2ec 0%, #faf8f4 100%);
}

.journey-roadline__container {
  width: min(1220px, calc(100% - 2rem));
  margin: 0 auto;
}

.journey-roadline__header {
  max-width: 44rem;
}

.journey-roadline__stage {
  --roadline-pad: clamp(1.75rem, 4vw, 2.75rem);
  position: relative;
  margin-top: clamp(1.75rem, 4vw, 2.8rem);
  min-height: clamp(35rem, 53vw, 41rem);
  padding: var(--roadline-pad);
  border-radius: 2rem;
  border: 1px solid rgba(255, 255, 255, 0.82);
  background:
    radial-gradient(circle at 12% 16%, rgba(255, 255, 255, 0.88), transparent 22%),
    radial-gradient(circle at 84% 20%, rgba(255, 255, 255, 0.72), transparent 24%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(238, 242, 247, 0.92));
  box-shadow:
    0 1.6rem 3.2rem rgba(24, 31, 40, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  overflow: hidden;
  isolation: isolate;
}

.journey-roadline__stage::before,
.journey-roadline__stage::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.journey-roadline__stage::before {
  width: 18rem;
  height: 18rem;
  top: -9rem;
  left: -6rem;
  background: radial-gradient(circle, rgba(255, 123, 77, 0.14) 0%, rgba(255, 123, 77, 0) 68%);
}

.journey-roadline__stage::after {
  width: 20rem;
  height: 20rem;
  right: -8rem;
  bottom: -10rem;
  background: radial-gradient(circle, rgba(24, 183, 197, 0.16) 0%, rgba(24, 183, 197, 0) 70%);
}

.journey-roadline__road {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: visible;
}

.journey-roadline__road-outline,
.journey-roadline__road-base,
.journey-roadline__road-center {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.journey-roadline__road-outline {
  stroke: rgba(255, 255, 255, 0.96);
  stroke-width: 54;
  filter: drop-shadow(0 1.2rem 1.7rem rgba(18, 24, 34, 0.18));
}

.journey-roadline__road-base {
  stroke: #262c35;
  stroke-width: 36;
}

.journey-roadline__road-center {
  stroke: rgba(255, 255, 255, 0.82);
  stroke-width: 4.8;
  stroke-dasharray: 2.2 8.2;
}

.journey-roadline__items {
  position: absolute;
  inset: var(--roadline-pad);
  z-index: 1;
}

.journey-roadline__item {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: calc(2 + var(--item-order));
}

.journey-roadline__node {
  position: absolute;
  left: 0;
  top: 0;
  width: clamp(4.15rem, 5.1vw, 5rem);
  height: clamp(4.15rem, 5.1vw, 5rem);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--accent);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow:
    0 0 0 0.58rem rgba(255, 255, 255, 0.92),
    0 1.05rem 2rem rgba(18, 24, 34, 0.18);
  transform: translate(-50%, -50%);
}

.journey-roadline__node::after {
  content: "";
  position: absolute;
  inset: 0.4rem;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0));
  pointer-events: none;
}

.journey-roadline__node svg {
  position: relative;
  z-index: 1;
  width: 1.45rem;
  height: 1.45rem;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.journey-roadline__card {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--card-width, clamp(9.25rem, 12.6vw, 10.35rem));
  display: grid;
  gap: 0.34rem;
  padding: 0.98rem 0.96rem 1rem;
  border: 1px solid rgba(222, 228, 235, 0.96);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 249, 252, 0.92));
  box-shadow:
    0 1.35rem 2.45rem rgba(22, 28, 37, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  overflow: hidden;
  transform: translate(calc(-50% + var(--card-x, 0rem)), calc(-50% + var(--card-y, 0rem))) rotate(var(--card-rotate, 0deg));
  transition:
    transform 0.34s ease,
    box-shadow 0.34s ease;
}

.journey-roadline__card::before {
  content: "";
  width: 3rem;
  height: 0.26rem;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), rgba(255, 255, 255, 0.7));
  opacity: 0.84;
}

.journey-roadline__card::after {
  content: "";
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  width: 0.68rem;
  height: 0.68rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0.28rem rgba(255, 255, 255, 0.92);
  opacity: 0.22;
}

.journey-roadline__item:nth-child(odd) .journey-roadline__card {
  border-radius: 1.35rem 1.35rem 1.35rem 0.5rem;
}

.journey-roadline__item:nth-child(even) .journey-roadline__card {
  border-radius: 1.35rem 1.35rem 0.5rem 1.35rem;
}

.journey-roadline__eyebrow {
  display: flex;
  align-items: baseline;
  gap: 0.36rem;
}

.journey-roadline__count {
  font-family: "Josefin Sans", sans-serif;
  font-size: 1.26rem;
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
}

.journey-roadline__year {
  font-family: "Josefin Sans", sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6e7784;
}

.journey-roadline__tag {
  justify-self: start;
  padding: 0.26rem 0.7rem 0.22rem;
  border-radius: 999px;
  background: rgba(235, 239, 245, 0.92);
  font-size: 0.59rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #76808d;
}

.journey-roadline__card h3 {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.05;
  color: #333b46;
}

.journey-roadline__card p {
  margin: 0;
  font-size: 0.76rem;
  line-height: 1.5;
  color: #5b6573;
}

.journey-roadline__item:hover .journey-roadline__card {
  box-shadow:
    0 1.55rem 2.7rem rgba(18, 24, 34, 0.17),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
  transform: translate(calc(-50% + var(--card-x, 0rem)), calc(-50% + var(--card-y, 0rem) - 0.24rem)) rotate(var(--card-rotate, 0deg));
}

.journey-roadline__item:hover .journey-roadline__node {
  box-shadow:
    0 0 0 0.58rem rgba(255, 255, 255, 0.98),
    0 1.35rem 2.45rem rgba(18, 24, 34, 0.24);
}

@media (min-width: 980px) {
  .journey-roadline__stage.reveal.visible .journey-roadline__road-outline,
  .journey-roadline__stage.reveal.visible .journey-roadline__road-base {
    stroke-dasharray: 100;
    animation: journey-roadline-draw 1.55s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }

  .journey-roadline__stage.reveal.visible .journey-roadline__road-base {
    animation-delay: 0.08s;
  }

  .journey-roadline__stage.reveal.visible .journey-roadline__road-center {
    animation: journey-roadline-center-draw 1.85s cubic-bezier(0.2, 0.8, 0.2, 1) both;
    animation-delay: 0.18s;
  }

  .journey-roadline__stage.reveal.visible .journey-roadline__item {
    animation: journey-roadline-item-enter 0.72s cubic-bezier(0.2, 0.9, 0.2, 1) both;
    animation-delay: calc((var(--item-order) - 1) * 0.13s + 0.2s);
  }
}

@media (max-width: 1179px) and (min-width: 980px) {
  .journey-roadline__stage {
    --roadline-pad: 1.5rem;
    min-height: 35.5rem;
  }

  .journey-roadline__card {
    width: var(--card-width, clamp(8.7rem, 13vw, 9.45rem));
    padding: 0.82rem 0.84rem 0.88rem;
  }

  .journey-roadline__card h3 {
    font-size: 0.9rem;
  }

  .journey-roadline__card p {
    font-size: 0.71rem;
  }

  .journey-roadline__node {
    width: 4rem;
    height: 4rem;
  }

  .journey-roadline__node svg {
    width: 1.3rem;
    height: 1.3rem;
  }
}

@media (max-width: 979px) {
  .journey-roadline {
    padding: 4.3rem 0;
  }

  .journey-roadline__stage {
    --roadline-pad: 1rem;
    min-height: auto;
    padding: var(--roadline-pad);
    border-radius: 1.5rem;
  }

  .journey-roadline__road {
    display: none;
  }

  .journey-roadline__items {
    position: relative;
    inset: auto;
    display: grid;
    gap: 1rem;
    padding: 0.3rem 0;
  }

  .journey-roadline__items::before {
    content: "";
    position: absolute;
    left: 1.55rem;
    top: 0.45rem;
    bottom: 0.45rem;
    width: 0.48rem;
    border-radius: 999px;
    background: linear-gradient(180deg, #262c35, #445060);
    box-shadow: 0 0.6rem 1.25rem rgba(18, 24, 34, 0.14);
  }

  .journey-roadline__item {
    position: relative;
    left: auto;
    top: auto;
    min-height: 4.6rem;
    padding-left: 4.5rem;
  }

  .journey-roadline__node {
    left: 1.55rem;
    top: 1.7rem;
    width: 4rem;
    height: 4rem;
    box-shadow:
      0 0 0 0.42rem rgba(255, 255, 255, 0.94),
      0 0.9rem 1.5rem rgba(18, 24, 34, 0.16);
  }

  .journey-roadline__card {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    transform: none;
    padding: 0.92rem 0.95rem 0.98rem;
    border-radius: 1.1rem;
  }

  .journey-roadline__card h3 {
    font-size: 1rem;
  }

  .journey-roadline__card p {
    font-size: 0.8rem;
  }

  .journey-roadline__stage.reveal.visible .journey-roadline__item {
    animation: journey-roadline-item-enter-mobile 0.64s cubic-bezier(0.2, 0.9, 0.2, 1) both;
    animation-delay: calc((var(--item-order) - 1) * 0.1s);
  }
}

@media (prefers-reduced-motion: reduce) {
  .journey-roadline__stage.reveal.visible .journey-roadline__road-outline,
  .journey-roadline__stage.reveal.visible .journey-roadline__road-base,
  .journey-roadline__stage.reveal.visible .journey-roadline__road-center,
  .journey-roadline__stage.reveal.visible .journey-roadline__item {
    animation: none !important;
  }
}

@keyframes journey-roadline-draw {
  from {
    opacity: 0.28;
    stroke-dashoffset: 100;
  }

  to {
    opacity: 1;
    stroke-dashoffset: 0;
  }
}

@keyframes journey-roadline-center-draw {
  from {
    opacity: 0;
    stroke-dashoffset: 28;
  }

  to {
    opacity: 1;
    stroke-dashoffset: 0;
  }
}

@keyframes journey-roadline-item-enter {
  from {
    opacity: 0;
    transform: translateY(1rem) scale(0.96);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes journey-roadline-item-enter-mobile {
  from {
    opacity: 0;
    transform: translateY(0.85rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Journey ladder redesign */
.journey-ladder {
  position: relative;
  padding: clamp(5rem, 8vw, 7rem) 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 14% 14%, rgba(255, 255, 255, 0.46), transparent 26%),
    radial-gradient(circle at 82% 18%, rgba(235, 223, 207, 0.46), transparent 24%),
    radial-gradient(circle at 50% 82%, rgba(226, 212, 194, 0.34), transparent 28%),
    linear-gradient(180deg, #f4ede2 0%, #eee4d6 46%, #f6efe5 100%);
}

.journey-ladder::before,
.journey-ladder::after {
  content: "";
  position: absolute;
  pointer-events: none;
  filter: blur(10px);
}

.journey-ladder::before {
  width: 26rem;
  height: 26rem;
  top: -11rem;
  left: -8rem;
  background: radial-gradient(circle, rgba(244, 233, 218, 0.92) 0%, rgba(244, 233, 218, 0) 68%);
}

.journey-ladder::after {
  width: 28rem;
  height: 28rem;
  right: -10rem;
  bottom: -13rem;
  background: radial-gradient(circle, rgba(233, 221, 204, 0.88) 0%, rgba(233, 221, 204, 0) 68%);
}

.journey-ladder__container {
  position: relative;
  z-index: 1;
  width: min(1180px, calc(100% - 2rem));
  margin: 0 auto;
}

.journey-ladder__header {
  max-width: 46rem;
  margin: 0 auto;
  text-align: center;
}

.journey-ladder__header .section-badge {
  color: #f4f8ff;
  background: linear-gradient(135deg, rgba(255, 74, 106, 0.2), rgba(37, 198, 255, 0.18));
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 0.8rem 1.6rem rgba(3, 6, 13, 0.3);
}

.journey-ladder__header .section-title {
  color: #f4f8ff;
}

.journey-ladder__header .section-subtitle {
  color: rgba(223, 232, 245, 0.76);
}

.journey-ladder__metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.9rem;
  margin-top: clamp(1.8rem, 4vw, 2.5rem);
}

.journey-ladder__metric {
  --metric-accent: #ff4a6a;
  display: grid;
  gap: 0.28rem;
  padding: 1rem 1rem 1.05rem;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(238, 243, 250, 0.94));
  box-shadow:
    0 1rem 2rem rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

.journey-ladder__metric:nth-child(2) { --metric-accent: #4f76df; }
.journey-ladder__metric:nth-child(3) { --metric-accent: #f3b53e; }
.journey-ladder__metric:nth-child(4) { --metric-accent: #16c79b; }

.journey-ladder__metric::before {
  content: "";
  width: 3.1rem;
  height: 0.24rem;
  border-radius: 999px;
  background: var(--metric-accent);
}

.journey-ladder__metric-value {
  font-family: "Josefin Sans", sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
  color: #151b26;
}

.journey-ladder__metric-label {
  font-size: 0.78rem;
  line-height: 1.5;
  color: #5b6472;
}

.journey-ladder__metrics.reveal:not(.visible) .journey-ladder__metric {
  opacity: 0;
  transform: translateY(1rem) scale(0.96);
}

.journey-ladder__metrics.reveal .journey-ladder__metric {
  transition:
    opacity 0.45s ease,
    transform 0.6s cubic-bezier(0.2, 0.9, 0.2, 1);
}

.journey-ladder__metrics.reveal .journey-ladder__metric:nth-child(1) { transition-delay: 0.04s; }
.journey-ladder__metrics.reveal .journey-ladder__metric:nth-child(2) { transition-delay: 0.12s; }
.journey-ladder__metrics.reveal .journey-ladder__metric:nth-child(3) { transition-delay: 0.2s; }
.journey-ladder__metrics.reveal .journey-ladder__metric:nth-child(4) { transition-delay: 0.28s; }

.journey-ladder__metrics.reveal.visible .journey-ladder__metric {
  opacity: 1;
  transform: none;
}

.journey-ladder__board {
  position: relative;
  margin-top: clamp(1.8rem, 4vw, 2.5rem);
  padding: clamp(1.5rem, 3vw, 2.2rem);
  border-radius: 2rem;
  border: 1px solid rgba(224, 213, 198, 0.92);
  background:
    radial-gradient(circle at 12% 16%, rgba(255, 255, 255, 0.86), transparent 22%),
    radial-gradient(circle at 84% 18%, rgba(245, 238, 228, 0.9), transparent 24%),
    linear-gradient(180deg, rgba(249, 243, 235, 0.98), rgba(239, 230, 218, 0.96));
  box-shadow:
    0 1.6rem 3rem rgba(85, 67, 47, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
  overflow: hidden;
}

.journey-ladder__board::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(130, 109, 84, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(130, 109, 84, 0.04) 1px, transparent 1px);
  background-size: 100% 4.75rem, 4.75rem 100%;
  opacity: 0.3;
  pointer-events: none;
}

.journey-ladder__board-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  margin-bottom: 1.5rem;
}

.journey-ladder__board-line {
  width: clamp(2rem, 10vw, 5rem);
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 74, 106, 0), rgba(255, 74, 106, 0.72), rgba(255, 74, 106, 0));
}

.journey-ladder__board-label {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #ff6a83;
}

.journey-ladder__timeline {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 1.1rem;
  padding: 0.4rem 0;
}

.journey-ladder__axis {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1.15rem;
  border-radius: 999px;
  background: linear-gradient(180deg, #2f3640, #232933 54%, #303845);
  transform: translateX(-50%);
  box-shadow:
    0 0 0 0.36rem rgba(255, 255, 255, 0.72),
    0 1rem 2rem rgba(79, 61, 39, 0.16);
}

.journey-ladder__axis::before {
  content: "";
  position: absolute;
  inset: -0.16rem auto -0.16rem 50%;
  width: 0.24rem;
  transform: translateX(-50%);
  border-radius: 999px;
  background:
    repeating-linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.94) 0 0.8rem,
      rgba(255, 255, 255, 0) 0.8rem 1.6rem
    );
}

.journey-ladder__axis::after {
  content: "";
  position: absolute;
  inset: -0.85rem;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(204, 190, 171, 0.18), rgba(255, 255, 255, 0.12));
  filter: blur(14px);
}

.journey-ladder__step {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1.9rem minmax(0, 1fr);
  align-items: center;
  gap: clamp(1rem, 2.2vw, 1.75rem);
  min-height: 11.2rem;
  --step-delay: calc((var(--step-order) - 1) * 0.12s + 0.18s);
}

.journey-ladder__step::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.95rem;
  height: 0.95rem;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid rgba(255, 255, 255, 0.92);
  box-shadow: 0 0 0 0.22rem rgba(255, 255, 255, 0.36);
  transform: translate(-50%, -50%);
  z-index: 3;
}

.journey-ladder__step--left .journey-ladder__card {
  grid-column: 1;
  justify-self: end;
}

.journey-ladder__step--right .journey-ladder__card {
  grid-column: 3;
  justify-self: start;
}

.journey-ladder__node-shell,
.journey-ladder__spacer {
  display: none;
}

.journey-ladder__card {
  position: relative;
  width: min(100%, 19rem);
  display: grid;
  gap: 0.42rem;
  padding: 1.02rem 1.08rem 1.08rem;
  border-radius: 1.12rem;
  border: 1px solid rgba(221, 210, 194, 0.96);
  background: linear-gradient(180deg, rgba(255, 253, 250, 0.98), rgba(247, 241, 232, 0.94));
  box-shadow:
    0 1rem 2rem rgba(82, 63, 41, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.86);
  overflow: hidden;
}

.journey-ladder__card::before {
  content: "";
  width: 3rem;
  height: 0.22rem;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), rgba(255, 255, 255, 0.68));
}

.journey-ladder__card::after {
  content: "";
  position: absolute;
  top: 0.82rem;
  right: 0.82rem;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0.28rem rgba(255, 255, 255, 0.9);
  opacity: 0.24;
}

.journey-ladder__card-top {
  display: flex;
  align-items: baseline;
  gap: 0.38rem;
}

.journey-ladder__count {
  font-family: "Josefin Sans", sans-serif;
  font-size: 1.38rem;
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
}

.journey-ladder__year {
  font-family: "Josefin Sans", sans-serif;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #7f7060;
}

.journey-ladder__tag {
  justify-self: start;
  padding: 0.3rem 0.72rem 0.24rem;
  border-radius: 999px;
  background: rgba(236, 229, 220, 0.92);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8a7866;
}

.journey-ladder__card h3 {
  margin: 0;
  font-size: 1.06rem;
  font-weight: 700;
  line-height: 1.08;
  color: #2f2a24;
}

.journey-ladder__card p {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.55;
  color: #6d6154;
}

.journey-ladder__step:hover .journey-ladder__card {
  transform: translateY(-0.18rem);
  box-shadow:
    0 1.4rem 2.4rem rgba(90, 67, 40, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.journey-ladder__step:hover::after {
  box-shadow:
    0 0 0 0.26rem rgba(255, 255, 255, 0.44),
    0 0 0.95rem rgba(90, 67, 40, 0.14);
}

.journey-ladder__board.reveal .journey-ladder__axis,
.journey-ladder__board.reveal .journey-ladder__board-head,
.journey-ladder__board.reveal .journey-ladder__card,
.journey-ladder__board.reveal .journey-ladder__step::after {
  transition:
    opacity 0.45s ease,
    transform 0.72s cubic-bezier(0.2, 0.9, 0.2, 1);
}

.journey-ladder__board.reveal .journey-ladder__axis,
.journey-ladder__board.reveal .journey-ladder__board-head {
  transition-delay: 0.05s;
}

.journey-ladder__board.reveal:not(.visible) .journey-ladder__axis {
  opacity: 0;
  transform: translateX(-50%) scaleY(0.25);
  transform-origin: top center;
}

.journey-ladder__board.reveal:not(.visible) .journey-ladder__board-head {
  opacity: 0;
  transform: translateY(-0.6rem);
}

.journey-ladder__board.reveal:not(.visible) .journey-ladder__step--left .journey-ladder__card {
  opacity: 0;
  transform: translateX(-2rem) scale(0.96);
}

.journey-ladder__board.reveal:not(.visible) .journey-ladder__step--right .journey-ladder__card {
  opacity: 0;
  transform: translateX(2rem) scale(0.96);
}

.journey-ladder__board.reveal:not(.visible) .journey-ladder__step::after {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.4);
}

.journey-ladder__board.reveal .journey-ladder__step .journey-ladder__card,
.journey-ladder__board.reveal .journey-ladder__step::after {
  transition-delay: var(--step-delay);
}

.journey-ladder__board.reveal.visible .journey-ladder__board-head,
.journey-ladder__board.reveal.visible .journey-ladder__card {
  opacity: 1;
  transform: none;
}

.journey-ladder__board.reveal.visible .journey-ladder__axis {
  opacity: 1;
  transform: translateX(-50%);
}

.journey-ladder__board.reveal.visible .journey-ladder__step::after {
  opacity: 1;
  transform: translate(-50%, -50%);
}

.journey-ladder__board.reveal.visible .journey-ladder__axis::after {
  animation: journey-ladder-axis-glow 4.4s linear infinite;
}

@media (max-width: 980px) {
  .journey-ladder__metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .journey-ladder__board {
    padding: 1.25rem 1rem 1.4rem;
  }

  .journey-ladder__step {
    min-height: 10.5rem;
    grid-template-columns: minmax(0, 1fr) 1.8rem minmax(0, 1fr);
  }

  .journey-ladder__card {
    width: min(100%, 16.5rem);
  }
}

@media (max-width: 720px) {
  .journey-ladder {
    padding: 4.3rem 0;
  }

  .journey-ladder__container {
    width: min(100%, calc(100% - 1rem));
  }

  .journey-ladder__metrics {
    grid-template-columns: 1fr;
  }

  .journey-ladder__board-head {
    margin-bottom: 1.1rem;
  }

  .journey-ladder__timeline {
    gap: 0.9rem;
  }

  .journey-ladder__axis {
    left: 1.55rem;
  }

  .journey-ladder__step {
    min-height: auto;
    grid-template-columns: 3.1rem minmax(0, 1fr);
    gap: 0.9rem;
    align-items: start;
  }

  .journey-ladder__step .journey-ladder__card {
    grid-column: 2;
    width: auto;
    justify-self: stretch;
  }

  .journey-ladder__step--left .journey-ladder__card,
  .journey-ladder__step--right .journey-ladder__card {
    grid-column: 2;
    justify-self: stretch;
  }

  .journey-ladder__step::after {
    left: 1.55rem;
    top: 2rem;
    width: 0.82rem;
    height: 0.82rem;
  }

  .journey-ladder__card {
    padding: 0.92rem 0.92rem 0.96rem;
  }

  .journey-ladder__card h3 {
    font-size: 0.98rem;
  }

  .journey-ladder__card p {
    font-size: 0.78rem;
  }

  .journey-ladder__board.reveal:not(.visible) .journey-ladder__step .journey-ladder__card {
    opacity: 0;
    transform: translateY(1rem) scale(0.97);
  }

  .journey-ladder__board.reveal.visible .journey-ladder__step .journey-ladder__card {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .journey-ladder__metrics.reveal .journey-ladder__metric,
  .journey-ladder__board.reveal .journey-ladder__axis,
  .journey-ladder__board.reveal .journey-ladder__board-head,
  .journey-ladder__board.reveal .journey-ladder__card,
  .journey-ladder__board.reveal .journey-ladder__step::after,
  .journey-ladder__board.reveal.visible .journey-ladder__axis::after {
    animation: none !important;
    transition: none !important;
  }

  .journey-ladder__metrics.reveal .journey-ladder__metric,
  .journey-ladder__board.reveal .journey-ladder__board-head,
  .journey-ladder__board.reveal .journey-ladder__card {
    opacity: 1 !important;
    transform: none !important;
  }

  .journey-ladder__board.reveal .journey-ladder__axis {
    opacity: 1 !important;
    transform: translateX(-50%) !important;
  }

  .journey-ladder__board.reveal .journey-ladder__step::after {              
    opacity: 1 !important;                    
    transform: translate(-50%, -50%) !important;                            
  }   
}

@keyframes journey-ladder-axis-glow {   
  0% {
    transform: translateY(-12%);
    opacity: 0.1;
  }

  50% {
    transform: translateY(0%);
    opacity: 0.28;
  }

  100% {
    transform: translateY(12%);
    opacity: 0.1;
  }
}

.about__story-top {
  container-type: inline-size;
}

@media (max-width: 1320px) {
  .about__story-top {
    grid-template-columns: 1fr;
  }

  .about__story-note {
    max-width: min(100%, 24rem);
  }
}

@media (max-width: 1024px) {
  .navbar {
    padding: 0.9rem 0.55rem;
  }

  .navbar__pill {
    width: min(100%, calc(100% - 0.5rem));
    justify-content: space-between;
    gap: 0.85rem;
    padding: 0.72rem 0.95rem;
  }

  .navbar__logo {
    min-width: 0;
    flex: 0 1 auto;
  }

  .navbar__logo-img,
  .navbar__logo-img--large {
    height: clamp(46px, 7vw, 58px);
    max-width: min(68vw, 280px);
  }

  .navbar__hamburger {
    margin-left: auto;
    flex-shrink: 0;
  }

  .mobile-menu {
    width: min(100%, calc(100% - 0.5rem));
    margin-inline: auto;
  }
}

@media (max-width: 640px) {
  .navbar__pill {
    width: min(100%, calc(100% - 0.35rem));
    padding: 0.62rem 0.78rem;
    border-radius: 1.2rem;
  }

  .navbar__logo-img,
  .navbar__logo-img--large {
    height: clamp(40px, 10vw, 50px);
    max-width: min(62vw, 220px);
  }

  .navbar__hamburger {
    padding: 0.42rem 0.52rem;
  }

  .mobile-menu {
    width: min(100%, calc(100% - 0.35rem));
    padding: 0.95rem;
    border-radius: 1.2rem;
  }
}

.navbar__link,
.mobile-menu__link,
.mobile-menu__summary,
.mobile-menu__sublink,
.navbar__dropdown-link {
  color: #1f1a16;
}

.mobile-menu__link,
.mobile-menu__sublink {
  background: rgba(27, 23, 18, 0.05);
}

.mobile-menu__summary,
.mobile-menu__sublink,
.navbar__dropdown-link {
  color: rgba(31, 26, 22, 0.82);
}

.mobile-menu__group {
  background: rgba(27, 23, 18, 0.04);
  border-color: rgba(27, 23, 18, 0.08);
}

.mobile-menu__summary:hover,
.mobile-menu__link:hover,
.mobile-menu__sublink:hover,
.mobile-menu__sublink[aria-current="page"],
.navbar__dropdown-link:hover,
.navbar__link:hover {
  color: #b67326;
}

@media (max-width: 640px) {
  .hero {
    --hero-mobile-media-h: clamp(12.5rem, 58vw, 16.5rem);
    min-height: auto;
    display: block;
    padding: 5.75rem 1rem 2.5rem;
    background: #08111c;
  }

  .hero__bg-slider,
  .hero__backdrop {
    top: 5.75rem;
    right: 1rem;
    bottom: auto;
    left: 1rem;
    height: var(--hero-mobile-media-h);
    border-radius: 1.35rem;
    overflow: hidden;
  }

  .hero__media {
    background-size: contain !important;
    background-repeat: no-repeat;
    background-position: center center;
    background-color: #08111c;
  }

  .hero__bg-video {
    object-fit: contain;
    transform: none;
    background: #08111c;
  }

  .hero__backdrop {
    background:
      linear-gradient(180deg, rgba(8, 12, 20, 0.06) 0%, rgba(8, 12, 20, 0.12) 52%, rgba(8, 12, 20, 0.42) 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  }

  .hero__container {
    padding-top: calc(var(--hero-mobile-media-h) + 1.2rem);
  }

  .hero__content {
    max-width: none;
    padding: 0;
  }
}

@media (max-width: 900px) {
  body,
  .automation-features {
    background-attachment: scroll;
  }
}

@media (max-width: 1024px) {
  body,
  .automation-features,
  .portfolio,
  .about,
  .brands,
  .stats,
  .automation-marquee,
  .features,
  .scene-tabs,
  .testimonials,
  .blog,
  .works-with {
    background-attachment: scroll !important;
  }
}

@media (max-width: 640px) {
  .hero {
    --hero-mobile-media-h: clamp(13rem, 60vw, 17rem);
    padding: 5.5rem 1rem 2.75rem;
  }

  .hero__container {
    padding-top: calc(var(--hero-mobile-media-h) + 1.5rem);
  }

  .hero__content {
    gap: 1.1rem;
    padding: 0.15rem 0 0;
  }

  .hero__badge {
    max-width: 100%;
    font-size: 0.68rem;
    letter-spacing: 0.16em;
  }

  .hero__title {
    gap: 0.2rem;
  }

  .hero__title-line1,
  .hero__title-line2 {
    font-size: clamp(2.35rem, 10.8vw, 3.7rem);
    line-height: 0.98;
  }

  .hero__title-line3 {
    font-size: clamp(0.92rem, 4.1vw, 1.1rem);
    letter-spacing: 0.09em;
  }

  .hero__subtitle {
    max-width: 24rem;
    font-size: 0.95rem;
    line-height: 1.55;
  }

  .hero__cta-group {
    width: 100%;
    margin-top: 0.35rem;
  }

  .hero__cta-primary,
  .hero__cta-primary.btn-gold {
    width: min(100%, 18rem);
    justify-content: center;
    padding: 1rem 1.4rem;
  }

  .hero__scroll {
    display: none !important;
  }
}

@media (max-width: 640px) {
  .portfolio__grid-card--mobile-portrait {
    grid-column: auto;
    width: 100%;
    max-width: 420px;
    aspect-ratio: 9 / 16;
    justify-self: center;
  }

  .portfolio__grid-card--mobile-portrait .portfolio__grid-media {
    object-fit: cover;
    background: #000;
  }
}

/* Contact form alignment */
.footer__contact-layout {
  gap: clamp(1.15rem, 2.4vw, 1.9rem);
  align-items: stretch;
}

.footer__contact-form {
  min-height: 100%;
  justify-items: start;
  align-content: end;
  padding: clamp(2rem, 3vw, 2.85rem);
}

.footer__form-grid--contact {
  width: min(100%, 42rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas:
    "name email"
    "phone ."
    "support .";
  column-gap: clamp(1rem, 2vw, 1.15rem);
  row-gap: clamp(1rem, 1.8vw, 1.3rem);
  align-items: start;
}

.footer__field--name {
  grid-area: name;
}

.footer__field--email {
  grid-area: email;
}

.footer__field--phone {
  grid-area: phone;
}

.footer__form-support {
  grid-area: support;
  display: grid;
  gap: 1rem;
  align-content: start;
  max-width: min(100%, 21.5rem);
}

.footer__contact-form .footer__field {
  gap: 0.72rem;
}

.footer__contact-form .footer__field-label {
  font-size: 0.76rem;
  letter-spacing: 0.22em;
  color: #1b1712;
}

.footer__contact-form .footer__field-label h4 {
  font: inherit;
  text-transform: inherit;
}

.footer__contact-form .footer__input {
  min-height: 4.2rem;
  padding: 0 1.45rem;
  border-radius: var(--radius-pill);
  font-size: 0.98rem;
  background: rgba(255, 251, 245, 0.98);
  border: 1px solid rgba(194, 131, 53, 0.38);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 14px 30px rgba(0, 0, 0, 0.1);
  transition: border-color 0.24s ease, box-shadow 0.24s ease, transform 0.24s ease;
}

.footer__contact-form .footer__input:hover {
  transform: translateY(-2px);
  border-color: rgba(42, 191, 176, 0.34);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.94),
    0 18px 40px rgba(0, 0, 0, 0.22),
    0 0 24px rgba(42, 191, 176, 0.08);
}

.footer__contact-form .footer__input:focus {
  border-color: rgba(42, 191, 176, 0.42);
  box-shadow:
    0 0 0 4px rgba(42, 191, 176, 0.12),
    0 20px 42px rgba(0, 0, 0, 0.24),
    0 0 28px rgba(42, 191, 176, 0.1);
  transform: translateY(-2px);
}

.footer__form-actions {
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0.8rem;
}

.footer__submit {
  min-width: 12rem;
  padding-inline: 1.8rem;
}

.footer__submit.btn-gold {
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.12);
}

.footer__submit.btn-gold:hover {
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
}

.footer__submit.btn-gold:focus-visible {
  box-shadow:
    0 0 0 4px rgba(42, 191, 176, 0.12),
    0 20px 42px rgba(0, 0, 0, 0.24);
}

.footer__form-status {
  min-height: 1.2rem;
}

.footer__captcha-wrap {
  gap: 0.75rem;
  width: 100%;
}

.footer__captcha-box {
  width: min(100%, 21.5rem);
  padding: 0.75rem;
  border-radius: 1.35rem;
  background: rgba(255, 251, 245, 0.7);
  border: 1px solid rgba(194, 131, 53, 0.16);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.84),
    0 18px 40px rgba(0, 0, 0, 0.16);
}

.footer__captcha-widget {
  overflow: hidden;
}

@media (max-width: 1024px) {
  .footer__contact-layout {
    align-items: start;
  }

  .footer__contact-form {
    min-height: 0;
    align-content: start;
  }

  .footer__form-grid--contact {
    width: 100%;
    grid-template-columns: 1fr;
    grid-template-areas:
      "name"
      "email"
      "phone"
      "support";
  }

  .footer__form-support {
    max-width: none;
  }
}

@media (max-width: 640px) {
  .footer__contact-form {
    padding: 1.4rem;
  }

  .footer__contact-form .footer__field {
    gap: 0.55rem;
  }

  .footer__contact-form .footer__input {
    min-height: 3.9rem;
    padding-inline: 1.25rem;
  }

  .footer__submit {
    min-width: 0;
  }

  .footer__captcha-box {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .footer__form-actions {
    align-items: stretch;
  }

  .footer__submit {
    width: 100%;
    justify-content: center;
  }
}

/* Contact map */
.footer__contact-layout {
  grid-template-columns: minmax(360px, 1.02fr) minmax(0, 0.98fr);
  gap: clamp(0.95rem, 2vw, 1.45rem);
  align-items: stretch;
}

.footer__contact-side {
  gap: 0.95rem;
  padding: clamp(2rem, 2.8vw, 2.35rem);
}

.footer__contact-points {
  gap: 0.8rem;
  width: min(100%, 37rem);
}

.footer__contact-card {
  min-height: 5rem;
  padding: 0.95rem 1rem;
}

.footer__contact-card--location {
  min-height: 6rem;
}

.footer__contact-form {
  min-height: 100%;
  align-self: stretch;
  align-content: stretch;
  justify-items: stretch;
  padding: clamp(1.7rem, 2.6vw, 2.2rem);
}

.footer__form-grid--contact {
  width: min(100%, 40rem);
  min-height: 100%;
  grid-template-rows: auto auto minmax(1.5rem, 1fr) auto;
  grid-template-areas:
    "name email"
    "phone phone"
    ". ."
    "support support";
  column-gap: clamp(1rem, 2vw, 1.18rem);
  row-gap: clamp(0.92rem, 1.45vw, 1.08rem);
  align-content: stretch;
}

.footer__form-support {
  width: 100%;
  max-width: none;
  display: grid;
  grid-template-columns: 1fr;
  justify-items: start;
  align-items: start;
  row-gap: 1rem;
  align-self: end;
}

.footer__contact-form .footer__input {
  min-height: 3.8rem;
}

.footer__form-actions {
  width: min(100%, 13.5rem);
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0.65rem;
}

.footer__submit {
  width: 100%;
  min-width: 0;
  min-height: 3rem;
}

.footer__captcha-wrap {
  width: min(100%, 23.75rem);
  justify-self: start;
}

.footer__captcha-box {
  width: 100%;
  padding: 0.68rem;
}

.footer__captcha-note {
  max-width: 23.75rem;
}

.footer__map-panel {
  grid-column: 1 / -1;
  width: 100%;
  margin-inline: auto;
  margin-top: 0.25rem;
  padding: 0.9rem;
  border-radius: 1.3rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.03));
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.2);
}

.footer__map-frame {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(circle at top, rgba(42, 191, 176, 0.16), transparent 58%),
    rgba(8, 16, 29, 0.9);
}

.footer__map-frame iframe {
  display: block;
  width: 100%;
  height: 15.5rem;
  min-height: 15.5rem;
  border: 0;
  pointer-events: none;
}

.footer__map-frame-link {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  text-decoration: none;
  cursor: pointer;
}

.footer__map-frame-link::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 16, 29, 0.04), rgba(8, 16, 29, 0.18));
  opacity: 0;
  transition: opacity 0.24s ease;
}

.footer__map-frame-link:hover::before {
  opacity: 1;
}

.footer__map-frame-link:focus-visible {
  outline: 0;
}

.footer__map-frame-link:focus-visible::before {
  opacity: 1;
}

.footer__map-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-top: 0.65rem;
}

.footer__map-eyebrow {
  color: rgba(248, 249, 250, 0.78);
  font-size: 0.82rem;
  line-height: 1.45;
}

.footer__map-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  padding: 0.58rem 0.95rem;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(42, 191, 176, 0.34);
  background: rgba(42, 191, 176, 0.1);
  color: var(--white);
  font-family: var(--font-head);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-decoration: none;
  text-transform: uppercase;
  transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
}

.footer__map-link:hover {
  transform: translateY(-2px);
  border-color: rgba(42, 191, 176, 0.54);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.2), 0 0 20px rgba(42, 191, 176, 0.12);
}

.footer__map-link:focus-visible {
  outline: 0;
  border-color: rgba(42, 191, 176, 0.62);
  box-shadow:
    0 0 0 4px rgba(42, 191, 176, 0.12),
    0 16px 32px rgba(0, 0, 0, 0.2);
}

@media (max-width: 1024px) {
  .footer__contact-form {
    min-height: auto;
    align-content: start;
  }

  .footer__form-grid--contact {
    width: 100%;
    min-height: 0;
    grid-template-rows: auto;
    grid-template-areas:
      "name"
      "email"
      "phone"
      "support";
  }

  .footer__form-support {
    grid-template-columns: 1fr;
  }

  .footer__captcha-box {
    width: 100%;
  }

  .footer__map-frame iframe {
    height: 13rem;
    min-height: 13rem;
  }
}

@media (max-width: 640px) {
  .footer__contact-layout {
    grid-template-columns: 1fr;
  }

  .footer__contact-points {
    width: 100%;
  }

  .footer__contact-side {
    padding: 1.55rem;
  }

  .footer__map-panel {
    width: 100%;
    padding: 0.68rem;
  }

  .footer__map-frame iframe {
    height: 10.75rem;
    min-height: 10.75rem;
  }

  .footer__map-meta {
    align-items: stretch;
  }

  .footer__map-link {
    width: 100%;
  }
}