:root {
   --font-body: "Chillax", Arial, sans-serif;
   --font-heading: "Montserrat", Arial, sans-serif;
   --text-body: 16px;
   --paragraph-line-height: 1.65;
   --navy: #061b3d;
   --navy-deep: #031329;
   --navy-soft: #0b2851;
   --orange: #ff7900;
   --orange-light: #ff9c24;
   --blue: #2674d9;
   --white: #f8fbff;
   --muted: #b9c6da;
   --line: rgba(190, 215, 245, .2);
 }

 * {
   box-sizing: border-box;
 }

 html {
   scroll-behavior: smooth;
 }

 body {
   margin: 0;
   min-width: 320px;
   font-family: "Chillax", Arial, sans-serif;
   font-size: var(--text-body);
   line-height: var(--paragraph-line-height);
   color: var(--white);
   background: var(--navy-deep);
 }

 a {
   color: inherit;
   text-decoration: none;
 }

 button {
   font: inherit;
 }

 .skip-link {
   position: fixed;
   z-index: 1000;
   top: 10px;
   left: 10px;
   padding: 12px 16px;
   border-radius: 8px;
   color: #06152b;
   background: #fff;
   font-weight: 800;
   transform: translateY(-160%);
   transition: transform .15s ease;
 }

 .skip-link:focus {
   transform: translateY(0);
   outline: 3px solid #ff922c;
   outline-offset: 3px;
 }

 :focus-visible {
   outline: 3px solid #ffb15b;
   outline-offset: 4px;
 }

 .menu-card:focus-visible,
 .nav-link:focus-visible {
   outline: 3px solid #ffb15b;
   outline-offset: 4px;
 }

 .site-header {
   height: 82px;
   padding: 0 clamp(20px, 6vw, 108px);
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 28px;
   position: relative;
   z-index: 30;
   background: rgba(4, 21, 48, .88);
   border-bottom: 1px solid rgba(0, 199, 244, .55);
   box-shadow: 0 8px 30px rgba(0, 0, 0, .16);
   backdrop-filter: blur(18px);
 }

 .brand {
   display: inline-flex;
   align-items: center;
   flex: 0 0 auto;
   width: 190px;
 }

 .brand-logo-img {
   display: block;
   width: 100%;
   height: auto;
   max-height: 52px;
   object-fit: contain;
   object-position: left center;
 }

 .desktop-nav {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: clamp(12px, 1.7vw, 29px);
   margin-left: auto;
 }

 .nav-link {
   position: relative;
   font-size: 13px;
   font-weight: 600;
   white-space: nowrap;
   color: #e4ebf8;
   transition: color .2s ease;
 }

 .nav-link::after {
   content: "";
   position: absolute;
   left: 0;
   right: 100%;
   bottom: -12px;
   height: 2px;
   background: var(--blue);
   transition: right .25s ease;
 }

 .nav-link:hover,
 .nav-link:focus-visible,
 .nav-link.is-current {
   color: #58d5e6;
 }

 .nav-link:hover::after,
 .nav-link:focus-visible::after,
 .nav-link.is-current::after {
   right: 0;
 }

 .menu-toggle {
   width: 48px;
   height: 48px;
   border: 1px solid rgba(0, 199, 244, .7);
   border-radius: 50%;
   background: rgba(0, 199, 244, .06);
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   gap: 5px;
   cursor: pointer;
   flex: 0 0 auto;
   transition: background .25s, transform .25s, box-shadow .25s;
 }

 .menu-toggle:hover {
   background: rgba(0, 199, 244, .16);
   box-shadow: 0 0 22px rgba(0, 199, 244, .24);
   transform: rotate(-4deg);
 }

 .menu-toggle span {
   display: block;
   width: 18px;
   height: 1.5px;
   border-radius: 3px;
   background: white;
   transition: transform .25s, opacity .2s;
 }

 .menu-toggle[aria-expanded="true"] span:first-child {
   transform: translateY(6.5px) rotate(45deg);
 }

 .menu-toggle[aria-expanded="true"] span:nth-child(2) {
   opacity: 0;
 }

 .menu-toggle[aria-expanded="true"] span:last-child {
   transform: translateY(-6.5px) rotate(-45deg);
 }

 .menu-backdrop {
   position: fixed;
   inset: 82px 0 0;
   z-index: 20;
   background: rgba(0, 7, 20, 0.48);
   backdrop-filter: blur(4px);
   -webkit-backdrop-filter: blur(4px);
   opacity: 0;
   visibility: hidden;
   transition:
     opacity 0.28s ease,
     visibility 0.28s ease;
 }

 .menu-backdrop.is-visible {
   opacity: 1;
   visibility: visible;
 }

 .mega-menu {
   position: absolute;
   z-index: 25;
   top: 96px;
   right: clamp(20px, 3.3vw, 60px);
   width: min(1060px, calc(100vw - 40px));
   padding: 28px;
   border: 1px solid rgba(114, 176, 227, .55);
   border-radius: 22px;
   overflow: hidden;
   background: linear-gradient(135deg, rgba(5, 24, 54, .98), rgba(7, 31, 66, .97) 64%, rgba(23, 38, 62, .98));
   box-shadow: 0 25px 80px rgba(0, 0, 0, .48), 0 0 28px rgba(0, 199, 244, .08);
   opacity: 0;
   visibility: hidden;
   transform: translateY(-12px) scale(.985);
   transform-origin: top right;
   transition: opacity .25s ease, transform .3s cubic-bezier(.2, .75, .2, 1), visibility .3s;
 }

 .mega-menu.is-open {
   opacity: 1;
   visibility: visible;
   transform: translateY(0) scale(1);
 }

 .mega-menu::before {
   content: "";
   position: absolute;
   width: 300px;
   height: 300px;
   border-radius: 50%;
   background: rgba(0, 199, 244, .08);
   filter: blur(60px);
   right: 25%;
   top: -200px;
   pointer-events: none;
 }

 .mega-menu-top {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   gap: 20px;
   margin: 0 0 22px;
   position: relative;
 }

 .eyebrow {
   margin: 0 0 9px;
   font-size: 10px;
   font-weight: 800;
   letter-spacing: 2px;
   color: var(--blue);
 }

 .eyebrow span {
   display: inline-block;
   width: 22px;
   height: 1px;
   background: var(--orange);
   vertical-align: middle;
   margin: 0 7px;
 }

 .mega-menu h2 {
   margin: 0;
   font-size: clamp(21px, 2.4vw, 30px);
   letter-spacing: -.8px;
 }

 .mega-menu h2 em,
 .menu-cta h3 em {
   color: var(--orange-light);
   font-style: normal;
 }

 .menu-close {
   width: 38px;
   height: 38px;
   border-radius: 50%;
   border: 1px solid rgba(0, 199, 244, .55);
   background: rgba(0, 199, 244, .08);
   color: white;
   font-size: 26px;
   line-height: 1;
   cursor: pointer;
   transition: transform .2s, background .2s;
 }

 .menu-close:hover {
   transform: rotate(90deg);
   background: rgba(0, 199, 244, .2);
 }

 .mega-grid {
   display: grid;
   grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(220px, .85fr);
   gap: 20px;
   position: relative;
 }

 .mega-column {
   min-width: 0;
 }

 .menu-card {
   display: grid;
   grid-template-columns: 42px minmax(0, 1fr) 20px;
   align-items: center;
   gap: 12px;
   min-height: 79px;
   padding: 12px 10px;
   border-bottom: 1px solid var(--line);
   transition: background .2s, padding .2s, border-color .2s;
 }

 .menu-card:last-child {
   border-bottom-color: transparent;
 }

 .menu-card:hover,
 .menu-card:focus-visible {
   background: rgba(0, 199, 244, .07);
   padding-left: 15px;
   border-radius: 10px;
   border-bottom-color: transparent;
   outline: none;
 }

 .menu-icon {
   display: grid;
   place-items: center;
   width: 38px;
   height: 38px;
   border-radius: 11px;
   font-size: 24px;
   font-weight: 600;
   background: #071a35;
   color: #FF922C;
   border: 1px solid rgba(255, 146, 44, .24);
   overflow: hidden;
 }

 .menu-icon img {
   display: block;
   width: 78%;
   height: 78%;
   object-fit: contain;
 }

 .menu-icon.blue {
   background: #071a35;
   color: #FF922C;
 }

 .menu-copy {
   display: flex;
   flex-direction: column;
   gap: 5px;
   min-width: 0;
 }

 .menu-copy strong {
   font-size: 14px;
   font-weight: 700;
   line-height: 1.35;
 }

 .menu-copy small {
   color: var(--muted);
   font-size: 12px;
   line-height: 1.4;
 }

 .arrow {
   color: #dce9fb;
   font-size: 20px;
   transition: color .2s, transform .2s;
 }

 .menu-card:hover .arrow {
   color: var(--orange-light);
   transform: translate(2px, -2px);
 }

 .menu-cta {
   position: relative;
   overflow: hidden;
   min-height: 100%;
   padding: 23px 20px;
   border-radius: 16px;
   border: 1px solid rgba(255, 156, 36, .3);
   background: linear-gradient(155deg, rgba(255, 121, 0, .14), rgba(4, 19, 43, .45) 65%);
 }

 .menu-cta h3 {
   margin: 0 0 12px;
   font-size: clamp(19px, 2vw, 25px);
   line-height: 1.22;
   position: relative;
   z-index: 1;
 }

 .menu-cta>p:not(.eyebrow) {
   position: relative;
   z-index: 1;
   color: var(--muted);
   font-size: 11px;
   line-height: 1.7;
 }

 .cta-button {
   position: relative;
   z-index: 2;
   margin-top: 12px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
   padding: 13px 15px;
   border-radius: 12px;
   background: linear-gradient(100deg, var(--orange), #ff590b);
   color: white;
   font-size: 12px;
   font-weight: 800;
   box-shadow: 0 9px 24px rgba(255, 100, 0, .2);
   transition: transform .2s, box-shadow .2s;
 }

 .cta-button span {
   display: grid;
   place-items: center;
   width: 28px;
   height: 28px;
   border-radius: 50%;
   background: var(--navy);
   font-size: 18px;
 }

 .cta-button:hover {
   transform: translateY(-2px);
   box-shadow: 0 12px 28px rgba(255, 100, 0, .3);
 }

 .cta-lines {
   position: absolute;
   width: 190px;
   height: 190px;
   right: -70px;
   bottom: -82px;
   transform: rotate(-18deg);
   opacity: .8;
   border-radius: 42% 58% 62% 38% / 46% 42% 58% 54%;
   background: radial-gradient(circle at 30% 25%, rgba(255, 177, 47, .95), rgba(255, 121, 0, .72) 42%, rgba(255, 89, 11, .08) 72%, transparent 74%);
   filter: blur(.2px);
 }

 .cta-orb {
   position: absolute;
   border-radius: 50%;
   border: 1px solid rgba(0, 199, 244, .4);
   width: 75px;
   height: 75px;
   right: -28px;
   top: 18px;
 }

 .orb-two {
   width: 45px;
   height: 45px;
   top: 34px;
   right: -13px;
   border-color: rgba(255, 156, 36, .6);
 }

 .mega-footer {
   display: flex;
   justify-content: space-between;
   gap: 15px;
   padding-top: 18px;
   margin-top: 15px;
   border-top: 1px solid var(--line);
   color: #92a7c5;
   font-size: 10px;
 }

 .mega-footer span:first-child {
   letter-spacing: 1.6px;
   font-weight: 700;
 }

 .mega-footer b {
   color: var(--orange);
   margin: 0 4px;
 }

 @media (max-width: 1180px) {
   .site-header {
     padding-inline: 24px;
     gap: 18px;
   }

   .desktop-nav {
     gap: 13px;
   }

   .nav-link {
     font-size: 11px;
   }

   .brand {
     width: 168px;
   }

   .brand-logo-img {
     max-height: 46px;
   }

   .mega-menu {
     right: 20px;
   }
 }

 @media (max-width: 900px) {
   .site-header {
     height: 72px;
   }

   .desktop-nav {
     display: none;
   }

   .menu-toggle {
     margin-left: auto;
   }

   .menu-backdrop {
     inset-top: 72px;
     top: 72px;
   }

   .mega-menu {
     top: 84px;
     max-height: calc(100svh - 98px);
     overflow-y: auto;
     padding: 22px;
   }

   .mega-grid {
     grid-template-columns: 1fr 1fr;
   }

   .menu-cta {
     grid-column: 1 / -1;
     min-height: 200px;
   }

   .menu-cta h3 {
     font-size: 25px;
   }

   .menu-cta>p:not(.eyebrow) {
     max-width: 420px;
   }

   .cta-button {
     max-width: 270px;
   }
 }

 @media (max-width: 560px) {
   .site-header {
     padding-inline: 18px;
   }

   .brand {
     width: 150px;
   }

   .brand-logo-img {
     max-height: 40px;
   }

   .mega-menu {
     top: 80px;
     right: 10px;
     width: calc(100vw - 20px);
     padding: 17px;
     border-radius: 16px;
     max-height: calc(100svh - 90px);
   }

   .mega-menu-top {
     margin-bottom: 12px;
   }

   .mega-menu h2 {
     font-size: 22px;
     max-width: 260px;
   }

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

   .mega-column {
     border-bottom: 1px solid var(--line);
   }

   .menu-card {
     min-height: 66px;
     grid-template-columns: 38px minmax(0, 1fr) 18px;
     gap: 10px;
     padding: 9px 5px;
   }

   .menu-icon {
     width: 34px;
     height: 34px;
     font-size: 21px;
   }

   .menu-copy strong {
     font-size: 13px;
   }

   .menu-copy small {
     font-size: 11px;
   }

   .menu-cta {
     margin-top: 14px;
     padding: 20px 16px;
   }

   .mega-footer {
     flex-direction: column;
     font-size: 9px;
     gap: 7px;
   }
 }

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

   *,
   *::before,
   *::after {
     scroll-behavior: auto !important;
     animation-duration: .01ms !important;
     animation-iteration-count: 1 !important;
     transition-duration: .01ms !important;
   }
 }


 /* HOMEPAGE — independent from the service subpage. Hero image intentionally left for the owner to add. */
 :root {
   --cyan: #20a8c0;
   --teal: #258c9c;
   --ink: #071a35;
 }

 body {
   background: #06152b;
 }

 .home-hero {
   min-height: min(790px, calc(100svh - 82px));
   position: relative;
   isolation: isolate;
   overflow: hidden;
   display: grid;
   align-items: center;
   padding: clamp(70px, 9vw, 130px) clamp(24px, 8vw, 130px) 110px;
   background: radial-gradient(ellipse at 78% 25%, rgba(37, 140, 156, .30), transparent 35%),
     radial-gradient(ellipse at 18% 78%, rgba(255, 121, 0, .20), transparent 30%),
     linear-gradient(118deg, rgba(6, 21, 43, .98) 0%, rgba(9, 43, 83, .94) 52%, rgba(10, 58, 89, .88) 100%),
     url("assets/vectors/background-agency-reduced.svg");
   background-repeat: no-repeat;
   background-size: cover, cover, cover, min(760px, 66vw) auto;
   background-position: center, center, center, right 7% center;
 }

 .home-hero::before,
 .home-hero::after {
   content: "";
   position: absolute;
   z-index: -1;
   pointer-events: none;
   border-radius: 50%;
 }

 .home-hero::before {
   width: min(54vw, 700px);
   aspect-ratio: 1;
   right: -10vw;
   top: -30%;
   border: 1px solid rgba(32, 168, 192, .35);
   box-shadow: 0 0 0 42px rgba(32, 168, 192, .035), 0 0 0 100px rgba(32, 168, 192, .025);
 }

 .home-hero::after {
   width: min(32vw, 420px);
   aspect-ratio: 1;
   right: 14%;
   bottom: -42%;
   background: radial-gradient(circle, rgba(255, 121, 0, .18), transparent 70%);
   filter: blur(10px);
 }

 .hero-layout {
   width: min(1320px, 100%);
   margin: auto;
   display: grid;
   grid-template-columns: minmax(0, 1fr) minmax(280px, .78fr);
   gap: clamp(30px, 6vw, 90px);
   align-items: center;
 }

 .hero-copy {
   max-width: 680px;
 }

 .home-hero .hero-kicker {
   color: #49c5d7;
   font-size: 11px;
   font-weight: 800;
   letter-spacing: 3px;
   margin: 0 0 26px;
 }

 .home-hero .hero-tagline {
   margin: 22px 0 0;
   color: #f8fbff;
   font-size: clamp(19px, 2.1vw, 27px);
   line-height: 1.45;
   font-weight: 700;
 }

 .home-hero .hero-tagline span {
   color: #ffb15b;
 }

 .home-hero h1 {
   margin: 0;
   font-size: clamp(43px, 6.4vw, 84px);
   line-height: 1.03;
   letter-spacing: -3px;
   font-weight: 800;
 }

 .home-hero h1 em {
   color: #ff922c;
   font-style: normal;
 }

 .home-hero .hero-subtitle {
   color: #dce8f4;
   margin: 25px 0 0;
   max-width: 540px;
   font-size: clamp(17px, 1.6vw, 21px);
   line-height: 1.75;
   font-weight: 400;
 }

 .hero-actions {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 14px;
   margin-top: 34px;
 }

 .hero-button {
   display: inline-flex;
   align-items: center;
   gap: 20px;
   padding: 15px 21px;
   border-radius: 999px;
   border: 1px solid rgba(32, 168, 192, .7);
   color: white;
   background: linear-gradient(100deg, #238fa1, #1b6f91);
   cursor: pointer;
   font-size: 12px;
   font-weight: 800;
   box-shadow: 0 12px 28px rgba(0, 0, 0, .18);
   transition: transform .2s, filter .2s;
 }

 .hero-button span {
   color: #ffd09d;
   font-size: 19px;
 }

 .hero-button:hover {
   transform: translateY(-2px);
   filter: brightness(1.12);
 }

 .hero-secondary {
   font-size: 12px;
   color: #d6e2f1;
   padding: 12px 4px;
   border-bottom: 1px solid rgba(255, 255, 255, .25);
 }

 .hero-visual {
   min-height: 340px;
   position: relative;
   display: grid;
   place-items: center;
 }

 .hero-image-placeholder {
   width: 100%;
   aspect-ratio: 1.05;
   max-height: 480px;
   border: 1px dashed rgba(183, 221, 236, .32);
   border-radius: 38% 62% 56% 44% / 48% 38% 62% 52%;
   background: radial-gradient(ellipse at 55% 40%, rgba(32, 168, 192, .15), transparent 55%), linear-gradient(135deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .008));
   position: relative;
   overflow: hidden;
 }

 .hero-image-placeholder::before {
   content: "";
   position: absolute;
   width: 70%;
   height: 70%;
   left: 15%;
   top: 15%;
   border: 1px solid rgba(255, 255, 255, .12);
   border-radius: 50%;
 }

 .hero-image-placeholder::after {
   content: "";
   position: absolute;
   width: 54%;
   height: 54%;
   left: 23%;
   top: 23%;
   border: 1px solid rgba(255, 146, 44, .25);
   border-radius: 50%;
 }

 .hero-placeholder-note {
   position: absolute;
   z-index: 1;
   inset: auto 15% 18%;
   text-align: center;
   color: #8ea9c5;
   font-size: 10px;
   line-height: 1.6;
   letter-spacing: .5px;
 }

 .hero-stamp {
   position: absolute;
   right: -3%;
   bottom: 5%;
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 13px 16px;
   border-radius: 14px;
   background: #f8fbff;
   color: #092447;
   box-shadow: 0 20px 50px rgba(0, 0, 0, .3);
   transform: rotate(-4deg);
 }

 .hero-stamp b {
   color: #ef6d18;
   font-size: 22px;
   line-height: 1;
 }

 .hero-stamp span {
   font-size: 10px;
   font-weight: 800;
   line-height: 1.35;
   letter-spacing: .5px;
 }

 .hero-scroll {
   position: absolute;
   left: clamp(24px, 8vw, 130px);
   bottom: 28px;
   display: flex;
   align-items: center;
   gap: 12px;
   color: #8ea9c5;
   font-size: 10px;
   letter-spacing: 1.2px;
   text-transform: uppercase;
 }

 .hero-scroll::before {
   content: "";
   width: 35px;
   height: 1px;
   background: #ff922c;
 }

 .section {
   padding: clamp(68px, 8vw, 112px) clamp(22px, 7vw, 112px);
 }

 .section-inner {
   width: min(1220px, 100%);
   margin: auto;
 }

 .section-label {
   display: flex;
   align-items: center;
   gap: 10px;
   color: #2bb5c9;
   font-size: 10px;
   letter-spacing: 2px;
   font-weight: 800;
   text-transform: uppercase;
   margin: 0 0 16px;
 }

 .section-label::before {
   content: "";
   width: 25px;
   height: 2px;
   background: #ff922c;
 }

 .section-title {
   margin: 0;
   font-size: clamp(32px, 4.4vw, 54px);
   line-height: 1.12;
   letter-spacing: -1.6px;
 }

 .section-intro {
   color: #9fb3cb;
   line-height: 1.8;
   font-size: 14px;
   max-width: 620px;
   margin: 18px 0 0;
 }

 .services-section {
   background: #f5f8fc;
   color: #09203f;
 }

 .services-section .section-intro {
   color: #5f7086;
 }

 .services-grid {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 18px;
   margin-top: 42px;
 }

 .service-tile {
   min-height: 240px;
   position: relative;
   padding: 28px;
   border-radius: 19px;
   overflow: hidden;
   background: #fff;
   border: 1px solid #e0e8f1;
   box-shadow: 0 12px 34px rgba(7, 26, 53, .045);
   transition: transform .25s, box-shadow .25s, border-color .25s;
 }

 .service-tile:hover {
   transform: translateY(-5px);
   box-shadow: 0 22px 44px rgba(7, 26, 53, .1);
   border-color: #b9e6ed;
 }

 .service-tile::after {
   content: "";
   position: absolute;
   width: 150px;
   height: 150px;
   right: -60px;
   bottom: -75px;
   border-radius: 50%;
   background: radial-gradient(circle, rgba(32, 168, 192, .17), transparent 70%);
 }

 .service-number {
   font-size: 10px;
   letter-spacing: 1.5px;
   color: #8b9bb0;
   font-weight: 800;
 }

 .service-symbol {
   width: 62px;
   height: 62px;
   display: grid;
   place-items: center;
   border-radius: 16px;
   margin: 18px 0 16px;
   background: #071a35;
   color: #FF922C;
   padding: 8px;
   border: 1px solid rgba(255, 146, 44, .22);
 }

 .service-symbol img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: contain;
 }

 .service-tile:nth-child(3n+2) .service-symbol {
   background: #071a35;
   color: #FF922C;
 }

 .service-tile:nth-child(3n) .service-symbol {
   background: #071a35;
   color: #FF922C;
 }

 .service-tile h3 {
   margin: 0;
   font-size: 18px;
   line-height: 1.35;
 }

 .service-tile p {
   margin: 10px 0 0;
   max-width: 300px;
   color: #52647a;
   font-size: 14px;
   line-height: 1.7;
 }

 .tile-arrow {
   position: absolute;
   right: 24px;
   top: 24px;
   font-size: 20px;
   color: #138da4;
 }

 .service-tile:nth-child(3n+2) .tile-arrow {
   color: #ed781c;
 }

 .feature-section {
   background: #071a35;
   overflow: hidden;
 }

 .feature-grid {
   display: grid;
   grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
   gap: clamp(30px, 7vw, 100px);
   align-items: center;
 }

 .feature-copy p:not(.section-label) {
   color: #a9bbd1;
   font-size: 14px;
   line-height: 1.9;
 }

 .feature-copy .section-title em {
   color: #ff922c;
   font-style: normal;
 }

 .feature-points {
   display: grid;
   gap: 13px;
   margin-top: 25px;
 }

 .feature-point {
   display: flex;
   gap: 13px;
   align-items: flex-start;
   color: #dfe9f4;
   font-size: 12px;
   line-height: 1.65;
 }

 .feature-point b {
   flex: 0 0 26px;
   width: 26px;
   height: 26px;
   display: grid;
   place-items: center;
   border-radius: 50%;
   background: rgba(32, 168, 192, .14);
   color: #4ed1df;
 }

 .feature-image {
   width: 100%;
   max-height: 460px;
   object-fit: contain;
   filter: drop-shadow(0 22px 32px rgba(0, 0, 0, .25));
 }

 .showcase-section {
   background: #0a2747;
   overflow: hidden;
 }

 .showcase-grid {
   display: grid;
   grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
   gap: 35px;
   align-items: center;
 }

 .showcase-image {
   width: 100%;
   height: auto;
   object-fit: contain;
   filter: drop-shadow(0 18px 26px rgba(0, 0, 0, .18));
 }

 .showcase-copy .section-title em {
   color: #ff922c;
   font-style: normal;
 }

 .showcase-copy p:not(.section-label) {
   color: #a9bed3;
   font-size: 14px;
   line-height: 1.9;
 }

 .balloon-band {
   padding: 0;
   background: #081a31;
 }

 .balloon-band img {
   display: block;
   width: 100%;
   height: clamp(230px, 38vw, 470px);
   object-fit: cover;
 }

 .balloon-band {
   position: relative;
 }

 .balloon-band>img {
   height: clamp(250px, 34vw, 440px);
 }

 .balloon-caption-wrap {
   background: #f4f7fb;
   padding: 0 clamp(20px, 7vw, 112px) clamp(34px, 5vw, 64px);
 }

 .balloon-caption {
   position: relative;
   z-index: 2;
   width: min(1220px, 100%);
   margin: -48px auto 0;
   padding: clamp(25px, 4vw, 42px);
   display: grid;
   grid-template-columns: 58px minmax(0, 1fr) auto;
   align-items: center;
   gap: 24px;
   border: 1px solid rgba(213, 225, 238, .9);
   border-radius: 22px;
   background: rgba(255, 255, 255, .96);
   box-shadow: 0 24px 70px rgba(6, 27, 61, .12);
   color: #09203f;
 }

 .caption-mark {
   width: 56px;
   height: 56px;
   display: grid;
   place-items: center;
   border-radius: 17px;
   color: #fff;
   font-size: 26px;
   background: linear-gradient(135deg, #ff922c, #ed6c19);
   box-shadow: 0 10px 22px rgba(237, 108, 25, .2);
 }

 .caption-copy {
   min-width: 0;
 }

 .caption-eyebrow {
   margin: 0 0 8px;
   color: #218fa3;
   font-size: 9px;
   letter-spacing: 1.7px;
   font-weight: 800;
 }

 .balloon-caption strong {
   display: block;
   font-size: clamp(19px, 2.4vw, 29px);
   line-height: 1.25;
   letter-spacing: -.7px;
 }

 .balloon-caption strong em {
   color: #ef791e;
   font-style: normal;
 }

 .balloon-caption .caption-copy>span {
   display: block;
   margin-top: 9px;
   max-width: 640px;
   color: #52647a;
   font-size: 14px;
   line-height: 1.7;
 }

 .caption-link {
   display: inline-flex;
   align-items: center;
   gap: 20px;
   white-space: nowrap;
   padding: 14px 18px;
   border-radius: 999px;
   background: #0b3155;
   color: white;
   font-size: 11px;
   font-weight: 800;
   transition: transform .2s, background .2s;
 }

 .caption-link:hover {
   transform: translateY(-2px);
   background: #218fa3;
 }

 .caption-link b {
   color: #ffad5d;
   font-size: 17px;
 }

 .site-footer {
   padding: 0 clamp(22px, 7vw, 112px);
   display: block;
   background: #041125;
   color: #a9bad0;
   font-size: 12px;
   line-height: 1.65;
 }

 .footer-main {
   width: min(1220px, 100%);
   margin: auto;
   padding: 72px 0 58px;
   display: grid;
   grid-template-columns: 1.35fr .7fr 1fr 1fr;
   gap: clamp(30px, 4.2vw, 68px);
 }

 .footer-brand-col {
   max-width: 310px;
 }

 .footer-logo {
   display: inline-flex;
   max-height: 58px;
   width: 220px;
   max-width: 220px;
   align-items: left;
   margin-bottom: 18px;
   object-fit: contain;
   object-position: left;
 }

 .footer-logo-kodaworm {
   display: block;
   width: 220px;
   max-width: 100%;
   max-height: 58px;
   height: auto;
   margin: 0 0 18px 0;
   object-fit: contain;
   object-position: left center;
 }

 .footer-logo .brand-logo-img {
   display: block;
   width: 100%;
   height: auto;
   max-height: 58px;
   object-fit: contain;
   object-position: left center;
 }

 .footer-logo .brand-logo-svg {
   display: block;
   width: 100%;
   height: auto;
   max-height: 58px;
   object-fit: contain;
   object-position: left center;
 }

 .footer-brand-col p {
   max-width: 280px;
   margin: 22px 0 24px;
   color: #b2c1d4;
   font-size: 13px;
   line-height: 1.8;
 }

 .footer-email {
   display: inline-flex;
   gap: 12px;
   align-items: center;
   color: #e6f1fc;
   font-weight: 600;
   font-size: 12px;
 }

 .footer-email span {
   color: #ff922c;
   font-size: 16px;
 }

 .footer-nav-col h2 {
   margin: 5px 0 24px;
   color: #f4f8fd;
   font-size: 14px;
   letter-spacing: .2px;
 }

 .footer-nav-col a {
   display: block;
   width: fit-content;
   margin: 14px 0;
   color: #b2c1d4;
   font-size: 12px;
   line-height: 1.55;
   transition: color .2s, transform .2s;
 }

 .footer-nav-col a:hover {
   color: #51c6d6;
   transform: translateX(3px);
 }

 .footer-pill {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 8px 10px;
   border: 1px solid rgba(57, 192, 211, .25);
   border-radius: 999px;
   color: #7bd9e3;
   font-size: 9px;
   font-weight: 800;
   letter-spacing: 1.3px;
 }

 .footer-pill i {
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background: #ff922c;
   box-shadow: 0 0 0 4px rgba(255, 146, 44, .12);
 }

 .footer-cta-col h2 {
   margin: 19px 0 22px;
   color: #f5f8fc;
   font-size: clamp(22px, 2.4vw, 30px);
   line-height: 1.2;
   letter-spacing: -.8px;
 }

 .footer-cta-col h2 em {
   color: #ff922c;
   font-style: normal;
 }

 .footer-contact-link {
   display: inline-flex;
   align-items: center;
   gap: 24px;
   padding-bottom: 9px;
   border-bottom: 1px solid rgba(255, 255, 255, .25);
   color: #fff;
   font-size: 11px;
   font-weight: 800;
 }

 .footer-contact-link b {
   color: #4fc4d3;
   font-size: 17px;
 }

 .footer-bottom {
   width: min(1220px, 100%);
   margin: auto;
   min-height: 72px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 22px;
   border-top: 1px solid rgba(255, 255, 255, .14);
   color: #a0b1c7;
   font-size: 11px;
   line-height: 1.6;
 }

 .footer-motto {
   letter-spacing: 1.2px;
   font-weight: 700;
 }

 .footer-motto b {
   padding: 0 6px;
   color: #ff922c;
 }

 .footer-bottom>a {
   color: #c4d2e2;
   white-space: nowrap;
 }

 .footer-bottom>a:hover {
   color: #51c6d6;
 }

 .contact-band {
   background-color: #09264a;
   background-image: linear-gradient(110deg, rgba(12, 59, 89, .96), rgba(9, 38, 74, .94) 60%, rgba(6, 21, 43, .96)), url("assets/vectors/background-agency-alt.svg");
   background-repeat: no-repeat;
   background-size: cover, min(680px, 60vw) auto;
   background-position: center, right center;
   position: relative;
   overflow: hidden;
 }

 .contact-band::after {
   content: "";
   position: absolute;
   width: 400px;
   height: 400px;
   right: -100px;
   top: -210px;
   border-radius: 50%;
   border: 1px solid rgba(32, 168, 192, .3);
   box-shadow: 0 0 0 40px rgba(32, 168, 192, .04), 0 0 0 90px rgba(32, 168, 192, .025);
 }

 .contact-inner {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 35px;
   position: relative;
   z-index: 1;
 }

 .contact-inner .section-title {
   max-width: 700px;
 }

 .contact-inner .section-title em {
   color: #ff922c;
   font-style: normal;
 }

 .contact-button {
   display: inline-flex;
   align-items: center;
   gap: 22px;
   flex: 0 0 auto;
   padding: 16px 20px;
   border-radius: 999px;
   color: white;
   background: #258c9c;
   font-size: 12px;
   font-weight: 800;
 }

 @media(max-width:900px) {
   .home-hero {
     min-height: auto;
     padding-top: 80px;
   }

   .hero-layout {
     grid-template-columns: 1fr;
     gap: 35px;
   }

   .hero-copy {
     max-width: 760px;
   }

   .hero-visual {
     min-height: 250px;
     max-width: 480px;
     width: 100%;
     margin: auto;
   }

   .hero-image-placeholder {
     aspect-ratio: 1.25;
   }

   .hero-stamp {
     right: 0;
   }

   .services-grid {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }

   .feature-grid,
   .showcase-grid {
     grid-template-columns: 1fr;
   }

   .feature-image {
     max-height: 390px;
   }

   .showcase-image {
     max-height: 390px;
     order: 2;
   }

   .contact-inner {
     align-items: flex-start;
     flex-direction: column;
   }

   .footer-main {
     grid-template-columns: 1fr 1fr;
     gap: 34px 28px;
     padding: 54px 0 42px;
   }

   .footer-brand-col {
     grid-column: 1/-1;
     max-width: 460px;
   }

   .footer-bottom {
     flex-wrap: wrap;
     padding: 18px 0;
   }
 }

 @media(max-width:560px) {
   .home-hero {
     padding: 62px 20px 90px;
   }

   .home-hero h1 {
     font-size: clamp(39px, 11vw, 55px);
     letter-spacing: -1.8px;
   }

   .home-hero .hero-kicker {
     font-size: 9px;
     letter-spacing: 1.7px;
     line-height: 1.8;
   }

   .home-hero .hero-subtitle {
     font-size: 16px;
   }

   .hero-visual {
     min-height: 210px;
   }

   .hero-stamp {
     transform: scale(.88) rotate(-4deg);
     transform-origin: bottom right;
   }

   .section {
     padding: 64px 20px;
   }

   .services-grid {
     grid-template-columns: 1fr;
   }

   .service-tile {
     min-height: 210px;
     padding: 23px;
   }

   .balloon-caption {
     align-items: flex-start;
     flex-direction: column;
     gap: 8px;
     padding: 22px 20px;
   }

   .balloon-caption {
     grid-template-columns: 48px minmax(0, 1fr);
     gap: 16px;
     padding: 23px;
     margin-top: -34px;
   }

   .caption-mark {
     width: 46px;
     height: 46px;
     border-radius: 14px;
   }

   .caption-link {
     grid-column: 2;
     justify-self: start;
     margin-top: 2px;
   }

   .footer-main {
     grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: 36px 24px;
     padding: 50px 0 38px;
   }

   .footer-brand-col {
     grid-column: 1/-1;
     max-width: 440px;
   }

   .footer-bottom {
     align-items: flex-start;
     flex-direction: column;
     justify-content: center;
     padding: 20px 0;
     gap: 12px;
   }

   .footer-motto {
     font-size: 8px;
   }
 }

 /* SEO and accessibility refinements */
 .footer-logo {
   display: inline-flex;
   align-items: center;
   margin-bottom: 18px;
 }

 .home-hero .hero-subtitle {
   max-width: 580px;
 }

 @media (max-width:560px) {
   .home-hero .hero-tagline {
     font-size: 19px;
     margin-top: 18px;
   }

   .home-hero .hero-subtitle {
     line-height: 1.7;
   }
 }

 @media (forced-colors: active) {

   .skip-link,
   :focus-visible {
     outline: 2px solid CanvasText;
   }
 }


 /* Font pairing: Montserrat for headings, Chillax for paragraphs and supporting text */
 h1,
 h2,
 h3,
 h4,
 h5,
 h6,
 .section-title,
 .home-hero h1,
 .footer-nav-col h2,
 .menu-copy strong,
 .brand-name {
   font-family: var(--font-heading);
 }

 p,
 li,
 .section-intro,
 .hero-subtitle,
 .service-tile p,
 .feature-copy p,
 .showcase-copy p,
 .footer-brand-col p,
 .footer-nav-col a,
 .footer-email,
 .nav-link,
 .hero-secondary,
 .hero-placeholder-note,
 .balloon-caption span {
   font-family: var(--font-body);
 }

 /* V2: większe ilustracje usług, zachowane oryginalne kolory SVG */
 .services-grid {
   gap: 22px;
 }

 .service-tile {
   display: grid;
   grid-template-columns: 112px minmax(0, 1fr);
   grid-template-areas: "number arrow" "symbol title" "symbol desc";
   column-gap: 22px;
   align-content: start;
   min-height: 226px;
   padding: 25px 24px;
 }

 .service-number {
   grid-area: number;
   align-self: center;
 }

 .tile-arrow {
   grid-area: arrow;
   position: static;
   justify-self: end;
   align-self: center;
 }

 .service-symbol {
   grid-area: symbol;
   width: 112px;
   height: 112px;
   margin: 12px 0 0;
   padding: 12px;
   border-radius: 23px;
   background: radial-gradient(ellipse at 78% 25%, rgba(37, 140, 156, .30), transparent 35%),
     radial-gradient(ellipse at 18% 78%, rgba(255, 121, 0, .20), transparent 30%),
     linear-gradient(118deg, rgba(6, 21, 43, .98) 0%, rgba(9, 43, 83, .94) 52%, rgba(10, 58, 89, .88) 100%);
   border: 1px solid rgba(108, 196, 220, .3);
   box-shadow: 0 12px 26px rgba(7, 26, 53, .16);
 }

 .service-symbol img {
   width: 100%;
   height: 100%;
   object-fit: contain;
   filter: none;
 }

 .service-tile h3 {
   grid-area: title;
   align-self: end;
   margin: 10px 0 0;
 }

 .service-tile p {
   grid-area: desc;
   margin: 8px 0 0;
 }

 .service-tile:nth-child(3n+2) .service-symbol,
 .service-tile:nth-child(3n) .service-symbol {
   background: radial-gradient(ellipse at 78% 25%, rgba(37, 140, 156, .30), transparent 35%), radial-gradient(ellipse at 18% 78%, rgba(255, 121, 0, .20), transparent 30%), linear-gradient(118deg, rgba(6, 21, 43, .98) 0%, rgba(9, 43, 83, .94) 52%, rgba(10, 58, 89, .88) 100%);
 }

 /* Menu burger: większe pola ikon i ten sam gradient co hero; SVG pozostają w oryginalnych barwach */
 .mega-grid {
   gap: 18px;
 }

 .menu-card {
   grid-template-columns: 62px minmax(0, 1fr) 18px;
   gap: 12px;
   min-height: 88px;
   padding: 12px 10px;
 }

 .menu-icon,
 .menu-icon.blue {
   width: 58px;
   height: 58px;
   border-radius: 15px;
   padding: 6px;
   background: radial-gradient(ellipse at 78% 25%, rgba(37, 140, 156, .30), transparent 35%),
     radial-gradient(ellipse at 18% 78%, rgba(255, 121, 0, .20), transparent 30%),
     linear-gradient(118deg, rgba(6, 21, 43, .98) 0%, rgba(9, 43, 83, .94) 52%, rgba(10, 58, 89, .88) 100%);
   border: 1px solid rgba(108, 196, 220, .3);
   color: inherit;
 }

 .menu-icon img {
   width: 100%;
   height: 100%;
   object-fit: contain;
   filter: none;
 }

 @media (max-width: 900px) {
   .menu-card {
     grid-template-columns: 62px minmax(0, 1fr) 18px;
     min-height: 86px;
   }

   .menu-icon,
   .menu-icon.blue {
     width: 58px;
     height: 58px;
   }
 }

 @media (max-width: 560px) {
   .service-tile {
     grid-template-columns: 82px minmax(0, 1fr);
     column-gap: 15px;
     min-height: 190px;
     padding: 20px 18px;
   }

   .service-symbol {
     width: 82px;
     height: 82px;
     padding: 9px;
     border-radius: 18px;
     margin-top: 14px;
   }

   .service-tile h3 {
     font-size: 16px;
   }

   .service-tile p {
     font-size: 13px;
     line-height: 1.55;
   }

   .menu-card {
     grid-template-columns: 54px minmax(0, 1fr) 18px;
     min-height: 80px;
   }

   .menu-icon,
   .menu-icon.blue {
     width: 50px;
     height: 50px;
   }
 }


 /* Ujednolicone logo i elementy nagłówka — Branding Studio */
 .brand-logo-img {
   display: block;
   width: 100%;
   max-width: 220px;
   height: auto;
   max-height: 54px;
   object-fit: contain;
   object-position: left center
 }

 .brand .brand-logo-img {
   width: clamp(150px, 17vw, 220px)
 }

 .footer-logo .brand-logo-img {
   width: 190px;
   max-width: 100%;
   max-height: 58px
 }

 @media(max-width:600px) {
   .brand .brand-logo-img {
     width: 150px;
     max-height: 44px
   }

   .footer-logo .brand-logo-img {
     width: 170px
   }
 }

 .home-hero .hero-copy h1 {
   color: #FF922C
 }

 .home-hero .hero-copy h1 em {
   color: #f8fbff
 }