/* 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}
}