:root {
        --navy: #0d3263;
        --blue: #123b72;
        --blue2: #1f63b7;
        --orange: #f58220;
        --orange2: #ff7a18;
        --ink: #111827;
        --muted: #667085;
        --line: #e8edf2;
        --soft: #f4f7fa;
        --paper: #fff;
        --container: min(1680px, calc(100% - 112px));
        --shadow: 0 24px 70px rgba(13, 50, 99, 0.1);
      }


      * {
        box-sizing: border-box;
      }
      html {
        scroll-behavior: smooth;
      }
      body {
        margin: 0;
        font-family:
          Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
        color: var(--ink);
        background: #fff;
        letter-spacing: 0;
        font-size: 16px;
        line-height: 1.65;
        -webkit-font-smoothing: antialiased;
      }
      img {
        max-width: 100%;
        display: block;
      }
      a {
        text-decoration: none;
        color: inherit;
      }
      button {
        font: inherit;
      }
      .container {
        width: var(--container);
        margin: auto;
      }
      .eyebrow {
        font-size: 13px;
        font-weight: 750;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: #2d6ebc;
      }
      .eyebrow.orange {
        color: var(--orange);
      }
      .section {
        padding: 142px 0;
      }
      .section.soft {
        background: linear-gradient(180deg, #f8fbff, #f5f8fb);
      }
      .section-head {
        max-width: 1040px;
        margin-bottom: 64px;
      }
      .section-head.center {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
      }
      .section h2 {
        font-size: clamp(44px, 4vw, 64px);
        line-height: 1.14;
        margin: 14px 0 20px;
        color: var(--navy);
        letter-spacing: -0.04em;
      }
      .section p.lead {
        font-size: 18px;
        line-height: 1.8;
        color: var(--muted);
        max-width: 780px;
        margin: 0;
      }
      .section-head.center p.lead {
        margin: auto;
      }
      .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        height: 54px;
        padding: 0 28px;
        border-radius: 999px;
        font-weight: 700;
        border: 1px solid transparent;
        transition: 0.3s;
      }
      .btn.primary {
        color: #075baa;
        background: linear-gradient(135deg, var(--orange), var(--orange2));
        box-shadow: 0 12px 28px rgba(245, 130, 32, 0.24);
      }
      .btn.primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 16px 38px rgba(245, 130, 32, 0.3);
      }
      .btn.ghost {
        color: var(--navy);
        border-color: rgba(13, 50, 99, 0.18);
        background: rgba(255, 255, 255, 0.55);
        backdrop-filter: blur(10px);
      }
      .link {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        color: var(--blue);
        font-weight: 700;
      }
      .link span {
        transition: 0.25s;
      }
      .link:hover span {
        transform: translateX(5px);
      }
      /* header */
      .header {
        position: fixed;
        inset: 0 0 auto;
        z-index: 50;
        height: 84px;
        display: flex;
        align-items: center;
        transition: 0.35s;
        background: rgba(255, 255, 255, 0.25);
      }
      .header.scrolled {
        background: rgba(255, 255, 255, 0.82);
        backdrop-filter: blur(18px);
        border-bottom: 1px solid rgba(20, 55, 95, 0.07);
      }
      .nav-wrap {
        width: var(--container);
        margin: auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 40px;
      }
      .brand img {
        width: 180px;
        height: 62px;
        object-fit: contain;
        object-position: left center;
      }
      .brand-group {
        display: flex;
        align-items: center;
        flex: 0 0 auto;
      }
      .brand-tagline {
        position: relative;
        margin-left: 12px;
        padding-left: 14px;
        color: #315578;
        font-size: 17px;
        font-weight: 700;
        letter-spacing: 0.025em;
        white-space: nowrap;
      }
      .brand-tagline::before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        width: 1px;
        height: 28px;
        background: #cbd9e7;
        transform: translateY(-50%);
      }
      .nav {
        display: flex;
        gap: 44px;
        align-items: center;
        font-size: 15px;
      }
      .nav a {
        position: relative;
        padding: 10px 0;
      }
      .nav a::after {
        content: "";
        position: absolute;
        left: 50%;
        right: 50%;
        bottom: 2px;
        height: 2px;
        background: var(--blue2);
        transition: 0.25s;
      }
      .nav a:hover::after,
      .nav a.active::after {
        left: 0;
        right: 0;
      }
      .header-cta {
        height: 46px;
        padding: 0 23px;
      }
      @media (max-width: 1450px) {
        .brand-tagline {
          display: none;
        }
      }
      /* hero */
      .hero {
        position: relative;
        height: min(980px, 100vh);
        min-height: 760px;
        overflow: hidden;
        background: #eef6ff;
      }
      .slide {
        position: absolute;
        inset: 0;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.8s ease;
      }
      .slide.active {
        opacity: 1;
        pointer-events: auto;
      }
      .slide-bg {
        position: absolute;
        inset: 0;
        background-image: var(--desktop-bg);
        background-size: cover;
        background-position: center;
      }
      .slide::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
          90deg,
          rgba(255, 255, 255, 0.99) 0%,
          rgba(255, 255, 255, 0.9) 30%,
          rgba(255, 255, 255, 0.36) 53%,
          rgba(255, 255, 255, 0.05) 100%
        );
      }
      .hero-copy {
        position: relative;
        z-index: 2;
        width: var(--container);
        margin: auto;
        height: 100%;
        display: flex;
        align-items: center;
      }
      .hero-inner {
        max-width: 760px;
        margin-top: 55px;
      }
      .hero .eyebrow {
        margin-bottom: 20px;
      }
      .hero h1 {
        font-size: clamp(58px, 5.3vw, 92px);
        line-height: 1.02;
        letter-spacing: -0.055em;
        color: var(--navy);
        margin: 0 0 28px;
      }
      .hero h1 .accent {
        color: var(--orange);
      }
      .hero .sub {
        font-size: 25px;
        line-height: 1.5;
        color: #153b6e;
        font-weight: 650;
        margin: 0 0 22px;
      }
      .hero .desc {
        font-size: 17px;
        line-height: 1.9;
        color: #53657c;
        max-width: 650px;
      }
      .hero-actions {
        display: flex;
        gap: 16px;
        margin-top: 34px;
      }
      .hero-metrics {
        display: flex;
        gap: 24px;
        flex-wrap: wrap;
        margin-top: 36px;
        color: #35516f;
        font-size: 14px;
      }
      .hero-metrics span {
        position: relative;
        padding-right: 24px;
      }
      .hero-metrics span:not(:last-child)::after {
        content: "";
        position: absolute;
        right: 0;
        top: 2px;
        width: 1px;
        height: 16px;
        background: #cbd7e3;
      }
      .dots {
        position: absolute;
        z-index: 5;
        left: 50%;
        bottom: 32px;
        transform: translateX(-50%);
        display: flex;
        gap: 10px;
      }
      .dot {
        width: 8px;
        height: 8px;
        border: none;
        border-radius: 50%;
        padding: 0;
        background: #aebfd2;
        cursor: pointer;
        transition: 0.25s;
      }
      .dot.active {
        width: 28px;
        border-radius: 6px;
        background: var(--orange);
      }
      /* metrics */
      .metrics {
        padding: 105px 0 120px;
        background: #fff;
      }
      .metrics-grid {
        width: var(--container);
        margin: auto;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
      }
      .metric {
        padding: 0 52px;
        text-align: center;
        border-right: 1px solid var(--line);
      }
      .metric:first-child {
        padding-left: 0;
      }
      .metric:last-child {
        border-right: 0;
        padding-right: 0;
      }
      .metric strong {
        display: block;
        font-size: 64px;
        line-height: 1.1;
        color: var(--blue);
        letter-spacing: -0.055em;
      }
      .metric span {
        font-size: 16px;
        color: #56687c;
      }
      /* capability */
      .capability-stage {
        position: relative;
        min-height: 555px;
        margin-top: 26px;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 38px;
        align-items: end;
      }
      .cap-line {
        position: absolute;
        top: 94px;
        left: 9%;
        right: 9%;
        height: 1px;
        background: linear-gradient(
          90deg,
          transparent,
          #b9cfe6 12%,
          #b9cfe6 88%,
          transparent
        );
      }
      .cap-item {
        position: relative;
        padding: 0 8px;
      }
      .cap-icon {
        width: 76px;
        height: 76px;
        border-radius: 50%;
        background: #fff;
        border: 1px solid #cfe0f1;
        box-shadow: 0 10px 30px rgba(27, 76, 128, 0.08);
        display: grid;
        place-items: center;
        margin-bottom: 30px;
        position: relative;
        z-index: 2;
      }
      .cap-icon svg {
        width: 31px;
        height: 31px;
        stroke: var(--blue2);
        fill: none;
        stroke-width: 1.6;
      }
      .cap-item:nth-child(5) .cap-icon svg {
        stroke: var(--orange);
      }
      .cap-item b {
        font-size: 22px;
        color: var(--navy);
      }
      .cap-item p {
        font-size: 15px;
        color: var(--muted);
        line-height: 1.75;
      }
      .cap-num {
        font-size: 12px;
        color: var(--blue2);
        letter-spacing: 0.12em;
        margin-bottom: 6px;
      }
      .cap-visual {
        height: 205px;
        margin-top: 25px;
        display: flex;
        align-items: end;
        justify-content: center;
      }
      .cap-visual img {
        max-height: 195px;
        object-fit: contain;
        filter: drop-shadow(0 22px 26px rgba(13, 50, 99, 0.12));
      }
      /* product story */
      .product-story {
        padding-top: 126px;
      }
      .product-row {
        min-height: 640px;
        display: grid;
        grid-template-columns: 40% 60%;
        align-items: center;
        gap: 96px;
        padding: 58px 0;
        border-top: 1px solid #eef2f6;
      }
      .product-row.reverse {
        grid-template-columns: 60% 40%;
      }
      .product-row.reverse .product-copy {
        order: 2;
      }
      .product-row.reverse .product-media {
        order: 1;
      }
      .product-copy {
        padding: 24px 0;
      }
      .product-index {
        font-size: 48px;
        line-height: 1;
        color: var(--orange);
        font-weight: 800;
        margin-bottom: 22px;
      }
      .product-copy h3 {
        font-size: 46px;
        line-height: 1.18;
        color: var(--navy);
        margin: 0 0 18px;
        letter-spacing: -0.04em;
      }
      .product-copy > p {
        font-size: 17px;
        line-height: 1.8;
        color: var(--muted);
        max-width: 560px;
      }
      .feature-list {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        margin: 24px 0 30px;
      }
      .chip {
        padding: 8px 15px;
        border-radius: 999px;
        background: #f5f8fb;
        color: #416181;
        font-size: 13px;
        border: 1px solid #e6edf4;
      }
      .product-media {
        height: 470px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
      }
      .product-media::before {
        content: "";
        position: absolute;
        width: 80%;
        height: 80%;
        border-radius: 50%;
        background: radial-gradient(
          circle,
          rgba(172, 214, 255, 0.38),
          rgba(255, 255, 255, 0) 70%
        );
      }
      .product-media img {
        position: relative;
        max-height: 100%;
        width: 100%;
        object-fit: contain;
        border-radius: 30px;
        mix-blend-mode: multiply;
      }
      .product-row.cloud {
        margin-top: 28px;
        border: 0;
        border-radius: 40px;
        padding: 76px 70px;
        background: radial-gradient(
          circle at 70% 50%,
          #dcefff 0,
          #eef7ff 38%,
          #f8fbff 68%,
          #fff 100%
        );
        box-shadow: inset 0 0 0 1px #ecf3f9;
      }
      .product-row.cloud .product-media img {
        mix-blend-mode: normal;
        box-shadow: var(--shadow);
      }
      /* why */
      .why-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 44px;
        margin-top: 58px;
      }
      .why-item {
        padding-top: 24px;
        border-top: 2px solid #dce8f5;
      }
      .why-item .n {
        font-size: 40px;
        font-weight: 800;
        color: #2d6ebc;
      }
      .why-item h3 {
        font-size: 22px;
        color: var(--navy);
        margin: 22px 0 10px;
      }
      .why-item p {
        color: var(--muted);
        line-height: 1.75;
      }
      /* editorial solution */
      .editorial {
        display: grid;
        grid-template-columns: 1.15fr 0.85fr 0.85fr;
        grid-auto-rows: 270px;
        gap: 22px;
      }
      .tile {
        position: relative;
        overflow: hidden;
        border-radius: 30px;
        background: #dfe8ef;
      }
      .tile.big {
        grid-column: 1/3;
        grid-row: span 2;
      }
      .tile img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: 0.55s;
      }
      .tile:hover img {
        transform: scale(1.035);
      }
      .tile::after {
        content: "";
        position: absolute;
        inset: 35% 0 0;
        background: linear-gradient(transparent, rgba(6, 29, 53, 0.7));
      }
      .tile-label {
        position: absolute;
        z-index: 2;
        left: 28px;
        right: 28px;
        bottom: 24px;
        color: #d95f00;
      }
      .tile-label b {
        font-size: 24px;
      }
      .tile-label p {
        margin: 7px 0 0;
        font-size: 14px;
        opacity: 0.85;
      }
      .tile.small .tile-label b {
        font-size: 19px;
      }
      /* retrofit */
      .compare {
        display: grid;
        grid-template-columns: 1fr 1.6fr;
        gap: 22px;
        height: 420px;
      }
      .compare figure {
        margin: 0;
        position: relative;
        overflow: hidden;
        border-radius: 32px;
      }
      .compare img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .compare figcaption {
        position: absolute;
        left: 25px;
        bottom: 22px;
        background: rgba(9, 32, 59, 0.64);
        backdrop-filter: blur(8px);
        color: #fff;
        padding: 10px 14px;
        border-radius: 12px;
      }
      .bot-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 32px;
        margin-top: 32px;
      }
      .bot-panel {
        padding: 50px;
        border-radius: 32px;
        background: rgba(255, 255, 255, 0.84);
        border: 1px solid #e6eef6;
        min-height: 310px;
        position: relative;
        overflow: hidden;
      }
      .bot-panel h3 {
        font-size: 30px;
        color: var(--navy);
        margin: 0 0 18px;
      }
      .bot-panel p {
        color: var(--muted);
        line-height: 1.8;
      }
      .bot-points {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px 20px;
        margin: 28px 0;
      }
      .bot-points span {
        color: #3f5f81;
      }
      .saving {
        position: absolute;
        right: 34px;
        bottom: 30px;
        font-size: 56px;
        font-weight: 800;
        color: var(--orange);
        opacity: 0.9;
      }
      /* cooperation */
      .coop {
        display: grid;
        grid-template-columns: 1.05fr 1fr 1.15fr;
        gap: 20px;
      }
      .coop-item {
        height: 380px;
        border-radius: 30px;
        overflow: hidden;
        position: relative;
        background: #123b72;
      }
      .coop-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .coop-item::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
          90deg,
          rgba(7, 36, 73, 0.92),
          rgba(7, 36, 73, 0.15)
        );
      }
      .coop-copy {
        position: absolute;
        z-index: 2;
        left: 36px;
        top: 36px;
        color: #fff;
      }
      .coop-copy h3 {
        font-size: 31px;
        margin: 0 0 18px;
      }
      .coop-copy p {
        line-height: 1.9;
        opacity: 0.86;
      }
      .coop-copy .arrow {
        font-size: 30px;
        margin-top: 20px;
      }
      /* cases */
      .case-layout {
        display: grid;
        grid-template-columns: 1.65fr 0.7fr 0.7fr;
        gap: 24px;
        align-items: stretch;
      }
      .case-main,
      .case-side {
        border-radius: 30px;
        overflow: hidden;
        position: relative;
        background: #eef3f7;
      }
      .case-main {
        min-height: 520px;
      }
      .case-main img,
      .case-side img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .case-main::after {
        content: "";
        position: absolute;
        inset: 45% 0 0;
        background: linear-gradient(transparent, rgba(4, 27, 50, 0.8));
      }
      .case-copy {
        position: absolute;
        z-index: 2;
        left: 40px;
        bottom: 34px;
        color: #fff;
      }
      .case-copy h3 {
        font-size: 34px;
        margin: 0 0 10px;
      }
      .case-copy p {
        margin: 0;
        opacity: 0.88;
      }
      .case-stat {
        position: absolute;
        right: 34px;
        bottom: 26px;
        z-index: 2;
        color: #fff;
        text-align: right;
      }
      .case-stat strong {
        font-size: 72px;
        color: #ff9a47;
      }
      .case-side {
        min-height: 248px;
      }
      .case-col {
        display: grid;
        gap: 24px;
      }
      .case-side .label {
        position: absolute;
        left: 22px;
        bottom: 18px;
        padding: 10px 14px;
        border-radius: 12px;
        background: rgba(7, 36, 73, 0.72);
        color: #fff;
        backdrop-filter: blur(10px);
      }
      /* about */
      .about-grid {
        display: grid;
        grid-template-columns: 0.72fr 1.28fr;
        gap: 70px;
        align-items: center;
      }
      .about-image {
        height: 560px;
        border-radius: 38px;
        overflow: hidden;
        box-shadow: var(--shadow);
      }
      .about-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .about-copy h2 {
        max-width: 580px;
      }
      .about-copy p {
        font-size: 18px;
        line-height: 1.95;
        color: var(--muted);
      }
      .timeline {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        margin-top: 100px;
        position: relative;
      }
      .timeline::before {
        content: "";
        position: absolute;
        top: 35px;
        left: 8%;
        right: 8%;
        height: 1px;
        background: #cad9e8;
      }
      .time {
        text-align: center;
        position: relative;
      }
      .time strong {
        font-size: 24px;
        color: var(--navy);
      }
      .time i {
        display: block;
        width: 13px;
        height: 13px;
        border-radius: 50%;
        background: #fff;
        border: 3px solid var(--blue2);
        margin: 18px auto 14px;
        position: relative;
        z-index: 2;
      }
      .time:last-child i {
        border-color: var(--orange);
      }
      .time span {
        color: var(--muted);
      }
      /* cert/news */
      .cert-strip {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 18px;
      }
      .cert {
        padding: 34px 20px;
        text-align: center;
        border-top: 1px solid #e9edf3;
        border-bottom: 1px solid #e9edf3;
      }
      .medal {
        width: 76px;
        height: 76px;
        margin: 0 auto 18px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        background: linear-gradient(145deg, #fff7e9, #f1e1bd);
        color: #9a681d;
        font-size: 26px;
        box-shadow: inset 0 0 0 1px #ead4a7;
      }
      .cert b {
        display: block;
        color: #223e60;
      }
      .news-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 28px;
      }
      .news {
        display: grid;
        grid-template-columns: 170px 1fr;
        gap: 22px;
        padding: 20px;
        border-top: 1px solid #e6ecf2;
      }
      .news img {
        width: 170px;
        height: 130px;
        object-fit: cover;
        border-radius: 18px;
      }
      .news small {
        color: #3b74b4;
      }
      .news h3 {
        font-size: 20px;
        color: var(--navy);
        margin: 10px 0;
      }
      .news time {
        font-size: 13px;
        color: #9aa7b5;
      }
      /* FAQ */
      .faq-list {
        border-top: 1px solid var(--line);
      }
      .faq-item {
        border-bottom: 1px solid var(--line);
      }
      .faq-q {
        width: 100%;
        padding: 26px 0;
        border: 0;
        background: none;
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: left;
        color: var(--navy);
        font-size: 19px;
        font-weight: 650;
        cursor: pointer;
      }
      .faq-q span:last-child {
        font-size: 28px;
        font-weight: 300;
      }
      .faq-a {
        max-height: 0;
        overflow: hidden;
        color: var(--muted);
        line-height: 1.9;
        transition:
          max-height 0.35s,
          padding 0.35s;
      }
      .faq-item.open .faq-a {
        max-height: 150px;
        padding: 0 0 26px;
      }
      .faq-item.open .faq-q span:last-child {
        transform: rotate(45deg);
      }
      /* CTA/contact/footer */
      .cta-wrap {
        padding: 80px 0;
      }
      .cta {
        width: var(--container);
        height: 520px;
        margin: auto;
        border-radius: 44px;
        overflow: hidden;
        position: relative;
        background: #123b72;
      }
      .cta img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .cta::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
          90deg,
          rgba(7, 39, 78, 0.95),
          rgba(7, 39, 78, 0.5),
          rgba(7, 39, 78, 0.15)
        );
      }
      .cta-copy {
        position: absolute;
        z-index: 2;
        left: 78px;
        top: 50%;
        transform: translateY(-50%);
        color: #fff;
        max-width: 760px;
      }
      .cta-copy h2 {
        font-size: 54px;
        margin: 0 0 18px;
      }
      .cta-copy p {
        font-size: 18px;
        line-height: 1.8;
        opacity: 0.88;
      }
      .cta-actions {
        display: flex;
        gap: 16px;
        margin-top: 30px;
      }
      .cta .btn.ghost {
        color: #fff;
        border-color: rgba(255, 255, 255, 0.45);
        background: rgba(255, 255, 255, 0.08);
      }
      .contact {
        display: grid;
        grid-template-columns: 0.85fr 0.85fr 1.3fr;
        gap: 50px;
        align-items: start;
      }
      .contact h3 {
        font-size: 28px;
        color: var(--navy);
        margin-top: 0;
      }
      .contact-list {
        display: grid;
        gap: 16px;
        color: #4f647c;
      }
      .form {
        display: grid;
        gap: 12px;
      }
      .form input,
      .form textarea {
        width: 100%;
        border: 1px solid #dae5ef;
        background: #f8fbfe;
        border-radius: 14px;
        padding: 15px 16px;
        font: inherit;
        outline: none;
      }
      .form textarea {
        height: 110px;
        resize: none;
      }
      .map {
        height: 370px;
        border-radius: 30px;
        overflow: hidden;
        position: relative;
        background: #f0f5fa;
        background-image:
          linear-gradient(#d9e5ef 1px, transparent 1px),
          linear-gradient(90deg, #d9e5ef 1px, transparent 1px);
        background-size: 58px 58px;
      }
      .map::before,
      .map::after {
        content: "";
        position: absolute;
        background: #c5d7e7;
        opacity: 0.7;
      }
      .map::before {
        height: 100%;
        width: 18px;
        left: 44%;
        transform: rotate(18deg);
      }
      .map::after {
        height: 16px;
        width: 100%;
        top: 55%;
        transform: rotate(-8deg);
      }
      .pin {
        position: absolute;
        left: 53%;
        top: 44%;
        z-index: 2;
        background: #fff;
        padding: 18px 22px 18px 52px;
        border-radius: 18px;
        box-shadow: 0 15px 40px rgba(13, 50, 99, 0.15);
        color: var(--navy);
        font-weight: 800;
      }
      .pin::before {
        content: "";
        position: absolute;
        left: 20px;
        top: 18px;
        width: 20px;
        height: 20px;
        background: var(--orange);
        border-radius: 50% 50% 50% 0;
        transform: rotate(-45deg);
      }
      .footer {
        background: #092a54;
        color: #fff;
        padding: 80px 0 34px;
      }
      .footer-grid {
        width: var(--container);
        margin: auto;
        display: grid;
        grid-template-columns: 1.4fr repeat(5, 1fr);
        gap: 50px;
      }
      .footer .brand img {
        filter: brightness(0) invert(1);
        opacity: 0.98;
      }
      .footer p,
      .footer a {
        color: #b9c8dc;
        line-height: 1.9;
        font-size: 14px;
      }
      .footer h4 {
        font-size: 15px;
        margin: 0 0 14px;
      }
      .copyright {
        width: var(--container);
        margin: 60px auto 0;
        padding-top: 22px;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
        display: flex;
        justify-content: space-between;
        color: #8fa7c3;
        font-size: 13px;
      }
      .reveal {
        opacity: 0;
        transform: translateY(24px);
        transition: 0.72s cubic-bezier(0.2, 0.7, 0.2, 1);
      }
      .reveal.visible {
        opacity: 1;
        transform: none;
      }
      /* Refined scale and spacing: stronger imagery, tighter vertical rhythm */
      .product-row {
        grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
      }
      .product-row.reverse {
        grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
      }
      .hero {
        height: min(900px, 100vh);
        min-height: 720px;
      }
      .hero-inner {
        max-width: 800px;
        margin-top: 42px;
      }
      .hero h1 {
        font-size: clamp(60px, 5.2vw, 88px);
        margin-bottom: 24px;
      }
      .hero .sub {
        font-size: 23px;
        margin-bottom: 18px;
      }
      .hero .desc {
        line-height: 1.78;
      }
      .hero-actions {
        margin-top: 28px;
      }
      .hero-metrics {
        margin-top: 30px;
      }
      .editorial {
        grid-auto-rows: 292px;
        gap: 20px;
      }
      .tile {
        border-radius: 24px;
      }
      .compare {
        height: 450px;
      }
      .compare figure,
      .bot-panel {
        border-radius: 26px;
      }
      .bot-panel {
        padding: 42px;
        min-height: 290px;
      }
      .coop-item {
        height: 420px;
        border-radius: 24px;
      }
      .case-main {
        min-height: 570px;
      }
      .case-main,
      .case-side {
        border-radius: 24px;
      }
      .case-side {
        min-height: 273px;
      }
      .about-image {
        height: 600px;
        border-radius: 28px;
      }
      .timeline {
        margin-top: 76px;
      }
      .cert {
        padding: 30px 18px;
      }
      .cta-wrap {
        padding: 64px 0 92px;
      }
      .cta {
        height: 560px;
        border-radius: 32px;
      }
      .cta-copy {
        left: 72px;
      }
      .contact {
        gap: 38px;
      }
      .footer {
        padding-top: 66px;
      }
      .copyright {
        margin-top: 46px;
      }
      @media (max-width: 1200px) {
        :root {
          --container: calc(100% - 56px);
        }
        .nav {
          gap: 22px;
        }
        .header-cta {
          display: none;
        }
        .hero h1 {
          font-size: 62px;
        }
        .editorial {
          grid-template-columns: 1fr 1fr;
        }
        .tile.big {
          grid-column: 1/3;
        }
        .product-row,
        .product-row.reverse {
          grid-template-columns: 1fr;
        }
        .product-row.reverse .product-copy,
        .product-row.reverse .product-media {
          order: initial;
        }
        .product-media {
          height: 460px;
        }
        .contact {
          grid-template-columns: 1fr 1fr;
        }
        .map {
          grid-column: 1/3;
        }
        .footer-grid {
          grid-template-columns: 1.5fr repeat(3, 1fr);
        }
      }
      @media (max-width: 760px) {
        :root {
          --container: calc(100% - 36px);
        }
        .header {
          height: 70px;
        }
        .brand img {
          width: 130px;
          height: 50px;
        }
        .nav {
          display: none;
        }
        .hero {
          height: 820px;
        }
        .slide-bg {
          background-position: 65% center;
        }
        .slide::after {
          background: linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.98) 0,
            rgba(255, 255, 255, 0.94) 46%,
            rgba(255, 255, 255, 0.1) 100%
          );
        }
        .hero-copy {
          align-items: flex-start;
          padding-top: 130px;
        }
        .hero h1 {
          font-size: 48px;
        }
        .hero .sub {
          font-size: 20px;
        }
        .hero .desc {
          font-size: 15px;
        }
        .hero-metrics {
          display: none;
        }
        .metrics-grid {
          grid-template-columns: 1fr 1fr;
          gap: 40px;
        }
        .metric {
          border: 0;
          padding: 0;
        }
        .metric strong {
          font-size: 50px;
        }
        .section {
          padding: 105px 0;
        }
        .section h2 {
          font-size: 40px;
        }
        .capability-stage {
          grid-template-columns: 1fr 1fr;
          min-height: auto;
        }
        .cap-line {
          display: none;
        }
        .cap-visual {
          height: 150px;
        }
        .cap-item:nth-child(5) {
          grid-column: 1/3;
        }
        .product-row {
          min-height: auto;
          padding: 45px 0;
        }
        .product-media {
          height: 320px;
        }
        .product-copy h3 {
          font-size: 36px;
        }
        .product-row.cloud {
          padding: 50px 24px;
          border-radius: 28px;
        }
        .why-grid {
          grid-template-columns: 1fr 1fr;
          gap: 30px;
        }
        .editorial {
          grid-template-columns: 1fr;
          grid-auto-rows: 220px;
        }
        .tile.big {
          grid-column: auto;
          grid-row: span 1;
        }
        .compare {
          grid-template-columns: 1fr;
          height: auto;
        }
        .compare figure {
          height: 260px;
        }
        .bot-grid,
        .coop,
        .case-layout,
        .about-grid,
        .news-grid,
        .cert-strip,
        .contact {
          grid-template-columns: 1fr;
        }
        .coop-item {
          height: 300px;
        }
        .case-col {
          grid-template-columns: 1fr 1fr;
        }
        .about-image {
          height: 340px;
        }
        .timeline {
          grid-template-columns: 1fr;
          gap: 24px;
        }
        .timeline::before {
          display: none;
        }
        .time {
          text-align: left;
          display: grid;
          grid-template-columns: 90px 20px 1fr;
          align-items: center;
        }
        .time i {
          margin: 0;
        }
        .cert-strip {
          grid-template-columns: 1fr 1fr;
        }
        .news {
          grid-template-columns: 120px 1fr;
        }
        .news img {
          width: 120px;
          height: 110px;
        }
        .cta {
          height: 460px;
        }
        .cta-copy {
          left: 28px;
          right: 28px;
        }
        .cta-copy h2 {
          font-size: 38px;
        }
        .map {
          grid-column: auto;
        }
        .footer-grid {
          grid-template-columns: 1fr 1fr;
        }
        .copyright {
          display: block;
        }
        .copyright span {
          display: block;
          margin-top: 8px;
        }
      }

      @media (max-width: 760px) {
        .capability-stage {
          grid-template-columns: 1fr;
          gap: 38px;
        }
        .cap-item,
        .cap-item:nth-child(5) {
          grid-column: auto;
          display: grid;
          grid-template-columns: 76px 1fr;
          column-gap: 22px;
          align-items: center;
          padding: 22px 0;
          border-bottom: 1px solid var(--line);
        }
        .cap-icon {
          grid-row: 1/4;
          margin: 0;
        }
        .cap-num {
          grid-column: 2;
        }
        .cap-item b {
          grid-column: 2;
          font-size: 24px;
        }
        .cap-item p {
          grid-column: 2;
          margin: 5px 0;
        }
        .cap-visual {
          grid-column: 1/3;
          height: 220px;
          margin-top: 16px;
        }
        .cap-visual img {
          max-height: 210px;
        }
      }
      @media (max-width: 760px) {
        .hero-actions .btn {
          flex: 1;
          padding: 0 14px;
          white-space: nowrap;
        }
      }
      /* Capability composition based on approved visual reference */
      .metrics-panel {
        position: relative;
        z-index: 8;
        margin: -62px auto 0;
        padding: 0;
        background: transparent;
      }
      .metrics-panel .metrics-grid {
        width: min(1500px, calc(100% - 112px));
        padding: 28px 42px;
        border-radius: 24px;
        background: linear-gradient(110deg, #225d9f, #06366f);
        box-shadow: 0 22px 54px rgba(10, 51, 99, 0.22);
      }
      .metrics-panel .metric {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 22px;
        min-height: 70px;
        padding: 0 42px;
        text-align: left;
        border-right: 1px solid rgba(255, 255, 255, 0.19);
      }
      .metrics-panel .metric img {
        width: 52px;
        height: 52px;
        object-fit: contain;
        filter: brightness(0) invert(1);
      }
      .metrics-panel .metric strong {
        font-size: 34px;
        line-height: 1.05;
        color: #fff;
        letter-spacing: -0.03em;
        white-space: nowrap;
      }
      .metrics-panel .metric span {
        display: block;
        margin-top: 8px;
        font-size: 14px;
        color: #d6e4f3;
      }
      .capability-section {
        padding-top: 86px;
        background: linear-gradient(180deg, #fff 0, #f8fafc 72%, #fff 100%);
      }
      .capability-section .section-head {
        margin-bottom: 48px;
      }
      .cap-card-grid {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 18px;
      }
      .cap-card {
        min-width: 0;
        height: 440px;
        padding: 25px 22px 0;
        background: #fff;
        border: 1px solid #e4eaf1;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 14px 38px rgba(17, 51, 88, 0.08);
        display: flex;
        flex-direction: column;
        transition:
          transform 0.25s,
          box-shadow 0.25s;
      }
      .cap-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 22px 48px rgba(17, 51, 88, 0.13);
      }
      .cap-card header {
        display: grid;
        grid-template-columns: 36px 35px 1fr;
        align-items: center;
        gap: 8px;
      }
      .cap-card header > img {
        width: 32px;
        height: 32px;
        object-fit: contain;
      }
      .cap-card header span {
        color: #1461ba;
        font-size: 13px;
        font-weight: 750;
      }
      .cap-card h3 {
        grid-column: 2/4;
        margin: 4px 0 0;
        font-size: 20px;
        color: var(--navy);
      }
      .cap-card > p {
        min-height: 72px;
        margin: 13px 0 14px;
        color: #596b80;
        font-size: 14px;
        line-height: 1.7;
      }
      .cap-card .cap-photo {
        width: calc(100% + 44px);
        max-width: none;
        height: 214px;
        margin: auto -22px 0;
        object-fit: cover;
        object-position: center;
      }
      .service-banner {
        height: 290px;
        margin-top: 36px;
        border-radius: 18px;
        overflow: hidden;
        position: relative;
        background: #06366f;
        color: #fff;
        box-shadow: 0 18px 48px rgba(9, 46, 88, 0.16);
      }
      .service-bg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .service-intro {
        position: absolute;
        z-index: 2;
        left: 42px;
        top: 34px;
        width: 290px;
      }
      .service-intro small {
        font-size: 11px;
        letter-spacing: 0.18em;
        color: #b8d6ef;
      }
      .service-intro h3 {
        font-size: 31px;
        line-height: 1.18;
        margin: 12px 0;
      }
      .service-intro p {
        font-size: 13px;
        color: #d0e0ef;
        margin: 0 0 20px;
      }
      .service-intro .btn {
        height: 42px;
        padding: 0 20px;
        font-size: 13px;
      }
      .service-points {
        position: absolute;
        z-index: 2;
        left: 330px;
        right: 300px;
        top: 52px;
        bottom: 52px;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
      }
      .service-points > div {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-left: 1px solid rgba(255, 255, 255, 0.22);
        text-align: center;
      }
      .service-points img {
        width: 44px;
        height: 44px;
        object-fit: contain;
        margin-bottom: 12px;
      }
      .service-points b {
        font-size: 17px;
      }
      .service-points span {
        font-size: 12px;
        color: #c5d8e9;
        margin-top: 8px;
      }
      @media (max-width: 1200px) {
        .metrics-panel .metrics-grid {
          width: calc(100% - 56px);
          padding: 24px;
        }
        .metrics-panel .metric {
          padding: 0 20px;
          gap: 14px;
        }
        .metrics-panel .metric img {
          width: 42px;
          height: 42px;
        }
        .metrics-panel .metric strong {
          font-size: 27px;
        }
        .cap-card-grid {
          grid-template-columns: repeat(3, 1fr);
        }
        .cap-card:nth-child(n + 4) {
          height: 420px;
        }
        .service-banner {
          height: 330px;
        }
        .service-points {
          left: 300px;
          right: 40px;
          grid-template-columns: repeat(2, 1fr);
          top: 28px;
          bottom: 28px;
        }
        .service-points > div:nth-child(3),
        .service-points > div:nth-child(4) {
          border-top: 1px solid rgba(255, 255, 255, 0.16);
        }
      }
      @media (max-width: 760px) {
        .metrics-panel {
          margin-top: 0;
        }
        .metrics-panel .metrics-grid {
          width: 100%;
          border-radius: 0;
          padding: 24px 18px;
          grid-template-columns: 1fr 1fr;
          gap: 0;
        }
        .metrics-panel .metric {
          min-height: 82px;
          padding: 12px 8px;
          border-right: 1px solid rgba(255, 255, 255, 0.17);
          border-bottom: 1px solid rgba(255, 255, 255, 0.17);
        }
        .metrics-panel .metric:nth-child(2n) {
          border-right: 0;
        }
        .metrics-panel .metric:nth-child(n + 3) {
          border-bottom: 0;
        }
        .metrics-panel .metric img {
          width: 34px;
          height: 34px;
        }
        .metrics-panel .metric strong {
          font-size: 23px;
        }
        .metrics-panel .metric span {
          font-size: 11px;
          margin-top: 4px;
        }
        .capability-section {
          padding-top: 72px;
        }
        .capability-section .section-head {
          margin-bottom: 34px;
        }
        .cap-card-grid {
          grid-template-columns: 1fr;
          gap: 16px;
        }
        .cap-card,
        .cap-card:nth-child(n + 4) {
          height: auto;
          min-height: 420px;
          padding: 24px 22px 0;
        }
        .cap-card > p {
          min-height: auto;
        }
        .cap-card .cap-photo {
          height: 260px;
        }
        .service-banner {
          height: auto;
          min-height: 680px;
          margin-top: 26px;
        }
        .service-bg {
          object-position: 72% center;
        }
        .service-banner:after {
          content: "";
          position: absolute;
          inset: 0;
          background: linear-gradient(
            180deg,
            rgba(5, 49, 103, 0.98) 0,
            rgba(5, 49, 103, 0.9) 60%,
            rgba(5, 49, 103, 0.35) 100%
          );
        }
        .service-intro {
          left: 26px;
          right: 26px;
          top: 30px;
          width: auto;
        }
        .service-points {
          left: 26px;
          right: 26px;
          top: 280px;
          bottom: 145px;
          grid-template-columns: 1fr 1fr;
        }
        .service-points > div {
          position: relative;
          z-index: 3;
        }
        .service-points > div:nth-child(odd) {
          border-left: 0;
        }
        .service-points img {
          width: 38px;
          height: 38px;
        }
      }
      .service-points img {
        display: none;
      }
      .service-points > div:before {
        content: "";
        width: 42px;
        height: 42px;
        margin-bottom: 12px;
        background: #fff;
        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: contain;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
        -webkit-mask-size: contain;
      }
      .service-points > div:nth-child(1):before {
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='1.6' d='M12 6v6l4 2M4.9 4.9 3 3m16.1 1.9L21 3M12 2v2m10 8h-2M4 12H2m3.6 6.4A8 8 0 1 0 4 8'/%3E%3C/svg%3E");
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='1.6' d='M12 6v6l4 2M4.9 4.9 3 3m16.1 1.9L21 3M12 2v2m10 8h-2M4 12H2m3.6 6.4A8 8 0 1 0 4 8'/%3E%3C/svg%3E");
      }
      .service-points > div:nth-child(2):before {
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5' y='2' width='14' height='18' rx='2' fill='none' stroke='black' stroke-width='1.6'/%3E%3Cpath fill='none' stroke='black' stroke-width='1.6' d='M8 6h8M8 10h8M9 15h2m2 0h2M3 22h18'/%3E%3C/svg%3E");
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5' y='2' width='14' height='18' rx='2' fill='none' stroke='black' stroke-width='1.6'/%3E%3Cpath fill='none' stroke='black' stroke-width='1.6' d='M8 6h8M8 10h8M9 15h2m2 0h2M3 22h18'/%3E%3C/svg%3E");
      }
      .service-points > div:nth-child(3):before {
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10' cy='7' r='4' fill='none' stroke='black' stroke-width='1.6'/%3E%3Cpath d='M3 21c0-4 3-7 7-7 2 0 3.7.7 5 2' fill='none' stroke='black' stroke-width='1.6'/%3E%3Cpath d='m17 14 1 2 2 .3-1.5 1.5.4 2.2-1.9-1-2 1 .4-2.2-1.5-1.5 2-.3Z' fill='none' stroke='black' stroke-width='1.3'/%3E%3C/svg%3E");
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10' cy='7' r='4' fill='none' stroke='black' stroke-width='1.6'/%3E%3Cpath d='M3 21c0-4 3-7 7-7 2 0 3.7.7 5 2' fill='none' stroke='black' stroke-width='1.6'/%3E%3Cpath d='m17 14 1 2 2 .3-1.5 1.5.4 2.2-1.9-1-2 1 .4-2.2-1.5-1.5 2-.3Z' fill='none' stroke='black' stroke-width='1.3'/%3E%3C/svg%3E");
      }
      .service-points > div:nth-child(4):before {
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='1.6' d='m4 17 5-5 4 3 7-8M15 7h5v5M4 7v4H2m18 6v-4h2'/%3E%3C/svg%3E");
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='1.6' d='m4 17 5-5 4 3 7-8M15 7h5v5M4 7v4H2m18 6v-4h2'/%3E%3C/svg%3E");
      }
      .metrics-panel .metric > img {
        display: none;
      }
      .metrics-panel .metric:before {
        content: "";
        flex: 0 0 46px;
        width: 46px;
        height: 46px;
        background: #fff;
        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: contain;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
        -webkit-mask-size: contain;
      }
      .metrics-panel .metric:nth-child(1):before {
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='1.6' d='M3 22h18M5 22V4h10v18M15 10h4v12M8 8h4M8 12h4M8 16h4'/%3E%3C/svg%3E");
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='1.6' d='M3 22h18M5 22V4h10v18M15 10h4v12M8 8h4M8 12h4M8 16h4'/%3E%3C/svg%3E");
      }
      .metrics-panel .metric:nth-child(2):before {
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='4' y='3' width='13' height='18' rx='2' fill='none' stroke='black' stroke-width='1.6'/%3E%3Cpath fill='none' stroke='black' stroke-width='1.6' d='M8 7h5M8 11h5M8 15h3'/%3E%3Ccircle cx='17.5' cy='17.5' r='3.5' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E");
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='4' y='3' width='13' height='18' rx='2' fill='none' stroke='black' stroke-width='1.6'/%3E%3Cpath fill='none' stroke='black' stroke-width='1.6' d='M8 7h5M8 11h5M8 15h3'/%3E%3Ccircle cx='17.5' cy='17.5' r='3.5' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E");
      }
      .metrics-panel .metric:nth-child(3):before {
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='1.6'/%3E%3Cpath fill='none' stroke='black' stroke-width='1.6' d='m9 8-4 4 4 4m6-8 4 4-4 4m-1-10-4 12'/%3E%3C/svg%3E");
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='1.6'/%3E%3Cpath fill='none' stroke='black' stroke-width='1.6' d='m9 8-4 4 4 4m6-8 4 4-4 4m-1-10-4 12'/%3E%3C/svg%3E");
      }
      .metrics-panel .metric:nth-child(4):before {
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='1.6' d='M7 4h10v4a5 5 0 0 1-10 0V4Zm0 2H3v2a4 4 0 0 0 5 4m9-6h4v2a4 4 0 0 1-5 4M12 13v5m-4 3h8m-6-3h4'/%3E%3C/svg%3E");
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='1.6' d='M7 4h10v4a5 5 0 0 1-10 0V4Zm0 2H3v2a4 4 0 0 0 5 4m9-6h4v2a4 4 0 0 1-5 4M12 13v5m-4 3h8m-6-3h4'/%3E%3C/svg%3E");
      }
      @media (max-width: 760px) {
        .metrics-panel .metric:before {
          flex-basis: 34px;
          width: 34px;
          height: 34px;
        }
      }
      .metrics-panel .metric:last-child {
        border-right: 0 !important;
      }
      .slot-number {
        display: block;
        min-width: 4.2ch;
        font-variant-numeric: tabular-nums;
        transform: translateZ(0);
      }
      .slot-number.rolling {
        animation: slot-jitter 0.09s linear infinite;
        filter: blur(0.35px);
      }
      @keyframes slot-jitter {
        0% {
          transform: translateY(-2px);
        }
        50% {
          transform: translateY(2px);
        }
        100% {
          transform: translateY(-2px);
        }
      }
      @media (prefers-reduced-motion: reduce) {
        .slot-number.rolling {
          animation: none;
          filter: none;
        }
      }
      /* All three hero slides share one calm, consistent title system. */
      .hero .slide .hero-inner {
        max-width: 720px;
      }
      .hero .slide h1 {
        font-size: clamp(50px, 4.5vw, 72px);
        line-height: 1.1;
        letter-spacing: -0.045em;
        margin-bottom: 24px;
      }
      .hero .slide .sub {
        font-size: 21px;
      }
      @media (max-width: 760px) {
        .hero .slide h1 {
          font-size: 42px;
          line-height: 1.12;
        }
        .hero .slide .sub {
          font-size: 18px;
        }
      }
      .slot-number.rolling {
        animation: slot-reel 0.12s cubic-bezier(0.2, 0.7, 0.3, 1) infinite;
        filter: blur(0.55px);
      }
      @keyframes slot-reel {
        0% {
          transform: translateY(-7px);
          opacity: 0.55;
        }
        50% {
          transform: translateY(5px);
          opacity: 1;
        }
        100% {
          transform: translateY(-7px);
          opacity: 0.55;
        }
      }
      /* Unified motion language: cinematic hero, clipped media reveals and restrained stagger. */
      .header {
        animation: navDrop 0.85s cubic-bezier(0.2, 0.75, 0.25, 1) both;
      }
      .slide.active .slide-bg {
        animation: heroDrift 7s ease-out both;
      }
      .slide.active .eyebrow,
      .slide.active h1,
      .slide.active .sub,
      .slide.active .desc,
      .slide.active .hero-metrics,
      .slide.active .hero-actions {
        animation: heroCopyIn 0.9s cubic-bezier(0.18, 0.72, 0.24, 1) both;
      }
      .slide.active h1 {
        animation-delay: 0.08s;
      }
      .slide.active .sub {
        animation-delay: 0.16s;
      }
      .slide.active .desc {
        animation-delay: 0.23s;
      }
      .slide.active .hero-metrics {
        animation-delay: 0.3s;
      }
      .slide.active .hero-actions {
        animation-delay: 0.37s;
      }
      @keyframes navDrop {
        from {
          opacity: 0;
          transform: translateY(-24px);
        }
        to {
          opacity: 1;
          transform: none;
        }
      }
      @keyframes heroDrift {
        from {
          transform: scale(1.045);
        }
        to {
          transform: scale(1);
        }
      }
      @keyframes heroCopyIn {
        from {
          opacity: 0;
          transform: translateY(34px);
        }
        to {
          opacity: 1;
          transform: none;
        }
      }
      .reveal {
        opacity: 0;
        transform: translateY(52px);
        transition:
          opacity 1s cubic-bezier(0.18, 0.72, 0.24, 1),
          transform 1s cubic-bezier(0.18, 0.72, 0.24, 1);
      }
      .reveal.visible {
        opacity: 1;
        transform: none;
      }
      .section-head.reveal {
        transform: translateY(64px);
      }
      .section-head.reveal .eyebrow,
      .section-head.reveal h2,
      .section-head.reveal .lead {
        opacity: 0;
        transform: translateY(25px);
        transition:
          opacity 0.75s ease,
          transform 0.75s cubic-bezier(0.18, 0.72, 0.24, 1);
      }
      .section-head.visible .eyebrow {
        opacity: 1;
        transform: none;
        transition-delay: 0.05s;
      }
      .section-head.visible h2 {
        opacity: 1;
        transform: none;
        transition-delay: 0.13s;
      }
      .section-head.visible .lead {
        opacity: 1;
        transform: none;
        transition-delay: 0.22s;
      }
      .metrics-panel .metrics-grid.reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
      }
      .product-row.reveal:nth-of-type(even),
      .about-grid.reveal {
        transform: translateX(-72px);
      }
      .product-row.reveal:nth-of-type(odd) {
        transform: translateX(72px);
      }
      .product-row.reveal.visible,
      .about-grid.reveal.visible {
        transform: none;
      }
      .product-row.reveal .product-media,
      .about-grid.reveal .about-image,
      .compare.reveal figure,
      .case-layout.reveal > div {
        clip-path: inset(0 100% 0 0);
        transition:
          clip-path 1.15s cubic-bezier(0.2, 0.72, 0.2, 1),
          transform 0.7s ease;
      }
      .product-row.visible .product-media,
      .about-grid.visible .about-image,
      .compare.visible figure,
      .case-layout.visible > div {
        clip-path: inset(0);
      }
      .cap-card-grid.reveal,
      .why-grid.reveal,
      .editorial.reveal,
      .coop.reveal,
      .cert-strip.reveal,
      .news-grid.reveal {
        opacity: 1;
        transform: none;
      }
      .cap-card-grid.reveal > *,
      .why-grid.reveal > *,
      .editorial.reveal > *,
      .coop.reveal > *,
      .cert-strip.reveal > *,
      .news-grid.reveal > * {
        opacity: 0;
        transform: translateY(46px);
        transition:
          opacity 0.75s ease,
          transform 0.85s cubic-bezier(0.18, 0.72, 0.24, 1);
      }
      .cap-card-grid.visible > *,
      .why-grid.visible > *,
      .editorial.visible > *,
      .coop.visible > *,
      .cert-strip.visible > *,
      .news-grid.visible > * {
        opacity: 1;
        transform: none;
      }
      .cap-card-grid.visible > *:nth-child(2),
      .why-grid.visible > *:nth-child(2),
      .editorial.visible > *:nth-child(2),
      .coop.visible > *:nth-child(2),
      .cert-strip.visible > *:nth-child(2),
      .news-grid.visible > *:nth-child(2) {
        transition-delay: 0.09s;
      }
      .cap-card-grid.visible > *:nth-child(3),
      .why-grid.visible > *:nth-child(3),
      .editorial.visible > *:nth-child(3),
      .coop.visible > *:nth-child(3),
      .cert-strip.visible > *:nth-child(3),
      .news-grid.visible > *:nth-child(3) {
        transition-delay: 0.18s;
      }
      .cap-card-grid.visible > *:nth-child(4),
      .why-grid.visible > *:nth-child(4),
      .editorial.visible > *:nth-child(4),
      .cert-strip.visible > *:nth-child(4) {
        transition-delay: 0.27s;
      }
      .cap-card-grid.visible > *:nth-child(5),
      .editorial.visible > *:nth-child(5),
      .cert-strip.visible > *:nth-child(5) {
        transition-delay: 0.36s;
      }
      .editorial.visible > *:nth-child(n + 6),
      .cert-strip.visible > *:nth-child(6) {
        transition-delay: 0.45s;
      }
      .service-banner.reveal,
      .cta.reveal {
        clip-path: inset(0 0 0 100%);
        opacity: 1;
        transform: none;
        transition: clip-path 1.2s cubic-bezier(0.2, 0.72, 0.2, 1);
      }
      .service-banner.visible,
      .cta.visible {
        clip-path: inset(0);
      }
      .service-banner .service-intro,
      .service-banner .service-points,
      .cta .cta-copy {
        opacity: 0;
        transform: translateX(-34px);
        transition: 0.8s 0.5s cubic-bezier(0.18, 0.72, 0.24, 1);
      }
      .service-banner.visible .service-intro,
      .service-banner.visible .service-points,
      .cta.visible .cta-copy {
        opacity: 1;
        transform: none;
      }
      .capability-section {
        padding-bottom: 44px;
      }
      .service-banner.reveal {
        clip-path: none;
        opacity: 1;
      }
      .service-banner.reveal .service-intro,
      .service-banner.reveal .service-points {
        opacity: 1;
        transform: none;
      }
      .product-story {
        padding-top: 58px;
      }
      .product-story .section-head.reveal {
        opacity: 1;
        transform: none;
      }
      @media (max-width: 760px) {
        .capability-section {
          padding-bottom: 38px;
        }
        .product-story {
          padding-top: 54px;
        }
      }
      @media (max-width: 760px) {
        .product-row.reveal:nth-of-type(n),
        .about-grid.reveal {
          transform: translateY(45px);
        }
        .product-row.reveal.visible,
        .about-grid.reveal.visible {
          transform: none;
        }
        .reveal {
          transform: translateY(38px);
        }
      }
      .product-story {
        padding: 118px 0 132px;
        background: linear-gradient(180deg, #fff 0, #fbfdff 48%, #fff 100%);
      }
      .product-story .section-head {
        max-width: 900px;
        margin: 0 auto 46px;
        text-align: center;
      }
      .product-story .section-head h2 {
        font-size: 52px;
      }
      .product-story .section-head .lead {
        margin-left: auto;
        margin-right: auto;
      }
      .product-story .section-head::after {
        content: "";
        display: block;
        width: 30px;
        height: 3px;
        margin: 22px auto 0;
        border-radius: 4px;
        background: linear-gradient(90deg, #1584ff, #77bcff);
      }
      .product-showcase {
        display: grid;
        gap: 30px;
      }
      .product-card {
        position: relative;
        isolation: isolate;
        min-height: 430px;
        overflow: hidden;
        border: 1px solid rgba(113, 178, 239, 0.28);
        border-radius: 28px;
        background: #edf7ff center/cover no-repeat;
        background-image: var(--desktop-bg);
        box-shadow: 0 18px 46px rgba(33, 91, 145, 0.11);
        transition:
          transform 0.55s cubic-bezier(0.2, 0.72, 0.2, 1),
          box-shadow 0.55s ease;
      }
      .product-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 26px 58px rgba(33, 91, 145, 0.17);
      }
      .product-card::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        background: linear-gradient(
          90deg,
          rgba(255, 255, 255, 0.18),
          transparent 48%
        );
      }
      .product-card.is-right::after {
        background: linear-gradient(
          270deg,
          rgba(255, 255, 255, 0.16),
          transparent 48%
        );
      }
      .product-card-content {
        width: 44%;
        min-height: 430px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 48px 58px;
      }
      .product-card.is-right .product-card-content {
        margin-left: auto;
        width: 42%;
      }
      .product-card-number {
        margin: 0;
        color: var(--orange);
        font-size: 48px;
        font-weight: 800;
        line-height: 1;
        letter-spacing: -0.04em;
      }
      .product-card h3 {
        margin: 0;
        color: var(--navy);
        font-size: 34px;
        line-height: 1.2;
        letter-spacing: -0.035em;
      }
      .product-card-heading {
        display: flex;
        align-items: baseline;
        gap: 22px;
        margin-bottom: 18px;
      }
      .product-card-desc {
        max-width: 490px;
        margin: 0;
        color: #46617e;
        font-size: 16px;
        line-height: 1.75;
      }
      .product-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 9px;
        margin: 22px 0 25px;
      }
      .product-tag {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 8px 13px;
        border: 1px solid rgba(44, 128, 218, 0.22);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.58);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
        color: #194f91;
        font-size: 13px;
        line-height: 1;
        white-space: nowrap;
        backdrop-filter: blur(6px);
      }
      .product-tag::before {
        content: "";
        width: 7px;
        height: 7px;
        border: 2px solid #2581e8;
        border-radius: 50%;
      }
      .product-card-link {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        width: max-content;
        color: var(--navy);
        font-size: 15px;
        font-weight: 700;
      }
      .product-card-link span {
        transition: transform 0.25s ease;
      }
      .product-card-link:hover span {
        transform: translateX(5px);
      }
      .product-card.reveal {
        transform: translateY(56px);
        opacity: 0;
      }
      .product-card.reveal.visible {
        transform: none;
        opacity: 1;
      }
      .product-card.reveal:nth-child(2) {
        transition-delay: 0.06s;
      }
      .product-card.reveal:nth-child(3) {
        transition-delay: 0.1s;
      }
      .product-card.reveal:nth-child(4) {
        transition-delay: 0.14s;
      }
      @media (max-width: 1100px) {
        .product-card,
        .product-card-content {
          min-height: 390px;
        }
        .product-card-content {
          width: 50%;
          padding: 38px 40px;
        }
        .product-card.is-right .product-card-content {
          width: 48%;
        }
        .product-card h3 {
          font-size: 30px;
        }
        .product-card-number {
          font-size: 42px;
        }
      }
      @media (max-width: 760px) {
        .product-story {
          padding: 92px 0 100px;
        }
        .product-story .section-head {
          margin-bottom: 34px;
        }
        .product-story .section-head h2 {
          font-size: 38px;
        }
        .product-showcase {
          gap: 20px;
        }
        .product-card,
        .product-card-content {
          min-height: 520px;
        }
        .product-card {
          border-radius: 22px;
          background-size: auto 62%;
          background-position: center bottom;
        }
        .product-card::before {
          content: "";
          position: absolute;
          inset: 0;
          z-index: -1;
          background: linear-gradient(
            180deg,
            #f7fbff 0,
            rgba(247, 251, 255, 0.98) 48%,
            rgba(247, 251, 255, 0.08) 72%
          );
        }
        .product-card-content,
        .product-card.is-right .product-card-content {
          width: 100%;
          min-height: auto;
          margin: 0;
          padding: 30px 26px 250px;
          justify-content: flex-start;
        }
        .product-card-number {
          font-size: 36px;
          margin-bottom: 10px;
        }
        .product-card h3 {
          font-size: 27px;
          margin-bottom: 10px;
        }
        .product-card-desc {
          font-size: 14px;
          line-height: 1.65;
        }
        .product-tags {
          gap: 7px;
          margin: 16px 0 18px;
        }
        .product-tag {
          padding: 7px 10px;
          font-size: 12px;
        }
        .product-card-link {
          font-size: 14px;
        }
      }
      html,
      body {
        overflow-x: hidden;
      }
      /* Hero editorial layout and explicit manual navigation */
      .hero .slide .hero-inner {
        max-width: 920px;
      }
      .hero .slide h1 {
        font-size: clamp(48px, 4.15vw, 64px);
        line-height: 1.1;
        letter-spacing: -0.048em;
        white-space: nowrap;
      }
      .hero .slide .sub {
        font-size: 24px;
        line-height: 1.45;
        margin-bottom: 18px;
      }
      .hero .slide .desc {
        font-size: 18px;
        line-height: 1.8;
        max-width: 720px;
      }
      .slider-nav {
        position: absolute;
        z-index: 8;
        left: 50%;
        bottom: 76px;
        transform: translateX(-50%);
        display: flex;
        align-items: center;
        gap: 15px;
        padding: 8px 10px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.72);
        border: 1px solid rgba(13, 50, 99, 0.09);
        box-shadow: 0 10px 30px rgba(13, 50, 99, 0.08);
        backdrop-filter: blur(14px);
      }
      .slider-nav .dots {
        position: static;
        transform: none;
        display: flex;
        align-items: center;
        gap: 7px;
      }
      .slider-nav .dot {
        width: 26px;
        height: 3px;
        border-radius: 3px;
        background: #abc0d6;
      }
      .slider-nav .dot.active {
        width: 42px;
        height: 3px;
        background: var(--orange);
      }
      .slide-arrow {
        width: 38px;
        height: 38px;
        border: 0;
        border-radius: 50%;
        display: grid;
        place-items: center;
        background: #fff;
        color: var(--navy);
        font-size: 18px;
        cursor: pointer;
        box-shadow: 0 5px 16px rgba(13, 50, 99, 0.1);
        transition: 0.25s;
      }
      .slide-arrow:hover {
        color: #fff;
        background: var(--navy);
      }
      .slide-count {
        font-size: 12px;
        color: #8294a8;
        white-space: nowrap;
      }
      .slide-count b {
        font-size: 14px;
        color: var(--navy);
      }
      @media (max-width: 760px) {
        .hero .slide .hero-inner {
          max-width: none;
        }
        .hero .slide h1 {
          font-size: 42px;
          line-height: 1.12;
          white-space: normal;
        }
        .hero .slide .sub {
          font-size: 19px;
        }
        .hero .slide .desc {
          font-size: 16px;
        }
        .slider-nav {
          bottom: 24px;
        }
        .slide-count {
          display: none;
        }
        .slide-arrow {
          width: 34px;
          height: 34px;
        }
      }
      @media (min-width: 761px) {
        .hero .slide .hero-inner {
          margin-top: -10px;
        }
        .slider-nav {
          bottom: 108px;
        }
        .metrics-panel {
          margin-top: -92px;
        }
      }
      .section-head.reveal.visible {
        transform: none;
      }
      .product-story {
        padding-top: 32px;
      }
      @media (max-width: 760px) {
        .product-story {
          padding-top: 54px;
        }
      }
      @media (min-width: 761px) {
        .product-showcase {
          max-width: 1600px;
          margin-left: auto;
          margin-right: auto;
        }
        .product-card,
        .product-card-content {
          height: clamp(390px, 29vw, 500px);
          min-height: 0;
        }
        .product-card-content {
          width: 46%;
          padding: 38px 56px;
        }
        .product-card.is-right .product-card-content {
          width: 44%;
        }
        .product-card-number {
          margin-bottom: 12px;
          font-size: 56px;
        }
        .product-card h3 {
          margin-bottom: 14px;
          font-size: 38px;
        }
        .product-card-desc {
          font-size: 18px;
          line-height: 1.7;
        }
        .product-tags {
          margin: 20px 0 22px;
        }
        .product-tag {
          padding: 9px 14px;
          font-size: 15px;
        }
        .product-card-link {
          font-size: 17px;
        }
        .product-card:nth-child(1) {
          background-position: center 48%;
        }
        .product-card:nth-child(2) {
          background-position: center 52%;
        }
        .product-card:nth-child(3) {
          background-position: center 50%;
        }
        .product-card:nth-child(4) {
          background-position: center 51%;
        }
      }
      @media (min-width: 1600px) {
        .product-card,
        .product-card-content {
          height: 520px;
        }
      }
      .why-section {
        padding: 108px 0 84px;
        background: radial-gradient(
          circle at 50% 0,
          #fff 0,
          #f5faff 52%,
          #edf6ff 100%
        );
        overflow: hidden;
      }
      .why-section .section-head {
        max-width: 900px;
        margin: 0 auto 48px;
        text-align: center;
      }
      .why-section .section-head h2 {
        font-size: 48px;
      }
      .why-section .section-head::after,
      .solutions-section .section-head::after {
        content: "";
        display: block;
        width: 38px;
        height: 3px;
        margin: 22px auto 0;
        border-radius: 3px;
        background: var(--orange);
      }
      .why-cards {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 22px;
      }
      .why-card {
        position: relative;
        min-height: 320px;
        padding: 42px 32px 34px;
        border: 1px solid #dce9f6;
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.92);
        box-shadow: 0 15px 38px rgba(39, 90, 142, 0.1);
        transition:
          transform 0.25s ease,
          box-shadow 0.25s ease;
      }
      .why-card::before {
        content: "";
        position: absolute;
        top: -2px;
        left: 38%;
        right: 38%;
        height: 4px;
        border-radius: 4px;
        background: #1462bd;
      }
      .why-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 22px 46px rgba(39, 90, 142, 0.15);
      }
      .why-card-top {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        margin-bottom: 28px;
      }
      .why-card-number {
        color: var(--orange);
        font-size: 48px;
        font-weight: 800;
        line-height: 1;
      }
      .why-card-icon {
        width: 62px;
        height: 62px;
        object-fit: contain;
      }
      .why-card h3 {
        margin: 0 0 15px;
        color: var(--navy);
        font-size: 20px;
      }
      .why-card p {
        margin: 0;
        color: #566b82;
        font-size: 14px;
        line-height: 1.85;
      }
      .solutions-section {
        padding: 98px 0 132px;
        background: #fff;
      }
      .solutions-section .section-head {
        max-width: 980px;
        margin: 0 auto 46px;
        text-align: center;
      }
      .solutions-section .section-head h2 {
        font-size: 46px;
      }
      .solutions-section .section-head .lead {
        margin-left: auto;
        margin-right: auto;
      }
      .solutions-section .section-head::after {
        background: #1675da;
      }
      .solution-mosaic {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        grid-template-rows: 220px 220px 205px 205px;
        gap: 14px;
      }
      .solution-card {
        position: relative;
        overflow: hidden;
        border-radius: 18px;
        background: #d9e6f2;
        box-shadow: 0 8px 22px rgba(23, 57, 91, 0.08);
      }
      .solution-card:nth-child(1) {
        grid-column: 1/5;
        grid-row: 1/3;
      }
      .solution-card:nth-child(2) {
        grid-column: 5/7;
        grid-row: 1;
      }
      .solution-card:nth-child(3) {
        grid-column: 5/7;
        grid-row: 2;
      }
      .solution-card:nth-child(4) {
        grid-column: 1/3;
        grid-row: 3;
      }
      .solution-card:nth-child(5) {
        grid-column: 3/5;
        grid-row: 3;
      }
      .solution-card:nth-child(6) {
        grid-column: 5/7;
        grid-row: 3;
      }
      .solution-card:nth-child(7) {
        grid-column: 1/4;
        grid-row: 4;
      }
      .solution-card:nth-child(8) {
        grid-column: 4/7;
        grid-row: 4;
      }
      .solution-card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.6s cubic-bezier(0.2, 0.72, 0.2, 1);
      }
      .solution-card:hover img {
        transform: scale(1.04);
      }
      .solution-card::after {
        content: "";
        position: absolute;
        inset: 35% 0 0;
        background: linear-gradient(transparent, rgba(4, 24, 47, 0.76));
      }
      .solution-card-copy {
        position: absolute;
        z-index: 2;
        left: 22px;
        right: 22px;
        bottom: 18px;
        color: #fff;
      }
      .solution-card-copy b {
        font-size: 20px;
      }
      .solution-card-copy p {
        margin: 8px 0 0;
        font-size: 13px;
        opacity: 0.88;
      }
      .solution-card:first-child .solution-card-copy {
        left: 28px;
        bottom: 24px;
      }
      .solution-card:first-child .solution-card-copy b {
        font-size: 27px;
      }
      .why-cards.reveal,
      .solution-mosaic.reveal {
        opacity: 1;
        transform: none;
      }
      .why-cards.reveal > *,
      .solution-mosaic.reveal > * {
        opacity: 0;
        transform: translateY(36px);
        transition:
          opacity 0.65s ease,
          transform 0.75s cubic-bezier(0.18, 0.72, 0.24, 1);
      }
      .why-cards.visible > *,
      .solution-mosaic.visible > * {
        opacity: 1;
        transform: none;
      }
      .why-cards.visible > *:nth-child(2),
      .solution-mosaic.visible > *:nth-child(2) {
        transition-delay: 0.07s;
      }
      .why-cards.visible > *:nth-child(3),
      .solution-mosaic.visible > *:nth-child(3) {
        transition-delay: 0.14s;
      }
      .why-cards.visible > *:nth-child(4),
      .solution-mosaic.visible > *:nth-child(4) {
        transition-delay: 0.21s;
      }
      .solution-mosaic.visible > *:nth-child(n + 5) {
        transition-delay: 0.28s;
      }
      @media (max-width: 1100px) {
        .why-cards {
          grid-template-columns: repeat(2, 1fr);
        }
        .solution-mosaic {
          grid-template-rows: 200px 200px 190px 190px;
        }
      }
      @media (max-width: 760px) {
        .why-section {
          padding: 84px 0 72px;
        }
        .why-section .section-head h2,
        .solutions-section .section-head h2 {
          font-size: 36px;
        }
        .why-cards {
          grid-template-columns: 1fr;
          gap: 16px;
        }
        .why-card {
          min-height: auto;
          padding: 30px 26px;
        }
        .why-card-top {
          margin-bottom: 20px;
        }
        .why-card-number {
          font-size: 40px;
        }
        .why-card-icon {
          width: 52px;
          height: 52px;
        }
        .solutions-section {
          padding: 82px 0 100px;
        }
        .solution-mosaic {
          grid-template-columns: 1fr 1fr;
          grid-template-rows: 300px repeat(7, 170px);
          gap: 10px;
        }
        .solution-card:nth-child(n) {
          grid-column: auto;
          grid-row: auto;
        }
        .solution-card:first-child {
          grid-column: 1/3;
        }
        .solution-card:nth-child(7),
        .solution-card:nth-child(8) {
          grid-column: 1/3;
        }
        .solution-card-copy {
          left: 14px;
          right: 14px;
          bottom: 13px;
        }
        .solution-card-copy b {
          font-size: 16px;
        }
        .solution-card:first-child .solution-card-copy b {
          font-size: 22px;
        }
        .solution-card-copy p {
          font-size: 12px;
        }
      }
      .product-story {
        padding-bottom: 48px;
      }
      .why-section {
        padding-top: 64px;
      }
      @media (max-width: 760px) {
        .product-story {
          padding-bottom: 40px;
        }
        .why-section {
          padding-top: 52px;
        }
      }
      .retrofit-section {
        padding: 112px 0 82px;
        background: linear-gradient(180deg, #f5f9fd 0, #f9fcff 100%);
      }
      .retrofit-section .section-head {
        margin-bottom: 34px;
      }
      .retrofit-section .section-head h2 {
        font-size: 48px;
      }
      .retrofit-visual {
        position: relative;
        height: 300px;
        overflow: hidden;
        border-radius: 24px;
        box-shadow: 0 16px 42px rgba(20, 57, 94, 0.13);
      }
      .retrofit-visual > img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .retrofit-side-label {
        position: absolute;
        left: 24px;
        bottom: 20px;
        max-width: calc(48% - 24px);
        padding: 11px 16px 12px;
        color: #075baa;
        background: linear-gradient(100deg, rgba(220, 239, 255, 0.5), rgba(176, 218, 255, 0.5));
        border-left: 3px solid #1680e6;
        border-radius: 4px 12px 12px 4px;
        border-top: 1px solid rgba(255, 255, 255, 0.75);
        border-right: 1px solid rgba(154, 204, 248, 0.55);
        border-bottom: 1px solid rgba(154, 204, 248, 0.55);
        box-shadow: 0 8px 24px rgba(42, 118, 190, 0.16);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        text-shadow: none;
      }
      .retrofit-side-label.is-after {
        left: 52%;
        color: #d95f00;
        background: linear-gradient(100deg, rgba(255, 240, 220, 0.5), rgba(255, 194, 128, 0.5));
        border-left-color: #ff7a18;
        border-right-color: rgba(255, 166, 80, 0.6);
        border-bottom-color: rgba(255, 166, 80, 0.6);
        box-shadow: 0 8px 24px rgba(238, 121, 27, 0.16);
      }
      .retrofit-side-label b {
        display: block;
        margin-bottom: 5px;
        font-size: 28px;
        line-height: 1.15;
        font-weight: 800;
      }
      .retrofit-side-label span {
        display: block;
        font-size: 15px;
        line-height: 1.55;
        font-weight: 600;
        letter-spacing: 0.01em;
      }
      .retrofit-panels {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 24px;
        margin-top: 24px;
      }
      .retrofit-panel {
        padding: 28px 30px 24px;
        border: 1px solid #cddff3;
        border-radius: 20px;
        background: rgba(255, 255, 255, 0.82);
        box-shadow: 0 12px 34px rgba(35, 82, 128, 0.08);
      }
      .retrofit-panel.bot {
        border-color: #f5d5ad;
        background: linear-gradient(135deg, #fff 0, #fffaf3 100%);
      }
      .retrofit-panel-head {
        display: flex;
        align-items: center;
        gap: 12px;
      }
      .retrofit-panel-head img {
        width: 36px;
        height: 36px;
        object-fit: contain;
      }
      .retrofit-panel-head h3 {
        margin: 0;
        color: var(--navy);
        font-size: 25px;
      }
      .retrofit-panel.bot .retrofit-panel-head h3 {
        color: var(--orange);
      }
      .retrofit-badge {
        margin-left: 8px;
        padding: 5px 11px;
        border-radius: 999px;
        background: #eef5ff;
        color: #3579cb;
        font-size: 12px;
      }
      .retrofit-panel.bot .retrofit-badge {
        background: #fff1df;
        color: #e97709;
      }
      .retrofit-panel > p {
        margin: 12px 0 18px;
        color: #65778b;
        font-size: 14px;
        line-height: 1.7;
      }
      .retrofit-steps {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 8px;
      }
      .retrofit-panel.bot .retrofit-steps {
        grid-template-columns: repeat(4, 1fr) 1.35fr;
      }
      .retrofit-step {
        min-height: 92px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-radius: 12px;
        background: rgba(248, 251, 255, 0.88);
        color: #435e7c;
        font-size: 12px;
      }
      .retrofit-step img {
        width: 36px;
        height: 36px;
        margin-bottom: 8px;
        object-fit: contain;
      }
      .retrofit-saving {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #6b7784;
      }
      .retrofit-saving strong {
        color: var(--orange);
        font-size: 44px;
        line-height: 1;
      }
      .retrofit-saving span {
        margin-top: 10px;
        font-size: 12px;
      }
      .retrofit-link {
        display: inline-flex;
        gap: 12px;
        margin-top: 18px;
        color: #176ac3;
        font-size: 14px;
        font-weight: 700;
      }
      .retrofit-panel.bot .retrofit-link {
        color: var(--orange);
      }
      .cooperation-section {
        padding: 72px 0 118px;
        background: #fff;
      }
      .cooperation-section .section-head {
        margin-bottom: 26px;
      }
      .cooperation-section .section-head h2 {
        font-size: 42px;
      }
      .cooperation-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
      }
      .cooperation-card {
        position: relative;
        height: 220px;
        overflow: hidden;
        border: 1px solid #d9e7f5;
        border-radius: 18px;
        background: #eef6ff;
        box-shadow: 0 10px 28px rgba(30, 72, 116, 0.08);
      }
      .cooperation-card > img {
        position: absolute;
        inset: 0 0 0 auto;
        width: 65%;
        height: 100%;
        object-fit: cover;
      }
      .cooperation-card::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
          90deg,
          #f8fbff 0,
          #f8fbff 38%,
          rgba(248, 251, 255, 0.84) 56%,
          transparent 78%
        );
      }
      .cooperation-copy-new {
        position: relative;
        z-index: 2;
        width: 55%;
        padding: 28px 0 20px 28px;
      }
      .cooperation-copy-new h3 {
        margin: 0 0 16px;
        color: #176ac3;
        font-size: 21px;
      }
      .cooperation-copy-new p {
        margin: 0;
        color: #536a83;
        font-size: 14px;
        line-height: 1.9;
      }
      .cooperation-copy-new a {
        display: inline-flex;
        margin-top: 14px;
        color: #176ac3;
        font-size: 13px;
        font-weight: 700;
      }
      .retrofit-panels.reveal,
      .cooperation-grid.reveal {
        opacity: 1;
        transform: none;
      }
      .retrofit-panels.reveal > *,
      .cooperation-grid.reveal > * {
        opacity: 0;
        transform: translateY(34px);
        transition:
          opacity 0.65s ease,
          transform 0.75s cubic-bezier(0.18, 0.72, 0.24, 1);
      }
      .retrofit-panels.visible > *,
      .cooperation-grid.visible > * {
        opacity: 1;
        transform: none;
      }
      .retrofit-panels.visible > *:nth-child(2),
      .cooperation-grid.visible > *:nth-child(2) {
        transition-delay: 0.1s;
      }
      .cooperation-grid.visible > *:nth-child(3) {
        transition-delay: 0.2s;
      }
      @media (max-width: 1100px) {
        .retrofit-panels {
          grid-template-columns: 1fr;
        }
        .cooperation-grid {
          grid-template-columns: 1fr;
        }
        .cooperation-card {
          height: 240px;
        }
      }
      @media (max-width: 760px) {
        .retrofit-section {
          padding: 84px 0 66px;
        }
        .retrofit-section .section-head h2 {
          font-size: 37px;
        }
        .retrofit-visual {
          height: 260px;
        }
        .retrofit-side-label.is-after {
          left: auto;
          right: 18px;
        }
        .retrofit-side-label b {
          font-size: 19px;
        }
        .retrofit-side-label span {
          display: none;
        }
        .retrofit-panel {
          padding: 24px 20px;
        }
        .retrofit-panel-head {
          flex-wrap: wrap;
        }
        .retrofit-badge {
          margin-left: 0;
        }
        .retrofit-steps,
        .retrofit-panel.bot .retrofit-steps {
          grid-template-columns: repeat(2, 1fr);
        }
        .retrofit-saving {
          min-height: 100px;
          grid-column: 1/3;
        }
        .cooperation-section {
          padding: 62px 0 92px;
        }
        .cooperation-section .section-head h2 {
          font-size: 36px;
        }
        .cooperation-card {
          height: 260px;
        }
        .cooperation-card > img {
          width: 74%;
        }
        .cooperation-copy-new {
          width: 62%;
          padding-left: 22px;
        }
        .cooperation-copy-new h3 {
          font-size: 19px;
        }
      }
      .retrofit-section .reveal,
      .cooperation-section .reveal {
        opacity: 1 !important;
        transform: none !important;
      }
      .retrofit-panels.reveal > *,
      .cooperation-grid.reveal > * {
        opacity: 1;
        transform: none;
      }
      .solutions-section {
        padding-bottom: 48px;
      }
      .retrofit-section {
        padding-top: 64px;
        padding-bottom: 44px;
      }
      .cooperation-section {
        padding-top: 54px;
      }
      @media (max-width: 760px) {
        .solutions-section {
          padding-bottom: 40px;
        }
        .retrofit-section {
          padding-top: 54px;
          padding-bottom: 38px;
        }
        .cooperation-section {
          padding-top: 46px;
        }
      }
      .projects-section {
        padding: 108px 0 92px;
        background: linear-gradient(180deg, #f7fbff 0, #eef6ff 100%);
      }
      .projects-section .section-head {
        margin-bottom: 36px;
      }
      .projects-section .section-head h2 {
        font-size: 48px;
      }
      .projects-section .section-head::after,
      .company-copy .eyebrow::after {
        content: "";
        display: block;
        width: 38px;
        height: 3px;
        margin-top: 20px;
        border-radius: 3px;
        background: var(--orange);
      }
      .project-showcase {
        display: grid;
        grid-template-columns: 2.1fr 1fr 1fr;
        grid-template-rows: 235px 235px;
        gap: 16px;
      }
      .project-card-new {
        position: relative;
        display: block;
        overflow: hidden;
        border-radius: 20px;
        background: #dce8f2;
        color: inherit;
        text-decoration: none;
        box-shadow: 0 12px 32px rgba(22, 62, 101, 0.12);
      }
      .project-card-new:first-child {
        grid-row: 1/3;
      }
      .project-card-new img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.6s cubic-bezier(0.2, 0.72, 0.2, 1);
      }
      .project-card-new:hover img {
        transform: scale(1.035);
      }
      .project-card-new::after {
        content: "";
        position: absolute;
        inset: 45% 0 0;
        background: linear-gradient(transparent, rgba(4, 24, 46, 0.88));
      }
      .project-card-info {
        position: absolute;
        z-index: 2;
        left: 20px;
        right: 20px;
        bottom: 16px;
        color: #fff;
      }
      .project-card-info b {
        font-size: 17px;
      }
      .project-card-new:first-child .project-card-info {
        left: 28px;
        bottom: 24px;
      }
      .project-card-new:first-child .project-card-info b {
        font-size: 28px;
      }
      .project-card-info p {
        margin: 8px 0 0;
        font-size: 13px;
        opacity: 0.86;
      }
      .project-result {
        position: absolute;
        z-index: 3;
        right: 28px;
        bottom: 22px;
        text-align: right;
        color: #fff;
      }
      .project-result strong {
        display: block;
        color: var(--orange);
        font-size: 54px;
        line-height: 1;
      }
      .project-result span {
        font-size: 13px;
      }
      .company-section {
        padding: 86px 0 0;
        background: #f7fbff;
      }
      .company-intro {
        display: grid;
        grid-template-columns: 0.9fr 1.1fr;
        gap: 58px;
        align-items: center;
      }
      .company-copy h2 {
        margin: 24px 0 24px;
        color: var(--navy);
        font-size: 46px;
        line-height: 1.28;
      }
      .company-copy h2 .company-founded {
        display: inline-block;
        margin-top: 10px;
        color: var(--orange);
        font-size: 1.05em;
        letter-spacing: 0.08em;
        line-height: 1.2;
      }
      .company-copy p {
        margin: 0 0 26px;
        color: #526a83;
        font-size: 17px;
        line-height: 2;
      }
      .company-video {
        position: relative;
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
        overflow: hidden;
        border: 1px solid rgba(126, 174, 220, 0.34);
        border-radius: 22px;
        background: #071f3b;
        box-shadow: 0 16px 44px rgba(25, 65, 106, 0.16);
      }
      .company-video > img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .company-video > video {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: contain;
      }
      .company-video.has-video::after {
        display: none;
      }
      .company-video::after {
        content: "";
        position: absolute;
        inset: 60% 0 0;
        background: linear-gradient(transparent, rgba(5, 20, 39, 0.58));
      }
      .video-play {
        position: absolute;
        z-index: 3;
        left: 50%;
        top: 50%;
        width: 78px;
        height: 78px;
        display: grid;
        place-items: center;
        transform: translate(-50%, -50%);
        border: 3px solid #fff;
        border-radius: 50%;
        background: rgba(5, 24, 47, 0.65);
        color: #fff;
        font-size: 29px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
      }
      .video-controls {
        position: absolute;
        z-index: 3;
        left: 24px;
        right: 24px;
        bottom: 18px;
        display: flex;
        align-items: center;
        gap: 14px;
        color: #fff;
        font-size: 12px;
      }
      .video-progress {
        height: 4px;
        flex: 1;
        border-radius: 4px;
        background: linear-gradient(
          90deg,
          #3287e7 0 18%,
          rgba(255, 255, 255, 0.62) 18%
        );
      }
      .company-timeline {
        position: relative;
        height: 390px;
        margin-top: 72px;
        background: url("assets/tu01/005_07.jpg") center/cover no-repeat;
      }
      .timeline-label-new {
        position: absolute;
        text-align: center;
        color: #52677e;
        font-size: 13px;
      }
      .timeline-label-new strong {
        display: block;
        margin-bottom: 8px;
        color: #0757c9;
        font-size: 25px;
      }
      .timeline-label-new:nth-child(1) {
        left: 6%;
        top: 78px;
      }
      .timeline-label-new:nth-child(2) {
        left: 25%;
        top: 235px;
      }
      .timeline-label-new:nth-child(3) {
        left: 45%;
        top: 60px;
      }
      .timeline-label-new:nth-child(4) {
        left: 67%;
        top: 235px;
      }
      .timeline-label-new:nth-child(5) {
        right: 6%;
        top: 50px;
      }
      .timeline-label-new:nth-child(5) strong {
        color: var(--orange);
      }
      .project-showcase.reveal,
      .company-intro.reveal,
      .company-timeline.reveal {
        opacity: 1 !important;
        transform: none !important;
      }
      .project-showcase.reveal > * {
        opacity: 0;
        transform: translateY(28px) scale(0.985);
        clip-path: none;
        transition:
          opacity 0.7s ease,
          transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
      }
      .project-showcase.reveal.visible > * {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
      .project-showcase.reveal > :nth-child(2) { transition-delay: 0.08s; }
      .project-showcase.reveal > :nth-child(3) { transition-delay: 0.16s; }
      .project-showcase.reveal > :nth-child(4) { transition-delay: 0.24s; }
      .project-showcase.reveal > :nth-child(5) { transition-delay: 0.32s; }
      @media (prefers-reduced-motion: reduce) {
        .project-showcase.reveal > * {
          opacity: 1;
          transform: none;
          transition: none;
        }
      }
      @media (max-width: 1100px) {
        .project-showcase {
          grid-template-columns: 1.5fr 1fr;
          grid-template-rows: 260px 220px 220px;
        }
        .project-card-new:first-child {
          grid-row: 1/3;
        }
        .project-card-new:nth-child(4) {
          grid-column: 1;
        }
        .project-card-new:nth-child(5) {
          grid-column: 2;
        }
        .company-intro {
          grid-template-columns: 1fr;
          gap: 38px;
        }
        .company-video {
          height: auto;
        }
        .company-timeline {
          height: 330px;
        }
        .timeline-label-new:nth-child(even) {
          top: 205px;
        }
      }
      @media (max-width: 760px) {
        .projects-section {
          padding: 82px 0 72px;
        }
        .projects-section .section-head h2 {
          font-size: 37px;
        }
        .project-showcase {
          grid-template-columns: 1fr 1fr;
          grid-template-rows: 320px repeat(2, 170px);
          gap: 10px;
        }
        .project-card-new:first-child {
          grid-column: 1/3;
          grid-row: auto;
        }
        .project-card-new:nth-child(n + 2) {
          grid-column: auto;
          grid-row: auto;
        }
        .project-card-new:first-child .project-card-info b {
          font-size: 22px;
        }
        .project-result strong {
          font-size: 42px;
        }
        .company-section {
          padding-top: 68px;
        }
        .company-copy h2 {
          font-size: 38px;
        }
        .company-copy p {
          font-size: 15px;
        }
        .company-video {
          height: auto;
          border-radius: 16px;
        }
        .video-play {
          width: 62px;
          height: 62px;
        }
        .company-timeline {
          height: auto;
          margin-top: 55px;
          padding: 30px 0;
          background: #f5f9ff;
        }
        .timeline-label-new {
          position: relative !important;
          left: auto !important;
          right: auto !important;
          top: auto !important;
          display: grid;
          grid-template-columns: 80px 1fr;
          align-items: center;
          text-align: left;
          padding: 15px 22px;
          border-left: 2px solid #2575d5;
        }
        .timeline-label-new strong {
          margin: 0;
          font-size: 21px;
        }
      }
      .projects-section .reveal,
      .company-section .reveal {
        opacity: 0 !important;
        transform: translateY(30px) !important;
        transition:
          opacity 0.72s ease,
          transform 0.72s cubic-bezier(0.22, 1, 0.36, 1);
      }
      .projects-section .reveal.visible,
      .company-section .reveal.visible {
        opacity: 1 !important;
        transform: translateY(0) !important;
      }
      .company-timeline {
        overflow: hidden;
        border: 1px solid #e0ebf6;
        border-radius: 24px;
        box-shadow: 0 12px 34px rgba(33, 74, 116, 0.08);
      }
      @media (min-width: 761px) {
        .company-timeline {
          background-size: 100% 100%;
        }
        .timeline-label-new {
          width: 190px;
          transform: translateX(-50%);
        }
        .timeline-label-new:nth-child(1) {
          left: 13.3%;
          top: 62px;
        }
        .timeline-label-new:nth-child(2) {
          left: 30.9%;
          top: 235px;
        }
        .timeline-label-new:nth-child(3) {
          left: 48.7%;
          top: 52px;
        }
        .timeline-label-new:nth-child(4) {
          left: 67.2%;
          top: 235px;
        }
        .timeline-label-new:nth-child(5) {
          left: 85%;
          right: auto;
          top: 42px;
        }
      }
      .company-timeline {
        background-image: url("assets/tu01/005_07.jpg");
      }
      .projects-section .section-head {
        max-width: 900px;
        margin: 0 auto 36px;
        text-align: center;
      }
      .projects-section .section-head .lead {
        margin-left: auto;
        margin-right: auto;
      }
      .projects-section .section-head::after {
        margin: 20px auto 0;
      }
      @media (min-width: 761px) {
        .timeline-label-new strong {
          line-height: 1;
          margin-bottom: 6px;
        }
        .timeline-label-new:nth-child(1) {
          left: 13.7%;
        }
        .timeline-label-new:nth-child(2) {
          left: 31.9%;
        }
        .timeline-label-new:nth-child(3) {
          left: 50.2%;
        }
        .timeline-label-new:nth-child(4) {
          left: 69.2%;
        }
        .timeline-label-new:nth-child(5) {
          left: 87.6%;
        }
      }
      .cooperation-section {
        padding: 48px 0 44px;
      }
      .cooperation-section .section-head {
        max-width: 860px;
        margin: 0 auto 30px;
        text-align: center;
      }
      .cooperation-section .section-head .lead {
        margin-left: auto;
        margin-right: auto;
      }
      .projects-section {
        padding-top: 60px;
      }
      @media (max-width: 760px) {
        .cooperation-section {
          padding: 40px 0 38px;
        }
        .cooperation-section .section-head {
          margin-bottom: 25px;
        }
        .projects-section {
          padding-top: 50px;
        }
      }
      @media (min-width: 761px) {
        .timeline-label-new:nth-child(2) {
          left: 30.9%;
        }
        .timeline-label-new:nth-child(4) {
          left: 67.2%;
        }
      }
      @media (min-width: 761px) {
        .timeline-label-new:nth-child(2),
        .timeline-label-new:nth-child(4) {
          top: 270px;
        }
      }
      @media (min-width: 761px) {
        .timeline-label-new:nth-child(2) {
          left: 31.9%;
        }
        .timeline-label-new:nth-child(4) {
          left: 69.2%;
        }
      }
      .company-timeline-v2 {
        position: relative;
        left: 50%;
        width: 100vw;
        height: 360px;
        margin-top: 72px;
        margin-left: -50vw;
        overflow: hidden;
        border: 0;
        border-radius: 0;
        background: #f8fbff;
        box-shadow: none;
      }
      .timeline-curve {
        position: absolute;
        z-index: 1;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
      }
      .timeline-event {
        position: absolute;
        z-index: 2;
        left: var(--x);
        top: var(--y);
        width: 0;
        height: 0;
      }
      .timeline-event-dot {
        position: absolute;
        left: 0;
        top: 0;
        width: 18px;
        height: 18px;
        border: 5px solid #fff;
        border-radius: 50%;
        background: #1269e8;
        box-shadow: 0 0 0 1px rgba(18, 105, 232, 0.18),
          0 0 18px rgba(18, 105, 232, 0.46);
        transform: translate(-50%, -50%);
      }
      .timeline-event-content {
        position: absolute;
        left: 0;
        width: 136px;
        text-align: center;
        transform: translateX(-50%);
      }
      .timeline-event.is-top .timeline-event-content {
        bottom: 52px;
      }
      .timeline-event.is-bottom .timeline-event-content {
        top: 52px;
      }
      .timeline-event-content::after {
        position: absolute;
        left: 50%;
        width: 1px;
        height: 42px;
        content: "";
        background: linear-gradient(#7bb0f4, rgba(123, 176, 244, 0.08));
      }
      .timeline-event.is-top .timeline-event-content::after {
        top: calc(100% + 5px);
      }
      .timeline-event.is-bottom .timeline-event-content::after {
        bottom: calc(100% + 5px);
        transform: rotate(180deg);
      }
      .timeline-event-year {
        display: block;
        margin-bottom: 7px;
        color: #0757c9;
        font-size: 25px;
        font-weight: 800;
        line-height: 1;
      }
      .timeline-event-text {
        display: block;
        color: #52677e;
        font-size: 13px;
        line-height: 1.45;
      }
      .timeline-event:last-of-type .timeline-event-year {
        color: var(--orange);
      }
      .timeline-event:last-of-type .timeline-event-dot {
        background: var(--orange);
        box-shadow: 0 0 0 1px rgba(255, 111, 24, 0.18),
          0 0 18px rgba(255, 111, 24, 0.42);
      }
      @media (max-width: 1000px) and (min-width: 761px) {
        .company-timeline-v2 {
          height: 390px;
        }
        .timeline-event-content {
          width: 112px;
        }
        .timeline-event-year {
          font-size: 21px;
        }
        .timeline-event-text {
          font-size: 12px;
        }
      }
      @media (max-width: 760px) {
        .company-timeline-v2 {
          height: auto;
          margin-top: 55px;
          margin-left: -50vw;
          padding: 22px 18px;
          background: #f8fbff;
        }
        .timeline-curve {
          display: none;
        }
        .timeline-event {
          position: relative;
          left: auto !important;
          top: auto !important;
          width: auto;
          height: auto;
          min-height: 76px;
          padding-left: 30px;
          border-left: 2px solid #75a9ed;
        }
        .timeline-event:last-child {
          min-height: 52px;
          border-left-color: transparent;
        }
        .timeline-event-dot {
          left: -1px;
          top: 10px;
          width: 15px;
          height: 15px;
          border-width: 4px;
        }
        .timeline-event-content,
        .timeline-event.is-top .timeline-event-content,
        .timeline-event.is-bottom .timeline-event-content {
          position: static;
          width: auto;
          text-align: left;
          transform: none;
        }
        .timeline-event-content::after {
          display: none;
        }
        .timeline-event-year {
          margin-bottom: 5px;
          font-size: 21px;
        }
        .timeline-event-text {
          font-size: 13px;
        }
      }
      @media (min-width: 761px) {
        .metrics-panel .metrics-grid {
          width: var(--container);
        }
      }
      .retrofit-section .section-head {
        max-width: 1050px;
        margin: 0 auto 34px;
        text-align: center;
      }
      .retrofit-section .section-head .lead {
        margin-left: auto;
        margin-right: auto;
      }
      @media (min-width: 761px) {
        .retrofit-panel-head img {
          width: 44px;
          height: 44px;
        }
        .retrofit-panel-head h3 {
          font-size: 28px;
          font-weight: 800;
        }
        .retrofit-badge {
          font-size: 13px;
          font-weight: 650;
        }
        .retrofit-panel > p {
          font-size: 15px;
          font-weight: 550;
        }
        .retrofit-step {
          font-size: 14px;
          font-weight: 700;
        }
        .retrofit-step img {
          width: 45px;
          height: 45px;
          margin-bottom: 10px;
        }
        .retrofit-link {
          font-size: 15px;
          font-weight: 800;
        }
        .retrofit-saving span {
          font-size: 13px;
          font-weight: 650;
        }
      }
      .trust-section {
        padding: 92px 0 96px;
        background: linear-gradient(180deg, #f5f9ff 0%, #fff 100%);
      }
      .trust-head,
      .news-head {
        text-align: center;
        max-width: 850px;
        margin: 0 auto 44px;
      }
      .trust-head h2,
      .news-head h2 {
        margin: 10px 0 12px;
        font-size: clamp(38px, 3.2vw, 58px);
        line-height: 1.16;
        color: var(--navy);
      }
      .trust-head p,
      .news-head p {
        margin: 0;
        color: #657995;
        font-size: 17px;
      }
      .trust-grid {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 16px;
      }
      .trust-card {
        min-width: 0;
        padding: 26px 15px 24px;
        text-align: center;
        border: 1px solid #dfe9f5;
        border-radius: 22px;
        background: rgba(255, 255, 255, 0.92);
        box-shadow: 0 14px 38px rgba(19, 67, 121, 0.07);
        transition:
          transform 0.35s ease,
          box-shadow 0.35s ease;
      }
      .trust-card:hover {
        transform: translateY(-7px);
        box-shadow: 0 20px 45px rgba(19, 67, 121, 0.13);
      }
      .trust-card img {
        display: block;
        width: 104px;
        height: 104px;
        object-fit: contain;
        margin: 0 auto 15px;
      }
      .trust-card h3 {
        margin: 0 0 9px;
        color: var(--navy);
        font-size: 17px;
        line-height: 1.35;
      }
      .trust-card p {
        margin: 0;
        color: #7b8ba0;
        font-size: 14px;
        line-height: 1.6;
      }
      .news-section-new {
        padding: 92px 0 88px;
        background: #fff;
      }
      .news-layout-new {
        display: grid;
        grid-template-columns: minmax(0, 1.48fr) minmax(380px, 1fr);
        gap: 18px;
        align-items: stretch;
      }
      .news-feature {
        position: relative;
        min-height: 510px;
        border-radius: 24px;
        overflow: hidden;
        background: #0c376e;
        box-shadow: 0 18px 44px rgba(18, 52, 92, 0.13);
      }
      .news-feature-link {
        position: absolute;
        z-index: 1;
        inset: 0;
      }
      .news-feature > img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
      }
      .news-feature:hover > img {
        transform: scale(1.035);
      }
      .news-feature::after {
        content: "";
        position: absolute;
        z-index: 0;
        inset: 35% 0 0;
        background: linear-gradient(180deg, transparent, rgba(3, 22, 49, 0.88));
      }
      .news-feature-copy {
        position: absolute;
        z-index: 2;
        left: 32px;
        right: 32px;
        bottom: 29px;
        color: #fff;
      }
      .news-tag {
        display: inline-flex;
        padding: 7px 13px;
        border-radius: 999px;
        background: #126ee8;
        font-size: 13px;
      }
      .news-feature h3 {
        margin: 15px 0 8px;
        font-size: 30px;
        line-height: 1.25;
      }
      .news-feature time {
        font-size: 15px;
        opacity: 0.84;
      }
      .news-nav {
        position: absolute;
        z-index: 3;
        right: 25px;
        bottom: 24px;
        display: flex;
        align-items: center;
        gap: 9px;
      }
      .news-nav i {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.72);
      }
      .news-nav i:first-child {
        width: 22px;
        border-radius: 5px;
        background: #2b82ff;
      }
      .news-round {
        width: 38px;
        height: 38px;
        border: 1px solid rgba(255, 255, 255, 0.55);
        border-radius: 50%;
        display: grid;
        place-items: center;
        color: #fff;
        background: rgba(4, 31, 64, 0.28);
      }
      .news-list-new {
        padding: 12px 28px;
        border: 1px solid #e1e9f3;
        border-radius: 24px;
        background: #fff;
        box-shadow: 0 16px 40px rgba(18, 52, 92, 0.07);
      }
      .news-row-new {
        display: grid;
        grid-template-columns: 1fr 30px;
        align-items: center;
        min-height: 118px;
        border-bottom: 1px solid #e7edf4;
        text-decoration: none;
      }
      .news-row-new:last-child {
        border-bottom: 0;
      }
      .news-row-new .category {
        display: inline-flex;
        margin-bottom: 7px;
        padding: 4px 9px;
        border-radius: 8px;
        color: #176edf;
        background: #eaf3ff;
        font-size: 12px;
        font-weight: 700;
      }
      .news-row-new:nth-child(3) .category {
        color: #e98314;
        background: #fff2db;
      }
      .news-row-new h3 {
        margin: 0 0 6px;
        color: var(--navy);
        font-size: 17px;
        line-height: 1.45;
      }
      .news-row-new time {
        color: #98a6b8;
        font-size: 13px;
      }
      .news-row-new .arrow {
        font-size: 25px;
        color: #154f94;
        transition: transform 0.25s;
      }
      .news-row-new:hover .arrow {
        transform: translateX(5px);
      }
      .more-news {
        display: flex;
        width: max-content;
        margin: 28px auto 0;
        padding: 13px 27px;
        border: 1px solid #176ee8;
        border-radius: 999px;
        color: #105dbd;
        text-decoration: none;
        font-weight: 700;
      }
      .faq-section-new {
        position: relative;
        overflow: hidden;
        padding: 78px 0 92px;
        background: #f3f8ff url("../tu01/006_11.jpg") center/cover no-repeat;
      }
      .faq-layout-new {
        display: grid;
        grid-template-columns: minmax(0, 1.08fr) minmax(390px, 0.92fr);
        gap: 42px;
        align-items: center;
      }
      .faq-copy-head {
        margin-bottom: 28px;
      }
      .faq-copy-head h2 {
        margin: 8px 0 10px;
        color: var(--navy);
        font-size: clamp(34px, 2.65vw, 48px);
        line-height: 1.18;
        white-space: nowrap;
      }
      .faq-copy-head p {
        margin: 0;
        color: #6b7f99;
        font-size: 16px;
      }
      .faq-section-new .faq-list {
        display: grid;
        gap: 12px;
      }
      .faq-section-new .faq-item {
        overflow: hidden;
        border: 1px solid #dce8f6;
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.92);
        box-shadow: 0 9px 26px rgba(24, 75, 130, 0.06);
      }
      .faq-section-new .faq-q {
        display: grid;
        grid-template-columns: 46px 1fr 30px;
        gap: 15px;
        align-items: center;
        width: 100%;
        padding: 13px 18px;
        border: 0;
        background: transparent;
        text-align: left;
        color: var(--navy);
        font: 700 17px/1.35 inherit;
        cursor: pointer;
      }
      .faq-icon {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        background: linear-gradient(145deg, #3485ee, #085bc7);
      }
      .faq-icon img {
        width: 23px;
        height: 23px;
        object-fit: contain;
        filter: brightness(0) invert(1);
      }
      .faq-chevron {
        font-size: 22px;
        color: #0e65d6;
        transition: transform 0.25s;
      }
      .faq-item.open .faq-chevron {
        transform: rotate(45deg);
      }
      .faq-section-new .faq-a {
        display: none;
        padding: 0 63px 16px 79px;
        color: #677b95;
        font-size: 14px;
        line-height: 1.75;
      }
      .faq-section-new .faq-item.open .faq-a {
        display: block;
      }
      .faq-detail-link {
        display: block;
        width: max-content;
        margin-top: 8px;
        color: #1268ce;
        font-weight: 800;
        text-decoration: none;
      }
      .faq-visual-new {
        min-height: 430px;
      }
      .faq-section-new .faq-q {
        font-family: inherit;
        font-size: 17px;
        font-weight: 700;
        line-height: 1.35;
      }
      .news-feature.is-changing > img,
      .news-feature.is-changing .news-feature-copy {
        opacity: 0;
        transform: translateY(8px);
      }
      .news-feature > img,
      .news-feature-copy {
        transition:
          opacity 0.32s ease,
          transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
      }
      .news-nav {
        right: 22px;
      }
      .news-nav button {
        padding: 0;
        border: 0;
        cursor: pointer;
      }
      .news-nav .news-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.7);
        transition:
          width 0.25s,
          background 0.25s;
      }
      .news-nav .news-dot.active {
        width: 22px;
        border-radius: 5px;
        background: #2b82ff;
      }
      .news-meta {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 5px;
      }
      .news-row-new .news-meta .category {
        margin: 0;
      }
      .news-row-new .news-meta time {
        color: #98a6b8;
        font-size: 12px;
      }
      .news-list-new {
        padding: 5px 28px;
      }
      .news-row-new {
        min-height: 82px;
      }
      .news-row-new h3 {
        margin: 4px 0 0;
        font-size: 16px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .faq-section-new {
        padding: 96px 0 92px;
      }
      .faq-layout-new {
        grid-template-columns: minmax(0, 1.36fr) minmax(320px, 0.64fr);
        gap: 24px;
      }
      .faq-copy-head {
        max-width: 900px;
        margin: 0 auto 30px;
        text-align: center;
      }
      .faq-copy-head p {
        margin-left: auto;
        margin-right: auto;
      }
      .faq-section-new .faq-item.open .faq-a {
        display: block;
        max-height: 180px;
        margin: 0 14px 14px 78px;
        padding: 12px 16px;
        border: 1px solid rgba(61, 124, 199, 0.11);
        border-radius: 10px;
        background: rgba(226, 238, 252, 0.72);
        color: #4f6885;
        line-height: 1.75;
      }
      .faq-section-new .faq-q {
        padding-top: 15px;
        padding-bottom: 15px;
      }
      .faq-section-new .faq-icon {
        overflow: hidden;
        background: #fff;
      }
      .faq-section-new .faq-icon img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
        filter: none;
      }
      .trust-section {
        padding-bottom: 44px;
      }
      .news-section-new {
        padding-top: 54px;
        padding-bottom: 50px;
      }
      .faq-section-new {
        padding-top: 58px;
      }
      .trust-section .reveal,
      .news-section-new .reveal,
      .faq-section-new .reveal {
        opacity: 0 !important;
        transform: translateY(30px) !important;
        transition:
          opacity 0.72s ease,
          transform 0.72s cubic-bezier(0.22, 1, 0.36, 1);
      }
      .trust-section .reveal.visible,
      .news-section-new .reveal.visible,
      .faq-section-new .reveal.visible {
        opacity: 1 !important;
        transform: translateY(0) !important;
      }
      .company-section .company-timeline-v2.reveal,
      .trust-section .trust-grid.reveal,
      .news-section-new .news-layout-new.reveal,
      .faq-section-new .faq-list.reveal,
      .contact-section-new .contact-cards-new.reveal {
        transition-delay: 0.1s;
      }
      .contact-section-new .contact-quick-new.reveal {
        transition-delay: 0.18s;
      }
      @media (max-width: 1100px) {
        .trust-grid {
          grid-template-columns: repeat(3, 1fr);
        }
        .news-layout-new {
          grid-template-columns: 1fr;
        }
        .news-feature {
          min-height: 470px;
        }
        .faq-layout-new {
          grid-template-columns: 1fr;
        }
        .faq-visual-new {
          display: none;
        }
      }
      @media (max-width: 760px) {
        .trust-section {
          padding: 72px 0 40px;
        }
        .news-section-new {
          padding: 48px 0 42px;
        }
        .trust-head,
        .news-head {
          margin-bottom: 30px;
        }
        .trust-head h2,
        .news-head h2 {
          font-size: 36px;
        }
        .trust-grid {
          grid-template-columns: 1fr 1fr;
          gap: 10px;
        }
        .trust-card {
          padding: 20px 10px;
        }
        .trust-card img {
          width: 82px;
          height: 82px;
        }
        .news-feature {
          min-height: 380px;
        }
        .news-feature-copy {
          left: 20px;
          right: 20px;
        }
        .news-feature h3 {
          font-size: 24px;
        }
        .news-nav {
          display: none;
        }
        .news-list-new {
          padding: 4px 18px;
        }
        .news-row-new {
          min-height: 108px;
        }
        .faq-section-new {
          padding: 52px 0 68px;
          background-position: 65% center;
        }
        .faq-copy-head h2 {
          font-size: 34px;
          white-space: normal;
        }
        .faq-section-new .faq-q {
          grid-template-columns: 40px 1fr 24px;
          padding: 12px;
          font-size: 15px;
        }
        .faq-icon {
          width: 38px;
          height: 38px;
        }
        .faq-section-new .faq-a {
          padding: 0 46px 15px 67px;
        }
        .faq-section-new .faq-item.open .faq-a {
          margin: 0 10px 10px 62px;
          padding: 11px 13px;
        }
      }
      .project-cta-wrap {
        padding: 52px 0 58px;
        background: #fff;
      }
      .project-cta {
        position: relative;
        width: var(--container);
        height: 540px;
        margin: auto;
        overflow: hidden;
        border-radius: 28px;
        background: #073467;
      }
      .project-cta > img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .project-cta::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
          90deg,
          rgba(3, 39, 82, 0.98) 0,
          rgba(3, 39, 82, 0.88) 38%,
          rgba(3, 39, 82, 0.22) 72%,
          rgba(3, 39, 82, 0.04) 100%
        );
      }
      .project-cta-copy {
        position: absolute;
        z-index: 2;
        left: 58px;
        top: 72px;
        color: #fff;
      }
      .project-cta-copy h2 {
        margin: 0 0 16px;
        font-size: clamp(38px, 3.2vw, 56px);
        line-height: 1.18;
      }
      .project-cta-copy > p {
        margin: 0;
        color: rgba(255, 255, 255, 0.86);
        font-size: 17px;
      }
      .project-cta-actions {
        display: flex;
        gap: 18px;
        margin-top: 32px;
      }
      .project-cta-actions .btn-outline-white {
        color: #fff;
        border: 1px solid rgba(255, 255, 255, 0.72);
        background: rgba(7, 42, 82, 0.28);
      }
      .project-cta-benefits {
        position: absolute;
        z-index: 2;
        left: 58px;
        bottom: 64px;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 34px;
        color: #fff;
      }
      .project-benefit {
        display: grid;
        grid-template-columns: 52px 1fr;
        gap: 14px;
        align-items: center;
        max-width: 230px;
      }
      .project-benefit img {
        width: 48px;
        height: 48px;
        padding: 10px;
        border: 1px solid rgba(255, 121, 31, 0.9);
        border-radius: 50%;
        object-fit: contain;
        filter: brightness(0) invert(1);
      }
      .project-benefit b {
        display: block;
        font-size: 17px;
      }
      .project-benefit span {
        display: block;
        margin-top: 5px;
        color: rgba(255, 255, 255, 0.74);
        font-size: 13px;
        line-height: 1.55;
      }
      .contact-section-new {
        padding: 52px 0 48px;
        background: linear-gradient(180deg, #f8fbff, #fff);
      }
      .contact-heading-new {
        margin-bottom: 30px;
      }
      .contact-heading-new h2 {
        margin: 8px 0 0;
        color: var(--navy);
        font-size: 48px;
      }
      .contact-heading-new::after {
        content: "";
        display: block;
        width: 38px;
        height: 3px;
        margin-top: 16px;
        background: var(--orange);
        border-radius: 4px;
      }
      .contact-cards-new {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 28px;
      }
      .contact-card-new,
      .contact-map-new {
        min-height: 510px;
        border: 1px solid #dce6f1;
        border-radius: 22px;
        background: #fff;
        box-shadow: 0 14px 38px rgba(24, 65, 108, 0.09);
      }
      .contact-card-new {
        position: relative;
        overflow: hidden;
        padding: 34px 42px;
      }
      .contact-card-new::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 125px;
        background: linear-gradient(180deg, transparent, #eef6ff);
      }
      .contact-logo {
        width: 178px;
        height: auto;
      }
      .contact-card-new h3 {
        margin: 22px 0 24px;
        color: var(--navy);
        font-size: 25px;
      }
      .contact-info-new {
        position: relative;
        z-index: 2;
        display: grid;
        gap: 15px;
      }
      .contact-info-row {
        display: grid;
        grid-template-columns: 28px 1fr;
        gap: 14px;
        align-items: center;
        color: #153b70;
      }
      .contact-info-row img {
        width: 24px;
        height: 24px;
        object-fit: contain;
      }
      .contact-info-row b {
        display: block;
        font-size: 17px;
      }
      .contact-info-row small {
        display: block;
        color: #8998aa;
        font-size: 12px;
      }
      .contact-map-new {
        position: relative;
        overflow: hidden;
        padding: 18px;
      }
      .contact-map-new > img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 16px;
      }
      .map-card-new {
        position: absolute;
        left: 38px;
        right: 38px;
        bottom: 30px;
        padding: 22px 28px;
        border-radius: 18px;
        background: #fff;
        box-shadow: 0 15px 35px rgba(14, 51, 94, 0.16);
      }
      .map-card-new h3 {
        margin: 0 0 4px;
        color: var(--navy);
        font-size: 25px;
      }
      .map-card-new p {
        margin: 0 0 15px;
        color: #7a899b;
      }
      .map-card-new a {
        color: #355a84;
        text-decoration: none;
      }
      .contact-quick-new {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        margin-top: 26px;
        border: 1px solid #dbe5f0;
        border-bottom: 3px solid var(--orange);
        border-radius: 18px;
        background: #fff;
        box-shadow: 0 10px 28px rgba(21, 60, 101, 0.08);
      }
      .quick-contact {
        display: grid;
        grid-template-columns: 48px 1fr 20px;
        gap: 14px;
        align-items: center;
        padding: 22px 34px;
        text-decoration: none;
        color: var(--navy);
        border-right: 1px solid #dce5ee;
      }
      .quick-contact:last-child {
        border-right: 0;
      }
      .quick-contact img {
        width: 40px;
        height: 40px;
        object-fit: contain;
      }
      .quick-contact b {
        display: block;
        font-size: 17px;
      }
      .quick-contact small {
        color: #8796a7;
      }
      .quick-contact > span:last-child {
        font-size: 24px;
      }
      .footer-new {
        padding: 54px 0 24px;
        background: radial-gradient(
          circle at 70% 20%,
          #0d4b87 0,
          #073566 38%,
          #05264d 100%
        );
        color: #fff;
      }
      .footer-new .footer-grid {
        grid-template-columns: 1.5fr repeat(5, 1fr);
        gap: 42px;
      }
      .footer-new .brand img {
        filter: brightness(0) invert(1);
      }
      .footer-new .footer-intro {
        color: #c1d0e2;
        font-size: 13px;
      }
      .footer-socials {
        display: flex;
        gap: 10px;
        margin-top: 18px;
      }
      .footer-socials span {
        width: 34px;
        height: 34px;
        display: grid;
        place-items: center;
        border: 1px solid rgba(255, 255, 255, 0.42);
        border-radius: 50%;
      }
      .footer-new h4 {
        font-size: 16px;
      }
      .footer-new a {
        color: #c4d2e3;
        text-decoration: none;
      }
      .footer-new .copyright {
        margin-top: 38px;
      }
      .faq-section-new {
        padding-bottom: 36px;
      }
      .project-cta-wrap {
        padding-top: 36px;
        padding-bottom: 40px;
      }
      .contact-section-new {
        padding-top: 44px;
      }
      .contact-heading-new {
        text-align: center;
      }
      .contact-heading-new::after {
        margin-left: auto;
        margin-right: auto;
      }
      .contact-card-new {
        background:
          radial-gradient(
            circle at 82% 42%,
            rgba(194, 222, 250, 0.58),
            transparent 30%
          ),
          linear-gradient(135deg, #fff 0, #f6faff 100%);
      }
      .contact-card-top {
        display: grid;
        grid-template-columns: 190px 1px 1fr;
        gap: 26px;
        align-items: center;
        margin-bottom: 30px;
      }
      .contact-card-top::before {
        content: "";
        grid-column: 2;
        width: 1px;
        height: 62px;
        background: #d3deeb;
      }
      .contact-card-top .contact-logo {
        grid-column: 1;
        grid-row: 1;
        width: 175px;
      }
      .contact-card-title {
        grid-column: 3;
        grid-row: 1;
      }
      .contact-card-title span {
        display: block;
        color: #8191a4;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 0.08em;
      }
      .contact-card-title strong {
        display: block;
        margin-top: 4px;
        color: var(--navy);
        font-size: 30px;
        line-height: 1.15;
      }
      .contact-card-title i {
        display: block;
        width: 30px;
        height: 3px;
        margin-top: 12px;
        background: var(--orange);
        border-radius: 3px;
      }
      .contact-card-new > h3 {
        margin-top: 0;
      }
      .contact-info-row {
        padding: 3px 0;
      }
      .contact-info-row img {
        padding: 4px;
        border-radius: 50%;
        background: #eef6ff;
      }
      .contact-cards-new {
        grid-template-columns: minmax(0, 1fr) clamp(480px, 36vw, 640px);
        align-items: stretch;
      }
      .contact-card-new {
        min-height: 0;
      }
      .contact-map-new {
        min-height: 0;
        aspect-ratio: 1.08/1;
        justify-self: end;
        width: 100%;
      }
      .contact-card-new {
        padding: 44px 50px;
        background: url("../tu01/007_11.jpg") center/cover no-repeat;
      }
      .contact-card-new::before {
        content: "";
        position: absolute;
        z-index: 0;
        inset: 0;
        background: linear-gradient(
          90deg,
          rgba(255, 255, 255, 0.98) 0,
          rgba(248, 252, 255, 0.94) 52%,
          rgba(235, 246, 255, 0.62) 78%,
          rgba(224, 240, 255, 0.42) 100%
        );
      }
      .contact-card-new::after {
        z-index: 1;
        height: 160px;
        background: linear-gradient(
          180deg,
          transparent,
          rgba(231, 243, 255, 0.85)
        );
      }
      .contact-card-top,
      .contact-card-new > h3 {
        position: relative;
        z-index: 2;
      }
      .contact-card-top {
        grid-template-columns: 235px 1px 1fr;
        gap: 30px;
        margin-bottom: 36px;
      }
      .contact-card-top .contact-logo {
        width: 218px;
      }
      .contact-card-title span {
        font-size: 15px;
      }
      .contact-card-title strong {
        font-size: 38px;
      }
      .contact-card-new > h3 {
        margin-bottom: 30px;
        font-size: 30px;
      }
      .contact-info-new {
        gap: 19px;
      }
      .contact-info-row {
        grid-template-columns: 42px 1fr;
        gap: 18px;
      }
      .contact-info-row img {
        width: 36px;
        height: 36px;
        padding: 5px;
      }
      .contact-info-row b {
        font-size: 21px;
      }
      .contact-info-row small {
        margin-top: 2px;
        font-size: 14px;
      }
      .hero .slide::after {
        background: transparent;
      }
      .hero {
        height: 100svh;
        min-height: 760px;
        max-height: none;
      }
      @media (min-width: 761px) {
        .metrics-panel {
          margin-top: -148px;
          padding-bottom: 42px;
        }
        .slider-nav {
          bottom: 164px;
        }
      }
      .cap-card-grid {
        gap: 14px;
      }
      .cap-card,
      .cap-card:nth-child(n + 4) {
        position: relative;
        height: 570px;
        min-height: 570px;
        padding: 18px 24px 32px;
        isolation: isolate;
        background: #d9ecff;
      }
      .cap-card::after {
        content: "";
        position: absolute;
        z-index: 1;
        inset: 0;
        background: linear-gradient(
          180deg,
          rgba(240, 248, 255, 0.98) 0%,
          rgba(240, 248, 255, 0.9) 18%,
          rgba(239, 248, 255, 0.62) 32%,
          rgba(239, 248, 255, 0.28) 45%,
          rgba(239, 248, 255, 0.08) 56%,
          rgba(239, 248, 255, 0) 68%
        );
        pointer-events: none;
      }
      .cap-card header,
      .cap-card > p {
        position: relative;
        z-index: 2;
      }
      .cap-card header {
        grid-template-columns: 38px 38px 1fr;
      }
      .cap-card header > img {
        width: 36px;
        height: 36px;
      }
      .cap-card header span {
        font-size: 15px;
      }
      .cap-card h3 {
        font-size: 25px;
      }
      .cap-card > p {
        min-height: 0;
        margin-top: 14px;
        color: #304b69;
        font-size: 17px;
        line-height: 1.75;
      }
      .cap-card .cap-photo {
        position: absolute;
        z-index: 0;
        inset: 0;
        width: 100%;
        max-width: none;
        height: 100%;
        margin: 0;
        object-fit: contain;
        object-position: center bottom;
        background: #d9ecff;
        mask-image: linear-gradient(
          to bottom,
          transparent 0%,
          transparent 20%,
          rgba(0, 0, 0, 0.16) 29%,
          rgba(0, 0, 0, 0.55) 40%,
          #000 52%
        );
        -webkit-mask-image: linear-gradient(
          to bottom,
          transparent 0%,
          transparent 20%,
          rgba(0, 0, 0, 0.16) 29%,
          rgba(0, 0, 0, 0.55) 40%,
          #000 52%
        );
      }
      .cap-card:hover .cap-photo {
        transform: none;
      }
      @media (max-width: 760px) {
        .cap-card,
        .cap-card:nth-child(n + 4) {
          height: 540px;
          min-height: 540px;
          padding: 20px 22px 28px;
        }
        .cap-card .cap-photo {
          height: 100%;
        }
        .cap-card h3 {
          font-size: 23px;
        }
        .cap-card > p {
          font-size: 16px;
        }
      }
      @media (max-width: 1350px) and (min-width: 1101px) {
        .contact-card-new {
          padding: 36px 34px;
        }
        .contact-card-top {
          grid-template-columns: 175px 1px 1fr;
          gap: 18px;
        }
        .contact-card-top .contact-logo {
          width: 165px;
        }
        .contact-card-title strong {
          font-size: 30px;
        }
        .contact-card-new > h3 {
          font-size: 25px;
        }
        .contact-info-row b {
          font-size: 18px;
        }
      }
      @media (max-width: 1100px) {
        .project-cta-benefits {
          gap: 18px;
        }
        .contact-cards-new {
          grid-template-columns: 1fr;
        }
        .footer-new .footer-grid {
          grid-template-columns: 1.4fr repeat(3, 1fr);
        }
      }
      @media (max-width: 760px) {
        .project-cta-wrap {
          padding: 36px 0 42px;
        }
        .project-cta {
          height: 690px;
          border-radius: 22px;
        }
        .project-cta::after {
          background: linear-gradient(
            180deg,
            rgba(3, 39, 82, 0.97),
            rgba(3, 39, 82, 0.78),
            rgba(3, 39, 82, 0.5)
          );
        }
        .project-cta-copy {
          left: 24px;
          right: 24px;
          top: 40px;
        }
        .project-cta-copy h2 {
          font-size: 35px;
        }
        .project-cta-actions {
          flex-wrap: wrap;
        }
        .project-cta-benefits {
          left: 24px;
          right: 24px;
          bottom: 36px;
          grid-template-columns: 1fr;
          gap: 18px;
        }
        .contact-section-new {
          padding: 42px 0;
        }
        .contact-heading-new h2 {
          font-size: 38px;
        }
        .contact-card-new {
          padding: 28px 22px;
        }
        .contact-card-top {
          grid-template-columns: 118px 1px 1fr;
          gap: 12px;
        }
        .contact-card-top .contact-logo {
          width: 112px;
        }
        .contact-card-title strong {
          font-size: 23px;
        }
        .contact-map-new {
          min-height: 440px;
        }
        .map-card-new {
          left: 30px;
          right: 30px;
        }
        .contact-quick-new {
          grid-template-columns: 1fr;
        }
        .quick-contact {
          border-right: 0;
          border-bottom: 1px solid #dce5ee;
        }
        .quick-contact:last-child {
          border-bottom: 0;
        }
        .footer-new .footer-grid {
          grid-template-columns: 1fr 1fr;
          gap: 28px;
        }
        .footer-new .copyright {
          display: block;
        }
      }
      /* 2026 content enhancement: reusable, backend-friendly blocks */
      .metrics-panel .metrics-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        padding-left: 24px;
        padding-right: 24px;
      }
      .metrics-panel .metric {
        padding: 0 20px;
        gap: 12px;
      }
      .metrics-panel .metric strong {
        font-size: 30px;
      }
      .metrics-panel .metric span {
        font-size: 12px;
      }
      .metrics-panel .metric:before {
        flex-basis: 38px;
        width: 38px;
        height: 38px;
      }
      .metrics-panel .metric:nth-child(5):before {
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='1.6'/%3E%3Cpath d='M3 12h18M12 3c3 3 3 15 0 18M12 3c-3 3-3 15 0 18' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E");
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='1.6'/%3E%3Cpath d='M3 12h18M12 3c3 3 3 15 0 18M12 3c-3 3-3 15 0 18' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E");
      }
      .product-card-primary {
        box-shadow:
          0 22px 58px rgba(18, 84, 151, 0.18),
          inset 0 0 0 2px rgba(20, 116, 222, 0.25);
      }
      .product-card-primary h3 {
        font-size: 43px;
      }
      .cloud-app-highlight {
        display: grid;
        grid-template-columns: 1.05fr 0.95fr;
        min-height: 430px;
        margin-top: 28px;
        overflow: hidden;
        border-radius: 28px;
        background: linear-gradient(
          125deg,
          #062f66 0,
          #0755a7 54%,
          #d7ecff 54%
        );
        box-shadow: 0 24px 64px rgba(9, 57, 111, 0.2);
      }
      .cloud-app-copy {
        padding: 58px 52px;
        color: #fff;
      }
      .cloud-app-copy .eyebrow {
        color: #78baff;
      }
      .cloud-app-copy h3 {
        margin: 12px 0 18px;
        font-size: 38px;
        line-height: 1.25;
      }
      .cloud-app-copy p {
        max-width: 660px;
        color: #dbeaff;
        font-size: 16px;
        line-height: 1.8;
      }
      .cloud-feature-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        margin: 24px 0;
      }
      .cloud-feature-grid span {
        padding: 10px 12px;
        border: 1px solid rgba(255, 255, 255, 0.22);
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.08);
        text-align: center;
        font-size: 13px;
      }
      .cloud-app-visual {
        min-height: 430px;
        background: url("assets/tu01/002_03.jpg") center/cover no-repeat;
      }
      .identity-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 18px;
      }
      .cms-responsive-picture {
        display: contents;
      }
      .identity-card {
        position: relative;
        min-height: 370px;
        overflow: hidden;
        border: 1px solid #d5e5f5;
        border-radius: 24px;
        background: #eaf4ff;
        box-shadow: 0 15px 40px rgba(23, 69, 116, 0.1);
      }
      .identity-card > img,
      .identity-card > .identity-picture img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .identity-card:after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
          90deg,
          rgba(248, 252, 255, 0.99) 0,
          rgba(248, 252, 255, 0.96) 46%,
          rgba(248, 252, 255, 0.58) 66%,
          rgba(248, 252, 255, 0.05) 88%
        );
      }
      .identity-card:before {
        display: none;
      }
      .identity-content {
        position: relative;
        z-index: 2;
        display: flex;
        width: 72%;
        height: 370px;
        box-sizing: border-box;
        flex-direction: column;
        align-items: flex-start;
        padding: 22px 0 24px 32px;
      }
      .identity-label {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 7px 13px;
        border-radius: 999px;
        background: #e2efff;
        color: #176ac3;
        font-size: 13px;
        font-weight: 700;
      }
      .identity-label:before {
        display: none;
      }
      .identity-label svg {
        width: 19px;
        height: 19px;
        flex: 0 0 19px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.9;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      .identity-content h3 {
        margin: 17px 0 0;
        color: var(--navy);
        font-size: 27px;
        line-height: 1.3;
      }
      .identity-content h3:after {
        content: "";
        display: block;
        width: 26px;
        height: 2px;
        margin-top: 10px;
        background: #1c78e6;
      }
      .identity-content p {
        margin: 12px 0 0;
        color: #60768d;
        font-size: 13px;
        line-height: 1.7;
      }
      .identity-content ul {
        margin: 15px 0 0;
        padding: 0;
        list-style: none;
        color: #345675;
        font-size: 13px;
        line-height: 1.9;
      }
      .identity-content li:before {
        content: "✓";
        display: inline-grid;
        place-items: center;
        width: 16px;
        height: 16px;
        margin-right: 8px;
        border-radius: 50%;
        background: #dcedff;
        color: #1776d8;
        font-size: 11px;
        font-weight: 800;
      }
      .identity-content a {
        margin-top: auto;
        color: #176ac3;
        font-size: 16px;
        font-weight: 700;
        text-decoration: none;
      }
      .purchase-panel {
        display: grid;
        grid-template-columns: 56px 1.4fr 1fr auto;
        gap: 24px;
        align-items: center;
        margin-top: 22px;
        padding: 28px 32px;
        border: 1px solid #f4c98f;
        border-radius: 20px;
        background: linear-gradient(110deg, #fff, #fff8ef);
        box-shadow: 0 12px 34px rgba(112, 71, 16, 0.08);
      }
      .purchase-icon {
        width: 52px;
        height: 52px;
        display: grid;
        place-items: center;
        border-radius: 14px;
        background: #fff1df;
      }
      .purchase-icon img {
        width: 36px;
        height: 36px;
        object-fit: contain;
      }
      .purchase-copy h3 {
        margin: 0 0 8px;
        color: var(--navy);
        font-size: 22px;
      }
      .purchase-copy p {
        margin: 0;
        color: #526980;
        font-size: 14px;
        font-weight: 600;
        line-height: 1.72;
      }
      .purchase-points {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
      }
      .purchase-points span {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        min-height: 42px;
        padding: 9px 12px;
        border: 1px solid #c5dcf2;
        border-radius: 10px;
        background: #eef6ff;
        color: #174f87;
        font-size: 14px;
        font-weight: 700;
        box-shadow: 0 4px 12px rgba(21, 86, 151, 0.06);
      }
      .purchase-points span::before {
        content: "✓";
        display: grid;
        place-items: center;
        width: 18px;
        height: 18px;
        flex: 0 0 18px;
        border-radius: 50%;
        background: #1671cf;
        color: #fff;
        font-size: 11px;
        font-weight: 900;
      }
      .purchase-panel > a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        padding: 0 20px;
        border: 1px solid #9fc2e6;
        border-radius: 999px;
        background: #f2f7fc;
        color: #164f88;
        font-weight: 700;
        text-decoration: none;
        white-space: nowrap;
        transition:
          background 0.2s ease,
          border-color 0.2s ease;
      }
      .purchase-panel > a:hover {
        border-color: #6d9fd2;
        background: #e7f1fb;
      }
      .project-proof-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        margin: 0 0 28px;
        border: 1px solid #d7e6f5;
        border-radius: 18px;
        background: #fff;
        box-shadow: 0 12px 34px rgba(28, 70, 112, 0.08);
      }
      .project-proof-grid > div {
        padding: 20px;
        text-align: center;
        border-right: 1px solid #e1ebf4;
      }
      .project-proof-grid > div:last-child {
        border-right: 0;
      }
      .project-proof-grid strong {
        display: block;
        color: #1268c8;
        font-size: 30px;
        line-height: 1.1;
      }
      .project-proof-grid span {
        display: block;
        margin-top: 7px;
        color: #60748a;
        font-size: 13px;
      }
      .floating-contact {
        position: fixed;
        z-index: 80;
        right: 18px;
        top: 50%;
        display: grid;
        gap: 7px;
        transform: translateY(-50%);
      }
      .floating-contact a,
      .floating-contact button {
        position: relative;
        width: 54px;
        height: 54px;
        display: grid;
        place-items: center;
        border: 0;
        border-radius: 10px;
        background: #0964bd;
        color: #fff;
        box-shadow: 0 9px 22px rgba(7, 59, 115, 0.22);
        cursor: pointer;
        transition:
          transform 0.2s ease,
          background 0.2s ease;
      }
      .floating-contact a:hover,
      .floating-contact button:hover {
        transform: translateX(-4px);
        background: #064f99;
      }
      .floating-contact svg {
        width: 26px;
        height: 26px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
      }
      .floating-contact span {
        position: absolute;
        right: 64px;
        padding: 7px 10px;
        border-radius: 7px;
        background: #073c75;
        color: #fff;
        font-size: 12px;
        white-space: nowrap;
        opacity: 0;
        pointer-events: none;
        transform: translateX(8px);
        transition: 0.2s;
      }
      .floating-contact a:hover span,
      .floating-contact button:hover span {
        opacity: 1;
        transform: none;
      }
      .floating-contact .to-top {
        background: #f39a19;
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 0.06em;
      }
      .floating-contact .to-top svg {
        width: 20px;
        height: 20px;
      }
      @media (max-width: 1200px) {
        .metrics-panel .metric:before {
          display: none;
        }
        .metrics-panel .metric {
          padding: 0 10px;
        }
        .metrics-panel .metric strong {
          font-size: 25px;
        }
        .identity-content {
          width: 84%;
          height: 370px;
          padding-left: 24px;
        }
      }
      @media (max-width: 1100px) and (min-width: 761px) {
        .identity-grid {
          grid-template-columns: 1fr;
        }
        .identity-card {
          min-height: 360px;
        }
        .identity-content {
          width: 58%;
          height: 360px;
          padding: 34px 0 30px 34px;
        }
      }
      @media (max-width: 760px) {
        .metrics-panel .metrics-grid {
          grid-template-columns: 1fr 1fr;
        }
        .metrics-panel .metric:nth-child(5) {
          grid-column: 1/3;
          border-top: 1px solid rgba(255, 255, 255, 0.17);
        }
        .product-card-primary h3 {
          font-size: 31px;
        }
        .cloud-app-highlight {
          grid-template-columns: 1fr;
          background: #063f83;
        }
        .cloud-app-copy {
          padding: 38px 24px;
        }
        .cloud-app-copy h3 {
          font-size: 30px;
        }
        .cloud-feature-grid {
          grid-template-columns: 1fr 1fr;
        }
        .cloud-app-visual {
          min-height: 280px;
        }
        .identity-grid {
          grid-template-columns: 1fr;
        }
        .identity-card {
          min-height: 420px;
        }
        .identity-content {
          width: 76%;
          height: 420px;
          padding: 30px 0 30px 24px;
        }
        .purchase-panel {
          grid-template-columns: 48px 1fr;
          padding: 24px 20px;
        }
        .purchase-points,
        .purchase-panel > a {
          grid-column: 1/3;
        }
        .project-proof-grid {
          grid-template-columns: 1fr 1fr;
        }
        .project-proof-grid > div:nth-child(2) {
          border-right: 0;
        }
        .project-proof-grid > div:nth-child(-n + 2) {
          border-bottom: 1px solid #e1ebf4;
        }
        .floating-contact {
          right: 8px;
          top: auto;
          bottom: 18px;
          transform: none;
        }
        .floating-contact a,
        .floating-contact button {
          width: 44px;
          height: 44px;
        }
        .floating-contact svg {
          width: 22px;
          height: 22px;
        }
        .floating-contact span {
          display: none;
        }
      }

      /* Mobile homepage hero: portrait artwork with an overlapping proof panel. */
      @media (max-width: 760px) {
        .hero {
          height: calc(100vw * 1672 / 941);
          min-height: 0;
          overflow: hidden;
          background: #eaf5ff;
        }
        .slide-bg {
          background-image: var(--mobile-bg);
          background-size: 100% auto;
          background-position: center top;
          background-repeat: no-repeat;
        }
        .slide::after {
          background: linear-gradient(
            180deg,
            rgba(235, 247, 255, 0.82) 0%,
            rgba(235, 247, 255, 0.42) 32%,
            rgba(235, 247, 255, 0.08) 58%,
            rgba(235, 247, 255, 0) 76%
          );
        }
        .hero-copy {
          width: calc(100% - 48px);
          height: auto;
          margin: 0 auto;
          padding-top: 98px;
          align-items: flex-start;
        }
        .hero .slide .hero-inner {
          width: 100%;
          margin: 0;
        }
        .hero .eyebrow {
          display: block;
          margin: 0 0 14px;
          color: #0758ad;
          font-size: 11px;
          font-weight: 850;
          letter-spacing: 0.16em;
        }
        .hero .slide h1 {
          margin: 0 0 14px;
          color: #073d77;
          font-size: clamp(31px, 8.5vw, 38px);
          line-height: 1.2;
          letter-spacing: -0.045em;
          white-space: normal;
          text-shadow: 0 2px 10px rgba(255, 255, 255, 0.45);
        }
        .hero .slide h1::after {
          display: none;
        }
        .hero .slide .sub {
          margin: 0 0 12px;
          color: #123f70;
          font-size: 14px;
          line-height: 1.55;
          font-weight: 750;
          text-shadow: 0 1px 8px rgba(255, 255, 255, 0.55);
        }
        .hero .slide .desc {
          max-width: 330px;
          margin: 0;
          color: #45627f;
          font-size: 12px;
          line-height: 1.9;
          text-shadow: 0 1px 7px rgba(255, 255, 255, 0.62);
        }
        .hero-metrics {
          display: none;
        }
        .hero-actions {
          display: flex;
          gap: 12px;
          margin-top: 24px;
        }
        .hero-actions .btn {
          flex: 0 1 auto;
          min-width: 0;
          height: 48px;
          padding: 0 20px;
          border-radius: 24px;
          font-size: 13px;
          white-space: nowrap;
        }
        .hero-actions .btn.primary {
          color: #fff;
          background: linear-gradient(135deg, #ff8b25, #ff6f16);
          box-shadow: 0 9px 22px rgba(245, 117, 26, 0.34);
        }
        .hero-actions .btn.ghost {
          color: #174a7d;
          border-color: rgba(25, 80, 133, 0.2);
          background: rgba(255, 255, 255, 0.8);
          box-shadow: 0 8px 20px rgba(20, 71, 120, 0.1);
        }
        .slide.active .slide-bg,
        .slide.active h1,
        .slide.active .sub,
        .slide.active .desc {
          animation: none;
          opacity: 1;
          transform: none;
        }
        .slider-nav {
          bottom: 16px;
          min-height: 48px;
          gap: 12px;
          padding: 6px 10px;
          border: 1px solid rgba(20, 75, 128, 0.14);
          background: rgba(255, 255, 255, 0.88);
          box-shadow: 0 10px 28px rgba(16, 62, 107, 0.14);
        }
        .slider-nav .slide-count {
          display: none;
        }
        .slider-nav .slide-arrow {
          display: grid;
          width: 36px;
          height: 36px;
          color: #0b4f96;
          background: transparent;
          box-shadow: none;
        }
        .slider-nav .dot {
          width: 22px;
          height: 3px;
        }
        .slider-nav .dot.active {
          width: 38px;
          background: #1688d4;
        }
        .metrics-panel {
          z-index: 10;
          width: 100%;
          margin: 0 auto;
        }
        .metrics-panel .metrics-grid,
        .metrics-panel .metrics-grid.reveal {
          width: 100%;
          padding: 18px 14px 20px;
          overflow: hidden;
          border: 1px solid rgba(94, 174, 241, 0.32);
          border-radius: 16px 16px 0 0;
          background: linear-gradient(145deg, #087bc7 0%, #075da8 38%, #073c78 100%);
          box-shadow: 0 18px 42px rgba(4, 48, 105, 0.3);
          transform: none;
          opacity: 1;
        }
        .metrics-panel .metric {
          min-height: 126px;
          padding: 16px 8px;
          flex-direction: column;
          gap: 9px;
          text-align: center;
        }
        .metrics-panel .metric:nth-child(n + 3) {
          border-bottom: 1px solid rgba(255, 255, 255, 0.17);
        }
        .metrics-panel .metric:nth-child(5) {
          min-height: 122px;
          border-right: 0;
          border-bottom: 0;
        }
        .metrics-panel .metric:before {
          display: block;
          flex: 0 0 38px;
          width: 38px;
          height: 38px;
          margin: 0;
          filter: drop-shadow(0 0 9px rgba(72, 195, 255, 0.65));
        }
        .metrics-panel .metric strong {
          font-size: clamp(25px, 7.2vw, 31px);
          line-height: 1;
          letter-spacing: -0.035em;
        }
        .metrics-panel .metric span {
          margin-top: 6px;
          color: #c6e4f8;
          font-size: 12px;
          line-height: 1.35;
        }
        .capability-section {
          padding-top: 66px;
        }
      }

      @media (max-width: 380px) {
        .hero {
          height: calc(100vw * 1672 / 941);
          min-height: 0;
        }
        .hero-copy {
          width: calc(100% - 40px);
          padding-top: 92px;
        }
        .hero-actions .btn {
          padding: 0 16px;
          font-size: 12px;
        }
      }

      /* Mobile capability mosaic: two compact cards plus one wide service card. */
      @media (max-width: 760px) {
        .capability-section {
          padding: 54px 0 64px;
          background: #fff;
        }
        .capability-section .container {
          width: calc(100% - 16px);
        }
        .capability-section .section-head {
          max-width: 380px;
          margin: 0 auto 26px;
          padding: 0 12px;
        }
        .capability-section .section-head .eyebrow {
          display: none;
        }
        .capability-section .section-head h2 {
          margin: 0;
          color: #0a3265;
          font-size: clamp(25px, 7vw, 30px);
          line-height: 1.28;
          letter-spacing: -0.04em;
        }
        .capability-section .section-head h2::after {
          display: block;
          width: 24px;
          height: 2px;
          margin: 12px auto 14px;
          border-radius: 2px;
          content: "";
          background: #1679da;
        }
        .capability-section .section-head .lead {
          max-width: 350px;
          color: #60738a;
          font-size: 14px;
          line-height: 1.8;
        }
        .cap-card-grid,
        .cap-card-grid.reveal {
          display: grid;
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 7px;
          opacity: 1;
          transform: none;
        }
        .cap-card,
        .cap-card:nth-child(n + 4) {
          position: relative;
          height: 224px;
          min-height: 224px;
          padding: 12px 10px;
          overflow: hidden;
          border: 1px solid #d6e7f7;
          border-radius: 8px;
          background: #edf7ff;
          box-shadow: 0 4px 12px rgba(25, 90, 151, 0.08);
          isolation: isolate;
        }
        .cap-card::after {
          z-index: 1;
          background: linear-gradient(
            180deg,
            rgba(247, 252, 255, 0.98) 0%,
            rgba(247, 252, 255, 0.92) 30%,
            rgba(247, 252, 255, 0.38) 54%,
            rgba(247, 252, 255, 0) 72%
          );
        }
        .cap-card header {
          display: grid;
          grid-template-columns: 18px 1fr;
          gap: 2px 6px;
          align-items: center;
        }
        .cap-card header > img {
          width: 17px;
          height: 17px;
        }
        .cap-card header span {
          color: #1568cc;
          font-size: 12px;
          font-weight: 800;
        }
        .cap-card h3 {
          grid-column: 1 / 3;
          margin: 1px 0 0;
          color: #0b3971;
          font-size: 17px;
          line-height: 1.25;
        }
        .cap-card > p {
          min-height: 0;
          margin: 5px 0 0;
          color: #52677d;
          font-size: 10px;
          line-height: 1.55;
        }
        .cap-card .cap-photo {
          position: absolute;
          z-index: 0;
          inset: 0;
          width: 100%;
          max-width: none;
          height: 100%;
          margin: 0;
          object-fit: cover;
          object-position: center 47%;
          background: #edf7ff;
        }
        .cap-card:nth-child(5) {
          grid-column: 1 / 3;
          height: 148px;
          min-height: 148px;
        }
        .cap-card:nth-child(5)::after {
          background: linear-gradient(
            90deg,
            rgba(247, 252, 255, 0.99) 0%,
            rgba(247, 252, 255, 0.92) 34%,
            rgba(247, 252, 255, 0.28) 62%,
            rgba(247, 252, 255, 0) 82%
          );
        }
        .cap-card:nth-child(5) header,
        .cap-card:nth-child(5) > p {
          width: 48%;
        }
        .cap-card:nth-child(5) .cap-photo {
          object-position: center 48%;
        }
        .cap-card:hover,
        .cap-card:hover .cap-photo {
          transform: none;
        }
        .service-banner {
          height: 230px;
          min-height: 230px;
          margin-top: 22px;
          border-radius: 10px;
        }
        .service-banner .service-bg {
          object-fit: cover;
          object-position: 68% center;
        }
        .service-banner::after {
          background: linear-gradient(
            90deg,
            rgba(3, 46, 96, 0.98) 0%,
            rgba(3, 48, 99, 0.88) 48%,
            rgba(3, 48, 99, 0.18) 100%
          );
        }
        .service-banner .service-intro {
          left: 22px;
          right: auto;
          top: 20px;
          width: 64%;
        }
        .service-banner .service-intro small {
          font-size: 9px;
        }
        .service-banner .service-intro h3 {
          margin: 9px 0 8px;
          font-size: 28px;
          line-height: 1.25;
        }
        .service-banner .service-intro p {
          margin-bottom: 14px;
          font-size: 10px;
          white-space: nowrap;
        }
        .service-banner .service-intro .btn {
          min-height: 44px;
          height: 44px;
          padding: 0 20px;
          font-size: 12px;
        }
        .service-banner .service-points {
          display: none;
        }
        .cap-card:nth-child(-n + 4) {
          height: 194px;
          min-height: 194px;
          padding: 16px 14px;
          background: linear-gradient(145deg, #f5fbff, #eaf5ff);
        }
        .cap-card:nth-child(-n + 4)::after,
        .cap-card:nth-child(-n + 4) .cap-photo {
          display: none;
        }
        .cap-card h3 {
          font-size: 19px;
        }
        .cap-card > p {
          margin-top: 8px;
          font-size: 14px;
          line-height: 1.7;
        }
        .cap-card:nth-child(-n + 4) h3 {
          font-size: 20px;
        }
        .cap-card:nth-child(-n + 4) > p {
          font-size: 14px;
        }
        .capability-section {
          padding-bottom: 24px;
        }
        .product-story {
          padding-top: 34px;
        }
        .product-story .container {
          width: calc(100% - 28px);
        }
        .product-story .section-head {
          margin-bottom: 26px;
        }
        .product-story .section-head h2 {
          font-size: clamp(28px, 7.8vw, 34px);
        }
        .product-story .section-head .lead {
          font-size: 12px;
          line-height: 1.7;
        }
        .product-showcase {
          display: grid;
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 9px;
        }
        .product-card,
        .product-card:nth-child(n),
        .product-card-content,
        .product-card.is-right .product-card-content {
          width: 100%;
          height: 300px;
          min-height: 300px;
        }
        .product-card {
          border-radius: 12px;
          background-image: var(--mobile-bg);
          background-color: #f5faff;
          background-size: cover;
          background-repeat: no-repeat;
          box-shadow: 0 7px 20px rgba(26, 82, 137, 0.1);
        }
        .product-card:nth-child(1) { background-position: 88% bottom; }
        .product-card:nth-child(2) { background-position: 12% bottom; }
        .product-card:nth-child(3) { background-position: 91% bottom; }
        .product-card:nth-child(4) { background-position: 10% bottom; }
        .product-card::before {
          background: linear-gradient(
            180deg,
            rgba(255,255,255,.99) 0%,
            rgba(248,252,255,.96) 48%,
            rgba(248,252,255,.2) 68%,
            rgba(248,252,255,0) 82%
          );
        }
        .product-card-content,
        .product-card.is-right .product-card-content {
          margin: 0;
          padding: 14px 12px 112px;
          justify-content: flex-start;
        }
        .product-card-number {
          margin: 0 0 5px;
          font-size: 29px;
          line-height: 1;
        }
        .product-card h3,
        .product-card-primary h3 {
          margin: 0 0 7px;
          font-size: 18px;
          line-height: 1.25;
          white-space: nowrap;
        }
        .product-card-desc {
          display: -webkit-box;
          max-width: none;
          margin: 0;
          overflow: hidden;
          color: #546b82;
          font-size: 11px;
          line-height: 1.55;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
        }
        .product-tags {
          gap: 5px;
          margin: 9px 0 0;
        }
        .product-tag {
          padding: 4px 7px;
          font-size: 9px;
        }
        .product-tag::before {
          display: none;
        }
        .product-tag:nth-child(n + 3) {
          display: none;
        }
        .product-card-link {
          position: absolute;
          z-index: 3;
          left: 12px;
          bottom: 9px;
          width: 32px;
          height: 32px;
          display: grid;
          place-items: center;
          overflow: hidden;
          color: transparent;
          font-size: 0;
        }
        .product-card-link span {
          color: #1576db;
          font-size: 18px;
        }
        .product-showcase {
          grid-template-columns: 1fr;
          gap: 14px;
        }
        .product-card,
        .product-card:nth-child(n),
        .product-card-content,
        .product-card.is-right .product-card-content {
          height: 400px;
          min-height: 400px;
        }
        .product-card {
          border-radius: 16px;
          background-size: auto 52%;
        }
        .product-card-content,
        .product-card.is-right .product-card-content {
          padding: 22px 20px 190px;
        }
        .product-card-number {
          margin-bottom: 7px;
          font-size: 34px;
        }
        .product-card h3,
        .product-card-primary h3 {
          margin-bottom: 9px;
          font-size: 23px;
        }
        .product-card-desc {
          font-size: 14px;
          line-height: 1.65;
          -webkit-line-clamp: 3;
        }
        .product-tags {
          gap: 7px;
          margin-top: 13px;
        }
        .product-tag {
          padding: 6px 10px;
          font-size: 11px;
        }
        .product-card-link {
          left: 18px;
          bottom: 13px;
        }
        .product-story {
          padding-bottom: 22px;
        }
        .why-section {
          padding-top: 34px;
          padding-bottom: 54px;
        }
        .why-section .section-head {
          margin-bottom: 26px;
        }
        .why-section .section-head h2 {
          font-size: 32px;
          line-height: 1.25;
        }
        .why-section .section-head::after {
          margin-top: 14px;
        }
        .why-cards {
          gap: 11px;
        }
        .why-card {
          min-height: 0;
          display: grid;
          grid-template-columns: auto minmax(0, 1fr) auto;
          grid-template-rows: auto auto;
          align-items: center;
          column-gap: 11px;
          row-gap: 10px;
          padding: 20px 20px 18px;
          border-radius: 14px;
        }
        .why-card-top {
          display: contents;
          margin: 0;
        }
        .why-card-number {
          grid-column: 1;
          grid-row: 1;
          font-size: 34px;
        }
        .why-card-icon {
          grid-column: 3;
          grid-row: 1;
          width: 38px;
          height: 38px;
        }
        .why-card h3 {
          grid-column: 2;
          grid-row: 1;
          margin: 0;
          font-size: 19px;
          line-height: 1.3;
        }
        .why-card p {
          grid-column: 1 / 4;
          grid-row: 2;
          font-size: 14px;
          line-height: 1.7;
        }
        .solution-mosaic {
          grid-template-columns: repeat(2, minmax(0, 1fr));
          grid-template-rows: repeat(4, 165px);
          gap: 10px;
        }
        .solution-card:nth-child(n),
        .solution-card:first-child,
        .solution-card:nth-child(7),
        .solution-card:nth-child(8) {
          grid-column: auto;
          grid-row: auto;
        }
        .solution-card:first-child .solution-card-copy,
        .solution-card-copy {
          left: 13px;
          right: 10px;
          bottom: 12px;
        }
        .solution-card:first-child .solution-card-copy b,
        .solution-card-copy b {
          font-size: 16px;
        }
        .solution-card-copy p {
          display: none;
        }
        .retrofit-visual {
          height: 160px;
          border-radius: 14px;
        }
        .retrofit-side-label {
          left: 10px;
          bottom: 9px;
          padding: 6px 10px;
        }
        .retrofit-side-label.is-after {
          right: 10px;
        }
        .retrofit-side-label b {
          margin: 0;
          font-size: 15px;
        }

        /* Compact mobile retrofit / BOT information panels */
        .retrofit-panels {
          gap: 12px;
          margin-top: 14px;
        }
        .retrofit-panel {
          padding: 16px 14px 14px;
          border-radius: 14px;
        }
        .retrofit-panel-head {
          display: grid;
          grid-template-columns: 30px minmax(0, 1fr) auto;
          gap: 8px;
          flex-wrap: nowrap;
        }
        .retrofit-panel-head img {
          width: 28px;
          height: 28px;
        }
        .retrofit-panel-head h3 {
          font-size: 20px;
          line-height: 1.2;
          white-space: nowrap;
        }
        .retrofit-badge {
          margin: 0;
          padding: 4px 7px;
          font-size: 10px;
          white-space: nowrap;
        }
        .retrofit-panel > p {
          margin: 9px 0 11px;
          font-size: 13px;
          line-height: 1.55;
        }
        .retrofit-steps {
          grid-template-columns: repeat(3, minmax(0, 1fr));
          gap: 6px;
        }
        .retrofit-panel.bot .retrofit-steps {
          grid-template-columns: repeat(4, minmax(0, 1fr));
        }
        .retrofit-step {
          min-height: 62px;
          padding: 7px 2px;
          border-radius: 9px;
          font-size: 11px;
        }
        .retrofit-step img {
          width: 25px;
          height: 25px;
          margin-bottom: 4px;
        }
        .retrofit-saving {
          min-height: 42px;
          grid-column: 1 / -1;
          flex-direction: row;
          gap: 8px;
          border-radius: 9px;
          background: #fff7ec;
        }
        .retrofit-saving strong {
          font-size: 25px;
        }
        .retrofit-saving span {
          margin: 0;
          font-size: 11px;
        }
        .retrofit-link {
          margin-top: 11px;
          font-size: 13px;
        }

        /* Mobile readability baseline: compact layouts must not rely on tiny text. */
        .hero .eyebrow {
          font-size: 13px;
        }
        .hero .slide .desc,
        .hero-actions .btn,
        .metrics-panel .metric span,
        .cap-card header span,
        .cap-card > p,
        .capability-section .section-head .lead,
        .service-banner .service-intro p,
        .service-banner .service-intro .btn,
        .product-story .section-head .lead,
        .product-card-desc,
        .why-card p,
        .retrofit-panel > p,
        .retrofit-step,
        .retrofit-saving span,
        .retrofit-link {
          font-size: 14px;
        }
        .service-banner .service-intro small,
        .product-tag,
        .retrofit-badge {
          font-size: 13px;
        }
        .retrofit-step {
          min-height: 70px;
          line-height: 1.35;
        }
        .retrofit-saving {
          min-height: 48px;
        }

        /* Compact direct-purchase card with readable type. */
        .purchase-panel {
          grid-template-columns: 46px minmax(0, 1fr);
          gap: 10px 12px;
          margin-top: 12px;
          padding: 16px 14px;
          border-radius: 14px;
        }
        .purchase-icon {
          width: 46px;
          height: 46px;
          border-radius: 12px;
        }
        .purchase-icon img {
          width: 30px;
          height: 30px;
        }
        .purchase-copy h3 {
          margin-bottom: 6px;
          font-size: 20px;
          line-height: 1.4;
        }
        .purchase-copy p {
          font-size: 14px;
          line-height: 1.65;
        }
        .purchase-points {
          grid-column: 1 / 3;
          grid-template-columns: repeat(4, minmax(0, 1fr));
          gap: 6px;
        }
        .purchase-points span {
          min-height: 42px;
          padding: 7px 2px;
          gap: 0;
          border-radius: 8px;
          font-size: 14px;
          white-space: nowrap;
        }
        .purchase-points span::before {
          display: none;
        }
        .purchase-panel > a {
          grid-column: 1 / 3;
          min-height: 46px;
          margin-top: 2px;
          font-size: 14px;
        }

        /* Four-item mobile statistics panel. Overseas coverage stays on desktop. */
        .metrics-panel {
          width: calc(100% - 32px);
          margin: 18px auto 0;
        }
        .metrics-panel .metrics-grid,
        .metrics-panel .metrics-grid.reveal {
          grid-template-columns: repeat(2, minmax(0, 1fr));
          padding: 16px;
          border-radius: 18px;
        }
        .metrics-panel .metric {
          min-height: 142px;
          padding: 18px 8px;
        }
        .metrics-panel .metric:nth-child(1),
        .metrics-panel .metric:nth-child(2) {
          border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        }
        .metrics-panel .metric:nth-child(3),
        .metrics-panel .metric:nth-child(4) {
          border-bottom: 0;
        }
        .metrics-panel .metric:nth-child(odd) {
          border-right: 1px solid rgba(255, 255, 255, 0.2);
        }
        .metrics-panel .metric:nth-child(even) {
          border-right: 0;
        }
        .metrics-panel .metric:nth-child(5) {
          display: none;
        }
        .metrics-panel .metric:before {
          flex-basis: 42px;
          width: 42px;
          height: 42px;
        }
        .metrics-panel .metric strong {
          font-size: clamp(28px, 8vw, 34px);
        }
        .metrics-panel .metric span {
          font-size: 14px;
        }

        /* Unified mobile section rhythm: avoid doubled whitespace between modules. */
        .capability-section {
          padding-top: 42px;
          padding-bottom: 28px;
        }
        .product-story {
          padding-top: 36px;
          padding-bottom: 30px;
        }
        .why-section {
          padding-top: 38px;
          padding-bottom: 32px;
        }
        .solutions-section {
          padding-top: 40px;
          padding-bottom: 34px;
        }
        .retrofit-section {
          padding-top: 40px;
          padding-bottom: 32px;
        }
        .cooperation-section {
          padding-top: 38px;
          padding-bottom: 32px;
        }
        .projects-section {
          padding-top: 40px;
          padding-bottom: 36px;
        }
        .company-section,
        .trust-section,
        .news-section-new {
          padding-top: 40px;
          padding-bottom: 36px;
        }
        .faq-section-new {
          padding-top: 40px;
          padding-bottom: 44px;
        }
        .project-cta-wrap {
          padding-top: 32px;
          padding-bottom: 36px;
        }
        .contact-section-new {
          padding-top: 38px;
          padding-bottom: 38px;
        }
        .capability-section .section-head,
        .product-story .section-head,
        .why-section .section-head,
        .solutions-section .section-head,
        .retrofit-section .section-head,
        .cooperation-section .section-head,
        .projects-section .section-head {
          margin-bottom: 24px;
        }

        /* Compact mobile audience entrances: details remain available after entry. */
        .identity-grid {
          gap: 12px;
        }
        .identity-card {
          min-height: 220px;
          height: 220px;
          border-radius: 16px;
        }
        .identity-card > img,
        .identity-card > .identity-picture img {
          object-position: 68% center;
        }
        .identity-card::after {
          background: linear-gradient(
            90deg,
            rgba(248, 252, 255, 1) 0%,
            rgba(248, 252, 255, 0.98) 45%,
            rgba(248, 252, 255, 0.75) 66%,
            rgba(248, 252, 255, 0.08) 100%
          );
        }
        .identity-content {
          width: 72%;
          height: 220px;
          padding: 16px 0 16px 18px;
        }
        .identity-label {
          padding: 5px 10px;
          font-size: 14px;
        }
        .identity-label::before {
          display: none;
        }
        .identity-label svg {
          width: 17px;
          height: 17px;
          flex-basis: 17px;
        }
        .identity-content h3 {
          margin-top: 10px;
          font-size: 21px;
          line-height: 1.3;
        }
        .identity-content h3::after {
          margin-top: 6px;
        }
        .identity-content p {
          display: -webkit-box;
          margin-top: 8px;
          overflow: hidden;
          font-size: 14px;
          line-height: 1.55;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
        }
        .identity-content ul {
          display: none;
        }
        .identity-content a {
          margin-top: auto;
          font-size: 14px;
        }

        /* Compact project proof heading and statistics. */
        .projects-section .section-head {
          margin-bottom: 18px;
        }
        .projects-section .section-head .eyebrow {
          margin-bottom: 10px;
        }
        .projects-section .section-head h2 {
          font-size: 30px;
          line-height: 1.25;
        }
        .projects-section .section-head .lead {
          margin-top: 12px;
          font-size: 14px;
          line-height: 1.6;
        }
        .projects-section .section-head::after {
          margin-top: 12px;
        }
        .project-proof-grid {
          margin-bottom: 18px;
          border-radius: 14px;
        }
        .project-proof-grid > div {
          min-height: 76px;
          padding: 12px 6px;
        }
        .project-proof-grid strong {
          font-size: 27px;
        }
        .project-proof-grid span {
          margin-top: 5px;
          font-size: 14px;
          line-height: 1.35;
        }

        /* Compact mobile news feature and list. */
        .news-head {
          margin-bottom: 20px;
        }
        .news-layout-new {
          gap: 12px;
        }
        .news-feature {
          min-height: 240px;
          height: 240px;
          border-radius: 16px;
        }
        .news-feature::after {
          inset: 28% 0 0;
        }
        .news-feature-copy {
          left: 18px;
          right: 18px;
          bottom: 16px;
        }
        .news-tag {
          padding: 5px 10px;
          font-size: 14px;
        }
        .news-feature h3 {
          display: -webkit-box;
          margin: 9px 0 5px;
          overflow: hidden;
          font-size: 20px;
          line-height: 1.35;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
        }
        .news-feature time {
          font-size: 14px;
        }
        .news-list-new {
          padding: 2px 14px;
          border-radius: 16px;
        }
        .news-row-new {
          min-height: 74px;
          grid-template-columns: minmax(0, 1fr) 24px;
        }
        .news-row-new .category,
        .news-row-new .news-meta .category,
        .news-row-new time,
        .news-row-new .news-meta time {
          font-size: 13px;
        }
        .news-row-new h3 {
          margin-top: 4px;
          font-size: 15px;
          line-height: 1.4;
        }
        .news-row-new .arrow {
          font-size: 21px;
        }
        .more-news {
          margin-top: 16px;
          padding: 10px 22px;
          font-size: 14px;
        }

        /* Compact mobile project CTA with three benefits in one row. */
        .project-cta {
          height: 430px;
          border-radius: 18px;
        }
        .project-cta > img {
          object-position: 62% center;
        }
        .project-cta-copy {
          left: 22px;
          right: 22px;
          top: 26px;
        }
        .project-cta-copy h2 {
          margin-bottom: 10px;
          font-size: 29px;
          line-height: 1.25;
        }
        .project-cta-copy > p {
          font-size: 14px;
          line-height: 1.65;
        }
        .project-cta-actions {
          gap: 10px;
          margin-top: 18px;
          flex-wrap: nowrap;
        }
        .project-cta-actions .btn {
          min-width: 0;
          height: 46px;
          padding: 0 18px;
          font-size: 14px;
        }
        .project-cta-benefits {
          left: 16px;
          right: 16px;
          bottom: 20px;
          grid-template-columns: repeat(3, minmax(0, 1fr));
          gap: 8px;
        }
        .project-benefit {
          display: flex;
          max-width: none;
          flex-direction: column;
          gap: 7px;
          text-align: center;
        }
        .project-benefit img {
          width: 42px;
          height: 42px;
          padding: 9px;
        }
        .project-benefit b {
          font-size: 14px;
        }
        .project-benefit span {
          display: none;
        }

        /* Final mobile homepage audit: readable type, compact rhythm, usable controls. */
        main .eyebrow,
        .trust-head .eyebrow,
        .news-head .eyebrow,
        .faq-copy-head .eyebrow,
        .contact-heading-new .eyebrow {
          font-size: 13px;
          line-height: 1.4;
        }
        .section-head .lead,
        .trust-head p,
        .news-head p,
        .faq-copy-head p,
        .company-copy p {
          font-size: 14px;
          line-height: 1.65;
        }
        main .btn,
        main button,
        .more-news {
          min-height: 44px;
          touch-action: manipulation;
        }
        .hero-copy {
          padding-top: 88px;
        }
        .hero .slide .desc {
          line-height: 1.65;
        }
        .hero-actions {
          margin-top: 18px;
        }
        .slider-nav {
          bottom: 12px;
        }
        .product-card,
        .product-card:nth-child(n),
        .product-card-content,
        .product-card.is-right .product-card-content {
          height: 370px;
          min-height: 370px;
        }
        .product-card-content,
        .product-card.is-right .product-card-content {
          padding-bottom: 170px;
        }
        .project-showcase {
          grid-template-rows: 240px repeat(2, 145px);
        }
        .company-intro {
          gap: 22px;
        }
        .company-copy h2 {
          margin: 14px 0 14px;
          font-size: 30px;
          line-height: 1.35;
        }
        .company-copy h2 .company-founded {
          margin-top: 5px;
        }
        .company-copy p {
          margin-bottom: 18px;
        }
        .company-timeline-v2 {
          margin-top: 28px;
          padding-top: 18px;
          padding-bottom: 10px;
        }
        .timeline-event {
          min-height: 68px;
        }
        .timeline-event-text {
          font-size: 14px;
        }
        .trust-head,
        .faq-copy-head,
        .contact-heading-new {
          margin-bottom: 20px;
        }
        .trust-head h2,
        .news-head h2,
        .faq-copy-head h2,
        .contact-heading-new h2 {
          font-size: 30px;
          line-height: 1.25;
        }
        .trust-card {
          padding: 14px 8px 16px;
          border-radius: 14px;
        }
        .trust-card img {
          width: 68px;
          height: 68px;
          margin-bottom: 9px;
        }
        .trust-card h3 {
          margin-bottom: 5px;
          font-size: 15px;
        }
        .trust-card p {
          font-size: 14px;
          line-height: 1.45;
        }
        .faq-section-new .faq-list {
          gap: 8px;
        }
        .faq-section-new .faq-q {
          min-height: 58px;
          padding: 10px;
          font-size: 16px;
        }
        .faq-section-new .faq-a,
        .faq-section-new .faq-item.open .faq-a {
          font-size: 14px;
          line-height: 1.65;
        }
        .contact-cards-new {
          gap: 14px;
        }
        .contact-card-new,
        .contact-map-new {
          min-height: 0;
          border-radius: 16px;
        }
        .contact-card-new {
          padding: 20px 18px;
        }
        .contact-card-new h3 {
          margin: 16px 0 18px;
          font-size: 21px;
        }
        .contact-info-new {
          gap: 12px;
        }
        .contact-info-row small,
        .quick-contact small,
        .footer-new .footer-intro {
          font-size: 14px;
        }
        .contact-map-new {
          height: 320px;
          min-height: 320px;
          padding: 10px;
        }
        .map-card-new {
          left: 20px;
          right: 20px;
          bottom: 18px;
          padding: 14px 16px;
          border-radius: 14px;
        }
        .map-card-new h3 {
          font-size: 20px;
        }
        .map-card-new p,
        .map-card-new a {
          font-size: 14px;
        }
        .contact-quick-new {
          margin-top: 14px;
          border-radius: 14px;
        }
        .quick-contact {
          min-height: 68px;
          padding: 12px 18px;
        }
      }

      /* Mobile capability list: four compact rows, one item per row. */
      @media (max-width: 760px) {
        main h2 {
          font-size: 23px !important;
          line-height: 1.3 !important;
          letter-spacing: -0.035em !important;
        }
        .capability-section .section-head {
          margin-bottom: 18px;
          padding: 0 4px;
        }
        .capability-section .section-head h2 {
          white-space: nowrap;
          font-size: 23px !important;
          line-height: 1.2;
          letter-spacing: -0.055em;
        }
        .capability-section .section-head h2::after {
          margin-top: 9px;
          margin-bottom: 10px;
        }
        .cap-card-grid,
        .cap-card-grid.reveal {
          grid-template-columns: minmax(0, 1fr);
          gap: 8px;
        }
        .cap-card:nth-child(-n + 4) {
          height: auto;
          min-height: 0;
          padding: 12px 14px 11px;
          border-radius: 12px;
        }
        .cap-card:nth-child(-n + 4) header {
          display: flex;
          gap: 7px;
          align-items: center;
        }
        .cap-card:nth-child(-n + 4) header > img {
          flex: 0 0 18px;
          width: 18px;
          height: 18px;
        }
        .cap-card:nth-child(-n + 4) header span {
          flex: 0 0 auto;
          font-size: 14px;
        }
        .cap-card:nth-child(-n + 4) h3 {
          margin: 0 0 0 5px;
          font-size: 20px;
          line-height: 1.25;
        }
        .cap-card:nth-child(-n + 4) > p {
          margin: 6px 0 0;
          font-size: 14px;
          line-height: 1.5;
        }
        .cap-card:nth-child(5) {
          display: none;
        }

        /* Keep carousel indicators from inheriting the 44px mobile tap height. */
        .slider-nav .dot,
        .slider-nav .dot.active {
          display: block;
          min-width: 0;
          min-height: 3px;
          height: 3px;
          padding: 0;
          border: 0;
          border-radius: 3px;
          appearance: none;
        }
        .slider-nav .dot {
          width: 18px;
        }
        .slider-nav .dot.active {
          width: 32px;
        }
      }

      /* Only the smaller slider copy gets a light readability backdrop. */
      @media (min-width: 761px) {
        .hero .slide .sub,
        .hero .slide .desc {
          box-sizing: border-box;
          width: fit-content;
          padding: 5px 12px;
          border-radius: 8px;
          background: rgba(255, 255, 255, .30);
          backdrop-filter: blur(5px);
          -webkit-backdrop-filter: blur(5px);
        }
      }

      /* Keep the whitespace above every homepage module heading consistent. */
      .capability-section,
      .product-story,
      .why-section,
      .solutions-section,
      .retrofit-section,
      .cooperation-section,
      .projects-section,
      .company-section,
      .trust-section,
      .news-section-new,
      .faq-section-new,
      .project-cta-wrap,
      .contact-section-new {
        padding-top: 28px;
      }
      @media (max-width: 760px) {
        .capability-section,
        .product-story,
        .why-section,
        .solutions-section,
        .retrofit-section,
        .cooperation-section,
        .projects-section,
        .company-section,
        .trust-section,
        .news-section-new,
        .faq-section-new,
        .project-cta-wrap,
        .contact-section-new {
          padding-top: 24px;
        }
      }

      @media (max-width: 760px) {
        .product-card { background-size: auto 52%; }
        .product-card-heading {
          gap: 12px;
          margin-bottom: 10px;
        }
        .product-card-heading .product-card-number,
        .product-card-heading h3 {
          margin: 0;
        }
      }
/* Homepage news lead image: show the complete source image by stretching it to the card. */
.news-feature > img,
.news-feature > .news-slide-image {
  width: 100%;
  height: 100%;
  object-fit: fill !important;
}
@media(max-width:680px){
  .metrics-panel .metrics-grid,.metrics-panel .metrics-grid.reveal{padding:8px}
  .metrics-panel .metric{min-height:82px;padding:12px 14px;gap:10px;align-items:center;flex-direction:row;justify-content:flex-start;text-align:left}
  .metrics-panel .metric:before{display:block;flex:0 0 32px;width:32px;height:32px}
  .metrics-panel .metric strong{font-size:29px;line-height:1}
  .metrics-panel .metric span{margin-top:3px;font-size:12px;line-height:1.25}
}

/* Match 320px-class phones without changing the established tablet/mobile layout. */
@media(max-width:360px){
  .hero{min-height:620px}
  .hero-copy{padding:76px 12px 84px}
  .hero-inner{max-width:100%}
  .hero .eyebrow{font-size:11px;letter-spacing:.12em}
  .hero h1{font-size:28px!important;line-height:1.2!important}
  .hero .sub{font-size:14px;line-height:1.55}
  .hero .desc{font-size:13px;line-height:1.6}
  .hero-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  .hero-metrics span{min-width:0;padding:8px 6px;font-size:12px;white-space:normal}
  .hero-actions{display:grid;grid-template-columns:1fr;gap:9px}
  .hero-actions .btn{width:100%;box-sizing:border-box}
  .slider-nav{right:12px;left:12px;width:auto;justify-content:center;transform:none}
  .company-timeline-v2{right:auto;left:auto;width:100%;max-width:100%;margin-right:0;margin-left:0;box-sizing:border-box}
  .contact-card-new{padding-right:14px;padding-left:14px}
  .contact-info-row{width:100%;min-width:0;box-sizing:border-box;gap:10px}
  .contact-info-row>div{min-width:0;max-width:100%}
  .contact-info-row b,.contact-info-row small{width:auto;max-width:100%;overflow-wrap:anywhere;word-break:break-word}
  .contact-map-new{height:280px;min-height:280px}
  .map-card-new{right:12px;left:12px}
  .quick-contact{padding-right:12px;padding-left:12px}
}

@media(max-width:359px){
  .hero h1{font-size:25px!important}
  .hero .sub{font-size:13px}
  .hero .desc,.hero-metrics span{font-size:12px}
  .hero-actions .btn{font-size:13px}
  .section-head .eyebrow,.news-head .eyebrow,.faq-copy-head .eyebrow,.contact-heading-new .eyebrow{font-size:11px!important}
  .section-head .lead,.news-head p,.faq-copy-head p,.company-copy p{font-size:13px!important}
  .cap-card:nth-child(-n + 4) header span,.cap-card:nth-child(-n + 4)>p,.identity-content p,.identity-content a{font-size:12px!important}
  .cap-card:nth-child(-n + 4) h3,.identity-content h3{font-size:18px!important}
  .metrics-panel .metric strong{font-size:25px}
  .metrics-panel .metric span{font-size:11px}
}


/* Hide retrofit badges only below 320px. */
@media(max-width:379px){.retrofit-badge{display:none}.purchase-copy h3{font-size:17px}.purchase-copy p{font-size:12px;line-height:1.55}.purchase-points span{font-size:12px}.purchase-panel>a{font-size:12px}}


/* Responsive product headings: retain one line without overflowing the copy area. */
.product-card-heading { container-type: inline-size; }
.product-card-heading h3 { white-space: nowrap; }
@media (min-width: 761px) {
  .product-card-heading h3 { font-size: clamp(18px, 8.5cqw, 38px); }
  .product-card-primary .product-card-heading h3 { font-size: clamp(18px, 8.5cqw, 43px); }
}


/* Responsive product headings: retain one line without overflowing the copy area. */
.product-card-heading { container-type: inline-size; }
.product-card-heading h3 { white-space: nowrap; }
@media (min-width: 761px) {
  .product-card-heading h3 { font-size: clamp(18px, 8.5cqw, 38px); }
  .product-card-primary .product-card-heading h3 { font-size: clamp(16px, 7.2cqw, 43px); }
}