:root{--navy:#071a3a;--blue:#147ee8;--green:#10b981;--muted:#62718a;--line:#e3ebf4;--head:"Plus Jakarta Sans",sans-serif;--body:"Inter",sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--navy);font-family:var(--body);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}h1,h2,h3{font-family:var(--head);font-weight:800;letter-spacing:-.045em}.site-header{position:sticky;top:0;z-index:1000;background:rgba(255,255,255,.94);backdrop-filter:blur(14px);border-bottom:1px solid #edf2f7}.navbar{min-height:70px}.navbar-brand img{width:145px}.nav-link{font-size:13px;font-weight:600;color:#263653!important}.nav-link:hover,.nav-link.active{color:var(--blue)!important}.site-header .btn{font-size:12px;font-weight:700}.hero{position:relative;overflow:hidden;background:linear-gradient(115deg,#f4fbff,#fff 53%,#edfff9);min-height:600px}.hero-row{min-height:600px}.eyebrow{font-size:10px;letter-spacing:.28em;font-weight:800;color:#0781cb;margin-bottom:12px}.hero h1{font-size:clamp(45px,5vw,63px);line-height:1.04;margin-bottom:20px}.hero h1 span{color:var(--blue)}.lead{font-size:16px;color:#50617a;line-height:1.7;max-width:570px;margin-bottom:25px}.hero .btn{font-size:13px;font-weight:700}.benefits{display:flex;gap:20px;flex-wrap:wrap;margin-top:28px}.benefits span{display:grid;grid-template-columns:30px auto;column-gap:7px;align-items:center}.benefits i{grid-row:span 2;width:30px;height:30px;border:1px solid #dce7f2;border-radius:50%;display:grid;place-items:center;color:var(--blue);background:#fff}.benefits b{font-size:11px;line-height:1.1}.benefits small{font-size:10px;color:#718096}.hero-art{position:relative;height:560px}.dashboard{position:absolute;width:720px;max-width:none;right:-100px;top:100px;filter:drop-shadow(0 25px 35px rgba(8,35,65,.16));transform:perspective(1200px) rotateY(-4deg)}.note{position:absolute;right:0;top:60px;font:28px/1.02 cursive;transform:rotate(-7deg)}.note i{display:block;margin:10px 0 0 25px;font-size:20px}.orb{position:absolute;border-radius:50%;filter:blur(2px);opacity:.55}.o1{width:500px;height:500px;left:-300px;bottom:-300px;background:#d9f1ff}.o2{width:400px;height:400px;right:-250px;top:-250px;background:#dffcef}.section{padding:84px 0}.heading h2,.portfolio h2{font-size:36px;line-height:1.15;margin:0}.heading p,.portfolio>p{color:var(--muted);font-size:14px}.cardx{height:100%;padding:26px;border:1px solid var(--line);border-radius:15px;background:#fff;box-shadow:0 12px 30px rgba(7,26,58,.05);transition:.25s}.cardx:hover,.project:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(7,26,58,.1)}.ico{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;color:#fff;font-size:21px;margin-bottom:15px}.green{background:#16b980}.blue{background:#168bea}.purple{background:#7a54d8}.orange{background:#f39838}.cardx h3{font-size:16px;margin-bottom:7px;letter-spacing:-.02em}.cardx p{font-size:12.5px;color:#5e6d83;min-height:62px}.cardx a{font-size:12px;font-weight:700;color:#0b9d77}.portfolio{background:linear-gradient(125deg,#eef7ff,#f7fbff 55%,#e8f4ff)}.portfolio h2{margin-bottom:4px}.more{font-size:12px;font-weight:700;color:var(--blue)}.project{overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:12px;transition:.25s}.project img{width:100%;display:block;aspect-ratio:16/9;object-fit:cover}.project h3{text-align:center;font-size:13px;line-height:1.25;margin:13px 8px 16px}.cta{padding:0 0 28px;background:linear-gradient(125deg,#eef7ff,#f7fbff)}.cta-box{min-height:170px;padding:38px 52px;background:#071b3a;color:#fff;border-radius:18px;display:flex;align-items:center;justify-content:space-between;gap:30px;position:relative;overflow:hidden}.cta-box h2{font-size:29px;margin:0 0 5px}.cta-box p{font-size:13px;color:#bdcde0;margin:0}.cta-box .eyebrow{color:#32b8f1}.hidden{display:none}footer{padding:28px 0}.footer-logo{width:135px}.links{display:flex;gap:20px}.links a,.social i,footer small{font-size:11px;color:#62718a}.social{display:flex;gap:14px}@media(max-width:991px){.hero-row{padding:55px 0}.hero{min-height:auto}.hero-art{height:440px}.dashboard{width:650px;right:-110px;top:50px}.note{right:10px;top:15px}.cta-box{padding:34px;flex-direction:column;align-items:flex-start}}@media(max-width:575px){.navbar-brand img{width:125px}.hero-row{padding:45px 0}.hero h1{font-size:42px}.lead{font-size:15px}.hero-art{height:320px}.dashboard{width:500px;right:-150px;top:25px}.note{font-size:20px}.section{padding:65px 0}.heading h2,.portfolio h2{font-size:30px}.more{display:none}.cta-box{padding:28px 24px}.cta-box h2{font-size:25px}.links{order:3;width:100%;flex-wrap:wrap}.social{margin-left:auto}}
/* V5 MOTION */
.hero-copy>*{opacity:0;transform:translateY(24px);animation:reveal .8s cubic-bezier(.22,1,.36,1) forwards}.hero-copy .eyebrow{animation-delay:.08s}.hero-copy h1{animation-delay:.18s}.hero-copy .lead{animation-delay:.3s}.hero-copy .d-flex{animation-delay:.42s}.hero-copy .benefits{animation-delay:.54s}@keyframes reveal{to{opacity:1;transform:none}}.hero-art{opacity:0;transform:translateX(40px) scale(.96);animation:visualIn 1s cubic-bezier(.22,1,.36,1) .15s forwards}@keyframes visualIn{to{opacity:1;transform:none}}
.dashboard-ui{position:absolute;width:720px;height:445px;right:-95px;top:82px;display:grid;grid-template-columns:145px 1fr;overflow:hidden;border:7px solid #071a3a;border-radius:24px;background:#f7fbff;box-shadow:0 30px 65px rgba(7,26,58,.22);transform:perspective(1300px) rotateY(-4deg);animation:float 5.5s ease-in-out 1.1s infinite}@keyframes float{50%{transform:perspective(1300px) rotateY(-4deg) translateY(-8px)}}.dash-sidebar{background:linear-gradient(160deg,#071a3a,#0c2c58);color:#b9c9df;padding:24px 15px}.dash-logo{color:white;font-weight:800;font-size:17px;margin-bottom:28px}.dash-logo span{color:#1caee9}.dash-nav{font-size:9px;padding:10px 8px;border-radius:8px;margin:3px 0}.dash-nav.active{color:white;background:rgba(19,174,233,.16)}.dash-content{padding:25px;background:#f8fbff}.dash-head{font-weight:800;font-size:22px;margin-bottom:18px;display:flex;justify-content:space-between}.dash-head i{width:8px;height:8px;border-radius:50%;background:#10b981;box-shadow:0 0 0 5px #dff8ee;animation:pulse 1.8s infinite}@keyframes pulse{50%{box-shadow:0 0 0 9px rgba(16,185,129,0)}}.dash-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.stat-card{background:white;border:1px solid #e2ebf4;border-radius:12px;padding:12px;min-height:82px}.stat-card b{color:#10b981;font-size:10px}.stat-card.blue b{color:#168bea}.stat-card.purple b{color:#7a54d8}.stat-card strong{display:block;font-size:21px;line-height:1.15;margin-top:5px}.stat-card small{font-size:8px;color:#738198}.dash-chart-card{background:white;border:1px solid #e2ebf4;border-radius:12px;margin-top:12px;padding:13px 15px 8px;height:175px}.chart-title{display:flex;justify-content:space-between;font-size:9px}.chart-title small{color:#8b98a9}.line-chart{width:100%;height:130px}.chart-line{fill:none;stroke:#10b981;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1000;stroke-dashoffset:1000;animation:draw 1.8s cubic-bezier(.22,1,.36,1) 1.2s forwards}.chart-area{fill:url(#fill);opacity:0;animation:fade .7s ease 2s forwards}@keyframes draw{to{stroke-dashoffset:0}}@keyframes fade{to{opacity:1}}.dash-bottom{display:grid;grid-template-columns:1.4fr .8fr;gap:10px;margin-top:10px}.campaign-card,.mini-bars{background:white;border:1px solid #e2ebf4;border-radius:12px;padding:10px 12px}.campaign-card>b,.mini-bars>b{font-size:9px}.campaign-card span{display:flex;font-size:7px;margin:5px 0;color:#10b981}.campaign-card small{margin-left:auto;color:#8a98aa}.mini-bars>div{height:55px;display:flex;align-items:end;gap:6px}.mini-bars span{flex:1;background:linear-gradient(#18b990,#159fe8);border-radius:3px 3px 0 0;animation:grow .8s backwards}.mini-bars span:nth-child(1){animation-delay:1.3s}.mini-bars span:nth-child(2){animation-delay:1.4s}.mini-bars span:nth-child(3){animation-delay:1.5s}.mini-bars span:nth-child(4){animation-delay:1.6s}.mini-bars span:nth-child(5){animation-delay:1.7s}.mini-bars span:nth-child(6){animation-delay:1.8s}@keyframes grow{from{height:0!important}}.note{opacity:0;animation:noteIn .7s .9s forwards,noteFloat 4s 1.8s infinite}@keyframes noteIn{from{opacity:0;transform:translateY(10px) rotate(-7deg)}to{opacity:1;transform:rotate(-7deg)}}@keyframes noteFloat{50%{margin-top:-5px}}.float-badge{position:absolute;background:white;border:1px solid #e3ebf4;border-radius:12px;padding:9px 12px;box-shadow:0 14px 30px rgba(7,26,58,.12);font-size:9px;opacity:0;z-index:5}.float-badge small{color:#8190a3;font-size:7px}.badge-message{left:0;bottom:95px;animation:badgeIn .7s 1.5s forwards,badgeFloat 4s 2.2s infinite}.badge-growth{right:20px;bottom:35px;animation:badgeIn .7s 1.8s forwards,badgeFloat 4.5s 2.5s infinite reverse}@keyframes badgeIn{to{opacity:1}}@keyframes badgeFloat{50%{margin-top:-7px}}.orb{animation:orb 14s ease-in-out infinite alternate}.o2{animation-delay:-5s}@keyframes orb{to{transform:translate(18px,-18px) scale(1.06)}}@media(max-width:991px){.hero-art{height:470px}.dashboard-ui{width:650px;height:405px;right:-100px;top:45px}}@media(max-width:575px){.hero-art{height:350px}.dashboard-ui{width:520px;height:325px;right:-135px;top:25px;grid-template-columns:105px 1fr;border-width:5px}.dash-sidebar{padding:17px 9px}.dash-logo{font-size:12px}.dash-nav{font-size:7px;padding:7px 5px}.dash-content{padding:17px}.dash-head{font-size:16px}.stat-card{min-height:60px;padding:8px}.stat-card strong{font-size:15px}.stat-card small{font-size:6px}.dash-chart-card{height:120px}.line-chart{height:85px}.float-badge{display:none}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important}}

/* =========================================================
   V6 — HERO VISUAL POLISH
   ========================================================= */

/* Keep the dashboard fully inside the visual column. */
.dashboard-ui{
  width:690px;
  height:426px;
  right:-55px;
  top:92px;
}

/* Annotation sits outside the dashboard, never over the KPI cards. */
.note{
  right:34px;
  top:22px;
  z-index:8;
  font-family:"Comic Sans MS","Segoe Print",cursive;
  font-size:25px;
  line-height:.98;
  text-align:left;
  letter-spacing:-.04em;
}
.note span{
  display:block;
}
.note i{
  display:block;
  margin:8px 0 0 35px;
  font-size:18px;
}

/* Floating badges belong to the dashboard composition rather than the whitespace. */
.float-badge{
  min-width:106px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:11px;
  line-height:1.05;
}
.float-badge > i{
  width:27px;
  height:27px;
  border-radius:8px;
  display:grid;
  place-items:center;
  background:#e9fbf5;
  color:#0da477;
  font-size:12px;
}
.float-badge b{
  display:block;
  font-size:10px;
  color:#10223f;
}
.float-badge small{
  display:block;
  margin-top:2px;
  font-size:7px;
}
.badge-message{
  left:38px;
  bottom:48px;
}
.badge-growth{
  right:42px;
  bottom:26px;
}
.badge-growth > i{
  background:#edf4ff;
  color:#167ee8;
}

/* Make the dashboard's bottom cards stay visually inside the frame. */
.dash-bottom{
  margin-top:9px;
}
.campaign-card,.mini-bars{
  min-height:64px;
}

/* Slightly soften the hero visual shadow. */
.dashboard-ui{
  box-shadow:0 24px 52px rgba(7,26,58,.19);
}

/* Desktop visual balance. */
@media (min-width:992px){
  .hero-art{
    height:535px;
  }
  .dashboard-ui{
    top:88px;
  }
}

/* Tablet. */
@media (max-width:991px){
  .dashboard-ui{
    width:640px;
    height:398px;
    right:-72px;
    top:52px;
  }
  .note{
    right:18px;
    top:8px;
  }
  .badge-message{
    left:18px;
    bottom:32px;
  }
  .badge-growth{
    right:25px;
    bottom:12px;
  }
}

/* Mobile: hide decorative floating badges to prevent crowding. */
@media (max-width:575px){
  .dashboard-ui{
    width:510px;
    height:319px;
    right:-125px;
    top:22px;
  }
  .note{
    right:4px;
    top:-2px;
    font-size:18px;
  }
  .note i{
    font-size:14px;
    margin-left:25px;
  }
  .float-badge{
    display:none;
  }
}

/* =========================================================
   V7 — TRUE FLUID HERO / RESPONSIVE DASHBOARD
   ========================================================= */

/* Desktop: visual column controls the dashboard width. */
.hero-art{
  position:relative;
  min-width:0;
  width:100%;
  height:535px;
  display:flex;
  align-items:flex-start;
  justify-content:flex-end;
  overflow:visible;
}

.dashboard-ui{
  position:absolute;
  width:min(690px, 100%);
  height:auto;
  aspect-ratio:690 / 426;
  right:0;
  top:86px;
  grid-template-columns:21% 79%;
  border-width:6px;
  border-radius:22px;
  transform:perspective(1300px) rotateY(-3deg);
  transform-origin:center center;
}

/* Scale all dashboard internals proportionally with the fluid shell. */
.dash-sidebar{
  min-width:0;
  padding:clamp(14px, 2vw, 24px) clamp(9px, 1.3vw, 15px);
}
.dash-logo{
  font-size:clamp(11px, 1.4vw, 17px);
  margin-bottom:clamp(17px, 2.5vw, 28px);
}
.dash-nav{
  font-size:clamp(6px, .72vw, 9px);
  padding:clamp(7px, .9vw, 10px) clamp(5px, .75vw, 8px);
}
.dash-content{
  min-width:0;
  padding:clamp(14px, 2vw, 25px);
}
.dash-head{
  font-size:clamp(15px, 2vw, 22px);
  margin-bottom:clamp(10px, 1.5vw, 18px);
}
.dash-stats{
  gap:clamp(6px, .8vw, 10px);
}
.stat-card{
  min-width:0;
  min-height:auto;
  padding:clamp(7px, 1vw, 12px);
  border-radius:clamp(8px, 1vw, 12px);
}
.stat-card strong{
  font-size:clamp(13px, 1.9vw, 21px);
}
.stat-card small{
  font-size:clamp(5px, .72vw, 8px);
  white-space:nowrap;
}
.dash-chart-card{
  min-width:0;
  height:clamp(125px, 12.7vw, 175px);
  margin-top:clamp(8px, 1vw, 12px);
  padding:clamp(8px, 1vw, 13px) clamp(9px, 1.2vw, 15px) 5px;
}
.chart-title{
  font-size:clamp(7px, .8vw, 9px);
}
.line-chart{
  height:calc(100% - 20px);
}
.dash-bottom{
  gap:clamp(6px, .8vw, 10px);
  margin-top:clamp(6px, .8vw, 10px);
}
.campaign-card,.mini-bars{
  min-width:0;
  min-height:0;
  padding:clamp(6px, .8vw, 10px) clamp(7px, .9vw, 12px);
}
.campaign-card>b,.mini-bars>b{
  font-size:clamp(6px, .8vw, 9px);
}
.campaign-card span{
  font-size:clamp(5px, .65vw, 7px);
  white-space:nowrap;
}
.campaign-card small{
  font-size:clamp(5px, .65vw, 7px);
}
.mini-bars>div{
  height:clamp(32px, 4vw, 55px);
}

/* Annotation is now ABOVE the dashboard, never over a KPI card. */
.note{
  position:absolute;
  right:4%;
  top:8px;
  z-index:10;
  width:max-content;
  pointer-events:none;
}
.note span{
  display:block;
}
.note i{
  display:block;
  margin:7px 0 0 34px;
}

/* Badges are attached to the visual, not floating in the hero whitespace. */
.float-badge{
  z-index:12;
}
.badge-message{
  left:auto;
  right:calc(min(690px, 100%) - 88px);
  bottom:58px;
}
.badge-growth{
  right:30px;
  bottom:32px;
}

/* Don't let decorative objects create horizontal page scroll. */
.hero,
.hero-art,
.hero .container,
.hero .row{
  overflow:visible;
}
body{
  overflow-x:hidden;
}

/* Large desktop: give the visual a little more room. */
@media (min-width:1200px){
  .dashboard-ui{
    width:680px;
    right:-4px;
  }
  .note{
    right:5%;
  }
}

/* Tablet: stack the visual naturally and keep it fluid. */
@media (max-width:991.98px){
  .hero{
    overflow:hidden;
  }
  .hero-row{
    min-height:0;
    padding:58px 0 25px;
  }
  .hero-art{
    height:auto;
    min-height:430px;
    margin-top:8px;
    padding-top:50px;
    justify-content:center;
  }
  .dashboard-ui{
    position:relative;
    top:auto;
    right:auto;
    width:min(700px, 100%);
    transform:none;
    margin:0 auto;
    animation:floatMobile 5.5s ease-in-out 1.1s infinite;
  }
  @keyframes floatMobile{
    50%{transform:translateY(-6px)}
  }
  .note{
    top:2px;
    right:10%;
    font-size:22px;
  }
  .badge-message{
    left:8%;
    right:auto;
    bottom:32px;
  }
  .badge-growth{
    right:8%;
    bottom:18px;
  }
}

/* Mobile: dashboard becomes a normal block and all dimensions are fluid. */
@media (max-width:575.98px){
  .hero-row{
    padding:42px 0 20px;
  }
  .hero-copy{
    width:100%;
  }
  .hero h1{
    font-size:clamp(36px, 11vw, 46px);
    line-height:1.02;
  }
  .hero .lead{
    font-size:14px;
    line-height:1.65;
  }
  .benefits{
    gap:12px;
  }
  .benefits span{
    grid-template-columns:25px auto;
    column-gap:5px;
  }
  .benefits i{
    width:25px;
    height:25px;
    font-size:11px;
  }
  .benefits b{
    font-size:9px;
  }
  .benefits small{
    font-size:8px;
  }

  .hero-art{
    min-height:0;
    height:auto;
    padding-top:48px;
    margin-top:5px;
    width:100%;
  }

  .dashboard-ui{
    width:100%;
    max-width:100%;
    aspect-ratio:690 / 426;
    border-width:4px;
    border-radius:15px;
    grid-template-columns:20% 80%;
    transform:none;
  }

  .dash-sidebar{
    padding:12px 7px;
  }
  .dash-logo{
    font-size:clamp(9px, 3vw, 12px);
    margin-bottom:13px;
  }
  .dash-nav{
    font-size:clamp(5px, 1.8vw, 7px);
    padding:6px 4px;
    white-space:nowrap;
    overflow:hidden;
  }
  .dash-content{
    padding:11px;
  }
  .dash-head{
    font-size:clamp(12px, 4vw, 16px);
    margin-bottom:8px;
  }
  .dash-stats{
    gap:5px;
  }
  .stat-card{
    padding:6px;
    border-radius:7px;
  }
  .stat-card strong{
    font-size:clamp(11px, 3.7vw, 15px);
  }
  .stat-card small{
    font-size:clamp(4px, 1.5vw, 6px);
  }
  .dash-chart-card{
    height:38%;
    min-height:90px;
    margin-top:6px;
    padding:6px 7px 4px;
    border-radius:7px;
  }
  .chart-title{
    font-size:6px;
  }
  .chart-title small{
    font-size:5px;
  }
  .line-chart{
    height:calc(100% - 14px);
  }
  .dash-bottom{
    margin-top:5px;
    gap:5px;
  }
  .campaign-card,.mini-bars{
    padding:5px 6px;
    border-radius:7px;
  }
  .campaign-card>b,.mini-bars>b{
    font-size:5px;
  }
  .campaign-card span{
    font-size:4.5px;
    margin:3px 0;
  }
  .campaign-card small{
    font-size:4px;
  }
  .mini-bars>div{
    height:24px;
    gap:3px;
  }

  /* Annotation is outside the dashboard on mobile. */
  .note{
    top:0;
    right:8%;
    font-size:17px;
    line-height:.94;
  }
  .note i{
    font-size:12px;
    margin:5px 0 0 23px;
  }

  /* Keep badges inside the dashboard area and never outside the viewport. */
  .float-badge{
    display:flex;
    min-width:0;
    padding:5px 7px;
    border-radius:8px;
    font-size:7px;
  }
  .float-badge > i{
    width:18px;
    height:18px;
    border-radius:5px;
    font-size:8px;
  }
  .float-badge b{
    font-size:7px;
  }
  .float-badge small{
    font-size:5px;
  }
  .badge-message{
    left:6%;
    right:auto;
    bottom:7%;
  }
  .badge-growth{
    right:5%;
    bottom:4%;
  }
}

/* Extra-small phones: hide secondary dashboard decoration, not content. */
@media (max-width:380px){
  .hero-art{
    padding-top:42px;
  }
  .note{
    font-size:15px;
    right:5%;
  }
  .float-badge{
    display:none;
  }
  .dash-sidebar{
    padding:10px 5px;
  }
  .dash-content{
    padding:9px;
  }
}

/* Respect accessibility settings. */
@media (prefers-reduced-motion:reduce){
  .dashboard-ui,.hero-copy>*,.hero-art,.note,.float-badge{
    animation:none!important;
    opacity:1!important;
    transform:none!important;
  }
}

/* =========================================================
   V8 — FIX HERO COMPOSITION
   Desktop dashboard is positioned relative to the HERO itself.
   ========================================================= */
@media (min-width:992px){
  .hero{position:relative;min-height:600px;overflow:hidden}
  .hero-row{min-height:600px;position:relative;z-index:2}
  .hero-art{position:static!important;height:0!important;min-height:0!important;padding:0!important;margin:0!important;overflow:visible!important}
  .dashboard-ui{position:absolute!important;width:min(690px,52vw)!important;height:auto!important;aspect-ratio:690/426;right:2.5%!important;top:88px!important;margin:0!important;z-index:3}
  .note{position:absolute!important;right:7%!important;top:45px!important;z-index:5}
  .badge-message{position:absolute!important;right:calc(2.5% + min(690px,52vw) - 105px)!important;left:auto!important;bottom:auto!important;top:485px!important;z-index:6}
  .badge-growth{position:absolute!important;right:4.5%!important;bottom:auto!important;top:490px!important;z-index:6}
  .hero-copy{position:relative;z-index:8}
}
@media (min-width:1200px){
  .dashboard-ui{width:min(720px,54vw)!important;right:2.5%!important;top:78px!important}
  .note{right:6.5%!important;top:38px!important}
  .badge-message{right:calc(2.5% + min(720px,54vw) - 110px)!important;top:495px!important}
  .badge-growth{right:4%!important;top:500px!important}
}
@media (max-width:991.98px){
  .hero{overflow:hidden}
  .hero-row{min-height:0}
  .hero-art{position:relative!important;height:auto!important;min-height:430px;padding-top:50px!important;margin-top:8px!important}
  .dashboard-ui{position:relative!important;width:min(700px,100%)!important;height:auto!important;aspect-ratio:690/426;top:auto!important;right:auto!important;margin:0 auto!important;transform:none!important}
  .note{position:absolute!important;top:0!important;right:10%!important}
  .badge-message{position:absolute!important;left:8%!important;right:auto!important;top:auto!important;bottom:32px!important}
  .badge-growth{position:absolute!important;right:8%!important;top:auto!important;bottom:18px!important}
}
@media (max-width:575.98px){
  .hero-art{min-height:0!important;height:auto!important;padding-top:48px!important}
  .dashboard-ui{width:100%!important;max-width:100%!important;aspect-ratio:690/426}
  .note{top:0!important;right:8%!important}
  .badge-message{left:6%!important;bottom:7%!important}
  .badge-growth{right:5%!important;bottom:4%!important}
}

/* =========================================================
   V9 — FINAL HERO VISUAL FIX
   ========================================================= */

/* The visual wrapper must NOT create a containing block for
   the desktop absolute dashboard. */
@media (min-width:992px){
  .hero-art{
    position:static!important;
    height:0!important;
    min-height:0!important;
    padding:0!important;
    margin:0!important;
    transform:none!important;
    opacity:1!important;
    animation:none!important;
  }

  .dashboard-ui{
    position:absolute!important;
    display:grid!important;
    visibility:visible!important;
    opacity:1!important;
    right:2.5%!important;
    top:78px!important;
    z-index:20!important;
    animation:dashboardFloatDesktop 5.5s ease-in-out 1.1s infinite!important;
  }

  @keyframes dashboardFloatDesktop{
    0%,100%{
      transform:perspective(1300px) rotateY(-3deg) translateY(0);
    }
    50%{
      transform:perspective(1300px) rotateY(-3deg) translateY(-7px);
    }
  }

  .note{
    position:absolute!important;
    visibility:visible!important;
    opacity:1!important;
    z-index:25!important;
  }

  .float-badge{
    visibility:visible!important;
    z-index:26!important;
  }
}

/* On tablet/mobile the wrapper can animate normally because
   the dashboard is back in document flow. */
@media (max-width:991.98px){
  .hero-art{
    transform:none!important;
    opacity:1!important;
    animation:none!important;
  }
  .dashboard-ui{
    visibility:visible!important;
    opacity:1!important;
    position:relative!important;
    z-index:3!important;
  }
}

/* Header logo: use the cropped primary mark without the logo sheet. */
.navbar-brand img{
  width:145px;
  height:auto;
  display:block;
  object-fit:contain;
}

@media(max-width:575.98px){
  .navbar-brand img{
    width:125px;
  }
}