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

    :root {
      --bg: #ecf4fc;
      --text: #1d2b44;
      --muted: #6b83a3;
      --navy: #184e86;
      --deep: #101827;
      --cream: #f8f3ec;
      --brand: #ff7f1f;
      --line: rgba(18, 55, 97, 0.1);
      --glass: rgba(255, 255, 255, 0.88);
      --glass-soft: rgba(255, 255, 255, 0.42);
      --shadow: 0 18px 44px rgba(17, 43, 80, 0.12);
      --container: min(1400px, calc(100vw - 28px));
      --logo-size: 150px;
      --logo-slot: 180px;
    }

    * { 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: hidden;
    }

    body {
      font-family: "Manrope", "Segoe UI", Arial, sans-serif;
      color: var(--text);
      background:
        radial-gradient(circle at top left, rgba(255, 186, 92, 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);
      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(255,127,31,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, .service-card, .project-card, .solution-card, .package-card) {
      position: relative;
    }

    :where(a, button):focus-visible {
      outline: 3px solid rgba(255,127,31,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 {
      width: var(--container);
      max-width: calc(100vw - 28px);
      margin: 20px auto 56px;
      overflow: visible;
      transition: padding-top .28s ease;
    }

    body.scrolled .wrap {
      padding-top: calc(var(--nav-stack-height, 92px) + 12px);
    }

    .utility-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      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;
      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: translateY(-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(255,127,31,0.14);
      background: linear-gradient(135deg, #ff8d29, #ff741d);
      box-shadow: 0 14px 28px rgba(255,127,31,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: relative;
      top: auto;
      z-index: 32;
      width: 100%;
      max-width: 100%;
      transition: top .28s ease, transform .32s cubic-bezier(.2,.8,.2,1);
    }

    body.scrolled .nav-stack {
      position: fixed;
      top: 10px;
      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: 76px;
      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;
      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.02em;
    }

    .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: 68px;
      display: grid;
      place-items: center;
      z-index: 3;
      transition: width .28s ease, height .28s ease;
    }

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

    .brand-center::before {
      inset: 10px 14px;
      border-radius: 999px;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0.18));
      filter: blur(12px);
      opacity: 0.55;
      transition: opacity .28s ease, transform .28s ease;
    }

    .brand-center::after {
      inset: 12px 18px;
      border-radius: 999px;
      background: linear-gradient(105deg, transparent 0%, transparent 34%, rgba(255,255,255,0.58) 48%, transparent 62%, transparent 100%);
      transform: translateX(-95%);
      opacity: 0.72;
      animation: logoShine 3.4s ease-in-out infinite;
      mix-blend-mode: screen;
    }

    .brand-center img {
      position: relative;
      z-index: 1;
      width: var(--logo-size);
      max-height: 50px;
      object-fit: contain;
      filter: drop-shadow(0 10px 16px rgba(24,78,134,0.11));
      animation: logoFloat 5.8s ease-in-out infinite;
      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 14px 22px rgba(24,78,134,0.18));
      transform: translateY(-1px);
    }

    body.scrolled {
      --logo-size: 136px;
      --logo-slot: 168px;
    }

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

    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(255,127,31,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(.96);
    }

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

    body.scrolled .brand-center img {
      filter:
        drop-shadow(0 10px 18px rgba(24,78,134,0.13))
        drop-shadow(0 0 18px rgba(255,127,31,0.07));
    }

    body.scrolled {
      --logo-size: 136px;
      --logo-slot: 168px;
    }

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

    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(255,127,31,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(.96);
    }

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

    body.scrolled .brand-center img {
      filter:
        drop-shadow(0 10px 18px rgba(24,78,134,0.13))
        drop-shadow(0 0 18px rgba(255,127,31,0.07));
    }

    .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;
    }

    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)),
        url("https://images.unsplash.com/photo-1520607162513-77705c0f0d4a?auto=format&fit=crop&w=1200&q=80") center/cover;
      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.05em;
      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.05em;
      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-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);
    }

    .mega-cta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      margin-top: 16px;
      padding: 14px 16px;
      border-radius: 20px;
      background:
        radial-gradient(circle at 8% 0%, rgba(255,127,31,0.16), transparent 34%),
        linear-gradient(135deg, rgba(20,31,51,0.96), rgba(26,54,88,0.94));
      color: #fff;
      box-shadow: 0 16px 30px rgba(17, 43, 80, 0.16);
      position: relative;
      z-index: 1;
    }

    .mega-cta strong {
      display: block;
      margin-bottom: 3px;
      font-size: .92rem;
      letter-spacing: -0.02em;
    }

    .mega-cta span {
      display: block;
      color: rgba(235,242,250,0.78);
      font-size: .82rem;
      line-height: 1.45;
    }

    .mega-cta button,
    .mega-cta a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 42px;
      padding: 10px 15px;
      border: 0;
      border-radius: 14px;
      background: linear-gradient(135deg, #ff8d29, #ff741d);
      color: #fff;
      font-weight: 900;
      white-space: nowrap;
      cursor: pointer;
      box-shadow: 0 12px 22px rgba(255,127,31,0.22);
    }

    .mega-quick-links {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 12px;
    }

    .mega-quick-links a {
      display: inline-flex;
      align-items: center;
      min-height: 28px;
      padding: 7px 10px;
      border-radius: 999px;
      color: #24486f;
      background: rgba(238,246,255,0.86);
      border: 1px solid rgba(24,78,134,0.08);
      font-size: .72rem;
      font-weight: 900;
      transition: transform .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
    }

    .mega-quick-links a:hover {
      transform: translateY(-2px);
      color: #fff;
      background: linear-gradient(135deg, rgba(255,127,31,0.95), rgba(255,103,22,0.92));
      box-shadow: 0 10px 20px rgba(255,127,31,0.2);
    }

    .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, #ff8d29, #ff741d);
        border-color: rgba(255,127,31,0.18);
        box-shadow: 0 12px 24px rgba(255,127,31,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-actions { order: 9; }

    @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(255,127,31,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(255,127,31,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(255,127,31,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(255,127,31,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(255,127,31,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(255,127,31,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 h1 {
      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.085em;
    }

    .hero h1 span {
      color: #ff8d29;
      text-shadow: 0 12px 34px rgba(255,127,31,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, #ff8d29, #fff0e5);
      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, #ff8d29, #fff0e5);
      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;
      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, #ff8d29, #ff741d);
      border-color: rgba(255,127,31,0.26);
      box-shadow: 0 18px 34px rgba(255,127,31,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.05em;
      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: #ff7f1f; }

    .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(255,127,31,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, #ff7f1f 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.06em;
    }

    .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, #ff7f1f, #ffb15f);
      box-shadow: 0 0 18px rgba(255,127,31,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: #ff7f1f;
      box-shadow: 0 0 0 6px rgba(255,127,31,0.1);
    }

    .delivery-step::after {
      content: "";
      position: absolute;
      inset: auto 10px 8px;
      height: 2px;
      border-radius: 999px;
      background: linear-gradient(90deg, rgba(255,127,31,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(255,127,31,0.38), transparent 34%),
        linear-gradient(135deg, #14233a, #184e86);
    }

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

    .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(255,127,31,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(255,127,31,0.96), rgba(255,103,22,0.94));
      box-shadow: 0 24px 46px rgba(255,127,31,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.05em;
    }

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

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

    .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.075em;
    }

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

    .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.04em;
    }

    .service-category-head span {
      display: inline-flex;
      align-items: center;
      min-height: 32px;
      padding: 0 13px;
      border-radius: 999px;
      color: #ff741d;
      background: rgba(255, 127, 31, 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(255,127,31,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(255,127,31,0.16);
      box-shadow:
        0 24px 48px rgba(17, 43, 80, 0.13),
        0 0 0 1px rgba(255,127,31,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.045em;
      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(255, 248, 241, 0.92), rgba(255, 238, 220, 0.74));
      border: 1px solid rgba(255, 127, 31, 0.18);
      box-shadow:
        0 10px 22px rgba(255, 111, 26, 0.08),
        inset 0 1px 0 rgba(255,255,255,0.8);
      font-weight: 900;
      font-size: .8rem;
      letter-spacing: -0.01em;
      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(255, 250, 245, 0.98), rgba(255, 232, 209, 0.82));
      border-color: rgba(255, 127, 31, 0.26);
      box-shadow:
        0 14px 28px rgba(255, 111, 26, 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(255,127,31,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(255,127,31,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(255,127,31,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(255,127,31,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(255,127,31,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(255,127,31,0.22);
      box-shadow:
        0 30px 70px rgba(17, 43, 80, 0.14),
        0 0 0 1px rgba(255,127,31,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(255,127,31,0.9);
      box-shadow: 0 12px 28px rgba(255,127,31,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.08em;
    }

    .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: #ff741d;
    }

    .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(255,127,31,0.95), rgba(255,255,255,0.2));
      box-shadow: 0 10px 24px rgba(255,127,31,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.05em;
    }

    .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(255,127,31,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(255,127,31,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.04em;
    }

    .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(255,127,31,0.74);
      border-color: rgba(255,127,31,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(255, 248, 241, 0.96), rgba(255, 238, 220, 0.78));
      border: 1px solid rgba(255,127,31,0.18);
      box-shadow: 0 12px 26px rgba(255,111,26,0.09);
      transition: transform .2s ease, box-shadow .2s ease;
    }

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

    .process-section {
      margin-top: 28px;
      padding: clamp(22px, 3vw, 34px);
      border-radius: 40px;
      background:
        radial-gradient(circle at 84% 4%, rgba(255,127,31,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(255,127,31,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.08em;
    }

    .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.045em;
    }

    .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, #ff8d29, #ff741d);
      box-shadow: 0 18px 34px rgba(255,127,31,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(255,127,31,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(255,127,31,0.12), rgba(24,78,134,0.22), rgba(255,127,31,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(255,127,31,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(255,127,31,0.18);
      box-shadow:
        0 26px 58px rgba(17, 43, 80, 0.12),
        0 0 0 1px rgba(255,127,31,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, #ff8d29, #ff741d);
      font-weight: 900;
      box-shadow: 0 18px 34px rgba(255,127,31,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.045em;
    }

    .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(255,127,31,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(255,127,31,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(255,127,31,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(255,127,31,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(255,127,31,0.18);
      box-shadow:
        0 28px 64px rgba(17, 43, 80, 0.13),
        0 0 0 1px rgba(255,127,31,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(255,127,31,0.1);
      border: 1px solid rgba(255,127,31,0.14);
      font-size: .72rem;
      font-weight: 900;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .package-card.featured .package-badge {
      color: #fff;
      background: rgba(255,127,31,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.06em;
    }

    .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(255,127,31,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(255,127,31,0.18);
      color: #9c4210;
      background: linear-gradient(180deg, rgba(255, 248, 241, 0.96), rgba(255, 238, 220, 0.78));
      box-shadow: 0 12px 26px rgba(255,111,26,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(255,111,26,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(255,127,31,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(255,127,31,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(255,127,31,0.28);
      box-shadow:
        0 28px 64px rgba(0,0,0,0.22),
        0 0 0 1px rgba(255,127,31,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: #ff8d29;
      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.045em;
    }

    .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(255,127,31,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.08em;
      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.085em;
    }

    .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%, #ffd6b7 0 22%, transparent 23%),
        radial-gradient(circle at 50% 70%, #ffffff 0 25%, transparent 26%),
        linear-gradient(135deg, #ff8d29, #ff741d);
      box-shadow: 0 14px 28px rgba(255,127,31,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: #ff8d29;
    }

    .contact-section {
      margin-top: 28px;
      padding: clamp(22px, 3vw, 34px);
      border-radius: 40px;
      background:
        radial-gradient(circle at 12% 0%, rgba(255,127,31,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(255,127,31,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.08em;
    }

    .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: #ff8d29;
      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, #ff8d29, #ff741d);
      box-shadow: 0 18px 34px rgba(255,127,31,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, #ff8d29, #ff741d);
      text-decoration: none;
      font-weight: 900;
      box-shadow: 0 14px 28px rgba(255,127,31,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(255,127,31,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.085em;
    }

    .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, #ff8d29, #ff741d);
      box-shadow: 0 22px 42px rgba(255,127,31,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(255,127,31,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.02em;
    }

    .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: #ff741d;
      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: #ff741d;
    }

    .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;
      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;
    }

    .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(255,127,31,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, #ff8d29, #ff741d);
      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.08em;
    }

    .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(255,127,31,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, #ff8d29, #ff741d);
      font-weight: 900;
      box-shadow: 0 18px 32px rgba(255,127,31,0.22);
    }

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

    .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(255,127,31,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.06em;
      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(255,127,31,0.5);
      background: #fff;
      box-shadow: 0 0 0 4px rgba(255,127,31,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, #ff8d29, #ff741d);
      box-shadow: 0 18px 34px rgba(255,127,31,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;
    }

    body.about-page,
    body.about-page .about-shell,
    body.about-page .about-shell > section,
    body.about-page .about-hero,
    body.about-page .about-section,
    body.about-page .about-hero-grid,
    body.about-page .story-layout,
    body.about-page .vision-grid,
    body.about-page .value-grid-about,
    body.about-page .team-grid-about,
    body.about-page .timeline-grid {
      min-width: 0;
      max-width: 100%;
    }

    body.about-page .about-title,
    body.about-page .about-lead,
    body.about-page .about-visual-copy,
    body.about-page .about-card,
    body.about-page .about-mini,
    body.about-page .about-value,
    body.about-page .about-timeline-card {
      min-width: 0;
      overflow-wrap: anywhere;
    }

    body.about-page .about-hero + .about-section {
      margin-top: 18px;
    }

    body.about-page .about-head {
      position: relative;
      display: block;
      width: 100%;
      max-width: none;
      margin-bottom: 26px;
      padding: 0 0 22px 22px;
    }

    body.about-page .about-head::before {
      content: "";
      position: absolute;
      left: 0;
      top: 4px;
      bottom: 4px;
      width: 3px;
      border-radius: 999px;
      background: linear-gradient(180deg, rgba(255,127,31,0.9), rgba(24,78,134,0.18));
      box-shadow: 0 0 0 7px rgba(255,127,31,0.06);
    }

    body.about-page .about-head::after {
      content: "";
      position: absolute;
      left: 22px;
      bottom: 0;
      width: min(320px, 100%);
      height: 1px;
      background: linear-gradient(90deg, rgba(24,78,134,0.16), rgba(24,78,134,0));
    }

    body.about-page .about-head .section-kicker {
      display: inline-flex;
      margin-bottom: 10px;
      letter-spacing: 0.11em;
    }

    body.about-page .about-head h2 {
      margin: 0;
      display: block;
      width: 100%;
      max-width: none;
      color: #17243a;
      letter-spacing: -0.055em;
      line-height: 1.04;
      text-wrap: pretty;
    }

    body.about-page .about-head p {
      margin: 14px 0 0;
      display: block;
      width: 100%;
      max-width: 72ch;
      color: #647b99;
      line-height: 1.8;
      font-size: 1.02rem;
    }

    body.about-page .about-cta-band {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      position: relative;
      overflow: hidden;
      border: 1px solid rgba(24, 78, 134, 0.08);
      box-shadow:
        0 24px 52px rgba(14, 28, 49, 0.16),
        inset 0 1px 0 rgba(255,255,255,0.04);
    }

    body.about-page .about-cta-band::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px),
        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px);
      background-size: 22px 22px;
      opacity: 0.35;
      pointer-events: none;
    }

    body.about-page .about-cta-band > * {
      position: relative;
      z-index: 1;
    }

    body.about-page .about-cta-band > div:first-child {
      flex: 1 1 880px;
      min-width: 0;
      width: min(100%, 920px);
      max-width: none;
    }

    body.about-page .about-cta-band .about-actions {
      flex: 0 0 auto;
      align-self: center;
      justify-content: flex-end;
      margin-left: auto;
      flex-wrap: wrap;
    }

    body.about-page .about-cta-band h3 {
      margin: 10px 0 12px;
      letter-spacing: -0.045em;
      line-height: 1.08;
      max-width: 22ch;
      text-wrap: pretty;
    }

    body.about-page .about-cta-band p {
      margin: 0;
      line-height: 1.76;
      max-width: 78ch;
    }

    body.project-detail-page .story-layout,
    body.project-detail-page .timeline-grid,
    body.project-detail-page .vision-grid {
      gap: 18px;
    }

    body.project-detail-page .about-head {
      max-width: none;
      margin-bottom: 22px;
    }

    body.project-detail-page .about-head h2 {
      letter-spacing: -0.045em;
      line-height: 1.06;
    }

    body.project-detail-page .story-layout .about-card,
    body.project-detail-page .vision-grid .about-card,
    body.project-detail-page .timeline-grid .about-timeline-card {
      border: 1px solid rgba(20, 52, 90, 0.08);
      background:
        radial-gradient(circle at 12% 0%, rgba(255,127,31,0.08), transparent 28%),
        linear-gradient(180deg, rgba(255,255,255,0.97), rgba(246,250,255,0.94)) !important;
      box-shadow:
        0 18px 46px rgba(17, 43, 80, 0.08),
        inset 0 1px 0 rgba(255,255,255,0.92);
    }

    body.project-detail-page .story-layout .about-card h2,
    body.project-detail-page .story-layout .about-card h3,
    body.project-detail-page .vision-grid .about-card h3,
    body.project-detail-page .timeline-grid .about-timeline-card h3 {
      color: #17243a;
      letter-spacing: -0.035em;
    }

    body.project-detail-page .story-layout .about-card p,
    body.project-detail-page .vision-grid .about-card p,
    body.project-detail-page .timeline-grid .about-timeline-card p,
    body.project-detail-page .about-head p {
      color: #647b99;
      line-height: 1.8;
    }

    #referans-grid .team-grid-about {
      gap: 22px;
    }

    #referans-grid .about-team-card {
      position: relative;
      overflow: hidden;
      border: 1px solid rgba(19, 47, 82, 0.08);
      background:
        radial-gradient(circle at 10% 0%, rgba(255,127,31,0.09), transparent 30%),
        linear-gradient(180deg, rgba(255,255,255,0.98), rgba(246,250,255,0.95)) !important;
      box-shadow:
        0 22px 52px rgba(17, 43, 80, 0.08),
        inset 0 1px 0 rgba(255,255,255,0.94);
      transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
    }

    #referans-grid .about-team-card:hover {
      transform: translateY(-8px);
      border-color: rgba(255,127,31,0.16);
      box-shadow:
        0 30px 66px rgba(17, 43, 80, 0.14),
        0 0 0 1px rgba(255,127,31,0.05);
    }

    #referans-grid .about-team-card img {
      transition: transform .38s ease, filter .3s ease;
      filter: saturate(1.02) contrast(1.01);
    }

    #referans-grid .about-team-card:hover img {
      transform: scale(1.035);
    }

    #referans-grid .about-team-card h3 {
      color: #17243a;
      letter-spacing: -0.035em;
    }

    #referans-grid .about-team-card p {
      color: #667d9a;
      line-height: 1.75;
    }

    #referans-grid .about-team-card .section-kicker {
      border-radius: 999px;
      border: 1px solid rgba(255,127,31,0.08);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.55);
    }

    #referans-grid .about-team-card a {
      color: #17355f;
      font-weight: 900 !important;
      letter-spacing: -0.02em;
      position: relative;
    }

    #referans-grid .about-team-card a::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: -3px;
      width: 100%;
      height: 1px;
      background: linear-gradient(90deg, rgba(23,53,95,0.42), rgba(255,127,31,0.42));
      transform: scaleX(.32);
      transform-origin: left center;
      transition: transform .24s ease;
    }

    #referans-grid .about-team-card:hover a::after {
      transform: scaleX(1);
    }

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

    .proof-section {
      position: relative;
      overflow: hidden;
    }

    .proof-shell {
      display: grid;
      gap: 24px;
      padding: 28px;
      border-radius: 34px;
      background:
        radial-gradient(circle at top left, rgba(255, 127, 31, 0.08), transparent 24%),
        linear-gradient(180deg, rgba(255,255,255,0.82), rgba(246,250,255,0.76));
      border: 1px solid rgba(24, 78, 134, 0.08);
      box-shadow:
        0 24px 54px rgba(18, 42, 74, 0.08),
        inset 0 1px 0 rgba(255,255,255,0.76);
    }

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

    .proof-metric {
      padding: 22px 24px;
      border-radius: 24px;
      background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(246,250,255,0.92));
      border: 1px solid rgba(33, 70, 117, 0.08);
      box-shadow:
        0 16px 34px rgba(18, 42, 74, 0.06),
        inset 0 1px 0 rgba(255,255,255,0.84);
    }

    .proof-metric strong {
      display: block;
      margin-bottom: 8px;
      color: #13233b;
      font-size: 1.55rem;
      letter-spacing: -0.04em;
    }

    .proof-metric span {
      display: block;
      color: #6d82a0;
      line-height: 1.65;
      font-size: 0.95rem;
    }

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

    .proof-card {
      position: relative;
      display: grid;
      grid-template-columns: 1fr;
      gap: 18px;
      align-items: stretch;
      padding: 18px;
      border-radius: 30px;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.98), rgba(246,250,255,0.96)),
        radial-gradient(circle at top left, rgba(255, 127, 31, 0.08), transparent 42%);
      border: 1px solid rgba(33, 70, 117, 0.08);
      box-shadow: 0 24px 60px rgba(18, 42, 74, 0.1);
      transition: transform 260ms ease, box-shadow 260ms ease, border-color 260ms ease;
    }

    .proof-card::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      padding: 1px;
      background: linear-gradient(135deg, rgba(255, 127, 31, 0.22), rgba(60, 112, 182, 0.12), rgba(255,255,255,0.06));
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      mask-composite: exclude;
      pointer-events: none;
    }

    .proof-card::after {
      content: "";
      position: absolute;
      left: 18px;
      right: 18px;
      top: 18px;
      height: 1px;
      background: linear-gradient(90deg, rgba(255,127,31,0.28), rgba(24,78,134,0.06));
      opacity: 0;
      transition: opacity .22s ease;
      pointer-events: none;
    }

    .proof-card:hover {
      transform: translateY(-6px);
      border-color: rgba(255, 127, 31, 0.2);
      box-shadow: 0 28px 68px rgba(18, 42, 74, 0.14);
    }

    .proof-card:hover::after {
      opacity: 1;
    }

    .proof-card-media {
      width: 100%;
      height: 220px;
      border-radius: 22px;
      object-fit: cover;
      display: block;
      box-shadow: 0 14px 34px rgba(18, 42, 74, 0.14);
    }

    .proof-card-body {
      min-width: 0;
      display: grid;
      align-content: start;
      gap: 14px;
    }

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

    .proof-badge {
      display: inline-flex;
      align-items: center;
      min-height: 32px;
      padding: 0 12px;
      border-radius: 999px;
      background: rgba(24, 78, 134, 0.07);
      color: #2b568e;
      font-size: 0.78rem;
      font-weight: 800;
      letter-spacing: 0.02em;
    }

    .proof-card h3 {
      margin: 0;
      color: #15243b;
      font-size: 1.22rem;
      letter-spacing: -0.03em;
      line-height: 1.2;
    }

    .proof-card p {
      margin: 0;
      color: #6d82a0;
      line-height: 1.72;
      font-size: 0.95rem;
    }

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

    .proof-tags span {
      display: inline-flex;
      align-items: center;
      min-height: 30px;
      padding: 0 11px;
      border-radius: 999px;
      background: rgba(255, 127, 31, 0.08);
      color: #ff7f1f;
      font-size: 0.75rem;
      font-weight: 800;
    }

    .proof-link {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      width: fit-content;
      margin-top: 2px;
      color: #17355f;
      font-size: 0.93rem;
      font-weight: 800;
      text-decoration: none;
      padding-bottom: 2px;
      border-bottom: 1px solid rgba(23, 53, 95, 0.14);
      transition: color 220ms ease, border-color 220ms ease;
    }

    .proof-link:hover {
      color: #ff7f1f;
      border-bottom-color: rgba(255, 127, 31, 0.28);
    }

    .proof-card.is-hidden {
      display: none;
    }

    .post-cta-shell {
      display: grid;
      grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
      gap: 20px;
      align-items: stretch;
    }

    .post-cta-offer,
    .post-cta-related {
      position: relative;
      overflow: hidden;
      padding: 30px;
      border-radius: 32px;
      border: 1px solid rgba(33, 70, 117, 0.08);
      box-shadow: 0 22px 56px rgba(18, 42, 74, 0.08);
    }

    .post-cta-offer {
      color: #fff;
      background:
        radial-gradient(circle at top right, rgba(255, 127, 31, 0.18), transparent 34%),
        linear-gradient(135deg, #13233b, #183050 58%, #21436c);
    }

    .post-cta-offer::before,
    .post-cta-related::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255,255,255,0.03) 1px, transparent 1px);
      background-size: 22px 22px;
      opacity: 0.4;
      pointer-events: none;
    }

    .post-cta-offer > *,
    .post-cta-related > * {
      position: relative;
      z-index: 1;
    }

    .post-cta-offer h3,
    .post-cta-related h3 {
      margin: 0 0 12px;
      letter-spacing: -0.04em;
      line-height: 1.04;
    }

    .post-cta-offer h3 {
      font-size: clamp(1.8rem, 3vw, 2.75rem);
      max-width: 13ch;
    }

    .post-cta-related h3 {
      color: #16253c;
      font-size: 1.45rem;
    }

    .post-cta-offer p {
      margin: 0;
      max-width: 58ch;
      color: rgba(239, 245, 255, 0.78);
      line-height: 1.75;
    }

    .post-cta-related {
      background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(246,250,255,0.96));
    }

    .post-cta-related p {
      margin: 0 0 16px;
      color: #6d82a0;
      line-height: 1.72;
    }

    .post-cta-related .section-kicker {
      margin-bottom: 10px;
      color: #ff7f1f;
    }

    .post-cta-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 22px;
    }

    .post-cta-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 52px;
      padding: 0 20px;
      border-radius: 18px;
      border: 1px solid transparent;
      font-size: 0.94rem;
      font-weight: 800;
      text-decoration: none;
      cursor: pointer;
      transition: transform 220ms ease, box-shadow 220ms ease, background 220ms ease, border-color 220ms ease;
    }

    .post-cta-btn.primary {
      color: #fff;
      background: linear-gradient(135deg, #ff9440, #ff7f1f);
      box-shadow: 0 14px 32px rgba(255, 127, 31, 0.28);
    }

    .post-cta-btn.primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 18px 38px rgba(255, 127, 31, 0.32);
    }

    .post-cta-btn.ghost {
      color: #eef5ff;
      border-color: rgba(255,255,255,0.14);
      background: rgba(255,255,255,0.08);
    }

    .post-cta-btn.ghost:hover {
      transform: translateY(-2px);
      background: rgba(255,255,255,0.12);
    }

    .post-cta-linklist {
      display: grid;
      gap: 12px;
    }

    .post-cta-link {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
      padding: 16px 18px;
      border-radius: 20px;
      background: rgba(239, 245, 255, 0.8);
      border: 1px solid rgba(26, 59, 101, 0.08);
      text-decoration: none;
      transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
    }

    .post-cta-link:hover {
      transform: translateY(-2px);
      border-color: rgba(255, 127, 31, 0.16);
      box-shadow: 0 16px 30px rgba(18, 42, 74, 0.08);
    }

    .post-cta-link div {
      min-width: 0;
    }

    .post-cta-link strong {
      display: block;
      margin-bottom: 6px;
      color: #16253c;
      font-size: 1rem;
      line-height: 1.25;
    }

    .post-cta-link span {
      display: block;
      color: #6d82a0;
      font-size: 0.9rem;
      line-height: 1.62;
    }

    .post-cta-link i {
      flex: 0 0 auto;
      width: 14px;
      height: 14px;
      margin-top: 8px;
      border-top: 2px solid #17355f;
      border-right: 2px solid #17355f;
      transform: rotate(45deg);
    }

    .proof-link::after {
      content: "";
      width: 8px;
      height: 8px;
      border-top: 2px solid currentColor;
      border-right: 2px solid currentColor;
      transform: rotate(45deg);
      transition: transform 220ms ease;
    }

    .proof-link:hover::after {
      transform: translateX(3px) rotate(45deg);
    }

    .district-card {
      position: relative;
      display: grid;
      gap: 10px;
      width: 100%;
      padding: 22px;
      text-align: left;
      border: 1px solid rgba(24,78,134,0.1);
      border-radius: 26px;
      background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(247,250,255,0.92));
      box-shadow: 0 18px 36px rgba(17,43,80,0.08);
      cursor: pointer;
      transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    }

    .district-card:hover {
      transform: translateY(-4px);
      border-color: rgba(255,127,31,0.2);
      box-shadow: 0 24px 42px rgba(17,43,80,0.12);
    }

    .district-card strong {
      font-size: 1.05rem;
      letter-spacing: -0.03em;
      color: #17243a;
    }

    .district-card span {
      color: #6d82a0;
      line-height: 1.65;
      font-size: .93rem;
    }

    .district-card em {
      font-style: normal;
      color: #ff7f1f;
      font-weight: 800;
      font-size: .8rem;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .service-breadcrumbs {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 10px;
      padding: 0 4px;
      color: #6c809b;
      font-size: .92rem;
    }

    .service-breadcrumbs a {
      color: #325886;
      font-weight: 700;
      transition: color .18s ease;
    }

    .service-breadcrumbs a:hover {
      color: #ff7f1f;
    }

    .service-breadcrumbs span {
      opacity: .72;
    }

    .service-seo-stack {
      display: grid;
      gap: 18px;
    }

    .service-seo-intro {
      display: grid;
      gap: 12px;
      padding: 24px 26px;
      border-radius: 28px;
      background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(247,250,255,0.94));
      border: 1px solid rgba(24,78,134,0.09);
      box-shadow: 0 18px 36px rgba(17,43,80,0.07);
    }

    .service-seo-intro p {
      margin: 0;
      color: #687f9d;
      line-height: 1.72;
    }

    .service-faq-grid {
      display: grid;
      gap: 16px;
    }

    .service-faq-item {
      border-radius: 24px;
      background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(247,250,255,0.94));
      border: 1px solid rgba(24,78,134,0.09);
      box-shadow: 0 18px 36px rgba(17,43,80,0.07);
      overflow: hidden;
    }

    .service-faq-item summary {
      list-style: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      padding: 22px 24px;
      font-size: 1.04rem;
      font-weight: 800;
      color: #18263d;
    }

    .service-faq-item summary::-webkit-details-marker {
      display: none;
    }

    .service-faq-item summary::after {
      content: "+";
      width: 34px;
      height: 34px;
      border-radius: 12px;
      display: grid;
      place-items: center;
      flex: 0 0 auto;
      background: rgba(255,127,31,0.08);
      color: #ff7f1f;
      font-size: 1.3rem;
      line-height: 1;
    }

    .service-faq-item[open] summary::after {
      content: "−";
    }

    .service-faq-answer {
      padding: 0 24px 22px;
      color: #6c809b;
      line-height: 1.72;
    }

    .service-faq-answer p {
      margin: 0;
    }

    .district-modal {
      position: fixed;
      inset: 0;
      z-index: 95;
      display: grid;
      place-items: center;
      padding: 18px;
      background: rgba(9, 21, 40, 0.5);
      opacity: 0;
      pointer-events: none;
      transition: opacity .22s ease;
    }

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

    .district-dialog {
      width: min(860px, 100%);
      max-height: min(86vh, 920px);
      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(247,250,255,0.96));
      box-shadow: 0 34px 80px rgba(8,28,58,0.28);
      transform: translateY(16px) scale(.98);
      transition: transform .22s ease;
    }

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

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

    .district-head small {
      display: block;
      margin-bottom: 8px;
      color: #ff7f1f;
      font-size: .76rem;
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .district-head h3 {
      margin: 0;
      font-size: clamp(1.5rem, 3vw, 2.2rem);
      letter-spacing: -0.05em;
      color: #17243a;
    }

    .district-close {
      width: 44px;
      height: 44px;
      border: 0;
      border-radius: 14px;
      background: rgba(24,78,134,0.08);
      color: #1d2b44;
      cursor: pointer;
      flex-shrink: 0;
      position: relative;
    }

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

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

    .district-body {
      overflow-y: auto;
      padding: 0 24px 24px;
    }

    .district-article {
      display: grid;
      gap: 18px;
      color: #4f6788;
      line-height: 1.85;
    }

    .district-article p {
      margin: 0;
    }

    .district-article strong {
      color: #17243a;
    }

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

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

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

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

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

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

      .nav-list {
        gap: 6px;
      }

      .nav-link {
        padding: 8px 11px;
      }

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

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

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

    @media (max-width: 1024px) {
      body.scrolled .wrap {
        padding-top: calc(var(--nav-stack-height, 72px) + 10px);
      }

      .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);
      }

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

      .mobile-brand {
        display: grid;
        margin-right: auto;
        position: relative;
        left: auto;
        top: auto;
        transform: none;
        align-items: center;
        justify-items: start;
      }

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

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

      .brand-center img,
      .mobile-brand img {
        width: 122px;
        max-width: 100%;
        max-height: 34px;
        object-position: left center;
        filter: none;
      }

      body.scrolled .mobile-brand,
      body.scrolled .mobile-brand img {
        transform: none;
        filter: none;
      }

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

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

      .mobile-drawer {
        position: fixed;
        inset: 94px 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;
      }

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

      .hero h1 {
        max-width: 100%;
        font-size: clamp(2rem, 9vw, 3rem);
      }

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

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

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

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

      .dashboard-insights {
        display: none;
      }

      .delivery-line {
        display: none;
      }

      .floating-card {
        right: 10px;
        bottom: 8px;
        width: min(220px, calc(100% - 20px));
        transform: none;
      }

      .section-head {
        display: grid;
        gap: 12px;
      }

      .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 {
        border-radius: 30px 30px 0 0;
      }

      .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;
      }

      body.about-page .about-shell {
        gap: 18px;
        padding-top: 8px;
      }

      body.about-page .about-hero,
      body.about-page .about-section {
        border-radius: 28px;
      }

      body.about-page .about-hero {
        padding: 24px 18px;
      }

      body.about-page .about-hero-grid,
      body.about-page .story-layout,
      body.about-page .vision-grid,
      body.about-page .value-grid-about,
      body.about-page .team-grid-about,
      body.about-page .timeline-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 16px;
      }

      body.about-page .about-side,
      body.about-page .about-panel-head,
      body.about-page .about-actions,
      body.about-page .about-cta-band {
        grid-template-columns: minmax(0, 1fr);
      }

      body.about-page .about-cta-band {
        align-items: stretch !important;
        justify-content: flex-start !important;
        flex-direction: column;
      }

      body.about-page .about-cta-band > div:first-child,
      body.about-page .about-cta-band .about-actions {
        flex: 1 1 auto;
        margin-left: 0;
      }

      body.about-page .about-visual,
      body.about-page .about-card,
      body.about-page .about-mini,
      body.about-page .about-value,
      body.about-page .about-timeline-card {
        border-radius: 24px !important;
      }

      body.about-page .about-visual {
        min-height: 280px;
      }

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

      .proof-metrics,
      .proof-grid,
      .post-cta-shell {
        grid-template-columns: 1fr;
      }

      .proof-shell {
        padding: 22px;
        border-radius: 28px;
      }

      .proof-card-media {
        min-height: 220px;
      }

      .service-faq-item summary {
        font-size: .98rem;
      }

      body.about-page .about-title {
        max-width: 100%;
        font-size: clamp(2.25rem, 11vw, 3.5rem);
        line-height: .96;
      }

      body.about-page .about-lead {
        max-width: 100%;
        font-size: .98rem;
        line-height: 1.72;
      }

      body.about-page .about-panel-head {
        display: grid;
        gap: 14px;
      }

      body.about-page .about-head {
        padding-left: 18px;
        margin-bottom: 20px;
      }

      body.about-page .about-head h2,
      body.about-page .about-head p {
        width: 100%;
      }

      body.about-page .about-score {
        text-align: left;
      }

      .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) {
    body.about-page .hero-points {
      margin-top: 22px;
      grid-template-columns: 1fr;
      gap: 12px;
    }

    body.about-page .hero-point {
      padding: 16px;
      border-radius: 20px;
      background: linear-gradient(180deg, rgba(255,255,255,0.1), rgba(255,255,255,0.06));
      }

      body.about-page .hero-point strong {
        margin-bottom: 6px;
        font-size: 1.16rem;
        line-height: 1.08;
      }

      body.about-page .hero-point span {
        font-size: .9rem;
        line-height: 1.58;
      }

      body.about-page .about-shell {
        gap: 14px;
      }

      body.about-page .about-hero {
        padding: 20px 16px;
        border-radius: 24px;
      }

      body.about-page .about-section {
        border-radius: 24px;
      }

      body.about-page .page-kicker {
        min-height: 36px;
        padding-inline: 14px;
        font-size: .7rem;
        letter-spacing: .08em;
      }

      body.about-page .about-title {
        font-size: clamp(2rem, 12vw, 2.8rem);
      }

      body.about-page .about-head {
        padding-left: 16px;
        padding-bottom: 18px;
      }

      body.about-page .about-actions .about-btn,
      body.about-page .about-cta-band .about-btn {
        width: 100%;
        justify-content: center;
      }

      body.about-page .about-visual {
        min-height: 240px;
      }

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

      .proof-metric {
        padding: 20px;
      }

      .proof-card {
        padding: 16px;
        border-radius: 24px;
      }

      .post-cta-offer,
      .post-cta-related {
        padding: 22px 20px;
        border-radius: 24px;
      }

      .post-cta-actions {
        flex-direction: column;
      }

      .post-cta-btn {
        width: 100%;
      }

      .proof-card-media {
        min-height: 180px;
        border-radius: 18px;
      }

      .service-breadcrumbs {
        font-size: .86rem;
        gap: 8px;
      }

      .service-seo-intro,
      .service-faq-item summary,
      .service-faq-answer {
        padding-left: 18px;
        padding-right: 18px;
      }

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

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

      .district-head,
      .district-body {
        padding-inline: 18px;
      }

      body.about-page .about-panel {
        padding: 18px;
      }

      body.about-page .about-score {
        min-width: 0;
      }

      .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;
      }
    }
  


    .case-study-shell {
      display: grid;
      grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr);
      gap: 20px;
      align-items: stretch;
    }

    .case-study-summary,
    .case-study-meta {
      border-radius: 30px;
      border: 1px solid rgba(18, 55, 97, 0.08);
      background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(247,251,255,0.92));
      box-shadow: 0 20px 48px rgba(17, 43, 80, 0.08);
      padding: 28px;
    }

    .case-study-summary h2,
    .case-study-meta h3 {
      margin: 10px 0 12px;
      letter-spacing: -0.04em;
      color: #17243a;
    }

    .case-study-summary p,
    .case-study-meta p {
      margin: 0;
      color: #617898;
      line-height: 1.8;
    }

    .case-study-summary .section-kicker,
    .case-study-meta .section-kicker {
      color: #ff7f1f;
    }

    .case-study-list {
      display: grid;
      gap: 12px;
      margin-top: 20px;
    }

    .case-study-list li {
      list-style: none;
      display: flex;
      gap: 12px;
      align-items: flex-start;
      color: #263a56;
      line-height: 1.7;
    }

    .case-study-list li::before {
      content: "";
      width: 10px;
      height: 10px;
      margin-top: 9px;
      border-radius: 999px;
      flex: 0 0 auto;
      background: linear-gradient(135deg, #ff9440, #ff7f1f);
      box-shadow: 0 0 0 6px rgba(255,127,31,0.12);
    }

    .case-study-meta-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
      margin-top: 18px;
    }

    .case-study-stat {
      padding: 18px;
      border-radius: 22px;
      background: linear-gradient(180deg, #f8fbff, #edf4fb);
      border: 1px solid rgba(18,55,97,0.08);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.92);
    }

    .case-study-stat small {
      display: block;
      margin-bottom: 8px;
      color: #ff7f1f;
      text-transform: uppercase;
      letter-spacing: .1em;
      font-weight: 800;
      font-size: .72rem;
    }

    .case-study-stat strong {
      display: block;
      margin-bottom: 8px;
      font-size: 1.04rem;
      letter-spacing: -0.03em;
      color: #1a2b43;
    }

    .case-study-stat span {
      display: block;
      color: #617898;
      line-height: 1.65;
      font-size: .94rem;
    }

    .solution-path-shell {
      display: grid;
      grid-template-columns: minmax(280px, .9fr) minmax(0, 1.1fr);
      gap: 22px;
      padding: 30px;
      border-radius: 32px;
      background:
        radial-gradient(circle at 12% 0%, rgba(255,127,31,0.14), transparent 30%),
        radial-gradient(circle at 100% 18%, rgba(24,78,134,0.12), transparent 34%),
        linear-gradient(145deg, rgba(9,18,32,0.98), rgba(18,33,56,0.95));
      border: 1px solid rgba(255,255,255,0.08);
      box-shadow:
        0 28px 70px rgba(7, 16, 29, 0.28),
        inset 0 1px 0 rgba(255,255,255,0.08);
      overflow: hidden;
      position: relative;
    }

    .solution-path-shell::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px),
        linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px);
      background-size: 26px 26px;
      opacity: .22;
      pointer-events: none;
    }

    .solution-path-intro,
    .solution-path-grid {
      position: relative;
      z-index: 1;
    }

    .solution-path-intro {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 22px;
    }

    .solution-path-intro .section-kicker {
      color: #ffb57d;
    }

    .solution-path-intro h2 {
      margin: 10px 0 14px;
      color: #f8fbff;
      letter-spacing: -0.05em;
      line-height: 1.02;
    }

    .solution-path-intro p {
      margin: 0;
      color: rgba(231, 239, 251, 0.78);
      line-height: 1.78;
    }

    .solution-path-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
    }

    .solution-path-note {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      align-self: flex-start;
      min-height: 34px;
      padding: 0 14px;
      border-radius: 999px;
      color: rgba(235,242,252,0.88);
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.08);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
      font-size: .78rem;
      font-weight: 700;
      letter-spacing: .01em;
    }

    .solution-path-note::before {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: linear-gradient(135deg, #ff9440, #ff7f1f);
      box-shadow: 0 0 0 5px rgba(255,127,31,0.12);
      flex: 0 0 auto;
    }

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

    .solution-path-card {
      display: flex;
      flex-direction: column;
      min-height: 100%;
      padding: 22px;
      border-radius: 24px;
      text-decoration: none;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.96), rgba(243,248,255,0.9));
      border: 1px solid rgba(255,255,255,0.1);
      box-shadow:
        0 18px 42px rgba(7, 16, 29, 0.16),
        inset 0 1px 0 rgba(255,255,255,0.92);
      transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
    }

    .solution-path-card:hover {
      transform: translateY(-6px);
      box-shadow:
        0 24px 54px rgba(7, 16, 29, 0.22),
        0 0 0 1px rgba(255,127,31,0.08);
      border-color: rgba(255,127,31,0.18);
    }

    .solution-path-card small {
      display: inline-flex;
      align-self: flex-start;
      min-height: 28px;
      padding: 0 10px;
      align-items: center;
      border-radius: 999px;
      background: rgba(255,127,31,0.1);
      color: #c55c12;
      font-size: .7rem;
      font-weight: 900;
      letter-spacing: .1em;
      text-transform: uppercase;
      margin-bottom: 16px;
    }

    .solution-path-card strong {
      display: block;
      color: #17243a;
      font-size: 1.08rem;
      line-height: 1.28;
      letter-spacing: -0.03em;
      margin-bottom: 10px;
    }

    .solution-path-card span {
      display: block;
      color: #617898;
      line-height: 1.7;
      margin-bottom: 18px;
    }

    .solution-path-card em {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin-top: auto;
      color: #184e86;
      font-style: normal;
      font-weight: 800;
      letter-spacing: -0.02em;
    }

    .solution-path-card em svg {
      width: 16px;
      height: 16px;
      stroke: currentColor;
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    @media (max-width: 940px) {
      .case-study-shell {
        grid-template-columns: 1fr;
      }

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

      .solution-path-grid {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 640px) {
      .case-study-summary,
      .case-study-meta {
        padding: 20px;
        border-radius: 24px;
      }

      .case-study-meta-grid {
        grid-template-columns: 1fr;
      }

      .solution-path-shell {
        padding: 22px;
        border-radius: 26px;
      }

      .solution-path-card {
        padding: 20px;
        border-radius: 22px;
      }
    }