@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Inter:wght@400;500;600;700;800&display=swap');

:root {

  --page: #f1f5fa;
  --panel: #ffffff;
  --ink: #0e2444;
  --ink-soft: #56687f;
  --orange: #1268b0;
  --orange-dark: #0d4f8a;
  --blue: #2b8fd6;
  --blue-card: #1f74c0;
  --sky: #ddebf7;
  --dark: #0b2c58;
  --dark-2: #081f40;
  --line: #dde5ee;
  --line-dark: rgba(255, 255, 255, .1);

  --grad: linear-gradient(120deg, #1268b0, #2b8fd6);
  --grad-soft: linear-gradient(120deg, #2b8fd6, #6db8e8);

  --navy: #0b2c58;
  --navy-2: #081f40;
  --blue-dark: #1f74c0;
  --teal: #1268b0;
  --teal-dark: #0d4f8a;
  --grey: #56687f;
  --grey-2: #93a1b3;
  --light: #e7edf3;
  --white: #ffffff;
  --danger: #1268b0;

  --radius: 18px;
  --radius-sm: 12px;
  --shadow-sm: 0 2px 12px rgba(14, 36, 68, .06);
  --shadow: 0 18px 44px rgba(14, 36, 68, .12);
  --shadow-lg: 0 32px 80px rgba(14, 36, 68, .18);
  --glow: 0 14px 34px rgba(18, 104, 176, .28);
  --edge-hi: inset 0 1px 0 rgba(255, 255, 255, .9);
  --shadow-3d: 0 20px 44px -26px rgba(14, 36, 68, .42), 0 8px 18px -14px rgba(14, 36, 68, .26);
  --shadow-3d-lg: 0 42px 84px -30px rgba(14, 36, 68, .55), 0 18px 40px -20px rgba(14, 36, 68, .38);
  --max: 1720px;
  --font: 'Inter', 'Segoe UI', Arial, sans-serif;
  --head: 'Plus Jakarta Sans', 'Inter', 'Segoe UI', Arial, sans-serif;
  --t: .3s cubic-bezier(.4, 0, .2, 1);
  --spring: .55s cubic-bezier(.22, 1.2, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; overflow-x: clip; }
body {
  font-family: var(--font);
  color: var(--ink);
  background:
    radial-gradient(1100px 520px at 85% -140px, rgba(43, 143, 214, .10), transparent 65%),
    radial-gradient(900px 480px at -10% 240px, rgba(18, 104, 176, .07), transparent 60%),
    var(--page);
  background-repeat: no-repeat;
  line-height: 1.65;
  font-size: 16.5px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-x: clip;
}
h1, h2, h3, h4, h5 { font-family: var(--head); font-weight: 700; line-height: 1.12; color: var(--ink); letter-spacing: -.022em; }
a { color: var(--orange); text-decoration: none; transition: color var(--t); }
img { max-width: 100%; display: block; }
::selection { background: rgba(43, 143, 214, .28); }
:focus-visible { outline: 3px solid rgba(43, 143, 214, .55); outline-offset: 2px; border-radius: 6px; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 clamp(18px, 3.5vw, 56px); }

.scrollbar-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 100%;
  transform-origin: 0 50%; transform: scaleX(0);
  background: var(--grad); z-index: 200; pointer-events: none;
  box-shadow: 0 1px 8px rgba(18, 104, 176, .5);
}

.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--head); font-weight: 700; font-size: 14.5px; letter-spacing: .01em;
  padding: 15px 28px; border-radius: 12px; cursor: pointer;
  border: 2px solid transparent; transition: transform var(--spring), box-shadow var(--t), background var(--t), color var(--t), border-color var(--t);
  white-space: nowrap; position: relative; overflow: hidden;
}
.btn::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -80%; width: 45%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .35), transparent);
  transform: skewX(-20deg); transition: left .65s var(--ease-out); pointer-events: none;
}
.btn:hover::after { left: 130%; }
.btn-primary { background: var(--grad); color: #fff; box-shadow: 0 6px 18px rgba(18, 104, 176, .25); }
.btn-primary:hover { transform: translateY(-3px); box-shadow: var(--glow); color: #fff; }
.btn-primary:active { transform: translateY(-1px) scale(.98); }
.btn-ghost { background: transparent; color: var(--ink); border-color: rgba(14, 36, 68, .22); }
.btn-ghost:hover { background: var(--ink); color: #fff; border-color: var(--ink); transform: translateY(-3px); }
.btn-outline { background: var(--panel); color: var(--ink); border-color: var(--line); }
.btn-outline:hover { border-color: var(--orange); color: var(--orange); transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.on-dark .btn-ghost, .btn-ghost.light { color: #fff; border-color: rgba(255, 255, 255, .4); }
.on-dark .btn-ghost:hover, .btn-ghost.light:hover { background: #fff; color: var(--ink); border-color: #fff; }

.topbar { color: var(--ink-soft); font-size: 13px; }
.topbar .wrap { display: flex; justify-content: space-between; align-items: center; height: 42px; gap: 20px; }
.topbar a { color: var(--ink-soft); }
.topbar a:hover { color: var(--orange); }
.topbar .tb-left { display: flex; gap: 22px; align-items: center; }
.topbar .tb-left span { display: inline-flex; align-items: center; gap: 7px; }
.topbar .tb-social { display: flex; gap: 6px; align-items: center; }
.topbar .tb-social a {
  width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center;
  transition: background var(--t), color var(--t), transform var(--spring);
}
.topbar .tb-social a:hover { background: var(--orange); color: #fff; transform: translateY(-2px); }
.topbar svg { width: 14px; height: 14px; fill: currentColor; flex: none; }

header.site { position: sticky; top: 0; z-index: 100; padding: 12px 0; }
header.site .nav {
  display: flex; align-items: center; justify-content: space-between;
  height: 70px; padding: 0 12px 0 22px;
  background: rgba(255, 255, 255, .68);
  backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, .65); border-radius: 18px;
  box-shadow: var(--shadow-sm);
  transition: background var(--t), border-color var(--t), box-shadow var(--t), height var(--t);
}
header.site.scrolled .nav {
  height: 62px;
  background: rgba(10, 34, 66, .88);
  backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-color: rgba(255, 255, 255, .08); box-shadow: 0 18px 44px rgba(8, 24, 48, .35);
}
.brand { display: flex; align-items: center; gap: 11px; }
.brand .logo { width: 42px; height: 42px; flex: none; }
.brand .mark { width: 48px; height: 48px; object-fit: contain; flex: none; transition: transform var(--spring); }
.brand:hover .mark { transform: rotate(-6deg) scale(1.06); }
.brand .mark-w { display: none; }
header.site.scrolled .brand .mark-c { display: none; }
header.site.scrolled .brand .mark-w { display: block; }
.brand .bt { font-family: var(--head); font-weight: 800; font-size: 20px; letter-spacing: -.02em; color: var(--ink); line-height: 1; transition: color var(--t); }
.brand .bt b { color: var(--blue); font-weight: 800; }
.brand .bs { font-size: 9.5px; letter-spacing: 2.2px; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; transition: color var(--t); }
header.site.scrolled .brand .bt { color: #fff; }
header.site.scrolled .brand .bs { color: rgba(255, 255, 255, .6); }

.menu { display: flex; align-items: center; gap: 2px; list-style: none; }
.menu > li { position: relative; }
.menu > li > a {
  display: block; padding: 9px 15px; font-family: var(--head); font-weight: 700;
  font-size: 13px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft);
  border-radius: 9px; position: relative; transition: color var(--t);
}
.menu > li > a::before {
  content: ''; position: absolute; left: 15px; right: 15px; bottom: 3px; height: 2px;
  background: var(--grad); border-radius: 2px;
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .35s var(--ease-out);
}
.menu > li > a:hover::before, .menu > li.active > a::before { transform: scaleX(1); }
.menu > li > a:hover, .menu > li.active > a { color: var(--orange); }
header.site.scrolled .menu > li > a { color: rgba(255, 255, 255, .78); }
header.site.scrolled .menu > li > a:hover, header.site.scrolled .menu > li.active > a { color: #fff; }
.menu .has > a::after { content: '▾'; margin-left: 5px; font-size: 10px; opacity: .6; display: inline-block; transition: transform var(--t); }
.menu .has:hover > a::after { transform: translateY(2px); }
.dropdown {
  position: absolute; top: calc(100% + 14px); left: 0; min-width: 232px; background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, .7); border-radius: 14px; box-shadow: var(--shadow-lg);
  padding: 8px; list-style: none; opacity: 0; visibility: hidden;
  transform: translateY(12px) scale(.97); transform-origin: 20px 0;
  transition: opacity .28s var(--ease-out), transform .38s var(--spring), visibility 0s .28s;
}
.menu .has:hover .dropdown { opacity: 1; visibility: visible; transform: translateY(0) scale(1); transition-delay: 0s; }
.dropdown a { display: block; padding: 11px 14px; border-radius: 9px; font-size: 14px; color: var(--ink); font-weight: 500; transition: background var(--t), color var(--t), padding-left var(--t); }
.dropdown a:hover { background: var(--sky); color: var(--orange); padding-left: 19px; }
.nav-cta { display: flex; align-items: center; gap: 12px; }
.nav-cta .btn { padding: 12px 24px; }
.burger { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 8px; }
.burger span { width: 24px; height: 2.5px; background: var(--ink); border-radius: 3px; transition: all var(--t); }
header.site.scrolled .burger span { background: #fff; }

.hero { padding: 6px 0 0; }
.hero-panel {
  background: linear-gradient(135deg, #e3f0fb 0%, var(--sky) 55%, #cfe4f6 100%);
  border-radius: 28px; overflow: hidden; position: relative;
  display: grid; grid-template-columns: 1.02fr .98fr; align-items: stretch; min-height: 580px;
  box-shadow: var(--shadow-sm);
}
.hero-panel::before, .hero-panel::after {
  content: ''; position: absolute; border-radius: 50%; pointer-events: none; filter: blur(6px);
}
.hero-panel::before {
  width: 480px; height: 480px; left: -140px; top: -180px;
  background: radial-gradient(circle, rgba(43, 143, 214, .22), transparent 68%);
  animation: blob-drift 14s ease-in-out infinite alternate;
}
.hero-panel::after {
  width: 380px; height: 380px; left: 34%; bottom: -200px;
  background: radial-gradient(circle, rgba(18, 104, 176, .16), transparent 68%);
  animation: blob-drift 18s ease-in-out infinite alternate-reverse;
}
@keyframes blob-drift {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(60px, 40px) scale(1.15); }
}
.hero-copy { padding: 66px 58px; display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 2; }
.hero .eyebrow {
  display: inline-flex; align-items: center; gap: 10px; align-self: flex-start;
  font-weight: 700; font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--orange); margin-bottom: 20px;
  background: rgba(255, 255, 255, .65); border: 1px solid rgba(18, 104, 176, .16);
  padding: 8px 16px; border-radius: 100px; box-shadow: var(--shadow-sm);
}
.hero .eyebrow::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--grad);
  animation: pulse-dot 2.2s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(18, 104, 176, .45); }
  55% { box-shadow: 0 0 0 7px rgba(18, 104, 176, 0); }
}
.hero h1 { font-size: clamp(2.5rem, 4.9vw, 4.15rem); font-weight: 800; letter-spacing: -.035em; }
.hero h1 .g {
  display: block;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero p.lead { font-size: 17.5px; color: var(--ink-soft); margin: 22px 0 32px; max-width: 500px; }
.hero .cta-row { display: flex; gap: 12px; flex-wrap: wrap; }

.hero-copy > * { animation: rise-in .9s var(--ease-out) backwards; }
.hero-copy > *:nth-child(1) { animation-delay: .05s; }
.hero-copy > *:nth-child(2) { animation-delay: .16s; }
.hero-copy > *:nth-child(3) { animation-delay: .28s; }
.hero-copy > *:nth-child(4) { animation-delay: .4s; }
@keyframes rise-in {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: none; }
}
.hero-media { position: relative; background: linear-gradient(160deg, #cfe6ff, #a9cdf5); overflow: hidden; animation: media-in 1.1s var(--ease-out) backwards .15s; }
@keyframes media-in {
  from { opacity: 0; clip-path: inset(0 0 0 12%); }
  to { opacity: 1; clip-path: inset(0 0 0 0); }
}
.hero-media img { width: 100%; height: 100%; object-fit: cover; animation: slow-zoom 16s ease-out both; will-change: transform; }
.hero-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
@keyframes slow-zoom { from { transform: scale(1.12); } to { transform: scale(1); } }
.hero-media .scan { position: absolute; inset: 0; display: grid; place-items: center; }
.hero-media svg { width: 78%; height: auto; filter: drop-shadow(0 20px 40px rgba(20, 40, 70, .25)); }

.catrow { padding: 16px 0 0; }
.catrow .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.cat {
  border-radius: 18px; padding: 28px 26px; min-height: 232px; color: #fff;
  display: flex; flex-direction: column; justify-content: space-between;
  transition: transform var(--spring), box-shadow var(--t); position: relative; overflow: hidden;
  animation: rise-in .9s var(--ease-out) backwards;
}
.catrow .cat:nth-child(1) { animation-delay: .35s; }
.catrow .cat:nth-child(2) { animation-delay: .45s; }
.catrow .cat:nth-child(3) { animation-delay: .55s; }
.catrow .cat:nth-child(4) { animation-delay: .65s; }
.cat:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.cat h3 { color: inherit; font-size: 21px; font-weight: 700; max-width: 12ch; }
.cat p { font-size: 13.5px; opacity: .85; margin-top: 8px; }
.cat .foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 20px; }
.cat .foot .lbl { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.cat .foot .arw {
  width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, .22);
  display: grid; place-items: center; transition: background var(--t), transform var(--spring);
}
.cat:hover .foot .arw { background: #fff; transform: translateX(5px); }
.cat .foot .arw svg { width: 18px; height: 18px; fill: #fff; transition: fill var(--t), transform var(--spring); }
.cat:hover .foot .arw svg { fill: var(--orange); transform: translateX(1px); }
.cat-blue { background: var(--blue-card); }
.cat-grey { background: #2a4e78; }
.cat-dark { background: var(--dark); }
.cat-orange { background: #2f8fd4; }

.cat .cat-bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;
  transition: transform 1.1s var(--ease-out);
}
.cat:hover .cat-bg { transform: scale(1.08); }
.cat::before { content: ''; position: absolute; inset: 0; z-index: 1; transition: opacity var(--t); }
.cat > * { position: relative; z-index: 2; }
.cat .foot .arw { background: rgba(255, 255, 255, .25); }
.cat-blue::before { background: linear-gradient(180deg, rgba(23, 96, 168, .4), rgba(9, 42, 84, .9)); }
.cat-grey::before { background: linear-gradient(180deg, rgba(45, 78, 120, .4), rgba(13, 42, 82, .92)); }
.cat-dark::before { background: linear-gradient(180deg, rgba(12, 47, 94, .5), rgba(5, 22, 48, .93)); }
.cat-orange::before { background: linear-gradient(180deg, rgba(28, 120, 180, .4), rgba(11, 58, 108, .9)); }

.frame { width: 100%; border-radius: 20px; object-fit: cover; box-shadow: var(--shadow); display: block; }
.card-img { width: 100%; height: 168px; object-fit: cover; border-radius: 12px; margin-bottom: 16px; display: block; transition: transform .8s var(--ease-out); }
.card:hover .card-img { transform: scale(1.03); }
.card-img.contain { object-fit: contain; background: linear-gradient(180deg, #f3f7fc, #e9f0f8); padding: 12px; border: 1px solid var(--line); }
.imgband { width: 100%; height: 320px; object-fit: cover; border-radius: 22px; box-shadow: var(--shadow); display: block; }

.sec { padding: 80px 0; }
.sec.tight { padding: 54px 0; }
.panel { background: var(--panel); border-radius: 24px; }
.sec.dark { color: #fff; }
.sec.dark h2, .sec.dark h3, .sec.dark h4 { color: #fff; }
.darkpanel {
  background:
    radial-gradient(640px 320px at 88% -60px, rgba(43, 143, 214, .22), transparent 66%),
    radial-gradient(520px 300px at -5% 110%, rgba(18, 104, 176, .18), transparent 62%),
    linear-gradient(160deg, var(--dark), var(--dark-2));
  border-radius: 24px; color: #fff; overflow: hidden; position: relative;
}
.sec-head { text-align: center; max-width: 760px; margin: 0 auto 52px; }
.sec-head.left { text-align: left; margin-left: 0; }
.kicker {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--orange); font-family: var(--head); font-weight: 800; font-size: 12px;
  letter-spacing: .18em; text-transform: uppercase; margin-bottom: 16px;
}
.kicker::before, .sec-head:not(.left) .kicker::after {
  content: ''; width: 26px; height: 2px; border-radius: 2px; background: var(--grad); opacity: .7;
}
.sec-head h2 { font-size: clamp(1.95rem, 3.4vw, 2.8rem); font-weight: 800; letter-spacing: -.03em; }
.sec-head h2 .o, .sec-head h2 .b {
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sec-head p { color: var(--ink-soft); font-size: 16.5px; margin-top: 14px; }
.sec.dark .sec-head p { color: rgba(255, 255, 255, .7); }

.intro { max-width: 980px; margin: 0 auto; text-align: center; font-family: var(--head); font-size: clamp(1.4rem, 2.6vw, 2.05rem); font-weight: 700; line-height: 1.42; letter-spacing: -.02em; color: var(--ink); }
.intro .b { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.cards.two { grid-template-columns: repeat(2, 1fr); }
.cards.four { grid-template-columns: repeat(4, 1fr); }
.card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 18px;
  padding: 32px 28px; transition: transform var(--spring), box-shadow var(--t), border-color var(--t);
  position: relative; overflow: hidden;
}
.card::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--grad); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .5s var(--ease-out);
}
.card:hover::before { transform: scaleX(1); }
.card:hover { transform: translateY(-7px); box-shadow: var(--shadow); border-color: transparent; }
.card .ic {
  width: 54px; height: 54px; border-radius: 14px; background: var(--sky);
  display: grid; place-items: center; margin-bottom: 18px;
  transition: background var(--t), transform var(--spring), box-shadow var(--t);
}
.card:hover .ic { background: var(--grad); transform: translateY(-3px) rotate(-4deg) scale(1.06); box-shadow: var(--glow); }
.card .ic svg { width: 26px; height: 26px; fill: var(--blue); transition: fill var(--t); }
.card:hover .ic svg { fill: #fff; }
.card h3 { font-size: 18.5px; margin-bottom: 8px; }
.card p { color: var(--ink-soft); font-size: 14.5px; }
.card ul { list-style: none; margin-top: 14px; }
.card ul li { position: relative; padding-left: 24px; color: var(--ink-soft); font-size: 14px; margin-bottom: 7px; }
.card ul li::before { content: ''; position: absolute; left: 0; top: 8px; width: 13px; height: 7px; border-left: 2.5px solid var(--orange); border-bottom: 2.5px solid var(--orange); transform: rotate(-45deg); }

.accent-card {
  border-radius: 18px; padding: 32px 28px; color: #fff; position: relative; overflow: hidden;
  min-height: 190px; display: flex; flex-direction: column; justify-content: flex-end;
  transition: transform var(--spring), box-shadow var(--t);
}
.accent-card:hover { transform: translateY(-7px); box-shadow: var(--shadow-lg); }
.accent-card h3 { color: #fff; font-size: 20px; }
.accent-card p { color: rgba(255, 255, 255, .82); font-size: 14px; margin-top: 6px; }
.accent-card.dark { background: linear-gradient(155deg, var(--dark), var(--dark-2)); }
.accent-card.blue { background: linear-gradient(155deg, #2586cf, var(--blue-card)); }
.accent-card::after {
  content: ''; position: absolute; right: -70px; top: -70px; width: 200px; height: 200px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .14), transparent 70%);
  transition: transform var(--spring);
}
.accent-card:hover::after { transform: scale(1.35); }
.accent-card .glyph { position: absolute; top: 8px; right: 20px; font-size: 120px; font-weight: 800; line-height: 1; opacity: .16; transition: transform var(--spring), opacity var(--t); }
.accent-card:hover .glyph { transform: rotate(8deg) scale(1.08); opacity: .24; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 54px; align-items: center; }
.list-check { list-style: none; margin-top: 20px; }
.list-check li { position: relative; padding-left: 34px; margin-bottom: 14px; color: var(--ink); font-size: 15px; }
.list-check li::before {
  content: ''; position: absolute; left: 0; top: 2px; width: 21px; height: 21px; border-radius: 7px;
  background: var(--grad); box-shadow: 0 4px 10px rgba(18, 104, 176, .3);
}
.list-check li::after { content: ''; position: absolute; left: 7px; top: 6px; width: 7px; height: 11px; border-right: 2.5px solid #fff; border-bottom: 2.5px solid #fff; transform: rotate(40deg); }

.statband .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
.statband .grid > div { position: relative; }
.statband .grid > div:not(:first-child)::before {
  content: ''; position: absolute; left: -12px; top: 12%; bottom: 12%; width: 1px;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .18), transparent);
}
.statband .n {
  font-family: var(--head); font-weight: 800; font-size: clamp(2.1rem, 4vw, 3.1rem); letter-spacing: -.02em;
  background: linear-gradient(120deg, #6db8e8, #2b8fd6); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.statband .l { color: rgba(255, 255, 255, .7); font-size: 14px; margin-top: 4px; }

.partner-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid var(--line-dark); border-radius: 18px; overflow: hidden; }
.plogo {
  padding: 34px 20px; text-align: center; border-right: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark);
  transition: background var(--t); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
}
.plogo:hover { background: rgba(255, 255, 255, .04); }
.plogo .badge { width: 50px; height: 50px; border-radius: 12px; background: rgba(255, 255, 255, .08); display: grid; place-items: center; font-family: var(--head); font-weight: 800; color: #fff; font-size: 16px; }
.plogo .nm { font-weight: 600; font-size: 14.5px; color: #fff; }
.plogo .ty { font-size: 11px; color: rgba(255, 255, 255, .5); text-transform: uppercase; letter-spacing: .1em; }

.plogo.brand { background: #fff; }
.plogo.brand:hover { background: #f4f8fc; }
.plogo.brand img { max-height: 46px; max-width: 82%; width: auto; object-fit: contain; transition: transform var(--spring); }
.plogo.brand:hover img { transform: scale(1.09); }
.plogo.brand .txt { font-family: var(--head); font-weight: 800; font-size: 16px; color: var(--ink); }
.plogo.brand .txt b { color: var(--blue); }
.plogo.brand .ty { color: var(--ink-soft); }

.logo-marquee {
  position: relative; overflow: hidden; padding: 18px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.lm-track {
  display: flex; width: max-content;
  animation: lm-scroll 42s linear infinite;
  will-change: transform;
}
.lm-track.rev { animation-direction: reverse; }
.logo-marquee:hover .lm-track { animation-play-state: paused; }
@keyframes lm-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.lm-item {
  flex: 0 0 auto; width: 210px; height: 130px; margin-right: 16px;
  background: #fff; border-radius: 14px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 22px; transition: transform var(--spring), box-shadow var(--t);
  box-shadow: var(--edge-hi), 0 16px 32px -20px rgba(14, 36, 68, .45);
}
.lm-item:hover { transform: translateY(-5px); box-shadow: var(--edge-hi), var(--shadow-3d-lg); }
.lm-item img { max-height: 56px; max-width: 82%; width: auto; object-fit: contain; }
.lm-item .ty { font-size: 11px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .1em; }
@media (max-width: 620px) {
  .lm-item { width: 158px; height: 112px; margin-right: 12px; padding: 16px; }
  .lm-item img { max-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .lm-track { animation: none !important; transform: none !important; }
  .logo-marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
}

.logos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.logo-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 28px 18px; text-align: center;
  transition: transform var(--spring), box-shadow var(--t), border-color var(--t);
}
.logo-card:hover { box-shadow: var(--shadow); transform: translateY(-6px); border-color: transparent; }
.logo-card .badge { width: 52px; height: 52px; margin: 0 auto 12px; border-radius: 14px; background: var(--sky); display: grid; place-items: center; font-family: var(--head); font-weight: 800; color: var(--blue); font-size: 16px; transition: background var(--t), color var(--t), transform var(--spring); }
.logo-card:hover .badge { background: var(--grad); color: #fff; transform: rotate(-5deg) scale(1.07); }
.logo-card .nm { font-weight: 600; font-size: 15px; color: var(--ink); }
.logo-card .ty { font-size: 11.5px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .1em; margin-top: 3px; }

.brandstrip { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.brandstrip .b {
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 13px 26px;
  font-family: var(--head); font-weight: 700; color: var(--ink); font-size: 15px;
  transition: transform var(--spring), box-shadow var(--t), border-color var(--t);
}
.brandstrip .b:hover { transform: translateY(-4px); box-shadow: var(--shadow-sm); border-color: rgba(18, 104, 176, .3); }
.brandstrip .b span { color: var(--orange); }

.featurebar .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.fb {
  display: flex; gap: 14px; align-items: flex-start; background: var(--panel); border: 1px solid var(--line);
  border-radius: 16px; padding: 26px 24px; transition: transform var(--spring), box-shadow var(--t), border-color var(--t);
}
.fb:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: transparent; }
.fb .ic { width: 46px; height: 46px; border-radius: 12px; background: var(--sky); display: grid; place-items: center; flex: none; transition: background var(--t), transform var(--spring); }
.fb:hover .ic { background: var(--grad); transform: rotate(-5deg) scale(1.07); }
.fb .ic svg { width: 22px; height: 22px; fill: var(--blue); transition: fill var(--t); }
.fb:hover .ic svg { fill: #fff; }
.fb h4 { font-size: 15.5px; }
.fb p { font-size: 13px; color: var(--ink-soft); margin-top: 2px; line-height: 1.5; }

.ctaband {
  background:
    radial-gradient(560px 320px at 90% -40px, rgba(43, 143, 214, .3), transparent 66%),
    radial-gradient(460px 280px at 2% 120%, rgba(18, 104, 176, .24), transparent 62%),
    linear-gradient(160deg, var(--dark), var(--dark-2));
  color: #fff; border-radius: 24px; padding: 64px 56px; text-align: center; position: relative; overflow: hidden;
}
.ctaband::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1.5px);
  background-size: 26px 26px; opacity: .5; pointer-events: none;
  mask-image: radial-gradient(closest-side at 50% 50%, #000, transparent);
  -webkit-mask-image: radial-gradient(closest-side at 50% 50%, #000, transparent);
}
.ctaband::after {
  content: ''; position: absolute; right: -60px; top: -60px; width: 280px; height: 280px; border-radius: 50%;
  background: radial-gradient(circle, rgba(43, 143, 214, .4), transparent 70%);
  animation: blob-drift 12s ease-in-out infinite alternate;
}
.ctaband h2 { color: #fff; font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 800; position: relative; z-index: 1; }
.ctaband p { color: rgba(255, 255, 255, .78); font-size: 16.5px; margin: 14px auto 28px; max-width: 620px; position: relative; z-index: 1; }
.ctaband .cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; position: relative; z-index: 1; }

.pagehero { padding: 8px 0 0; }
.pagehero .inner {
  background:
    radial-gradient(620px 340px at 92% 110%, rgba(43, 143, 214, .28), transparent 66%),
    radial-gradient(480px 280px at 4% -30%, rgba(18, 104, 176, .22), transparent 62%),
    linear-gradient(160deg, var(--dark), var(--dark-2));
  border-radius: 28px; padding: 64px 58px; color: #fff; position: relative; overflow: hidden;
}
.pagehero .inner::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1.5px);
  background-size: 26px 26px; opacity: .6; pointer-events: none;
  mask-image: linear-gradient(100deg, transparent 30%, #000);
  -webkit-mask-image: linear-gradient(100deg, transparent 30%, #000);
}
.pagehero .inner::after {
  content: ''; position: absolute; right: -40px; bottom: -80px; width: 340px; height: 340px; border-radius: 50%;
  background: radial-gradient(circle, rgba(43, 143, 214, .32), transparent 70%);
  animation: blob-drift 13s ease-in-out infinite alternate;
}
.pagehero .inner > * { position: relative; z-index: 1; animation: rise-in .85s var(--ease-out) backwards; }
.pagehero .inner > *:nth-child(1) { animation-delay: .05s; }
.pagehero .inner > *:nth-child(2) { animation-delay: .15s; }
.pagehero .inner > *:nth-child(3) { animation-delay: .26s; }
.pagehero h1 { font-size: clamp(2rem, 4vw, 3.2rem); color: #fff; font-weight: 800; letter-spacing: -.032em; }
.pagehero h1 .g { background: var(--grad-soft); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pagehero p { color: rgba(255, 255, 255, .72); font-size: 17px; margin-top: 14px; max-width: 640px; }
.crumbs { font-size: 13px; color: rgba(255, 255, 255, .55); margin-bottom: 16px; }
.crumbs a { color: rgba(255, 255, 255, .55); }
.crumbs a:hover { color: #fff; }
.crumbs span { color: var(--blue); }

.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 40px; align-items: start; }
.info-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 24px;
  display: flex; gap: 15px; align-items: flex-start; margin-bottom: 14px;
  transition: transform var(--spring), box-shadow var(--t), border-color var(--t);
}
.info-card:hover { box-shadow: var(--shadow); border-color: transparent; transform: translateY(-4px); }
.info-card .ic { width: 48px; height: 48px; border-radius: 13px; background: var(--grad); display: grid; place-items: center; flex: none; box-shadow: 0 6px 16px rgba(18, 104, 176, .28); transition: transform var(--spring); }
.info-card:hover .ic { transform: rotate(-5deg) scale(1.07); }
.info-card .ic svg { width: 23px; height: 23px; fill: #fff; }
.info-card h4 { font-size: 16px; margin-bottom: 4px; }
.info-card p, .info-card a { color: var(--ink-soft); font-size: 14.5px; }
.info-card a:hover { color: var(--orange); }
.form { background: var(--panel); border: 1px solid var(--line); border-radius: 20px; padding: 36px; box-shadow: var(--shadow-sm); }
.form h3 { margin-bottom: 6px; font-size: 22px; }
.form .fp { color: var(--ink-soft); font-size: 14.5px; margin-bottom: 22px; }
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 7px; }
.field input, .field textarea, .field select {
  width: 100%; padding: 14px 16px; border: 1.5px solid transparent; border-radius: 11px;
  font-family: var(--font); font-size: 15px; color: var(--ink); background: #eef1f6; transition: all var(--t);
}
.field input::placeholder, .field textarea::placeholder { color: #9aa5b3; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--orange); background: #fff; box-shadow: 0 0 0 4px rgba(18, 104, 176, .12); }
.field textarea { resize: vertical; min-height: 130px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-note { font-size: 13px; color: var(--ink-soft); margin-top: 12px; }
.map-embed { border-radius: 20px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-sm); height: 320px; }
.map-embed iframe { width: 100%; height: 100%; border: 0; }

.serve-list { list-style: none; }
.serve-list li { position: relative; padding-left: 22px; color: rgba(255, 255, 255, .82); font-size: 15px; margin-bottom: 10px; }
.serve-list li::before { content: ''; position: absolute; left: 0; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--grad); }

.dl-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.dl-item {
  display: flex; align-items: center; gap: 16px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 16px; padding: 20px 22px;
  transition: transform var(--spring), box-shadow var(--t), border-color var(--t);
}
.dl-item:hover { box-shadow: var(--shadow); transform: translateY(-4px); border-color: transparent; }
.dl-item .ficon { width: 46px; height: 46px; border-radius: 12px; background: var(--sky); display: grid; place-items: center; flex: none; transition: background var(--t), transform var(--spring); }
.dl-item:hover .ficon { background: var(--grad); transform: rotate(-5deg) scale(1.06); }
.dl-item .ficon svg { width: 23px; height: 23px; fill: var(--orange); transition: fill var(--t); }
.dl-item:hover .ficon svg { fill: #fff; }
.dl-item h4 { font-size: 15.5px; }
.dl-item p { font-size: 12.5px; color: var(--ink-soft); }
.dl-item .go { margin-left: auto; color: var(--orange); font-weight: 700; font-size: 22px; transition: transform var(--spring); }
.dl-item:hover .go { transform: translateX(5px); }

footer.site {
  background:
    radial-gradient(720px 380px at 90% -80px, rgba(43, 143, 214, .16), transparent 66%),
    linear-gradient(170deg, var(--dark), var(--dark-2));
  color: rgba(255, 255, 255, .66); padding: 68px 0 0; margin-top: 24px; border-radius: 28px 28px 0 0;
}
footer.site .fgrid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: 40px; padding-bottom: 46px; }
footer.site h5 { color: #fff; font-family: var(--head); font-size: 15px; margin-bottom: 18px; }
footer.site .fbrand .bt { font-family: var(--head); font-weight: 800; font-size: 22px; color: #fff; }
footer.site .fbrand .bt b { color: var(--blue); }
footer.site .fbrand .flogo { width: 190px; max-width: 60%; height: auto; margin-bottom: 4px; }
footer.site p { font-size: 14px; color: rgba(255, 255, 255, .6); margin-top: 14px; line-height: 1.7; }
footer.site ul { list-style: none; }
footer.site ul li { margin-bottom: 10px; }
footer.site ul a { color: rgba(255, 255, 255, .6); font-size: 14px; transition: color var(--t), padding-left var(--t); }
footer.site ul a:hover { color: #fff; padding-left: 5px; }
footer.site .fcontact li { display: flex; gap: 11px; align-items: flex-start; font-size: 14px; color: rgba(255, 255, 255, .6); }
footer.site .fcontact svg { width: 16px; height: 16px; fill: var(--blue); flex: none; margin-top: 3px; }
footer.site .fsocial { display: flex; gap: 10px; margin-top: 8px; }
footer.site .fsocial a {
  width: 38px; height: 38px; border-radius: 11px; background: rgba(255, 255, 255, .07);
  display: grid; place-items: center; transition: background var(--t), transform var(--spring);
}
footer.site .fsocial a:hover { background: var(--grad); padding-left: 0; transform: translateY(-3px); }
footer.site .fsocial svg { width: 17px; height: 17px; fill: #fff; }
.fbottom { border-top: 1px solid var(--line-dark); padding: 20px 0; display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 13px; color: rgba(255, 255, 255, .45); }
.fbottom a { color: rgba(255, 255, 255, .6); }

.fab {
  position: fixed; right: 22px; bottom: 22px; z-index: 90; width: 58px; height: 58px; border-radius: 50%;
  background: var(--grad); display: grid; place-items: center;
  box-shadow: 0 12px 30px rgba(18, 104, 176, .4);
  transition: transform var(--spring), box-shadow var(--t);
}
.fab::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid rgba(43, 143, 214, .55);
  animation: fab-ring 2.6s var(--ease-out) infinite;
}
@keyframes fab-ring {
  0% { transform: scale(1); opacity: 1; }
  70%, 100% { transform: scale(1.65); opacity: 0; }
}
.fab:hover { transform: translateY(-4px) scale(1.06); box-shadow: 0 18px 40px rgba(18, 104, 176, .5); }
.fab svg { width: 26px; height: 26px; fill: #fff; }

.cards, .catrow .grid, .featurebar .grid, .logos, .dl-list, .contact-grid { perspective: 1500px; }
.card, .fb, .logo-card, .dl-item, .info-card, .cat, .accent-card { transform-style: preserve-3d; }
.contact-grid > .reveal { transform-style: preserve-3d; }

.card, .fb, .logo-card, .dl-item, .info-card {
  background-image: linear-gradient(180deg, #ffffff, #f3f7fc);
  box-shadow: var(--edge-hi), var(--shadow-3d);
}
.card:hover, .fb:hover, .logo-card:hover, .dl-item:hover, .info-card:hover {
  box-shadow: var(--edge-hi), var(--shadow-3d-lg);
}

.card:hover .ic { transform: translateZ(46px) translateY(-3px) rotate(-4deg) scale(1.06); }
.card:hover .card-img { transform: translateZ(28px) scale(1.03); }
.card:hover h3 { transform: translateZ(26px); }
.fb:hover .ic { transform: translateZ(38px) rotate(-5deg) scale(1.07); }
.fb:hover h4 { transform: translateZ(22px); }
.info-card:hover .ic { transform: translateZ(38px) rotate(-5deg) scale(1.07); }
.dl-item:hover .ficon { transform: translateZ(34px) rotate(-5deg) scale(1.06); }
.logo-card:hover .badge { transform: translateZ(40px) rotate(-5deg) scale(1.07); }

.cat { box-shadow: 0 30px 66px -30px rgba(8, 24, 48, .62), 0 12px 26px -16px rgba(8, 24, 48, .42); }
.cat:hover { box-shadow: 0 48px 96px -32px rgba(8, 24, 48, .72), 0 22px 46px -20px rgba(8, 24, 48, .5); }
.cat:hover > div { transform: translateZ(42px); }
.accent-card { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 30px 66px -30px rgba(8, 24, 48, .6), 0 12px 26px -16px rgba(8, 24, 48, .42); }
.accent-card:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 48px 96px -32px rgba(8, 24, 48, .72), 0 22px 46px -20px rgba(8, 24, 48, .5); }
.accent-card:hover h3, .accent-card:hover p { transform: translateZ(28px); }
.accent-card:hover .glyph { transform: translateZ(20px) rotate(8deg) scale(1.08); }

.darkpanel, .ctaband, .pagehero .inner {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), 0 34px 74px -36px rgba(8, 24, 48, .55);
}
.hero-panel { box-shadow: var(--edge-hi), 0 44px 96px -44px rgba(14, 36, 68, .5); }
.imgband, .frame, .map-embed { box-shadow: 0 34px 70px -32px rgba(14, 36, 68, .5); }

.btn-primary { box-shadow: 0 5px 0 -1px #0a457c, 0 14px 24px -8px rgba(18, 104, 176, .42); }
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 8px 0 -1px #0a457c, 0 20px 32px -8px rgba(18, 104, 176, .5); }
.btn-primary:active { transform: translateY(2px); box-shadow: 0 2px 0 -1px #0a457c, 0 8px 14px -8px rgba(18, 104, 176, .4); }

@media (prefers-reduced-motion: reduce) {
  .card, .fb, .logo-card, .dl-item, .info-card, .cat, .accent-card { transform-style: flat; }
  .cards, .catrow .grid, .featurebar .grid, .logos, .dl-list, .contact-grid { perspective: none; }
}

.js .reveal {
  opacity: 0; transform: translateY(30px);
  transition: opacity .85s var(--ease-out), transform .85s var(--ease-out);
  transition-delay: var(--d, 0s);
  will-change: opacity, transform;
}
.js .reveal.rv-left { transform: translateX(-36px); }
.js .reveal.rv-right { transform: translateX(36px); }
.js .reveal.rv-scale { transform: scale(.92); }
.js .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; transition-delay: 0s !important;
  }
  .js .reveal { opacity: 1; transform: none; }
}

.nav-scrim, .menu-close, .menu-cta { display: none; }

@media (max-width: 1000px) {
  .hero-panel { grid-template-columns: 1fr; min-height: auto; }
  .hero-copy { padding: 46px 34px; }
  .hero-media { min-height: 320px; }
  .split, .contact-grid { grid-template-columns: 1fr; gap: 34px; }
  .catrow .grid, .cards, .cards.four, .logos, .partner-grid, .featurebar .grid, .statband .grid { grid-template-columns: repeat(2, 1fr); }
  .plogo:nth-child(2n) { border-right: 0; }
  .statband .grid > div:nth-child(odd)::before { display: none; }
  footer.site .fgrid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 860px) {
  .burger { display: flex; }
  .menu {
    position: fixed; top: 0; right: 0; width: 84%; max-width: 350px; height: 100vh;
    background: #fff; flex-direction: column; align-items: stretch; gap: 0; padding: 74px 22px 30px;
    box-shadow: var(--shadow-lg); overflow-y: auto; z-index: 95;

    opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-6px);
    transition: opacity .3s var(--ease-out), transform .35s var(--ease-out), visibility 0s .35s;
  }
  .menu.open { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition: opacity .3s var(--ease-out), transform .35s var(--ease-out), visibility 0s 0s; }
  .menu > li > a { padding: 15px 12px; border-bottom: 1px solid var(--line); border-radius: 0; color: var(--ink); }
  .menu > li > a::before { display: none; }
  header.site.scrolled .menu > li > a { color: var(--ink); }

  .dropdown {
    position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0;
    background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
    max-height: 0; overflow: hidden; padding: 0 0 0 14px;
    transition: max-height .35s var(--ease-out), padding .35s var(--ease-out);
  }
  .menu .has:hover .dropdown { transform: none; }
  .menu .has.sub-open > .dropdown { max-height: 360px; padding: 2px 0 10px 14px; }
  .menu .has > a { display: flex; align-items: center; justify-content: space-between; }
  .menu .has.sub-open > a { color: var(--orange); }
  .menu .has.sub-open > a::after { transform: rotate(180deg); }

  .nav-scrim {
    display: block; position: fixed; inset: 0; z-index: 94;
    background: rgba(9, 30, 60, .55); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
    opacity: 0; visibility: hidden; transition: opacity .3s var(--ease-out), visibility 0s .3s;
  }
  .nav-scrim.open { opacity: 1; visibility: visible; transition: opacity .3s var(--ease-out), visibility 0s 0s; }

  .menu-close {
    display: grid; place-items: center; position: fixed; top: 15px; right: 15px; z-index: 97;
    width: 46px; height: 46px; border-radius: 13px; border: 0; cursor: pointer;
    background: var(--sky); color: var(--orange);
    opacity: 0; visibility: hidden; transform: scale(.85);
    transition: opacity .25s var(--ease-out), transform .35s var(--spring), background var(--t), color var(--t), visibility 0s .35s;
  }
  .menu-close.open { opacity: 1; visibility: visible; transform: none; transition: opacity .25s var(--ease-out), transform .35s var(--spring), background var(--t), color var(--t), visibility 0s 0s; }
  .menu-close:hover, .menu-close:active { background: var(--orange); color: #fff; }
  .menu-close svg { width: 22px; height: 22px; fill: currentColor; pointer-events: none; }

  .menu-cta { display: block; margin-top: 22px; }
  .menu > .menu-cta > .btn { border: 0; border-radius: 12px; padding: 15px 24px; width: 100%; display: flex; justify-content: center; text-transform: none; letter-spacing: .01em; }
  .nav-cta .btn { display: none; }
  .burger.open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  .burger.open span:nth-child(2) { opacity: 0; }
  .burger.open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
  .body-lock { overflow: hidden; }
}
@media (max-width: 620px) {
  .catrow .grid, .cards, .cards.two, .cards.four, .logos, .partner-grid, .featurebar .grid, .statband .grid, .form-row, .dl-list { grid-template-columns: 1fr; }
  .plogo { border-right: 0; }
  .statband .grid > div::before { display: none; }
  .topbar { font-size: 12px; }
  .topbar .wrap { justify-content: center; gap: 16px; }
  .topbar .tb-left { gap: 16px; }
  .topbar .tb-left span { white-space: nowrap; }
  .topbar .tb-left span:nth-child(3), .topbar .tb-social { display: none; }
  .ctaband, .pagehero .inner { padding: 38px 24px; }
  .sec { padding: 54px 0; }
  .hero h1 { font-size: 2.3rem; }
  footer.site .fgrid { grid-template-columns: 1fr; gap: 30px; }
  .fbottom { flex-direction: column; text-align: center; gap: 8px; }
}
@media (max-width: 400px) {
  .topbar .tb-left span:nth-child(2) { display: none; }
}