@font-face {
      font-family: "Manrope";
      font-style: normal;
      font-weight: 400 800;
      font-display: block;
      src: url("../fonts/manrope-latin-ext.woff2") format("woff2");
      unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }

    @font-face {
      font-family: "Manrope";
      font-style: normal;
      font-weight: 400 800;
      font-display: block;
      src: url("../fonts/manrope-latin.woff2") format("woff2");
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }

    :root {
      --bg: #eef7fb;
      --text: #14314f;
      --muted: #5d7894;
      --navy: #0b5fa8;
      --deep: #082039;
      --cream: #f6fbff;
      --brand: #0095da;
      --line: rgba(9, 63, 111, 0.12);
      --glass: rgba(255, 255, 255, 0.9);
      --glass-soft: rgba(255, 255, 255, 0.46);
      --shadow: 0 18px 44px rgba(5, 45, 86, 0.13);
      --container: min(1400px, calc(100vw - 28px));
      --hero-content-left: max(104px, calc((100vw - 1700px) / 2 + 104px));
      --logo-size: 104px;
      --logo-slot: 126px;
    }

    * { box-sizing: border-box; }
    html {
      margin: 0;
      width: 100%;
      max-width: 100%;
      overflow-x: clip;
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      width: 100%;
      max-width: 100vw;
      overflow-x: clip;
    }

    body {
      font-family: "Manrope", "Segoe UI", Arial, sans-serif;
      color: var(--text);
      background:
        radial-gradient(circle at top left, rgba(0, 149, 218, 0.18), transparent 22%),
        radial-gradient(circle at top right, rgba(24, 78, 134, 0.12), transparent 20%),
        linear-gradient(135deg, var(--bg), #f7fbff 42%, #dce8f7);
      background-attachment: fixed;
      background-repeat: no-repeat;
      background-size: cover;
      min-height: 100vh;
    }

    body::after {
      content: "";
      position: fixed;
      inset: 0;
      z-index: 999;
      pointer-events: none;
      opacity: 0;
      width: 100vw;
      height: 100vh;
      background:
        radial-gradient(circle at 50% 20%, rgba(0,149,218,0.18), transparent 28%),
        linear-gradient(135deg, rgba(236,244,252,0.86), rgba(255,255,255,0.96));
      backdrop-filter: blur(0);
      -webkit-backdrop-filter: blur(0);
      transition: opacity .22s ease, backdrop-filter .22s ease;
    }

    body.is-leaving::after {
      opacity: 1;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }

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

    a,
    button,
    .service-card,
    .project-card,
    .solution-card,
    .package-card,
    .testimonial-float {
      -webkit-tap-highlight-color: transparent;
    }

    :where(a, button, .premium-action-card, .service-card, .project-card, .solution-card, .package-card) {
      position: relative;
    }

    :where(a, button):focus-visible {
      outline: 3px solid rgba(0,149,218,0.32);
      outline-offset: 4px;
    }

    .nav-link::after,
    .hero-btn::after,
    .final-btn::after,
    .package-action::after,
    .projects-all::after,
    .process-cta::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background: linear-gradient(110deg, transparent 0 35%, rgba(255,255,255,0.42) 48%, transparent 62% 100%);
      transform: translateX(-120%);
      opacity: 0;
      pointer-events: none;
      transition: transform .55s ease, opacity .2s ease;
    }

    .nav-link:hover::after,
    .hero-btn:hover::after,
    .final-btn:hover::after,
    .package-action:hover::after,
    .projects-all:hover::after,
    .process-cta:hover::after {
      transform: translateX(120%);
      opacity: 1;
    }

    .wrap {
      position: relative;
      width: 100%;
      max-width: 100%;
      margin: 0 auto;
      overflow: visible;
      transition: padding-top .28s ease;
    }

    .wrap::before {
      content: "";
      position: absolute;
      top: 0;
      left: 50%;
      z-index: 20;
      width: 100vw;
      height: 248px;
      transform: translateX(-50%);
      pointer-events: none;
      background:
        linear-gradient(180deg, rgba(238,247,251,0.82), rgba(238,247,251,0.48) 58%, rgba(238,247,251,0));
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 100%);
      transition: opacity .28s ease;
    }

    body.scrolled .wrap {
      padding-top: 0;
    }

    body.scrolled .wrap::before {
      opacity: 0;
    }

    .wrap > .section-block,
    .wrap > .site-footer {
      width: 100%;
      max-width: none;
      margin-left: 0;
      margin-right: 0;
    }

    .utility-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      position: absolute;
      top: 26px;
      left: 50%;
      z-index: 72;
      width: min(1500px, calc(100vw - 64px));
      padding: 5px 14px;
      margin-bottom: 2px;
      border-radius: 24px;
      background: linear-gradient(180deg, rgba(255,255,255,0.26), rgba(255,255,255,0.12));
      border: 1px solid rgba(255,255,255,0.34);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      box-shadow: 0 8px 20px rgba(17, 43, 80, 0.04);
      overflow: hidden;
      transform: translateX(-50%);
      transition: opacity .28s ease, transform .28s ease, max-height .28s ease, margin-bottom .28s ease, padding .28s ease;
      max-height: 120px;
    }

    body.scrolled .utility-bar {
      opacity: 0;
      transform: translate(-50%, -14px);
      max-height: 0;
      margin-bottom: 0;
      padding-top: 0;
      padding-bottom: 0;
      pointer-events: none;
    }

    .utility-group {
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
    }

    .utility-link,
    .utility-btn {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      min-height: 36px;
      padding: 5px 13px;
      border-radius: 16px;
      border: 1px solid rgba(17, 55, 98, 0.08);
      background: rgba(255,255,255,0.38);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      font-size: 0.97rem;
      font-weight: 700;
      white-space: nowrap;
    }

    .utility-btn.primary {
      color: #fff;
      border-color: rgba(0,149,218,0.14);
      background: linear-gradient(135deg, #18aee4, #0b5fa8);
      box-shadow: 0 14px 28px rgba(0,149,218,0.22);
    }

    .icon-box {
      display: inline-grid;
      place-items: center;
      width: 28px;
      height: 28px;
      border-radius: 12px;
      background: linear-gradient(180deg, #f7fbff, #ecf3fb);
      color: var(--navy);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.94);
      flex-shrink: 0;
    }

    .header {
      position: relative;
      z-index: 10;
      padding-top: 0;
      transition: transform .28s ease, filter .28s ease;
    }

    .header-inner {
      position: relative;
    }

    .nav-stack {
      position: absolute;
      top: 88px;
      left: 50%;
      z-index: 80;
      width: min(1500px, calc(100vw - 64px));
      max-width: calc(100vw - 28px);
      transform: translateX(-50%);
      transition: top .28s ease, transform .32s cubic-bezier(.2,.8,.2,1);
    }

    body.scrolled .nav-stack {
      position: fixed;
      top: 24px;
      left: 50%;
      width: var(--container);
      max-width: calc(100vw - 28px);
      transform: translateX(-50%);
      z-index: 80;
    }

    .desktop-nav {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      width: 100%;
      max-width: 100%;
      min-height: 92px;
      transition: min-height .28s ease, transform .32s cubic-bezier(.2,.8,.2,1), filter .28s ease;
    }

    body.scrolled .desktop-nav {
      filter: saturate(1.04);
    }

    .nav-wing {
      width: calc(50% - 92px);
      min-width: 0;
      min-height: 58px;
      display: flex;
      align-items: center;
      background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.8));
      border: 1px solid rgba(255,255,255,0.96);
      box-shadow: var(--shadow);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      position: relative;
      z-index: 1;
      border-radius: 34px;
      transition: min-height .28s ease, box-shadow .28s ease, background .28s ease, border-color .28s ease, transform .28s ease;
    }

    .nav-wing.left {
      justify-content: flex-start;
      padding: 0 48px 0 14px;
    }

    .nav-wing.right {
      justify-content: flex-end;
      padding: 0 14px 0 48px;
    }

    .nav-list {
      display: flex;
      align-items: center;
      gap: 3px;
      list-style: none;
      padding: 0;
      margin: 0;
      flex-wrap: nowrap;
      width: max-content;
      flex: 0 0 auto;
      min-width: 0;
    }

    .nav-item {
      position: relative;
      flex: 0 0 auto;
    }

    .nav-link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 5px 7px;
      border-radius: 16px;
      border: 1px solid transparent;
      background: transparent;
      white-space: nowrap;
      cursor: pointer;
      font-weight: 700;
      overflow: hidden;
      transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease;
    }

    .nav-link:hover,
    .nav-item.open .nav-link {
      background: rgba(255,255,255,0.8);
      border-color: rgba(255,255,255,0.96);
      box-shadow: 0 12px 24px rgba(17, 43, 80, 0.08);
      transform: translateY(-1px);
    }

    .nav-label {
      font-size: 0.78rem;
      letter-spacing: 0;
    }

    .caret {
      width: 10px;
      height: 10px;
      border-right: 2px solid currentColor;
      border-bottom: 2px solid currentColor;
      transform: rotate(45deg);
      opacity: 0.62;
      flex-shrink: 0;
      transition: transform .18s ease, opacity .18s ease;
    }

    .nav-item.open .caret {
      transform: rotate(225deg);
      opacity: 0.9;
    }

    .brand-center {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: var(--logo-slot);
      height: var(--logo-slot);
      display: grid;
      place-items: center;
      z-index: 3;
      border-radius: 999px;
      background:
        radial-gradient(circle at 48% 34%, rgba(255,255,255,0.98), rgba(239,248,255,0.86) 58%, rgba(217,238,250,0.72)),
        linear-gradient(180deg, rgba(255,255,255,0.96), rgba(232,244,252,0.78));
      border: 1px solid rgba(255,255,255,0.94);
      box-shadow:
        0 18px 42px rgba(5, 45, 86, 0.18),
        0 0 0 8px rgba(255,255,255,0.34),
        inset 0 1px 0 rgba(255,255,255,0.96);
      transition: width .28s ease, height .28s ease, box-shadow .28s ease, transform .28s ease;
    }

    .brand-center::before,
    .brand-center::after {
      content: "";
      position: absolute;
      pointer-events: none;
    }

    .brand-center::before {
      inset: -12px;
      border-radius: 999px;
      background:
        radial-gradient(circle, rgba(0,149,218,0.2), transparent 62%);
      filter: blur(14px);
      opacity: 0.78;
      transition: opacity .28s ease, transform .28s ease;
    }

    .brand-center::after {
      inset: 9px;
      border-radius: 999px;
      border: 1px solid rgba(9, 63, 111, 0.14);
      background: transparent;
      opacity: 1;
      transform: none;
      animation: none;
      mix-blend-mode: normal;
    }

    .brand-center img {
      position: relative;
      z-index: 1;
      width: var(--logo-size);
      max-height: var(--logo-size);
      object-fit: contain;
      filter:
        drop-shadow(0 9px 14px rgba(8,32,57,0.18))
        drop-shadow(0 0 10px rgba(0,149,218,0.1));
      animation: none;
      transition: width .28s ease, filter .28s ease, transform .28s ease;
    }

    .brand-center:hover::before {
      opacity: 1;
      transform: scale(1.05);
    }

    .brand-center:hover img {
      filter:
        drop-shadow(0 12px 20px rgba(8,32,57,0.2))
        drop-shadow(0 0 12px rgba(0,149,218,0.14));
      transform: translateY(-1px) scale(1.015);
    }

    body.scrolled {
      --logo-size: 84px;
      --logo-slot: 104px;
    }

    body.scrolled .desktop-nav {
      min-height: 80px;
    }

    body.scrolled .nav-wing {
      min-height: 52px;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.94), rgba(255,255,255,0.76)),
        radial-gradient(circle at 50% 0%, rgba(0,149,218,0.08), transparent 38%);
      border-color: rgba(255,255,255,0.9);
      box-shadow:
        0 18px 40px rgba(17, 43, 80, 0.14),
        0 0 0 1px rgba(255,255,255,0.36) inset;
      transform: translateY(-1px);
    }

    body.scrolled .header {
      filter: drop-shadow(0 12px 28px rgba(17, 43, 80, 0.1));
    }

    body.scrolled .brand-center {
      transform: translate(-50%, -50%) scale(.92);
      box-shadow:
        0 14px 34px rgba(5, 45, 86, 0.16),
        0 0 0 6px rgba(255,255,255,0.28),
        inset 0 1px 0 rgba(255,255,255,0.96);
    }

    body.scrolled .brand-center::before {
      opacity: .82;
      filter: blur(15px);
    }

    body.scrolled .brand-center img {
      filter:
        drop-shadow(0 8px 14px rgba(8,32,57,0.16))
        drop-shadow(0 0 10px rgba(0,149,218,0.1));
    }

    .dropdown-host {
      position: relative;
      margin-top: 0;
      min-height: 0;
      z-index: 9;
      transition: margin-top .28s ease;
    }

    body.scrolled .dropdown-host {
      margin-top: -4px;
    }

    .mega-panel {
      position: absolute;
      inset: 0;
      opacity: 0;
      pointer-events: none;
      transform: translateY(16px) scale(0.985);
      transform-origin: top center;
      transition: opacity .24s ease, transform .24s ease;
    }

    .mega-panel.active {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0) scale(1);
    }

    .mega-card {
      display: grid;
      grid-template-columns: 360px minmax(0, 1fr);
      gap: 24px;
      padding: 22px;
      border-radius: 34px;
      background: linear-gradient(180deg, rgba(250,252,255,0.98), rgba(244,248,254,0.96));
      border: 1px solid rgba(255,255,255,0.98);
      box-shadow:
        0 24px 44px rgba(17, 43, 80, 0.12),
        inset 0 1px 0 rgba(255,255,255,0.96),
        inset 0 -1px 0 rgba(166, 190, 219, 0.12);
      backdrop-filter: blur(22px);
      -webkit-backdrop-filter: blur(22px);
      position: relative;
      overflow: hidden;
    }

    .mega-card::before {
      content: "";
      position: absolute;
      inset: 0 0 auto 0;
      height: 72px;
      background: linear-gradient(180deg, rgba(255,255,255,0.36), rgba(255,255,255,0));
      pointer-events: none;
    }

    .mega-card::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.56);
      pointer-events: none;
    }

    .mega-card .panel-link {
      opacity: 0;
      transform: translateY(12px);
    }

    .mega-panel.active .panel-link {
      animation: panelItemIn .36s ease forwards;
    }

    .mega-panel.active .panel-link:nth-child(1) { animation-delay: .04s; }
    .mega-panel.active .panel-link:nth-child(2) { animation-delay: .08s; }
    .mega-panel.active .panel-link:nth-child(3) { animation-delay: .12s; }
    .mega-panel.active .panel-link:nth-child(4) { animation-delay: .16s; }
    .mega-panel.active .panel-link:nth-child(5) { animation-delay: .20s; }
    .mega-panel.active .panel-link:nth-child(6) { animation-delay: .24s; }
    .mega-panel.active .panel-link:nth-child(7) { animation-delay: .28s; }
    .mega-panel.active .panel-link:nth-child(8) { animation-delay: .32s; }
    .mega-panel.active .panel-link:nth-child(9) { animation-delay: .36s; }

    .mega-side {
      position: relative;
      overflow: hidden;
      min-height: 348px;
      padding: 24px;
      border-radius: 30px;
      color: #fff;
      background:
        radial-gradient(circle at top left, rgba(255,255,255,0.12), transparent 34%),
        linear-gradient(180deg, rgba(18,66,118,0.46), rgba(40,106,171,0.58));
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.14),
        inset 0 -40px 90px rgba(8, 33, 67, 0.2);
      transition: background-image .24s ease, box-shadow .24s ease, transform .24s ease;
    }

    .mega-side::after {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(180deg, rgba(8, 28, 58, 0.02), rgba(8, 28, 58, 0.12)),
        radial-gradient(circle at bottom left, rgba(255,255,255,0.06), transparent 34%);
      pointer-events: none;
    }

    .mega-badge {
      display: inline-flex;
      padding: 8px 13px;
      border-radius: 999px;
      background: rgba(255,255,255,0.14);
      border: 1px solid rgba(255,255,255,0.12);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
      font-size: 0.76rem;
      font-weight: 800;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      margin-bottom: 16px;
      position: relative;
      z-index: 1;
    }

    .mega-side h3 {
      margin: 0 0 12px;
      font-size: 1.88rem;
      line-height: 1.04;
      letter-spacing: 0;
      position: relative;
      z-index: 1;
      text-shadow: 0 12px 30px rgba(5, 25, 52, 0.34);
    }

    .mega-side p {
      margin: 0;
      color: rgba(235,242,250,0.92);
      font-size: 0.95rem;
      line-height: 1.72;
      max-width: 28ch;
      position: relative;
      z-index: 1;
      text-shadow: 0 10px 24px rgba(5, 25, 52, 0.3);
    }

    .mega-main h4 {
      margin: 2px 0 8px;
      font-size: 1.64rem;
      letter-spacing: 0;
      color: #21314f;
    }

    .mega-main > p {
      margin: 0 0 18px;
      color: #7287a5;
      font-size: 0.94rem;
      line-height: 1.68;
    }

    .panel-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
    }

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

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

    .panel-link {
      display: grid;
      grid-template-columns: 48px minmax(0, 1fr);
      gap: 12px;
      align-items: start;
      min-height: 96px;
      padding: 16px 16px 15px;
      border-radius: 22px;
      background: linear-gradient(180deg, rgba(255,255,255,0.99), rgba(248,251,255,0.97));
      border: 1px solid rgba(33, 78, 130, 0.1);
      box-shadow:
        0 10px 20px rgba(17, 43, 80, 0.06),
        inset 0 1px 0 rgba(255,255,255,0.94),
        inset 0 -1px 0 rgba(180, 200, 226, 0.14);
      transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
      overflow: hidden;
      position: relative;
    }

    .panel-link::before {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at top left, rgba(103, 151, 208, 0.08), transparent 34%);
      opacity: 0;
      transition: opacity .18s ease;
      pointer-events: none;
    }

    .panel-link:hover {
      transform: translateY(-4px);
      box-shadow:
        0 18px 30px rgba(17, 43, 80, 0.12),
        0 0 0 1px rgba(91, 136, 190, 0.06),
        inset 0 1px 0 rgba(255,255,255,0.98);
      border-color: rgba(68, 114, 167, 0.24);
      background: linear-gradient(180deg, rgba(255,255,255,1), rgba(241,247,255,0.98));
    }

    .panel-link:hover::before {
      opacity: 1;
    }

    .panel-link strong {
      display: block;
      margin-bottom: 4px;
      font-size: 0.97rem;
      line-height: 1.28;
      word-break: break-word;
      color: #546f95;
      transition: color .18s ease;
    }

    .panel-link span:last-child {
      display: block;
      color: #7389a8;
      line-height: 1.56;
      font-size: 0.9rem;
      word-break: break-word;
    }

    .panel-link:hover strong {
      color: #234a80;
    }

    .panel-arrow {
      display: inline-grid;
      place-items: center;
      width: 38px;
      height: 38px;
      border-radius: 14px;
      background: linear-gradient(180deg, #f1f6fd, #e5eef9);
      color: #5a7ca6;
      flex-shrink: 0;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.98);
      transition: transform .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
    }

    .panel-arrow::before {
      content: "";
      width: 9px;
      height: 9px;
      border-right: 2px solid currentColor;
      border-bottom: 2px solid currentColor;
      transform: rotate(-45deg);
    }

    .panel-link:hover .panel-arrow {
      transform: translateX(3px);
      color: #2c5f9c;
      background: linear-gradient(180deg, #f7fbff, #e8f1fd);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,1),
        0 8px 18px rgba(62, 115, 179, 0.12);
    }

    .drawer-head {
      transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
    }

    .drawer-group.open .drawer-head {
      background: rgba(236,243,252,0.98);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.94);
    }

    .drawer-link {
      transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
    }

      .drawer-link:hover {
        transform: translateY(-2px);
        border-color: rgba(40, 92, 149, 0.16);
        box-shadow: 0 12px 24px rgba(17, 43, 80, 0.08);
        background: linear-gradient(180deg, rgba(255,255,255,1), rgba(243,248,255,0.98));
      }

      .drawer-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        margin-top: 16px;
        padding-top: 14px;
        border-top: 1px solid rgba(15,67,121,0.08);
      }

      .drawer-action {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        min-height: 52px;
        padding: 12px 16px;
        border-radius: 18px;
        background: rgba(241,246,252,0.98);
        border: 1px solid rgba(15,67,121,0.08);
        font-weight: 800;
      }

      .drawer-action.primary {
        color: #fff;
        background: linear-gradient(135deg, #18aee4, #0b5fa8);
        border-color: rgba(0,149,218,0.18);
        box-shadow: 0 12px 24px rgba(0,149,218,0.2);
      }

      .drawer-group[data-mobile-order="home"] { order: 1; }
      .drawer-group[data-mobile-order="corporate"] { order: 2; }
      .drawer-group[data-mobile-order="services"] { order: 3; }
      .drawer-group[data-mobile-order="marketing"] { order: 4; }
      .drawer-group[data-mobile-order="ecommerce"] { order: 5; }
      .drawer-group[data-mobile-order="it"] { order: 6; }
      .drawer-group[data-mobile-order="solutions"] { order: 7; }
      .drawer-group[data-mobile-order="contact"] { order: 8; }
      .drawer-group[data-mobile-order="language"] { order: 9; }
      .drawer-actions { order: 10; }

    @keyframes logoFloat {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-4px); }
    }

    @keyframes logoShine {
      0%, 18% {
        transform: translateX(-95%);
        opacity: 0;
      }
      32% {
        opacity: 0.72;
      }
      52%, 100% {
        transform: translateX(95%);
        opacity: 0;
      }
    }

    @keyframes panelItemIn {
      from {
        opacity: 0;
        transform: translateY(12px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes heroProgress {
      from { transform: scaleX(0); }
      to { transform: scaleX(1); }
    }

    @keyframes chartPulse {
      0%, 100% {
        opacity: .66;
        transform: translateY(2px);
      }
      50% {
        opacity: 1;
        transform: translateY(-2px);
      }
    }

    @keyframes chartRise {
      0%, 100% {
        opacity: .58;
        transform: scaleY(.86);
      }
      50% {
        opacity: .9;
        transform: scaleY(1);
      }
    }

    @keyframes softMetric {
      0%, 100% { transform: scaleX(.92); }
      50% { transform: scaleX(1); }
    }

    @keyframes deliveryGlow {
      0%, 100% { opacity: .46; transform: scaleX(.72); transform-origin: left; }
      50% { opacity: 1; transform: scaleX(1); transform-origin: left; }
    }

    .hero {
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
      gap: 34px;
      align-items: center;
      margin-top: 18px;
      width: 100%;
      max-width: 100%;
      min-height: 430px;
      border-radius: 42px;
      padding: clamp(30px, 3.2vw, 48px);
      background:
        radial-gradient(circle at 82% 18%, rgba(0,149,218,0.28), transparent 22%),
        radial-gradient(circle at 10% 0%, rgba(255,255,255,0.13), transparent 26%),
        linear-gradient(135deg, #101827 0%, #13233a 43%, #184e86 100%);
      box-shadow:
        0 28px 62px rgba(17, 43, 80, 0.16),
        inset 0 1px 0 rgba(255,255,255,0.18);
      color: #fff;
      overflow: hidden;
      isolation: isolate;
    }

    .hero[data-tone="software"] {
      background:
        radial-gradient(circle at 82% 18%, rgba(0,149,218,0.28), transparent 22%),
        radial-gradient(circle at 10% 0%, rgba(255,255,255,0.13), transparent 26%),
        linear-gradient(135deg, #101827 0%, #13233a 43%, #184e86 100%);
    }

    .hero[data-tone="commerce"] {
      background:
        radial-gradient(circle at 82% 18%, rgba(0,149,218,0.34), transparent 23%),
        radial-gradient(circle at 8% 0%, rgba(255,255,255,0.12), transparent 24%),
        linear-gradient(135deg, #121725 0%, #24304b 45%, #8f4b17 100%);
    }

    .hero[data-tone="seo"] {
      background:
        radial-gradient(circle at 82% 18%, rgba(0,149,218,0.2), transparent 22%),
        radial-gradient(circle at 16% 4%, rgba(95,174,255,0.18), transparent 28%),
        linear-gradient(135deg, #0f172a 0%, #14315c 45%, #0f6b78 100%);
    }

    .hero[data-tone="brand"] {
      background:
        radial-gradient(circle at 82% 18%, rgba(0,149,218,0.26), transparent 22%),
        radial-gradient(circle at 18% 0%, rgba(255,255,255,0.14), transparent 25%),
        linear-gradient(135deg, #171923 0%, #31213a 46%, #184e86 100%);
    }

    .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px),
        linear-gradient(0deg, rgba(255,255,255,0.035) 1px, transparent 1px);
      background-size: 58px 58px;
      mask-image: linear-gradient(90deg, rgba(0,0,0,0.72), transparent 72%);
      pointer-events: none;
      z-index: -1;
    }

    .hero-copy {
      position: relative;
      z-index: 1;
      min-width: 0;
      transition: opacity .28s ease, transform .28s ease;
    }

    .hero.is-changing .hero-copy {
      opacity: .24;
      transform: translateY(8px);
    }

    .hero.is-changing .dashboard-shell,
    .hero.is-changing .floating-card {
      opacity: .34;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 18px;
      padding: 9px 13px;
      border-radius: 999px;
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.13);
      color: rgba(255,255,255,0.9);
      font-size: .78rem;
      font-weight: 900;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .eyebrow::before {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: var(--brand);
      box-shadow: 0 0 0 7px rgba(0,149,218,0.14);
    }

    .hero-title,
    .hero-title span,
    .hero-text,
    .eyebrow,
    .metric strong,
    .metric span,
    .glass-card h4,
    .glass-card p,
    .dashboard-pill,
    .floating-card strong,
    .floating-card span {
      transition: opacity .2s ease, transform .2s ease;
    }

    .hero :is(h1, .hero-title) {
      font-weight: 700;
      margin: 0 0 22px;
      max-width: 11.5ch;
      min-height: 1.84em;
      font-size: clamp(2.8rem, 5.4vw, 5.2rem);
      line-height: 0.92;
      letter-spacing: 0;
    }

    .hero :is(h1, .hero-title) span {
      color: #18aee4;
      text-shadow: 0 12px 34px rgba(0,149,218,0.2);
    }

    .hero p {
      margin: 0;
      max-width: 58ch;
      color: rgba(235,242,250,0.84);
      line-height: 1.72;
      font-size: .98rem;
      min-height: 5.15em;
    }

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

    .hero-controls {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: 18px;
    }

    .hero-dot {
      width: 34px;
      height: 8px;
      border: 0;
      border-radius: 999px;
      background: rgba(255,255,255,0.18);
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }

    .hero-dot::before {
      content: "";
      position: absolute;
      inset: 0;
      width: 0;
      border-radius: inherit;
      background: linear-gradient(90deg, #18aee4, #e6f7ff);
      transition: width .24s ease;
    }

    .hero-dot.active::before {
      width: 100%;
    }

    .hero-progress {
      width: min(320px, 100%);
      height: 3px;
      margin-top: 14px;
      overflow: hidden;
      border-radius: 999px;
      background: rgba(255,255,255,0.13);
    }

    .hero-progress span {
      display: block;
      width: 100%;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, #18aee4, #e6f7ff);
      transform-origin: left center;
      animation: heroProgress 6.2s linear infinite;
    }

    .hero.paused .hero-progress span {
      animation-play-state: paused;
    }

    .hero-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      min-height: 54px;
      padding: 14px 19px;
      border-radius: 18px;
      border: 1px solid rgba(255,255,255,0.12);
      color: #fff;
      background: rgba(255,255,255,0.09);
      font-weight: 900;
      cursor: pointer;
      overflow: hidden;
      isolation: isolate;
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
    }

    .hero-btn:hover {
      transform: translateY(-2px);
      background: rgba(255,255,255,0.14);
      box-shadow: 0 16px 30px rgba(5, 20, 42, 0.22);
    }

    .hero-btn.primary {
      background: linear-gradient(135deg, #18aee4, #0b5fa8);
      border-color: rgba(0,149,218,0.26);
      box-shadow: 0 18px 34px rgba(0,149,218,0.24);
    }

    .hero-metrics {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
      max-width: 620px;
      margin-top: 24px;
    }

    .metric {
      padding: 15px;
      border-radius: 20px;
      background: rgba(255,255,255,0.07);
      border: 1px solid rgba(255,255,255,0.1);
    }

    .metric strong {
      display: block;
      font-size: 1.44rem;
      letter-spacing: 0;
      color: #fff;
    }

    .metric span {
      display: block;
      margin-top: 3px;
      color: rgba(235,242,250,0.68);
      font-size: .82rem;
      line-height: 1.4;
    }

    .hero-visual {
      position: relative;
      min-width: 0;
      max-width: 100%;
      min-height: 430px;
      perspective: 1100px;
    }

    .dashboard-shell {
      position: absolute;
      inset: 18px 8px 12px;
      max-width: calc(100% - 16px);
      border-radius: 30px;
      padding: 17px;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.96), rgba(241,246,252,0.82));
      border: 1px solid rgba(255,255,255,0.9);
      box-shadow:
        0 30px 70px rgba(5, 18, 37, 0.24),
        inset 0 1px 0 rgba(255,255,255,0.96);
      transform: rotateY(-10deg) rotateX(6deg);
      transform-origin: center;
      overflow: hidden;
      transition: opacity .28s ease, transform .28s ease;
    }

    .dashboard-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 18px;
    }

    .traffic-dots {
      display: flex;
      gap: 7px;
    }

    .traffic-dots span {
      width: 10px;
      height: 10px;
      border-radius: 999px;
      background: #d9e5f2;
    }

    .traffic-dots span:first-child { background: #0095da; }

    .dashboard-pill {
      padding: 8px 11px;
      border-radius: 999px;
      color: #184e86;
      background: #edf5ff;
      font-size: .76rem;
      font-weight: 900;
    }

    .dashboard-grid {
      display: grid;
      grid-template-columns: 1.05fr .95fr;
      gap: 14px;
    }

    .dashboard-insights {
      display: grid;
      grid-template-columns: .8fr 1.2fr;
      gap: 14px;
      margin-top: 14px;
    }

    .glass-card {
      border-radius: 24px;
      background: rgba(255,255,255,0.78);
      border: 1px solid rgba(17,55,98,0.08);
      box-shadow: 0 16px 34px rgba(17,43,80,0.08);
      padding: 18px;
    }

    .glass-card.score-card {
      display: grid;
      place-items: center;
      min-height: 132px;
      padding: 16px;
      background:
        radial-gradient(circle at 50% 35%, rgba(0,149,218,0.12), transparent 44%),
        rgba(255,255,255,0.82);
    }

    .score-ring {
      position: relative;
      display: grid;
      place-items: center;
      width: 94px;
      height: 94px;
      border-radius: 50%;
      background:
        conic-gradient(from 215deg, #0095da 0 82%, rgba(27,76,128,0.12) 82% 100%),
        linear-gradient(180deg, #fff, #edf5ff);
      box-shadow:
        inset 0 0 0 9px rgba(255,255,255,0.9),
        0 14px 26px rgba(17,43,80,0.12);
    }

    .score-ring::after {
      content: "";
      position: absolute;
      inset: 12px;
      border-radius: inherit;
      background: linear-gradient(180deg, #fff, #f2f7fd);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.96);
    }

    .score-ring strong {
      position: relative;
      z-index: 1;
      color: #17243a;
      font-size: 1.5rem;
      letter-spacing: 0;
    }

    .score-ring span {
      position: absolute;
      z-index: 1;
      bottom: 22px;
      color: #6b83a3;
      font-size: .62rem;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: .08em;
    }

    .mini-metrics {
      display: grid;
      gap: 10px;
    }

    .mini-metric {
      display: grid;
      gap: 6px;
      color: #536c90;
      font-size: .78rem;
      font-weight: 800;
    }

    .mini-metric span:first-child {
      display: flex;
      justify-content: space-between;
      gap: 12px;
    }

    .mini-metric b {
      color: #17243a;
    }

    .metric-bar {
      height: 7px;
      border-radius: 999px;
      overflow: hidden;
      background: rgba(24,78,134,0.09);
    }

    .metric-bar i {
      display: block;
      height: 100%;
      width: var(--w, 72%);
      border-radius: inherit;
      background: linear-gradient(90deg, #0095da, #69d2ff);
      box-shadow: 0 0 18px rgba(0,149,218,0.26);
      transform-origin: left;
      animation: softMetric 2.8s ease-in-out infinite;
    }

    .delivery-line {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
      margin-top: 14px;
    }

    .delivery-step {
      position: relative;
      min-height: 54px;
      padding: 10px;
      border-radius: 16px;
      color: #536c90;
      background: rgba(245,249,254,0.9);
      border: 1px solid rgba(17,55,98,0.06);
      font-size: .68rem;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: .04em;
      overflow: hidden;
    }

    .delivery-step::before {
      content: "";
      display: block;
      width: 9px;
      height: 9px;
      margin-bottom: 7px;
      border-radius: 999px;
      background: #0095da;
      box-shadow: 0 0 0 6px rgba(0,149,218,0.1);
    }

    .delivery-step::after {
      content: "";
      position: absolute;
      inset: auto 10px 8px;
      height: 2px;
      border-radius: 999px;
      background: linear-gradient(90deg, rgba(0,149,218,0.8), rgba(24,78,134,0.12));
      animation: deliveryGlow 2.9s ease-in-out infinite;
    }

    .glass-card.dark {
      min-height: 150px;
      color: #fff;
      background:
        radial-gradient(circle at 84% 0%, rgba(0,149,218,0.38), transparent 34%),
        linear-gradient(135deg, #14233a, #184e86);
    }

    .glass-card h4 {
      margin: 0 0 8px;
      font-size: 1rem;
      letter-spacing: 0;
    }

    .glass-card p {
      margin: 0;
      color: rgba(235,242,250,0.74);
      font-size: .82rem;
      line-height: 1.6;
    }

    .chart-line {
      position: relative;
      height: 76px;
      margin-top: 14px;
      border-radius: 18px;
      background:
        linear-gradient(90deg, rgba(255,255,255,0.07) 1px, transparent 1px),
        linear-gradient(0deg, rgba(255,255,255,0.07) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.04));
      background-size: 28px 28px, 28px 28px, auto;
      overflow: hidden;
    }

    .chart-line::before {
      content: "";
      position: absolute;
      inset: 16px 12px 18px;
      background: linear-gradient(135deg, transparent 0 18%, rgba(255,255,255,0.42) 19% 22%, transparent 23% 42%, rgba(255,255,255,0.62) 43% 47%, transparent 48% 66%, rgba(255,255,255,0.48) 67% 71%, transparent 72% 100%);
      filter: drop-shadow(0 8px 12px rgba(255,255,255,0.14));
      animation: chartPulse 2.8s ease-in-out infinite;
    }

    .chart-line::after {
      content: "";
      position: absolute;
      left: 10%;
      right: 8%;
      bottom: 18px;
      height: 42%;
      background: linear-gradient(180deg, rgba(0,149,218,0.22), transparent);
      clip-path: polygon(0 72%, 22% 48%, 42% 62%, 64% 22%, 82% 36%, 100% 10%, 100% 100%, 0 100%);
      animation: chartRise 3.4s ease-in-out infinite;
    }

    .status-list {
      display: grid;
      gap: 10px;
    }

    .status-item {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      padding: 11px;
      border-radius: 16px;
      background: #f5f9fe;
      color: #536c90;
      font-size: .82rem;
      font-weight: 800;
    }

    .status-item strong {
      color: #1d2b44;
    }

    .floating-card {
      position: absolute;
      right: -4px;
      bottom: 8px;
      width: 218px;
      padding: 15px;
      border-radius: 24px;
      color: #fff;
      background: linear-gradient(135deg, rgba(0,149,218,0.96), rgba(0,95,168,0.94));
      box-shadow: 0 24px 46px rgba(0,149,218,0.26);
      transform: rotateY(-10deg) rotateX(6deg) translateZ(38px);
      transition: opacity .28s ease, transform .28s ease;
    }

    .floating-card strong {
      display: block;
      margin-bottom: 5px;
      font-size: 1.35rem;
      letter-spacing: 0;
    }

    .floating-card span {
      color: rgba(255,255,255,0.82);
      font-size: .82rem;
      line-height: 1.5;
    }

    .hero.hero-photo {
      display: block;
      width: 100vw;
      max-width: 100vw;
      height: clamp(760px, 88svh, 1280px);
      min-height: clamp(760px, 88svh, 1280px);
      margin: 0 0 0 calc(50% - 50vw);
      padding: 0;
      border-radius: 0 0 36px 36px;
      background-color: #082039;
      background-image: var(--hero-image);
      background-position: var(--hero-position, center);
      background-size: cover;
      background-repeat: no-repeat;
      box-shadow:
        0 30px 70px rgba(5, 45, 86, 0.18),
        inset 0 1px 0 rgba(255,255,255,0.2);
      transition: background-image .45s ease, background-position .45s ease;
    }

    .hero-media-video {
      position: absolute;
      inset: 0;
      z-index: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      opacity: 0;
      pointer-events: none;
      transform: scale(1.01);
      transition: opacity .45s ease;
    }

    .hero-mobile-media-image {
      display: none;
    }

    .hero.hero-photo.has-video .hero-media-video {
      opacity: 1;
    }

    .hero.hero-photo::before {
      z-index: 1;
      background: linear-gradient(90deg, rgba(4,18,42,0.92) 0%, rgba(8,43,88,0.78) 34%, rgba(8,43,88,0.36) 60%, rgba(8,43,88,0.08) 100%);
      background-size: auto;
      mask-image: none;
      pointer-events: none;
    }

    .hero.hero-photo::after {
      content: "";
      position: absolute;
      inset: 0 auto 0 0;
      width: min(980px, 72%);
      z-index: 2;
      background:
        radial-gradient(circle at 22% 48%, rgba(0,149,218,0.22), transparent 44%),
        linear-gradient(90deg, rgba(3,22,48,0.84), rgba(9,62,113,0.62) 62%, transparent 100%);
      backdrop-filter: blur(5px);
      -webkit-backdrop-filter: blur(5px);
      mask-image: linear-gradient(90deg, #000 0%, #000 62%, transparent 100%);
      pointer-events: none;
    }

    /* Per-slide visual treatment: preserve copy contrast without hiding branded artwork. */
    .hero.hero-photo.hero-visual-soft::after {
      background: linear-gradient(90deg, rgba(3,22,48,0.56) 0%, rgba(9,62,113,0.28) 46%, rgba(9,62,113,0.08) 65%, transparent 84%);
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }

    .hero.hero-photo.hero-visual-clear::before {
      background: linear-gradient(90deg, rgba(4,18,42,0.22) 0%, rgba(8,43,88,0.1) 42%, rgba(8,43,88,0.02) 72%, transparent 100%);
    }

    .hero.hero-photo.hero-visual-clear::after {
      display: none;
    }

    .hero.hero-photo .hero-copy {
      position: relative;
      z-index: 3;
      width: min(680px, 50vw);
      min-height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin-left: var(--hero-content-left);
      padding: clamp(174px, 15vw, 218px) 0 clamp(78px, 7vw, 112px);
    }

    .hero.hero-photo.is-changing .hero-copy {
      opacity: .18;
      transform: translateX(-10px);
    }

    .hero.hero-photo .eyebrow,
    .hero.hero-photo .hero-metrics,
    .hero.hero-photo .hero-controls,
    .hero.hero-photo .hero-progress {
      display: none;
    }

    .hero.hero-photo :is(h1, .hero-title) {
      max-width: 13.5ch;
      min-height: 0;
      margin-bottom: 20px;
      font-size: clamp(2.85rem, 4.25vw, 4.85rem);
      line-height: .98;
      text-wrap: balance;
      text-shadow: 0 18px 38px rgba(4,18,42,0.34);
    }

    .hero.hero-photo :is(h1, .hero-title) span {
      color: #fff;
      text-shadow: inherit;
    }

    .hero.hero-photo p {
      max-width: 47ch;
      min-height: 0;
      color: rgba(255,255,255,0.86);
      font-size: clamp(1rem, 1vw, 1.06rem);
      line-height: 1.68;
      text-shadow: 0 10px 24px rgba(4,18,42,0.28);
    }

    .hero.hero-photo .hero-actions {
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
      margin-top: 28px;
    }

    .hero.hero-photo .hero-btn {
      min-width: 186px;
      border-radius: 16px;
      border-color: rgba(255,255,255,0.68);
      background: rgba(255,255,255,0.06);
    }

    .hero.hero-photo .hero-btn::after {
      display: none;
    }

    .hero.hero-photo .hero-btn.primary {
      background: rgba(255,255,255,0.12);
      border-color: rgba(255,255,255,0.86);
      box-shadow: none;
    }

    .hero.hero-photo .hero-btn.primary:hover {
      background: #fff;
      color: var(--navy);
    }

    .hero.hero-photo .hero-metrics {
      max-width: 660px;
      gap: 8px;
      margin-top: 26px;
    }

    .hero.hero-photo .metric {
      padding: 12px 13px;
      border-radius: 15px;
      background: rgba(255,255,255,0.1);
      border-color: rgba(255,255,255,0.18);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }

    .hero.hero-photo .metric strong {
      font-size: 1.18rem;
    }

    .hero.hero-photo .metric span {
      color: rgba(255,255,255,0.72);
    }

    .hero.hero-photo .hero-controls {
      position: absolute;
      left: 50%;
      bottom: 28px;
      z-index: 5;
      margin: 0;
      transform: translateX(-50%);
      padding: 8px 10px;
      border-radius: 999px;
      background: rgba(3, 13, 31, 0.22);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }

    .hero.hero-photo .hero-dot {
      width: 10px;
      height: 10px;
      background: rgba(255,255,255,0.72);
      box-shadow: 0 0 0 1px rgba(255,255,255,0.3);
    }

    .hero.hero-photo .hero-dot::before {
      width: 100%;
      opacity: 0;
      background: #18d6d2;
      box-shadow: 0 0 0 5px rgba(24,214,210,0.18);
      transition: opacity .24s ease;
    }

    .hero.hero-photo .hero-dot.active::before {
      opacity: 1;
    }

    .hero.hero-photo .hero-progress {
      position: absolute;
      left: 50%;
      bottom: 18px;
      z-index: 5;
      width: min(320px, calc(100% - 120px));
      margin: 0;
      transform: translateX(-50%);
      background: rgba(255,255,255,0.18);
    }

    .hero.hero-photo .hero-progress span {
      animation-duration: 10s;
    }

    .hero.hero-photo .hero-visual {
      display: none;
    }

    .hero-arrow {
      position: absolute;
      top: 50%;
      z-index: 6;
      width: 56px;
      height: 56px;
      display: grid;
      place-items: center;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,0.44);
      color: #fff;
      background: rgba(5, 24, 50, 0.28);
      box-shadow: 0 18px 34px rgba(4,18,42,0.2);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      transform: translateY(-50%);
      cursor: pointer;
      transition: transform .18s ease, background .18s ease, border-color .18s ease;
    }

    .hero-arrow:hover {
      transform: translateY(-50%) scale(1.05);
      background: rgba(255,255,255,0.16);
      border-color: rgba(255,255,255,0.78);
    }

    .hero-arrow svg {
      width: 28px;
      height: 28px;
      stroke: currentColor;
      stroke-width: 2;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .hero-arrow-prev {
      left: 22px;
    }

    .hero-arrow-next {
      right: 22px;
    }

    .section-block {
      margin-top: 24px;
      position: relative;
      width: 100%;
      max-width: 100%;
    }

    /* The first hero can follow an invisible in-page anchor; it must still begin flush with the viewport. */
    main > .about-section-anchor:first-child + .section-block,
    main > .section-block:first-child {
      margin-top: 0;
    }

    .section-head {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 24px;
      margin-bottom: 18px;
      padding: 0 8px;
    }

    .section-kicker {
      display: inline-flex;
      margin-bottom: 9px;
      color: var(--brand);
      font-size: .76rem;
      font-weight: 900;
      letter-spacing: .1em;
      text-transform: uppercase;
    }

    .section-head h2 {
      margin: 0;
      max-width: 780px;
      color: #17243a;
      font-size: clamp(2rem, 4vw, 4.2rem);
      line-height: .96;
      letter-spacing: 0;
    }

    .section-head p {
      margin: 0;
      max-width: 410px;
      color: #6e829f;
      line-height: 1.72;
      font-size: .96rem;
    }

    .home-service-carved {
      position: relative;
      margin-top: clamp(28px, 4vw, 56px);
      margin-bottom: clamp(28px, 4vw, 56px);
      padding: 0;
    }

    .home-service-carved-head {
      display: block;
      margin-bottom: clamp(18px, 2.4vw, 30px);
      padding: 0 8px;
    }

    .home-service-carved-head .section-kicker {
      margin: 0;
    }

    .home-service-carved-head h2 {
      margin: 10px 0 0;
      color: var(--deep);
      font-size: clamp(2rem, 4vw, 4.2rem);
      font-weight: 820;
      line-height: .96;
      letter-spacing: 0;
    }

    .home-service-carved-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: clamp(14px, 1.45vw, 20px);
    }

    .home-service-carved-card {
      --carve-size: clamp(118px, 9vw, 150px);
      position: relative;
      display: flex;
      align-items: center;
      min-height: clamp(128px, 8.9vw, 158px);
      padding: clamp(22px, 2vw, 28px);
      padding-right: clamp(132px, 11vw, 174px);
      overflow: hidden;
      isolation: isolate;
      border-radius: 8px 999px 999px 8px;
      color: #fff;
      background: transparent;
      text-decoration: none;
      transform: translateZ(0);
    }

    .home-service-carved-card::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      border-radius: inherit;
      background:
        linear-gradient(90deg, rgba(2, 30, 52, 0.96), rgba(4, 63, 98, 0.91) 66%, rgba(6, 82, 124, 0.96)),
        #063a5d;
      box-shadow: 0 20px 52px rgba(5, 45, 86, 0.12);
      pointer-events: none;
      transition: background 0.42s ease, filter 0.42s ease;
    }

    .home-service-carved-card::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 2;
      border-radius: inherit;
      background:
        linear-gradient(90deg, rgba(2, 28, 48, 0.82), rgba(2, 44, 72, 0.48) 48%, rgba(2, 44, 72, 0.7) 100%);
      pointer-events: none;
      transition: opacity 0.45s ease;
    }

    .home-service-carved-media {
      position: absolute;
      inset: 0;
      z-index: 1;
      display: block;
      overflow: hidden;
      border-radius: inherit;
      opacity: 0.42;
      pointer-events: none;
      transition: opacity 0.45s ease, transform 0.55s ease, filter 0.45s ease;
    }

    .home-service-carved-media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center right;
      filter: saturate(0.95) contrast(1.08);
      transform: scale(1.02);
      transition: transform 0.55s ease, filter 0.45s ease;
    }

    .home-service-carved-copy {
      position: relative;
      z-index: 4;
      display: grid;
      gap: 12px;
      max-width: 360px;
    }

    .home-service-carved-copy small {
      color: rgba(255, 255, 255, 0.66);
      font-size: 11px;
      font-weight: 850;
      letter-spacing: 0.17em;
      line-height: 1;
      text-transform: uppercase;
    }

    .home-service-carved-copy strong {
      color: #fff;
      font-size: clamp(21px, 1.7vw, 30px);
      font-weight: 820;
      letter-spacing: 0;
      line-height: 1.08;
    }

    .home-service-carved-copy::after {
      content: "";
      width: clamp(80px, 8vw, 132px);
      height: 1px;
      background: linear-gradient(90deg, #ffd400, rgba(0, 149, 218, 0.76), transparent);
      transform-origin: left;
      transform: scaleX(0.48);
      transition: transform 0.42s ease;
    }

    .home-service-carved-logo {
      position: absolute;
      top: 50%;
      right: 0;
      z-index: 3;
      display: block;
      width: var(--carve-size);
      aspect-ratio: 1;
      overflow: hidden;
      border-radius: 50%;
      transform: translate3d(0, -50%, 0);
      pointer-events: none;
      transition: transform 0.5s ease;
    }

    .home-service-carved-logo img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      opacity: 0.16;
      filter: saturate(0.72) contrast(0.92);
      mix-blend-mode: soft-light;
      transform: translateX(0) scale(1.03);
      transition: opacity 0.5s ease, transform 0.5s ease, filter 0.5s ease;
    }

    .home-service-carved-card:hover::before {
      background:
        linear-gradient(90deg, rgba(2, 30, 52, 0.98), rgba(4, 66, 104, 0.93) 66%, rgba(7, 91, 137, 0.98)),
        #063a5d;
      filter: saturate(1.04);
    }

    .home-service-carved-card:hover::after {
      opacity: 0.88;
    }

    .home-service-carved-card:hover .home-service-carved-media {
      opacity: 0.58;
      transform: scale(1.03);
      filter: saturate(1.05) contrast(1.08);
    }

    .home-service-carved-card:hover .home-service-carved-media img {
      transform: scale(1.06);
    }

    .home-service-carved-card:hover .home-service-carved-copy::after {
      transform: scaleX(0.9);
    }

    .home-service-carved-card:hover .home-service-carved-logo img {
      opacity: 0.2;
      filter: saturate(0.8) contrast(0.98);
      transform: translateX(0) scale(1.05);
    }

    .premium-actions-section {
      position: relative;
      margin-top: 22px;
      padding: clamp(26px, 3.5vw, 46px);
      border-radius: 38px;
      color: #fff;
      background:
        radial-gradient(circle at 8% 6%, rgba(0,149,218,0.3), transparent 30%),
        radial-gradient(circle at 88% 18%, rgba(194,138,24,0.18), transparent 28%),
        linear-gradient(135deg, #071522 0%, #0a2440 48%, #092038 100%);
      border: 1px solid rgba(255,255,255,0.13);
      box-shadow:
        0 30px 78px rgba(7,21,34,0.24),
        inset 0 1px 0 rgba(255,255,255,0.16);
      overflow: hidden;
      isolation: isolate;
    }

    .premium-actions-section::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -2;
      background-image:
        linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
      background-size: 34px 34px;
      mask-image: linear-gradient(180deg, rgba(0,0,0,0.72), transparent 78%);
    }

    .premium-actions-section::after {
      content: "";
      position: absolute;
      inset: auto 8% -130px 8%;
      z-index: -1;
      height: 220px;
      border-radius: 50%;
      background: rgba(0,149,218,0.18);
      filter: blur(48px);
      pointer-events: none;
    }

    .premium-actions-head {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 22px;
      margin-bottom: 22px;
      padding-inline: 2px;
    }

    .premium-actions-title {
      display: grid;
      gap: 9px;
    }

    .premium-actions-title .section-kicker {
      margin: 0;
      color: #72d8ff;
    }

    .premium-actions-title h2 {
      margin: 0;
      max-width: 560px;
      color: #fff;
      font-size: clamp(1.7rem, 2.45vw, 2.7rem);
      line-height: 1.02;
      letter-spacing: 0;
      text-shadow: 0 18px 40px rgba(0,0,0,0.24);
    }

    .premium-actions-stamp {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      min-height: 42px;
      padding: 0 16px;
      border-radius: 999px;
      color: rgba(255,255,255,0.82);
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.13);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
      font-size: .78rem;
      font-weight: 900;
      letter-spacing: .08em;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .premium-actions-stamp::before {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: #18d6d2;
      box-shadow: 0 0 0 6px rgba(24,214,210,0.13);
    }

    .premium-actions-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 14px;
    }

    .premium-action-card {
      position: relative;
      min-width: 0;
      min-height: 188px;
      display: grid;
      grid-template-rows: auto 1fr auto;
      gap: 18px;
      padding: 19px;
      border-radius: 27px;
      overflow: hidden;
      color: #fff;
      text-decoration: none;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.065));
      border: 1px solid rgba(255,255,255,0.13);
      box-shadow:
        0 18px 38px rgba(0,0,0,0.12),
        inset 0 1px 0 rgba(255,255,255,0.14);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      isolation: isolate;
      transition: transform .24s cubic-bezier(.2,.8,.2,1), box-shadow .24s ease, border-color .24s ease, background .24s ease;
    }

    .premium-action-card::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background:
        radial-gradient(circle at 18% 0%, var(--soft, rgba(0,149,218,0.2)), transparent 40%),
        linear-gradient(135deg, rgba(255,255,255,0.07), transparent 58%);
      opacity: .86;
      transition: opacity .24s ease;
    }

    .premium-action-card::after {
      content: "";
      position: absolute;
      inset: auto 18px 0 18px;
      height: 3px;
      border-radius: 999px 999px 0 0;
      background: linear-gradient(90deg, var(--accent, #18aee4), transparent);
      opacity: .95;
    }

    .premium-action-card:hover {
      transform: translateY(-6px);
      border-color: rgba(255,255,255,0.26);
      background:
        linear-gradient(180deg, rgba(255,255,255,0.17), rgba(255,255,255,0.08));
      box-shadow:
        0 30px 64px rgba(0,0,0,0.22),
        0 0 0 1px color-mix(in srgb, var(--accent, #18aee4) 34%, transparent),
        inset 0 1px 0 rgba(255,255,255,0.18);
    }

    .premium-action-card:hover::before {
      opacity: 1;
    }

    .premium-action-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
    }

    .premium-action-icon {
      display: grid;
      place-items: center;
      width: 58px;
      height: 58px;
      border-radius: 20px;
      color: #fff;
      background:
        linear-gradient(145deg, color-mix(in srgb, var(--accent, #18aee4) 84%, #fff 16%), color-mix(in srgb, var(--accent, #18aee4) 42%, #08182a 58%));
      border: 1px solid rgba(255,255,255,0.2);
      box-shadow:
        0 16px 30px color-mix(in srgb, var(--accent, #18aee4) 24%, transparent),
        inset 0 1px 0 rgba(255,255,255,0.22);
      transition: transform .24s ease;
    }

    .premium-action-card:hover .premium-action-icon {
      transform: translateY(-2px) scale(1.04);
    }

    .premium-action-icon svg {
      width: 29px;
      height: 29px;
      stroke: currentColor;
      stroke-width: 1.8;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .premium-action-code {
      color: rgba(255,255,255,0.3);
      font-size: 1.02rem;
      font-weight: 900;
      letter-spacing: .08em;
    }

    .premium-action-copy {
      display: grid;
      align-content: end;
      gap: 8px;
      min-width: 0;
      overflow: hidden;
    }

    .premium-action-copy strong {
      color: #fff;
      font-size: clamp(1.04rem, 1.12vw, 1.24rem);
      line-height: 1.08;
      letter-spacing: 0;
      overflow-wrap: anywhere;
    }

    .premium-action-copy span {
      color: rgba(232,242,255,0.68);
      font-size: .82rem;
      line-height: 1.46;
      overflow-wrap: anywhere;
    }

    .premium-action-link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      width: fit-content;
      color: color-mix(in srgb, var(--accent, #18aee4) 76%, #fff 24%);
      font-size: .78rem;
      font-weight: 900;
      letter-spacing: .02em;
    }

    .premium-action-link::after {
      content: "";
      width: 8px;
      height: 8px;
      border-right: 2px solid currentColor;
      border-bottom: 2px solid currentColor;
      transform: rotate(-45deg);
      transition: transform .2s ease;
    }

    .premium-action-card:hover .premium-action-link::after {
      transform: translateX(4px) rotate(-45deg);
    }

    .premium-actions-section {
      position: relative;
      margin-top: 26px;
      padding: clamp(24px, 3.2vw, 42px);
      border-radius: 34px;
      color: #fff;
      background:
        linear-gradient(135deg, #071827 0%, #0b2b47 54%, #0a2138 100%);
      border: 1px solid rgba(255,255,255,0.12);
      box-shadow:
        0 30px 74px rgba(7,24,39,0.24),
        inset 0 1px 0 rgba(255,255,255,0.14);
      overflow: hidden;
      isolation: isolate;
    }

    .premium-actions-section::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background:
        linear-gradient(90deg, rgba(255,255,255,0.07), transparent 18%),
        linear-gradient(180deg, rgba(255,255,255,0.08), transparent 38%);
      opacity: .7;
      pointer-events: none;
    }

    .premium-actions-section::after {
      content: "";
      position: absolute;
      inset: 18px;
      z-index: -1;
      border-radius: 26px;
      border: 1px solid rgba(255,255,255,0.07);
      pointer-events: none;
    }

    .premium-actions-head {
      display: block;
      margin-bottom: 24px;
      padding-inline: 0;
    }

    .premium-actions-title {
      display: block;
    }

    .premium-actions-title .section-kicker,
    .premium-actions-stamp {
      display: none;
    }

    .premium-actions-title h2 {
      margin: 0;
      max-width: none;
      color: #fff;
      font-size: clamp(2rem, 3vw, 3.18rem);
      line-height: 1;
      letter-spacing: 0;
      white-space: nowrap;
      text-shadow: 0 18px 42px rgba(0,0,0,0.2);
    }

    .premium-actions-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 16px;
    }

    .premium-action-card {
      position: relative;
      min-width: 0;
      min-height: 204px;
      display: grid;
      grid-template-rows: auto 1fr auto;
      gap: 17px;
      padding: 20px;
      border-radius: 24px;
      overflow: hidden;
      color: #fff;
      text-decoration: none;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.13), rgba(255,255,255,0.075));
      border: 1px solid rgba(255,255,255,0.14);
      box-shadow:
        0 18px 40px rgba(0,0,0,0.14),
        inset 0 1px 0 rgba(255,255,255,0.16);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      isolation: isolate;
      transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease, border-color .28s ease, background .28s ease;
    }

    .premium-action-card::before {
      content: "";
      position: absolute;
      inset: -1px;
      z-index: -1;
      border-radius: inherit;
      padding: 1px;
      background:
        linear-gradient(135deg, rgba(255,255,255,0.34), rgba(255,255,255,0.05) 38%, color-mix(in srgb, var(--accent, #18aee4) 78%, #fff 22%) 100%);
      -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      opacity: .7;
      transition: opacity .28s ease;
    }

    .premium-action-card::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background:
        linear-gradient(115deg, transparent 0%, transparent 44%, rgba(255,255,255,0.18) 50%, transparent 56%, transparent 100%);
      transform: translateX(-120%);
      transition: transform .55s cubic-bezier(.2,.8,.2,1);
      pointer-events: none;
    }

    .premium-action-card:hover {
      transform: translateY(-7px);
      border-color: color-mix(in srgb, var(--accent, #18aee4) 42%, rgba(255,255,255,0.2));
      background:
        linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.092));
      box-shadow:
        0 32px 66px rgba(0,0,0,0.26),
        0 0 0 1px color-mix(in srgb, var(--accent, #18aee4) 24%, transparent),
        inset 0 1px 0 rgba(255,255,255,0.2);
    }

    .premium-action-card:hover::before {
      opacity: 1;
    }

    .premium-action-card:hover::after {
      transform: translateX(120%);
    }

    .premium-action-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
    }

    .premium-action-icon {
      display: grid;
      place-items: center;
      width: 58px;
      height: 58px;
      border-radius: 19px;
      color: #fff;
      background:
        linear-gradient(145deg, color-mix(in srgb, var(--accent, #18aee4) 76%, #fff 24%), color-mix(in srgb, var(--accent, #18aee4) 38%, #071827 62%));
      border: 1px solid rgba(255,255,255,0.2);
      box-shadow:
        0 16px 32px color-mix(in srgb, var(--accent, #18aee4) 24%, transparent),
        inset 0 1px 0 rgba(255,255,255,0.24);
      transition: transform .22s ease, color .22s ease, background .22s ease, border-color .22s ease;
    }

    .premium-action-card:hover .premium-action-icon {
      transform: translateY(-3px) scale(1.05);
      color: #fff;
      border-color: rgba(255,255,255,0.18);
    }

    .premium-action-code {
      color: rgba(255,255,255,0.28);
      font-size: 1rem;
      font-weight: 900;
      letter-spacing: .1em;
      transition: color .22s ease;
    }

    .premium-action-card:hover .premium-action-code {
      color: rgba(255,255,255,0.5);
    }

    .premium-action-copy {
      display: grid;
      align-content: end;
      gap: 8px;
      min-width: 0;
      overflow: visible;
    }

    .premium-action-copy strong {
      color: #fff;
      font-size: clamp(1.06rem, 1.14vw, 1.26rem);
      line-height: 1.08;
      letter-spacing: 0;
      overflow-wrap: anywhere;
      transition: color .22s ease;
    }

    .premium-action-card:hover .premium-action-copy strong {
      color: #fff;
    }

    .premium-action-copy span {
      color: rgba(232,242,255,0.68);
      font-size: .88rem;
      line-height: 1.48;
      overflow-wrap: anywhere;
      transition: color .22s ease;
    }

    .premium-action-card:hover .premium-action-copy span {
      color: rgba(235,244,255,0.82);
    }

    .premium-action-link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      width: fit-content;
      color: color-mix(in srgb, var(--accent, #18aee4) 72%, #fff 28%);
      font-size: .82rem;
      font-weight: 900;
      letter-spacing: 0;
      transition: color .22s ease;
    }

    .premium-action-card:hover .premium-action-link {
      color: #fff;
    }

    .news-announcements-section {
      margin-top: 26px;
    }

    .news-announcements-grid {
      display: grid;
      grid-template-columns: minmax(620px, 1.15fr) minmax(340px, .85fr);
      gap: clamp(18px, 2vw, 28px);
      align-items: stretch;
    }

    .news-showcase-card,
    .tender-panel {
      position: relative;
      min-width: 0;
      overflow: hidden;
      border-radius: 30px;
      border: 1px solid rgba(22, 67, 112, 0.12);
      box-shadow:
        0 22px 54px rgba(10, 31, 55, 0.12),
        inset 0 1px 0 rgba(255,255,255,0.78);
    }

    .news-showcase-card {
      display: grid;
      grid-template-rows: auto 1fr;
      gap: 16px;
      padding: clamp(16px, 1.7vw, 22px);
      background:
        linear-gradient(180deg, rgba(255,255,255,0.92), rgba(246,251,255,0.82)),
        linear-gradient(135deg, rgba(0,149,218,0.1), rgba(18,69,119,0.045));
    }

    .news-card-head,
    .tender-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
    }

    .news-card-title {
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: 0;
    }

    .news-card-title span,
    .tender-head span {
      display: grid;
      place-items: center;
      width: 48px;
      height: 48px;
      flex: 0 0 auto;
      border-radius: 17px;
      color: #fff;
      background:
        linear-gradient(145deg, #0b5fa8, #23a8bd);
      box-shadow:
        0 16px 30px rgba(0,149,218,0.22),
        inset 0 1px 0 rgba(255,255,255,0.24);
    }

    .news-card-title svg,
    .tender-head svg,
    .news-arrow svg,
    .tender-icon svg {
      width: 22px;
      height: 22px;
      stroke: currentColor;
      stroke-width: 1.9;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .news-card-title h2,
    .tender-head h2 {
      margin: 0;
      color: #0d2540;
      font-size: clamp(1.52rem, 2vw, 2.18rem);
      line-height: 1.04;
      letter-spacing: 0;
      white-space: nowrap;
    }

    .news-slider-actions {
      display: inline-flex;
      gap: 10px;
      flex: 0 0 auto;
    }

    .news-arrow {
      display: grid;
      place-items: center;
      width: 48px;
      height: 48px;
      border: 0;
      border-radius: 17px;
      color: #0b5fa8;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.96), rgba(232,241,249,0.9));
      box-shadow:
        0 14px 28px rgba(10,31,55,0.1),
        inset 0 1px 0 rgba(255,255,255,0.95);
      cursor: pointer;
      transition: transform .2s ease, color .2s ease, box-shadow .2s ease;
    }

    .news-arrow:hover {
      color: #fff;
      transform: translateY(-2px);
      background: linear-gradient(145deg, #0b5fa8, #1aa0bf);
      box-shadow:
        0 18px 34px rgba(11,95,168,0.25),
        inset 0 1px 0 rgba(255,255,255,0.22);
    }

    .news-slider-shell {
      position: relative;
      width: 100%;
      aspect-ratio: 1 / 1;
      overflow: hidden;
      border-radius: 26px;
      background:
        linear-gradient(135deg, #071827, #102b43);
      box-shadow:
        0 18px 42px rgba(10, 31, 55, 0.18),
        inset 0 1px 0 rgba(255,255,255,0.1);
      isolation: isolate;
    }

    .news-slide {
      position: absolute;
      inset: 0;
      display: block;
      opacity: 0;
      pointer-events: none;
      transform: scale(1.018);
      color: #fff;
      text-decoration: none;
      transition: opacity .34s ease, transform .5s cubic-bezier(.2,.8,.2,1);
    }

    .news-slide.active {
      opacity: 1;
      pointer-events: auto;
      transform: scale(1);
    }

    .news-media {
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)),
        #0b2134;
    }

    .news-media img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      object-position: center;
      filter: saturate(1.02) contrast(1.01);
    }

    .news-slide::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(180deg, transparent 46%, rgba(3,15,28,0.12) 68%, rgba(3,15,28,0.44) 100%);
      pointer-events: none;
    }

    .news-slide-overlay {
      position: absolute;
      left: 16px;
      right: 16px;
      bottom: 16px;
      display: grid;
      gap: 6px;
      padding: clamp(13px, 1.4vw, 16px) clamp(14px, 1.6vw, 18px);
      border-radius: 18px;
      background: rgba(7, 23, 39, 0.34);
      border: 1px solid rgba(255,255,255,0.22);
      box-shadow:
        0 14px 34px rgba(0,0,0,0.18),
        inset 0 1px 0 rgba(255,255,255,0.18);
      backdrop-filter: blur(24px) saturate(1.22);
      -webkit-backdrop-filter: blur(24px) saturate(1.22);
    }

    .news-date {
      width: fit-content;
      padding: 0;
      border-radius: 999px;
      color: rgba(222,242,255,0.84);
      background: transparent;
      border: 0;
      font-size: .74rem;
      font-weight: 900;
      letter-spacing: 0;
    }

    .news-slide-overlay strong {
      color: #fff;
      font-size: clamp(1.08rem, 1.45vw, 1.42rem);
      line-height: 1.12;
      letter-spacing: 0;
    }

    .news-slide-overlay p {
      margin: 0;
      max-width: 58ch;
      color: rgba(238,246,255,0.82);
      font-size: clamp(.82rem, .92vw, .92rem);
      line-height: 1.46;
    }

    .tender-panel {
      display: grid;
      grid-template-rows: auto minmax(0, 1fr);
      height: 100%;
      background:
        linear-gradient(180deg, #071827, #0a2238 48%, #071827 100%);
      border-color: rgba(255,255,255,0.1);
      box-shadow:
        0 28px 62px rgba(7,24,39,0.22),
        inset 0 1px 0 rgba(255,255,255,0.12);
    }

    .tender-head {
      min-height: 82px;
      padding: 18px 22px;
      color: #fff;
      background:
        linear-gradient(135deg, #0b5fa8 0%, #188bb4 56%, #1d8f7a 100%);
      box-shadow: inset 0 -1px 0 rgba(255,255,255,0.16);
    }

    .tender-head h2 {
      color: #fff;
      font-size: clamp(1.34rem, 1.7vw, 1.82rem);
    }

    .tender-head a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 42px;
      padding: 0 14px;
      border-radius: 999px;
      color: #fff;
      background: rgba(255,255,255,0.14);
      border: 1px solid rgba(255,255,255,0.2);
      font-size: .8rem;
      font-weight: 900;
      text-decoration: none;
      transition: background .2s ease, transform .2s ease;
    }

    .tender-head a:hover {
      transform: translateY(-2px);
      background: rgba(255,255,255,0.22);
    }

    .tender-list-window {
      position: relative;
      height: auto;
      min-height: 0;
      overflow: hidden;
    }

    .tender-list-window::before,
    .tender-list-window::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      z-index: 2;
      height: 34px;
      pointer-events: none;
    }

    .tender-list-window::before {
      top: 0;
      background: linear-gradient(180deg, #071827, transparent);
    }

    .tender-list-window::after {
      bottom: 0;
      background: linear-gradient(0deg, #071827, transparent);
    }

    .tender-list-track {
      display: grid;
      gap: 9px;
      padding: 14px;
      animation: tenderScroll 44s linear infinite;
      will-change: transform;
    }

    .tender-panel:hover .tender-list-track {
      animation-play-state: paused;
    }

    .tender-item {
      display: grid;
      grid-template-columns: 48px minmax(0, 1fr);
      align-items: center;
      gap: 12px;
      min-height: 74px;
      padding: 12px;
      border-radius: 18px;
      color: #eaf5ff;
      text-decoration: none;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.095), rgba(255,255,255,0.045));
      border: 1px solid rgba(255,255,255,0.1);
      box-shadow:
        0 10px 22px rgba(0,0,0,0.13),
        inset 0 1px 0 rgba(255,255,255,0.1);
      transition: transform .2s ease, background .2s ease, border-color .2s ease;
    }

    .tender-item:hover {
      transform: translateX(4px);
      background:
        linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.07));
      border-color: rgba(126,213,239,0.28);
    }

    .tender-icon {
      display: grid;
      place-items: center;
      width: 48px;
      height: 48px;
      border-radius: 16px;
      color: #fff;
      background:
        linear-gradient(145deg, #1680ac, #32b7a2);
      box-shadow:
        0 12px 22px rgba(0,149,218,0.16),
        inset 0 1px 0 rgba(255,255,255,0.22);
    }

    .tender-copy {
      display: grid;
      gap: 4px;
      min-width: 0;
    }

    .tender-copy strong {
      color: #fff;
      font-size: clamp(.9rem, .98vw, 1rem);
      line-height: 1.28;
      letter-spacing: 0;
    }

    .tender-copy span {
      color: rgba(219,236,250,0.68);
      font-size: .76rem;
      font-weight: 800;
    }

    @keyframes tenderScroll {
      from {
        transform: translateY(0);
      }

      to {
        transform: translateY(-50%);
      }
    }

    .news-announcements-grid {
      grid-template-columns: minmax(560px, 630px) minmax(350px, 1fr);
      gap: clamp(16px, 1.6vw, 22px);
    }

    .news-showcase-card,
    .tender-panel {
      border-radius: 24px;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.86), rgba(248,252,255,0.74));
      border: 1px solid rgba(19, 62, 104, 0.09);
      box-shadow:
        0 16px 38px rgba(9, 34, 58, 0.075),
        inset 0 1px 0 rgba(255,255,255,0.82);
    }

    .news-showcase-card,
    .tender-panel {
      gap: 12px;
      padding: 16px;
    }

    .news-showcase-card {
      grid-template-rows: 48px auto;
    }

    .tender-panel {
      grid-template-rows: 48px minmax(0, 1fr);
      color: #0d2540;
    }

    .news-card-head,
    .tender-head {
      min-height: 48px;
      padding: 0;
      background: transparent;
      box-shadow: none;
    }

    .news-card-title span,
    .tender-head span {
      width: 40px;
      height: 40px;
      border-radius: 14px;
      color: #0b5fa8;
      background: rgba(239, 248, 253, 0.88);
      border: 1px solid rgba(11, 95, 168, 0.1);
      box-shadow: none;
    }

    .news-card-title svg,
    .tender-head svg,
    .news-arrow svg,
    .tender-icon svg {
      width: 19px;
      height: 19px;
    }

    .news-card-title h2,
    .tender-head h2 {
      color: #102640;
      font-size: clamp(1.24rem, 1.5vw, 1.58rem);
    }

    .news-slider-actions {
      gap: 8px;
    }

    .news-arrow {
      width: 40px;
      height: 40px;
      border-radius: 14px;
      color: #0b5fa8;
      background: rgba(255,255,255,0.7);
      border: 1px solid rgba(11,95,168,0.08);
      box-shadow: none;
    }

    .news-arrow:hover {
      color: #0b5fa8;
      transform: translateY(-1px);
      background: #fff;
      box-shadow: 0 10px 22px rgba(11,95,168,0.12);
    }

    .news-slider-shell {
      border-radius: 20px;
      box-shadow:
        0 12px 30px rgba(10,31,55,0.12),
        inset 0 1px 0 rgba(255,255,255,0.1);
    }

    .news-slide::before {
      background: linear-gradient(180deg, transparent 58%, rgba(4,16,28,0.32) 100%);
    }

    .news-slide-overlay {
      left: 12px;
      right: auto;
      bottom: 12px;
      width: min(600px, calc(100% - 24px));
      gap: 4px;
      padding: 11px 13px;
      border-radius: 14px;
      background: rgba(6, 18, 30, 0.24);
      border: 1px solid rgba(255,255,255,0.18);
      box-shadow: 0 10px 24px rgba(0,0,0,0.14);
      backdrop-filter: blur(22px) saturate(1.18);
      -webkit-backdrop-filter: blur(22px) saturate(1.18);
    }

    .news-date {
      color: rgba(238,248,255,0.78);
      font-size: .68rem;
      font-weight: 900;
    }

    .news-slide-overlay strong {
      font-size: clamp(1rem, 1.26vw, 1.22rem);
      line-height: 1.1;
    }

    .news-slide-overlay p {
      display: -webkit-box;
      overflow: hidden;
      color: rgba(242,248,255,0.78);
      font-size: .8rem;
      line-height: 1.38;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    .tender-head a {
      min-height: 36px;
      padding: 0 12px;
      color: #0b5fa8;
      background: rgba(239,248,253,0.8);
      border-color: rgba(11,95,168,0.1);
      font-size: .74rem;
    }

    .tender-head a:hover {
      background: #fff;
      transform: translateY(-1px);
    }

    .tender-list-window {
      height: clamp(420px, 42vw, 598px);
      border-radius: 18px;
      background: rgba(241, 247, 252, 0.58);
      border: 1px solid rgba(19,62,104,0.07);
    }

    .tender-list-window::before {
      background: linear-gradient(180deg, rgba(244,249,253,0.96), transparent);
    }

    .tender-list-window::after {
      background: linear-gradient(0deg, rgba(244,249,253,0.96), transparent);
    }

    .tender-list-track {
      gap: 6px;
      padding: 8px;
    }

    .tender-item {
      grid-template-columns: 36px minmax(0, 1fr);
      gap: 10px;
      min-height: 58px;
      padding: 8px 10px;
      border-radius: 14px;
      color: #142842;
      background: rgba(255,255,255,0.62);
      border-color: rgba(19,62,104,0.075);
      box-shadow: none;
    }

    .tender-item:hover {
      transform: translateX(2px);
      background: #fff;
      border-color: rgba(11,95,168,0.14);
    }

    .tender-icon {
      width: 36px;
      height: 36px;
      border-radius: 12px;
      color: #0b5fa8;
      background: rgba(239,248,253,0.95);
      border: 1px solid rgba(11,95,168,0.1);
      box-shadow: none;
    }

    .tender-copy {
      gap: 3px;
    }

    .tender-copy strong {
      color: #142842;
      font-size: clamp(.8rem, .86vw, .9rem);
      line-height: 1.2;
    }

    .tender-copy span {
      color: #71849d;
      font-size: .68rem;
      font-weight: 850;
    }

    .events-section {
      margin-top: 24px;
    }

    .events-panel {
      position: relative;
      overflow: hidden;
      padding: 16px;
      border-radius: 24px;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.86), rgba(248,252,255,0.74)),
        linear-gradient(135deg, rgba(0,149,218,0.08), rgba(18,69,119,0.035));
      border: 1px solid rgba(19, 62, 104, 0.09);
      box-shadow:
        0 16px 38px rgba(9, 34, 58, 0.075),
        inset 0 1px 0 rgba(255,255,255,0.82);
    }

    .events-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      min-height: 48px;
      margin-bottom: 14px;
    }

    .events-head .news-card-title span {
      width: 40px;
      height: 40px;
      border-radius: 14px;
      color: #0b5fa8;
      background: rgba(239, 248, 253, 0.88);
      border: 1px solid rgba(11, 95, 168, 0.1);
      box-shadow: none;
    }

    .events-head .news-card-title h2 {
      color: #102640;
      font-size: clamp(1.24rem, 1.5vw, 1.58rem);
    }

    .events-all {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 36px;
      padding: 0 12px;
      border-radius: 999px;
      color: #0b5fa8;
      background: rgba(239,248,253,0.8);
      border: 1px solid rgba(11,95,168,0.1);
      font-size: .74rem;
      font-weight: 900;
      transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
    }

    .events-all:hover {
      background: #fff;
      transform: translateY(-1px);
      box-shadow: 0 10px 22px rgba(11,95,168,0.12);
    }

    .events-shell {
      display: grid;
      grid-template-columns: minmax(430px, .72fr) minmax(0, 1fr);
      gap: clamp(16px, 2vw, 24px);
      align-items: stretch;
    }

    .event-poster-panel {
      display: grid;
      grid-template-rows: auto auto;
      gap: 10px;
      min-width: 0;
    }

    .event-poster-stage {
      position: relative;
      aspect-ratio: 424 / 600;
      overflow: hidden;
      border-radius: 22px;
      background:
        linear-gradient(135deg, #f7fbff, #dceaf5);
      border: 1px solid rgba(12, 57, 100, 0.12);
      box-shadow:
        0 16px 34px rgba(10,31,55,0.13),
        inset 0 1px 0 rgba(255,255,255,0.8);
      isolation: isolate;
    }

    .event-poster-stage::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 2;
      pointer-events: none;
      background:
        linear-gradient(180deg, rgba(8,32,57,0.1), transparent 34%, rgba(8,32,57,0.16));
    }

    .event-poster-slide {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      padding: 0;
      border: 0;
      opacity: 0;
      pointer-events: none;
      cursor: pointer;
      background: #f8fbff;
      transform: translateX(12px) scale(.985);
      transition: opacity .3s ease, transform .42s cubic-bezier(.2,.8,.2,1);
    }

    .event-poster-slide.active {
      opacity: 1;
      pointer-events: auto;
      transform: translateX(0) scale(1);
    }

    .event-poster-slide img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: contain;
      object-position: center;
    }

    .event-slider-actions {
      position: absolute;
      top: 12px;
      right: 12px;
      z-index: 4;
      display: inline-flex;
      gap: 8px;
    }

    .event-arrow {
      display: grid;
      place-items: center;
      width: 40px;
      height: 40px;
      border: 1px solid rgba(11,95,168,0.14);
      border-radius: 14px;
      color: #0b5fa8;
      background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(236,248,254,0.94));
      box-shadow: 0 10px 22px rgba(11,95,168,0.12);
      cursor: pointer;
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
    }

    .event-arrow:hover {
      transform: translateY(-1px);
      background: #fff;
      box-shadow: 0 14px 26px rgba(11,95,168,0.18);
    }

    .event-arrow svg {
      width: 19px;
      height: 19px;
      stroke: currentColor;
      stroke-width: 1.9;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .event-thumb-row {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 8px;
    }

    .event-thumb {
      position: relative;
      aspect-ratio: 4 / 5;
      overflow: hidden;
      padding: 0;
      border: 1px solid rgba(19,62,104,0.08);
      border-radius: 14px;
      background: #fff;
      cursor: pointer;
      opacity: .62;
      transition: opacity .2s ease, transform .2s ease, border-color .2s ease, box-shadow .2s ease;
    }

    .event-thumb img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      object-position: center;
    }

    .event-thumb.active,
    .event-thumb:hover {
      opacity: 1;
      transform: translateY(-2px);
      border-color: rgba(11,95,168,0.2);
      box-shadow: 0 10px 20px rgba(10,31,55,0.12);
    }

    .event-thumb span {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
      white-space: nowrap;
    }

    .event-info-card {
      position: relative;
      min-height: 100%;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 22px;
      padding: clamp(24px, 2.45vw, 34px);
      border-radius: 22px;
      color: #fff;
      background:
        radial-gradient(circle at top right, rgba(0,149,218,0.28), transparent 36%),
        linear-gradient(145deg, rgba(8,32,57,0.98), rgba(11,95,168,0.86));
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.16),
        0 16px 34px rgba(10,31,55,0.11);
      isolation: isolate;
    }

    .event-info-card::before {
      content: "";
      position: absolute;
      right: -70px;
      bottom: -86px;
      width: 260px;
      height: 260px;
      opacity: .08;
      background: url("/storage/uploads/brand/muttas-logo.png") center / contain no-repeat;
      pointer-events: none;
    }

    .event-info-kicker {
      position: relative;
      z-index: 1;
      color: rgba(223,244,255,0.82);
      font-size: .72rem;
      font-weight: 900;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .event-details {
      position: relative;
      z-index: 1;
      display: grid;
      margin: 0;
      overflow: hidden;
      border-radius: 20px;
      border: 1px solid rgba(255,255,255,0.12);
      background: rgba(255,255,255,0.08);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
    }

    .event-detail-row {
      display: grid;
      grid-template-columns: minmax(142px, 182px) minmax(0, 1fr);
      gap: 18px;
      padding: 16px 18px;
      border-top: 1px solid rgba(255,255,255,0.1);
    }

    .event-detail-row:first-child {
      border-top: 0;
    }

    .event-detail-row dt {
      color: rgba(226,244,255,0.66);
      font-size: .78rem;
      font-weight: 900;
    }

    .event-detail-row dd {
      margin: 0;
      color: rgba(255,255,255,0.94);
      font-size: clamp(.94rem, 1.08vw, 1.08rem);
      font-weight: 850;
      line-height: 1.32;
    }

    .event-detail-row.is-title dd {
      font-size: clamp(1.2rem, 1.75vw, 1.66rem);
      line-height: 1.14;
    }

    .event-source-link {
      position: relative;
      z-index: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: fit-content;
      min-height: 42px;
      padding: 0 18px;
      border-radius: 999px;
      color: #082039;
      background: rgba(255,255,255,0.92);
      font-size: .82rem;
      font-weight: 900;
      box-shadow: 0 14px 26px rgba(0,0,0,0.14);
      transition: transform .2s ease, background .2s ease;
    }

    .event-source-link:hover {
      transform: translateY(-1px);
      background: #fff;
    }

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

    .services-catalog {
      display: grid;
      gap: 22px;
    }

    .service-category {
      position: relative;
      padding: 18px;
      border-radius: 32px;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.78), rgba(247,250,255,0.58));
      border: 1px solid rgba(24, 78, 134, 0.09);
      box-shadow:
        0 18px 45px rgba(17, 43, 80, 0.055),
        inset 0 1px 0 rgba(255,255,255,0.82);
    }

    .service-category-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 14px;
      padding: 0 4px;
    }

    .service-category-head h3 {
      margin: 0;
      color: #17243a;
      font-size: clamp(1.1rem, 1.6vw, 1.44rem);
      letter-spacing: 0;
    }

    .service-category-head span {
      display: inline-flex;
      align-items: center;
      min-height: 32px;
      padding: 0 13px;
      border-radius: 999px;
      color: #0b5fa8;
      background: rgba(0, 149, 218, 0.09);
      font-size: .72rem;
      font-weight: 900;
      letter-spacing: .08em;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .reveal-up {
      opacity: 0;
      transform: translateY(26px);
      transition: opacity .55s ease, transform .55s cubic-bezier(.2,.8,.2,1);
    }

    .reveal-up.revealed {
      opacity: 1;
      transform: translateY(0);
    }

    .service-card {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      min-height: 176px;
      padding: 24px 24px 22px;
      border-radius: 24px;
      overflow: hidden;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.98), rgba(250,252,255,0.92));
      border: 1px solid rgba(23, 36, 58, 0.1);
      box-shadow:
        0 12px 28px rgba(17, 43, 80, 0.055),
        inset 0 1px 0 rgba(255,255,255,0.96);
      transition: opacity .72s cubic-bezier(.16,1,.3,1), transform .72s cubic-bezier(.16,1,.3,1), border-color .18s ease, box-shadow .18s ease;
    }

    .services-section .service-card.reveal-up {
      transform: translateY(62px) scale(.985);
    }

    .services-section .service-card.revealed {
      transform: translateY(0) scale(1);
    }

    .services-section .service-card.revealed:hover {
      transform: translateY(-6px) scale(1);
    }

    .service-card::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 16% 0%, rgba(0,149,218,0.13), transparent 28%),
        radial-gradient(circle at 90% 12%, rgba(24,78,134,0.1), transparent 28%);
      opacity: 0;
      transition: opacity .2s ease;
    }

    .service-card:hover {
      transform: translateY(-6px);
      border-color: rgba(0,149,218,0.16);
      box-shadow:
        0 24px 48px rgba(17, 43, 80, 0.13),
        0 0 0 1px rgba(0,149,218,0.05);
    }

    .service-card:hover::before {
      opacity: 1;
    }

    .service-icon {
      position: relative;
      z-index: 1;
      display: grid;
      place-items: center;
      width: 48px;
      height: 48px;
      border-radius: 18px;
      margin: 0 auto 14px;
      color: #184e86;
      background: linear-gradient(180deg, #f7fbff, #eaf2fb);
      box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 10px 22px rgba(24,78,134,0.08);
    }

    .service-card h3,
    .service-card p,
    .service-link {
      position: relative;
      z-index: 1;
    }

    .service-card h3 {
      margin: 0 0 8px;
      color: #17243a;
      font-size: 1.16rem;
      letter-spacing: 0;
      text-align: center;
    }

    .service-card p {
      margin: 0 0 14px;
      color: #6d82a0;
      line-height: 1.7;
      font-size: .9rem;
      text-align: center;
    }

    .service-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      min-height: 38px;
      width: auto;
      margin-top: auto;
      padding: 0 15px;
      border-radius: 999px;
      color: #b85516;
      background:
        linear-gradient(180deg, rgba(240, 249, 255, 0.92), rgba(220, 242, 255, 0.74));
      border: 1px solid rgba(0, 149, 218, 0.18);
      box-shadow:
        0 10px 22px rgba(0, 149, 218, 0.08),
        inset 0 1px 0 rgba(255,255,255,0.8);
      font-weight: 900;
      font-size: .8rem;
      letter-spacing: 0;
      overflow: hidden;
      isolation: isolate;
      transition: transform .2s ease, box-shadow .2s ease, color .2s ease, border-color .2s ease, background .2s ease;
    }

    .service-link::before {
      content: "";
      position: absolute;
      inset: -1px;
      z-index: -1;
      background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,0.72) 42%, transparent 58%);
      transform: translateX(-120%);
      transition: transform .42s cubic-bezier(.2,.8,.2,1);
    }

    .service-link::after {
      content: "";
      width: 8px;
      height: 8px;
      border-right: 2px solid currentColor;
      border-bottom: 2px solid currentColor;
      transform: rotate(-45deg);
      transition: transform .18s ease;
    }

    .service-card:hover .service-link {
      transform: translateY(-1px);
      color: #9c4210;
      background:
        linear-gradient(180deg, rgba(245, 251, 255, 0.98), rgba(209, 236, 255, 0.82));
      border-color: rgba(0, 149, 218, 0.26);
      box-shadow:
        0 14px 28px rgba(0, 149, 218, 0.13),
        inset 0 1px 0 rgba(255,255,255,0.92);
    }

    .service-card:hover .service-link::before {
      transform: translateX(120%);
    }

    .service-card:hover .service-link::after {
      transform: translateX(4px) rotate(-45deg);
    }

    .why-section {
      margin-top: 28px;
      padding: clamp(22px, 3vw, 34px);
      border-radius: 38px;
      color: #fff;
      background:
        radial-gradient(circle at 16% 8%, rgba(0,149,218,0.2), transparent 26%),
        radial-gradient(circle at 86% 10%, rgba(68,139,213,0.16), transparent 28%),
        linear-gradient(135deg, #07111f 0%, #0d1828 46%, #111f34 100%);
      box-shadow:
        0 30px 70px rgba(5, 18, 37, 0.2),
        inset 0 1px 0 rgba(255,255,255,0.08);
      overflow: hidden;
    }

    .projects-section {
      margin-top: 28px;
      padding: clamp(22px, 3vw, 34px);
      border-radius: 40px;
      width: 100%;
      max-width: 100%;
      background:
        radial-gradient(circle at 18% 0%, rgba(0,149,218,0.12), transparent 28%),
        linear-gradient(180deg, rgba(255,255,255,0.82), rgba(246,250,255,0.66));
      border: 1px solid rgba(24, 78, 134, 0.09);
      box-shadow:
        0 24px 70px rgba(17, 43, 80, 0.075),
        inset 0 1px 0 rgba(255,255,255,0.88);
      overflow: hidden;
    }

    .projects-shell {
      display: grid;
      grid-template-columns: minmax(360px, .9fr) minmax(0, 1.45fr);
      gap: 22px;
      align-items: stretch;
      min-width: 0;
      max-width: 100%;
    }

    .project-card {
      position: relative;
      display: flex;
      overflow: hidden;
      text-decoration: none;
      color: inherit;
      background: rgba(255,255,255,0.86);
      border: 1px solid rgba(23, 36, 58, 0.09);
      box-shadow:
        0 18px 44px rgba(17, 43, 80, 0.08),
        inset 0 1px 0 rgba(255,255,255,0.9);
      transition: transform .32s cubic-bezier(.2,.8,.2,1), box-shadow .32s ease, border-color .32s ease;
    }

    .project-featured {
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: 560px;
      border-radius: 32px;
      padding: 30px;
      overflow: hidden;
      color: #fff;
      text-decoration: none;
      background:
        radial-gradient(circle at 14% 12%, rgba(0,149,218,0.36), transparent 27%),
        radial-gradient(circle at 82% 24%, rgba(84,157,235,0.22), transparent 26%),
        linear-gradient(135deg, #07111f 0%, #0c1728 48%, #142842 100%);
      border: 1px solid rgba(255,255,255,0.1);
      box-shadow:
        0 30px 70px rgba(7, 17, 31, 0.18),
        inset 0 1px 0 rgba(255,255,255,0.12);
      isolation: isolate;
    }

    .project-featured::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background:
        linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255,255,255,0.04) 1px, transparent 1px);
      background-size: 54px 54px;
      mask-image: linear-gradient(180deg, rgba(0,0,0,.9), transparent 78%);
      opacity: .55;
    }

    .project-featured::after {
      content: "";
      position: absolute;
      right: -120px;
      bottom: -150px;
      width: 360px;
      height: 360px;
      border-radius: 999px;
      background: rgba(0,149,218,0.14);
      filter: blur(8px);
      z-index: -1;
    }

    .project-card::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      background:
        linear-gradient(180deg, rgba(8,18,32,0.42), rgba(8,18,32,0.78)),
        linear-gradient(135deg, rgba(24,78,134,0.28), rgba(0,149,218,0.14));
      pointer-events: none;
      transition: opacity .32s ease;
    }

    .project-card img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      transform: scale(1.02);
      filter: saturate(.72) contrast(.92) brightness(.86);
      transition: transform .55s cubic-bezier(.2,.8,.2,1), filter .32s ease;
    }

    .project-card:hover {
      transform: translateY(-7px);
      border-color: rgba(0,149,218,0.22);
      box-shadow:
        0 30px 70px rgba(17, 43, 80, 0.14),
        0 0 0 1px rgba(0,149,218,0.05);
    }

    .project-card:hover img {
      transform: scale(1.075);
      filter: saturate(.9) contrast(.96) brightness(.9);
    }

    .project-copy {
      position: relative;
      z-index: 1;
      width: 100%;
      color: #fff;
    }

    .project-kicker {
      display: inline-flex;
      align-items: center;
      min-height: 32px;
      padding: 0 12px;
      border-radius: 999px;
      color: #fff;
      background: rgba(0,149,218,0.9);
      box-shadow: 0 12px 28px rgba(0,149,218,0.24);
      font-size: .72rem;
      font-weight: 900;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .project-copy h3 {
      margin: 18px 0 12px;
      max-width: 11ch;
      font-size: clamp(2.1rem, 4vw, 4.6rem);
      line-height: .92;
      letter-spacing: 0;
    }

    .project-copy p {
      margin: 0 0 20px;
      max-width: 48ch;
      color: rgba(255,255,255,0.78);
      line-height: 1.7;
    }

    .project-lab {
      position: relative;
      z-index: 1;
      display: grid;
      gap: 14px;
      margin-top: 26px;
    }

    .lab-window {
      position: relative;
      padding: 18px;
      border-radius: 24px;
      background: rgba(255,255,255,0.1);
      border: 1px solid rgba(255,255,255,0.13);
      box-shadow:
        0 20px 42px rgba(0,0,0,0.18),
        inset 0 1px 0 rgba(255,255,255,0.12);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
    }

    .lab-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 16px;
    }

    .lab-dots {
      display: inline-flex;
      gap: 6px;
    }

    .lab-dots span {
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: rgba(255,255,255,0.34);
    }

    .lab-dots span:first-child {
      background: #0b5fa8;
    }

    .lab-status {
      color: rgba(255,255,255,0.62);
      font-size: .74rem;
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .lab-bars {
      display: grid;
      gap: 10px;
    }

    .lab-bars span {
      display: block;
      height: 10px;
      border-radius: 999px;
      background:
        linear-gradient(90deg, rgba(0,149,218,0.95), rgba(255,255,255,0.2));
      box-shadow: 0 10px 24px rgba(0,149,218,0.16);
    }

    .lab-bars span:nth-child(2) { width: 74%; background: linear-gradient(90deg, rgba(84,157,235,0.86), rgba(255,255,255,0.18)); }
    .lab-bars span:nth-child(3) { width: 58%; background: linear-gradient(90deg, rgba(255,255,255,0.56), rgba(255,255,255,0.14)); }

    .lab-metrics {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
    }

    .lab-metric {
      padding: 14px;
      border-radius: 18px;
      background: rgba(255,255,255,0.09);
      border: 1px solid rgba(255,255,255,0.11);
    }

    .lab-metric strong {
      display: block;
      margin-bottom: 4px;
      font-size: 1.25rem;
      letter-spacing: 0;
    }

    .lab-metric span {
      color: rgba(255,255,255,0.62);
      font-size: .76rem;
      font-weight: 800;
    }

    .project-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 9px;
      margin-bottom: 22px;
    }

    .project-meta span {
      display: inline-flex;
      align-items: center;
      min-height: 32px;
      padding: 0 11px;
      border-radius: 999px;
      background: rgba(255,255,255,0.13);
      border: 1px solid rgba(255,255,255,0.16);
      color: rgba(255,255,255,0.82);
      font-size: .78rem;
      font-weight: 800;
    }

    .project-cta,
    .projects-all {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      min-height: 42px;
      padding: 0 16px;
      border-radius: 999px;
      font-weight: 900;
      text-decoration: none;
    }

    .project-cta {
      color: #17243a;
      background: rgba(255,255,255,0.88);
      box-shadow: 0 16px 32px rgba(0,0,0,0.16);
    }

    .project-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 18px;
      min-width: 0;
      max-width: 100%;
    }

    .project-card {
      min-height: 268px;
      border-radius: 28px;
      align-items: flex-end;
      isolation: isolate;
    }

    .project-card::before {
      background:
        linear-gradient(180deg, rgba(8,18,32,0.36), rgba(8,18,32,0.82)),
        radial-gradient(circle at 12% 12%, rgba(0,149,218,0.18), transparent 38%);
    }

    .project-card-body {
      position: relative;
      z-index: 2;
      width: 100%;
      padding: 20px;
      color: #fff;
    }

    .project-card-badge {
      display: inline-flex;
      margin-bottom: 10px;
      padding: 7px 10px;
      border-radius: 999px;
      color: #fff;
      background: rgba(0,149,218,0.9);
      font-size: .68rem;
      font-weight: 900;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .project-card h3 {
      margin: 0 0 9px;
      color: #fff;
      font-size: 1.18rem;
      line-height: 1.16;
      letter-spacing: 0;
    }

    .project-card p {
      margin: 0;
      color: rgba(255,255,255,0.72);
      line-height: 1.56;
      font-size: .86rem;
    }

    .project-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
      margin-top: 13px;
      transform: translateY(8px);
      opacity: .82;
      transition: opacity .2s ease, transform .2s ease;
    }

    .project-tags span {
      display: inline-flex;
      align-items: center;
      min-height: 25px;
      padding: 5px 9px;
      border-radius: 999px;
      color: rgba(255,255,255,0.86);
      background: rgba(255,255,255,0.11);
      border: 1px solid rgba(255,255,255,0.12);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      font-size: .68rem;
      font-weight: 900;
      letter-spacing: .01em;
    }

    .project-card:hover .project-tags {
      opacity: 1;
      transform: translateY(0);
    }

    .project-card:hover .project-tags span:first-child {
      color: #fff;
      background: rgba(0,149,218,0.74);
      border-color: rgba(0,149,218,0.26);
    }

    .projects-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      margin-top: 20px;
      padding: 18px 20px;
      border-radius: 24px;
      background: rgba(255,255,255,0.62);
      border: 1px solid rgba(24, 78, 134, 0.08);
    }

    .projects-footer p {
      margin: 0;
      max-width: 58ch;
      color: #6d82a0;
      line-height: 1.65;
      font-size: .94rem;
    }

    .projects-all {
      flex: 0 0 auto;
      color: #9c4210;
      background: linear-gradient(180deg, rgba(240, 249, 255, 0.96), rgba(220, 242, 255, 0.78));
      border: 1px solid rgba(0,149,218,0.18);
      box-shadow: 0 12px 26px rgba(0,149,218,0.09);
      transition: transform .2s ease, box-shadow .2s ease;
    }

    .projects-all:hover {
      transform: translateY(-2px);
      box-shadow: 0 18px 34px rgba(0,149,218,0.14);
    }

    .process-section {
      margin-top: 28px;
      padding: clamp(22px, 3vw, 34px);
      border-radius: 40px;
      background:
        radial-gradient(circle at 84% 4%, rgba(0,149,218,0.14), transparent 28%),
        linear-gradient(135deg, rgba(255,255,255,0.86), rgba(244,249,255,0.68));
      border: 1px solid rgba(24, 78, 134, 0.09);
      box-shadow:
        0 24px 70px rgba(17, 43, 80, 0.07),
        inset 0 1px 0 rgba(255,255,255,0.9);
      overflow: hidden;
    }

    .process-layout {
      display: grid;
      grid-template-columns: minmax(320px, .78fr) minmax(0, 1.22fr);
      gap: 28px;
      align-items: start;
    }

    .process-sticky {
      position: sticky;
      top: 128px;
      padding: 26px;
      border-radius: 32px;
      color: #fff;
      background:
        radial-gradient(circle at 20% 8%, rgba(0,149,218,0.34), transparent 30%),
        linear-gradient(135deg, #07111f 0%, #101d31 100%);
      box-shadow:
        0 26px 58px rgba(7, 17, 31, 0.18),
        inset 0 1px 0 rgba(255,255,255,0.1);
      overflow: hidden;
    }

    .process-sticky::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255,255,255,0.04) 1px, transparent 1px);
      background-size: 48px 48px;
      opacity: .52;
      mask-image: linear-gradient(180deg, rgba(0,0,0,.9), transparent 80%);
    }

    .process-sticky > * {
      position: relative;
      z-index: 1;
    }

    .process-sticky h2 {
      margin: 0 0 16px;
      font-size: clamp(2.1rem, 4vw, 4.8rem);
      line-height: .92;
      letter-spacing: 0;
    }

    .process-sticky p {
      margin: 0 0 22px;
      color: rgba(255,255,255,0.72);
      line-height: 1.76;
    }

    .process-cta {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      min-height: 42px;
      padding: 0 16px;
      border-radius: 999px;
      color: #17243a;
      background: rgba(255,255,255,0.9);
      text-decoration: none;
      font-weight: 900;
      box-shadow: 0 16px 34px rgba(0,0,0,0.16);
      transition: transform .2s ease, box-shadow .2s ease;
    }

    .process-action-box {
      margin-top: 24px;
      padding: 18px;
      border-radius: 24px;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.13), rgba(255,255,255,0.07));
      border: 1px solid rgba(255,255,255,0.13);
      box-shadow:
        0 18px 38px rgba(0,0,0,0.16),
        inset 0 1px 0 rgba(255,255,255,0.12);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
    }

    .process-action-box h3 {
      margin: 0 0 8px;
      color: #fff;
      font-size: 1.18rem;
      letter-spacing: 0;
    }

    .process-action-box p {
      margin: 0 0 16px;
      color: rgba(255,255,255,0.66);
      line-height: 1.62;
      font-size: .9rem;
    }

    .process-actions {
      display: grid;
      grid-template-columns: 1fr;
      gap: 10px;
    }

    .process-cta.primary {
      color: #fff;
      background: linear-gradient(135deg, #18aee4, #0b5fa8);
      box-shadow: 0 18px 34px rgba(0,149,218,0.22);
    }

    .process-cta.ghost {
      color: rgba(255,255,255,0.9);
      background: rgba(255,255,255,0.1);
      border: 1px solid rgba(255,255,255,0.12);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }

    .process-cta:hover {
      transform: translateY(-2px);
      box-shadow: 0 22px 42px rgba(0,0,0,0.2);
    }

    .process-cta.primary:hover {
      box-shadow: 0 24px 46px rgba(0,149,218,0.28);
    }

    .process-note {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      margin-top: 24px;
    }

    .process-note span {
      padding: 14px;
      border-radius: 18px;
      background: rgba(255,255,255,0.09);
      border: 1px solid rgba(255,255,255,0.12);
      color: rgba(255,255,255,0.74);
      font-size: .82rem;
      font-weight: 800;
      line-height: 1.45;
    }

    .process-track {
      position: relative;
      display: grid;
      gap: 16px;
    }

    .process-track::before {
      content: "";
      position: absolute;
      top: 28px;
      bottom: 28px;
      left: 31px;
      width: 1px;
      background: linear-gradient(180deg, rgba(0,149,218,0.12), rgba(24,78,134,0.22), rgba(0,149,218,0.12));
    }

    .process-step {
      position: relative;
      display: grid;
      grid-template-columns: 64px 1fr;
      gap: 18px;
      align-items: start;
      min-height: 142px;
      padding: 20px;
      border-radius: 30px;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.92), rgba(249,252,255,0.72));
      border: 1px solid rgba(23, 36, 58, 0.09);
      box-shadow:
        0 18px 44px rgba(17, 43, 80, 0.075),
        inset 0 1px 0 rgba(255,255,255,0.94);
      overflow: hidden;
      transition: transform .32s cubic-bezier(.2,.8,.2,1), box-shadow .32s ease, border-color .32s ease;
    }

    .process-step::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 8% 0%, rgba(0,149,218,0.12), transparent 28%),
        radial-gradient(circle at 96% 18%, rgba(24,78,134,0.1), transparent 30%);
      opacity: 0;
      transition: opacity .22s ease;
    }

    .process-step:hover {
      transform: translateY(-6px);
      border-color: rgba(0,149,218,0.18);
      box-shadow:
        0 26px 58px rgba(17, 43, 80, 0.12),
        0 0 0 1px rgba(0,149,218,0.04);
    }

    .process-step:hover::before {
      opacity: 1;
    }

    .process-index {
      position: relative;
      z-index: 1;
      display: grid;
      place-items: center;
      width: 56px;
      height: 56px;
      border-radius: 20px;
      color: #fff;
      background: linear-gradient(135deg, #18aee4, #0b5fa8);
      font-weight: 900;
      box-shadow: 0 18px 34px rgba(0,149,218,0.2);
    }

    .process-content {
      position: relative;
      z-index: 1;
    }

    .process-content h3 {
      margin: 0 0 8px;
      color: #17243a;
      font-size: 1.24rem;
      letter-spacing: 0;
    }

    .process-content p {
      margin: 0 0 14px;
      color: #6d82a0;
      line-height: 1.7;
      font-size: .92rem;
    }

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

    .process-tags a,
    .process-tags span {
      display: inline-flex;
      align-items: center;
      min-height: 30px;
      padding: 0 10px;
      border-radius: 999px;
      color: #184e86;
      background: rgba(24,78,134,0.07);
      border: 1px solid rgba(24,78,134,0.08);
      text-decoration: none;
      font-size: .74rem;
      font-weight: 900;
      transition: color .2s ease, background .2s ease, transform .2s ease;
    }

    .process-tags a:hover {
      color: #9c4210;
      background: rgba(0,149,218,0.1);
      transform: translateY(-1px);
    }

    .packages-section {
      margin-top: 28px;
      padding: clamp(22px, 3vw, 34px);
      border-radius: 40px;
      background:
        radial-gradient(circle at 12% 0%, rgba(0,149,218,0.12), transparent 30%),
        radial-gradient(circle at 88% 14%, rgba(24,78,134,0.1), transparent 30%),
        linear-gradient(180deg, rgba(255,255,255,0.86), rgba(247,250,255,0.68));
      border: 1px solid rgba(24, 78, 134, 0.09);
      box-shadow:
        0 24px 70px rgba(17, 43, 80, 0.07),
        inset 0 1px 0 rgba(255,255,255,0.9);
      overflow: hidden;
    }

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

    .package-card {
      position: relative;
      display: flex;
      flex-direction: column;
      min-height: 520px;
      padding: 24px;
      border-radius: 30px;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.96), rgba(249,252,255,0.76));
      border: 1px solid rgba(23, 36, 58, 0.09);
      box-shadow:
        0 18px 44px rgba(17, 43, 80, 0.075),
        inset 0 1px 0 rgba(255,255,255,0.94);
      overflow: hidden;
      transition: transform .32s cubic-bezier(.2,.8,.2,1), box-shadow .32s ease, border-color .32s ease;
    }

    .package-card::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 18% 0%, rgba(0,149,218,0.13), transparent 28%),
        radial-gradient(circle at 94% 18%, rgba(24,78,134,0.12), transparent 32%);
      opacity: 0;
      transition: opacity .24s ease;
    }

    .package-card.featured {
      color: #fff;
      background:
        radial-gradient(circle at 22% 0%, rgba(0,149,218,0.34), transparent 28%),
        linear-gradient(135deg, #07111f 0%, #101d31 100%);
      border-color: rgba(255,255,255,0.11);
      box-shadow:
        0 28px 68px rgba(7,17,31,0.2),
        inset 0 1px 0 rgba(255,255,255,0.1);
    }

    .package-card:hover {
      transform: translateY(-7px);
      border-color: rgba(0,149,218,0.18);
      box-shadow:
        0 28px 64px rgba(17, 43, 80, 0.13),
        0 0 0 1px rgba(0,149,218,0.04);
    }

    .package-card:hover::before {
      opacity: 1;
    }

    .package-card > * {
      position: relative;
      z-index: 1;
    }

    .package-badge {
      align-self: flex-start;
      display: inline-flex;
      align-items: center;
      min-height: 32px;
      padding: 0 12px;
      border-radius: 999px;
      color: #9c4210;
      background: rgba(0,149,218,0.1);
      border: 1px solid rgba(0,149,218,0.14);
      font-size: .72rem;
      font-weight: 900;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .package-card.featured .package-badge {
      color: #fff;
      background: rgba(0,149,218,0.9);
      border-color: rgba(255,255,255,0.18);
    }

    .package-card h3 {
      margin: 20px 0 10px;
      color: #17243a;
      font-size: clamp(1.55rem, 2vw, 2.1rem);
      line-height: 1.02;
      letter-spacing: 0;
    }

    .package-card.featured h3 {
      color: #fff;
    }

    .package-card p {
      margin: 0 0 18px;
      color: #6d82a0;
      line-height: 1.7;
      font-size: .94rem;
    }

    .package-card.featured p {
      color: rgba(255,255,255,0.72);
    }

    .package-list {
      display: grid;
      gap: 10px;
      margin: 0 0 22px;
      padding: 0;
      list-style: none;
    }

    .package-list li {
      display: grid;
      grid-template-columns: 22px 1fr;
      gap: 10px;
      align-items: start;
      color: #33435a;
      line-height: 1.52;
      font-size: .9rem;
    }

    .package-card.featured .package-list li {
      color: rgba(255,255,255,0.76);
    }

    .package-list li::before {
      content: "";
      width: 22px;
      height: 22px;
      border-radius: 999px;
      background:
        url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 12.5 9.2 16.7 19 7' stroke='%23ff741d' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px 14px no-repeat,
        rgba(0,149,218,0.1);
    }

    .package-actions {
      display: grid;
      gap: 10px;
      margin-top: auto;
    }

    .package-action {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 44px;
      padding: 0 16px;
      border-radius: 999px;
      border: 1px solid rgba(0,149,218,0.18);
      color: #9c4210;
      background: linear-gradient(180deg, rgba(240, 249, 255, 0.96), rgba(220, 242, 255, 0.78));
      box-shadow: 0 12px 26px rgba(0,149,218,0.09);
      font: inherit;
      font-weight: 900;
      text-decoration: none;
      cursor: pointer;
      transition: transform .2s ease, box-shadow .2s ease, color .2s ease;
    }

    .package-card.featured .package-action {
      color: #17243a;
      background: rgba(255,255,255,0.92);
      border-color: rgba(255,255,255,0.28);
      box-shadow: 0 18px 36px rgba(0,0,0,0.18);
    }

    .package-action:hover {
      transform: translateY(-2px);
      box-shadow: 0 18px 34px rgba(0,149,218,0.14);
    }

    .package-detail {
      color: #6d82a0;
      text-align: center;
      text-decoration: none;
      font-size: .84rem;
      font-weight: 900;
    }

    .package-card.featured .package-detail {
      color: rgba(255,255,255,0.72);
    }

    .solutions-section {
      margin-top: 28px;
      padding: clamp(22px, 3vw, 34px);
      border-radius: 40px;
      color: #fff;
      background:
        radial-gradient(circle at 12% 12%, rgba(0,149,218,0.22), transparent 30%),
        radial-gradient(circle at 88% 8%, rgba(84,157,235,0.18), transparent 28%),
        linear-gradient(135deg, #07111f 0%, #0e1c30 48%, #12253d 100%);
      box-shadow:
        0 30px 70px rgba(7,17,31,0.2),
        inset 0 1px 0 rgba(255,255,255,0.1);
      overflow: hidden;
    }

    .solutions-section .section-head h2,
    .solutions-section .section-kicker {
      color: #fff;
    }

    .solutions-section .section-head p {
      color: rgba(235,242,250,0.68);
    }

    .solutions-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 16px;
    }

    .solution-card {
      position: relative;
      min-height: 260px;
      padding: 22px;
      border-radius: 28px;
      overflow: hidden;
      color: #fff;
      text-decoration: none;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.11), rgba(255,255,255,0.055));
      border: 1px solid rgba(255,255,255,0.11);
      box-shadow:
        0 18px 44px rgba(0,0,0,0.16),
        inset 0 1px 0 rgba(255,255,255,0.1);
      transition: transform .32s cubic-bezier(.2,.8,.2,1), border-color .32s ease, box-shadow .32s ease;
    }

    .solution-card::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 14% 0%, rgba(0,149,218,0.22), transparent 30%),
        linear-gradient(180deg, transparent, rgba(255,255,255,0.045));
      opacity: 0;
      transition: opacity .24s ease;
    }

    .solution-card:hover {
      transform: translateY(-7px);
      border-color: rgba(0,149,218,0.28);
      box-shadow:
        0 28px 64px rgba(0,0,0,0.22),
        0 0 0 1px rgba(0,149,218,0.05);
    }

    .solution-card:hover::before {
      opacity: 1;
    }

    .solution-card > * {
      position: relative;
      z-index: 1;
    }

    .solution-icon {
      display: grid;
      place-items: center;
      width: 52px;
      height: 52px;
      border-radius: 18px;
      color: #18aee4;
      background: rgba(255,255,255,0.1);
      border: 1px solid rgba(255,255,255,0.12);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
    }

    .solution-icon svg {
      width: 23px;
      height: 23px;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
      fill: none;
    }

    .solution-card h3 {
      margin: 22px 0 10px;
      font-size: 1.34rem;
      line-height: 1.08;
      letter-spacing: 0;
    }

    .solution-card p {
      margin: 0 0 18px;
      color: rgba(235,242,250,0.68);
      line-height: 1.66;
      font-size: .9rem;
    }

    .solution-link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: rgba(255,255,255,0.86);
      font-size: .84rem;
      font-weight: 900;
    }

    .solution-link::after {
      content: "";
      width: 8px;
      height: 8px;
      border-right: 2px solid currentColor;
      border-bottom: 2px solid currentColor;
      transform: rotate(-45deg);
      transition: transform .18s ease;
    }

    .solution-card:hover .solution-link::after {
      transform: translateX(4px) rotate(-45deg);
    }

    .testimonials-section {
      position: relative;
      margin-top: 28px;
      min-height: 680px;
      padding: clamp(26px, 4vw, 56px);
      border-radius: 44px;
      color: #fff;
      background:
        radial-gradient(circle at 16% 8%, rgba(0,149,218,0.26), transparent 26%),
        radial-gradient(circle at 88% 6%, rgba(44,226,128,0.1), transparent 28%),
        linear-gradient(135deg, #050a12 0%, #0a121f 46%, #101b2b 100%);
      box-shadow:
        0 36px 90px rgba(4, 11, 22, 0.28),
        inset 0 1px 0 rgba(255,255,255,0.08);
      overflow: hidden;
      isolation: isolate;
    }

    .testimonials-section::before {
      content: "MÜŞTERİLERİMİZ";
      position: absolute;
      left: 50%;
      top: 44%;
      z-index: -1;
      transform: translate(-50%, -50%);
      color: rgba(255,255,255,0.035);
      font-size: clamp(5rem, 13vw, 13rem);
      font-weight: 900;
      letter-spacing: 0;
      white-space: nowrap;
      pointer-events: none;
    }

    .testimonials-section::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background:
        linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255,255,255,0.035) 1px, transparent 1px);
      background-size: 62px 62px;
      mask-image: radial-gradient(circle at 50% 26%, #000, transparent 72%);
    }

    .testimonial-head {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(260px, 380px);
      gap: 24px;
      align-items: end;
      margin-bottom: 34px;
    }

    .testimonial-head h2 {
      margin: 0;
      max-width: 820px;
      font-size: clamp(2.2rem, 5vw, 5.6rem);
      line-height: .9;
      letter-spacing: 0;
    }

    .testimonial-head p {
      margin: 0;
      color: rgba(235,242,250,0.66);
      line-height: 1.76;
    }

    .testimonial-orbit {
      position: relative;
      display: grid;
      gap: 18px;
      width: 100%;
      max-width: 100%;
      margin-inline: 0;
      padding-block: 6px;
      overflow: hidden;
      mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
    }

    .testimonial-row {
      display: flex;
      gap: 18px;
      width: max-content;
      animation: testimonialMarqueeLeft 34s linear infinite;
      will-change: transform;
    }

    .testimonial-row:nth-child(2) {
      animation-name: testimonialMarqueeRight;
      animation-duration: 38s;
    }

    .testimonial-row:nth-child(3) {
      animation-duration: 42s;
    }

    .testimonial-orbit:hover .testimonial-row {
      animation-play-state: paused;
    }

    .testimonial-float {
      flex: 0 0 430px;
      display: grid;
      gap: 14px;
      min-height: 188px;
      padding: 20px;
      border-radius: 28px;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.065));
      border: 1px solid rgba(255,255,255,0.12);
      box-shadow:
        0 24px 56px rgba(0,0,0,0.28),
        inset 0 1px 0 rgba(255,255,255,0.11);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
    }

    @keyframes testimonialMarqueeLeft {
      from { transform: translateX(0); }
      to { transform: translateX(-50%); }
    }

    @keyframes testimonialMarqueeRight {
      from { transform: translateX(-50%); }
      to { transform: translateX(0); }
    }

    .testimonial-text {
      margin: 0;
      color: rgba(255,255,255,0.78);
      line-height: 1.72;
      font-size: .96rem;
    }

    .testimonial-person {
      display: flex;
      align-items: center;
      gap: 12px;
      padding-top: 14px;
      border-top: 1px solid rgba(255,255,255,0.1);
    }

    .testimonial-avatar {
      position: relative;
      display: grid;
      place-items: center;
      width: 44px;
      height: 44px;
      border-radius: 999px;
      color: transparent;
      background:
        radial-gradient(circle at 50% 42%, #c7efff 0 22%, transparent 23%),
        radial-gradient(circle at 50% 70%, #ffffff 0 25%, transparent 26%),
        linear-gradient(135deg, #18aee4, #0b5fa8);
      box-shadow: 0 14px 28px rgba(0,149,218,0.22);
      font-weight: 900;
      overflow: hidden;
    }

    .testimonial-avatar::before {
      content: "";
      position: absolute;
      top: 10px;
      width: 21px;
      height: 10px;
      border-radius: 999px 999px 8px 8px;
      background: rgba(23,36,58,0.82);
    }

    .testimonial-avatar::after {
      content: "";
      position: absolute;
      bottom: 5px;
      width: 30px;
      height: 15px;
      border-radius: 999px 999px 0 0;
      background: rgba(255,255,255,0.52);
    }

    .testimonial-person strong {
      display: block;
      color: #fff;
      font-size: .94rem;
    }

    .testimonial-person span {
      display: block;
      margin-top: 2px;
      color: rgba(255,255,255,0.54);
      font-size: .78rem;
      font-weight: 800;
    }

    .testimonial-strip {
      position: relative;
      z-index: 2;
      display: flex;
      gap: 12px;
      width: max-content;
      margin-top: 20px;
      animation: testimonialMarqueeLeft 28s linear infinite;
    }

    .testimonial-chip {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      min-height: 54px;
      padding: 0 18px;
      border-radius: 999px;
      color: rgba(255,255,255,0.8);
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.1);
      font-size: .86rem;
      font-weight: 900;
      white-space: nowrap;
    }

    .testimonial-chip span {
      color: #18aee4;
    }

    .contact-section {
      margin-top: 28px;
      padding: clamp(22px, 3vw, 34px);
      border-radius: 40px;
      background:
        radial-gradient(circle at 12% 0%, rgba(0,149,218,0.1), transparent 30%),
        linear-gradient(180deg, rgba(255,255,255,0.9), rgba(246,250,255,0.72));
      border: 1px solid rgba(24,78,134,0.08);
      box-shadow:
        0 24px 70px rgba(17,43,80,0.07),
        inset 0 1px 0 rgba(255,255,255,0.9);
    }

    .contact-layout {
      display: grid;
      grid-template-columns: minmax(320px, .86fr) minmax(0, 1.14fr);
      gap: 22px;
      align-items: stretch;
    }

    .contact-card {
      padding: 26px;
      border-radius: 32px;
      color: #fff;
      background:
        radial-gradient(circle at 18% 8%, rgba(0,149,218,0.34), transparent 28%),
        linear-gradient(135deg, #07111f 0%, #101d31 100%);
      box-shadow:
        0 26px 58px rgba(7,17,31,0.18),
        inset 0 1px 0 rgba(255,255,255,0.1);
    }

    .contact-card h2 {
      margin: 0 0 14px;
      font-size: clamp(2rem, 3.5vw, 4rem);
      line-height: .94;
      letter-spacing: 0;
    }

    .contact-card p {
      margin: 0 0 22px;
      color: rgba(235,242,250,0.7);
      line-height: 1.75;
    }

    .contact-list {
      display: grid;
      gap: 10px;
      margin-bottom: 22px;
    }

    .contact-item {
      display: flex;
      align-items: center;
      gap: 12px;
      min-height: 54px;
      padding: 10px 12px;
      border-radius: 18px;
      color: rgba(255,255,255,0.84);
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.1);
      text-decoration: none;
      font-weight: 850;
    }

    .contact-item .icon-box {
      color: #18aee4;
      background: rgba(255,255,255,0.1);
    }

    .contact-actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    .contact-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 46px;
      padding: 0 14px;
      border-radius: 999px;
      color: #17243a;
      background: rgba(255,255,255,0.92);
      text-decoration: none;
      font-weight: 900;
      box-shadow: 0 16px 34px rgba(0,0,0,0.16);
      transition: transform .2s ease, box-shadow .2s ease;
    }

    .contact-btn.primary {
      color: #fff;
      background: linear-gradient(135deg, #18aee4, #0b5fa8);
      box-shadow: 0 18px 34px rgba(0,149,218,0.24);
    }

    .contact-btn:hover {
      transform: translateY(-2px);
    }

    .map-card {
      position: relative;
      min-height: 420px;
      overflow: hidden;
      border-radius: 32px;
      background: #dfe8f3;
      border: 1px solid rgba(24,78,134,0.1);
      box-shadow: 0 22px 58px rgba(17,43,80,0.11);
    }

    .map-card iframe {
      width: 100%;
      height: 100%;
      min-height: 420px;
      border: 0;
      filter: saturate(.84) contrast(.96);
    }

    .map-overlay {
      position: absolute;
      left: 18px;
      right: 18px;
      bottom: 18px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 16px;
      border-radius: 22px;
      background: rgba(255,255,255,0.88);
      border: 1px solid rgba(24,78,134,0.1);
      box-shadow: 0 18px 44px rgba(17,43,80,0.16);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
    }

    .map-overlay strong {
      display: block;
      color: #17243a;
      font-size: .98rem;
      margin-bottom: 4px;
    }

    .map-overlay span {
      color: #6d82a0;
      font-size: .82rem;
      font-weight: 800;
    }

    .map-route {
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      min-height: 40px;
      padding: 0 14px;
      border-radius: 999px;
      color: #fff;
      background: linear-gradient(135deg, #18aee4, #0b5fa8);
      text-decoration: none;
      font-weight: 900;
      box-shadow: 0 14px 28px rgba(0,149,218,0.22);
    }

    .final-cta {
      position: relative;
      margin-top: 28px;
      padding: clamp(26px, 4vw, 54px);
      border-radius: 44px;
      color: #fff;
      background:
        radial-gradient(circle at 18% 18%, rgba(0,149,218,0.34), transparent 28%),
        radial-gradient(circle at 82% 10%, rgba(84,157,235,0.18), transparent 30%),
        linear-gradient(135deg, #07111f 0%, #101d31 46%, #142842 100%);
      box-shadow:
        0 34px 80px rgba(7,17,31,0.22),
        inset 0 1px 0 rgba(255,255,255,0.1);
      overflow: hidden;
    }

    .final-cta::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255,255,255,0.035) 1px, transparent 1px);
      background-size: 58px 58px;
      opacity: .56;
      mask-image: radial-gradient(circle at 50% 0%, #000, transparent 78%);
    }

    .final-cta-inner {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 28px;
      align-items: center;
    }

    .final-cta h2 {
      margin: 0 0 14px;
      max-width: 820px;
      font-size: clamp(2.2rem, 5vw, 5.4rem);
      line-height: .92;
      letter-spacing: 0;
    }

    .final-cta p {
      margin: 0;
      max-width: 680px;
      color: rgba(235,242,250,0.72);
      line-height: 1.76;
    }

    .final-actions {
      display: grid;
      gap: 12px;
      min-width: 250px;
    }

    .final-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      min-height: 52px;
      padding: 0 20px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,0.16);
      color: #fff;
      background: rgba(255,255,255,0.09);
      text-decoration: none;
      font: inherit;
      font-weight: 900;
      cursor: pointer;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
      transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
    }

    .final-btn.primary {
      color: #fff;
      background: linear-gradient(135deg, #18aee4, #0b5fa8);
      box-shadow: 0 22px 42px rgba(0,149,218,0.25);
    }

    .final-btn:hover {
      transform: translateY(-2px);
      background: rgba(255,255,255,0.13);
    }

    .final-btn.primary:hover {
      box-shadow: 0 28px 52px rgba(0,149,218,0.32);
    }

    .final-proof {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
      margin-top: 30px;
    }

    .final-proof span {
      padding: 16px;
      border-radius: 20px;
      color: rgba(255,255,255,0.76);
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.1);
      font-size: .86rem;
      font-weight: 800;
      line-height: 1.48;
    }

    .site-footer {
      margin-top: 28px;
      padding: clamp(24px, 3vw, 38px);
      border-radius: 38px 38px 0 0;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.9), rgba(246,250,255,0.72));
      border: 1px solid rgba(24, 78, 134, 0.08);
      box-shadow:
        0 -14px 50px rgba(17,43,80,0.055),
        inset 0 1px 0 rgba(255,255,255,0.9);
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 1.2fr repeat(3, minmax(0, .75fr)) 1fr;
      gap: 28px;
    }

    .footer-brand img {
      width: 170px;
      height: auto;
      display: block;
      margin-bottom: 16px;
    }

    .footer-brand p {
      margin: 0;
      max-width: 38ch;
      color: #6d82a0;
      line-height: 1.7;
      font-size: .92rem;
    }

    .footer-col h3 {
      margin: 0 0 14px;
      color: #17243a;
      font-size: .94rem;
      letter-spacing: 0;
    }

    .footer-links {
      display: grid;
      gap: 10px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .footer-links a,
    .footer-contact a,
    .footer-contact span {
      color: #6d82a0;
      text-decoration: none;
      font-size: .88rem;
      line-height: 1.5;
      transition: color .18s ease, transform .18s ease;
    }

    .footer-links a:hover,
    .footer-contact a:hover {
      color: #0b5fa8;
      transform: translateX(2px);
    }

    .footer-contact {
      display: grid;
      gap: 10px;
    }

    .footer-bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      margin-top: 28px;
      padding-top: 18px;
      border-top: 1px solid rgba(24,78,134,0.08);
      color: #8090a8;
      font-size: .82rem;
    }

    .footer-legal {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
    }

    .footer-legal a {
      color: inherit;
      text-decoration: none;
    }

    .footer-legal a:hover {
      color: #0b5fa8;
    }

    .trust-band {
      margin-top: 24px;
    }

    .trust-band-card {
      position: relative;
      overflow: hidden;
      display: grid;
      grid-template-columns: minmax(280px, .78fr) minmax(460px, 1.22fr);
      gap: clamp(16px, 2vw, 26px);
      align-items: center;
      padding: clamp(18px, 2.4vw, 30px);
      border-radius: 28px;
      color: #fff;
      background:
        radial-gradient(circle at 11% 0%, rgba(0,149,218,0.32), transparent 30%),
        linear-gradient(135deg, #082039 0%, #0a3761 56%, #0b5f8c 100%);
      border: 1px solid rgba(255,255,255,0.12);
      box-shadow:
        0 18px 42px rgba(9,34,58,0.13),
        inset 0 1px 0 rgba(255,255,255,0.14);
      isolation: isolate;
    }

    .trust-band-card::after {
      content: "";
      position: absolute;
      right: -58px;
      bottom: -74px;
      width: 260px;
      height: 260px;
      opacity: .08;
      background: url("/storage/uploads/brand/muttas-logo.png") center / contain no-repeat;
      pointer-events: none;
    }

    .trust-copy,
    .trust-contact-grid,
    .trust-actions {
      position: relative;
      z-index: 1;
    }

    .trust-copy h2 {
      margin: 6px 0 10px;
      max-width: 11ch;
      color: #fff;
      font-size: clamp(1.7rem, 2.8vw, 3.15rem);
      line-height: .98;
      letter-spacing: 0;
    }

    .trust-copy p {
      margin: 0;
      max-width: 44ch;
      color: rgba(235,245,255,0.72);
      font-size: .94rem;
      line-height: 1.65;
    }

    .trust-contact-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    .trust-contact-card {
      display: grid;
      grid-template-columns: 42px minmax(0, 1fr);
      gap: 12px;
      align-items: center;
      min-height: 78px;
      padding: 13px;
      border-radius: 18px;
      color: rgba(255,255,255,0.9);
      background: rgba(255,255,255,0.09);
      border: 1px solid rgba(255,255,255,0.12);
      text-decoration: none;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
      transition: transform .2s ease, background .2s ease, border-color .2s ease;
    }

    .trust-contact-card:hover {
      transform: translateY(-2px);
      background: rgba(255,255,255,0.13);
      border-color: rgba(255,255,255,0.18);
    }

    .trust-contact-card .icon-box {
      color: #fff;
      background: rgba(0,149,218,0.28);
      border: 1px solid rgba(255,255,255,0.12);
    }

    .trust-contact-card small,
    .footer-contact small {
      display: block;
      margin-bottom: 3px;
      color: rgba(220,241,255,0.62);
      font-size: .68rem;
      font-weight: 900;
      letter-spacing: .06em;
      text-transform: uppercase;
    }

    .trust-contact-card strong,
    .trust-contact-card span {
      display: block;
      min-width: 0;
      overflow-wrap: anywhere;
      font-size: .9rem;
      line-height: 1.35;
      font-weight: 900;
    }

    .trust-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      grid-column: 1 / -1;
    }

    .trust-action {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 40px;
      padding: 0 16px;
      border-radius: 999px;
      color: #082039;
      background: rgba(255,255,255,0.92);
      font-size: .8rem;
      font-weight: 950;
      text-decoration: none;
      transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
    }

    .trust-action:hover {
      transform: translateY(-1px);
      background: #fff;
      box-shadow: 0 14px 28px rgba(0,0,0,0.13);
    }

    .site-footer {
      --footer-bg: #06213a;
      position: relative;
      overflow: visible;
      margin-top: clamp(76px, 8.5vw, 128px);
      padding: 0;
      border-radius: 0;
      color: rgba(232,244,255,0.82);
      background: transparent;
      border: 0;
      box-shadow: none;
    }

    .site-footer::before {
      content: "";
      position: absolute;
      right: max(24px, calc((100% - 1500px) / 2 + 24px));
      top: 28px;
      width: 310px;
      height: 310px;
      z-index: 2;
      opacity: .06;
      background: url("/storage/uploads/brand/muttas-logo.png") center / contain no-repeat;
      pointer-events: none;
    }

    .footer-logo-orb {
      position: absolute;
      left: 50%;
      top: 0;
      z-index: 3;
      display: grid;
      place-items: center;
      width: clamp(118px, 10vw, 176px);
      height: clamp(118px, 10vw, 176px);
      box-sizing: border-box;
      padding: clamp(8px, .8vw, 13px);
      transform: translate(-50%, -50%);
      border-radius: 999px;
      background: var(--footer-bg);
      border: 1px solid rgba(255,255,255,0.12);
      box-shadow:
        0 20px 42px rgba(3,17,34,0.28),
        0 0 0 9px rgba(255,255,255,0.07),
        inset 0 1px 0 rgba(255,255,255,0.08);
      text-decoration: none;
    }

    .footer-logo-orb img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      border-radius: 999px;
      background: transparent;
      box-shadow: none;
      filter: drop-shadow(0 8px 14px rgba(8,32,57,0.14));
    }

    .footer-body {
      position: relative;
      z-index: 1;
      overflow: hidden;
      margin-top: 0;
      background: var(--footer-bg);
      border: 0;
      border-radius: 0;
      box-shadow: 0 -14px 42px rgba(9,34,58,0.09);
    }

    .footer-identity {
      position: relative;
      z-index: 1;
      display: grid;
      justify-items: center;
      gap: 10px;
      padding: clamp(94px, 8.2vw, 142px) clamp(22px, 4vw, 58px) clamp(24px, 3vw, 40px);
      text-align: center;
      border-bottom: 1px solid rgba(255,255,255,0.14);
    }

    .footer-identity h2 {
      margin: 0;
      color: #fff;
      font-size: clamp(1.85rem, 3vw, 3.05rem);
      line-height: 1;
      letter-spacing: 0;
      text-shadow: 0 16px 34px rgba(0,0,0,0.18);
    }

    .footer-identity p {
      margin: 0;
      color: rgba(232,244,255,0.78);
      font-size: clamp(1rem, 1.55vw, 1.45rem);
      line-height: 1.45;
      font-weight: 800;
    }

    .footer-top {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: minmax(280px, .9fr) minmax(0, 1.1fr);
      gap: clamp(18px, 2.4vw, 34px);
      align-items: center;
      padding: clamp(22px, 3vw, 38px);
      border-bottom: 1px solid rgba(255,255,255,0.1);
    }

    .footer-brand {
      display: grid;
      grid-template-columns: 92px minmax(0, 1fr);
      gap: 16px;
      align-items: center;
    }

    .footer-brand img {
      width: 92px;
      height: auto;
      display: block;
      margin: 0;
      filter: drop-shadow(0 14px 28px rgba(0,0,0,0.18));
    }

    .footer-brand h2 {
      margin: 0 0 6px;
      color: #fff;
      font-size: clamp(1.45rem, 2vw, 2.1rem);
      line-height: 1;
      letter-spacing: 0;
    }

    .footer-brand p {
      margin: 0;
      max-width: 58ch;
      color: rgba(232,244,255,0.68);
      font-size: .88rem;
      line-height: 1.58;
    }

    .footer-service-strip {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
    }

    .footer-service-strip a {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      min-height: 44px;
      padding: 0 12px;
      border-radius: 14px;
      color: rgba(255,255,255,0.86);
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.1);
      font-size: .78rem;
      font-weight: 900;
      text-decoration: none;
      transition: transform .2s ease, background .2s ease;
    }

    .footer-service-strip a::after {
      content: "›";
      color: #18aee4;
      font-size: 1.1rem;
      line-height: 1;
    }

    .footer-service-strip a:hover {
      transform: translateY(-1px);
      background: rgba(255,255,255,0.12);
    }

    .footer-grid {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: clamp(16px, 2vw, 28px);
      padding: clamp(20px, 2.6vw, 34px) clamp(22px, 3vw, 38px);
    }

    .footer-col h3 {
      margin: 0 0 13px;
      color: #fff;
      font-size: .82rem;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .footer-links {
      display: grid;
      gap: 9px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .footer-links a,
    .footer-contact a,
    .footer-contact span {
      color: rgba(232,244,255,0.66);
      text-decoration: none;
      font-size: .86rem;
      line-height: 1.48;
      transition: color .18s ease, transform .18s ease;
    }

    .footer-links a:hover,
    .footer-contact a:hover {
      color: #fff;
      transform: translateX(2px);
    }

    .footer-contact {
      display: grid;
      gap: 10px;
    }

    .footer-contact a,
    .footer-contact span {
      display: block;
    }

    .footer-bottom {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      margin: 0;
      padding: 16px clamp(22px, 3vw, 38px);
      border-top: 1px solid rgba(255,255,255,0.1);
      color: rgba(232,244,255,0.54);
      font-size: .78rem;
    }

    .footer-legal {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
    }

    .footer-legal a {
      color: inherit;
      text-decoration: none;
      transition: color .18s ease;
    }

    .footer-legal a:hover {
      color: #fff;
    }

    .quick-dock {
      position: fixed;
      right: clamp(14px, 2vw, 28px);
      bottom: clamp(14px, 2vw, 28px);
      z-index: 120;
      display: grid;
      gap: 10px;
      justify-items: end;
      pointer-events: none;
    }

    .quick-socials {
      display: grid;
      gap: 8px;
      opacity: 0;
      transform: translateY(14px) scale(.96);
      pointer-events: none;
      visibility: hidden;
      transition: opacity .24s ease, transform .24s cubic-bezier(.2,.8,.2,1);
    }

    .quick-dock.social-open .quick-socials {
      opacity: 1;
      transform: translateY(0) scale(1);
      pointer-events: auto;
      visibility: visible;
    }

    .quick-dock:not(.social-open) .quick-socials,
    .quick-dock:not(.social-open) .quick-socials .quick-btn {
      pointer-events: none;
    }

    .quick-btn {
      position: relative;
      display: grid;
      place-items: center;
      width: 54px;
      height: 54px;
      border-radius: 20px;
      border: 1px solid rgba(255,255,255,0.6);
      color: #184e86;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.96), rgba(246,250,255,0.82));
      box-shadow:
        0 18px 40px rgba(17,43,80,0.16),
        inset 0 1px 0 rgba(255,255,255,0.9);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      text-decoration: none;
      cursor: pointer;
      pointer-events: auto;
      transition: transform .2s ease, box-shadow .2s ease, color .2s ease, background .2s ease, opacity .2s ease;
    }

    .quick-btn:hover {
      transform: translateY(-3px);
      box-shadow:
        0 24px 48px rgba(17,43,80,0.2),
        0 0 0 1px rgba(0,149,218,0.05);
    }

    .quick-btn svg {
      width: 22px;
      height: 22px;
      stroke: currentColor;
      stroke-width: 1.9;
      stroke-linecap: round;
      stroke-linejoin: round;
      fill: none;
    }

    .quick-btn.whatsapp {
      color: #fff;
      background: linear-gradient(135deg, #25d366, #128c7e);
      border-color: rgba(255,255,255,0.22);
    }

    .quick-btn.phone {
      color: #fff;
      background: linear-gradient(135deg, #18aee4, #0b5fa8);
      border-color: rgba(255,255,255,0.22);
    }

    .quick-btn.social-toggle {
      color: #17243a;
    }

    .quick-btn.to-top {
      opacity: 0;
      transform: translateY(12px);
      pointer-events: none;
    }

    .quick-dock.show-top .quick-btn.to-top {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }

    .quick-btn::after {
      content: attr(aria-label);
      position: absolute;
      right: calc(100% + 10px);
      top: 50%;
      transform: translateY(-50%) translateX(6px);
      padding: 8px 10px;
      border-radius: 999px;
      color: #fff;
      background: rgba(7,17,31,0.86);
      box-shadow: 0 12px 28px rgba(7,17,31,0.18);
      font-size: .76rem;
      font-weight: 900;
      white-space: nowrap;
      opacity: 0;
      pointer-events: none;
      transition: opacity .18s ease, transform .18s ease;
    }

    .quick-btn:hover::after {
      opacity: 1;
      transform: translateY(-50%) translateX(0);
    }

    .quick-socials .quick-btn {
      width: 48px;
      height: 48px;
      border-radius: 18px;
    }

    .why-grid {
      display: grid;
      grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr);
      gap: 26px;
      align-items: center;
    }

    .why-copy h2 {
      margin: 0 0 16px;
      font-size: clamp(2.2rem, 4.6vw, 5rem);
      line-height: .92;
      letter-spacing: 0;
    }

    .why-copy p {
      margin: 0;
      max-width: 56ch;
      color: rgba(235,242,250,0.72);
      line-height: 1.8;
    }

    .why-stack {
      position: relative;
      min-height: auto;
    }

    .why-panel {
      position: relative;
      display: grid;
      grid-template-columns: 58px 1fr;
      gap: 16px;
      align-items: start;
      min-height: 130px;
      padding: 20px;
      margin-bottom: 14px;
      border-radius: 28px;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.06));
      border: 1px solid rgba(255,255,255,0.11);
      box-shadow: 0 20px 44px rgba(0,0,0,0.22);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      opacity: 0;
      transform: translateY(44px) scale(.98);
      transition: opacity .55s ease, transform .55s cubic-bezier(.2,.8,.2,1), border-color .2s ease;
    }

    .why-panel:nth-child(1) { z-index: 4; margin-right: 108px; }
    .why-panel:nth-child(2) { z-index: 3; margin-left: 36px; margin-right: 72px; }
    .why-panel:nth-child(3) { z-index: 2; margin-left: 72px; margin-right: 36px; }
    .why-panel:nth-child(4) { z-index: 1; margin-left: 108px; }

    .why-panel.revealed {
      opacity: 1;
      transform: translateY(0) scale(1);
    }

    .why-panel:hover {
      border-color: rgba(0,149,218,0.34);
      transform: translateY(-4px) scale(1.01);
    }

    .why-number {
      display: grid;
      place-items: center;
      width: 54px;
      height: 54px;
      border-radius: 20px;
      color: #fff;
      background: linear-gradient(135deg, #18aee4, #0b5fa8);
      font-weight: 900;
      box-shadow: 0 18px 32px rgba(0,149,218,0.22);
    }

    .why-panel h3 {
      margin: 0 0 6px;
      font-size: 1.16rem;
      letter-spacing: 0;
    }

    .why-panel p {
      margin: 0;
      color: rgba(235,242,250,0.68);
      line-height: 1.66;
      font-size: .9rem;
    }

    .overlay {
      position: fixed;
      inset: 0;
      background: rgba(15, 31, 54, 0.16);
      opacity: 0;
      pointer-events: none;
      transition: .2s ease;
      z-index: 40;
    }

    .quote-modal {
      position: fixed;
      inset: 0;
      z-index: 90;
      display: grid;
      place-items: center;
      padding: 22px;
      background:
        radial-gradient(circle at 20% 10%, rgba(0,149,218,0.18), transparent 26%),
        radial-gradient(circle at 80% 0%, rgba(24,78,134,0.18), transparent 24%),
        rgba(10, 24, 43, 0.44);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      opacity: 0;
      pointer-events: none;
      transition: opacity .24s ease;
    }

    body.quote-open .quote-modal {
      opacity: 1;
      pointer-events: auto;
    }

    body.quote-open {
      overflow: hidden;
    }

    .quote-dialog {
      width: min(720px, 100%);
      max-height: min(760px, calc(100vh - 44px));
      display: grid;
      grid-template-rows: auto minmax(0, 1fr);
      overflow: hidden;
      border-radius: 30px;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.98), rgba(244,249,255,0.96)),
        #fff;
      border: 1px solid rgba(255,255,255,0.92);
      box-shadow: 0 34px 80px rgba(8, 28, 58, 0.28);
      transform: translateY(18px) scale(.98);
      transition: transform .24s ease;
    }

    body.quote-open .quote-dialog {
      transform: translateY(0) scale(1);
    }

    .quote-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 18px;
      padding: 24px 24px 16px;
      border-bottom: 1px solid rgba(18,55,97,0.08);
    }

    .quote-kicker {
      display: inline-flex;
      margin-bottom: 8px;
      color: var(--brand);
      font-size: .75rem;
      font-weight: 900;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .quote-head h3 {
      margin: 0 0 6px;
      font-size: clamp(1.55rem, 4vw, 2.15rem);
      letter-spacing: 0;
      color: #1c2c47;
    }

    .quote-head p {
      margin: 0;
      max-width: 54ch;
      color: #6f84a2;
      line-height: 1.65;
      font-size: .96rem;
    }

    .quote-close {
      width: 44px;
      height: 44px;
      border: 0;
      border-radius: 16px;
      background: #eef5fd;
      color: #1d2b44;
      cursor: pointer;
      position: relative;
      flex-shrink: 0;
    }

    .quote-close::before,
    .quote-close::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      width: 18px;
      height: 2px;
      background: currentColor;
      border-radius: 999px;
    }

    .quote-close::before { transform: translate(-50%, -50%) rotate(45deg); }
    .quote-close::after { transform: translate(-50%, -50%) rotate(-45deg); }

    .quote-form {
      display: grid;
      gap: 14px;
      padding: 20px 24px 24px;
      overflow-y: auto;
      overscroll-behavior: contain;
    }

    .form-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
    }

    .field {
      display: grid;
      gap: 7px;
    }

    .field.full {
      grid-column: 1 / -1;
    }

    .field label {
      font-size: .82rem;
      font-weight: 800;
      color: #2a3a55;
    }

    .field input,
    .field select,
    .field textarea {
      width: 100%;
      border: 1px solid rgba(18,55,97,0.1);
      border-radius: 16px;
      background: rgba(255,255,255,0.82);
      color: #1d2b44;
      outline: none;
      padding: 13px 14px;
      font: inherit;
      font-size: .94rem;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.9);
      transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
    }

    .field textarea {
      min-height: 120px;
      resize: vertical;
    }

    .field input:focus,
    .field select:focus,
    .field textarea:focus {
      border-color: rgba(0,149,218,0.5);
      background: #fff;
      box-shadow: 0 0 0 4px rgba(0,149,218,0.1);
    }

    .quote-submit {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      gap: 12px;
      min-height: 54px;
      border: 0;
      border-radius: 18px;
      color: #fff;
      background: linear-gradient(135deg, #18aee4, #0b5fa8);
      box-shadow: 0 18px 34px rgba(0,149,218,0.24);
      font-weight: 900;
      cursor: pointer;
    }

    .mobile-drawer {
      display: none;
    }

    .mobile-brand {
      display: none;
    }

    .menu-toggle {
      display: none;
      width: 46px;
      height: 46px;
      border: 0;
      border-radius: 14px;
      background: rgba(255,255,255,0.92);
      box-shadow: 0 10px 22px rgba(17,43,80,0.08);
      position: relative;
      cursor: pointer;
      flex-shrink: 0;
    }

    .menu-toggle span,
    .menu-toggle::before,
    .menu-toggle::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      width: 20px;
      height: 2px;
      background: var(--text);
      border-radius: 999px;
      transform: translate(-50%, -50%);
      transition: .2s ease;
    }

    .menu-toggle::before { transform: translate(-50%, calc(-50% - 6px)); }
    .menu-toggle::after { transform: translate(-50%, calc(-50% + 6px)); }
    body.mobile-open .menu-toggle span { opacity: 0; }
    body.mobile-open .menu-toggle::before { transform: translate(-50%, -50%) rotate(45deg); }
    body.mobile-open .menu-toggle::after { transform: translate(-50%, -50%) rotate(-45deg); }

    svg {
      width: 20px;
      height: 20px;
      stroke: currentColor;
      stroke-width: 1.9;
      stroke-linecap: round;
      stroke-linejoin: round;
      fill: none;
    }

    @media (max-width: 1400px) {
      :root {
        --logo-size: 96px;
        --logo-slot: 116px;
      }

      .utility-link,
      .utility-btn {
        padding-inline: 14px;
      }

      .desktop-nav {
        min-height: 86px;
      }

      .nav-wing {
        width: calc(50% - 82px);
      }

      .nav-wing.left {
        padding-right: 36px;
      }

      .nav-wing.right {
        padding-left: 36px;
      }

      .nav-list {
        gap: 2px;
      }

      .nav-link {
        gap: 6px;
        padding: 6px 7px;
      }

      .nav-label {
        font-size: 0.72rem;
      }

      .nav-link .icon-box {
        width: 26px;
        height: 26px;
        border-radius: 11px;
      }

      .mega-card {
        grid-template-columns: 300px minmax(0, 1fr);
      }

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

    @media (max-width: 1180px) {
      .utility-bar,
      .nav-stack {
        width: min(1500px, calc(100vw - 48px));
      }

      .nav-wing.right .nav-item:last-child {
        display: none;
      }

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

    @media (max-width: 1024px) {
      body.scrolled .wrap {
        padding-top: 0;
      }

      .wrap::before {
        height: 132px;
        background:
          linear-gradient(180deg, rgba(238,247,251,0.82), rgba(238,247,251,0.34) 66%, rgba(238,247,251,0));
      }

      .utility-bar,
      .desktop-nav,
      .dropdown-host {
        display: none;
      }

      .header {
        background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(255,255,255,0.78));
        border: 1px solid rgba(255,255,255,0.94);
        border-radius: 30px;
        box-shadow: var(--shadow);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
      }

      .nav-stack {
        top: 14px;
        left: 14px;
        right: 14px;
        width: auto;
        max-width: none;
        transform: none;
      }

      body.scrolled .nav-stack {
        top: 10px;
        left: 14px;
        right: 14px;
        width: auto;
        max-width: none;
        transform: none;
      }

      .header-inner {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 12px;
        min-height: 82px;
        padding: 9px 16px;
      }

      .mobile-brand {
        display: grid;
        margin-right: auto;
        position: relative;
        left: auto;
        top: auto;
        transform: none;
      }

      .brand-center,
      .mobile-brand {
        width: 72px;
        height: 72px;
      }

      .brand-center::before,
      .brand-center::after,
      .mobile-brand::before,
      .mobile-brand::after {
        display: none;
      }

      .brand-center img,
      .mobile-brand img {
        width: 62px;
        max-height: 62px;
      }

      .menu-toggle,
      .mobile-drawer {
        display: block;
      }

      .menu-toggle {
        position: absolute !important;
        top: 50%;
        right: 16px;
        margin-left: 0;
        transform: translateY(-50%) !important;
        z-index: 120;
      }

      .mobile-drawer {
        position: fixed;
        inset: var(--mobile-drawer-top, 104px) 12px 12px;
        z-index: 60;
        display: grid;
        align-content: start;
        padding: 16px;
        border-radius: 26px;
        background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(247,250,255,0.95));
        box-shadow: var(--shadow);
        overflow: auto;
        opacity: 0;
        pointer-events: none;
        transform: translateY(-8px);
        transition: .2s ease;
      }

      body.mobile-open .overlay,
      body.mobile-open .mobile-drawer {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
      }

      .drawer-group + .drawer-group {
        margin-top: 12px;
      }

      .drawer-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        width: 100%;
        padding: 14px 16px;
        border-radius: 20px;
        border: 0;
        background: rgba(241,246,252,0.96);
      }

      .drawer-panel {
        display: none;
        padding-top: 10px;
      }

      .drawer-group.open .drawer-panel {
        display: grid;
        gap: 10px;
      }

      .drawer-link {
        display: grid;
        grid-template-columns: 42px 1fr;
        gap: 12px;
        align-items: center;
        padding: 13px;
        border-radius: 18px;
        background: #fff;
        border: 1px solid rgba(15,67,121,0.08);
      }

      .quote-modal {
        align-items: end;
        padding: 10px;
      }

      .quote-dialog {
        width: 100%;
        max-height: calc(100dvh - 20px);
        border-radius: 26px;
      }

      .quote-head {
        padding: 20px 18px 14px;
      }

      .quote-form {
        padding: 16px 18px 18px;
      }

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

      .home-service-carved {
        margin-top: 28px;
        margin-bottom: 34px;
      }

      .home-service-carved-head {
        display: block;
        padding: 0;
      }

      .home-service-carved-head h2 {
        margin-top: 12px;
        font-size: clamp(2rem, 8vw, 3rem);
      }

      .home-service-carved-grid {
        grid-template-columns: 1fr;
        gap: 12px;
      }

      .home-service-carved-card {
        --carve-size: clamp(118px, 28vw, 132px);
        min-height: 126px;
        padding-right: clamp(108px, 28vw, 126px);
      }

      .home-service-carved-copy strong {
        font-size: clamp(21px, 6vw, 29px);
      }

      .hero {
        grid-template-columns: 1fr;
        gap: 24px;
        margin-top: 16px;
        min-height: auto;
        padding: 32px 20px 24px;
        border-radius: 28px;
      }

      .hero-copy,
      .hero :is(h1, .hero-title),
      .hero p,
      .hero-actions,
      .hero-metrics,
      .hero-visual {
        width: 100%;
        max-width: calc(100vw - 56px);
      }

      .hero :is(h1, .hero-title) {
        font-size: clamp(2rem, 7.4vw, 2.45rem);
        line-height: 1.04;
        overflow-wrap: break-word;
      }

      .hero-metrics {
        grid-template-columns: 1fr;
      }

      .hero-visual {
        min-height: 260px;
        overflow: hidden;
      }

      .dashboard-shell {
        inset: 0;
        width: 100%;
        max-width: 100%;
        transform: none;
        padding: 14px;
        border-radius: 24px;
      }

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

      .dashboard-grid .glass-card:nth-child(2) {
        display: none;
      }

      .dashboard-insights {
        display: none;
      }

      .delivery-line {
        display: none;
      }

      .floating-card {
        display: none;
      }

      .hero.hero-photo {
        width: 100vw;
        max-width: 100vw;
        height: clamp(620px, 86svh, 760px);
        min-height: clamp(620px, 86svh, 760px);
        margin: 0 0 0 calc(50% - 50vw);
        border-radius: 0 0 30px 30px;
        background-position: var(--hero-mobile-position, center);
      }

      .hero.hero-photo::before {
        background: linear-gradient(180deg, rgba(4,18,42,0.88) 0%, rgba(8,43,88,0.72) 52%, rgba(8,43,88,0.28) 100%);
      }

      .hero.hero-photo::after {
        width: 100%;
        background: linear-gradient(180deg, rgba(13,69,145,0.68), rgba(13,69,145,0.2) 62%, transparent);
        mask-image: linear-gradient(180deg, #000 0%, #000 66%, transparent 100%);
      }

      .hero.hero-photo.hero-visual-soft::after {
        background: linear-gradient(180deg, rgba(4,18,42,0.42) 0%, rgba(8,43,88,0.18) 52%, transparent 100%);
      }

      .hero.hero-photo.hero-visual-clear::before {
        background: linear-gradient(180deg, rgba(4,18,42,0.16) 0%, rgba(8,43,88,0.06) 52%, transparent 100%);
      }

      .hero.hero-photo .hero-copy {
        width: min(540px, calc(100vw - 64px));
        max-width: none;
        margin-inline: auto;
        min-height: 100%;
        padding: 132px 20px 82px;
        text-align: center;
      }

      .hero.hero-photo :is(h1, .hero-title),
      .hero.hero-photo p,
      .hero.hero-photo .hero-actions,
      .hero.hero-photo .hero-metrics {
        max-width: 100%;
      }

      .hero.hero-photo :is(h1, .hero-title) {
        font-size: clamp(1.9rem, 7.4vw, 2.35rem);
        line-height: 1.12;
        overflow-wrap: break-word;
      }

      .hero.hero-photo p {
        font-size: .95rem;
        line-height: 1.55;
        overflow-wrap: break-word;
      }

      .hero.hero-photo .hero-actions {
        align-items: center;
        justify-content: center;
      }

      .hero.hero-photo .hero-btn {
        width: min(100%, 330px);
      }

      .hero.hero-photo .hero-metrics {
        display: none;
      }

      .hero-arrow {
        top: auto;
        bottom: 18px;
        width: 46px;
        height: 46px;
        transform: none;
      }

      .hero-arrow:hover {
        transform: scale(1.04);
      }

      .hero-arrow-prev {
        left: 20px;
      }

      .hero-arrow-next {
        right: auto;
        left: 74px;
      }

      .section-head {
        display: grid;
        gap: 12px;
      }
      .premium-actions-section {
        border-radius: 28px;
        padding: 22px;
      }

      .premium-actions-head {
        display: grid;
        gap: 10px;
      }

      .premium-actions-stamp {
        justify-self: start;
      }

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

      .news-announcements-grid {
        grid-template-columns: 1fr;
      }

      .news-showcase-card,
      .tender-panel {
        border-radius: 28px;
      }

      .news-slider-shell {
        max-width: 680px;
        margin-inline: auto;
      }

      .tender-panel {
        min-height: auto;
      }

      .tender-list-window {
        height: 420px;
      }

      .events-shell {
        grid-template-columns: 1fr;
      }

      .event-poster-panel {
        width: min(520px, 100%);
        margin-inline: auto;
      }

      .event-info-card {
        min-height: auto;
      }

      .services-grid,
      .projects-shell,
      .project-grid,
      .process-layout,
      .packages-grid,
      .solutions-grid,
      .testimonial-head,
      .contact-layout,
      .final-cta-inner,
      .final-proof,
      .footer-grid,
      .why-grid {
        grid-template-columns: 1fr;
      }

      .projects-section {
        border-radius: 30px;
      }

      .project-featured {
        min-height: 460px;
        border-radius: 28px;
      }

      .project-copy {
        padding: 22px;
      }

      .project-copy h3 {
        max-width: 12ch;
      }

      .project-card {
        min-height: 245px;
      }

      .projects-footer {
        align-items: stretch;
        flex-direction: column;
      }

      .projects-all {
        width: 100%;
      }

      .process-section {
        border-radius: 30px;
      }

      .packages-section {
        border-radius: 30px;
      }

      .solutions-section {
        border-radius: 30px;
      }

      .testimonials-section {
        min-height: auto;
        border-radius: 30px;
      }

      .testimonial-orbit {
        display: grid;
        gap: 12px;
        min-height: auto;
        margin-inline: 0;
      }

      .testimonial-row {
        gap: 12px;
        animation-duration: 44s;
      }

      .testimonial-row:nth-child(2) {
        animation-duration: 48s;
      }

      .testimonial-row:nth-child(3) {
        animation-duration: 52s;
      }

      .testimonial-float {
        flex-basis: 330px;
        min-height: 198px;
        padding: 18px;
      }

      .testimonial-strip {
        animation-duration: 36s;
      }

      .contact-section {
        border-radius: 30px;
      }

      .contact-actions {
        grid-template-columns: 1fr;
      }

      .map-overlay {
        align-items: stretch;
        flex-direction: column;
      }

      .map-route {
        justify-content: center;
      }

      .final-cta {
        border-radius: 30px;
      }

      .final-actions {
        min-width: 0;
      }

      .site-footer.footer-redesign {
        border-radius: 0;
      }

      .trust-band-card,
      .footer-top {
        grid-template-columns: 1fr;
      }

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

      .footer-brand {
        grid-template-columns: 76px minmax(0, 1fr);
      }

      .footer-brand img {
        width: 76px;
      }

      .footer-bottom {
        align-items: flex-start;
        flex-direction: column;
      }

      .solution-card {
        min-height: auto;
        border-radius: 24px;
      }

      .package-card {
        min-height: auto;
        padding: 22px;
        border-radius: 26px;
      }

      .process-sticky {
        position: relative;
        top: auto;
        border-radius: 28px;
      }

      .process-track::before {
        left: 27px;
      }

      .process-step {
        grid-template-columns: 56px 1fr;
        gap: 14px;
        min-height: auto;
        padding: 18px;
        border-radius: 24px;
      }

      .process-index {
        width: 50px;
        height: 50px;
        border-radius: 18px;
      }

      .services-catalog {
        gap: 16px;
      }

      .service-category {
        padding: 14px;
        border-radius: 26px;
      }

      .service-category-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
      }

      .service-card {
        min-height: auto;
        padding: 22px;
      }

      .services-section .service-category.reveal-up {
        transform: translateY(42px);
      }

      .services-section .service-category.revealed {
        transform: translateY(0);
      }

      .services-section .service-card.reveal-up {
        transform: translateX(-22px) translateY(28px) scale(.99);
      }

      .services-section .service-card:nth-child(even).reveal-up {
        transform: translateX(22px) translateY(28px) scale(.99);
      }

      .services-section .service-card.revealed,
      .services-section .service-card:nth-child(even).revealed {
        transform: translateX(0) translateY(0) scale(1);
      }

      .why-section {
        border-radius: 30px;
      }

      .why-stack {
        min-height: auto;
      }

      .why-panel,
      .why-panel:nth-child(1),
      .why-panel:nth-child(2),
      .why-panel:nth-child(3),
      .why-panel:nth-child(4) {
        position: relative;
        top: auto;
        margin-left: 0;
        margin-right: 0;
      }
    }

    @media (max-width: 560px) {
      .hero-copy,
      .hero :is(h1, .hero-title),
      .hero p,
      .hero-actions,
      .hero-metrics,
      .hero-visual {
        max-width: 332px;
      }

      .hero :is(h1, .hero-title) {
        font-size: clamp(1.9rem, 7vw, 2.25rem);
      }

      .dashboard-shell {
        max-width: 332px;
      }

      .hero.hero-photo {
        height: clamp(610px, 88svh, 720px);
        min-height: clamp(610px, 88svh, 720px);
      }

      .hero.hero-photo .hero-copy {
        width: min(332px, calc(100vw - 58px));
        margin-inline: auto;
        min-height: 100%;
        padding: 124px 20px 74px;
        text-align: center;
      }

      .hero.hero-photo :is(h1, .hero-title) {
        font-size: clamp(1.72rem, 7vw, 2.1rem);
      }

      .hero.hero-photo .hero-actions {
        align-items: center;
        justify-content: center;
      }

      .hero.hero-photo .hero-btn {
        width: min(100%, 320px);
      }
      .premium-actions-section {
        margin-top: 14px;
        padding: 16px;
        border-radius: 24px;
      }

      .premium-actions-head {
        margin-bottom: 16px;
      }

      .premium-actions-title h2 {
        max-width: 100%;
        white-space: normal !important;
        overflow-wrap: anywhere;
        font-size: clamp(1.58rem, 7.2vw, 1.95rem);
      }

      .premium-actions-stamp {
        min-height: 38px;
        padding: 0 13px;
        font-size: .72rem;
      }

      .premium-actions-grid {
        grid-template-columns: 1fr;
        gap: 10px;
      }

      .premium-action-card {
        min-height: 150px;
        padding: 17px 16px 16px;
        border-radius: 20px;
        display: grid;
        grid-template-columns: 56px minmax(0, 1fr);
        grid-template-rows: auto auto;
        column-gap: 15px;
        row-gap: 10px;
        align-items: center;
      }

      .premium-action-top {
        grid-column: 1;
        grid-row: 1 / 3;
        display: block;
        align-self: start;
      }

      .premium-action-icon {
        width: 56px;
        height: 56px;
        border-radius: 17px;
      }

      .premium-action-code {
        display: none;
      }

      .premium-action-copy {
        grid-column: 2;
        grid-row: 1;
        align-self: center;
        gap: 6px;
      }

      .premium-action-copy strong {
        font-size: 1.02rem;
      }

      .premium-action-link {
        grid-column: 2;
        align-self: start;
        margin-top: 0;
      }

      .premium-action-copy {
        overflow: visible;
      }

      .premium-action-copy span {
        display: block;
        max-width: 100%;
        white-space: normal;
        overflow: visible;
      }

      .news-announcements-section {
        margin-top: 16px;
      }

      .news-showcase-card {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        gap: 10px;
        padding: 12px;
        border-radius: 20px;
      }

      .news-card-head {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        justify-content: stretch;
        min-height: 40px;
        align-items: center;
        gap: 10px;
        width: 100%;
      }

      .news-card-title {
        flex: 1 1 auto;
        gap: 10px;
        min-width: 0;
      }

      .news-card-title span,
      .tender-head span {
        width: 36px;
        height: 36px;
        border-radius: 12px;
      }

      .news-card-title h2,
      .tender-head h2 {
        white-space: normal;
        font-size: 1.12rem;
      }

      .news-slider-actions {
        position: static;
        z-index: auto;
        max-width: none;
        flex: 0 0 auto;
        margin-left: 0;
        justify-self: end;
        gap: 6px;
      }

      .news-arrow {
        width: 32px;
        height: 32px;
        border-radius: 12px;
        background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(236,248,254,0.94));
        border-color: rgba(11,95,168,0.16);
        box-shadow: 0 8px 18px rgba(11,95,168,0.1);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
      }

      .news-slider-shell {
        width: 100%;
        max-width: 100%;
        border-radius: 18px;
      }

      .news-slide-overlay {
        left: 9px;
        right: auto;
        bottom: 9px;
        width: calc(100% - 18px);
        gap: 4px;
        padding: 10px 11px;
        border-radius: 13px;
      }

      .news-slide-overlay strong {
        display: -webkit-box;
        overflow: hidden;
        font-size: .98rem;
        line-height: 1.12;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }

      .news-slide-overlay p {
        display: -webkit-box;
        overflow: hidden;
        font-size: .76rem;
        line-height: 1.34;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }

      .news-date {
        padding: 0;
        font-size: .62rem;
      }

      .tender-panel {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        min-height: auto;
        gap: 10px;
        padding: 12px;
        border-radius: 20px;
      }

      .tender-list-window {
        height: 286px;
      }

      .tender-head {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 40px;
        padding: 0;
      }

      .tender-head a {
        justify-self: end;
        margin-left: auto;
        min-height: 34px;
        padding-inline: 10px;
        font-size: .68rem;
      }

      .tender-list-track {
        gap: 6px;
        padding: 8px;
        animation-duration: 34s;
      }

      .tender-item {
        grid-template-columns: 34px minmax(0, 1fr);
        gap: 9px;
        min-height: 56px;
        padding: 8px;
        border-radius: 12px;
      }

      .tender-icon {
        width: 34px;
        height: 34px;
        border-radius: 11px;
      }

      .tender-copy strong {
        font-size: .78rem;
      }

      .tender-copy span {
        font-size: .64rem;
      }

      .events-section {
        margin-top: 16px;
      }

      .events-panel {
        padding: 12px;
        border-radius: 20px;
      }

      .events-head {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 10px;
        min-height: 40px;
        margin-bottom: 10px;
      }

      .events-head .news-card-title span {
        width: 36px;
        height: 36px;
        border-radius: 12px;
      }

      .events-head .news-card-title h2 {
        font-size: 1.12rem;
      }

      .events-all {
        min-height: 34px;
        padding-inline: 10px;
        font-size: .68rem;
      }

      .events-shell {
        gap: 12px;
      }

      .event-poster-stage {
        border-radius: 18px;
      }

      .event-slider-actions {
        top: 10px;
        right: 10px;
        gap: 6px;
      }

      .event-arrow {
        width: 32px;
        height: 32px;
        border-radius: 12px;
      }

      .event-thumb-row {
        gap: 6px;
      }

      .event-thumb {
        border-radius: 10px;
      }

      .event-info-card {
        gap: 14px;
        padding: 18px;
        border-radius: 18px;
      }

      .event-details {
        border-radius: 16px;
      }

      .event-detail-row {
        grid-template-columns: 1fr;
        gap: 5px;
        padding: 12px;
      }

      .event-detail-row dt {
        font-size: .68rem;
      }

      .event-detail-row dd,
      .event-detail-row.is-title dd {
        font-size: .9rem;
        line-height: 1.26;
      }

      .event-source-link {
        width: 100%;
      }

      .trust-band {
        margin-top: 16px;
      }

      .trust-band-card {
        padding: 14px;
        border-radius: 20px;
      }

      .trust-copy h2 {
        max-width: none;
        font-size: 1.75rem;
      }

      .trust-contact-grid {
        grid-template-columns: 1fr;
      }

      .trust-actions {
        display: grid;
        grid-template-columns: 1fr;
      }

      .trust-action {
        width: 100%;
      }

      .footer-top,
      .footer-grid,
      .footer-bottom {
        padding-inline: 16px;
      }

      .footer-brand {
        grid-template-columns: 62px minmax(0, 1fr);
        gap: 12px;
      }

      .footer-brand img {
        width: 62px;
      }

      .footer-service-strip {
        grid-template-columns: 1fr;
      }

      .news-showcase-card,
      .tender-panel,
      .news-slider-shell {
        width: 100%;
        max-width: 100%;
      }

      .quick-dock {
        right: 12px;
        bottom: 12px;
        gap: 8px;
      }

      .quick-btn {
        width: 50px;
        height: 50px;
        border-radius: 18px;
      }

      .quick-socials {
        gap: 7px;
      }

      .quick-socials .quick-btn {
        width: 44px;
        height: 44px;
        border-radius: 16px;
      }

      .quick-btn::after {
        display: none;
      }

      .project-featured {
        min-height: 420px;
      }

      .project-copy h3 {
        font-size: 2.25rem;
        max-width: 10ch;
      }

      .project-meta {
        gap: 7px;
      }

      .lab-metrics {
        grid-template-columns: 1fr;
      }

      .process-note {
        grid-template-columns: 1fr;
      }

      .process-step {
        grid-template-columns: 1fr;
      }

      .process-track::before {
        display: none;
      }

      .project-card {
        min-height: 230px;
      }
    }
    /* Current MUTTAS homepage refinements */
    .utility-bar {
      position: relative;
      top: auto;
      left: auto;
      z-index: 180;
      width: 100%;
      max-width: 100%;
      min-height: 44px;
      padding: 0 clamp(26px, 7.2vw, 140px);
      margin: 0;
      border-radius: 0;
      background:
        linear-gradient(90deg, #063655 0%, #073a5d 48%, #0a456a 100%);
      border: 0;
      box-shadow:
        0 1px 0 rgba(255,255,255,0.08) inset,
        0 10px 26px rgba(3,22,38,0.12);
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      overflow: visible;
      transform: none;
    }

    .utility-bar::before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: -1px;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.28), transparent);
      pointer-events: none;
    }

    body.scrolled .utility-bar {
      opacity: 1;
      max-height: none;
      margin: 0;
      padding: 0 clamp(26px, 7.2vw, 140px);
      pointer-events: auto;
      transform: none;
    }

    .topbar-brand {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      min-height: 44px;
      color: rgba(255,255,255,0.94);
      font-size: .86rem;
      font-weight: 900;
      letter-spacing: .02em;
      white-space: nowrap;
    }

    .topbar-dot {
      width: 12px;
      height: 12px;
      border-radius: 999px;
      background: rgba(255,255,255,0.76);
      box-shadow: 0 0 0 5px rgba(255,255,255,0.1);
    }

    .utility-link,
    .utility-btn {
      min-height: 44px;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      color: rgba(235,246,255,0.9);
      font-size: .86rem;
      letter-spacing: 0;
    }

    .utility-link:hover,
    .utility-btn:hover {
      color: #fff;
      transform: translateY(-1px);
    }

    .utility-bar .icon-box,
    .utility-menu .icon-box {
      width: 24px;
      height: 24px;
      border-radius: 999px;
      color: #d8f2ff;
      background: rgba(255,255,255,0.1);
      box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.16);
    }

    .utility-dropdown {
      position: relative;
      display: inline-flex;
      align-items: center;
    }

    .utility-dropdown summary {
      list-style: none;
      cursor: pointer;
    }

    .utility-dropdown summary::-webkit-details-marker {
      display: none;
    }

    .utility-dropdown[open] .caret {
      transform: rotate(225deg);
    }

    .utility-menu {
      position: absolute;
      top: calc(100% + 10px);
      right: 0;
      z-index: 300;
      min-width: 210px;
      display: grid;
      gap: 4px;
      padding: 10px;
      border-radius: 18px;
      background: rgba(255,255,255,0.94);
      border: 1px solid rgba(255,255,255,0.88);
      box-shadow: 0 22px 42px rgba(5,45,86,0.16);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
    }

    .service-dropdown .utility-menu {
      right: -14px;
    }

    .language-dropdown .utility-menu {
      right: 0;
    }

    .utility-menu a {
      display: flex;
      align-items: center;
      gap: 10px;
      min-height: 42px;
      padding: 8px 11px;
      border-radius: 12px;
      color: #14314f;
      font-size: .9rem;
      font-weight: 800;
    }

    .menu-icon {
      display: inline-grid;
      place-items: center;
      width: 30px;
      height: 30px;
      flex: 0 0 30px;
      border-radius: 11px;
      color: #0b5fa8;
      background: linear-gradient(180deg, #f5fbff, #eaf4fb);
      box-shadow:
        inset 0 0 0 1px rgba(8,75,132,0.08),
        0 8px 16px rgba(5,45,86,0.06);
    }

    .menu-icon svg {
      width: 17px;
      height: 17px;
      stroke-width: 2;
    }

    .utility-menu a:hover {
      color: #0b5fa8;
      background: rgba(0,149,218,0.08);
    }

    .service-dropdown .utility-menu a {
      display: grid;
      grid-template-columns: 30px minmax(0, 1fr);
      align-items: center;
    }

    .language-dropdown .utility-menu a {
      display: grid;
      grid-template-columns: 24px minmax(0, 1fr);
      align-items: center;
    }

    .flag-img {
      width: 20px;
      height: 14px;
      object-fit: cover;
      border-radius: 2px;
      box-shadow: 0 0 0 1px rgba(8,32,57,0.08);
      flex-shrink: 0;
    }

    .language-current {
      gap: 9px;
    }

    .reveal-up {
      opacity: 0;
      transform: translate3d(0, 18px, 0);
      transition: opacity .42s ease, transform .42s cubic-bezier(.22,.8,.28,1);
      will-change: opacity, transform;
    }

    .reveal-up.revealed {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }

    .trust-band-card {
      grid-template-columns: minmax(260px, .55fr) minmax(0, 1.45fr);
      align-items: center;
    }

    .trust-copy {
      align-content: center;
    }

    .trust-contact-card {
      grid-template-columns: 58px minmax(0, 1fr);
      gap: 14px;
      align-items: center;
      padding: 14px 17px;
    }

    .trust-contact-card > .icon-box {
      display: inline-grid !important;
      place-items: center;
      width: 52px;
      height: 52px;
      align-self: center;
      justify-self: center;
      place-self: center;
      border-radius: 18px;
      line-height: 1;
    }

    .trust-contact-card > .icon-box svg {
      display: block;
      width: 24px;
      height: 24px;
      margin: 0;
    }

    .trust-contact-card > span:not(.icon-box) {
      align-self: center;
      display: block;
      min-width: 0;
    }

    .trust-actions {
      display: none;
    }

    .footer-links a {
      display: inline-flex;
      align-items: center;
      gap: 10px;
    }

    .footer-link-icon {
      width: 28px;
      height: 28px;
      display: inline-grid;
      place-items: center;
      flex: 0 0 28px;
      border-radius: 10px;
      color: #7edcff;
      background: rgba(255,255,255,0.07);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
      transition: transform .18s ease, color .18s ease, background .18s ease;
    }

    .footer-link-icon svg {
      width: 16px;
      height: 16px;
      stroke-width: 2;
    }

    .footer-links a:hover .footer-link-icon {
      transform: translateX(1px) scale(1.04);
      color: #fff;
      background: rgba(24,174,228,0.18);
    }

    .footer-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: clamp(34px, 4vw, 74px);
      padding: clamp(32px, 4vw, 54px) clamp(28px, 4.2vw, 58px);
      align-items: start;
    }

    .footer-links {
      gap: 12px;
    }

    .footer-contact {
      gap: 18px;
    }

    @media (max-width: 1400px) {
      .footer-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: clamp(24px, 3vw, 48px);
      }
    }

    body.scrolled .nav-stack {
      width: min(1480px, calc(100vw - 52px));
      max-width: calc(100vw - 28px);
    }

    body.scrolled .desktop-nav {
      gap: 20px;
    }

    body.scrolled .nav-wing {
      width: calc(50% - 104px);
      justify-content: center;
    }

    body.scrolled .nav-wing.left {
      padding-left: 10px;
      padding-right: 10px;
    }

    body.scrolled .nav-wing.right {
      padding-left: 10px;
      padding-right: 10px;
    }

    body.scrolled .nav-list {
      gap: 1px;
    }

    body.scrolled .nav-link {
      gap: 6px;
      padding: 5px 6px;
    }

    body.scrolled .nav-label {
      font-size: 0.7rem;
    }

    body.scrolled .nav-link .icon-box {
      width: 24px;
      height: 24px;
      border-radius: 10px;
    }

    .mega-side {
      min-height: 300px;
    }

    .panel-link {
      min-height: 108px;
    }

    @media (max-width: 1024px) {
      .footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 680px) {
      .site-footer {
        margin-top: 72px;
      }

      .footer-logo-orb {
        width: 112px;
        height: 112px;
        padding: 8px;
      }

      .footer-identity {
        padding-top: 76px;
      }

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

    .drawer-panel a {
      display: grid;
      grid-template-columns: 30px minmax(0, 1fr);
      align-items: center;
      gap: 10px;
      min-height: 42px;
      padding: 10px 13px;
      border-radius: 14px;
      color: #163657;
      background: rgba(255,255,255,0.86);
      border: 1px solid rgba(15,67,121,0.07);
      font-weight: 800;
    }

    .drawer-panel a:hover {
      color: #0b5fa8;
      border-color: rgba(0,149,218,0.14);
      background: #fff;
    }

    .drawer-language a {
      grid-template-columns: 24px minmax(0, 1fr);
      gap: 10px;
    }

    .drawer-language .flag-img {
      justify-self: center;
    }

    .drawer-head-main {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      min-width: 0;
    }

    .drawer-menu-icon,
    .drawer-sub-icon {
      display: inline-grid;
      place-items: center;
      flex-shrink: 0;
      color: #0b5fa8;
      background: linear-gradient(180deg, #f8fcff, #edf6fc);
      box-shadow:
        inset 0 0 0 1px rgba(8,75,132,0.08),
        0 10px 20px rgba(5,45,86,0.06);
    }

    .drawer-menu-icon {
      width: 42px;
      height: 42px;
      border-radius: 15px;
    }

    .drawer-sub-icon {
      width: 30px;
      height: 30px;
      border-radius: 11px;
    }

    .drawer-menu-icon svg {
      width: 22px;
      height: 22px;
      stroke-width: 2;
    }

    .drawer-sub-icon svg {
      width: 16px;
      height: 16px;
      stroke-width: 2;
    }

    .drawer-head .caret {
      margin-left: auto;
    }

    @media (max-width: 1024px) {
      .mobile-drawer {
        z-index: 90;
      }

      body.mobile-open .overlay {
        opacity: 1 !important;
        pointer-events: auto !important;
      }

      body.mobile-open .mobile-drawer {
        opacity: 1 !important;
        pointer-events: auto !important;
        transform: translateY(0) !important;
      }

      .drawer-head {
        min-height: 64px;
        color: #14314f;
        font-size: 1rem;
        font-weight: 900;
        border: 1px solid rgba(15,67,121,0.06);
        box-shadow:
          inset 0 1px 0 rgba(255,255,255,0.72),
          0 10px 24px rgba(5,45,86,0.04);
        transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
      }

      .drawer-head:hover,
      .drawer-group.open .drawer-head {
        background: rgba(255,255,255,0.96);
        box-shadow:
          inset 0 1px 0 rgba(255,255,255,0.82),
          0 14px 30px rgba(5,45,86,0.07);
      }

      .drawer-link {
        grid-template-columns: 42px minmax(0, 1fr);
        min-height: 66px;
        box-shadow:
          inset 0 1px 0 rgba(255,255,255,0.74),
          0 12px 26px rgba(5,45,86,0.04);
      }

      .drawer-panel a {
        min-height: 48px;
      }

      .header-inner {
        position: relative;
        padding-right: 76px;
      }

      .menu-toggle {
        position: absolute;
        top: 50%;
        right: 16px;
        margin-left: 0;
        transform: translateY(-50%);
      }
    }

    @media (max-width: 560px) {
      .header-inner {
        display: grid;
        grid-template-columns: 72px minmax(0, 1fr) 46px;
        align-items: center;
        min-width: 0;
        padding-right: 16px;
      }

      .mobile-brand {
        flex: 0 0 72px;
        grid-column: 1;
        justify-self: start;
        margin-right: 0;
      }

      .menu-toggle {
        display: block !important;
        position: absolute !important;
        top: 50%;
        right: 16px;
        flex: 0 0 46px;
        grid-column: 3;
        justify-self: end;
        transform: translateY(-50%) !important;
        z-index: 120;
      }
    }

    .cookie-bar {
      position: fixed;
      left: 50%;
      bottom: 20px;
      z-index: 180;
      width: min(980px, calc(100vw - 32px));
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 20px;
      align-items: center;
      padding: 18px;
      border-radius: 24px;
      color: #14314f;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.95), rgba(244,250,255,0.9));
      border: 1px solid rgba(255,255,255,0.88);
      box-shadow: 0 24px 64px rgba(5,45,86,0.18);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      opacity: 0;
      transform: translate(-50%, 18px);
      pointer-events: none;
      transition: opacity .24s ease, transform .24s ease;
    }

    .cookie-bar.show {
      opacity: 1;
      transform: translate(-50%, 0);
      pointer-events: auto;
    }

    .cookie-copy {
      display: grid;
      gap: 4px;
    }

    .cookie-copy strong {
      font-size: 1rem;
      font-weight: 900;
    }

    .cookie-copy p {
      margin: 0;
      color: #5d7894;
      font-size: .9rem;
      line-height: 1.5;
    }

    .cookie-actions {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .cookie-actions button {
      min-height: 40px;
      padding: 10px 14px;
      border-radius: 13px;
      border: 1px solid rgba(15,67,121,0.1);
      background: rgba(255,255,255,0.68);
      color: #14314f;
      font-weight: 900;
      cursor: pointer;
    }

    .cookie-actions .cookie-accept {
      color: #fff;
      background: linear-gradient(135deg, #18aee4, #0b5fa8);
      border-color: rgba(0,149,218,0.18);
      box-shadow: 0 14px 28px rgba(0,149,218,0.22);
    }

    .cookie-modal-backdrop {
      position: fixed;
      inset: 0;
      z-index: 230;
      display: grid;
      place-items: center;
      padding: 24px;
      background: rgba(3, 23, 39, 0.62);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      opacity: 0;
      pointer-events: none;
      transition: opacity .22s ease;
    }

    .cookie-modal-backdrop.show {
      opacity: 1;
      pointer-events: auto;
    }

    .cookie-modal-panel {
      position: relative;
      width: min(620px, 100%);
      max-height: min(760px, calc(100vh - 48px));
      overflow: auto;
      padding: clamp(24px, 3vw, 34px);
      border: 1px solid rgba(255, 255, 255, 0.74);
      border-radius: 8px;
      background:
        radial-gradient(circle at 88% 8%, rgba(0, 149, 218, 0.14), transparent 34%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(242, 249, 253, 0.96));
      box-shadow: 0 36px 90px rgba(4, 28, 49, 0.34);
      color: #102c46;
      transform: translateY(16px) scale(.98);
      transition: transform .22s ease;
    }

    .cookie-modal-backdrop.show .cookie-modal-panel {
      transform: translateY(0) scale(1);
    }

    .cookie-modal-close {
      position: absolute;
      top: 18px;
      right: 18px;
      width: 44px;
      height: 44px;
      display: inline-grid;
      place-items: center;
      border: 1px solid rgba(15, 67, 121, 0.1);
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.82);
      color: #102c46;
      cursor: pointer;
    }

    .cookie-modal-close svg {
      width: 20px;
      height: 20px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
    }

    .cookie-modal-head {
      padding-right: 54px;
    }

    .cookie-modal-head > span {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      color: #0b74bd;
      font-size: 12px;
      font-weight: 900;
      letter-spacing: .13em;
      text-transform: uppercase;
    }

    .cookie-modal-head > span::before {
      content: "";
      width: 42px;
      height: 3px;
      border-radius: 999px;
      background: #ffd400;
    }

    .cookie-modal-head h2 {
      margin: 12px 0 10px;
      color: #08243d;
      font-size: clamp(28px, 3vw, 38px);
      line-height: 1.05;
      letter-spacing: 0;
    }

    .cookie-modal-head p {
      margin: 0;
      color: #526d86;
      font-size: 15px;
      font-weight: 650;
      line-height: 1.65;
    }

    .cookie-preference-list {
      display: grid;
      gap: 12px;
      margin-top: 24px;
    }

    .cookie-preference-item {
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, 1fr) 52px;
      gap: 18px;
      align-items: center;
      min-height: 88px;
      padding: 16px;
      border: 1px solid rgba(8, 52, 91, 0.1);
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.72);
      cursor: pointer;
    }

    .cookie-preference-item.is-required {
      cursor: default;
    }

    .cookie-preference-item strong {
      display: block;
      color: #102c46;
      font-size: 15px;
      font-weight: 900;
    }

    .cookie-preference-item small {
      display: block;
      margin-top: 5px;
      color: #5d7894;
      font-size: 13px;
      font-weight: 650;
      line-height: 1.45;
    }

    .cookie-preference-item input {
      position: absolute;
      opacity: 0;
      pointer-events: none;
    }

    .cookie-preference-item i {
      position: relative;
      width: 52px;
      height: 30px;
      border-radius: 999px;
      background: #d5e3ee;
      box-shadow: inset 0 0 0 1px rgba(8, 52, 91, 0.08);
      transition: background .2s ease;
    }

    .cookie-preference-item i::after {
      content: "";
      position: absolute;
      top: 4px;
      left: 4px;
      width: 22px;
      height: 22px;
      border-radius: 999px;
      background: #fff;
      box-shadow: 0 6px 14px rgba(8, 52, 91, 0.18);
      transition: transform .2s ease;
    }

    .cookie-preference-item input:checked + i {
      background: linear-gradient(135deg, #0095da, #0b5fa8);
    }

    .cookie-preference-item input:checked + i::after {
      transform: translateX(22px);
    }

    .cookie-modal-actions {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: 10px;
      margin-top: 24px;
      padding-top: 20px;
      border-top: 1px solid rgba(8, 52, 91, 0.08);
    }

    .cookie-modal-actions button {
      min-height: 44px;
      padding: 11px 16px;
      border: 1px solid rgba(15, 67, 121, 0.12);
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.8);
      color: #14314f;
      font-weight: 900;
      cursor: pointer;
    }

    .cookie-modal-actions .primary {
      color: #fff;
      background: linear-gradient(135deg, #18aee4, #0b5fa8);
      border-color: rgba(0, 149, 218, 0.18);
      box-shadow: 0 14px 28px rgba(0, 149, 218, 0.22);
    }

    @media (max-width: 1024px) {
      body.scrolled .mobile-brand {
        position: relative;
        left: auto;
        top: auto;
        transform: none;
        width: 72px;
        height: 72px;
      }

      body.scrolled .mobile-brand img {
        width: 62px;
        max-height: 62px;
      }

      .trust-band-card,
      .cookie-bar {
        grid-template-columns: 1fr;
      }

      .cookie-actions {
        justify-content: stretch;
      }

      .cookie-actions button {
        flex: 1 1 150px;
      }
    }

    @media (max-width: 560px) {
      .nav-stack,
      body.scrolled .nav-stack {
        left: 14px;
        right: 14px;
        width: calc(100vw - 28px) !important;
        max-width: calc(100vw - 28px) !important;
      }

      .header,
      .header-inner {
        width: 100%;
      }

      .menu-toggle {
        flex: 0 0 46px;
        margin-left: auto;
      }

      .cookie-bar {
        bottom: 12px;
        width: calc(100vw - 20px);
        padding: 14px;
        border-radius: 20px;
      }

      .cookie-actions {
        gap: 7px;
      }

      .cookie-actions button {
        min-height: 38px;
        padding: 9px 10px;
        font-size: .82rem;
      }

      .cookie-modal-backdrop {
        padding: 14px;
      }

      .cookie-modal-panel {
        max-height: calc(100vh - 28px);
        padding: 22px 16px 18px;
      }

      .cookie-modal-close {
        top: 14px;
        right: 14px;
        width: 40px;
        height: 40px;
      }

      .cookie-modal-head {
        padding-right: 48px;
      }

      .cookie-modal-head h2 {
        font-size: 28px;
      }

      .cookie-preference-item {
        grid-template-columns: minmax(0, 1fr) 48px;
        gap: 12px;
        padding: 14px;
      }

      .cookie-modal-actions {
        display: grid;
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 1024px) {
      .menu-toggle {
        display: block !important;
        position: absolute !important;
        top: 50% !important;
        right: 16px !important;
        transform: translateY(-50%) !important;
        z-index: 180;
      }
    }

    @media (max-width: 1024px) {
      .nav-stack,
      body.scrolled .nav-stack {
        transition:
          top .22s ease,
          opacity .22s ease,
          transform .28s cubic-bezier(.22,.8,.28,1);
        will-change: transform, opacity;
      }

      body.mobile-nav-hidden:not(.mobile-open) .nav-stack,
      body.mobile-nav-hidden.scrolled:not(.mobile-open) .nav-stack {
        opacity: 0;
        pointer-events: none;
        transform: translateY(calc(-100% - 22px)) !important;
      }
    }

    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    .icon-box i,
    .nav-link .icon-box i,
    body.scrolled .nav-link .icon-box i {
      font-size: 16px;
      line-height: 1;
    }

    .menu-icon i {
      font-size: 15px;
      line-height: 1;
    }

    .footer-link-icon i,
    .drawer-sub-icon i {
      font-size: 14px;
      line-height: 1;
    }

    .drawer-menu-icon i {
      font-size: 18px;
      line-height: 1;
    }

    .trust-contact-card > .icon-box i {
      font-size: 20px;
      line-height: 1;
    }

    #google_translate_element {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
    }

    .goog-te-banner-frame,
    .goog-te-balloon-frame,
    .goog-tooltip,
    .goog-tooltip:hover,
    iframe.skiptranslate,
    iframe[id^=":"].skiptranslate {
      display: none !important;
      visibility: hidden !important;
      height: 0 !important;
    }

    body {
      top: 0 !important;
    }

    .goog-text-highlight {
      background: none !important;
      box-shadow: none !important;
    }

    .muttas-ai-widget {
      position: fixed;
      left: clamp(14px, 2vw, 28px);
      bottom: clamp(14px, 2vw, 28px);
      z-index: 170;
      display: grid;
      gap: 12px;
      justify-items: start;
      color: #14314f;
      pointer-events: none;
    }

    html.muttas-ai-scroll-locked,
    body.muttas-ai-scroll-locked {
      overflow: hidden !important;
      overscroll-behavior: none;
    }

    body.muttas-ai-scroll-locked .muttas-ai-backdrop {
      touch-action: none;
    }

    body.muttas-ai-scroll-locked .muttas-ai-panel,
    body.muttas-ai-scroll-locked .muttas-ai-stream,
    body.muttas-ai-scroll-locked .muttas-ai-lead,
    body.muttas-ai-scroll-locked .muttas-ai-prompts {
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
    }

    .muttas-ai-backdrop {
      position: fixed;
      inset: 0;
      z-index: 0;
      display: block;
      width: 100vw;
      height: 100dvh;
      padding: 0;
      border: 0;
      background:
        radial-gradient(circle at 22% 72%, rgba(0, 149, 218, 0.16), transparent 34%),
        rgba(4, 21, 38, 0.5);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      cursor: default;
      backdrop-filter: blur(3px) saturate(.82);
      -webkit-backdrop-filter: blur(3px) saturate(.82);
      transition: opacity .24s ease, visibility .24s ease;
    }

    .muttas-ai-widget.is-open .muttas-ai-backdrop {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }

    .muttas-ai-launcher,
    .muttas-ai-panel,
    .muttas-ai-panel button,
    .muttas-ai-panel textarea {
      font-family: inherit;
    }

    .muttas-ai-launcher {
      position: relative;
      display: grid;
      grid-template-columns: 58px minmax(0, 1fr) 10px;
      gap: 12px;
      align-items: center;
      min-width: 238px;
      min-height: 72px;
      padding: 7px 14px 7px 7px;
      border: 1px solid rgba(255, 255, 255, 0.72);
      border-radius: 8px;
      color: #14314f;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(242, 249, 255, 0.88)),
        #fff;
      box-shadow:
        0 24px 64px rgba(5, 45, 86, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.92);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      cursor: pointer;
      pointer-events: auto;
      transform-origin: left bottom;
      transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
    }

    .muttas-ai-launcher:hover,
    .muttas-ai-widget.is-open .muttas-ai-launcher {
      transform: translateY(-3px);
      border-color: rgba(0, 149, 218, 0.36);
      box-shadow:
        0 30px 74px rgba(5, 45, 86, 0.25),
        0 0 0 1px rgba(0, 149, 218, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.96);
    }

    .muttas-ai-launcher-orbit {
      position: absolute;
      left: 9px;
      top: 9px;
      width: 54px;
      height: 54px;
      border-radius: 50%;
      background:
        conic-gradient(from 180deg, rgba(255, 212, 0, 0), rgba(255, 212, 0, 0.8), rgba(0, 149, 218, 0.92), rgba(255, 212, 0, 0));
      animation: muttasAiOrbit 4.2s linear infinite;
      opacity: .82;
    }

    .muttas-ai-launcher-core {
      position: relative;
      display: grid;
      place-items: center;
      width: 58px;
      height: 58px;
      border-radius: 50%;
      color: #fff;
      background:
        radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.42), transparent 26%),
        linear-gradient(135deg, #082039, #0b5fa8 56%, #0095da);
      box-shadow:
        0 14px 28px rgba(0, 149, 218, 0.28),
        inset 0 0 0 1px rgba(255, 255, 255, 0.22);
    }

    .muttas-ai-launcher-core svg,
    .muttas-ai-head-mark svg,
    .muttas-ai-close svg,
    .muttas-ai-composer button svg {
      width: 27px;
      height: 27px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .muttas-ai-launcher-copy {
      display: grid;
      gap: 3px;
      min-width: 0;
      text-align: left;
    }

    .muttas-ai-launcher-copy strong {
      color: #14314f;
      font-size: .95rem;
      font-weight: 900;
      line-height: 1.1;
    }

    .muttas-ai-launcher-copy span {
      color: #66829e;
      font-size: .78rem;
      font-weight: 800;
      line-height: 1.2;
    }

    .muttas-ai-launcher-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #25d366;
      box-shadow: 0 0 0 6px rgba(37, 211, 102, 0.13);
      animation: muttasAiStatus 1.8s ease-in-out infinite;
    }

    .muttas-ai-panel {
      position: absolute;
      left: 0;
      bottom: calc(100% + 14px);
      display: grid;
      grid-template-rows: auto minmax(210px, 1fr) auto auto auto;
      width: min(420px, calc(100vw - 28px));
      max-height: min(680px, calc(100vh - 116px));
      border: 1px solid rgba(255, 255, 255, 0.72);
      border-radius: 8px;
      overflow: hidden;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(242, 249, 255, 0.94)),
        #fff;
      box-shadow:
        0 34px 88px rgba(5, 45, 86, 0.26),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
      backdrop-filter: blur(22px);
      -webkit-backdrop-filter: blur(22px);
      opacity: 0;
      transform: translateY(14px) scale(.98);
      transform-origin: left bottom;
      pointer-events: none;
      transition: opacity .24s ease, transform .24s cubic-bezier(.2, .8, .2, 1);
    }

    .muttas-ai-widget.is-open .muttas-ai-panel {
      opacity: 1;
      transform: translateY(0) scale(1);
      pointer-events: auto;
    }

    .muttas-ai-panel-head {
      display: grid;
      grid-template-columns: 46px minmax(0, 1fr) auto 38px;
      gap: 12px;
      align-items: center;
      padding: 14px;
      color: #fff;
      background:
        radial-gradient(circle at 92% 0, rgba(255, 212, 0, 0.28), transparent 34%),
        linear-gradient(135deg, #082039, #0b5fa8 62%, #0095da);
    }

    .muttas-ai-head-mark {
      display: grid;
      place-items: center;
      width: 46px;
      height: 46px;
      border-radius: 50%;
      color: #fff;
      background: rgba(255, 255, 255, 0.13);
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
    }

    .muttas-ai-head-mark svg {
      width: 24px;
      height: 24px;
    }

    .muttas-ai-head-copy {
      min-width: 0;
    }

    .muttas-ai-head-copy p {
      margin: 0 0 3px;
      color: rgba(255, 255, 255, 0.66);
      font-size: .68rem;
      font-weight: 900;
      letter-spacing: .12em;
      text-transform: uppercase;
    }

    .muttas-ai-head-copy h2 {
      margin: 0;
      color: #fff;
      font-size: 1.02rem;
      font-weight: 900;
      line-height: 1.12;
      letter-spacing: 0;
    }

    .muttas-ai-status {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      min-height: 30px;
      padding: 7px 10px;
      border-radius: 999px;
      color: rgba(255, 255, 255, 0.92);
      background: rgba(255, 255, 255, 0.12);
      font-size: .72rem;
      font-weight: 900;
      white-space: nowrap;
    }

    .muttas-ai-status i {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #25d366;
      box-shadow: 0 0 0 5px rgba(37, 211, 102, 0.16);
    }

    .muttas-ai-close {
      display: grid;
      place-items: center;
      width: 38px;
      height: 38px;
      border: 1px solid rgba(255, 255, 255, 0.16);
      border-radius: 8px;
      color: #fff;
      background: rgba(255, 255, 255, 0.1);
      cursor: pointer;
      transition: background .18s ease, transform .18s ease;
    }

    .muttas-ai-close:hover {
      background: rgba(255, 255, 255, 0.18);
      transform: translateY(-1px);
    }

    .muttas-ai-close svg {
      width: 19px;
      height: 19px;
    }

    .muttas-ai-stream {
      display: grid;
      align-content: start;
      gap: 14px;
      min-height: 260px;
      padding: 18px;
      overflow-y: auto;
      overscroll-behavior: contain;
      background:
        radial-gradient(circle at 0 0, rgba(0, 149, 218, 0.08), transparent 34%),
        linear-gradient(180deg, rgba(245, 250, 255, 0.7), rgba(255, 255, 255, 0.9));
    }

    .muttas-ai-stream::-webkit-scrollbar {
      width: 8px;
    }

    .muttas-ai-stream::-webkit-scrollbar-thumb {
      border-radius: 999px;
      background: rgba(11, 95, 168, 0.22);
    }

    .muttas-ai-message {
      display: grid;
      gap: 9px;
      animation: muttasAiMessage .22s ease both;
    }

    .muttas-ai-message.bot {
      grid-template-columns: 34px minmax(0, 1fr);
      align-items: end;
      justify-self: start;
      max-width: 100%;
    }

    .muttas-ai-message.user {
      justify-self: end;
      max-width: min(82%, 320px);
    }

    .muttas-ai-avatar {
      display: grid;
      place-items: center;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      color: #fff;
      background: linear-gradient(135deg, #082039, #0b5fa8);
      font-size: .82rem;
      font-weight: 900;
      box-shadow: 0 10px 22px rgba(5, 45, 86, 0.16);
    }

    .muttas-ai-bubble {
      min-width: 0;
      padding: 12px 14px;
      border-radius: 8px;
      color: #24435f;
      background: #fff;
      border: 1px solid rgba(9, 63, 111, 0.08);
      box-shadow: 0 12px 28px rgba(5, 45, 86, 0.08);
      font-size: .9rem;
      font-weight: 650;
      line-height: 1.55;
    }

    .muttas-ai-message.user .muttas-ai-bubble {
      color: #fff;
      background: linear-gradient(135deg, #0b5fa8, #0095da);
      border-color: rgba(255, 255, 255, 0.12);
      box-shadow: 0 14px 32px rgba(0, 149, 218, 0.2);
    }

    .muttas-ai-bubble p {
      margin: 0;
    }

    .muttas-ai-link-list {
      display: grid;
      gap: 8px;
      margin-top: 12px;
    }

    .muttas-ai-link-list a {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      min-height: 38px;
      padding: 9px 11px;
      border-radius: 8px;
      color: #0b5fa8;
      background: rgba(0, 149, 218, 0.08);
      border: 1px solid rgba(0, 149, 218, 0.12);
      font-size: .84rem;
      font-weight: 900;
      text-decoration: none;
      transition: background .18s ease, transform .18s ease;
    }

    .muttas-ai-link-list a::after {
      content: "";
      width: 7px;
      height: 7px;
      border-top: 2px solid currentColor;
      border-right: 2px solid currentColor;
      transform: rotate(45deg);
      flex: 0 0 auto;
    }

    .muttas-ai-link-list a:hover {
      background: rgba(0, 149, 218, 0.13);
      transform: translateX(2px);
    }

    .muttas-ai-message.typing .muttas-ai-bubble {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      width: auto;
      min-width: 66px;
      min-height: 40px;
    }

    .muttas-ai-message.typing .muttas-ai-bubble span {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #0b5fa8;
      opacity: .42;
      animation: muttasAiTyping 1s ease-in-out infinite;
    }

    .muttas-ai-message.typing .muttas-ai-bubble span:nth-child(2) {
      animation-delay: .14s;
    }

    .muttas-ai-message.typing .muttas-ai-bubble span:nth-child(3) {
      animation-delay: .28s;
    }

    .muttas-ai-prompts {
      display: flex;
      gap: 8px;
      padding: 12px 14px 0;
      overflow-x: auto;
      background: #fff;
    }

    .muttas-ai-prompts button {
      flex: 0 0 auto;
      min-height: 34px;
      padding: 8px 10px;
      border: 1px solid rgba(9, 63, 111, 0.1);
      border-radius: 8px;
      color: #14314f;
      background: rgba(245, 250, 255, 0.86);
      font-size: .78rem;
      font-weight: 900;
      cursor: pointer;
      transition: transform .18s ease, border-color .18s ease, background .18s ease;
    }

    .muttas-ai-prompts button:hover {
      transform: translateY(-1px);
      border-color: rgba(0, 149, 218, 0.22);
      background: rgba(0, 149, 218, 0.08);
    }

    .muttas-ai-composer {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 46px;
      gap: 10px;
      align-items: end;
      padding: 12px 14px;
      background: #fff;
    }

    .muttas-ai-composer textarea {
      width: 100%;
      min-height: 46px;
      max-height: 118px;
      resize: none;
      padding: 13px 14px;
      border: 1px solid rgba(9, 63, 111, 0.12);
      border-radius: 8px;
      color: #14314f;
      background: #f7fbff;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
      font-size: .9rem;
      font-weight: 750;
      line-height: 1.45;
      outline: none;
      transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
    }

    .muttas-ai-composer textarea:focus {
      border-color: rgba(0, 149, 218, 0.42);
      background: #fff;
      box-shadow: 0 0 0 4px rgba(0, 149, 218, 0.12);
    }

    .muttas-ai-composer textarea::placeholder {
      color: #7b93aa;
    }

    .muttas-ai-composer button {
      display: grid;
      place-items: center;
      width: 46px;
      height: 46px;
      border: 0;
      border-radius: 8px;
      color: #fff;
      background: linear-gradient(135deg, #082039, #0b5fa8 62%, #0095da);
      box-shadow: 0 16px 28px rgba(0, 149, 218, 0.24);
      cursor: pointer;
      transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
    }

    .muttas-ai-composer button:hover {
      transform: translateY(-1px);
      box-shadow: 0 20px 34px rgba(0, 149, 218, 0.28);
    }

    .muttas-ai-widget.is-busy .muttas-ai-composer button {
      opacity: .58;
      cursor: wait;
    }

    .muttas-ai-composer button svg {
      width: 20px;
      height: 20px;
    }

    .muttas-ai-note {
      margin: 0;
      padding: 0 14px 14px;
      color: #6a839a;
      background: #fff;
      font-size: .72rem;
      font-weight: 750;
      line-height: 1.45;
    }

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

    @keyframes muttasAiStatus {
      0%,
      100% {
        box-shadow: 0 0 0 6px rgba(37, 211, 102, 0.13);
      }

      50% {
        box-shadow: 0 0 0 10px rgba(37, 211, 102, 0);
      }
    }

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

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes muttasAiTyping {
      0%,
      100% {
        transform: translateY(0);
        opacity: .35;
      }

      50% {
        transform: translateY(-4px);
        opacity: .9;
      }
    }

    @media (max-width: 680px) {
      .muttas-ai-widget {
        left: 12px;
        right: 12px;
        bottom: 12px;
      }

      .muttas-ai-launcher {
        grid-template-columns: 56px minmax(0, 1fr) 10px;
        width: min(250px, calc(100vw - 24px));
        min-width: 0;
        min-height: 68px;
      }

      .muttas-ai-panel {
        width: calc(100vw - 24px);
        max-height: calc(100vh - 98px);
      }

      .muttas-ai-panel-head {
        grid-template-columns: 42px minmax(0, 1fr) 36px;
      }

      .muttas-ai-status {
        display: none;
      }

      .muttas-ai-stream {
        min-height: 230px;
        padding: 14px;
      }
    }

    .muttas-ai-launcher {
      grid-template-columns: 64px minmax(0, 1fr) auto 10px;
      min-width: 278px;
      min-height: 82px;
      padding: 9px 14px 9px 9px;
      border-color: rgba(255, 255, 255, 0.86);
      background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(238, 249, 255, 0.94) 58%, rgba(220, 244, 255, 0.9)),
        #fff;
      box-shadow:
        0 30px 72px rgba(5, 45, 86, 0.28),
        0 0 0 1px rgba(0, 149, 218, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.96);
      overflow: hidden;
    }

    .muttas-ai-launcher::before {
      content: "";
      position: absolute;
      inset: 0 auto 0 0;
      width: 5px;
      background: linear-gradient(180deg, #ffd400, #0095da 58%, #0b5fa8);
    }

    .muttas-ai-launcher::after {
      content: "";
      position: absolute;
      inset: -35% auto auto -20%;
      width: 72%;
      height: 150%;
      background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.72), transparent);
      transform: translateX(-120%) rotate(10deg);
      animation: muttasAiSweep 5.8s ease-in-out infinite;
      pointer-events: none;
    }

    .muttas-ai-launcher-glow {
      position: absolute;
      right: -24px;
      bottom: -38px;
      width: 122px;
      height: 122px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(0, 149, 218, 0.22), transparent 68%);
      pointer-events: none;
    }

    .muttas-ai-launcher-orbit {
      left: 13px;
      top: 11px;
      width: 60px;
      height: 60px;
      filter: drop-shadow(0 14px 24px rgba(0, 149, 218, 0.22));
    }

    .muttas-ai-launcher-core {
      width: 64px;
      height: 64px;
      background:
        radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.55), transparent 26%),
        linear-gradient(135deg, #073358, #0b5fa8 58%, #0095da);
      animation: muttasAiFloat 3.2s ease-in-out infinite;
    }

    .muttas-ai-launcher-core img,
    .muttas-ai-head-mark img,
    .muttas-ai-avatar img {
      display: block;
      width: 74%;
      height: 74%;
      object-fit: contain;
      filter: drop-shadow(0 4px 8px rgba(4, 31, 56, 0.18));
    }

    .muttas-ai-launcher-copy strong {
      color: #082039;
      font-size: 1.08rem;
      letter-spacing: .01em;
    }

    .muttas-ai-launcher-copy span {
      color: #0b5fa8;
      font-size: .82rem;
      font-weight: 900;
    }

    .muttas-ai-launcher-badge {
      position: relative;
      z-index: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 34px;
      height: 28px;
      padding: 0 9px;
      border-radius: 999px;
      color: #082039;
      background: #ffd400;
      box-shadow: 0 10px 24px rgba(255, 212, 0, 0.26);
      font-size: .72rem;
      font-weight: 900;
      letter-spacing: .08em;
    }

    .muttas-ai-panel {
      grid-template-rows: auto minmax(142px, 1fr) auto auto auto auto;
      width: min(440px, calc(100vw - 28px));
      max-height: min(760px, calc(100vh - 96px));
    }

    .muttas-ai-panel-head {
      grid-template-columns: 52px minmax(0, 1fr) auto 38px;
      background:
        radial-gradient(circle at 92% 0, rgba(255, 212, 0, 0.28), transparent 34%),
        linear-gradient(135deg, #082039, #0b5fa8 54%, #0095da);
    }

    .muttas-ai-head-mark {
      width: 52px;
      height: 52px;
      background:
        radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.42), transparent 28%),
        rgba(255, 255, 255, 0.14);
      animation: muttasAiAvatarPulse 2.8s ease-in-out infinite;
    }

    .muttas-ai-head-copy p {
      color: rgba(255, 255, 255, 0.68);
      font-size: .72rem;
    }

    .muttas-ai-head-copy h2 {
      font-size: 1.1rem;
    }

    .muttas-ai-stream {
      min-height: 178px;
      max-height: 310px;
    }

    .muttas-ai-message.bot {
      grid-template-columns: 42px minmax(0, 1fr);
      align-items: start;
    }

    .muttas-ai-avatar {
      width: 42px;
      height: 42px;
      background:
        radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.48), transparent 28%),
        linear-gradient(135deg, #073358, #0b5fa8 58%, #0095da);
      animation: muttasAiAvatarPulse 2.8s ease-in-out infinite;
    }

    .muttas-ai-bubble strong {
      color: #082039;
      font-weight: 900;
    }

    .muttas-ai-bubble p + p {
      margin-top: 8px;
    }

    .muttas-ai-lead {
      display: grid;
      gap: 12px;
      padding: 14px;
      border-top: 1px solid rgba(9, 63, 111, 0.08);
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 251, 255, 0.96)),
        #fff;
    }

    .muttas-ai-widget.has-profile .muttas-ai-lead {
      display: none;
    }

    .muttas-ai-widget:not(.has-profile) .muttas-ai-prompts,
    .muttas-ai-widget:not(.has-profile) .muttas-ai-composer {
      display: none;
    }

    .muttas-ai-lead.needs-attention {
      animation: muttasAiLeadNudge .42s ease both;
    }

    .muttas-ai-lead-head {
      display: grid;
      gap: 4px;
    }

    .muttas-ai-lead-head strong {
      color: #14314f;
      font-size: .94rem;
      font-weight: 900;
    }

    .muttas-ai-lead-head span {
      color: #6a839a;
      font-size: .78rem;
      font-weight: 750;
      line-height: 1.4;
    }

    .muttas-ai-lead-grid {
      display: grid;
      gap: 9px;
    }

    .muttas-ai-lead-grid label {
      display: grid;
      gap: 5px;
    }

    .muttas-ai-lead-grid span {
      color: #496782;
      font-size: .72rem;
      font-weight: 900;
    }

    .muttas-ai-lead-grid input {
      width: 100%;
      min-height: 42px;
      padding: 10px 12px;
      border: 1px solid rgba(9, 63, 111, 0.12);
      border-radius: 8px;
      color: #14314f;
      background: #f7fbff;
      font: inherit;
      font-size: .86rem;
      font-weight: 800;
      outline: none;
      transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
    }

    .muttas-ai-lead-grid input:focus {
      border-color: rgba(0, 149, 218, 0.42);
      background: #fff;
      box-shadow: 0 0 0 4px rgba(0, 149, 218, 0.12);
    }

    .muttas-ai-consent-text {
      border: 1px solid rgba(9, 63, 111, 0.1);
      border-radius: 8px;
      background: rgba(245, 250, 255, 0.86);
    }

    .muttas-ai-consent-text summary {
      cursor: pointer;
      padding: 10px 12px;
      color: #0b5fa8;
      font-size: .78rem;
      font-weight: 900;
      list-style: none;
    }

    .muttas-ai-consent-text summary::-webkit-details-marker {
      display: none;
    }

    .muttas-ai-consent-text summary::after {
      content: "+";
      float: right;
      color: #14314f;
      font-weight: 900;
    }

    .muttas-ai-consent-text[open] summary::after {
      content: "-";
    }

    .muttas-ai-consent-text p {
      margin: 0;
      padding: 0 12px 12px;
      color: #496782;
      font-size: .75rem;
      font-weight: 650;
      line-height: 1.48;
    }

    .muttas-ai-consent-text a {
      color: #0b5fa8;
      font-weight: 900;
    }

    .muttas-ai-consent-check {
      display: grid;
      grid-template-columns: 18px minmax(0, 1fr);
      gap: 9px;
      align-items: start;
      color: #496782;
      font-size: .75rem;
      font-weight: 750;
      line-height: 1.45;
    }

    .muttas-ai-consent-check input {
      width: 18px;
      height: 18px;
      margin: 1px 0 0;
      accent-color: #0b5fa8;
    }

    .muttas-ai-start {
      min-height: 44px;
      border: 0;
      border-radius: 8px;
      color: #fff;
      background: linear-gradient(135deg, #082039, #0b5fa8 62%, #0095da);
      box-shadow: 0 16px 28px rgba(0, 149, 218, 0.22);
      font-size: .88rem;
      font-weight: 900;
      cursor: pointer;
      transition: transform .18s ease, box-shadow .18s ease;
    }

    .muttas-ai-start:hover {
      transform: translateY(-1px);
      box-shadow: 0 20px 34px rgba(0, 149, 218, 0.28);
    }

    .muttas-ai-prompts {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 9px;
      padding: 12px 14px 0;
      overflow: visible;
      background: #fff;
    }

    .muttas-ai-prompts button {
      position: relative;
      flex: initial;
      justify-content: flex-start;
      min-width: 0;
      min-height: 44px;
      padding: 10px 12px 10px 34px;
      overflow: hidden;
      text-align: left;
      background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(241, 248, 255, 0.92)),
        #fff;
      box-shadow: 0 10px 24px rgba(5, 45, 86, 0.06);
    }

    .muttas-ai-prompts button::before {
      content: "";
      position: absolute;
      left: 12px;
      top: 50%;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #ffd400;
      box-shadow: 0 0 0 5px rgba(255, 212, 0, 0.16);
      transform: translateY(-50%);
    }

    .muttas-ai-prompts button span {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    @keyframes muttasAiSweep {
      0%,
      52% {
        transform: translateX(-120%) rotate(10deg);
      }

      72%,
      100% {
        transform: translateX(230%) rotate(10deg);
      }
    }

    @keyframes muttasAiFloat {
      0%,
      100% {
        transform: translateY(0);
      }

      50% {
        transform: translateY(-3px);
      }
    }

    @keyframes muttasAiAvatarPulse {
      0%,
      100% {
        box-shadow:
          0 10px 22px rgba(5, 45, 86, 0.16),
          0 0 0 0 rgba(0, 149, 218, 0.18);
      }

      50% {
        box-shadow:
          0 14px 28px rgba(5, 45, 86, 0.2),
          0 0 0 7px rgba(0, 149, 218, 0);
      }
    }

    @keyframes muttasAiLeadNudge {
      0%,
      100% {
        transform: translateX(0);
      }

      32% {
        transform: translateX(-4px);
      }

      68% {
        transform: translateX(4px);
      }
    }

    @media (max-width: 680px) {
      .muttas-ai-launcher {
        grid-template-columns: 58px minmax(0, 1fr) 10px;
        width: min(278px, calc(100vw - 24px));
      }

      .muttas-ai-launcher-badge {
        display: none;
      }

      .muttas-ai-panel-head {
        grid-template-columns: 46px minmax(0, 1fr) 36px;
      }

      .muttas-ai-head-mark {
        width: 46px;
        height: 46px;
      }

      .muttas-ai-prompts {
        grid-template-columns: 1fr 1fr;
      }
    }

    .muttas-ai-launcher {
      display: block;
      width: 162px;
      min-width: 0;
      height: 138px;
      min-height: 0;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      overflow: visible;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }

    .muttas-ai-launcher:hover,
    .muttas-ai-widget.is-open .muttas-ai-launcher {
      transform: translateY(-2px);
      border-color: transparent;
      box-shadow: none;
    }

    .muttas-ai-launcher::before,
    .muttas-ai-launcher::after,
    .muttas-ai-launcher-glow {
      display: none;
    }

    .muttas-ai-launcher-copy {
      position: absolute;
      left: 0;
      top: 0;
      z-index: 3;
      width: 156px;
      min-height: 58px;
      padding: 11px 36px 11px 14px;
      border: 1px solid rgba(255, 255, 255, 0.86);
      border-radius: 8px;
      background:
        radial-gradient(circle at 88% 18%, rgba(0, 149, 218, 0.18), transparent 35%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(236, 248, 255, 0.94));
      box-shadow:
        0 20px 46px rgba(5, 45, 86, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.96);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
    }

    .muttas-ai-launcher-copy::after {
      content: "";
      position: absolute;
      left: 36px;
      bottom: -8px;
      width: 18px;
      height: 18px;
      border-right: 1px solid rgba(255, 255, 255, 0.86);
      border-bottom: 1px solid rgba(255, 255, 255, 0.86);
      background: rgba(244, 250, 255, 0.96);
      transform: rotate(45deg);
    }

    .muttas-ai-launcher-copy strong {
      font-size: 1rem;
      line-height: 1.05;
      white-space: nowrap;
    }

    .muttas-ai-launcher-copy span {
      font-size: .76rem;
      line-height: 1.1;
      white-space: nowrap;
    }

    .muttas-ai-launcher-core {
      position: absolute;
      left: 24px;
      bottom: 0;
      z-index: 2;
      width: 72px;
      height: 72px;
      border: 3px solid rgba(255, 255, 255, 0.94);
      box-shadow:
        0 20px 42px rgba(5, 45, 86, 0.28),
        0 0 0 7px rgba(0, 149, 218, 0.12),
        inset 0 0 0 1px rgba(255, 255, 255, 0.32);
    }

    .muttas-ai-launcher-orbit {
      left: 18px;
      top: auto;
      bottom: -6px;
      width: 84px;
      height: 84px;
      opacity: .74;
    }

    .muttas-ai-launcher-dot {
      position: absolute;
      top: 22px;
      right: 12px;
      z-index: 4;
      width: 11px;
      height: 11px;
    }

    .muttas-ai-launcher-bubbles {
      position: absolute;
      left: 68px;
      bottom: 60px;
      z-index: 1;
      width: 52px;
      height: 66px;
      pointer-events: none;
    }

    .muttas-ai-launcher-bubbles i {
      position: absolute;
      left: 14px;
      bottom: 0;
      width: 13px;
      height: 13px;
      border-radius: 50%;
      background:
        radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.28) 34%, rgba(0, 149, 218, 0.42));
      box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.5),
        0 8px 18px rgba(0, 149, 218, 0.22);
      animation: muttasAiBubbleRise 3.4s ease-in-out infinite;
    }

    .muttas-ai-launcher-bubbles i:nth-child(2) {
      left: 30px;
      width: 9px;
      height: 9px;
      animation-delay: .8s;
    }

    .muttas-ai-launcher-bubbles i:nth-child(3) {
      left: 4px;
      width: 8px;
      height: 8px;
      animation-delay: 1.45s;
    }

    .muttas-ai-panel {
      display: flex;
      flex-direction: column;
      width: min(440px, calc(100vw - 28px));
      max-height: min(690px, calc(100dvh - 174px));
      overflow: hidden;
    }

    .muttas-ai-panel-head,
    .muttas-ai-prompts,
    .muttas-ai-composer,
    .muttas-ai-note {
      flex: 0 0 auto;
    }

    .muttas-ai-stream {
      flex: 0 0 auto;
      min-height: 132px;
      max-height: 188px;
      overflow-y: auto;
    }

    .muttas-ai-lead {
      flex: 1 1 auto;
      min-height: 0;
      max-height: none;
      overflow-y: auto;
      overscroll-behavior: contain;
      scrollbar-width: thin;
    }

    .muttas-ai-lead::-webkit-scrollbar {
      width: 8px;
    }

    .muttas-ai-lead::-webkit-scrollbar-thumb {
      border-radius: 999px;
      background: rgba(11, 95, 168, 0.2);
    }

    .muttas-ai-widget:not(.has-profile) .muttas-ai-note {
      display: none;
    }

    .muttas-ai-widget:not(.has-profile) .muttas-ai-stream {
      display: none;
    }

    .muttas-ai-widget:not(.has-profile) .muttas-ai-panel {
      max-height: min(640px, calc(100dvh - 142px));
    }

    .muttas-ai-widget:not(.has-profile) .muttas-ai-lead {
      border-top: 0;
    }

    .muttas-ai-widget.has-profile .muttas-ai-stream {
      flex: 1 1 auto;
      min-height: 260px;
      max-height: none;
    }

    .muttas-ai-widget.has-profile .muttas-ai-panel {
      max-height: min(680px, calc(100dvh - 174px));
    }

    @keyframes muttasAiBubbleRise {
      0% {
        opacity: 0;
        transform: translate(0, 18px) scale(.72);
      }

      18% {
        opacity: .95;
      }

      72% {
        opacity: .82;
      }

      100% {
        opacity: 0;
        transform: translate(10px, -44px) scale(1.08);
      }
    }

    .muttas-ai-launcher {
      display: grid;
      grid-template-columns: 58px minmax(0, 1fr);
      align-items: center;
      gap: 10px;
      width: 194px;
      min-width: 0;
      height: 74px;
      min-height: 0;
      padding: 9px 14px 9px 9px;
      border: 1px solid rgba(255, 255, 255, 0.76);
      border-radius: 22px;
      background:
        radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.9), transparent 32%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(231, 247, 255, 0.9));
      box-shadow:
        0 22px 46px rgba(3, 30, 56, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.98);
      overflow: visible;
      filter: none;
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
    }

    .muttas-ai-launcher:hover,
    .muttas-ai-widget.is-open .muttas-ai-launcher {
      transform: translateY(-4px);
      border-color: rgba(255, 255, 255, 0.9);
      box-shadow:
        0 28px 54px rgba(3, 30, 56, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 1);
    }

    .muttas-ai-launcher::before {
      content: "";
      position: absolute;
      inset: auto auto auto 0;
      display: block;
      left: 0;
      top: 14px;
      bottom: 14px;
      width: 4px;
      height: auto;
      border: 0;
      border-radius: 0 999px 999px 0;
      background: linear-gradient(180deg, #ffd400, #0095da);
      box-shadow: 0 0 18px rgba(0, 149, 218, 0.22);
    }

    .muttas-ai-launcher::after {
      content: "";
      position: absolute;
      inset: 1px;
      display: block;
      width: auto;
      height: auto;
      border-radius: 21px;
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.58), transparent 36%, rgba(0, 149, 218, 0.08));
      opacity: .75;
      animation: none;
      transform: none;
      pointer-events: none;
    }

    .muttas-ai-launcher-copy {
      position: relative;
      left: auto;
      right: auto;
      top: auto;
      bottom: auto;
      z-index: 4;
      width: auto;
      min-height: 0;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      text-align: left;
      animation: none;
    }

    .muttas-ai-launcher-copy::before,
    .muttas-ai-launcher-copy::after {
      display: none;
    }

    .muttas-ai-launcher-copy strong {
      color: #082039;
      font-size: .94rem;
      line-height: 1;
      letter-spacing: .02em;
      white-space: nowrap;
    }

    .muttas-ai-launcher-copy span {
      color: #0b5fa8;
      font-size: .72rem;
      line-height: 1.15;
      font-weight: 900;
      white-space: nowrap;
    }

    .muttas-ai-launcher-core {
      position: relative;
      left: auto;
      top: auto;
      bottom: auto;
      z-index: 4;
      grid-column: 1;
      width: 56px;
      height: 56px;
      border: 0;
      overflow: visible;
      background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(226, 245, 255, 0.9));
      box-shadow:
        0 14px 24px rgba(5, 45, 86, 0.2),
        0 0 0 4px rgba(255, 255, 255, 0.82),
        0 0 0 7px rgba(0, 149, 218, 0.08);
      animation: muttasAiLogoHover 3.9s ease-in-out infinite;
    }

    .muttas-ai-launcher-core::before {
      content: "";
      position: absolute;
      inset: -7px;
      z-index: -1;
      border-radius: 50%;
      background:
        conic-gradient(from 160deg, rgba(255, 212, 0, 0.72), rgba(0, 149, 218, 0.72), rgba(255, 255, 255, 0.18), rgba(255, 212, 0, 0.72));
      mask: radial-gradient(circle, transparent 59%, #000 61%);
      -webkit-mask: radial-gradient(circle, transparent 59%, #000 61%);
      animation: muttasAiHaloPulse 2.8s ease-in-out infinite;
    }

    .muttas-ai-launcher-core::after {
      display: none;
    }

    .muttas-ai-launcher-core img {
      position: relative;
      z-index: 2;
      width: 78%;
      height: 78%;
      border-radius: 50%;
      filter: drop-shadow(0 5px 8px rgba(4, 31, 56, 0.16));
    }

    .muttas-ai-launcher-orbit {
      left: 7px;
      top: 7px;
      bottom: auto;
      width: 60px;
      height: 60px;
      opacity: .34;
      border-color: rgba(255, 255, 255, 0.28);
      border-top-color: rgba(0, 149, 218, 0.44);
      border-right-color: rgba(255, 212, 0, 0.6);
      animation-duration: 9s;
    }

    .muttas-ai-launcher-dot {
      display: none;
    }

    .muttas-ai-launcher-bubbles {
      display: none;
    }

    .muttas-ai-launcher-bubbles i {
      background:
        radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.3) 35%, rgba(0, 149, 218, 0.38));
      animation-name: muttasAiBubbleRiseSoft;
    }

    @keyframes muttasAiSpeechFloat {
      0%,
      100% {
        transform: translateY(0);
      }

      50% {
        transform: translateY(-3px);
      }
    }

    @keyframes muttasAiLogoHover {
      0%,
      100% {
        transform: translateY(0) rotate(-1deg);
      }

      50% {
        transform: translateY(-5px) rotate(1deg);
      }
    }

    @keyframes muttasAiHaloPulse {
      0%,
      100% {
        opacity: .55;
        transform: scale(.96);
      }

      50% {
        opacity: .95;
        transform: scale(1.05);
      }
    }

    @keyframes muttasAiBubbleRiseSoft {
      0% {
        opacity: 0;
        transform: translate(0, 16px) scale(.68);
      }

      22% {
        opacity: .9;
      }

      78% {
        opacity: .7;
      }

      100% {
        opacity: 0;
        transform: translate(6px, -42px) scale(1.02);
      }
    }

    @media (max-width: 680px) {
      .muttas-ai-widget {
        left: 8px;
        right: 8px;
        bottom: 8px;
      }

      .muttas-ai-launcher {
        grid-template-columns: 54px minmax(0, 1fr);
        gap: 9px;
        width: 184px;
        height: 70px;
        padding: 8px 12px 8px 8px;
        border-radius: 21px;
      }

      .muttas-ai-launcher-copy {
        position: relative;
        left: auto;
        right: auto;
        bottom: auto;
      }

      .muttas-ai-launcher-core {
        left: auto;
        top: auto;
        width: 54px;
        height: 54px;
      }

      .muttas-ai-launcher-orbit {
        left: 7px;
        top: 7px;
        width: 58px;
        height: 58px;
      }

      .muttas-ai-panel {
        left: 0;
        bottom: calc(100% + 8px);
        width: calc(100vw - 16px);
        max-height: calc(100dvh - 156px);
      }

      .muttas-ai-panel-head {
        grid-template-columns: 44px minmax(0, 1fr) 36px;
        padding: 12px;
      }

      .muttas-ai-stream {
        min-height: 126px;
        max-height: 176px;
        padding: 12px;
      }

      .muttas-ai-message.bot {
        grid-template-columns: 38px minmax(0, 1fr);
      }

      .muttas-ai-avatar {
        width: 38px;
        height: 38px;
      }

      .muttas-ai-lead {
        padding: 12px;
      }

      .muttas-ai-prompts {
        grid-template-columns: 1fr;
      }
    }

    .muttas-ai-launcher {
      display: block;
      width: 92px;
      min-width: 0;
      height: 92px;
      min-height: 0;
      padding: 0;
      border: 0;
      border-radius: 999px;
      background: transparent;
      box-shadow: none;
      overflow: visible;
      filter: none;
      transition:
        width .34s ease,
        height .34s ease,
        border-radius .34s ease,
        background .34s ease,
        box-shadow .34s ease,
        transform .25s ease;
    }

    .muttas-ai-launcher:hover,
    .muttas-ai-launcher:focus-visible,
    .muttas-ai-widget.is-open .muttas-ai-launcher {
      width: min(330px, calc(100vw - 24px));
      height: 78px;
      border-radius: 999px;
      background: linear-gradient(90deg, #b46b4f 0%, #6759b5 48%, #0b5fa8 100%);
      box-shadow:
        0 22px 52px rgba(0, 58, 110, 0.24),
        0 0 0 13px rgba(113, 170, 255, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.24);
      transform: translateY(-3px);
    }

    .muttas-ai-launcher::before {
      content: "";
      position: absolute;
      inset: 10px;
      display: block;
      width: auto;
      height: auto;
      border: 0;
      border-radius: 999px;
      background:
        radial-gradient(circle at 38% 32%, rgba(255, 255, 255, 0.72), transparent 34%),
        linear-gradient(135deg, rgba(197, 219, 255, 0.96), rgba(143, 174, 255, 0.82));
      box-shadow:
        0 0 0 12px rgba(116, 166, 255, 0.2),
        0 0 0 24px rgba(116, 166, 255, 0.08),
        0 18px 38px rgba(0, 58, 110, 0.18);
      pointer-events: none;
      transition:
        inset .34s ease,
        opacity .24s ease,
        box-shadow .34s ease;
    }

    .muttas-ai-launcher:hover::before,
    .muttas-ai-launcher:focus-visible::before,
    .muttas-ai-widget.is-open .muttas-ai-launcher::before {
      inset: -8px;
      opacity: .9;
      box-shadow:
        0 0 0 10px rgba(116, 166, 255, 0.18),
        0 18px 46px rgba(0, 58, 110, 0.16);
    }

    .muttas-ai-launcher::after {
      display: none;
    }

    .muttas-ai-launcher-orbit,
    .muttas-ai-launcher-bubbles,
    .muttas-ai-launcher-dot {
      display: none;
    }

    .muttas-ai-launcher-tag {
      position: absolute;
      left: 11px;
      top: -6px;
      z-index: 5;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 66px;
      height: 18px;
      border: 1px solid rgba(255, 255, 255, 0.86);
      border-radius: 999px;
      color: #0b5fa8;
      background: rgba(255, 255, 255, 0.94);
      box-shadow: 0 8px 16px rgba(0, 58, 110, 0.12);
      font-size: .54rem;
      font-weight: 900;
      letter-spacing: .04em;
      line-height: 1;
      pointer-events: none;
      transition:
        opacity .22s ease,
        transform .22s ease;
    }

    .muttas-ai-launcher-tag::before,
    .muttas-ai-launcher-tag::after {
      content: "";
      position: absolute;
      display: block;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.94);
      border: 1px solid rgba(221, 233, 246, 0.95);
      box-shadow: 0 5px 12px rgba(0, 58, 110, 0.08);
      pointer-events: none;
    }

    .muttas-ai-launcher-tag::before {
      left: 16px;
      bottom: -11px;
      width: 8px;
      height: 8px;
      box-shadow:
        14px 7px 0 -2px rgba(255, 255, 255, 0.94),
        14px 7px 0 -1px rgba(221, 233, 246, 0.95),
        27px 18px 0 -3px rgba(255, 255, 255, 0.94),
        27px 18px 0 -2px rgba(221, 233, 246, 0.95);
    }

    .muttas-ai-launcher-tag::after {
      left: 43px;
      bottom: -18px;
      width: 5px;
      height: 5px;
      opacity: .92;
    }

    .muttas-ai-launcher:hover .muttas-ai-launcher-tag,
    .muttas-ai-launcher:focus-visible .muttas-ai-launcher-tag,
    .muttas-ai-widget.is-open .muttas-ai-launcher-tag {
      opacity: 0;
      transform: translateY(-4px) scale(.94);
    }

    .muttas-ai-launcher-core {
      position: absolute;
      left: 17px;
      top: 24px;
      z-index: 3;
      width: 58px;
      height: 58px;
      border: 4px solid rgba(255, 255, 255, 0.92);
      border-radius: 50%;
      background: #fff;
      box-shadow:
        0 12px 24px rgba(0, 48, 91, 0.18),
        0 0 0 1px rgba(255, 255, 255, 0.45);
      overflow: hidden;
      animation: muttasAiLauncherBreath 3.2s ease-in-out infinite;
      transition:
        left .34s ease,
        top .34s ease,
        width .34s ease,
        height .34s ease,
        border-color .34s ease;
    }

    .muttas-ai-launcher:hover .muttas-ai-launcher-core,
    .muttas-ai-launcher:focus-visible .muttas-ai-launcher-core,
    .muttas-ai-widget.is-open .muttas-ai-launcher-core {
      left: 9px;
      top: 8px;
      width: 62px;
      height: 62px;
      border-color: rgba(255, 255, 255, 0.96);
    }

    .muttas-ai-launcher-core::before,
    .muttas-ai-launcher-core::after {
      display: none;
    }

    .muttas-ai-launcher-logo,
    .muttas-ai-launcher-service {
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: #fff;
      transition: opacity .35s ease, transform .35s ease;
    }

    .muttas-ai-launcher-logo {
      animation: muttasAiLogoCycle 4s ease-in-out infinite;
    }

    .muttas-ai-launcher-service {
      opacity: 0;
      transform: scale(.84);
    }

    .muttas-ai-service-bus {
      animation: muttasAiServiceBusCycle 4s ease-in-out infinite;
    }

    .muttas-ai-service-plane {
      animation: muttasAiServicePlaneCycle 4s ease-in-out infinite;
    }

    .muttas-ai-service-ferry {
      animation: muttasAiServiceFerryCycle 4s ease-in-out infinite;
    }

    .muttas-ai-service-parking {
      animation: muttasAiServiceParkingCycle 4s ease-in-out infinite;
    }

    .muttas-ai-launcher-logo img {
      display: block;
      width: 76%;
      height: 76%;
      object-fit: contain;
      filter: drop-shadow(0 4px 7px rgba(4, 31, 56, 0.12));
    }

    .muttas-ai-launcher-service svg {
      display: block;
      width: 78%;
      height: 78%;
    }

    .muttas-ai-launcher-copy {
      position: absolute;
      left: 92px;
      right: 22px;
      top: 50%;
      bottom: auto;
      z-index: 4;
      display: block;
      width: auto;
      min-width: 0;
      min-height: 0;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      color: #fff;
      text-align: left;
      opacity: 0;
      visibility: hidden;
      transform: translate(-10px, -50%);
      transition:
        opacity .24s ease .08s,
        visibility .24s ease .08s,
        transform .24s ease .08s;
    }

    .muttas-ai-launcher:hover .muttas-ai-launcher-copy,
    .muttas-ai-launcher:focus-visible .muttas-ai-launcher-copy,
    .muttas-ai-widget.is-open .muttas-ai-launcher-copy {
      opacity: 1;
      visibility: visible;
      transform: translate(0, -50%);
    }

    .muttas-ai-launcher-copy::before,
    .muttas-ai-launcher-copy::after {
      display: none;
    }

    .muttas-ai-launcher-copy strong,
    .muttas-ai-launcher-copy span {
      display: inline;
      color: #fff;
      font-size: .95rem;
      line-height: 1.25;
      font-weight: 900;
      letter-spacing: 0;
      white-space: normal;
      text-shadow: 0 2px 10px rgba(0, 32, 74, 0.18);
    }

    .muttas-ai-launcher-copy strong::after {
      content: ", ";
    }

    @keyframes muttasAiLogoCycle {
      0%,
      48% {
        opacity: 1;
        transform: scale(1) rotate(0);
      }

      52%,
      98% {
        opacity: 0;
        transform: scale(.86) rotate(-5deg);
      }

      100% {
        opacity: 1;
        transform: scale(1) rotate(0);
      }
    }

    @keyframes muttasAiServiceBusCycle {
      0%,
      48%,
      63%,
      100% {
        opacity: 0;
        transform: scale(.84) translateY(4px);
      }

      52%,
      60% {
        opacity: 1;
        transform: scale(1) translateY(0);
      }
    }

    @keyframes muttasAiServicePlaneCycle {
      0%,
      60%,
      76%,
      100% {
        opacity: 0;
        transform: scale(.84) translateY(4px);
      }

      64%,
      73% {
        opacity: 1;
        transform: scale(1) translateY(0);
      }
    }

    @keyframes muttasAiServiceFerryCycle {
      0%,
      73%,
      88%,
      100% {
        opacity: 0;
        transform: scale(.84) translateY(4px);
      }

      77%,
      85% {
        opacity: 1;
        transform: scale(1) translateY(0);
      }
    }

    @keyframes muttasAiServiceParkingCycle {
      0%,
      85% {
        opacity: 0;
        transform: scale(.84) translateY(4px);
      }

      89%,
      97% {
        opacity: 1;
        transform: scale(1) translateY(0);
      }

      100% {
        opacity: 0;
        transform: scale(.84) translateY(4px);
      }
    }

    @keyframes muttasAiLauncherBreath {
      0%,
      100% {
        transform: translateY(0) scale(1);
      }

      50% {
        transform: translateY(-2px) scale(1.02);
      }
    }

    .muttas-ai-widget:not(.is-open) .muttas-ai-launcher:not(:hover):not(:focus-visible) {
      width: 112px;
      height: 150px;
      border: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
    }

    .muttas-ai-launcher::before,
    .muttas-ai-launcher::after,
    .muttas-ai-launcher:hover::before,
    .muttas-ai-launcher:hover::after,
    .muttas-ai-launcher:focus-visible::before,
    .muttas-ai-launcher:focus-visible::after,
    .muttas-ai-widget.is-open .muttas-ai-launcher::before,
    .muttas-ai-widget.is-open .muttas-ai-launcher::after,
    .muttas-ai-widget:not(.is-open) .muttas-ai-launcher:not(:hover):not(:focus-visible)::before,
    .muttas-ai-widget:not(.is-open) .muttas-ai-launcher:not(:hover):not(:focus-visible)::after {
      content: none !important;
      display: none !important;
      opacity: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
    }

    .muttas-ai-launcher-tag {
      left: 50%;
      top: 0;
      width: 88px;
      height: 25px;
      transform: translateX(-50%);
      font-size: .64rem;
    }

    .muttas-ai-launcher-tag::before,
    .muttas-ai-launcher-tag::after {
      display: none !important;
    }

    .muttas-ai-launcher-bridge {
      position: absolute;
      left: 0;
      top: 0;
      z-index: 4;
      width: 112px;
      height: 150px;
      pointer-events: none;
      transition: opacity .22s ease, transform .22s ease;
    }

    .muttas-ai-launcher-bridge i {
      position: absolute;
      display: block;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.96);
      border: 1px solid rgba(223, 234, 246, 0.95);
      box-shadow: 0 4px 10px rgba(0, 58, 110, 0.08);
    }

    .muttas-ai-launcher-bridge i:nth-child(1) {
      left: 52px;
      top: 37px;
      width: 9px;
      height: 9px;
    }

    .muttas-ai-launcher-bridge i:nth-child(2) {
      left: 66px;
      top: 51px;
      width: 7px;
      height: 7px;
      opacity: .9;
    }

    .muttas-ai-launcher-bridge i:nth-child(3) {
      left: 78px;
      top: 64px;
      width: 5px;
      height: 5px;
      opacity: .76;
    }

    .muttas-ai-widget:not(.is-open) .muttas-ai-launcher:not(:hover):not(:focus-visible) .muttas-ai-launcher-core {
      left: 27px;
      top: 78px;
      width: 58px;
      height: 58px;
      display: grid;
      place-items: center;
      border-width: 3px;
      box-shadow:
        0 12px 22px rgba(0, 48, 91, 0.14),
        0 0 0 7px rgba(116, 166, 255, 0.075),
        0 0 0 13px rgba(116, 166, 255, 0.025),
        0 0 0 1px rgba(255, 255, 255, 0.5);
    }

    .muttas-ai-launcher:hover .muttas-ai-launcher-bridge,
    .muttas-ai-launcher:focus-visible .muttas-ai-launcher-bridge,
    .muttas-ai-widget.is-open .muttas-ai-launcher-bridge {
      opacity: 0;
      transform: translateY(-4px) scale(.94);
    }

    .muttas-ai-launcher-logo,
    .muttas-ai-launcher-service {
      display: grid;
      place-items: center;
    }

    .muttas-ai-launcher-logo img {
      width: 72%;
      height: 72%;
      margin: 0;
    }

    .muttas-ai-launcher-service svg {
      width: 68%;
      height: 68%;
      margin: 0;
    }

    @media (max-width: 680px) {
      .muttas-ai-widget {
        bottom: calc(24px + env(safe-area-inset-bottom, 0px));
      }

      .muttas-ai-widget:not(.is-open) .muttas-ai-launcher:not(:hover):not(:focus-visible) {
        width: 92px;
        height: 124px;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
      }

      .muttas-ai-launcher-bridge {
        width: 92px;
        height: 124px;
      }

      .muttas-ai-launcher:hover,
      .muttas-ai-launcher:focus-visible,
      .muttas-ai-widget.is-open .muttas-ai-launcher {
        width: min(310px, calc(100vw - 18px));
        height: 74px;
      }

      .muttas-ai-widget:not(.is-open) .muttas-ai-launcher:not(:hover):not(:focus-visible) .muttas-ai-launcher-core {
        left: 22px;
        top: 64px;
        width: 48px;
        height: 48px;
      }

      .muttas-ai-launcher:hover .muttas-ai-launcher-core,
      .muttas-ai-launcher:focus-visible .muttas-ai-launcher-core,
      .muttas-ai-widget.is-open .muttas-ai-launcher-core {
        left: 8px;
        top: 8px;
        width: 58px;
        height: 58px;
      }

      .muttas-ai-launcher-copy {
        left: 82px;
        right: 18px;
      }

      .muttas-ai-launcher-copy strong,
      .muttas-ai-launcher-copy span {
        font-size: .86rem;
      }
    }

    .muttas-ai-panel {
      z-index: 3;
    }

    .muttas-ai-launcher {
      z-index: 2;
    }

    .muttas-ai-widget.is-open .muttas-ai-launcher,
    .muttas-ai-widget.is-open .muttas-ai-launcher:hover,
    .muttas-ai-widget.is-open .muttas-ai-launcher:focus-visible {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: translateY(12px) scale(.92);
    }

    .muttas-ai-widget.is-launcher-preview:not(.is-open) .muttas-ai-launcher,
    .muttas-ai-widget.is-launcher-preview:not(.is-open) .muttas-ai-launcher:not(:hover):not(:focus-visible) {
      width: min(330px, calc(100vw - 24px)) !important;
      height: 78px !important;
      border-radius: 999px !important;
      background: linear-gradient(90deg, #b46b4f 0%, #6759b5 48%, #0b5fa8 100%) !important;
      box-shadow:
        0 22px 52px rgba(0, 58, 110, 0.24),
        0 0 0 13px rgba(113, 170, 255, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.24) !important;
      transform: translateY(-3px);
    }

    .muttas-ai-widget.is-launcher-preview:not(.is-open) .muttas-ai-launcher-tag,
    .muttas-ai-widget.is-launcher-preview:not(.is-open) .muttas-ai-launcher-bridge {
      opacity: 0;
      transform: translateY(-4px) scale(.94);
    }

    .muttas-ai-widget.is-launcher-preview:not(.is-open) .muttas-ai-launcher-core,
    .muttas-ai-widget.is-launcher-preview:not(.is-open) .muttas-ai-launcher:not(:hover):not(:focus-visible) .muttas-ai-launcher-core {
      left: 9px !important;
      top: 8px !important;
      width: 62px !important;
      height: 62px !important;
      border-color: rgba(255, 255, 255, 0.96);
      box-shadow:
        0 12px 24px rgba(0, 48, 91, 0.18),
        0 0 0 1px rgba(255, 255, 255, 0.45) !important;
    }

    .muttas-ai-widget.is-launcher-preview:not(.is-open) .muttas-ai-launcher-copy {
      opacity: 1;
      visibility: visible;
      transform: translate(0, -50%);
    }

    @media (max-width: 680px) {
      .muttas-ai-widget.is-launcher-preview:not(.is-open) .muttas-ai-launcher,
      .muttas-ai-widget.is-launcher-preview:not(.is-open) .muttas-ai-launcher:not(:hover):not(:focus-visible) {
        width: min(310px, calc(100vw - 18px)) !important;
        height: 74px !important;
      }

      .muttas-ai-widget.is-launcher-preview:not(.is-open) .muttas-ai-launcher-core,
      .muttas-ai-widget.is-launcher-preview:not(.is-open) .muttas-ai-launcher:not(:hover):not(:focus-visible) .muttas-ai-launcher-core {
        left: 8px !important;
        top: 8px !important;
        width: 58px !important;
        height: 58px !important;
      }
    }

    .muttas-ai-launcher-copy {
      display: none !important;
    }

    .muttas-ai-widget:not(.is-open) .muttas-ai-launcher,
    .muttas-ai-widget:not(.is-open) .muttas-ai-launcher:hover,
    .muttas-ai-widget:not(.is-open) .muttas-ai-launcher:focus-visible,
    .muttas-ai-widget:not(.is-open) .muttas-ai-launcher:not(:hover):not(:focus-visible) {
      width: 112px !important;
      height: 150px !important;
      border: 0 !important;
      border-radius: 999px !important;
      background: transparent !important;
      box-shadow: none !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      transform: none !important;
    }

    .muttas-ai-widget:not(.is-open) .muttas-ai-launcher-tag,
    .muttas-ai-widget:not(.is-open) .muttas-ai-launcher:hover .muttas-ai-launcher-tag,
    .muttas-ai-widget:not(.is-open) .muttas-ai-launcher:focus-visible .muttas-ai-launcher-tag {
      opacity: 1 !important;
      visibility: visible !important;
      transform: translateX(-50%) !important;
    }

    .muttas-ai-widget:not(.is-open) .muttas-ai-launcher-bridge,
    .muttas-ai-widget:not(.is-open) .muttas-ai-launcher:hover .muttas-ai-launcher-bridge,
    .muttas-ai-widget:not(.is-open) .muttas-ai-launcher:focus-visible .muttas-ai-launcher-bridge {
      opacity: 1 !important;
      visibility: visible !important;
      transform: none !important;
    }

    .muttas-ai-widget:not(.is-open) .muttas-ai-launcher-bridge i:nth-child(1),
    .muttas-ai-widget:not(.is-open) .muttas-ai-launcher:hover .muttas-ai-launcher-bridge i:nth-child(1),
    .muttas-ai-widget:not(.is-open) .muttas-ai-launcher:focus-visible .muttas-ai-launcher-bridge i:nth-child(1) {
      left: 52px !important;
      top: 40px !important;
      width: 9px !important;
      height: 9px !important;
    }

    .muttas-ai-widget:not(.is-open) .muttas-ai-launcher-bridge i:nth-child(2),
    .muttas-ai-widget:not(.is-open) .muttas-ai-launcher:hover .muttas-ai-launcher-bridge i:nth-child(2),
    .muttas-ai-widget:not(.is-open) .muttas-ai-launcher:focus-visible .muttas-ai-launcher-bridge i:nth-child(2) {
      left: 55px !important;
      top: 54px !important;
      width: 6px !important;
      height: 6px !important;
    }

    .muttas-ai-widget:not(.is-open) .muttas-ai-launcher-bridge i:nth-child(3),
    .muttas-ai-widget:not(.is-open) .muttas-ai-launcher:hover .muttas-ai-launcher-bridge i:nth-child(3),
    .muttas-ai-widget:not(.is-open) .muttas-ai-launcher:focus-visible .muttas-ai-launcher-bridge i:nth-child(3) {
      left: 56px !important;
      top: 66px !important;
      width: 4px !important;
      height: 4px !important;
    }

    .muttas-ai-widget:not(.is-open) .muttas-ai-launcher .muttas-ai-launcher-core,
    .muttas-ai-widget:not(.is-open) .muttas-ai-launcher:hover .muttas-ai-launcher-core,
    .muttas-ai-widget:not(.is-open) .muttas-ai-launcher:focus-visible .muttas-ai-launcher-core,
    .muttas-ai-widget:not(.is-open) .muttas-ai-launcher:not(:hover):not(:focus-visible) .muttas-ai-launcher-core {
      left: 27px !important;
      top: 78px !important;
      width: 58px !important;
      height: 58px !important;
      border-width: 3px !important;
      border-color: rgba(255, 255, 255, 0.92) !important;
      box-shadow:
        0 12px 22px rgba(0, 48, 91, 0.14),
        0 0 0 7px rgba(116, 166, 255, 0.075),
        0 0 0 13px rgba(116, 166, 255, 0.025),
        0 0 0 1px rgba(255, 255, 255, 0.5) !important;
    }

    @media (max-width: 680px) {
      .muttas-ai-widget:not(.is-open) .muttas-ai-launcher,
      .muttas-ai-widget:not(.is-open) .muttas-ai-launcher:hover,
      .muttas-ai-widget:not(.is-open) .muttas-ai-launcher:focus-visible,
      .muttas-ai-widget:not(.is-open) .muttas-ai-launcher:not(:hover):not(:focus-visible) {
        width: 92px !important;
        height: 124px !important;
      }

      .muttas-ai-widget:not(.is-open) .muttas-ai-launcher .muttas-ai-launcher-core,
      .muttas-ai-widget:not(.is-open) .muttas-ai-launcher:hover .muttas-ai-launcher-core,
      .muttas-ai-widget:not(.is-open) .muttas-ai-launcher:focus-visible .muttas-ai-launcher-core,
      .muttas-ai-widget:not(.is-open) .muttas-ai-launcher:not(:hover):not(:focus-visible) .muttas-ai-launcher-core {
        left: 22px !important;
        top: 64px !important;
        width: 48px !important;
        height: 48px !important;
      }

      .muttas-ai-widget:not(.is-open) .muttas-ai-launcher-bridge i:nth-child(1),
      .muttas-ai-widget:not(.is-open) .muttas-ai-launcher:hover .muttas-ai-launcher-bridge i:nth-child(1),
      .muttas-ai-widget:not(.is-open) .muttas-ai-launcher:focus-visible .muttas-ai-launcher-bridge i:nth-child(1) {
        left: 42px !important;
        top: 37px !important;
        width: 8px !important;
        height: 8px !important;
      }

      .muttas-ai-widget:not(.is-open) .muttas-ai-launcher-bridge i:nth-child(2),
      .muttas-ai-widget:not(.is-open) .muttas-ai-launcher:hover .muttas-ai-launcher-bridge i:nth-child(2),
      .muttas-ai-widget:not(.is-open) .muttas-ai-launcher:focus-visible .muttas-ai-launcher-bridge i:nth-child(2) {
        left: 45px !important;
        top: 50px !important;
        width: 6px !important;
        height: 6px !important;
      }

      .muttas-ai-widget:not(.is-open) .muttas-ai-launcher-bridge i:nth-child(3),
      .muttas-ai-widget:not(.is-open) .muttas-ai-launcher:hover .muttas-ai-launcher-bridge i:nth-child(3),
      .muttas-ai-widget:not(.is-open) .muttas-ai-launcher:focus-visible .muttas-ai-launcher-bridge i:nth-child(3) {
        left: 46px !important;
        top: 60px !important;
        width: 4px !important;
        height: 4px !important;
      }
    }

    @media (max-width: 680px) {
      .muttas-ai-widget {
        --muttas-ai-mobile-gap: 10px;
        left: 0 !important;
        right: 0 !important;
        bottom: calc(20px + env(safe-area-inset-bottom, 0px));
        width: 100%;
        max-width: 100%;
      }

      .muttas-ai-widget.is-open {
        inset: 0 !important;
        width: 100%;
        height: var(--muttas-ai-vh, 100dvh);
      }

      .muttas-ai-backdrop {
        height: var(--muttas-ai-vh, 100dvh);
      }

      .muttas-ai-widget.is-open .muttas-ai-panel {
        position: fixed;
        left: max(var(--muttas-ai-mobile-gap), env(safe-area-inset-left, 0px)) !important;
        right: max(var(--muttas-ai-mobile-gap), env(safe-area-inset-right, 0px)) !important;
        top: calc(var(--muttas-ai-visual-top, 0px) + max(var(--muttas-ai-mobile-gap), env(safe-area-inset-top, 0px))) !important;
        bottom: max(var(--muttas-ai-mobile-gap), env(safe-area-inset-bottom, 0px)) !important;
        display: flex;
        flex-direction: column;
        width: auto !important;
        max-width: none !important;
        height: calc(var(--muttas-ai-vh, 100dvh) - var(--muttas-ai-visual-top, 0px) - var(--muttas-ai-mobile-gap) - var(--muttas-ai-mobile-gap) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
        max-height: none !important;
        min-height: 0;
        border-radius: 14px;
        transform-origin: center bottom;
      }

      body.muttas-ai-keyboard-open .muttas-ai-widget.is-open .muttas-ai-panel {
        top: calc(var(--muttas-ai-visual-top, 0px) + 6px) !important;
        bottom: 6px !important;
        height: calc(var(--muttas-ai-vh, 100dvh) - 12px) !important;
      }

      .muttas-ai-panel {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
      }

      .muttas-ai-panel-head {
        grid-template-columns: 40px minmax(0, 1fr) 36px !important;
        min-height: 72px;
        padding: 10px 11px;
      }

      .muttas-ai-head-mark {
        width: 40px;
        height: 40px;
      }

      .muttas-ai-head-copy p {
        font-size: .66rem;
      }

      .muttas-ai-head-copy h2 {
        font-size: 1rem;
      }

      .muttas-ai-close {
        width: 36px;
        height: 36px;
      }

      .muttas-ai-stream,
      .muttas-ai-widget.has-profile .muttas-ai-stream {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        max-height: none !important;
        padding: 12px;
        overflow-y: auto;
      }

      .muttas-ai-message.bot {
        grid-template-columns: 34px minmax(0, 1fr);
        gap: 8px;
      }

      .muttas-ai-avatar {
        width: 34px;
        height: 34px;
      }

      .muttas-ai-bubble {
        padding: 11px 12px;
        font-size: .88rem;
        line-height: 1.5;
      }

      .muttas-ai-lead {
        flex: 1 1 auto;
        min-height: 0;
        padding: 12px;
        overflow-y: auto;
      }

      .muttas-ai-lead-grid input,
      .muttas-ai-composer textarea {
        font-size: 16px;
      }

      .muttas-ai-lead-grid input {
        min-height: 46px;
      }

      .muttas-ai-prompts {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 10px 12px 0;
        max-height: 230px;
        overflow-y: auto;
      }

      .muttas-ai-prompts button {
        min-height: 48px;
      }

      .muttas-ai-composer {
        grid-template-columns: minmax(0, 1fr) 48px;
        gap: 8px;
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid rgba(9, 63, 111, 0.08);
      }

      .muttas-ai-composer textarea {
        min-height: 48px;
        max-height: 96px;
        padding: 12px 13px;
      }

      .muttas-ai-composer button {
        width: 48px;
        height: 48px;
      }

      .muttas-ai-note {
        padding: 0 12px 12px;
      }

      body.muttas-ai-keyboard-open .muttas-ai-prompts,
      body.muttas-ai-keyboard-open .muttas-ai-note {
        display: none;
      }
    }

    @media (max-width: 680px) {
      body {
        overflow-x: clip;
      }

      .wrap {
        max-width: 100%;
        overflow-x: clip;
      }

      .home-service-carved,
      .premium-actions-section,
      .news-announcements-section,
      .events-section,
      .trust-band {
        width: calc(100% - 28px) !important;
        max-width: calc(100% - 28px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box;
      }

      .home-service-carved-head,
      .home-service-carved-grid,
      .premium-actions-head,
      .premium-actions-grid,
      .news-announcements-grid,
      .news-showcase-card,
      .tender-panel,
      .events-panel,
      .events-shell,
      .event-poster-panel,
      .event-info-card,
      .trust-band-card,
      .trust-contact-grid {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
      }

      .home-service-carved {
        margin-top: 24px;
        margin-bottom: 24px;
      }

      .home-service-carved-head {
        padding-inline: 2px;
      }

      .home-service-carved-head h2 {
        font-size: clamp(2rem, 8.2vw, 2.75rem);
      }

      .home-service-carved-card {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        border-radius: 0 48px 48px 0;
      }

      .premium-actions-section {
        padding: 18px;
      }

      .premium-actions-title h2 {
        font-size: clamp(1.76rem, 7.4vw, 2.35rem);
      }

      .news-announcements-section,
      .events-section,
      .trust-band {
        margin-top: 18px;
      }

      .news-showcase-card,
      .tender-panel,
      .events-panel,
      .trust-band-card {
        border-radius: 22px;
      }

      .trust-band-card {
        padding: 24px 18px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .reveal-up {
        opacity: 1;
        transform: none;
        transition: none;
      }

      .muttas-ai-launcher-orbit,
      .muttas-ai-launcher-dot,
      .muttas-ai-launcher::after,
      .muttas-ai-launcher-core,
      .muttas-ai-avatar,
      .muttas-ai-head-mark,
      .muttas-ai-launcher-bubbles i,
      .muttas-ai-launcher-logo,
      .muttas-ai-launcher-service,
      .muttas-ai-message,
      .muttas-ai-message.typing .muttas-ai-bubble span {
        animation: none;
      }
    }

.about-section-anchor {
  display: block;
  height: 0;
  scroll-margin-top: 140px;
}

/* Homepage mayor tribute block */
.mayor-tribute-section {
  position: relative;
  width: 100%;
  margin-top: clamp(30px, 4vw, 58px);
  margin-bottom: clamp(30px, 4vw, 58px);
}

.mayor-tribute-shell {
  position: relative;
  min-height: clamp(430px, 33vw, 550px);
  overflow: hidden;
  border: 0;
  border-radius: 8px;
  color: #fff;
  background: #08233c;
  box-shadow: 0 26px 64px rgba(5, 29, 52, .22);
  isolation: isolate;
}

.mayor-tribute-shell::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  z-index: 4;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #ffd400 0%, #ffd400 15%, rgba(0, 177, 220, .85) 42%, transparent 76%);
  pointer-events: none;
}

.mayor-tribute-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  margin: 0;
}

.mayor-tribute-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 52% 15%;
  filter: saturate(.88) contrast(1.05);
}

.mayor-tribute-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(3, 19, 35, .97) 0%, rgba(4, 30, 50, .91) 31%, rgba(4, 31, 53, .54) 52%, rgba(4, 27, 48, .08) 76%, rgba(4, 24, 43, .17) 100%),
    linear-gradient(0deg, rgba(2, 17, 33, .78) 0%, transparent 46%);
  pointer-events: none;
}

.mayor-tribute-copy {
  position: relative;
  z-index: 2;
  display: block;
  width: min(55%, 730px);
  padding: clamp(44px, 5.4vw, 82px) 0 118px clamp(34px, 5.2vw, 78px);
}

.mayor-tribute-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 19px;
  color: rgba(255, 255, 255, .76);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .19em;
  line-height: 1;
  text-transform: uppercase;
}

.mayor-tribute-eyebrow span {
  width: 35px;
  height: 2px;
  background: #ffd400;
  box-shadow: 10px 0 0 rgba(255, 212, 0, .34);
}

.mayor-tribute-copy h2 {
  max-width: 690px;
  margin: 0;
  color: #fff;
  font-size: clamp(2.45rem, 4.3vw, 5rem);
  font-weight: 830;
  letter-spacing: 0;
  line-height: .95;
}

.mayor-tribute-copy h2 em {
  color: #ffd400;
  font-style: normal;
}

.mayor-tribute-quote {
  display: grid;
  grid-template-columns: 29px minmax(0, 1fr);
  gap: 15px;
  max-width: 590px;
  margin: 29px 0 0;
  padding: 17px 0 17px 18px;
  border-left: 2px solid #ffd400;
}

.mayor-tribute-quote svg {
  width: 28px;
  height: 22px;
  margin-top: 2px;
  fill: #ffd400;
}

.mayor-tribute-quote p {
  margin: 0;
  color: rgba(255, 255, 255, .94);
  font-size: clamp(.98rem, 1.25vw, 1.16rem);
  font-weight: 690;
  letter-spacing: 0;
  line-height: 1.55;
}

.mayor-tribute-signature {
  position: absolute;
  z-index: 2;
  bottom: clamp(31px, 3vw, 46px);
  left: clamp(34px, 5.2vw, 78px);
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 14px 0 0;
  border-top: 1px solid rgba(255, 255, 255, .34);
}

.mayor-tribute-signature span {
  color: rgba(255, 255, 255, .72);
  font-size: .72rem;
  font-weight: 740;
  letter-spacing: .015em;
}

.mayor-tribute-signature strong {
  color: #fff;
  font-size: 1.08rem;
  font-weight: 850;
  letter-spacing: .08em;
}

.mayor-tribute-edition {
  position: absolute;
  z-index: 2;
  top: clamp(24px, 2.8vw, 38px);
  right: clamp(24px, 3.1vw, 48px);
  color: rgba(255, 255, 255, .68);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .18em;
  line-height: 1;
}

@media (max-width: 1024px) {
  .mayor-tribute-shell {
    min-height: 475px;
  }

  .mayor-tribute-media img {
    object-position: 55% 18%;
  }

  .mayor-tribute-copy {
    width: min(61%, 590px);
    padding-bottom: 112px;
  }

  .mayor-tribute-copy h2 {
    font-size: clamp(2.35rem, 5.3vw, 3.8rem);
  }
}

@media (max-width: 680px) {
  .mayor-tribute-section {
    width: calc(100% - 28px) !important;
    max-width: calc(100% - 28px) !important;
    margin: 24px auto !important;
  }

  .mayor-tribute-shell {
    min-height: 670px;
  }

  .mayor-tribute-media img {
    object-position: 58% 34%;
  }

  .mayor-tribute-veil {
    background:
      linear-gradient(180deg, rgba(5, 30, 49, .02) 0%, rgba(5, 30, 49, .08) 28%, rgba(3, 22, 40, .72) 55%, rgba(3, 18, 34, .97) 78%, rgba(3, 18, 34, 1) 100%);
  }

  .mayor-tribute-copy {
    position: absolute;
    right: 0;
    bottom: 80px;
    width: auto;
    padding: 0 21px;
  }

  .mayor-tribute-eyebrow {
    gap: 10px;
    margin-bottom: 13px;
    font-size: 9px;
  }

  .mayor-tribute-eyebrow span {
    width: 27px;
  }

  .mayor-tribute-copy h2 {
    font-size: clamp(2rem, 9.4vw, 2.72rem);
    line-height: .98;
  }

  .mayor-tribute-quote {
    grid-template-columns: 23px minmax(0, 1fr);
    gap: 11px;
    margin-top: 20px;
    padding: 13px 0 13px 14px;
  }

  .mayor-tribute-quote svg {
    width: 22px;
    height: 18px;
  }

  .mayor-tribute-quote p {
    font-size: .92rem;
    line-height: 1.48;
  }

  .mayor-tribute-signature {
    bottom: 23px;
    right: 21px;
    left: 21px;
    padding-top: 11px;
  }

  .mayor-tribute-signature span {
    font-size: .67rem;
  }

  .mayor-tribute-signature strong {
    font-size: 1rem;
  }

  .mayor-tribute-edition {
    top: 21px;
    right: 20px;
    font-size: 9px;
  }
}

/* Mobile-only media slides retain the uploaded asset's own aspect ratio. */
@media (max-width: 680px) {
  .hero.hero-photo.has-mobile-media.hero-media-only {
    height: auto;
    min-height: 0;
    padding: var(--hero-mobile-header-space, 104px) 0 0;
    background-image: none;
    background-color: #082039;
  }

  .hero.hero-photo.has-mobile-media.hero-media-only.hero-visual-clear {
    background-color: #f3f7fa;
  }

  .hero.hero-photo.has-mobile-media.hero-media-only::before,
  .hero.hero-photo.has-mobile-media.hero-media-only::after {
    display: none;
  }

  .hero.hero-photo.has-mobile-media.hero-media-only .hero-copy {
    display: none;
  }

  .hero.hero-photo.has-mobile-media.hero-media-only .hero-mobile-media-image,
  .hero.hero-photo.has-mobile-media.hero-media-only .hero-media-video {
    position: relative;
    inset: auto;
    z-index: 0;
    display: none;
    width: 100%;
    height: auto;
    min-height: 0;
    margin: 0;
    object-fit: contain;
    object-position: center center;
    opacity: 1;
    pointer-events: none;
    transform: none;
  }

  .hero.hero-photo.has-mobile-media.hero-media-only.has-mobile-image .hero-mobile-media-image {
    display: block;
  }

  .hero.hero-photo.has-mobile-media.hero-media-only.has-video .hero-media-video {
    display: block;
    aspect-ratio: var(--hero-mobile-video-ratio, 16 / 9);
    background: #082039;
  }

  .hero.hero-photo.has-mobile-media.hero-media-only.hero-visual-clear.has-video .hero-media-video {
    background: #f3f7fa;
  }
}

/* The mobile menu is a viewport dialog, independent of the sticky header. */
@media (max-width: 1024px) {
  .mobile-drawer {
    inset: 0;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: linear-gradient(155deg, #ffffff 0%, #f0f6fc 100%);
    overflow: hidden;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
  }

  body.mobile-open .mobile-drawer { visibility: visible; }

  body.mobile-open .nav-stack,
  body.mobile-open .quick-dock,
  body.mobile-open .muttas-ai-widget,
  body.mobile-open .cookie-bar {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .drawer-toolbar {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: calc(12px + env(safe-area-inset-top, 0px)) max(20px, env(safe-area-inset-right, 0px)) 12px max(20px, env(safe-area-inset-left, 0px));
    border-bottom: 1px solid rgba(15, 67, 121, .08);
    background: #fff;
  }

  .drawer-title { display: grid; gap: 2px; min-width: 0; }
  .drawer-title span { color: #007caf; font-size: 11px; font-weight: 800; letter-spacing: .1em; overflow-wrap: anywhere; }
  .drawer-title strong { color: #123658; font-size: 23px; line-height: 1.2; }
  .drawer-close {
    display: grid;
    place-items: center;
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    padding: 11px;
    color: #153b61;
    border: 1px solid #dce7f2;
    border-radius: 15px;
    background: #f2f7fc;
    cursor: pointer;
  }
  .drawer-close svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
  .drawer-close:focus-visible, .drawer-content :focus-visible, .drawer-utilities :focus-visible { outline: 3px solid #0086c4; outline-offset: 3px; }
  .drawer-content {
    display: grid;
    flex: 1 1 auto;
    align-content: start;
    gap: 8px;
    gap: clamp(4px, .8dvh, 8px);
    min-height: 0;
    min-width: 0;
    padding: 12px max(16px, env(safe-area-inset-right, 0px)) 12px max(16px, env(safe-area-inset-left, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .drawer-content .drawer-group + .drawer-group { margin-top: 0; }
  .drawer-content .drawer-head,
  .drawer-content .drawer-link {
    min-height: 56px;
    min-height: clamp(44px, 6.6dvh, 58px);
    padding: 5px 12px;
    border-radius: 16px;
    font-size: 15px;
    line-height: 1.3;
  }
  .drawer-content .drawer-link { grid-template-columns: auto minmax(0, 1fr); }
  .drawer-content .drawer-menu-icon {
    width: 36px;
    height: 36px;
    width: clamp(32px, 4.8dvh, 36px);
    height: clamp(32px, 4.8dvh, 36px);
    border-radius: 12px;
  }
  .drawer-content .drawer-head-main { gap: 12px; }
  .drawer-content a, .drawer-content strong { overflow-wrap: anywhere; }
  .drawer-utilities {
    display: grid;
    flex: 0 0 auto;
    gap: 10px;
    padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
    border-top: 1px solid rgba(15, 67, 121, .08);
    background: #f6faff;
  }
  .drawer-language-flags { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
  .drawer-language-flags .lang-option {
    display: grid;
    place-items: center;
    align-content: center;
    gap: 4px;
    flex: 1 1 60px;
    max-width: 110px;
    min-width: 0;
    min-height: 54px;
    padding: 6px 4px;
    color: #153b61;
    border: 1px solid #dce7f2;
    border-radius: 13px;
    background: #fff;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.2;
  }
  .drawer-language-flags .flag-img { width: 28px; height: 21px; border-radius: 3px; object-fit: contain; }
  .drawer-language-flags .lang-option:hover { border-color: #0086c4; background: #eaf6ff; }
  .drawer-utilities .drawer-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; border: 0; }
  .drawer-utilities .drawer-actions:empty { display: none; }
  .drawer-utilities .drawer-action { min-height: 44px; padding: 8px 6px; border-radius: 13px; font-size: 12px; overflow-wrap: anywhere; }
  .drawer-utilities .drawer-action:only-child { grid-column: 1 / -1; }
}
@media (max-width: 1024px) and (max-height: 650px) {
  .drawer-toolbar { padding-top: calc(8px + env(safe-area-inset-top, 0px)); padding-bottom: 8px; }
  .drawer-close { flex-basis: 44px; width: 44px; height: 44px; }
  .drawer-title strong { font-size: 21px; }
  .drawer-content { gap: 4px; padding-top: 6px; padding-bottom: 6px; }
  .drawer-content .drawer-head, .drawer-content .drawer-link { min-height: 44px; }
  .drawer-content .drawer-menu-icon { width: 32px; height: 32px; }
  .drawer-utilities { gap: 6px; padding-top: 6px; padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px)); }
  .drawer-language-flags .lang-option { min-height: 44px; gap: 2px; padding: 3px; }
  .drawer-language-flags .flag-img { width: 24px; height: 18px; }
}
@media (max-width: 1024px) and (prefers-reduced-motion: reduce) {
  .mobile-drawer { transition: none; }
}