/* 1st Choice — shared styles. Font: Barlow. Palette unchanged from original. */
:root {
   --red: #D1202B;
   --navy: #16305C;
   --ink: #0B1B3A;
   --sky: #2BB7FF;
   --teal: #12C2A9;
   --blue: #1E6BE6;
   --mut: #000;
   --bg: #F3F8FF;
   --line: #e3ebf7
}

* {
   box-sizing: border-box;
   margin: 0
}

[hidden] {
   display: none !important
}

html {
   scroll-behavior: smooth;
   scroll-padding-top: 110px;
   overflow-x: hidden;
   max-width: 100%
}

body {
   font: 400 16px/1.6 Barlow, system-ui, sans-serif;
   background: #fff;
   color: var(--ink);
   overflow-x: hidden;
   -webkit-text-size-adjust: 100%
}

@supports(overflow:clip) {
   body {
      overflow-x: clip
   }
}

html.nav-o,
html.ck-o,
body.nav-o,
body.ck-o {
   overflow: hidden
}

.bi {
   line-height: 1;
   display: inline-block;
   vertical-align: -.125em
}

button {
   font-family: inherit
}

img {
   max-width: 100%;
   display: block
}

h1,
h2,
h3 {
   font-family: 'Barlow Condensed', Barlow, system-ui, sans-serif;
   line-height: 1;
   letter-spacing: .005em;
   font-weight: 700
}
.w {
    max-width: 1360px;
   margin: auto;
   padding: 0 20px
}

section {
   padding: 84px 0
}

.r {
   color: var(--red)
}

.n {
   color: var(--navy)
}

.s {
   color: #173668 /*var(--sky)*/;
}

.b {
   color: var(--blue)
}

.k {
   display: inline-block;
   font-size: 12px;
   font-weight: 700;
   letter-spacing: .14em;
   text-transform: uppercase;
   color: var(--red);
   background: #fde8ea;
   padding: 5px 14px;
   border-radius: 99px;
   margin-bottom: 14px
}

.eb .bi {
   margin-right: 4px
}

.eb {
   display: block;
   font-size: 14px;
   font-weight: 700;
   letter-spacing: .08em;
   text-transform: uppercase;
   color: var(--blue);
   margin-bottom: 10px
}

.ic {
   display: inline-grid;
   place-items: center;
   flex: none;
   border-radius: 50%
}

.bgl {
   background: var(--bg)
}

.hd2 {
   max-width: 660px;
   margin: 0 auto 44px;
   text-align: center
}

.hd2 h2 {
   font-size: clamp(38px, 5.4vw, 60px)
}

.hd2 p {
   color: var(--mut);
   margin-top: 12px;
   font-size: 17px
}

.btn {
   display: inline-flex;
   gap: 8px;
   align-items: center;
   justify-content: center;
   padding: 14px 26px;
   border-radius: 99px;
   font: 700 15px/1 Barlow, sans-serif;
   text-decoration: none;
   border: 1.5px solid var(--red);
   background: var(--red);
   color: #fff;
   cursor: pointer;
   transition: .3s;
   box-shadow: 0 10px 24px -10px var(--red)
}

.btn:hover {
   transform: translateY(-3px)
}

.btn.o {
   background: #fff;
   color: var(--red);
   box-shadow: none
}

.btn.bl {
   background: var(--blue);
   border-color: var(--blue);
   box-shadow: 0 12px 26px -10px var(--blue)
}

.btn.wh {
   background: #fff;
   color: var(--navy);
   border-color: #fff;
   box-shadow: none
}

.bts {
   display: flex;
   gap: 12px;
   flex-wrap: wrap
}

.rv {
   opacity: 0;
   transform: translateY(34px);
   filter: blur(5px);
   transition: 1s cubic-bezier(.2, .8, .2, 1)
}

.rv.in {
   opacity: 1;
   transform: none;
   filter: none
}

.soc {
   display: flex;
   gap: 6px
}

.soc a {
   width: 34px;
   height: 34px;
   border-radius: 50%;
   background: #eef3fb;
   color: var(--navy);
   display: grid;
   place-items: center;
   font-size: 14px;
   text-decoration: none;
   transition: .3s
}

.soc a:hover {
   background: var(--red);
   color: #fff;
   transform: rotate(-10deg)
}

/* ===== header (sticky, floats as a compact pill after scrolling) ===== */
.hd {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 10000;
   padding-top: env(safe-area-inset-top);
   transform: translate3d(0, 0, 0);
   -webkit-transform: translate3d(0, 0, 0);
   isolation: isolate
}

.hd.sc .tbar {
   max-height: 0
}

.mn {
   background: rgba(255, 255, 255, .94);
   -webkit-backdrop-filter: blur(14px);
   backdrop-filter: blur(14px);
   box-shadow: none;
   transition: background .35s, box-shadow .35s, padding .35s
}

.hb {
   position: relative;
   height: 76px;
   display: flex;
   align-items: center;
   gap: 18px;
   transition: height .35s, margin .35s, padding .35s, border-radius .35s, background .35s, box-shadow .35s, max-width .35s
}

.hd.sc .mn {
   background: transparent;
   box-shadow: none;
   border: 0;
   -webkit-backdrop-filter: none;
   backdrop-filter: none;
   padding: 8px 12px 0
}

.hd.sc .hb {
   height: 62px;
   max-width: 1140px;
   padding: 0 12px 0 18px;
   border-radius: 99px;
   background: rgba(255, 255, 255, .96);
   -webkit-backdrop-filter: blur(18px) saturate(1.6);
   backdrop-filter: blur(18px) saturate(1.6);
   box-shadow: 0 18px 40px -20px rgba(22, 48, 92, .5)
}

.lg {
   display: flex;
   align-items: center;
   text-decoration: none;
   flex: 0 1 auto;
   min-width: 0
}

.lg img {
   height: 70px;
   width: auto;
   max-width: 100%;
   transition: height .35s
}

.hd.sc .lg img {
   height: 44px
}

.lg .wm {
   display: none;
   font-size: 26px;
   font-weight: 800;
   color: var(--navy);
   line-height: 1
}

.lg.nl .wm {
   display: block
}

.dn {
   position: relative;
   margin: 0 auto;
   display: flex;
   gap: 2px;
   padding: 4px;
   border-radius: 99px;
   background: rgba(22, 48, 92, .05)
}

.dn-hl {
   position: absolute;
   left: 0;
   top: 4px;
   bottom: 4px;
   width: 0;
   border-radius: 99px;
   background: #fff;
   box-shadow: 0 8px 18px -8px rgba(22, 48, 92, .4), 0 0 0 1px rgba(22, 48, 92, .06);
   transition: transform .4s cubic-bezier(.2, .8, .2, 1), width .4s cubic-bezier(.2, .8, .2, 1), opacity .25s;
   pointer-events: none;
   opacity: 0
}

.dn a {
   position: relative;
   z-index: 1;
   display: inline-flex;
   align-items: center;
   gap: 7px;
   text-decoration: none;
   color: var(--navy);
   font-weight: 600;
   font-size: 17px;
   padding: 9px 15px;
   border-radius: 99px;
   transition: color .25s;
   white-space: nowrap
}

.dn a .bi {
   font-size: 14px;
   color: var(--blue);
   transition: .3s
}

.dn a:hover,
.dn a:focus-visible {
   color: var(--red)
}

.dn a:hover .bi {
   transform: translateY(-2px) scale(1.15);
   color: var(--red)
}

.dn a.on {
   color: var(--red)
}

.dn a.on .bi {
   color: var(--red)
}

.call {
   position: relative;
   display: flex;
   align-items: center;
   gap: 12px;
   background: linear-gradient(135deg, #e5303b, var(--red) 60%, #a8121c);
   color: #fff;
   text-decoration: none;
   padding: 7px 22px 7px 8px;
   border-radius: 99px;
   font-size: 12px;
   line-height: 1.15;
   box-shadow: 0 12px 24px -10px var(--red);
   flex: none;
   transition: .3s
}

.call:hover {
   transform: translateY(-2px)
}

.call .ic {
   width: 36px;
   height: 36px;
   background: rgba(255, 255, 255, .2);
   font-size: 16px;
   animation: ring 3s ease-in-out infinite
}

@keyframes ring {

   0%,
   60%,
   100% {
      transform: rotate(0)
   }

   66% {
      transform: rotate(-16deg)
   }

   72% {
      transform: rotate(14deg)
   }

   78% {
      transform: rotate(-10deg)
   }

   84% {
      transform: rotate(8deg)
   }
}

.call b {
   display: block;
   font-size: 15px;
   font-weight: 700;
   white-space: nowrap
}

/* hamburger: large, always visible, animated */
.bg {
   display: none;
   margin-left: auto;
   width: 50px;
   height: 50px;
   border-radius: 16px;
   border: 0;
   padding: 0;
   background: linear-gradient(135deg, var(--navy), #1f5ab0);
   box-shadow: 0 10px 22px -8px rgba(22, 48, 92, .7), inset 0 0 0 1.5px rgba(255, 255, 255, .18);
   cursor: pointer;
   position: relative;
   flex: none;
   z-index: 2;
   -webkit-tap-highlight-color: transparent;
   transition: background .3s, transform .2s
}

.bg:active {
   transform: scale(.94)
}

.bg .bars {
   position: absolute;
   inset: 0;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 5px
}

.bg .bars b {
   display: block;
   width: 24px;
   height: 3px;
   border-radius: 3px;
   background: #fff;
   transition: transform .35s cubic-bezier(.2, .8, .2, 1), opacity .2s, width .3s
}

.bg .bars b:nth-child(2) {
   width: 17px;
   align-self: flex-end;
   margin-right: 13px
}

.bg:hover .bars b:nth-child(2) {
   width: 24px;
   margin-right: 0
}

.bg.x {
   background: linear-gradient(135deg, #e5303b, #a8121c)
}

.bg.x .bars b:nth-child(1) {
   transform: translateY(8px) rotate(45deg)
}

.bg.x .bars b:nth-child(2) {
   opacity: 0;
   width: 24px
}

.bg.x .bars b:nth-child(3) {
   transform: translateY(-8px) rotate(-45deg)
}

/* mobile drawer */
.dw {
   position: fixed;
   inset: 0;
   z-index: 9990;
   background: radial-gradient(60% 40% at 100% 0, #dcefff, transparent), linear-gradient(180deg, #fff, var(--bg));
   padding: calc(96px + env(safe-area-inset-top)) 22px calc(28px + env(safe-area-inset-bottom));
   display: flex;
   flex-direction: column;
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
   visibility: hidden;
   -webkit-clip-path: circle(0% at calc(100% - 42px) 42px);
   clip-path: circle(0% at calc(100% - 42px) 42px);
   transition: clip-path .55s cubic-bezier(.2, .8, .2, 1), -webkit-clip-path .55s cubic-bezier(.2, .8, .2, 1), visibility 0s .55s
}

.dw.o {
   visibility: visible;
   -webkit-clip-path: circle(150% at calc(100% - 42px) 42px);
   clip-path: circle(150% at calc(100% - 42px) 42px);
   transition: clip-path .65s cubic-bezier(.2, .8, .2, 1), -webkit-clip-path .65s cubic-bezier(.2, .8, .2, 1)
}

.dw>a.l {
   display: flex;
   align-items: center;
   gap: 14px;
   text-decoration: none;
   color: var(--navy);
   font-size: 21px;
   font-weight: 700;
   padding: 12px 4px;
   border-bottom: 1px solid var(--line);
   opacity: 0;
   transform: translateX(24px);
   transition: color .2s
}

.dw.o>a.l {
   animation: dwin .5s cubic-bezier(.2, .8, .2, 1) both;
   animation-delay: calc(var(--i)*.05s + .12s)
}

@keyframes dwin {
   to {
      opacity: 1;
      transform: none
   }
}

.dw>a.l .li {
   width: 42px;
   height: 42px;
   border-radius: 13px;
   background: #eaf1ff;
   color: var(--blue);
   display: grid;
   place-items: center;
   font-size: 18px;
   flex: none;
   transition: .3s
}

.dw>a.l .lt {
   flex: 1
}

.dw>a.l>.bi-chevron-right {
   font-size: 14px;
   color: #9db0d0
}

.dw>a.l.on {
   color: var(--red)
}

.dw>a.l.on .li {
   background: var(--red);
   color: #fff
}

.dw .bts {
   margin-top: 26px
}

.dw .btn {
   flex: 1
}

.dw .soc {
   margin-top: 22px
}

/* ===== page hero + breadcrumbs ===== */
.ph {
   padding: 140px 0 25px;
   background: linear-gradient(110deg, var(--navy), #1f5ab0 65%, var(--sky));
   color: #fff;
   position: relative;
   overflow: hidden
}

.ph::before,
.ph::after {
   content: "";
   position: absolute;
   border-radius: 50%;
   background: rgba(255, 255, 255, .07)
}

.ph::before {
   width: 420px;
   height: 420px;
   right: -90px;
   top: -120px
}

.ph::after {
   width: 240px;
   height: 240px;
   right: 22%;
   bottom: -130px
}

.ph .w {
   position: relative;
   z-index: 1
}

.ph h1 {
   font-size: clamp(44px, 7.4vw, 84px);
   margin: 14px 0 12px
}

.ph p {
   max-width: 560px;
   opacity: .88;
   font-size: 18px
}

.bc ol {
   list-style: none;
   padding: 0;
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   font-size: 14.5px;
   font-weight: 600
}

.bc li {
   display: flex;
   gap: 8px;
   align-items: center;
   opacity: .9
}

.bc li+li::before {
   content: "/";
   opacity: .5
}

.bc a {
   color: #fff;
   text-decoration: none
}

.bc a:hover {
   text-decoration: underline
}

.bc li[aria-current] {
   color: #bfe3ff
}

/* ===== hero (3D scene styles unchanged) ===== */
.hero {
   min-height: 100svh;
   padding: 158px 0 36px;
   display: flex;
   align-items: center;
   background: radial-gradient(55% 55% at 78% 40%, #dcefff, transparent), radial-gradient(35% 40% at 5% 95%, #ffe6e8, transparent), #fff
}

.hero .w {
   display: grid;
   grid-template-columns: .9fr 1.1fr;
   gap: 10px;
   align-items: center;
   width: 100%
}

.hero h1 {
   font-size: clamp(50px, 7.2vw, 96px);
   margin: 6px 0 16px
}

.hero p {
   color: var(--mut);
   max-width: 460px;
   margin-bottom: 26px;
   font-size: 17px
}

.tr {
   display: flex;
   gap: 22px;
   margin-top: 30px;
   flex-wrap: wrap
}

.tr div {
   display: flex;
   gap: 10px;
   align-items: center;
   font-size: 14px;
   font-weight: 700;
   line-height: 1.2
}

.tr .ic {
   width: 40px;
   height: 40px;
   background: #fff;
   box-shadow: 0 0 0 1.5px #dbe7f8;
   color: var(--red);
   font-size: 16px
}

.tr small {
   display: block;
   font-weight: 400;
   color: var(--mut);
   font-size: 12.5px
}

.stage {
   position: relative;
   perspective: 1300px;
   -webkit-user-select: none;
   user-select: none
}

.hw {
   transform-style: preserve-3d;
   transition: transform .7s cubic-bezier(.2, .8, .2, 1)
}

.sw {
   position: relative;
   transform-style: preserve-3d
}

#hs {
   width: 100%;
   height: auto;
   max-height: 72vh;
   display: block;
   filter: drop-shadow(0 40px 36px rgba(22, 48, 92, .22))
}

.hand {
   position: absolute;
   right: 2%;
   top: 0;
   font: italic 600 26px/1.05 Barlow, sans-serif;
   color: var(--navy);
   transform: rotate(-6deg)
}

.eff {
   position: absolute;
   right: 0;
   bottom: 4%;
   background: #fff;
   border-radius: 14px;
   padding: 10px 14px;
   font-size: 12.5px;
   font-weight: 700;
   box-shadow: 0 18px 30px -12px rgba(22, 48, 92, .35);
   display: flex;
   gap: 8px;
   align-items: center
}

.eff .ic {
   width: 28px;
   height: 28px;
   background: #e3f8f3;
   color: #12A08A
}

.mode {
   position: absolute;
   left: 0;
   top: 2%;
   background: rgba(255, 255, 255, .9);
   backdrop-filter: blur(10px);
   border-radius: 16px;
   padding: 10px 16px;
   box-shadow: 0 18px 30px -12px rgba(22, 48, 92, .35);
   font-size: 13px;
   font-weight: 700;
   max-width: 210px
}

.mode b {
   display: block;
   font-size: 18px;
   transition: .4s
}

.mode small {
   font-weight: 400;
   color: var(--mut)
}

.rd {
   position: absolute;
   left: 0;
   bottom: 8%;
   background: rgba(255, 255, 255, .9);
   backdrop-filter: blur(10px);
   border-radius: 16px;
   padding: 10px 16px;
   box-shadow: 0 18px 30px -12px rgba(22, 48, 92, .35);
   font-size: 12.5px;
   font-weight: 700;
   color: var(--mut)
}

.rd b {
   display: block;
   font-size: 24px;
   color: var(--navy);
   animation: pp .5s
}

@keyframes pp {
   from {
      transform: scale(.7);
      opacity: 0
   }
}

.hint {
   position: absolute;
   left: 50%;
   bottom: -8px;
   transform: translateX(-50%);
   font-size: 12.5px;
   font-weight: 700;
   color: var(--mut);
   background: #fff;
   padding: 5px 12px;
   border-radius: 99px;
   box-shadow: 0 0 0 1.5px #dbe7f8;
   transition: .6s;
   white-space: nowrap;
   pointer-events: none
}

.hint.x {
   opacity: 0
}

.tabs {
   display: flex;
   gap: 8px;
   justify-content: center;
   margin-top: 14px;
   flex-wrap: wrap
}

.tabs button {
   border: 0;
   background: #fff;
   box-shadow: 0 0 0 1.5px #dbe7f8;
   border-radius: 99px;
   padding: 9px 18px;
   font: 700 14px Barlow, sans-serif;
   color: var(--navy);
   cursor: pointer;
   position: relative;
   overflow: hidden;
   display: flex;
   gap: 7px;
   align-items: center
}

.tabs button u {
   position: absolute;
   left: 0;
   bottom: 0;
   height: 3px;
   width: 0;
   background: var(--c)
}

.tabs button.on {
   background: var(--navy);
   color: #fff
}

.tabs button.on u {
   animation: pr 4.6s linear forwards
}

@keyframes pr {
   to {
      width: 100%
   }
}

.ctl {
   display: flex;
   justify-content: center;
   margin-top: 8px
}

.ctl button {
   border: 0;
   background: #fff;
   font: 600 13px Barlow, sans-serif;
   color: var(--mut);
   cursor: pointer;
   padding: 6px 14px;
   border-radius: 99px;
   box-shadow: 0 0 0 1.5px #dbe7f8;
   display: flex;
   gap: 6px;
   align-items: center
}

.ctl button:hover {
   color: var(--red)
}

.glo {
   position: absolute;
   inset: 10% 6%;
   border-radius: 50%;
   opacity: .3;
   filter: blur(30px);
   transform: translateZ(-90px);
   transition: background 1s
}

.orb {
   --r: min(42vw, 250px);
   position: absolute;
   inset: 0;
   transform: translateZ(-60px);
   pointer-events: none
}

.orb span {
   position: absolute;
   left: 50%;
   top: 55%;
   animation: ox 10s cubic-bezier(.45, 0, .55, 1) infinite alternate;
   animation-delay: var(--d)
}

.orb .ic {
   width: 44px;
   height: 44px;
   margin: -22px;
   background: #fff;
   box-shadow: 0 14px 26px -8px rgba(22, 48, 92, .35);
   font-size: 19px;
   animation: oy 10s cubic-bezier(.45, 0, .55, 1) infinite alternate;
   animation-delay: calc(var(--d) - 5s)
}

@keyframes ox {
   from {
      transform: translateX(calc(var(--r)*-1))
   }

   to {
      transform: translateX(var(--r))
   }
}

@keyframes oy {
   from {
      transform: translateY(-75px)
   }

   to {
      transform: translateY(75px)
   }
}

.hp {
   position: absolute;
   width: 22px;
   height: 22px;
   margin: -11px;
   padding: 0;
   border-radius: 50%;
   border: 3px solid #fff;
   background: var(--c);
   cursor: pointer;
   transform: translateZ(60px);
   animation: hpu 2.2s infinite;
   z-index: 3
}

@keyframes hpu {
   0% {
      box-shadow: 0 0 0 0 var(--c)
   }

   70%,
   100% {
      box-shadow: 0 0 0 14px transparent
   }
}

.tp {
   position: absolute;
   bottom: 170%;
   left: 50%;
   transform: translate(-50%, 8px);
   background: #fff;
   border-radius: 12px;
   padding: 8px 12px;
   min-width: 150px;
   box-shadow: 0 18px 30px -10px rgba(22, 48, 92, .4);
   text-align: left;
   opacity: 0;
   pointer-events: none;
   transition: .3s;
   font-size: 12px;
   line-height: 1.3;
   color: var(--ink)
}

.tp b {
   display: block;
   font-size: 13px;
   color: var(--c)
}

.tp small {
   color: var(--mut)
}

.hp[data-s=l] .tp {
   left: -6px;
   transform: translate(0, 8px)
}

.hp[data-s=r] .tp {
   left: auto;
   right: -6px;
   transform: translate(0, 8px)
}

.hp:hover .tp,
.hp:focus .tp,
.hp.tip .tp {
   opacity: 1;
   transform: translate(-50%, 0)
}

.hp[data-s=l]:hover .tp,
.hp[data-s=l]:focus .tp,
.hp[data-s=l].tip .tp,
.hp[data-s=r]:hover .tp,
.hp[data-s=r]:focus .tp,
.hp[data-s=r].tip .tp {
   transform: none
}

.pl,
.ht,
.cl {
   opacity: .2;
   transition: opacity .7s, filter .7s
}

.o-p,
.o-h,
.o-c {
   opacity: 0;
   transition: opacity .7s
}

[data-m=p] .pl,
[data-m=h] .ht,
[data-m=c] .cl,
[data-m=p] .o-p,
[data-m=h] .o-h,
[data-m=c] .o-c {
   opacity: 1
}

[data-m=p] .pl,
[data-m=p] .fx-p {
   filter: drop-shadow(0 0 5px #1E6BE6)
}

[data-m=h] .ht,
[data-m=h] .fx-h {
   filter: drop-shadow(0 0 6px #D1202B)
}

[data-m=c] .cl,
[data-m=c] .fx-c {
   filter: drop-shadow(0 0 6px #2BB7FF)
}

.pc {
   fill: none;
   stroke: #fff;
   stroke-width: 9;
   stroke-linecap: round;
   stroke-linejoin: round;
   opacity: .9
}

.pb {
   fill: none;
   stroke-width: 5;
   stroke-linecap: round;
   stroke-linejoin: round
}

.pl .pb {
   stroke: url(#wg)
}

.ht .pb {
   stroke: #D1202B
}

.cl .pb {
   stroke: #2BB7FF
}

.pf {
   fill: none;
   stroke: #fff;
   stroke-width: 1.8;
   stroke-dasharray: 1 10;
   stroke-linecap: round;
   animation: df 1s linear infinite
}

@keyframes df {
   to {
      stroke-dashoffset: -11
   }
}

.dt {
   fill: #1E6BE6;
   stroke: #fff;
   stroke-width: 1.6
}

.ht .dt {
   fill: #F26A21
}

.cl .dt {
   fill: #2BB7FF
}

.fl {
   transform-box: fill-box;
   transform-origin: 50% 100%;
   animation: fk .4s ease-in-out infinite alternate
}

@keyframes fk {
   to {
      transform: scale(1.15, .88)
   }
}

.wv {
   fill: none;
   stroke: #F26A21;
   stroke-width: 2;
   stroke-linecap: round;
   animation: up 2.4s ease-in infinite
}

@keyframes up {
   from {
      transform: translateY(8px);
      opacity: 0
   }

   30% {
      opacity: 1
   }

   to {
      transform: translateY(-22px);
      opacity: 0
   }
}

.sn {
   fill: none;
   stroke: #2BB7FF;
   stroke-width: 1.8;
   stroke-linecap: round;
   animation: sf 3.4s linear infinite
}

@keyframes sf {
   from {
      transform: translateY(-6px);
      opacity: 0
   }

   25% {
      opacity: 1
   }

   to {
      transform: translateY(48px);
      opacity: 0
   }
}

.af {
   fill: none;
   stroke: #2BB7FF;
   stroke-width: 2.2;
   stroke-dasharray: 3 9;
   stroke-linecap: round;
   animation: df .8s linear infinite
}

.rn {
   stroke: #8ED1FF;
   stroke-width: 2;
   stroke-linecap: round;
   animation: rn .8s linear infinite
}

@keyframes rn {
   from {
      transform: translateY(0);
      opacity: 1
   }

   to {
      transform: translateY(22px);
      opacity: 0
   }
}

.dr {
   fill: #1E6BE6;
   animation: dp 1.2s ease-in infinite
}

@keyframes dp {
   from {
      transform: translateY(0);
      opacity: 1
   }

   to {
      transform: translateY(26px);
      opacity: 0
   }
}

.ws {
   animation: ws 2.2s ease-in-out infinite
}

@keyframes ws {
   50% {
      opacity: .55
   }
}

.sm {
   fill: #c9d6ea;
   animation: sk 2.7s ease-out infinite
}

@keyframes sk {
   from {
      transform: translate(0, 0) scale(.5);
      opacity: .85
   }

   to {
      transform: translate(14px, -46px) scale(1.7);
      opacity: 0
   }
}

.rip {
   fill: none;
   stroke-width: 2;
   transform-box: fill-box;
   transform-origin: center;
   animation: rp 3s ease-out infinite
}

[data-m=p] .rip {
   stroke: #1E6BE6
}

[data-m=h] .rip {
   stroke: #D1202B
}

[data-m=c] .rip {
   stroke: #2BB7FF
}

@keyframes rp {
   from {
      transform: scale(.78);
      opacity: .7
   }

   to {
      transform: scale(1.08);
      opacity: 0
   }
}

.gr {
   transition: transform 1.5s cubic-bezier(.2, .8, .2, 1)
}

.ex .gr {
   transform: translateY(-70px)
}

/* ===== marquee bar (runs on every phone: transform-only animation + JS fallback) ===== */
.bar {
   background: linear-gradient(90deg, var(--navy), #1f5ab0 60%, var(--sky));
   color: #fff;
   padding: 15px 0;
   overflow: hidden;
   position: relative
}

.bt {
   display: flex;
   width: max-content;
   animation: mv 56s linear infinite;
   font-weight: 700;
   font-size: 15px;
   will-change: transform;
   backface-visibility: hidden;
   -webkit-backface-visibility: hidden
}

.bt .set {
   display: flex;
   gap: 46px;
   padding-right: 46px;
   flex: none
}

.bt span {
   display: flex;
   gap: 9px;
   align-items: center;
   white-space: nowrap
}

.bt .bi {
   color: #bfe3ff;
   font-size: 17px
}

@keyframes mv {
   from {
      transform: translate3d(0, 0, 0)
   }

   to {
      transform: translate3d(-50%, 0, 0)
   }
}

/* ===== services (home) ===== */
.svh {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 56px;
   align-items: stretch
}

.svl h2 {
   font-size: clamp(40px, 5.8vw, 68px)
}

.svl>p {
   color: var(--mut);
   margin-top: 12px;
   font-size: 17px
}

.pills {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   margin: 26px 0 12px;
   padding: 4px 2px 14px
}

.pills::-webkit-scrollbar,
.vtl::-webkit-scrollbar {
   display: none
}

.pill {
   flex: none;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 3px;
   padding: 11px 22px;
   border-radius: 99px;
   border: 1px solid var(--line);
   background: #fff;
   font: 600 15px Barlow, sans-serif;
   color: var(--mut);
   cursor: pointer;
   transition: .3s
}

.pill.on {
   background: var(--blue);
   color: #fff;
   border-color: var(--blue);
   box-shadow: 0 12px 24px -10px var(--blue)
}

.lst .row {
   display: flex;
   gap: 16px;
   align-items: center;
   padding: 15px 0;
   border-bottom: 1px solid var(--line);
   animation: si .5s both
}

.lst .row:last-child {
   border: 0
}

.lst b {
   display: block;
   font-size: 18px;
   font-weight: 700
}

.lst small {
   color: var(--mut);
   font-size: 15px
}

.lst .mv img {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover
}

.bx {
   width: 48px;
   height: 48px;
   border-radius: 12px;
   background: #eaf1ff;
   color: var(--blue);
   display: grid;
   place-items: center;
   font-size: 18px;
   flex: none
}

@keyframes si {
   from {
      opacity: 0;
      transform: translateX(-14px)
   }
}

.svl .btn {
   margin-top: 22px
}

.mv {
   display: none;
   margin: 0
}

.svr {
   position: relative;
   border-radius: 28px;
   overflow: hidden;
   min-height: 480px;
   background: linear-gradient(135deg, #0c2a5e, #06183a);
   color: #fff;
   display: flex;
   align-items: flex-end
}

.svr img,
.abi img,
.wi img,
.vc img {
   background: linear-gradient(135deg, #16305C, #2BB7FF)
}

.svr img {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   opacity: .6
}

.svr::after {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg, transparent 35%, rgba(6, 24, 58, .92))
}

.cap {
   position: relative;
   z-index: 2;
   padding: 30px
}

.cap b {
   display: block;
   font-size: 26px;
   font-weight: 700
}

.cap small {
   opacity: .8;
   font-size: 16px
}

/* ===== about ===== */
.abo {
   display: grid;
   grid-template-columns: 1.05fr 1fr;
   gap: 64px;
   align-items: center
}

.abi {
   position: relative
}

.abi img {
   width: 100%;
   aspect-ratio: 4/3.1;
   object-fit: cover;
   border-radius: 26px;
   box-shadow: 0 30px 60px -30px rgba(22, 48, 92, .5)
}

@keyframes spin {
   to {
      transform: rotate(360deg)
   }
}

@keyframes bob {
   50% {
      transform: translateY(-8px)
   }
}

.abo h2 {
   font-size: clamp(38px, 5.2vw, 60px)
}

.abo p {
   color: #000;
   margin: 16px 0 24px;
   font-size: 17px;
   line-height: 1.7
}

.fts {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 16px;
   margin-bottom: 28px
}

.fts div {
   display: flex;
   gap: 12px;
   align-items: center;
   font-weight: 700;
   font-size: 16px;
   line-height: 1.25
}

.fts small {
   display: block;
   font-weight: 400;
   color: var(--mut);
   font-size: 14px
}

.fts .ic {
   width: 44px;
   height: 44px;
   background: #fde8ea;
   color: var(--red);
   font-size: 17px
}

/* ===== stats / process ===== */
/* Years of Quality showcase */
.k .bi {
   margin-right: 6px
}

.pg2 {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 20px;
   counter-reset: p
}

.pr {
   background: #fff;
   border-radius: 22px;
   padding: 28px 24px;
   border: 1px solid var(--line);
   position: relative;
   transition: .4s
}

.pr:hover {
   transform: translateY(-8px);
   box-shadow: 0 24px 40px -24px rgba(22, 48, 92, .4)
}

.pr::before {
   counter-increment: p;
   content: "0" counter(p);
   position: absolute;
   right: 20px;
   top: 14px;
   font-size: 44px;
   font-weight: 800;
   color: #eaf1ff
}

.pr .ic {
   width: 54px;
   height: 54px;
   border-radius: 16px;
   background: var(--navy);
   color: #fff;
   font-size: 21px;
   margin-bottom: 16px
}

.pr h3 {
   font-size: 27px;
   margin-bottom: 6px
}

.pr p {
   color: var(--mut);
   font-size: 15.5px
}

/* ===== our works (vertical marquee) ===== */
.works {
   background: linear-gradient(160deg, #0B1B3A, #12295a);
   color: #fff;
   overflow: hidden
}

.works .hd2 p {
   color: #aebfdc
}

/* ===== testimonials ===== */
.av {
   width: 38px;
   height: 38px;
   border-radius: 50%;
   background: linear-gradient(135deg, var(--red), var(--sky));
   color: #fff;
   display: grid;
   place-items: center
}

.stars {
   color: #f5a623;
   font-size: 14px
}

/* ===== CTA ===== */
.cta {
   background: linear-gradient(100deg, var(--navy), #1f5ab0 65%, var(--sky));
   color: #fff;
   padding: 64px 0;
   position: relative;
   overflow: hidden
}

.cta::before {
   content: "";
   position: absolute;
   width: 420px;
   height: 420px;
   border-radius: 50%;
   background: rgba(255, 255, 255, .06);
   left: -140px;
   bottom: -200px
}

.ctag {
   position: relative;
   display: grid;
   grid-template-columns: 1.05fr .95fr;
   gap: 44px;
   align-items: center
}

.cta h2 {
   font-size: clamp(32px, 4.4vw, 48px)
}

.cta p {
   opacity: .9;
   margin: 10px 0 22px;
   font-size: 17px;
   max-width: 460px
}

.cta .bts {
   margin-bottom: 16px
}

.btn.gl {
   background: rgba(255, 255, 255, .14);
   border-color: rgba(255, 255, 255, .4);
   box-shadow: none
}

.cta .ph-n {
   display: inline-flex;
   gap: 8px;
   align-items: center;
   font-size: 20px;
   white-space: nowrap
}

.cta ul {
   list-style: none;
   padding: 0;
   margin: 22px 0 0;
   display: flex;
   flex-wrap: wrap;
   gap: 10px
}

.cta li {
   display: flex;
   gap: 8px;
   align-items: center;
   padding: 8px 14px;
   border-radius: 99px;
   background: rgba(255, 255, 255, .13);
   font-weight: 700;
   font-size: 14.5px
}

.vanf {
   position: relative;
   margin: 0;
   aspect-ratio: 16/11;
   border-radius: 20px;
   overflow: hidden;
  /* background: linear-gradient(135deg, #0c2a5e, #06183a)
   box-shadow: 0 40px 70px -30px rgba(0, 0, 0, .65);
   border: 1px solid rgba(255, 255, 255, .2);*/
}

.vanf img {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 80%;
    object-fit: cover;
   opacity: 0;
   transition: opacity .6s, transform 1.4s
}

.vanf.ok img {
   opacity: 1
}

.vanf:hover img {
   transform: scale(1.04)
}

.vanf::after {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg, transparent 45%, rgba(6, 24, 58, .85));
   pointer-events: none
}

.vfb {
   position: absolute;
   inset: 0;
   display: grid;
   place-items: center;
   font-size: 96px;
   color: rgba(255, 255, 255, .22)
}

.vanf.ok .vfb {
   display: none
}

.vanf figcaption {
   position: absolute;
   left: 14px;
   right: 14px;
   bottom: 14px;
   z-index: 2;
   display: flex;
   gap: 12px;
   align-items: center;
   padding: 12px 16px;
   border-radius: 18px;
   background: rgba(11, 27, 58, .72);
   -webkit-backdrop-filter: blur(8px);
   backdrop-filter: blur(8px)
}

.vanf figcaption>.bi {
   font-size: 26px;
   color: var(--sky)
}

.vanf figcaption b {
   display: block;
   font-size: 16px;
   line-height: 1.2
}

.vanf figcaption small {
   opacity: .8;
   font-size: 13.5px
}

/* ===== footer ===== */
/* ===== services page ===== */
.vsp {
   display: grid;
   grid-template-columns: 280px 1fr;
   gap: 24px;
   align-items: start
}

.vtl {
   display: grid;
   gap: 12px;
   position: sticky;
   top: 110px
}

.vt {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 18px;
   border-radius: 16px;
   border: 1px solid var(--line);
   background: #fff;
   font: 700 18px Barlow, sans-serif;
   color: var(--navy);
   cursor: pointer;
   text-align: left;
   transition: .3s
}

.vt .vtn {
   flex: 1
}

.vt em {
   margin-left: auto;
   font-style: normal;
   font-size: 14px;
   color: var(--mut)
}

.vt .ic {
   width: 34px;
   height: 34px;
   background: #eef3fb;
   color: var(--blue);
   font-size: 15px
}

.vt.on {
   background: linear-gradient(135deg, #0d4fa8, #1e82e6);
   color: #fff;
   box-shadow: 0 18px 30px -14px #1e6be6
}

.vt.on em {
   color: #cfe3ff
}

.vt.on .ic {
   background: rgba(255, 255, 255, .2);
   color: #fff
}

.vc {
   display: grid;
   grid-template-columns: .9fr 1.1fr;
   gap: 34px;
   background: #fff;
   border: 1px solid var(--line);
   border-radius: 28px;
   padding: 30px;
   align-items: start;
   animation: si .5s both
}

.vci {
   position: relative;
   margin: 0;
   border-radius: 20px;
   overflow: hidden;
   aspect-ratio: 4/4.3;
   max-height: 520px;
   background: linear-gradient(135deg, #16305C, #2BB7FF)
}

.vci img {
   width: 100%;
   height: 100%;
   object-fit: cover
}

.vb {
   position: absolute;
   left: 14px;
   top: 14px;
   width: 46px;
   height: 46px;
   border-radius: 14px;
   background: #fff;
   color: var(--blue);
   display: grid;
   place-items: center;
   font-size: 21px;
   box-shadow: 0 12px 22px -10px rgba(11, 27, 58, .55)
}

.vcb {
   min-width: 0
}

.vcb h3 {
   font-size: 40px;
   margin-bottom: 10px
}

.vcb>p {
   color: var(--mut);
   margin-bottom: 16px;
   font-size: 17px
}

.chk {
   list-style: none;
   padding: 0;
   display: grid;
   gap: 10px;
   margin: 0 0 20px;
   font-weight: 600
}

.chk li {
   display: flex;
   gap: 10px;
   align-items: center
}

.chk .bi {
   color: var(--blue);
   font-size: 17px
}

.sg {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 12px;
   margin-bottom: 22px
}

.sgi {
   display: flex;
   gap: 12px;
   align-items: center;
   padding: 12px;
   border-radius: 16px;
   background: var(--bg);
   border: 1px solid var(--line);
   min-width: 0
}

.sgi .bx {
   width: 42px;
   height: 42px;
   font-size: 17px;
   border-radius: 12px;
   background: #fff
}

.sgi b {
   display: block;
   font-size: 16px;
   line-height: 1.2
}

.sgi small {
   display: block;
   color: var(--mut);
   font-size: 13.5px;
   line-height: 1.3
}

.faq {
   max-width: 820px;
   margin: auto;
   display: grid;
   gap: 12px
}

.faq details {
   background: #fff;
   border: 1px solid var(--line);
   border-radius: 16px;
   padding: 18px 22px
}

.faq summary {
   font-weight: 700;
   font-size: 18px;
   cursor: pointer;
   list-style: none;
   display: flex;
   justify-content: space-between;
   gap: 12px
}

.faq summary::after {
   content: "+";
   color: var(--red);
   font-size: 24px;
   line-height: 1
}

.faq details[open] summary::after {
   content: "−"
}

.faq p {
   color: var(--mut);
   margin-top: 10px
}

/* ===== about page ===== */
.vg {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 20px
}

.vl {
   background: #fff;
   border: 1px solid var(--line);
   border-radius: 22px;
   padding: 28px;
   transition: .4s
}

.vl:hover {
   transform: translateY(-8px);
   box-shadow: 0 24px 40px -24px rgba(22, 48, 92, .4)
}

.vl .ic {
   width: 54px;
   height: 54px;
   border-radius: 16px;
   background: #fde8ea;
   color: var(--red);
   font-size: 21px;
   margin-bottom: 16px
}

.vl h3 {
   font-size: 28px;
   margin-bottom: 6px
}

.vl p {
   color: var(--mut);
   font-size: 16px
}

.tl {
   max-width: 760px;
   margin: auto;
   position: relative;
   padding-left: 34px
}

.tl::before {
   content: "";
   position: absolute;
   left: 8px;
   top: 6px;
   bottom: 6px;
   width: 3px;
   background: linear-gradient(var(--red), var(--sky));
   border-radius: 3px
}

.tl div {
   position: relative;
   margin-bottom: 30px
}

.tl div::before {
   content: "";
   position: absolute;
   left: -34px;
   top: 6px;
   width: 19px;
   height: 19px;
   border-radius: 50%;
   background: #fff;
   border: 4px solid var(--red)
}

.tl b {
   font-size: 30px;
   color: var(--navy)
}

.tl p {
   color: var(--mut)
}

/* ===== contact page ===== */
.cg {
   display: grid;
   grid-template-columns: .9fr 1.1fr;
   gap: 36px;
   align-items: start
}

.ci {
   display: grid;
   gap: 14px
}

.ci a,
.ci div {
   display: flex;
   gap: 16px;
   align-items: center;
   background: #fff;
   border: 1px solid var(--line);
   border-radius: 18px;
   padding: 18px 20px;
   text-decoration: none;
   color: var(--ink);
   transition: .3s
}

.ci a:hover {
   transform: translateX(6px);
   border-color: var(--red)
}

.map {
   margin-top: 40px;
   border-radius: 26px;
   overflow: hidden;
   border: 1px solid var(--line);
   height: 360px
}

.map iframe {
   width: 100%;
   height: 100%;
   border: 0
}

/* ===== sticky WhatsApp / call / back-to-top (always on top, icon-font based) ===== */
.fab {
   position: fixed;
   right: 16px;
   bottom: calc(16px + env(safe-area-inset-bottom));
   z-index: 9998;
   display: flex;
   flex-direction: column;
   gap: 12px;
   align-items: flex-end;
   transform: translate3d(0, 0, 0);
   -webkit-transform: translate3d(0, 0, 0);
   transition: bottom .35s;
   pointer-events: none
}

.fab>* {
   pointer-events: auto
}

.fab a {
   --g: #25D366;
   height: 58px;
   min-width: 58px;
   border-radius: 99px;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #fff;
   font-size: 27px;
   text-decoration: none;
   overflow: hidden;
   animation: fp 2.4s infinite;
   transition: padding .35s, transform .35s;
   box-shadow: 0 14px 28px -8px rgba(0, 0, 0, .45);
   -webkit-tap-highlight-color: transparent
}

.fab .wa {
   background: linear-gradient(135deg, #25D366, #128C7E)
}

.fab .cl3 {
   --g: #D1202B;
   background: linear-gradient(135deg, #e5303b, #a8121c);
   font-size: 24px
}

.fab a span {
   max-width: 0;
   opacity: 0;
   white-space: nowrap;
   font: 700 16px Barlow, sans-serif;
   transition: max-width .35s, opacity .35s
}

.fab a:hover,
.fab a:focus-visible {
   padding: 0 22px 0 20px;
   gap: 10px;
   transform: translateX(-2px)
}

.fab a:hover span,
.fab a:focus-visible span {
   max-width: 130px;
   opacity: 1
}

@keyframes fp {
   0% {
      box-shadow: 0 14px 28px -8px rgba(0, 0, 0, .45), 0 0 0 0 var(--g)
   }

   70%,
   100% {
      box-shadow: 0 14px 28px -8px rgba(0, 0, 0, .45), 0 0 0 16px transparent
   }
}

.fab .top {
   position: relative;
   width: 46px;
   height: 46px;
   border-radius: 50%;
   border: 0;
   padding: 0;
   cursor: pointer;
   display: grid;
   place-items: center;
   color: var(--navy);
   font-size: 21px;
   background: conic-gradient(var(--red) calc(var(--sp, 0)*360deg), #d3deef 0);
   box-shadow: 0 12px 24px -8px rgba(11, 27, 58, .55);
   opacity: 0;
   visibility: hidden;
   transform: translateY(14px) scale(.8);
   transition: opacity .3s, transform .3s, visibility 0s .3s, color .2s;
   -webkit-tap-highlight-color: transparent
}

.fab .top::before {
   content: "";
   position: absolute;
   inset: 4px;
   border-radius: 50%;
   background: #fff
}

.fab .top .bi {
   position: relative
}

.fab .top.show {
   opacity: 1;
   visibility: visible;
   transform: none;
   transition: opacity .3s, transform .3s, color .2s
}

.fab .top:hover {
   color: var(--red)
}

.bub {
   position: absolute;
   right: 72px;
   bottom: 70px;
   background: #fff;
   color: var(--ink);
   padding: 10px 16px;
   border-radius: 16px 16px 4px 16px;
   font-weight: 600;
   font-size: 15px;
   box-shadow: 0 18px 34px -12px rgba(11, 27, 58, .4);
   white-space: nowrap;
   opacity: 0;
   transform-origin: bottom right;
   animation: bb 9s 3s both;
   pointer-events: none
}

@keyframes bb {
   0% {
      opacity: 0;
      transform: translateY(8px) scale(.9)
   }

   8%,
   85% {
      opacity: 1;
      transform: none
   }

   100% {
      opacity: 0;
      transform: translateY(8px) scale(.9)
   }
}

/* ===== cookies ===== */
.ck {
   position: fixed;
   left: 20px;
   bottom: calc(20px + env(safe-area-inset-bottom));
   z-index: 10050;
   width: min(430px, calc(100% - 40px));
   max-height: calc(100vh - 40px);
   max-height: calc(100dvh - 40px);
   overflow: auto;
   -webkit-overflow-scrolling: touch;
   background: #fff;
   border-radius: 24px;
   padding: 22px;
   border: 1px solid var(--line);
   box-shadow: 0 30px 70px -20px rgba(11, 27, 58, .5);
   opacity: 0;
   visibility: hidden;
   transform: translateY(30px);
   pointer-events: none;
   transition: opacity .45s, transform .45s, visibility 0s .45s
}

.ck.vis {
   opacity: 1;
   visibility: visible;
   transform: none;
   pointer-events: auto;
   transition: opacity .45s, transform .45s
}

.ck h4 {
   display: flex;
   gap: 10px;
   align-items: center;
   font-size: 19px;
   line-height: 1.2;
   margin-bottom: 6px
}

.ck h4 .bi {
   color: var(--red);
   font-size: 22px
}

.ck p {
   color: var(--mut);
   font-size: 15px;
   line-height: 1.5;
   margin-bottom: 16px
}

.ckb {
   display: flex;
   gap: 8px;
   flex-wrap: wrap
}

.ckb button {
   flex: 1 1 auto;
   min-height: 46px;
   padding: 12px 14px;
   border-radius: 99px;
   font: 700 14.5px Barlow, sans-serif;
   cursor: pointer;
   border: 1.5px solid var(--red);
   background: var(--red);
   color: #fff;
   white-space: nowrap;
   -webkit-tap-highlight-color: transparent;
   transition: .25s
}

.ckb button:hover {
   transform: translateY(-2px)
}

.ckb .o {
   background: #fff;
   color: var(--red)
}

.ckb .g {
   background: #eef3fb;
   border-color: #eef3fb;
   color: var(--navy)
}

.cm {
   position: fixed;
   inset: 0;
   z-index: 10100;
   background: rgba(11, 27, 58, .62);
   display: none;
   place-items: center;
   padding: 16px;
   -webkit-backdrop-filter: blur(4px);
   backdrop-filter: blur(4px)
}

.cm.vis {
   display: grid
}

.cmb {
   position: relative;
   background: #fff;
   border-radius: 24px;
   padding: 28px;
   width: min(520px, 100%);
   max-height: calc(100vh - 32px);
   max-height: calc(100dvh - 32px);
   overflow: auto;
   -webkit-overflow-scrolling: touch;
   overscroll-behavior: contain
}

.cx {
   position: absolute;
   right: 14px;
   top: 14px;
   width: 38px;
   height: 38px;
   border-radius: 50%;
   border: 0;
   background: #eef3fb;
   color: var(--navy);
   cursor: pointer;
   font-size: 15px;
   display: grid;
   place-items: center
}

.cx:hover {
   background: var(--red);
   color: #fff
}

.cmb h3 {
   font-size: 32px;
   margin-bottom: 6px;
   padding-right: 44px
}

.cmb>p {
   color: var(--mut);
   margin-bottom: 16px
}

.cr {
   display: flex;
   justify-content: space-between;
   gap: 16px;
   align-items: center;
   padding: 14px 0;
   border-top: 1px solid var(--line)
}

.cr b {
   display: block
}

.cr small {
   color: var(--mut);
   font-size: 14px
}

.trk {
   position: absolute;
   inset: 0;
   border-radius: 99px;
   background: #cfd9ea;
   transition: .3s
}

.trk::after {
   content: "";
   position: absolute;
   left: 3px;
   top: 3px;
   width: 22px;
   height: 22px;
   border-radius: 50%;
   background: #fff;
   transition: .3s;
   box-shadow: 0 2px 6px rgba(0, 0, 0, .25)
}

.cm .ckb {
   margin-top: 18px
}

/* ===== Our Works: two rows running horizontally in opposite directions ===== */
.wk {
   --g: 18px;
   --k: 1;
   display: grid;
   gap: var(--g);
   -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
   mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent)
}

.wr {
   overflow: hidden
}

.wt {
   display: flex;
   width: max-content;
   animation: wl 80s linear infinite;
   will-change: transform;
   backface-visibility: hidden;
   -webkit-backface-visibility: hidden
}

.wt.rev {
   animation-name: wrr;
   animation-duration: 90s
}

.wt .set {
   display: flex;
   gap: var(--g);
   padding-right: var(--g);
   flex: none
}

@keyframes wl {
   from {
      transform: translate3d(0, 0, 0)
   }

   to {
      transform: translate3d(-50%, 0, 0)
   }
}

@keyframes wrr {
   from {
      transform: translate3d(-50%, 0, 0)
   }

   to {
      transform: translate3d(0, 0, 0)
   }
}

@media(hover:hover) {
   .wk:hover .wt {
      animation-play-state: paused
   }
}

.wi {
   position: relative;
   flex: none;
   width: calc(var(--w)*1px*var(--k));
   height: calc(250px*var(--k));
   border-radius: 22px;
   overflow: hidden;
   background: linear-gradient(135deg, #16305C, #2BB7FF);
   border: 1px solid rgba(255, 255, 255, .1)
}

.wi img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform .8s
}

.wi:hover img {
   transform: scale(1.08)
}

.wi span {
   display: none!important;
   position: absolute;
   left: 14px;
   bottom: 14px;
   background: rgba(11, 27, 58, .78);
   -webkit-backdrop-filter: blur(8px);
   backdrop-filter: blur(8px);
   padding: 6px 14px;
   border-radius: 99px;
   font-size: 14px;
   font-weight: 600
}

/* ===== responsive ===== */
@media(max-width:1180px) {
   .dn a .bi {
      display: none
   }
}

@media(max-width:1100px) {
   .dn a {
      padding: 9px 11px;
      font-size: 14.5px
   }

   .call b {
      font-size: 14px
   }
}

@media(max-width:960px) {

   .tbar,
   .dn,
   .call {
      display: none
   }

   .bg {
      display: block
   }

   .hb {
      height: 66px;
      gap: 12px
   }

   .lg img {
      height: 60px;
   }

   .hd.sc .mn {
      padding: 6px 8px 0
   }

   .hd.sc .hb {
      height: 58px;
      max-width: none;
      padding: 0 8px 0 14px
   }

   .hd.sc .lg img {
      height: 38px
   }

   .bg {
      width: 48px;
      height: 48px;
      border-radius: 15px
   }

   .hero {
      padding: calc(92px + env(safe-area-inset-top)) 0 18px;
      align-items: flex-start
   }

   .hero .w {
      grid-template-columns: 1fr;
      gap: 0
   }

   .hero h1 {
      font-size: clamp(46px, 13.5vw, 66px);
      margin: 4px 0 10px
   }

   .hero p {
      font-size: 16px;
      margin-bottom: 16px;
      max-width: none
   }

   .tr {
      display: none
   }

   /* 3D scene on phones/tablets: flat, stable, no overlap with the sticky header */
   .stage {
      perspective: none;
      display: flex;
      flex-direction: column
   }

   .hw {
      transform: none !important;
      -webkit-transform: none !important;
      transform-style: flat;
      -webkit-transform-style: flat
   }

   .sw {
      transform-style: flat;
      -webkit-transform-style: flat
   }

   .orb {
      transform: none
   }

   .glo {
      transform: none;
      filter: blur(22px)
   }

   .hp {
      transform: none
   }

   #hs {
      max-height: 42svh;
      max-height: 42vh;
      margin: 0 auto;
      filter: drop-shadow(0 22px 20px rgba(22, 48, 92, .2))
   }

   .mode {
      position: static;
      order: -1;
      align-self: center;
      display: inline-flex;
      gap: 8px;
      align-items: baseline;
      margin: 0 0 4px;
      padding: 6px 16px;
      border-radius: 99px;
      max-width: none
   }

   .mode b {
      font-size: 15px
   }

   .mode small {
      display: none
   }

   .hand {
      font-size: 19px
   }

   .eff,
   .ctl,
   .rd,
   .hint {
      display: none
   }

   .orb .ic {
      width: 30px;
      height: 30px;
      margin: -15px;
      font-size: 13px
   }

   .hp {
      width: 18px;
      height: 18px;
      margin: -9px
   }

   .tp {
      min-width: 130px;
      max-width: 180px
   }

   .tabs {
      margin-top: 10px
   }

   .tabs button {
      padding: 8px 14px;
      font-size: 13.5px
   }

   section {
      padding: 58px 0
   }

   .ph {
      padding: calc(80px + env(safe-area-inset-top)) 0 25px
   }

   .svh,
   .abo,
   .tg,
   .ctag,
   .cg,
   .vsp,
   .vc {
      grid-template-columns: 1fr
   }

   .svh {
      gap: 0
   }

   .svr {
      display: none
   }

   .lst .mv {
      display: block;
      position: relative;
      aspect-ratio: 16/10;
      max-height: 240px;
      width: 100%;
      border-radius: 20px;
      overflow: hidden;
      margin: 6px 0 10px;
      background: linear-gradient(135deg, #0c2a5e, #06183a);
      color: #fff
   }

   .lst .mv::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, transparent 30%, rgba(6, 24, 58, .88))
   }

   .lst .mv figcaption {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 2;
      padding: 14px 16px
   }

   .lst .mv b {
      display: block;
      font-size: 18px;
      line-height: 1.2;
      color: #fff
   }

   .lst .mv small {
      color: #d6e4ff;
      font-size: 14px
   }

   .pills {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      padding: 2px 0 8px;
      margin: 22px 0 8px
   }

   .pills .pill:last-child:nth-child(odd) {
      grid-column: 1/-1
   }

   .pill {
      padding: 12px 10px;
      width: 100%
   }

   .abo {
      gap: 56px
   }

   .pg2 {
      grid-template-columns: 1fr 1fr
   }

   .vg,
   .tt {
      grid-template-columns: 1fr 1fr
   }

   .vtl {
      position: static;
      grid-template-columns: 1fr 1fr;
      gap: 10px
   }

   .vtl .vt:last-child:nth-child(odd) {
      grid-column: 1/-1
   }

   .vt {
      padding: 12px 14px;
      font-size: 16px;
      border-radius: 16px
   }

   .vt em {
      display: none
   }

   .vc {
      padding: 18px;
      gap: 20px
   }

   .vci {
      aspect-ratio: 16/10;
      max-height: 240px
   }

   .vcb h3 {
      font-size: 34px
   }

   .ctag {
      gap: 30px
   }

   .wk {
      --k: .78;
      --g: 14px
   }
}

@media(max-width:600px) {
   .w {
      padding: 0 16px
   }

   .tt,
   .vg,
   .fts,
   .fr,
   .sg {
      grid-template-columns: 1fr
   }

   .pg2 {
      grid-template-columns: 1fr
   }

   .map {
      height: 280px
   }

   .hand {
      display: none
   }

   .hero .bts .btn {
      padding: 14px 10px;
      font-size: 14.5px;
      white-space: nowrap
   }

   .bts .btn {
      flex: 1
   }

   .fab {
      right: 12px;
      bottom: calc(14px + var(--ckh, 0px) + env(safe-area-inset-bottom))
   }

   .fab a {
      height: 52px;
      min-width: 52px;
      font-size: 24px
   }

   .fab .cl3 {
      font-size: 21px
   }

   .fab .top {
      width: 42px;
      height: 42px
   }

   .bub {
      display: none
   }

   .cta {
      padding: 48px 0
   }

   .cta .ph-n {
      display: flex;
      margin: 12px 0 0
   }

   .cta li {
      font-size: 13.5px;
      padding: 7px 12px
   }

   .vanf {
      aspect-ratio: 16/11;
      border-radius: 22px
   }

   .vanf figcaption {
      left: 10px;
      right: 10px;
      bottom: 10px;
      padding: 10px 12px
   }

   .vanf figcaption b {
      font-size: 15px
   }

   .svr {
      min-height: 300px
   }

   .dw>a.l {
      font-size: 20px
   }

   .wk {
      --k: .62;
      --g: 12px
   }

   .wi {
      border-radius: 16px
   }

   .wi span {
      font-size: 12px;
      left: 8px;
      bottom: 8px;
      padding: 4px 10px
   }

   .ck {
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      max-height: 82vh;
      max-height: 82dvh;
      border-radius: 22px 22px 0 0;
      border-width: 1px 0 0;
      padding: 18px 16px calc(16px + env(safe-area-inset-bottom))
   }

   .ck h4 {
      font-size: 17px
   }

   .ck p {
      font-size: 13.5px;
      line-height: 1.45;
      margin-bottom: 12px
   }

   .ckb {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 6px
   }

   .ckb button {
      padding: 11px 4px;
      font-size: 13px;
      min-height: 44px
   }

   .cm {
      align-items: end;
      padding: 0
   }

   .cmb {
      width: 100%;
      border-radius: 24px 24px 0 0;
      padding: 24px 18px calc(18px + env(safe-area-inset-bottom));
      max-height: 90vh;
      max-height: 90dvh
   }

   .cmb h3 {
      font-size: 28px
   }
}

@media(max-width:360px) {
   .ckb button {
      font-size: 12px
   }
}

/* reduced motion: keep the tickers running (they are the point of the design), calm the decorative effects */
@media(prefers-reduced-motion:reduce) {
   html {
      scroll-behavior: auto
   }

   .rv {
      transition: none;
      opacity: 1;
      transform: none;
      filter: none
   }

   .call .ic,
   .fab a,
   .bub,
   .hp,
   .yrs-t,
   .yq-ring,
   .yq-orb,
   .yq-chip i,
   .ys-tag .live,
   .ys:nth-child(2) .ysg::after,
   .ys:nth-child(3) .ys-st .bi,
   .ft-ic,
   .ft-pipe,
   .tb-off,
   .tb-em .bi {
      animation: none
   }
}

.tgl {
   position: relative;
   flex: none;
   width: 48px;
   height: 28px
}

.tgl input {
   position: absolute;
   inset: 0;
   opacity: 0;
   width: 100%;
   height: 100%;
   margin: 0;
   cursor: pointer;
   z-index: 2
}

.trk {
   position: absolute;
   inset: 0;
   border-radius: 99px;
   background: #cfd9ea;
   transition: .3s
}

.trk::after {
   content: "";
   position: absolute;
   left: 3px;
   top: 3px;
   width: 22px;
   height: 22px;
   border-radius: 50%;
   background: #fff;
   transition: .3s;
   box-shadow: 0 2px 6px rgba(0, 0, 0, .25)
}

.tgl input:checked+.trk {
   background: var(--blue)
}

.tgl input:checked+.trk::after {
   transform: translateX(20px)
}

.tgl input:disabled+.trk {
   opacity: .55
}

.tgl input:focus-visible+.trk {
   outline: 3px solid rgba(30, 107, 230, .4);
   outline-offset: 2px
}

/* =====================================================================
   v4 — top bar, seal badge, Years of Quality, testimonials, contact, footer
   ===================================================================== */
.k.kw {
   background: rgba(255, 255, 255, .14);
   color: #fff
}

.k .bi {
   margin-right: 6px
}

@keyframes spin {
   to {
      transform: rotate(360deg)
   }
}

@keyframes bob {
   50% {
      transform: translateY(-8px)
   }
}

@keyframes blink {
   50% {
      opacity: .25
   }
}

@keyframes wob {

   0%,
   100% {
      transform: rotate(-8deg)
   }

   50% {
      transform: rotate(6deg) scale(1.06)
   }
}

@keyframes float {
   50% {
      transform: translateY(-22px) rotate(6deg)
   }
}

@keyframes cspin {
   from {
      transform: rotate(calc(var(--a)*-1))
   }

   to {
      transform: rotate(calc(var(--a)*-1 - 360deg))
   }
}

@keyframes pulse {
   50% {
      box-shadow: 0 0 0 14px rgba(209, 32, 43, .12), 0 0 90px rgba(209, 32, 43, .65)
   }
}

@keyframes sweep {

   0%,
   60% {
      left: -40%
   }

   100% {
      left: 140%
   }
}

/* ---------- top bar (#d1202b) ---------- */
.tbar {
   position: relative;
   background: #d1202b;
   background-image: repeating-linear-gradient(115deg, rgba(255, 255, 255, .07) 0 12px, transparent 12px 24px);
   color: #fff;
   font-size: 13.5px;
   max-height: 46px;
   overflow: hidden;
   transition: max-height .35s
}

.tbar::after {
   content: "";
   position: absolute;
   top: 0;
   left: -40%;
   width: 30%;
   height: 100%;
   background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .22), transparent);
   transform: skewX(-20deg);
   animation: sweep 6s ease-in-out infinite;
   pointer-events: none
}

.tbar .w {
   position: relative;
   z-index: 1;
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 14px;
   height: 44px
}

.tbar .l,
.tbar .r {
   display: flex;
   align-items: center;
   gap: 8px;
   min-width: 0
}

.tbar a,
.tb-gs,
.tb-em {
   display: inline-flex;
   gap: 7px;
   align-items: center;
   padding: 6px 13px;
   border-radius: 99px;
   background: rgba(255, 255, 255, .14);
   color: #fff;
   text-decoration: none;
   font-weight: 600;
   line-height: 1;
   white-space: nowrap;
   transition: .25s
}

.tbar .l a:hover {
   background: #fff;
   color: #d1202b;
   transform: translateY(-1px)
}

.tb-em {
   background: rgba(0, 0, 0, .22);
   font-weight: 700;
   letter-spacing: .04em;
   text-transform: uppercase;
   font-size: 12px
}

.tb-em .bi {
   color: #ffd24d;
   animation: blink 1.3s infinite
}

.tbar a.tb-off {
   background: #fff;
   color: #d1202b;
   font-weight: 800
}

.tbar a.tb-off .bi {
   animation: wob 2.2s ease-in-out infinite
}

.tbar a.tb-off:hover {
   background: #0B1B3A;
   color: #fff
}

.tbar .soc a {
   width: 30px;
   height: 30px;
   padding: 0;
   justify-content: center;
   font-size: 14px;
   background: rgba(255, 255, 255, .18)
}

.tbar .soc a:hover {
   background: #fff;
   color: #d1202b;
   transform: rotate(-8deg) scale(1.1)
}

@media(max-width:1180px) {

   .tbar .tm,
   .tb-gs {
      display: none
   }
}

@media(max-width:1020px) {
   .tbar .t2 {
      display: none
   }
}

/* ---------- drawer numbers ---------- */
.dnum {
   display: grid;
   gap: 8px;
   margin-top: 22px
}

.dnum a {
   display: flex;
   gap: 10px;
   align-items: center;
   justify-content: center;
   padding: 13px;
   border-radius: 16px;
   background: #fff;
   border: 1.5px solid var(--line);
   color: var(--navy);
   font-weight: 700;
   font-size: 17px;
   text-decoration: none
}

.dnum .bi {
   color: var(--red)
}

.dw .dnum+.bts {
   margin-top: 12px
}

/* ---------- About seal badge ---------- */
.yrs {
   position: absolute;
   right: -18px;
   bottom: -30px;
   width: 172px;
   height: 172px;
   border-radius: 50%;
   background: radial-gradient(circle at 30% 22%, #2a6fd0, var(--navy) 72%);
   color: #fff;
   box-shadow: 0 26px 50px -18px rgba(22, 48, 92, .75), 0 0 0 6px #fff;
   animation: bob 5s ease-in-out infinite
}

.yrs-t {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   animation: spin 22s linear infinite
}

.yrs-t text {
   font: 700 14.5px 'Barlow Condensed', Barlow, sans-serif;
   fill: #cfe6ff;
   letter-spacing: .06em
}

.yrs-c {
   position: absolute;
   inset: 0;
   display: grid;
   place-content: center;
   text-align: center
}

.yr-ring {
   display: block;
   font-size: 22px;
   color: #FFC65C;
   margin: 0 auto 2px;
   animation: wob 3s ease-in-out infinite
}

.yrs b {
   display: block;
   font: 800 52px/.9 'Barlow Condensed', Barlow, sans-serif;
   color: #fff
}

.yrs .yl {
   display: block;
   font: 700 14px 'Barlow Condensed', Barlow, sans-serif;
   letter-spacing: .28em;
   text-transform: uppercase;
   margin-top: 2px
}

/* ---------- Years of Quality showcase ---------- */
.yq {
   position: relative;
   overflow: hidden;
   isolation: isolate;
   padding: 92px 0;
   color: #fff;
   background: radial-gradient(55% 60% at 12% 25%, rgba(43, 183, 255, .22), transparent 62%), radial-gradient(50% 60% at 92% 85%, rgba(209, 32, 43, .3), transparent 62%), linear-gradient(135deg, #071430, #0B1B3A 55%, #12295a)
}

.yq::before {
   content: "";
   position: absolute;
   inset: 0;
   z-index: -1;
   background: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0/46px 46px, linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0/46px 46px;
   -webkit-mask-image: radial-gradient(75% 85% at 50% 45%, #000, transparent);
   mask-image: radial-gradient(75% 85% at 50% 45%, #000, transparent)
}

.yq-ic .bi {
   position: absolute;
   z-index: -1;
   font-size: 150px;
   color: rgba(255, 255, 255, .04);
   animation: float 10s ease-in-out infinite
}

.yq-ic .bi:nth-child(1) {
   left: 3%;
   bottom: 6%
}

.yq-ic .bi:nth-child(2) {
   right: 4%;
   top: 4%;
   animation-delay: -3s
}

.yq-ic .bi:nth-child(3) {
   left: 46%;
   top: -30px;
   animation-delay: -6s
}

.yq-in {
   display: grid;
   grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
   gap: 48px 56px;
   align-items: center
}

.yq-orbit {
   --d: min(430px, 86vw);
   --cs: 54px;
   position: relative;
   width: var(--d);
   height: var(--d);
   margin: auto
}

.yq-orbit::before,
.yq-orbit::after {
   content: "";
   position: absolute;
   border-radius: 50%
}

.yq-orbit::before {
   inset: 6%;
   border: 1.5px dashed rgba(43, 183, 255, .5);
   animation: spin 36s linear infinite reverse
}

.yq-orbit::after {
   inset: 17%;
   border: 1.5px solid rgba(255, 255, 255, .12)
}

.yq-ring {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   animation: spin 46s linear infinite
}

.yq-ring text {
   font: 700 16px 'Barlow Condensed', Barlow, sans-serif;
   fill: rgba(255, 255, 255, .8);
   text-transform: uppercase
}

.yq-orb {
   position: absolute;
   inset: 0;
   animation: spin 28s linear infinite
}

.yq-chip {
   position: absolute;
   left: 50%;
   top: 50%;
   width: var(--cs);
   height: var(--cs);
   margin: calc(var(--cs)/-2) 0 0 calc(var(--cs)/-2);
   transform: rotate(var(--a)) translateY(calc(var(--d)*-.445))
}

.yq-chip i {
   display: grid;
   place-items: center;
   width: 100%;
   height: 100%;
   border-radius: 50%;
   background: #fff;
   color: var(--c);
   font-size: calc(var(--cs)*.46);
   box-shadow: 0 14px 26px -8px rgba(0, 0, 0, .65), 0 0 0 4px rgba(255, 255, 255, .12);
   animation: cspin 28s linear infinite
}

.yq-core {
   position: absolute;
   inset: 24%;
   border-radius: 50%;
   display: grid;
   place-content: center;
   text-align: center;
   background: radial-gradient(circle at 32% 24%, #f0505a, var(--red) 55%, #7d0c14);
   box-shadow: 0 0 0 10px rgba(209, 32, 43, .18), 0 0 70px rgba(209, 32, 43, .5);
   animation: pulse 3.6s ease-in-out infinite
}

.yq-core b {
   display: block;
   font: 800 clamp(70px, 15vw, 118px)/.82 'Barlow Condensed', Barlow, sans-serif;
   letter-spacing: -.01em
}

.yq-core span {
   display: block;
   font: 700 clamp(15px, 2.6vw, 21px) 'Barlow Condensed', Barlow, sans-serif;
   letter-spacing: .34em;
   text-transform: uppercase;
   margin-top: 4px;
   padding-left: .34em
}

.yq-copy h2 {
   font-size: clamp(44px, 6vw, 78px);
   line-height: .95;
   color: #fff;
   margin: 6px 0 16px
}

.yq-copy h2 em {
   font-style: normal;
   background: linear-gradient(90deg, #2BB7FF, #7fe3ff 50%, #ff8a92);
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent
}

.yq-copy>p {
   color: #d6e4ff;
   max-width: 540px;
   font-size: 17px;
   margin-bottom: 26px
}

/* stats: three creative gauge cards, side by side in one row */
.yq-stats {
   grid-column: 1/-1;
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 22px;
   margin-top: 8px
}

.ys {
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   padding: 26px 20px 24px;
   border-radius: 28px;
   background: linear-gradient(160deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .03));
   border: 1px solid rgba(255, 255, 255, .16);
   overflow: hidden;
   isolation: isolate;
   transition: opacity 1s cubic-bezier(.2, .8, .2, 1) calc(var(--i)*.12s), transform .45s cubic-bezier(.2, .8, .2, 1), filter 1s, border-color .3s, box-shadow .45s
}

.ys::before {
   content: "";
   position: absolute;
   z-index: -1;
   left: 50%;
   top: -30%;
   width: 120%;
   aspect-ratio: 1;
   transform: translateX(-50%);
   background: radial-gradient(circle, var(--c), transparent 62%);
   opacity: .2;
   transition: opacity .45s
}

.ys::after {
   content: "";
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0;
   height: 4px;
   background: linear-gradient(90deg, transparent, var(--c), transparent);
   box-shadow: 0 0 18px var(--c)
}

.ys.in:hover {
   transform: translateY(-8px);
   border-color: var(--c);
   box-shadow: 0 26px 50px -22px var(--c)
}

.ys:hover::before {
   opacity: .38
}

.ys-tag {
   display: inline-flex;
   align-items: center;
   gap: 7px;
   padding: 5px 12px;
   border-radius: 99px;
   font: 700 12px/1 'Barlow Condensed', Barlow, sans-serif;
   letter-spacing: .16em;
   text-transform: uppercase;
   color: var(--c);
   background: rgba(255, 255, 255, .08);
   border: 1px solid rgba(255, 255, 255, .12)
}

.ys-tag .live {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: var(--c);
   box-shadow: 0 0 0 0 var(--c);
   animation: yslive 1.8s ease-out infinite
}

@keyframes yslive {
   70% {
      box-shadow: 0 0 0 9px transparent
   }

   100% {
      box-shadow: 0 0 0 0 transparent
   }
}

.ysg {
   position: relative;
   width: 124px;
   height: 124px;
   margin: 18px 0 8px
}

.ysg svg {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   overflow: visible;
   transform: rotate(-90deg);
   filter: drop-shadow(0 0 7px color-mix(in srgb, var(--c) 70%, transparent))
}

.ysg circle {
   fill: none;
   stroke-width: 6;
   stroke-linecap: round
}

.ysg .gb {
   stroke: rgba(255, 255, 255, .12)
}

.ysg .gf {
   stroke: var(--c);
   stroke-dasharray: calc(var(--pp, 0)*2.89px) 289px
}

.ysi {
   position: absolute;
   inset: 17px;
   border-radius: 50%;
   display: grid;
   place-items: center;
   font-size: 38px;
   color: var(--c);
   background: radial-gradient(circle at 35% 25%, rgba(255, 255, 255, .22), rgba(255, 255, 255, .05));
   box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
   transition: .45s
}

.ys:hover .ysi {
   background: var(--c);
   color: #0B1B3A;
   transform: rotate(-8deg) scale(1.06)
}

.ys .ysn {
   display: block;
   font: 800 clamp(48px, 5.4vw, 52px)/1 'Barlow Condensed', Barlow, sans-serif;
   color: #fff;
   letter-spacing: -.01em;
   font-variant-numeric: tabular-nums
}

.ys h3 {
   font-size: 26px;
   color: #fff;
   margin: 6px 0 2px
}

.ys small {
   display: block;
   color: #bcd0f3;
   font-size: 15px
}

.ys-st {
   display: flex;
   gap: 4px;
   margin-top: 12px;
   font-size: 15px;
   color: var(--c);
   min-height: 17px;
   visibility: hidden
}

.ys:nth-child(3) .ys-st {
   visibility: visible
}

.ys:nth-child(3) .ys-st .bi {
   animation: ystw 2.4s ease-in-out infinite
}

.ys:nth-child(3) .ys-st .bi:nth-child(2) {
   animation-delay: .15s
}

.ys:nth-child(3) .ys-st .bi:nth-child(3) {
   animation-delay: .3s
}

.ys:nth-child(3) .ys-st .bi:nth-child(4) {
   animation-delay: .45s
}

.ys:nth-child(3) .ys-st .bi:nth-child(5) {
   animation-delay: .6s
}

@keyframes ystw {

   0%,
   60%,
   100% {
      transform: scale(1)
   }

   30% {
      transform: scale(1.35);
      filter: drop-shadow(0 0 6px var(--c))
   }
}

/* 24/7 card: slow sweeping radar line on the gauge */
.ys:nth-child(2) .ysg::after {
   content: "";
   position: absolute;
   inset: -5px;
   border-radius: 50%;
   background: conic-gradient(from 0deg, transparent 0 78%, var(--c) 100%);
   -webkit-mask: radial-gradient(circle, transparent 56%, #000 57%, #000 64%, transparent 65%);
   mask: radial-gradient(circle, transparent 56%, #000 57%, #000 64%, transparent 65%);
   opacity: .55;
   animation: spin 3.6s linear infinite
}

.yq-tl {
   grid-column: 1/-1;
   position: relative;
   display: none!important;
   grid-template-columns: repeat(4, 1fr);
   gap: 18px;
   padding-top: 44px;
   margin-top: 6px
}

.yq-tl::before,
.yq-tl::after {
   content: "";
   position: absolute;
   left: 0;
   top: 17px;
   height: 4px;
   border-radius: 4px
}

.yq-tl::before {
   right: 0;
   background: rgba(255, 255, 255, .14)
}

.yq-tl::after {
   width: 0;
   background: linear-gradient(90deg, var(--red), var(--sky));
   transition: width 2.2s cubic-bezier(.2, .8, .2, 1) .4s
}

.yq-tl.in::after {
   width: 100%
}

.yq-tl>div {
   position: relative
}

.mi {
   position: absolute;
   left: 0;
   top: -44px;
   width: 38px;
   height: 38px;
   border-radius: 50%;
   display: grid;
   place-items: center;
   background: #fff;
   color: var(--red);
   font-size: 17px;
   box-shadow: 0 0 0 5px rgba(255, 255, 255, .12)
}

.yq-tl b {
   display: block;
   font: 800 40px/1 'Barlow Condensed', Barlow, sans-serif;
   color: #fff
}

.yq-tl h3 {
   font-size: 21px;
   color: var(--sky);
   margin: 2px 0 4px;
   letter-spacing: .04em;
   text-transform: uppercase
}

.yq-tl small {
   display: block;
   color: #bcd0f3;
   font-size: 14.5px;
   line-height: 1.4
}

/* ---------- testimonials ---------- */
.tes {
   position: relative;
   overflow: hidden;
   background: linear-gradient(180deg, #fff, var(--bg))
}

.tes::before {
   content: "\201C";
   position: absolute;
   left: 3%;
   top: -60px;
   font: 800 420px/1 'Barlow Condensed', serif;
   color: #fde8ea;
   pointer-events: none
}

.tes .w {
   position: relative
}

.rate {
   display: flex;
   gap: 10px;
   justify-content: center;
   align-items: center
}

.rate b {
   color: var(--navy)
}

.tsl {
   position: relative
}

.tvp {
   overflow: hidden;
   padding: 34px 6px 44px;
   margin: -34px -6px -44px;
   touch-action: pan-y;
   cursor: grab;
   -webkit-user-select: none;
   user-select: none
}

.tvp:active {
   cursor: grabbing
}

.ttrack {
   display: flex;
   gap: 20px;
   will-change: transform;
   transition: transform .8s cubic-bezier(.2, .8, .2, 1)
}

.tcd {
   position: relative;
   flex: none;
   background: #fff;
   border: 1px solid var(--line);
   border-radius: 28px;
   padding: 30px 28px 24px;
   overflow: hidden;
   opacity: .5;
   transform: scale(.93);
   transition: opacity .5s, transform .5s, box-shadow .5s, border-color .5s;
   box-shadow: 0 16px 36px -28px rgba(22, 48, 92, .5)
}

.tcd::before {
   content: "";
   position: absolute;
   left: 0;
   right: 0;
   top: 0;
   height: 5px;
   background: linear-gradient(90deg, var(--red), var(--sky));
   transform: scaleX(0);
   transform-origin: left;
   transition: transform .7s
}

.tcd>.bi-quote {
   position: absolute;
   right: 16px;
   top: 8px;
   font-size: 92px;
   color: #fde8ea;
   line-height: 1;
   transition: .5s
}

.tcd.act {
   opacity: 1;
   transform: scale(1);
   border-color: rgba(209, 32, 43, .28);
   box-shadow: 0 36px 60px -30px rgba(22, 48, 92, .6)
}

.tcd.act::before {
   transform: scaleX(1)
}

.tcd.act>.bi-quote {
   color: #ffd3d6;
   transform: rotate(-8deg) scale(1.08)
}

.tcd .stars {
   position: relative;
   font-size: 16px;
   letter-spacing: 2px
}

.tcd q {
   position: relative;
   display: block;
   quotes: none;
   font-size: 18px;
   line-height: 1.6;
   color: #000;
   margin: 14px 0 24px;
   min-height: 116px
}

.tby {
   display: flex;
   gap: 12px;
   align-items: center
}

.tby b {
   display: block;
   font-size: 17px;
   line-height: 1.2
}

.tby small {
   display: block;
   color: #000;
   opacity: .7;
   font-size: 14px
}

.tby .av {
   width: 46px;
   height: 46px;
   font-size: 19px;
   font-weight: 700;
   flex: none
}

.tby .ver {
   margin-left: auto;
   color: var(--blue);
   font-size: 22px
}

.tctl {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 18px;
   margin-top: 62px
}

.tctl>button {
   width: 50px;
   height: 50px;
   border-radius: 50%;
   border: 1.5px solid var(--line);
   background: #fff;
   color: var(--navy);
   font-size: 19px;
   cursor: pointer;
   display: grid;
   place-items: center;
   transition: .3s;
   box-shadow: 0 12px 24px -14px rgba(22, 48, 92, .6)
}

.tctl>button:hover {
   background: var(--red);
   border-color: var(--red);
   color: #fff;
   transform: scale(1.08)
}

.tdots {
   display: flex;
   gap: 8px;
   align-items: center
}

.tdots button {
   position: relative;
   width: 12px;
   height: 12px;
   border-radius: 99px;
   border: 0;
   padding: 0;
   background: #c9d6ea;
   cursor: pointer;
   overflow: hidden;
   transition: width .4s, background .3s
}

.tdots button.on {
   width: 54px;
   background: #d9e3f3
}

.tdots button.on::after {
   content: "";
   position: absolute;
   inset: 0;
   background: var(--red);
   transform: scaleX(1);
   transform-origin: left
}

.tdots button.on.run::after {
   animation: dotfill 4.5s linear both
}

@keyframes dotfill {
   from {
      transform: scaleX(0)
   }

   to {
      transform: scaleX(1)
   }
}

/* ---------- contact page ---------- */
.ctp {
   padding-top: 70px
}

.offer {
   position: relative;
   display: grid;
   grid-template-columns: auto 1fr auto;
   align-items: center;
   gap: 30px;
   padding: 30px 44px;
   margin-bottom: 38px;
   border-radius: 30px;
   color: #fff;
   overflow: hidden;
   isolation: isolate;
   background: linear-gradient(110deg, #8f0f18, var(--red) 42%, #ff5a3c);
   box-shadow: 0 36px 60px -32px var(--red)
}

.offer::before,
.offer::after {
   content: "";
   position: absolute;
   top: 50%;
   width: 38px;
   height: 38px;
   margin-top: -19px;
   border-radius: 50%;
   background: var(--bg);
   z-index: 2
}

.offer::before {
   left: -19px
}

.offer::after {
   right: -19px
}

.of-dots {
   position: absolute;
   inset: 0;
   z-index: -1;
   pointer-events: none
}

.of-dots i {
   position: absolute;
   z-index: -1;
   border-radius: 50%;
   background: rgba(255, 255, 255, .14);
   animation: float 8s ease-in-out infinite
}

.of-dots i:nth-child(1) {
   width: 150px;
   height: 150px;
   left: 22%;
   top: -70px
}

.of-dots i:nth-child(2) {
   width: 70px;
   height: 70px;
   left: 40%;
   bottom: -24px;
   animation-delay: -2s
}

.of-dots i:nth-child(3) {
   width: 26px;
   height: 26px;
   left: 52%;
   top: 18px;
   animation-delay: -4s
}

.of-dots i:nth-child(4) {
   width: 200px;
   height: 200px;
   right: -60px;
   bottom: -110px;
   animation-delay: -1s
}

.of-dots i:nth-child(5) {
   width: 18px;
   height: 18px;
   left: 12%;
   bottom: 20px;
   animation-delay: -5s
}

.of-dots i:nth-child(6) {
   width: 40px;
   height: 40px;
   right: 26%;
   top: 14px;
   animation-delay: -3s
}

.offer .of-pct {
   display: flex;
   align-items: flex-start;
   line-height: .8;
   font-family: 'Barlow Condensed', Barlow, sans-serif;
   font-weight: 800;
   animation: bob 4s ease-in-out infinite
}

.of-pct b {
   font-size: clamp(110px, 14vw, 170px);
   letter-spacing: -.02em;
   text-shadow: 0 8px 0 rgba(0, 0, 0, .14)
}

.of-pct span {
   display: flex;
   flex-direction: column;
   padding-top: 8px
}

.of-pct sup {
   font-size: clamp(46px, 6vw, 70px);
   line-height: 1
}

.of-pct em {
   font-style: normal;
   font-size: clamp(30px, 4vw, 46px);
   letter-spacing: .1em;
   background: #fff;
   color: var(--red);
   padding: 2px 10px;
   border-radius: 8px;
   transform: rotate(-6deg);
   margin-top: 6px;
   display: inline-block;
   animation: wob 3s ease-in-out infinite
}

.of-mid {
   border-left: 2px dashed rgba(255, 255, 255, .6);
   padding-left: 30px
}

.of-tag {
   display: inline-flex;
   gap: 6px;
   align-items: center;
   background: #fff;
   color: var(--red);
   font-weight: 800;
   font-size: 12px;
   letter-spacing: .14em;
   text-transform: uppercase;
   padding: 6px 13px;
   border-radius: 99px;
   margin-bottom: 10px
}

.of-mid h2 {
   color: #fff;
   font-size: clamp(38px, 5vw, 60px)
}

.of-mid p {
   color: #fff;
   margin-top: 8px;
   font-size: 17px;
   max-width: 520px
}

.of-act {
   display: grid;
   gap: 10px;
   min-width: 210px
}

.of-act .btn {
   box-shadow: none
}

.of-act .btn.wh {
   color: var(--red)
}

.of-act .btn.gl {
   background: rgba(0, 0, 0, .2);
   border-color: rgba(255, 255, 255, .5)
}

.cg {
   display: grid;
   grid-template-columns: .85fr 1.15fr;
   gap: 36px;
   align-items: start
}

.ci {
   display: grid;
   gap: 12px
}

.ci a,
.ci>div:not(.soc) {
   position: relative;
   display: flex;
   gap: 16px;
   align-items: center;
   background: #fff;
   border: 1px solid var(--line);
   border-radius: 20px;
   padding: 15px 18px;
   text-decoration: none;
   color: var(--ink);
   transition: .3s
}

.ci a:hover {
   transform: translateX(8px);
   border-color: var(--red);
   box-shadow: 0 18px 30px -22px var(--red)
}

.ci .ic {
   width: 50px;
   height: 50px;
   border-radius: 16px;
   background: #fde8ea;
   color: var(--red);
   font-size: 20px;
   transition: .3s
}

.ci a:hover .ic {
   background: var(--red);
   color: #fff;
   transform: rotate(-8deg)
}

.ci .ic.wa {
   background: #dcfbe8;
   color: #17a24f
}

.ci a:hover .ic.wa {
   background: #25D366;
   color: #fff
}

.ci small {
   display: block;
   color: #000;
   opacity: .65;
   font-size: 14px
}

.ci b {
   font-size: 18px;
   word-break: break-word
}

.ci .go {
   margin-left: auto;
   color: var(--red);
   font-size: 18px;
   opacity: 0;
   transform: translate(-6px, 6px);
   transition: .3s
}

.ci a:hover .go {
   opacity: 1;
   transform: none
}

.cis {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 6px 4px
}

.cis span {
   font-weight: 700;
   color: var(--navy)
}

.cis a {
   width: 44px;
   height: 44px;
   border-radius: 50%;
   padding: 0;
   justify-content: center;
   font-size: 19px;
   background: #eef3fb;
   color: var(--navy);
   border: 0
}

.cis a:hover {
   transform: translateY(-4px) !important;
   box-shadow: none
}

.fm {
   position: relative;
   background: #fff;
   border: 1px solid var(--line);
   border-radius: 30px;
   overflow: hidden;
   box-shadow: 0 40px 70px -40px rgba(22, 48, 92, .55)
}

.fm-h {
   position: relative;
   padding: 30px 150px 26px 32px;
   color: #fff;
   background: radial-gradient(60% 120% at 100% 0, rgba(43, 183, 255, .5), transparent 60%), linear-gradient(120deg, var(--navy), #1f5ab0);
   overflow: hidden
}

.fm-h::after {
   content: "";
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0;
   height: 5px;
   background: repeating-linear-gradient(90deg, var(--red) 0 24px, var(--sky) 24px 48px);
   animation: pipeflow 3s linear infinite
}

.fm-h h3 {
   color: #fff;
   font-size: clamp(36px, 4.6vw, 48px)
}

.fm-h p {
   color: #d6e4ff;
   margin-top: 6px
}

.stk {
   position: absolute;
   right: 22px;
   top: 50%;
   margin-top: -52px;
   width: 104px;
   height: 104px;
   border-radius: 50%;
   background: var(--red);
   border: 3px dashed #fff;
   display: grid;
   place-content: center;
   text-align: center;
   font-family: 'Barlow Condensed', Barlow, sans-serif;
   box-shadow: 0 18px 30px -12px rgba(0, 0, 0, .5);
   animation: wob 3s ease-in-out infinite
}

.stk b {
   font-size: 40px;
   font-weight: 800;
   line-height: .9
}

.stk small {
   font-size: 17px;
   font-weight: 700;
   letter-spacing: .2em;
   padding-left: .2em
}

.fm-b {
   padding: 26px 32px 32px
}

.chips {
   border: 0;
   padding: 0;
   margin: 0 0 20px;
   display: none!important;
   flex-wrap: wrap;
   gap: 8px
}

.chips legend {
   font-weight: 700;
   font-size: 14px;
   letter-spacing: .06em;
   text-transform: uppercase;
   color: var(--navy);
   margin-bottom: 10px;
   padding: 0;
   float: left;
   width: 100%
}

.chips label {
   position: relative;
   display: block
}

.chips input {
   position: absolute;
   opacity: 0;
   pointer-events: none
}

.chips span {
   display: inline-flex;
   gap: 7px;
   align-items: center;
   padding: 10px 15px;
   border-radius: 99px;
   border: 1.5px solid var(--line);
   background: #fff;
   font-weight: 700;
   font-size: 14.5px;
   color: var(--navy);
   cursor: pointer;
   transition: .25s
}

.chips span:hover {
   border-color: var(--blue);
   transform: translateY(-2px)
}

.chips input:checked+span {
   background: var(--blue);
   border-color: var(--blue);
   color: #fff;
   box-shadow: 0 12px 22px -10px var(--blue)
}

.chips input:focus-visible+span {
   outline: 3px solid rgba(30, 107, 230, .4);
   outline-offset: 2px
}

.fr {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 14px
}

.fi {
   position: relative;
   display: block;
   margin-bottom: 14px
}

.fi>i {
   position: absolute;
   left: 16px;
   top: 50%;
   transform: translateY(-50%);
   color: var(--blue);
   font-size: 18px;
   pointer-events: none;
   transition: .3s
}

.fi input,
.fi textarea {
   display: block;
   width: 100%;
   padding: 23px 16px 8px 46px;
   border: 1.5px solid var(--line);
   border-radius: 16px;
   background: var(--bg);
   font: 500 16px Barlow, sans-serif;
   color: #000;
   transition: .25s
}

.fi textarea {
   min-height: 130px;
   resize: vertical
}

.fi.ta>i {
   top: 24px;
   transform: none
}

.fi span {
   position: absolute;
   left: 46px;
   top: 50%;
   transform: translateY(-50%);
   color: #000;
   opacity: .65;
   font-size: 15.5px;
   transition: .2s;
   pointer-events: none
}

.fi.ta span {
   top: 22px;
   transform: none
}

.fi input:focus+span,
.fi input:not(:placeholder-shown)+span,
.fi textarea:focus+span,
.fi textarea:not(:placeholder-shown)+span {
   top: 9px;
   transform: none;
   font-size: 11.5px;
   font-weight: 700;
   letter-spacing: .06em;
   text-transform: uppercase;
   color: var(--blue);
   opacity: 1
}

.fi input:focus,
.fi textarea:focus {
   outline: 0;
   border-color: var(--blue);
   background: #fff;
   box-shadow: 0 0 0 4px rgba(30, 107, 230, .12)
}

.fi:focus-within>i {
   color: var(--red);
   transform: translateY(-50%) scale(1.15)
}

.fi.ta:focus-within>i {
   transform: scale(1.15)
}

.claim {
   display: none!important;
   gap: 12px;
   align-items: center;
   padding: 14px 16px;
   border-radius: 18px;
   border: 1.5px dashed var(--red);
   background: #fff5f6;
   margin: 4px 0 18px;
   cursor: pointer;
   transition: .3s
}

.claim:hover {
   background: #ffeaec
}

.claim input {
   width: 22px;
   height: 22px;
   accent-color: var(--red);
   flex: none;
   margin: 0
}

.claim .cl-t {
   flex: 1
}

.claim b {
   display: block;
   color: var(--red);
   font-size: 17px
}

.claim small {
   display: block;
   color: #000;
   font-size: 13.5px
}

.claim>.bi {
   font-size: 26px;
   color: var(--red);
   animation: wob 3s ease-in-out infinite
}

.fm .btn {
   width: 100%;
   padding: 18px;
   font-size: 17px
}

.fm .btn .bi {
   transition: .4s
}

.fm .btn:hover .bi {
   transform: translate(5px, -5px) rotate(8deg)
}

.fm .ok {
   margin-top: 14px;
   color: #0f7a58;
   font-weight: 700;
   display: flex;
   gap: 8px;
   align-items: center
}

/* ---------- footer ---------- */
.ft {
   position: relative;
   overflow: hidden;
   isolation: isolate;
   background: #071126;
   color: #c7d3ea;
   font-size: 15px
}

.ft::before {
   content: "";
   position: absolute;
   inset: 0;
   z-index: -2;
   background: radial-gradient(60% 55% at 6% 0, rgba(30, 107, 230, .3), transparent 65%), radial-gradient(50% 55% at 100% 100%, rgba(209, 32, 43, .28), transparent 62%), linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0/44px 44px, linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0/44px 44px
}

.ft-pipe {
   height: 8px;
   background: repeating-linear-gradient(90deg, var(--red) 0 28px, var(--sky) 28px 56px, var(--blue) 56px 84px);
   animation: pipeflow 3s linear infinite
}

@keyframes pipeflow {
   to {
      background-position: 84px 0
   }
}

.ft-bg {
   position: absolute;
   inset: 0;
   z-index: -1;
   pointer-events: none;
   overflow: hidden
}

.ft-glow {
   position: absolute;
   left: 0;
   top: 0;
   width: 560px;
   height: 560px;
   margin: -280px 0 0 -280px;
   border-radius: 50%;
   background: radial-gradient(circle, rgba(43, 183, 255, .2), transparent 65%);
   transform: translate(var(--mx, 30%), var(--my, 30%));
   transition: transform .3s ease-out
}

.ft-ic {
   position: absolute;
   font-size: clamp(80px, 11vw, 150px);
   color: rgba(255, 255, 255, .05);
   animation: float 10s ease-in-out infinite
}

.ft-ic.i1 {
   left: 4%;
   top: 34%
}

.ft-ic.i2 {
   left: 30%;
   top: 6%;
   animation-delay: -2s
}

.ft-ic.i3 {
   right: 6%;
   top: 30%;
   animation-delay: -4s
}

.ft-ic.i4 {
   right: 28%;
   bottom: 16%;
   animation-delay: -6s
}

.ft-ic.i5 {
   left: 52%;
   top: 40%;
   animation-delay: -8s
}

.ft-word {
   position: absolute;
   left: 50%;
   bottom: -.2em;
   transform: translateX(-50%);
   font: 800 clamp(90px, 19vw, 280px)/1 'Barlow Condensed', Barlow, sans-serif;
   letter-spacing: .02em;
   white-space: nowrap;
   color: transparent;
   -webkit-text-stroke: 1.5px rgba(255, 255, 255, .08)
}

.ftq {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 24px;
   flex-wrap: wrap;
   padding-top: 42px;
   padding-bottom: 34px;
   border-bottom: 1px solid rgba(255, 255, 255, .1)
}

.ftq h3 {
   color: #fff;
   font-size: clamp(34px, 4.4vw, 50px)
}

.ftq p {
   color: #b5c4e0;
   margin-top: 4px
}

.ft .g {
   display: grid;
   grid-template-columns: 1.1fr .8fr 1.1fr 1.3fr;
   gap: 36px;
   padding-top: 44px;
   padding-bottom: 18px
}

.ft .g>* {
   min-width: 0
}

.ft h4 {
   position: relative;
   font: 700 27px 'Barlow Condensed', Barlow, sans-serif;
   letter-spacing: .05em;
   text-transform: uppercase;
   color: #fff;
   margin: 0 0 20px;
   padding-bottom: 12px
}

.ft h4::after {
   content: "";
   position: absolute;
   left: 0;
   bottom: 0;
   width: 38px;
   height: 4px;
   border-radius: 4px;
   background: linear-gradient(90deg, var(--red), var(--sky));
   transition: width .4s
}

.ft .g>div:hover h4::after {
   width: 84px
}

.flg {
   display: inline-block;
   margin-bottom: 16px
}

.flogo {
   display: block;
   height: 76px;
   width: auto;
   max-width: 100%;
   transition: transform .4s
}

.flogo.plate {
   background: #fff;
   padding: 8px 14px;
   border-radius: 16px;
   height: 80px;
   box-shadow: 0 18px 30px -16px rgba(0, 0, 0, .6)
}

.flg:hover .flogo {
   transform: scale(1.04) rotate(-1.5deg)
}

.gs {
   display: none!important;
   gap: 8px;
   align-items: center;
   padding: 8px 14px;
   border-radius: 99px;
   background: rgba(255, 255, 255, .08);
   border: 1px solid rgba(255, 255, 255, .14);
   color: #fff;
   font-weight: 700;
   font-size: 14px
}

.gs .bi {
   color: #4FE0C4
}

.ft a {
   color: #c7d3ea;
   text-decoration: none
}

.ft .lk {
   display: flex;
   align-items: center;
   gap: 9px;
   padding: 7px 0;
   transition: .3s
}

.ft .lk::before {
   content: "";
   width: 0;
   height: 2px;
   background: var(--red);
   transition: .3s
}

.ft .lk .bi {
   color: var(--sky);
   font-size: 15px
}

.ft .lk:hover {
   color: #fff;
   transform: translateX(4px)
}

.ft .lk:hover::before {
   width: 14px
}

.fc {
   display: flex;
   gap: 12px;
   align-items: center;
   padding: 7px 0;
   line-height: 1.3;
   word-break: break-word;
   transition: .3s
}

.fc .ic {
   width: 38px;
   height: 38px;
   border-radius: 12px;
   background: rgba(255, 255, 255, .08);
   color: var(--sky);
   font-size: 16px;
   transition: .3s
}

.fc:hover {
   color: #fff
}

.fc:hover .ic {
   background: var(--red);
   color: #fff;
   transform: rotate(-8deg) scale(1.08)
}

.ft .soc a {
   width: 44px;
   height: 44px;
   font-size: 19px;
   background: rgba(255, 255, 255, .1);
   color: #fff
}

.ft .soc a.fb:hover {
   background: #1877F2;
   transform: translateY(-5px) rotate(-6deg)
}

.ft .soc a.ig:hover {
   background: linear-gradient(45deg, #f9ce34, #ee2a7b 55%, #6228d7);
   transform: translateY(-5px) rotate(6deg)
}

.cp {
   margin-top: 26px;
   border-top: 1px solid rgba(255, 255, 255, .1);
   padding: 18px 0;
   font-size: 14px;
   position: relative
}

.cp .w {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 8px 24px;
   flex-wrap: wrap
}

.cp .pw {
   margin-left: auto
}

.cp .pw a {
   color: var(--sky);
   font-weight: 700
}

.cta .ph-n {
   display: flex;
   flex-wrap: wrap;
   gap: 6px 22px;
   font-size: 20px;
   font-weight: 700
}

.cta .ph-n a {
   display: inline-flex;
   gap: 8px;
   align-items: center;
   color: #fff;
   text-decoration: none;
   white-space: nowrap
}

.cta .ph-n a:hover {
   text-decoration: underline
}

/* ---------- v4 responsive ---------- */
@media(max-width:960px) {
   .yq {
      padding: 70px 0
   }

   .yq-in {
      grid-template-columns: 1fr;
      gap: 36px
   }

   .yq-orbit {
      --cs: 46px
   }

   .yq-copy {
      text-align: center
   }

   .yq-copy>p {
      margin-left: auto;
      margin-right: auto
   }

   .yq-tl {
      grid-template-columns: 1fr 1fr;
      gap: 34px 18px;
      padding-top: 0;
      margin-top: 0
   }

   .yq-tl::before,
   .yq-tl::after {
      display: none
   }

   .yq-tl>div {
      padding: 0 0 0 54px
   }

   .mi {
      top: 0
   }

   .yrs {
      width: 140px;
      height: 140px;
      right: 8px;
      bottom: -34px
   }

   .yrs b {
      font-size: 42px
   }

   .yrs .yl {
      font-size: 12px
   }

   .yr-ring {
      font-size: 18px
   }

   .yrs-t text {
      font-size: 13.5px
   }

   .offer {
      grid-template-columns: 1fr;
      gap: 18px;
      padding: 30px 24px;
      text-align: center
   }

   .offer .of-pct {
      justify-content: center
   }

   .of-mid {
      border-left: 0;
      padding-left: 0;
      border-top: 2px dashed rgba(255, 255, 255, .55);
      padding-top: 20px
   }

   .of-mid p {
      margin-left: auto;
      margin-right: auto
   }

   .of-act {
      min-width: 0;
      grid-template-columns: 1fr 1fr
   }

   .cg {
      grid-template-columns: 1fr
   }

   .ft .g {
      grid-template-columns: 1fr 1fr
   }

   .ft .fa {
      grid-column: 1/-1
   }

   .ftq {
      text-align: center;
      justify-content: center
   }
}

@media(max-width:600px) {
   .yq-orbit {
      --cs: 40px
   }

   .yq-stats {
      gap: 8px
   }

   .ys {
      padding: 14px 6px 14px;
      border-radius: 18px
   }

   .ys-tag {
      font-size: 9px;
      padding: 4px 7px;
      letter-spacing: .08em;
      gap: 5px
   }

   .ysg {
      width: 70px;
      height: 70px;
      margin: 12px 0 6px
   }

   .ysg circle {
      stroke-width: 7
   }

   .ysi {
      inset: 10px;
      font-size: 20px
   }

   .ys .ysn {
      font-size: 30px
   }

   .ys h3 {
      font-size: 14px;
      line-height: 1.1
   }

   .ys small {
      display: none
   }

   .ys-st {
      font-size: 9px;
      gap: 1px;
      margin-top: 6px;
      min-height: 10px
   }

   .yq-tl {
      grid-template-columns: 1fr 1fr
   }

   .yq-tl b {
      font-size: 34px
   }

   .yq-tl h3 {
      font-size: 18px
   }

   .yq-tl small {
      font-size: 13.5px
   }

   .tcd {
      padding: 26px 22px 20px
   }

   .tcd q {
      font-size: 17px;
      min-height: 0
   }

   .tctl {
      margin-top: 54px;
      gap: 12px
   }

   .tctl>button {
      width: 46px;
      height: 46px
   }

   .tdots button.on {
      width: 38px
   }

   .offer {
      padding: 28px 18px;
      border-radius: 24px;
      margin-bottom: 28px
   }

   .of-act {
      grid-template-columns: 1fr
   }

   .fm {
      border-radius: 24px
   }

   .fm-h {
      padding: 26px 20px 24px
   }

   .fm-h p {
      padding-right: 90px
   }

   .stk {
      width: 78px;
      height: 78px;
      margin-top: -52px;
      right: 14px;
      top: 50%
   }

   .stk b {
      font-size: 30px
   }

   .stk small {
      font-size: 13px
   }

   .fm-b {
      padding: 20px 18px 24px
   }

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

   .chips span {
      padding: 9px 13px;
      font-size: 14px
   }

   .ft .g {
      grid-template-columns: 1fr;
      gap: 30px
   }

   .ftq .bts {
      width: 100%
   }

   .ftq .bts .btn {
      flex: 1
   }

   .cp .w {
      flex-direction: column;
      align-items: flex-start
   }

   .cp .pw {
      margin-left: 0
   }

   .cta .ph-n {
      font-size: 18px
   }
}

/* ===== Certification & Compliance tab extras (code badges, service plans) ===== */
.cd {
   flex: none;
   margin-left: auto;
   align-self: center;
   padding: 5px 10px;
   border-radius: 99px;
   background: #eef3fb;
   border: 1px solid #d3e0f5;
   color: var(--blue);
   font: 700 11px/1 Barlow, sans-serif;
   font-style: normal;
   letter-spacing: .6px;
   text-transform: uppercase;
   white-space: nowrap
}

.sgi .cd {
   background: #fff
}

.sg .sgi:last-child:nth-child(odd) {
   grid-column: 1/-1
}

.plans {
   display: flex;
   gap: 14px;
   align-items: flex-start;
   padding: 16px 18px;
   margin: 4px 0 20px;
   border-radius: 16px;
   background: linear-gradient(135deg, #eef5ff, #fff);
   border: 1px solid var(--line);
   border-left: 4px solid var(--red)
}

.plans-ic {
   flex: none;
   width: 40px;
   height: 40px;
   display: grid;
   place-items: center;
   border-radius: 12px;
   background: var(--red);
   color: #fff;
   font-size: 18px
}

.plans h4 {
   margin: 0 0 4px;
   font: 800 20px/1.2 "Barlow Condensed", Barlow, sans-serif;
   color: var(--navy)
}

.plans p {
   margin: 0;
   color: #000;
   font-size: 15px;
   line-height: 1.55
}

.lh {
   margin: 6px 0 12px;
   font: 800 20px/1.2 "Barlow Condensed", Barlow, sans-serif;
   color: var(--navy);
   letter-spacing: .3px
}

.lst .lh {
   margin-top: 16px;
   margin-bottom: 0
}

.vintro {
   margin: 16px 0 14px;
   color: #000;
   font-size: 15px;
   line-height: 1.6
}

@media (max-width:640px) {
   .sg .sgi {
      flex-wrap: wrap
   }

   .cd {
      margin-left: 0
   }

   .plans {
      padding: 14px
   }
}


/* ===== Contact form: creative "message sent" card ===== */
.fm.is-sent .fm-h,
.fm.is-sent .fm-b {
   display: none
}

.sending-ic {
   display: inline-block;
   animation: sentspin .9s linear infinite
}

@keyframes sentspin {
   to {
      transform: rotate(360deg)
   }
}

.sent {
   position: relative;
   padding: 38px 30px 30px;
   text-align: center;
   background: radial-gradient(70% 45% at 50% 0, #eaf3ff, transparent 70%), #fff;
   animation: sentin .6s cubic-bezier(.2, .8, .2, 1) both
}

@keyframes sentin {
   from {
      opacity: 0;
      transform: translateY(18px) scale(.98)
   }

   to {
      opacity: 1;
      transform: none
   }
}

.sent-art {
   position: relative;
   width: 140px;
   height: 140px;
   margin: 0 auto 14px
}

.sent-tick {
   position: absolute;
   inset: 10px;
   width: 120px;
   height: 120px;
   overflow: visible
}

.sent-tick .c {
   fill: #e9f8f1;
   stroke: #12A08A;
   stroke-width: 6;
   stroke-dasharray: 330;
   stroke-dashoffset: 330;
   transform: rotate(-90deg);
   transform-origin: 60px 60px;
   animation: sentdraw .8s .15s ease forwards
}

.sent-tick .t {
   fill: none;
   stroke: #12A08A;
   stroke-width: 9;
   stroke-linecap: round;
   stroke-linejoin: round;
   stroke-dasharray: 90;
   stroke-dashoffset: 90;
   animation: sentdraw .5s .85s ease forwards
}

@keyframes sentdraw {
   to {
      stroke-dashoffset: 0
   }
}

.sent-plane {
   position: absolute;
   left: -40px;
   top: 54px;
   width: 38px;
   height: 38px;
   display: grid;
   place-items: center;
   border-radius: 50%;
   background: var(--red);
   color: #fff;
   font-size: 17px;
   box-shadow: 0 10px 20px -8px var(--red);
   opacity: 0;
   animation: sentfly 1.1s .05s ease-in-out both
}

@keyframes sentfly {
   0% {
      opacity: 0;
      transform: translate(-30px, 40px) rotate(-30deg)
   }

   30% {
      opacity: 1
   }

   70% {
      opacity: 1;
      transform: translate(150px, -30px) rotate(10deg)
   }

   100% {
      opacity: 0;
      transform: translate(260px, -70px) rotate(20deg)
   }
}

.sent-conf {
   position: absolute;
   left: 50%;
   top: 50%;
   width: 0;
   height: 0
}

.sent-conf i {
   position: absolute;
   width: 8px;
   height: 14px;
   border-radius: 2px;
   background: var(--c);
   opacity: 0;
   animation: sentconf 1.2s var(--d) 1s cubic-bezier(.1, .7, .3, 1) forwards
}

@keyframes sentconf {
   0% {
      opacity: 1;
      transform: rotate(var(--a)) translateY(0)
   }

   100% {
      opacity: 0;
      transform: rotate(calc(var(--a) + 160deg)) translateY(calc(var(--r) * -1))
   }
}

.sent-h {
   margin: 6px 0 8px;
   font: 800 clamp(28px, 4vw, 36px)/1.1 "Barlow Condensed", Barlow, sans-serif;
   color: var(--navy)
}

.sent-p {
   max-width: 440px;
   margin: 0 auto 22px;
   color: #000;
   font-size: 16px;
   line-height: 1.6
}

.sent-steps {
   list-style: none;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 10px;
   margin: 0 0 18px;
   padding: 0;
   text-align: left
}

.sent-steps li {
   position: relative;
   display: grid;
   gap: 2px;
   padding: 14px 12px;
   border-radius: 16px;
   border: 1px solid var(--line);
   background: var(--bg);
   opacity: 0;
   animation: sentin .5s both
}

.sent-steps li:nth-child(1) {
   animation-delay: 1.1s
}

.sent-steps li:nth-child(2) {
   animation-delay: 1.3s
}

.sent-steps li:nth-child(3) {
   animation-delay: 1.5s
}

.sent-steps .bi {
   width: 30px;
   height: 30px;
   display: grid;
   place-items: center;
   margin-bottom: 6px;
   border-radius: 10px;
   background: #e3ebf7;
   color: var(--blue);
   font-size: 15px
}

.sent-steps .done .bi {
   background: #12A08A;
   color: #fff
}

.sent-steps .now {
   border-color: var(--blue);
   box-shadow: 0 0 0 4px rgba(30, 107, 230, .1)
}

.sent-steps .now .bi {
   background: var(--blue);
   color: #fff;
   animation: sentpulse 1.6s ease-in-out infinite
}

@keyframes sentpulse {

   0%,
   100% {
      transform: scale(1)
   }

   50% {
      transform: scale(1.14)
   }
}

.sent-steps b {
   font: 700 15px/1.25 Barlow, sans-serif;
   color: var(--navy)
}

.sent-steps small {
   color: #000;
   font-size: 13px;
   opacity: .75
}

.sent-offer {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   margin-bottom: 20px;
   padding: 10px 16px;
   border-radius: 99px;
   background: #fff3f4;
   border: 1px dashed var(--red);
   color: var(--red);
   font-weight: 600;
   font-size: 15px
}

.sent-act {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   justify-content: center
}

.sent-act .btn {
   width: auto;
   padding: 14px 22px;
   font-size: 16px
}

.sent-again {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   margin-top: 16px;
   padding: 8px 14px;
   border: 0;
   background: none;
   color: var(--blue);
   font: 600 15px Barlow, sans-serif;
   cursor: pointer
}

.sent-again:hover {
   text-decoration: underline
}

@media (max-width:640px) {
   .sent {
      padding: 30px 16px 24px
   }

   .sent-steps {
      grid-template-columns: 1fr
   }

   .sent-steps li {
      grid-template-columns: 30px 1fr;
      column-gap: 12px;
      align-items: center
   }

   .sent-steps .bi {
      grid-row: span 2;
      margin: 0
   }

   .sent-act .btn {
      width: 100%
   }
}

@media (prefers-reduced-motion:reduce) {

   .sent,
   .sent *,
   .sent-steps li {
      animation-duration: .01s !important;
      animation-delay: 0s !important
   }
}


/* ===== justified paragraphs (class added by main.js) + code badge under item name ===== */
.tj {
   text-align: justify;
   text-justify: inter-word;
   hyphens: auto;
   -webkit-hyphens: auto
}

.sgi .cd-b,
.sgi>span>.cd {
   display: inline-block;
   margin: 6px 0 0
}

.sent-p {
   text-align: center
}


/* ===== About page: Our Journey image ===== */
.jny-img {
   max-width: 980px;
   margin: 34px auto 0;
   border-radius: 26px;
   overflow: hidden;
   background: #fff;
   border: 1px solid var(--line);
   box-shadow: 0 30px 70px -40px rgba(22, 48, 92, .55)
}

.jny-img img {
   display: block;
   width: 100%;
   height: auto
}


/* About page: Our Journey image - mobile uses its own portrait image, shown in full (no scroll, no stretch) */
.jny-img picture {
   display: block
}

.jny-img img {
   object-fit: contain
}

@media (max-width:767px) {
   .jny-img {
      max-width: 520px;
      margin: 24px auto 0;
      border-radius: 18px
   }

   .jny-img img {
      width: 100%;
      height: auto
   }
}