/* Approved home visual. Locked top navigation remains real HTML. */
body.home-approved-mode{background:#f6f7f9;overflow-x:hidden}
body.home-approved-mode .site-root{width:100%;max-width:none;overflow-x:hidden}

.home-approved-exact{
  position:relative;
  container-type:inline-size;
  width:min(100vw,1536px);
  aspect-ratio:1536/934;
  margin:0 auto;
  padding:0;
  background:#fff;
  overflow:hidden;
  line-height:normal;
  box-shadow:0 10px 34px rgba(7,28,50,.05);
}
.home-approved-exact .home-design-picture,
.home-approved-exact .home-design-picture img{display:block;width:100%;height:100%;margin:0;padding:0}
.home-approved-exact .home-design-picture img{object-fit:contain;object-position:top center}

/* Wide desktop: show the complete approved body inside the available screen height.
   This prevents the 1536px design from being enlarged on wide monitors. */
@media (min-width:1180px) and (min-aspect-ratio:8/5){
  .home-approved-exact{
    height:min(934px,calc(100svh - 118px));
    width:auto;
    max-width:100vw;
  }
}
@media (max-width:1450px) and (min-width:1180px) and (min-aspect-ratio:8/5){
  .home-approved-exact{height:min(934px,calc(100svh - 108px))}
}

/* The service-card strip in the source artwork is deliberately covered here.
   It is recreated as real HTML below so the typography stays sharp and the
   icons can use the same vivid motion language as the navigation. */
.home-live-mask{
  position:absolute;
  z-index:2;
  left:2.8%;right:2.8%;top:35.15%;height:23.55%;
  border-radius:12px;
  background:#f8f9fb;
}

.home-live-services{
  position:absolute;
  z-index:4;
  left:3.35%;right:3.35%;top:35.65%;height:15.55%;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.05cqw;
}
.home-live-card{
  --card-accent:#d19a42;
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:minmax(72px,8.1cqw) 1fr;
  align-items:center;
  gap:.7cqw;
  min-width:0;
  padding:.75cqw .95cqw .55cqw .72cqw;
  border:1px solid rgba(210,157,74,.72);
  border-radius:.72cqw;
  background:linear-gradient(180deg,#fff 0%,#fdfdfc 100%);
  color:#0a1d38;
  box-shadow:0 .45cqw 1.1cqw rgba(11,35,58,.08),inset 0 1px 0 #fff;
  transform:translateY(12px);
  opacity:0;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.home-live-card::before{
  content:"";
  position:absolute;inset:0;
  pointer-events:none;
  background:linear-gradient(112deg,transparent 0 72%,rgba(17,65,100,.028) 72% 73%,transparent 73% 78%,rgba(17,65,100,.025) 78% 79%,transparent 79%);
}
.home-live-card::after{
  content:"";
  position:absolute;right:-6%;bottom:-25%;width:35%;height:78%;
  opacity:.08;
  background:repeating-linear-gradient(90deg,#0d3557 0 2px,transparent 2px 15px);
  transform:skewY(-18deg);
}
.home-approved-exact.is-ready .home-live-card{animation:cardEnter .72s cubic-bezier(.2,.78,.2,1) forwards;animation-delay:var(--delay)}
.home-live-card:hover{transform:translateY(-4px)!important;border-color:var(--card-accent);box-shadow:0 .8cqw 1.8cqw rgba(11,35,58,.15),0 0 1.2cqw rgba(41,145,255,.08)}
.home-live-card.tone-public{--card-accent:#2398e8}.home-live-card.tone-contractor{--card-accent:#2c9a60}.home-live-card.tone-citizen{--card-accent:#8b64d7}

.live-icon-shell{
  position:relative;
  z-index:2;
  width:clamp(70px,7.25cqw,108px);
  aspect-ratio:1;
  display:grid;
  place-items:center;
  justify-self:center;
  border-radius:50%;
  background:radial-gradient(circle at 35% 28%,#123f6d,#04172e 68%);
  border:2px solid #d7a44c;
  box-shadow:inset 0 0 0 5px rgba(255,255,255,.06),0 .55cqw 1cqw rgba(0,20,42,.22),0 0 0 1px rgba(255,231,174,.35);
  overflow:visible;
}
.tone-contractor .live-icon-shell{background:radial-gradient(circle at 35% 28%,#0d5a39,#032f1d 68%)}
.tone-citizen .live-icon-shell{background:radial-gradient(circle at 35% 28%,#503078,#24103d 68%)}
.live-icon-shell img{
  position:relative;z-index:3;
  width:88%;height:88%;object-fit:contain;
  filter:brightness(1.1) contrast(1.06) saturate(1.18) drop-shadow(0 7px 7px rgba(0,0,0,.34));
  animation:liveIconFloat 2.8s ease-in-out infinite;
}
.live-icon-halo{
  position:absolute;z-index:1;
  left:8%;right:8%;bottom:-8%;height:26%;
  border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(32,183,255,.62),rgba(0,111,255,.18) 48%,transparent 75%);
  filter:blur(4px);
  animation:liveHalo 1.9s ease-in-out infinite;
}
.tone-contractor .live-icon-halo{background:radial-gradient(ellipse at center,rgba(43,205,122,.58),rgba(16,124,72,.17) 48%,transparent 75%)}
.tone-citizen .live-icon-halo{background:radial-gradient(ellipse at center,rgba(156,111,255,.62),rgba(97,43,191,.18) 48%,transparent 75%)}
.live-icon-sheen{
  position:absolute;z-index:4;top:6%;bottom:6%;left:-34%;width:22%;
  transform:skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.72),transparent);
  animation:liveSheen 3.6s ease-in-out infinite;
}

.live-card-content{position:relative;z-index:3;display:flex;flex-direction:column;min-width:0;align-self:stretch;justify-content:center}
.live-card-title{display:flex;align-items:baseline;gap:.55cqw;margin-bottom:.15cqw;color:#081b37;opacity:0;transform:translateY(7px)}
.home-approved-exact.is-ready .live-card-title{animation:textRise .55s ease forwards;animation-delay:calc(var(--delay) + 120ms)}
.live-card-title b{color:#b77620;font-size:clamp(12px,1.08cqw,16px);font-weight:900}
.live-card-title strong{font-size:clamp(15px,1.48cqw,23px);line-height:1.05;font-weight:850;letter-spacing:-.02em;text-shadow:0 1px 0 #fff}
.tone-contractor .live-card-title strong{color:#135832}.tone-citizen .live-card-title strong{color:#25185a}
.live-card-intro{max-width:94%;font-size:clamp(9px,.78cqw,12px);line-height:1.28;color:#344a61;font-weight:560;margin-bottom:.18cqw;opacity:0;transform:translateY(6px)}
.home-approved-exact.is-ready .live-card-intro{animation:textRise .5s ease forwards;animation-delay:calc(var(--delay) + 190ms)}
.live-card-list{display:grid;gap:.08cqw;margin:.12cqw 0 .16cqw}
.live-card-list>span{display:flex;align-items:center;gap:.4cqw;color:#203a55;font-size:clamp(8px,.68cqw,10.8px);font-weight:560;line-height:1.22;opacity:0;transform:translateX(-7px)}
.home-approved-exact.is-ready .live-card-list>span{animation:listIn .45s ease forwards;animation-delay:calc(var(--delay) + 230ms + var(--item-delay))}
.live-card-list i{font-style:normal;color:#bc781f;font-weight:900;text-shadow:0 0 6px rgba(211,155,62,.12)}
.live-card-link{margin-top:auto;display:inline-flex;align-items:center;gap:.4cqw;color:#0a2745;font-size:clamp(8px,.67cqw,10.5px);font-weight:850;opacity:0;transform:translateY(4px)}
.home-approved-exact.is-ready .live-card-link{animation:textRise .45s ease forwards;animation-delay:calc(var(--delay) + 470ms)}
.live-card-link i{font-style:normal;color:#b67520;transition:transform .2s ease}.home-live-card:hover .live-card-link i{transform:translateX(4px)}
.live-card-lineart{position:absolute;right:-2%;bottom:-12%;width:29%;height:67%;opacity:.12;background:linear-gradient(90deg,transparent,#0d3557);clip-path:polygon(68% 0,100% 20%,100% 100%,0 100%)}

.home-live-trust{
  position:absolute;
  z-index:4;
  left:3.35%;right:3.35%;top:52.25%;height:6.25%;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  border:1px solid #e5d6bd;
  border-radius:.65cqw;
  background:rgba(255,255,255,.985);
  box-shadow:0 .35cqw .8cqw rgba(12,35,56,.05);
}
.home-live-trust article{
  position:relative;
  display:flex;
  align-items:center;
  gap:.72cqw;
  padding:.35cqw 1.25cqw;
  opacity:0;
  transform:translateY(8px);
}
.home-live-trust article:not(:last-child)::after{content:"";position:absolute;right:0;top:24%;bottom:24%;width:1px;background:#e8d3af}
.home-approved-exact.is-ready .home-live-trust article{animation:trustEnter .55s ease forwards;animation-delay:var(--delay)}
.trust-icon-shell{position:relative;flex:0 0 clamp(34px,3.5cqw,52px);width:clamp(34px,3.5cqw,52px);aspect-ratio:1;display:grid;place-items:center}
.trust-icon-shell img{position:relative;z-index:2;width:100%;height:100%;object-fit:contain;filter:brightness(1.12) contrast(1.08) saturate(1.18) drop-shadow(0 4px 4px rgba(0,0,0,.2));animation:trustIconPulse 3.2s ease-in-out infinite}
.trust-halo{position:absolute;z-index:1;inset:12%;border-radius:50%;background:radial-gradient(circle,rgba(237,180,73,.28),transparent 68%);filter:blur(3px);animation:trustHalo 2.2s ease-in-out infinite}
.trust-copy{display:flex;flex-direction:column;min-width:0}.trust-copy strong{color:#081a34;font-size:clamp(9px,.8cqw,12.5px);font-weight:850;line-height:1.1}.trust-copy small{color:#344b62;font-size:clamp(7px,.58cqw,9px);font-weight:550;line-height:1.22;margin-top:.16cqw}

.home-approved-exact .home-hotspot{position:absolute;z-index:8;display:block;background:transparent;border:0;outline:0;border-radius:8px;line-height:normal;text-indent:-9999px;overflow:hidden}
.home-approved-exact .home-hotspot:focus-visible{outline:3px solid #27b8ff;outline-offset:2px;background:rgba(39,184,255,.08)}
/* Coordinates are relative to the approved 1536×934 body visual. */
.home-approved-exact .hs-services{left:3.4%;top:27.8%;width:12.9%;height:4.8%}
.home-approved-exact .hs-contact{left:17.1%;top:27.8%;width:11.3%;height:4.8%}
.home-approved-exact .hs-software{left:3.4%;top:59.1%;width:46.9%;height:12.6%}
.home-approved-exact .hs-guides{left:51.2%;top:59.1%;width:45.3%;height:12.6%}

@keyframes cardEnter{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
@keyframes textRise{from{opacity:0;transform:translateY(7px);filter:blur(1.5px)}to{opacity:1;transform:none;filter:none}}
@keyframes listIn{from{opacity:0;transform:translateX(-7px)}to{opacity:1;transform:none}}
@keyframes trustEnter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes liveIconFloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-3px) scale(1.025)}}
@keyframes liveHalo{0%,100%{opacity:.46;transform:scaleX(.78)}50%{opacity:1;transform:scaleX(1.08)}}
@keyframes liveSheen{0%,58%{left:-34%;opacity:0}63%{opacity:.8}83%{left:112%;opacity:0}100%{left:112%;opacity:0}}
@keyframes trustIconPulse{0%,100%{transform:translateY(0);filter:brightness(1.08) contrast(1.06) saturate(1.12) drop-shadow(0 4px 4px rgba(0,0,0,.2))}50%{transform:translateY(-2px);filter:brightness(1.2) contrast(1.08) saturate(1.28) drop-shadow(0 5px 7px rgba(183,119,30,.22))}}
@keyframes trustHalo{0%,100%{opacity:.35;transform:scale(.82)}50%{opacity:.85;transform:scale(1.08)}}

@media (max-width:1179px){
  .home-approved-exact{width:100vw;height:auto;aspect-ratio:1536/934}
}
@media (max-width:900px){
  .home-live-card{grid-template-columns:7.5cqw 1fr;padding:.55cqw .6cqw;gap:.35cqw}
  .live-icon-shell{width:7cqw}
  .live-card-title strong{font-size:1.25cqw}.live-card-title b{font-size:.95cqw}.live-card-intro{font-size:.68cqw}.live-card-list>span,.live-card-link{font-size:.58cqw}
  .trust-copy strong{font-size:.7cqw}.trust-copy small{font-size:.5cqw}
}
@media (max-width:620px){
  .home-live-services,.home-live-trust,.home-live-mask{display:none}
}
@media (prefers-reduced-motion:reduce){
  .home-live-card,.live-card-title,.live-card-intro,.live-card-list>span,.live-card-link,.home-live-trust article{opacity:1!important;transform:none!important;animation:none!important}
  .live-icon-shell img,.live-icon-halo,.live-icon-sheen,.trust-icon-shell img,.trust-halo{animation:none!important}
}