/* Dynexal homepage hero — professional developer-at-work direction */
.hero-showcase{
  background:#03101f url('https://images.pexels.com/photos/32755772/pexels-photo-32755772.jpeg?auto=compress&cs=tinysrgb&w=2400') center right/cover no-repeat!important;
}
.hero-showcase:before{
  background:
    linear-gradient(90deg,rgba(2,11,24,.98) 0%,rgba(3,17,35,.94) 38%,rgba(3,20,40,.70) 64%,rgba(2,11,24,.42) 100%),
    linear-gradient(180deg,rgba(2,11,24,.18),rgba(2,11,24,.52))!important;
}
.hero-showcase-inner{grid-template-columns:58% 42%!important;min-height:665px!important}
.hero-copy{max-width:760px!important;z-index:8}
.hero-copy h1{max-width:720px!important;text-shadow:0 4px 28px rgba(0,0,0,.32)}
.hero-copy>p{max-width:650px!important;text-shadow:0 2px 12px rgba(0,0,0,.28)}

/* Use the real developer photo as the hero visual; remove the old dashboard/code mockups. */
.hero-visual{height:650px!important;min-width:0!important;pointer-events:none!important}
.hero-visual .dashboard-window,.hero-visual .code-window{display:none!important}
.hero-visual .hero-quote{right:5%!important;top:44px!important;font-size:27px!important;max-width:210px!important;z-index:5!important}
.hero-visual .hero-brand-badge{right:3%!important;top:175px!important;z-index:5!important}
.hero-desk-glow{display:none!important}

.hero-bottom-strip{
  width:100vw!important;max-width:none!important;
  margin-left:calc(50% - 50vw)!important;margin-right:calc(50% - 50vw)!important;
  border-radius:0!important;position:relative;z-index:8;
}
.hero-bottom-strip>div:first-child{padding-left:max(5vw,28px)!important}

/* Reliable desktop hover dropdowns — no arrows */
@media(min-width:901px){
  .nav .has-dropdown{position:relative;display:flex;align-items:center;height:82px}
  .nav .has-dropdown>a{display:flex;align-items:center;height:82px;gap:0}
  .nav .has-dropdown>a:after{display:none!important;content:none!important}
  .nav .dropdown-menu{position:absolute;top:calc(100% - 1px);left:50%;transform:translate(-50%,8px);min-width:245px;padding:8px;background:rgba(7,18,34,.99);border:1px solid #29415f;border-radius:12px;box-shadow:0 20px 45px rgba(0,0,0,.38);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .16s ease,transform .16s ease,visibility .16s ease;z-index:1000}
  .nav .dropdown-menu:before{content:"";position:absolute;top:-9px;left:0;right:0;height:9px}
  .nav .dropdown-menu a{display:block;height:auto;padding:11px 13px;border-radius:8px;color:#cbd8e8;font-size:14px;line-height:1.35;white-space:nowrap}
  .nav .dropdown-menu a:hover,.nav .dropdown-menu a:focus-visible{background:#123258;color:#fff;outline:none}
  .nav .has-dropdown:hover>.dropdown-menu,.nav .has-dropdown:focus-within>.dropdown-menu{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}
}

/* Text-only header/footer branding */
.site-header .logo,.footer .logo{gap:0!important}
.site-header .logo-mark,.footer .logo-mark{display:none!important;visibility:hidden!important;width:0!important;height:0!important;flex:0 0 0!important}
.site-header .logo-copy,.footer .logo-copy{display:flex!important;flex-direction:column!important;line-height:1.08!important}
.site-header .logo-copy strong{font-size:23px!important;letter-spacing:-.7px!important}
.site-header .logo-copy small{margin-top:5px!important;font-size:12px!important;font-weight:500!important;color:#9eb0c7!important}
.footer .logo-copy strong{font-size:18px!important;color:#fff!important}
.footer .logo-copy small{margin-top:4px!important;font-size:10px!important;color:#91a0b6!important}

@media(max-width:1200px){
  .hero-showcase-inner{grid-template-columns:60% 40%!important}
  .hero-copy h1{font-size:clamp(54px,5.8vw,72px)!important}
  .hero-visual .hero-quote{right:2%!important;font-size:23px!important}
}
@media(max-width:900px){
  .hero-showcase{background-position:68% center!important}
  .hero-showcase:before{background:linear-gradient(180deg,rgba(2,11,24,.96) 0%,rgba(3,17,35,.84) 55%,rgba(2,11,24,.72) 100%)!important}
  .hero-showcase-inner{grid-template-columns:1fr!important;min-height:auto!important}
  .hero-copy{padding-bottom:32px!important}
  .hero-visual{display:block!important;height:300px!important}
  .hero-visual .hero-quote,.hero-visual .hero-brand-badge{display:none!important}
  .hero-bottom-strip{width:100%!important;margin-left:0!important;margin-right:0!important}
}
@media(max-width:560px){
  .hero-showcase{background-position:72% center!important}
  .hero-copy h1{font-size:48px!important;letter-spacing:-2.5px!important}
  .hero-copy>p{font-size:17px!important}
  .hero-visual{height:220px!important}
}


/* Final hero slideshow: each slide gets its own full-width visual. */
.hero-showcase{
  background:#061329!important;
}
.hero-slide-full{
  background-position:center!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
}
.hero-slide-full:nth-child(1){
  background-image:
    linear-gradient(90deg,rgba(2,11,24,.93) 0%,rgba(3,17,35,.76) 42%,rgba(3,17,35,.28) 78%,rgba(2,11,24,.38) 100%),
    url('assets/hero-slide-al.svg')!important;
}
.hero-slide-full:nth-child(2){
  background-image:
    linear-gradient(90deg,rgba(2,11,24,.94) 0%,rgba(3,17,35,.76) 42%,rgba(3,17,35,.30) 78%,rgba(2,11,24,.42) 100%),
    url('assets/hero-slide-integration.svg')!important;
}
.hero-slide-full:nth-child(3){
  background-image:
    linear-gradient(90deg,rgba(2,11,24,.94) 0%,rgba(3,17,35,.76) 42%,rgba(3,17,35,.30) 78%,rgba(2,11,24,.42) 100%),
    url('assets/hero-slide-ai.svg')!important;
}
.hero-slide-full .hero-visual{display:none!important}

/* Restore the Dynexal D mark in the header/footer while keeping the clean wordmark. */
.site-header .logo-copy:before,.footer .logo-copy:before{
  content:""!important;
  display:block!important;
  width:42px!important;
  height:42px!important;
  flex:0 0 42px!important;
  margin-right:11px!important;
  background:url('assets/dynexal-mark.svg') center/contain no-repeat!important;
}
.site-header .logo-copy,.footer .logo-copy{
  flex-direction:row!important;
  align-items:center!important;
}
.site-header .logo-copy small,.footer .logo-copy small{
  display:none!important;
}
.site-header .logo-copy strong{font-size:23px!important}
.footer .logo-copy strong{font-size:18px!important}
@media(max-width:900px){
  .site-header .logo-copy:before{width:36px!important;height:36px!important;flex-basis:36px!important;margin-right:9px!important}
  .site-header .logo-copy strong{font-size:20px!important}
}


/* =========================================================
   DYNEXAL HOMEPAGE V2 — CLEAN PROFESSIONAL HERO
   ========================================================= */
.hero-showcase{
  min-height:760px!important;
  background:#061329!important;
  overflow:hidden!important;
}
.hero-showcase:before{
  background:
    radial-gradient(circle at 82% 42%,rgba(20,151,255,.18),transparent 30%),
    linear-gradient(90deg,#030b18 0%,#061427 48%,#07182c 100%)!important;
}
.hero-showcase:after{display:none!important}

/* Keep the slideshow layers behind the content. */
.hero-slider-track{
  position:absolute!important;
  inset:0!important;
  z-index:1!important;
}
.hero-slide-full{
  background:none!important;
  overflow:hidden!important;
}
.hero-slide-full:after{
  content:"";
  position:absolute;
  z-index:1;
  right:3.5%;
  top:50%;
  width:min(48vw,650px);
  height:620px;
  transform:translateY(-48%);
  background-position:center;
  background-repeat:no-repeat;
  background-size:contain;
  filter:drop-shadow(0 28px 55px rgba(0,0,0,.42));
  pointer-events:none;
}
.hero-slide-full:nth-child(1):after{background-image:url('assets/hero-slide-al.svg')}
.hero-slide-full:nth-child(2):after{background-image:url('assets/hero-slide-integration.svg')}
.hero-slide-full:nth-child(3):after{background-image:url('assets/hero-slide-ai.svg')}

.hero-slide-full:nth-child(4){
  background:
    radial-gradient(circle at 82% 28%,rgba(35,169,255,.24),transparent 25%),
    linear-gradient(135deg,#071a31 0%,#0a2744 52%,#061329 100%)!important;
}
.hero-slide-full:nth-child(4):after{
  background-image:
    radial-gradient(circle at 50% 50%,transparent 0 25%,rgba(66,190,255,.24) 26% 27%,transparent 28% 39%,rgba(66,190,255,.16) 40% 41%,transparent 42%),
    linear-gradient(90deg,transparent 48%,rgba(93,190,255,.16) 49%,rgba(93,190,255,.16) 51%,transparent 52%),
    linear-gradient(0deg,transparent 48%,rgba(93,190,255,.16) 49%,rgba(93,190,255,.16) 51%,transparent 52%);
  border:1px solid rgba(91,190,255,.08);
  border-radius:34px;
}
.hero-slide-full:nth-child(5){
  background:
    radial-gradient(circle at 78% 62%,rgba(77,255,194,.18),transparent 28%),
    linear-gradient(135deg,#071b2a 0%,#0a3040 48%,#061329 100%)!important;
}
.hero-slide-full:nth-child(5):after{
  background-image:
    radial-gradient(circle at 50% 50%,transparent 0 29%,rgba(92,255,205,.22) 30% 31%,transparent 32% 45%,rgba(92,255,205,.12) 46% 47%,transparent 48%),
    linear-gradient(45deg,transparent 48%,rgba(92,255,205,.16) 49%,rgba(92,255,205,.16) 51%,transparent 52%),
    linear-gradient(-45deg,transparent 48%,rgba(92,255,205,.12) 49%,rgba(92,255,205,.12) 51%,transparent 52%);
  border-radius:50%;
}
.hero-slide-full:nth-child(6){
  background:
    radial-gradient(circle at 82% 35%,rgba(172,118,255,.22),transparent 28%),
    linear-gradient(135deg,#0c1630 0%,#202653 52%,#061329 100%)!important;
}
.hero-slide-full:nth-child(6):after{
  background-image:
    linear-gradient(135deg,transparent 46%,rgba(183,145,255,.20) 47%,rgba(183,145,255,.20) 53%,transparent 54%),
    linear-gradient(45deg,transparent 46%,rgba(183,145,255,.14) 47%,rgba(183,145,255,.14) 53%,transparent 54%),
    radial-gradient(circle at 50% 50%,rgba(183,145,255,.12),transparent 52%);
  border-radius:28px;
}

.hero-showcase-inner{
  min-height:668px!important;
  display:grid!important;
  grid-template-columns:minmax(0,52%) minmax(0,48%)!important;
  align-items:center!important;
  position:relative!important;
  z-index:3!important;
}
.hero-copy{
  padding:42px 0 110px!important;
  max-width:690px!important;
}
.hero-badge{
  padding:8px 13px!important;
  border:1px solid rgba(94,174,255,.28)!important;
  border-radius:999px!important;
  background:rgba(8,35,65,.62)!important;
  color:#9fd5ff!important;
  font-size:10px!important;
  letter-spacing:1.4px!important;
}
.hero-copy h1{
  font-size:clamp(58px,5.5vw,82px)!important;
  line-height:.99!important;
  letter-spacing:-4px!important;
  margin:22px 0 24px!important;
}
.hero-copy h1 span{color:#13a8ff!important}
.hero-copy>p{
  max-width:650px!important;
  font-size:18px!important;
  line-height:1.65!important;
  color:#c7d5e6!important;
}
.hero-actions{margin:30px 0 34px!important}
.hero-primary{
  padding:15px 23px!important;
  border-radius:9px!important;
}
.hero-secondary{
  padding:15px 23px!important;
  border-radius:9px!important;
  border-color:#55708f!important;
  background:rgba(7,19,35,.72)!important;
}
.hero-feature-row{
  max-width:690px!important;
  grid-template-columns:repeat(6,1fr)!important;
  padding-top:18px!important;
  border-top:1px solid rgba(147,181,218,.18)!important;
}
.hero-feature-row>div{
  min-height:67px!important;
  padding:0 9px!important;
}
.feature-icon{font-size:22px!important}
.hero-feature-row strong{font-size:10px!important;color:#d9e5f3!important}

/* The capability strip belongs at the bottom of the hero, never over the copy. */
.hero-bottom-strip{
  position:absolute!important;
  left:0!important;
  right:0!important;
  bottom:0!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  min-height:86px!important;
  z-index:10!important;
  display:grid!important;
  grid-template-columns:repeat(3,1fr)!important;
  background:rgba(7,42,88,.92)!important;
  border-top:1px solid rgba(103,177,255,.18)!important;
  backdrop-filter:blur(14px)!important;
}
.hero-bottom-strip>div{
  min-height:58px!important;
  padding:0 30px!important;
  display:grid!important;
  grid-template-columns:34px 1fr!important;
  grid-template-rows:auto auto!important;
  column-gap:10px!important;
  align-items:center!important;
  border-right:1px solid rgba(133,181,226,.17)!important;
}
.hero-bottom-strip>div:last-child{border-right:0!important}
.hero-bottom-strip>div:first-child{padding-left:max(5vw,30px)!important}
.hero-bottom-strip>div span{
  grid-row:1/3!important;
  color:#5bc2ff!important;
  font-size:22px!important;
}
.hero-bottom-strip strong{font-size:14px!important}
.hero-bottom-strip small{font-size:11px!important;color:#a9c5e2!important}

/* Remove unused legacy visual layers on the homepage. */
.hero-slide-full .hero-visual{display:none!important}
.hero-slide-full .hero-bg-glow{display:none!important}
.hero-quote,.hero-brand-badge{display:none!important}

/* Hero slide content stays above the decorative SVG. */
.hero-slide-full .container{position:relative;z-index:4}

/* Cleaner slider indicators. */
.hero-showcase>.hero-slider-dots{
  bottom:101px!important;
  left:auto!important;
  right:34px!important;
  transform:none!important;
  background:rgba(4,15,29,.72)!important;
  border:1px solid rgba(120,173,220,.2)!important;
}
.hero-slider-dot{background:#66819f!important}
.hero-slider-dot.active{background:#12a8ff!important}

/* Responsive */
@media(max-width:1050px){
  .hero-showcase-inner{grid-template-columns:55% 45%!important}
  .hero-slide-full:after{right:-5%;width:49vw;opacity:.9}
  .hero-copy h1{font-size:clamp(54px,6vw,70px)!important}
}
@media(max-width:900px){
  .hero-showcase{min-height:auto!important}
  .hero-showcase-inner{
    min-height:auto!important;
    grid-template-columns:1fr!important;
    padding-top:48px!important;
    padding-bottom:315px!important;
  }
  .hero-copy{padding:10px 0 20px!important;max-width:720px!important}
  .hero-copy h1{font-size:58px!important;letter-spacing:-3px!important}
  .hero-copy>p{font-size:17px!important}
  .hero-slide-full:after{
    top:auto;
    bottom:92px;
    right:50%;
    width:min(680px,92vw);
    height:300px;
    transform:translateX(50%);
    opacity:1;
  }
  .hero-feature-row{grid-template-columns:repeat(3,1fr)!important}
  .hero-bottom-strip{
    grid-template-columns:repeat(3,1fr)!important;
    min-height:78px!important;
  }
  .hero-bottom-strip>div{padding:0 12px!important}
  .hero-bottom-strip strong{font-size:12px!important}
  .hero-bottom-strip small{font-size:10px!important}
  .hero-showcase>.hero-slider-dots{bottom:89px!important;right:18px!important}
}
@media(max-width:600px){
  .hero-showcase-inner{padding-bottom:255px!important}
  .hero-copy h1{font-size:45px!important;letter-spacing:-2.5px!important}
  .hero-copy>p{font-size:16px!important}
  .hero-actions{gap:10px!important;flex-wrap:wrap!important}
  .hero-feature-row{grid-template-columns:repeat(2,1fr)!important}
  .hero-slide-full:after{
    bottom:168px;
    width:94vw;
    height:210px;
  }
  .hero-bottom-strip{
    grid-template-columns:1fr!important;
    min-height:0!important;
  }
  .hero-bottom-strip>div{
    min-height:53px!important;
    border-right:0!important;
    border-bottom:1px solid rgba(133,181,226,.13)!important;
  }
  .hero-bottom-strip>div:last-child{border-bottom:0!important}
  .hero-showcase>.hero-slider-dots{
    bottom:166px!important;
    right:50%!important;
    transform:translateX(50%)!important;
  }
}


/* =========================================================
   FINAL SAFETY OVERRIDES — HEADER LOGO + HERO VISIBILITY
   ========================================================= */

/* There must be exactly one Dynexal mark. The SVG is .logo-mark;
   the legacy pseudo-element on .logo-copy is intentionally disabled. */
.site-header .logo-copy::before,
.footer .logo-copy::before{
  content:none!important;
  display:none!important;
}

.site-header .logo-mark,
.footer .logo-mark{
  display:block!important;
  visibility:visible!important;
  width:52px!important;
  height:52px!important;
  flex:0 0 52px!important;
  margin:0!important;
  background:url('assets/dynexal-mark.svg') center/contain no-repeat!important;
}

.site-header .logo-copy,
.footer .logo-copy{
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  gap:0!important;
}

.site-header .logo-copy small,
.footer .logo-copy small{
  display:block!important;
}

@media(max-width:900px){
  .site-header .logo-mark{
    width:40px!important;
    height:40px!important;
    flex-basis:40px!important;
  }
}

/* Fail-safe: the first hero slide is visible even if the carousel JS
   is delayed or the browser restores a cached DOM state. */
.hero-slider-track{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
}

.hero-slide-full{
  display:block!important;
  position:absolute!important;
  inset:0!important;
  visibility:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
}

.hero-slide-full.active{
  visibility:visible!important;
  opacity:1!important;
  pointer-events:auto!important;
  z-index:2!important;
}

.hero-slide-full .container{
  display:grid!important;
  visibility:visible!important;
  opacity:1!important;
}

/* Keep the indicators in the intended bottom-right position. */
.hero-slider-dots{
  position:absolute!important;
  z-index:20!important;
  right:34px!important;
  bottom:101px!important;
  left:auto!important;
  top:auto!important;
  transform:none!important;
  display:flex!important;
  gap:9px!important;
  padding:8px 12px!important;
  border-radius:999px!important;
  background:rgba(4,15,29,.72)!important;
}

.hero-slider-dot{
  display:block!important;
  width:9px!important;
  height:9px!important;
  min-width:9px!important;
  min-height:9px!important;
  padding:0!important;
  border:0!important;
  border-radius:50%!important;
  background:#66819f!important;
}

.hero-slider-dot.active{
  background:#12a8ff!important;
  transform:scale(1.25)!important;
}


/* =========================================================
   FINAL SLIDER + HOVER MENU FIX
   ========================================================= */
.hero-slider-track{
  overflow:hidden!important;
}
.hero-slide-full{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  transform:translate3d(100%,0,0)!important;
  z-index:1!important;
  transition:transform .8s cubic-bezier(.22,.61,.36,1)!important;
  pointer-events:none!important;
}
.hero-slide-full.active{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  transform:translate3d(0,0,0)!important;
  z-index:3!important;
  pointer-events:auto!important;
}
.hero-slide-full.slide-out-left{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  transform:translate3d(-100%,0,0)!important;
  z-index:2!important;
  pointer-events:none!important;
}
@media(prefers-reduced-motion:reduce){
  .hero-slide-full,.hero-slide-full.active,.hero-slide-full.slide-out-left{
    transition:none!important;
    transform:translate3d(0,0,0)!important;
  }
}

/* Desktop hover dropdowns restored. */
@media(min-width:901px){
  .site-header .nav .has-dropdown{
    position:relative!important;
    display:flex!important;
    align-items:center!important;
    height:82px!important;
  }
  .site-header .nav .has-dropdown>a{
    height:82px!important;
    display:flex!important;
    align-items:center!important;
    position:relative!important;
    color:#cbd5e1!important;
  }
  .site-header .nav .has-dropdown:hover>a,
  .site-header .nav .has-dropdown:focus-within>a{
    color:#fff!important;
  }
  .site-header .nav .has-dropdown>a:after{
    content:""!important;
    display:inline-block!important;
    width:6px!important;
    height:6px!important;
    margin-left:7px!important;
    margin-top:-4px!important;
    border-right:1.5px solid currentColor!important;
    border-bottom:1.5px solid currentColor!important;
    transform:rotate(45deg)!important;
    opacity:.8!important;
  }
  .site-header .nav .has-dropdown>a.active:after{
    background:none!important;
  }
  .site-header .nav .dropdown-menu{
    position:absolute!important;
    top:calc(100% - 1px)!important;
    left:50%!important;
    transform:translate(-50%,8px)!important;
    min-width:245px!important;
    padding:8px!important;
    background:rgba(7,18,34,.99)!important;
    border:1px solid #29415f!important;
    border-radius:12px!important;
    box-shadow:0 20px 45px rgba(0,0,0,.38)!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transition:opacity .16s ease,transform .16s ease,visibility .16s ease!important;
    z-index:1000!important;
  }
  .site-header .nav .dropdown-menu:before{
    content:""!important;
    position:absolute!important;
    top:-9px!important;
    left:0!important;
    right:0!important;
    height:9px!important;
  }
  .site-header .nav .dropdown-menu a{
    display:block!important;
    height:auto!important;
    padding:11px 13px!important;
    border-radius:8px!important;
    color:#cbd8e8!important;
    font-size:14px!important;
    line-height:1.35!important;
    white-space:nowrap!important;
  }
  .site-header .nav .dropdown-menu a:hover,
  .site-header .nav .dropdown-menu a:focus-visible{
    background:#123258!important;
    color:#fff!important;
  }
  .site-header .nav .has-dropdown:hover>.dropdown-menu,
  .site-header .nav .has-dropdown:focus-within>.dropdown-menu{
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transform:translate(-50%,0)!important;
  }
}
@media(max-width:900px){
  .site-header .nav .has-dropdown{
    width:100%!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    height:auto!important;
  }
  .site-header .nav .has-dropdown>a{
    height:auto!important;
    width:100%!important;
    padding:4px 0!important;
  }
  .site-header .nav .dropdown-menu{
    display:none!important;
    position:static!important;
    width:100%!important;
    padding:4px 0 4px 14px!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
  }
  .site-header .nav .has-dropdown:hover>.dropdown-menu,
  .site-header .nav .has-dropdown:focus-within>.dropdown-menu{
    display:block!important;
  }
}


/* Final slider engine: one horizontal track, slides never disappear. */
.hero-slider-track{
  display:flex!important;
  flex-direction:row!important;
  width:600%!important;
  height:100%!important;
  inset:0!important;
  overflow:visible!important;
  transform:translate3d(0,0,0);
  transition:transform .8s cubic-bezier(.22,.61,.36,1)!important;
  will-change:transform;
}
.hero-slide-full,
.hero-slide-full.active,
.hero-slide-full.slide-out-left{
  position:relative!important;
  inset:auto!important;
  flex:0 0 16.666667%!important;
  width:16.666667%!important;
  height:100%!important;
  min-width:0!important;
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  transform:none!important;
  transition:none!important;
  z-index:1!important;
  pointer-events:auto!important;
}
@media(prefers-reduced-motion:reduce){
  .hero-slider-track{transition:none!important}
}

/* Dropdowns are hidden until hover/focus; no arrow marker. */
.site-header .nav .has-dropdown>a:after{
  content:none!important;
  display:none!important;
}


/* =========================================================
   HOMEPAGE PROFESSIONAL BRAND LAYER
   ========================================================= */
.dynexal-stack{
  position:relative;
  z-index:2;
  padding:24px 0;
  background:#08182c;
  border-top:1px solid rgba(113,165,218,.12);
  border-bottom:1px solid rgba(113,165,218,.12);
}
.stack-label{
  display:block;
  margin-bottom:13px;
  color:#7fa4c8;
  font-size:10px;
  font-weight:800;
  letter-spacing:1.7px;
}
.stack-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:9px;
}
.stack-row span{
  padding:9px 13px;
  border:1px solid rgba(112,164,214,.20);
  border-radius:999px;
  background:rgba(255,255,255,.035);
  color:#d9e7f5;
  font-size:12px;
  font-weight:650;
  letter-spacing:.1px;
}
.dynexal-why{
  background:#f7f9fc;
  padding-top:92px!important;
  padding-bottom:92px!important;
}
.why-intro{
  max-width:720px;
  margin-bottom:38px;
}
.why-intro h2{
  margin:12px 0 16px;
  font-size:clamp(38px,4.5vw,58px);
  line-height:1.04;
  letter-spacing:-2.5px;
  color:#102033;
}
.why-intro h2 span{color:#1679c9}
.why-intro p{
  max-width:650px;
  margin:0;
  color:#64748b;
  font-size:18px;
  line-height:1.7;
}
.why-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.why-grid article{
  position:relative;
  min-height:205px;
  padding:28px;
  border:1px solid #dce5ef;
  border-radius:18px;
  background:#fff;
  box-shadow:0 12px 32px rgba(19,43,70,.06);
  overflow:hidden;
}
.why-grid article:after{
  content:"";
  position:absolute;
  right:-40px;
  bottom:-55px;
  width:150px;
  height:150px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(20,151,255,.12),transparent 68%);
}
.why-grid article>span{
  color:#1679c9;
  font-size:11px;
  font-weight:900;
  letter-spacing:1.4px;
}
.why-grid h3{
  margin:18px 0 9px;
  color:#102033;
  font-size:22px;
}
.why-grid p{
  margin:0;
  color:#64748b;
  line-height:1.65;
  font-size:15px;
}
html[data-theme="dark"] .dynexal-why{
  background:#07111f!important;
}
html[data-theme="dark"] .why-intro h2{
  color:#f2f7ff!important;
}
html[data-theme="dark"] .why-intro p{
  color:#9fb0c4!important;
}
html[data-theme="dark"] .why-grid article{
  background:#0d1a2b!important;
  border-color:#203550!important;
  box-shadow:0 12px 32px rgba(0,0,0,.22)!important;
}
html[data-theme="dark"] .why-grid h3{
  color:#f2f7ff!important;
}
html[data-theme="dark"] .why-grid p{
  color:#aebdd0!important;
}
html[data-theme="dark"] .stack-row span{
  background:rgba(255,255,255,.04)!important;
  border-color:#29415f!important;
}
@media(max-width:850px){
  .why-grid{grid-template-columns:1fr}
  .dynexal-why{padding-top:70px!important;padding-bottom:70px!important}
}
@media(max-width:600px){
  .dynexal-stack{padding:20px 0}
  .stack-row{gap:7px}
  .stack-row span{padding:8px 10px;font-size:11px}
  .why-intro h2{font-size:39px;letter-spacing:-1.8px}
  .why-intro p{font-size:16px}
}


/* Six-slide hero responsive refinements */
@media(max-width:900px){
  .hero-slide-full:nth-child(4):after,
  .hero-slide-full:nth-child(5):after,
  .hero-slide-full:nth-child(6):after{width:min(680px,92vw);height:300px}
}
@media(max-width:600px){
  .hero-slide-full:nth-child(4):after,
  .hero-slide-full:nth-child(5):after,
  .hero-slide-full:nth-child(6):after{width:94vw;height:210px}
}

/* =========================================================
   DYNEXAL SLOW CONTINUOUS CAPABILITIES MARQUEE
   ========================================================= */
.dynexal-marquee-section{
  position:relative;
  padding:70px 0 76px;
  overflow:hidden;
  background:#f7faff;
  border-top:1px solid #e5edf6;
  border-bottom:1px solid #e5edf6;
}
.marquee-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:30px;
  margin-bottom:32px;
}
.marquee-heading h2{
  margin:10px 0 0;
  color:#102033;
  font-size:clamp(30px,3.8vw,48px);
  line-height:1.05;
  letter-spacing:-2px;
}
.marquee-heading h2 span{color:#1679c9}
.marquee-heading p{
  max-width:390px;
  margin:0 0 4px;
  color:#64748b;
  font-size:15px;
  line-height:1.65;
}
.dynexal-marquee{
  width:100%;
  overflow:hidden;
  position:relative;
  padding:8px 0 18px;
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}
.dynexal-marquee-track{
  display:flex;
  width:max-content;
  gap:18px;
  animation:dynexal-marquee-left 42s linear infinite!important;animation-play-state:running!important;
  will-change:transform;
}
.dynexal-marquee:hover .dynexal-marquee-track{
  animation-play-state:paused;
}
.marquee-card{
  flex:0 0 285px;
  min-height:128px;
  padding:22px 22px;
  display:flex;
  align-items:center;
  gap:16px;
  border:1px solid #dbe6f1;
  border-top:3px solid #1d7ed0;
  border-radius:17px;
  background:#fff;
  box-shadow:0 10px 28px rgba(18,50,82,.08);
}
.marquee-card:nth-child(4n+2){border-top-color:#20a0a8}
.marquee-card:nth-child(4n+3){border-top-color:#5267d9}
.marquee-card:nth-child(4n+4){border-top-color:#e27b32}
.marquee-icon{
  flex:0 0 48px;
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border-radius:13px;
  background:#edf6ff;
  color:#1679c9;
  font-size:15px;
  font-weight:850;
}
.marquee-card:nth-child(4n+2) .marquee-icon{background:#edfafa;color:#16858b}
.marquee-card:nth-child(4n+3) .marquee-icon{background:#eff0ff;color:#5267d9}
.marquee-card:nth-child(4n+4) .marquee-icon{background:#fff4ea;color:#d96c1f}
.marquee-card strong{
  display:block;
  color:#17243a;
  font-size:16px;
  line-height:1.25;
}
.marquee-card small{
  display:block;
  margin-top:7px;
  color:#66788f;
  font-size:12px;
  line-height:1.4;
}
@keyframes dynexal-marquee-left{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(calc(-50% - 9px),0,0)}
}
html[data-theme="dark"] .dynexal-marquee-section{
  background:#07111f!important;
  border-color:#1c3048!important;
}
html[data-theme="dark"] .marquee-heading h2{color:#f2f7ff!important}
html[data-theme="dark"] .marquee-heading p{color:#9fb0c4!important}
html[data-theme="dark"] .marquee-card{
  background:#0d1a2b!important;
  border-color:#203550!important;
  box-shadow:0 10px 28px rgba(0,0,0,.2)!important;
}
html[data-theme="dark"] .marquee-card strong{color:#f2f7ff!important}
html[data-theme="dark"] .marquee-card small{color:#aebdd0!important}
@media(max-width:800px){
  .dynexal-marquee-section{padding:58px 0 62px}
  .marquee-heading{display:block;margin-bottom:24px}
  .marquee-heading p{margin-top:14px}
  .marquee-card{flex-basis:260px;min-height:116px;padding:18px}
  .dynexal-marquee-track{gap:14px;animation-duration:38s}
}

.dynexal-marquee .marquee-card{
  color:inherit;
  text-decoration:none;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.dynexal-marquee .marquee-card:hover{
  transform:translateY(-5px);
  box-shadow:0 16px 34px rgba(18,50,82,.13);
  border-color:#9bc5e8;
}
.marquee-card em{
  display:block;
  margin-top:8px;
  color:#1679c9;
  font-size:11px;
  font-style:normal;
  font-weight:800;
}
html[data-theme="dark"] .dynexal-marquee .marquee-card:hover{box-shadow:0 16px 34px rgba(0,0,0,.28)}
html[data-theme="dark"] .marquee-card em{color:#6fc6ff}


/* Marquee layout hardening: keep every capability in one horizontal row. */
.dynexal-marquee{display:block!important;overflow:hidden!important}
.dynexal-marquee-track{
  display:flex!important;
  flex-direction:row!important;
  flex-wrap:nowrap!important;
  align-items:stretch!important;
  width:max-content!important;
  min-width:max-content!important;
}
.dynexal-marquee-track>.marquee-card{
  display:flex!important;
  flex:0 0 285px!important;
  width:285px!important;
  min-width:285px!important;
  max-width:285px!important;
  box-sizing:border-box!important;
  margin:0!important;
}
@media(max-width:800px){
  .dynexal-marquee-track>.marquee-card{
    flex-basis:260px!important;
    width:260px!important;
    min-width:260px!important;
    max-width:260px!important;
  }
}


/* =========================================================
   MARQUEE REBUILD — FORCE A SINGLE HORIZONTAL TRACK
   ========================================================= */
.dynexal-marquee-section .dynexal-marquee{
  display:block!important;
  position:relative!important;
  width:100%!important;
  height:170px!important;
  overflow:hidden!important;
  padding:10px 0 20px!important;
  box-sizing:border-box!important;
}
.dynexal-marquee-section .dynexal-marquee-track{
  position:absolute!important;
  left:0!important;
  top:10px!important;
  display:flex!important;
  flex-direction:row!important;
  flex-wrap:nowrap!important;
  align-items:stretch!important;
  justify-content:flex-start!important;
  gap:18px!important;
  width:max-content!important;
  min-width:max-content!important;
  height:128px!important;
  margin:0!important;
  padding:0!important;
  animation:dynexal-marquee-run 48s linear infinite!important;animation-play-state:running!important;
  transform:translate3d(0,0,0)!important;
  will-change:transform!important;
}
.dynexal-marquee-section .dynexal-marquee-track > .marquee-card{
  position:relative!important;
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:flex-start!important;
  flex:0 0 300px!important;
  width:300px!important;
  min-width:300px!important;
  max-width:300px!important;
  height:128px!important;
  min-height:128px!important;
  max-height:128px!important;
  box-sizing:border-box!important;
  margin:0!important;
  padding:20px 22px!important;
  white-space:normal!important;
  overflow:hidden!important;
}
.dynexal-marquee-section .dynexal-marquee-track > .marquee-card > div{
  min-width:0!important;
  flex:1 1 auto!important;
}
.dynexal-marquee-section .dynexal-marquee-track > .marquee-card .marquee-icon{
  flex:0 0 48px!important;
  width:48px!important;
  min-width:48px!important;
  max-width:48px!important;
}
.dynexal-marquee-section .dynexal-marquee-track > .marquee-card strong,
.dynexal-marquee-section .dynexal-marquee-track > .marquee-card small,
.dynexal-marquee-section .dynexal-marquee-track > .marquee-card em{
  white-space:normal!important;
}
@keyframes dynexal-marquee-run{
  from{transform:translate3d(0,0,0)!important}
  to{transform:translate3d(calc(-50% - 9px),0,0)!important}
}
.dynexal-marquee-section .dynexal-marquee:hover .dynexal-marquee-track{
  animation-play-state:paused!important;
}
@media(max-width:800px){
  .dynexal-marquee-section .dynexal-marquee{
    height:158px!important;
  }
  .dynexal-marquee-section .dynexal-marquee-track{
    height:116px!important;
    top:10px!important;
    gap:14px!important;
    animation-duration:42s!important;
  }
  .dynexal-marquee-section .dynexal-marquee-track > .marquee-card{
    flex-basis:260px!important;
    width:260px!important;
    min-width:260px!important;
    max-width:260px!important;
    height:116px!important;
    min-height:116px!important;
    max-height:116px!important;
  }
}
@media(prefers-reduced-motion:reduce){
  .dynexal-marquee-section .dynexal-marquee-track{
    animation:none!important;
  }
}


/* =========================================================
   MOBILE HOMEPAGE CLEANUP — 2026-09-26
   Keep the mobile hero focused: copy first, visual removed,
   compact capability strip, no overlapping artwork.
   ========================================================= */
@media (max-width: 900px){
  .site-header .nav{
    display:none!important;
  }
  .site-header .menu-btn{
    display:block!important;
    flex:0 0 auto!important;
    width:44px!important;
    height:44px!important;
    padding:0!important;
    border:1px solid rgba(148,163,184,.28)!important;
    border-radius:10px!important;
    background:rgba(255,255,255,.05)!important;
    color:#fff!important;
    font-size:23px!important;
    line-height:44px!important;
    text-align:center!important;
    cursor:pointer!important;
  }

  .hero-showcase{
    min-height:570px!important;
    height:570px!important;
    overflow:hidden!important;
  }
  .hero-showcase-inner{
    min-height:0!important;
    height:auto!important;
    padding-top:30px!important;
    padding-bottom:105px!important;
    display:block!important;
  }
  .hero-copy{
    padding:0!important;
    max-width:none!important;
  }
  .hero-copy h1{
    margin:17px 0 16px!important;
    font-size:clamp(40px,9vw,52px)!important;
    line-height:1.02!important;
    letter-spacing:-2.2px!important;
  }
  .hero-copy>p{
    max-width:100%!important;
    margin:0 0 10px!important;
    font-size:15px!important;
    line-height:1.48!important;
  }
  .hero-actions{
    margin:22px 0 0!important;
    gap:9px!important;
  }
  .hero-primary,.hero-secondary{
    padding:12px 15px!important;
    font-size:13px!important;
  }

  /* The large desktop artwork is intentionally hidden on phones.
     It was competing with the headline and causing the overlap seen
     in the mobile screenshot. */
  .hero-slide-full:after{
    display:none!important;
  }

  /* The six-item desktop feature row is too dense for a phone. */
  .hero-feature-row{
    display:none!important;
  }

  .hero-slider-dots{
    bottom:92px!important;
    right:50%!important;
    left:auto!important;
    transform:translateX(50%)!important;
    padding:6px 9px!important;
    gap:7px!important;
  }
  .hero-slider-dot{
    width:7px!important;
    height:7px!important;
    min-width:7px!important;
    min-height:7px!important;
  }

  .hero-bottom-strip{
    left:0!important;
    right:0!important;
    bottom:0!important;
    transform:none!important;
    width:100%!important;
    min-height:78px!important;
    height:78px!important;
    grid-template-columns:repeat(3,1fr)!important;
    background:rgba(7,42,88,.96)!important;
  }
  .hero-bottom-strip>div{
    min-height:78px!important;
    padding:8px 6px!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    align-items:center!important;
    gap:3px!important;
    text-align:center!important;
    border-right:1px solid rgba(133,181,226,.16)!important;
    border-bottom:0!important;
  }
  .hero-bottom-strip>div:first-child{
    padding-left:6px!important;
  }
  .hero-bottom-strip>div span{
    font-size:17px!important;
  }
  .hero-bottom-strip strong{
    font-size:10px!important;
    line-height:1.15!important;
  }
  .hero-bottom-strip small{
    font-size:8px!important;
    line-height:1.15!important;
  }
}

@media (max-width: 560px){
  .site-header .logo{
    gap:8px!important;
    max-width:calc(100% - 58px)!important;
  }
  .site-header .logo-mark{
    width:38px!important;
    height:38px!important;
    flex-basis:38px!important;
  }
  .site-header .logo-copy strong{
    font-size:17px!important;
  }
  .site-header .logo-copy small{
    font-size:9px!important;
    margin-top:3px!important;
  }
  .hero-showcase{
    min-height:555px!important;
    height:555px!important;
  }
  .hero-showcase-inner{
    padding-top:27px!important;
    padding-bottom:95px!important;
  }
  .hero-badge{
    font-size:8px!important;
    letter-spacing:.8px!important;
    padding:6px 9px!important;
  }
  .hero-copy h1{
    font-size:42px!important;
    margin:15px 0 15px!important;
  }
  .hero-copy>p{
    font-size:14px!important;
    line-height:1.45!important;
  }
  .hero-actions{
    margin-top:18px!important;
  }
  .hero-primary,.hero-secondary{
    padding:11px 13px!important;
    font-size:12px!important;
  }
}


/* MOBILE HARDENING — supports Android browsers that expose a wider CSS viewport */
@media (max-width:1100px){
  html,body{max-width:100%;overflow-x:hidden!important}
  .hero-showcase{min-height:570px!important;height:570px!important;overflow:hidden!important}
  .hero-showcase-inner{height:auto!important;min-height:0!important;padding:30px 20px 105px!important;display:block!important}
  .hero-copy{max-width:100%!important;padding:0!important}
  .hero-copy h1{font-size:clamp(40px,8vw,52px)!important;line-height:1.03!important;letter-spacing:-2px!important}
  .hero-copy>p{max-width:100%!important;font-size:15px!important;line-height:1.5!important}
  .hero-slide-full:after{display:none!important}
  .hero-feature-row{display:none!important}
  .hero-slider-dots{bottom:92px!important;right:50%!important;left:auto!important;transform:translateX(50%)!important}
  .hero-bottom-strip{left:0!important;right:0!important;bottom:0!important;width:100%!important;transform:none!important;grid-template-columns:repeat(3,1fr)!important;min-height:78px!important;height:78px!important}
  .hero-bottom-strip>div{min-height:78px!important;padding:8px 5px!important;text-align:center!important}
  .hero-bottom-strip strong{font-size:10px!important}
  .hero-bottom-strip small{font-size:8px!important}
}
@media (max-width:700px){
  .hero-showcase{min-height:555px!important;height:555px!important}
  .hero-showcase-inner{padding:27px 16px 95px!important}
  .hero-copy h1{font-size:42px!important;margin:15px 0!important}
  .hero-copy>p{font-size:14px!important}
  .hero-actions{gap:8px!important;margin-top:18px!important}
  .hero-primary,.hero-secondary{padding:11px 13px!important;font-size:12px!important}
  .hero-badge{font-size:8px!important;padding:6px 9px!important}
}

/* Final site-wide heading balance: medium scale for the homepage sections. */
.hero-showcase .hero-copy h1,.hero-copy h1{font-size:clamp(46px,4.8vw,62px)!important;line-height:1.04!important;letter-spacing:-2.4px!important}
.why-intro h2{font-size:clamp(38px,3.8vw,48px)!important;line-height:1.08!important;letter-spacing:-1.5px!important}
.marquee-heading h2{font-size:clamp(30px,3.2vw,42px)!important;line-height:1.12!important}
.dynexal-insights .section-heading h2{font-size:clamp(30px,3.2vw,42px)!important}
.feature-copy h3{font-size:clamp(25px,2.6vw,34px)!important}
.interview-promo h2{font-size:30px!important}
.testimonial-heading h2{font-size:32px!important}
@media(max-width:900px){.hero-showcase .hero-copy h1,.hero-copy h1{font-size:44px!important}.why-intro h2{font-size:38px!important}.marquee-heading h2,.dynexal-insights .section-heading h2{font-size:32px!important}.feature-copy h3{font-size:27px!important}}
@media(max-width:560px){.hero-showcase .hero-copy h1,.hero-copy h1{font-size:38px!important}.why-intro h2{font-size:32px!important}.marquee-heading h2,.dynexal-insights .section-heading h2{font-size:28px!important}.feature-copy h3{font-size:24px!important}.interview-promo h2{font-size:26px!important}.testimonial-heading h2{font-size:28px!important}}

/* Extra heading reduction — compact professional scale */
.hero-showcase .hero-copy h1,.hero-copy h1{font-size:clamp(40px,4.1vw,54px)!important;line-height:1.06!important;letter-spacing:-2px!important}
.why-intro h2{font-size:clamp(34px,3.4vw,42px)!important}
.marquee-heading h2,.dynexal-insights .section-heading h2{font-size:clamp(28px,2.8vw,36px)!important}
.feature-copy h3{font-size:clamp(23px,2.3vw,30px)!important}
.section-heading h2,.project-grid h2,.newsletter h2{font-size:32px!important}
.interview-promo h2{font-size:28px!important}
.testimonial-heading h2{font-size:29px!important}
@media(max-width:900px){.hero-showcase .hero-copy h1,.hero-copy h1{font-size:40px!important}.why-intro h2{font-size:34px!important}.marquee-heading h2,.dynexal-insights .section-heading h2{font-size:29px!important}.section-heading h2,.project-grid h2,.newsletter h2{font-size:29px!important}}
@media(max-width:560px){.hero-showcase .hero-copy h1,.hero-copy h1{font-size:34px!important}.why-intro h2{font-size:30px!important}.marquee-heading h2,.dynexal-insights .section-heading h2,.section-heading h2,.project-grid h2,.newsletter h2{font-size:26px!important}.feature-copy h3{font-size:22px!important}.interview-promo h2{font-size:24px!important}.testimonial-heading h2{font-size:26px!important}}

/* Final compact homepage section scale */
.why-intro{max-width:650px;margin-bottom:28px}
.why-intro h2{font-size:clamp(34px,3.5vw,46px)!important;letter-spacing:-1.6px!important;margin:9px 0 12px}
.why-intro p{font-size:16px;line-height:1.55}
.why-grid{gap:14px}
.why-grid article{min-height:175px;padding:22px;border-radius:14px}
.why-grid h3{margin:14px 0 7px;font-size:19px}
.why-grid p{font-size:13px;line-height:1.55}
.dynexal-marquee-section{padding:55px 0 60px}
.marquee-heading{gap:24px;margin-bottom:24px}
.marquee-heading h2{font-size:clamp(28px,3vw,40px)!important}
.dynexal-insights .section-heading{margin-bottom:24px}
.dynexal-insights .section-heading h2{font-size:clamp(28px,3vw,40px)!important}
.feature-content{gap:26px}
.feature-copy h3{font-size:clamp(23px,2.4vw,31px)!important}
.intel-panels{gap:16px;margin-bottom:16px}
.intel-panel{padding:19px}
.insight-card{padding:20px}
.interview-promo{padding:24px!important}
.interview-promo h2{font-size:27px!important}
.testimonial-heading h2{font-size:30px!important}
@media(max-width:900px){
 .hero-showcase{min-height:auto}
 .hero-showcase-inner{min-height:auto;padding-top:35px}
 .hero-copy{padding:10px 0 30px}
 .hero-copy h1{font-size:44px!important}
 .section{padding:55px 0}
 .why-grid article{min-height:auto}
}
@media(max-width:560px){
 .hero-copy h1{font-size:37px!important;margin:14px 0}
 .hero-copy>p{font-size:14px}
 .hero-actions{margin:18px 0 22px}
 .section{padding:48px 0}
 .why-intro h2{font-size:31px!important}
 .why-intro p{font-size:14px}
 .why-grid article{padding:18px}
 .marquee-heading h2,.dynexal-insights .section-heading h2{font-size:27px!important}
 .interview-promo h2{font-size:24px!important}
}

/* FINAL HERO VISUAL FIX — avoid rendering hero artwork twice.
   Slides 1–3 use the ::after artwork positioned on the right; the full-slide
   background image would duplicate its embedded typography across the hero. */
.hero-showcase .hero-slider-track .hero-slide-full:nth-child(1),
.hero-showcase .hero-slider-track .hero-slide-full:nth-child(2),
.hero-showcase .hero-slider-track .hero-slide-full:nth-child(3){
  background-image:none!important;
  background-color:transparent!important;
}