:root {
        --red: #e3262e;
        --red-dark: #b71920;
        --blue: #0b347e;
        --navy: #08285f;
        --ink: #131b2b;
        --muted: #667085;
        --pale: #f4f7fb;
        --line: #e5eaf2;
        --white: #fff;
        --radius: 20px;
        --shadow: 0 18px 55px rgba(16, 31, 58, 0.1);
      }
      * {
        box-sizing: border-box;
      }
      html {
        scroll-behavior: smooth;
        scroll-padding-top: 84px;
      }
      body {
        margin: 0;
        font-family:
          Inter,
          ui-sans-serif,
          system-ui,
          -apple-system,
          BlinkMacSystemFont,
          "Segoe UI",
          sans-serif;
        color: var(--ink);
        background: #fff;
        line-height: 1.6;
      }
      a {
        color: inherit;
        text-decoration: none;
      }
      .container {
        width: min(1160px, calc(100% - 44px));
        margin: 0 auto;
      }
      .site-header {
        height: 88px;
        background: rgba(255, 255, 255, 0.96);
        border-bottom: 1px solid rgba(229, 234, 242, 0.85);
        position: sticky;
        top: 0;
        z-index: 20;
        backdrop-filter: blur(16px);
      }
      .nav-wrap {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .brand {
        display: flex;
        align-items: center;
        gap: 10px;
        color: var(--navy);
        line-height: 1;
      }
      .brand-logo {
          display: block;
          width: auto;
          height: 150px;
          max-height: 180px;
          object-fit: contain;
          border-radius: 0;
          box-shadow: none;
      }
      .footer-logo {
        height: 150px;
        max-height: 150px;
      }
      .brand b {
        display: block;
        font-size: 21px;
        letter-spacing: 1.8px;
        font-weight: 900;
      }
      .brand small {
        display: block;
        font-size: 9px;
        letter-spacing: 3.5px;
        font-weight: 800;
        margin-top: 5px;
      }
      .nav-links {
        display: flex;
        align-items: center;
        gap: 34px;
        font-size: 13px;
        font-weight: 700;
        color: #414c5e;
      }
      .nav-links > a:not(.nav-cta):hover {
        color: var(--red);
      }
      .nav-cta {
        background: var(--blue);
        color: #fff;
        padding: 13px 18px;
        border-radius: 8px;
        box-shadow: 0 8px 18px #0b347e26;
      }
      .nav-cta span,
      .btn span {
        padding-left: 12px;
      }
      .menu-toggle {
        display: none;
        background: none;
        border: 0;
        font-size: 26px;
      }
      .hero {
        position: relative;
        overflow: hidden;
        background:
          radial-gradient(ellipse at 82% 35%, #163f83 0%, transparent 39%),
          linear-gradient(115deg, #0b1220 0%, #101d36 54%, #0b1220 100%);
        color: #fff;
        padding: 94px 0 0;
      }
      .hero:before {
        content: "";
        position: absolute;
        inset: 0;
        background-image:
          linear-gradient(#ffffff08 1px, transparent 1px),
          linear-gradient(90deg, #ffffff08 1px, transparent 1px);
        background-size: 48px 48px;
        mask-image: linear-gradient(90deg, transparent, #000);
      }
      .hero-glow {
        position: absolute;
        width: 500px;
        height: 500px;
        border-radius: 50%;
        right: -180px;
        top: -190px;
        background: #0b347e2e;
        filter: blur(40px);
      }
      .hero-grid {
        position: relative;
        z-index: 1;
        display: grid;
        grid-template-columns: 1fr 0.92fr;
        align-items: center;
        gap: 60px;
        padding-bottom: 82px;
      }
      .eyebrow {
        font-size: 10px;
        letter-spacing: 2px;
        font-weight: 800;
        color: #c5d3ec;
        display: flex;
        align-items: center;
        gap: 10px;
      }
      .eyebrow > span {
        display: inline-block;
        width: 23px;
        height: 3px;
        background: var(--red);
        border-radius: 5px;
      }
      .hero h1 {
        font-size: clamp(42px, 5.2vw, 68px);
        line-height: 1.04;
        letter-spacing: -2.8px;
        margin: 23px 0 22px;
        max-width: 620px;
      }
      .hero h1 em,
      .section h2 em {
        font-style: normal;
        color: #8eb7ff;
      }
      .hero-copy > p {
        font-size: 16px;
        color: #c2cce0;
        line-height: 1.8;
        max-width: 510px;
        margin: 0;
      }
      .hero-actions {
        display: flex;
        align-items: center;
        gap: 27px;
        margin-top: 32px;
      }
      .btn {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        gap: 12px;
        border: 0;
        border-radius: 8px;
        padding: 15px 20px;
        font-weight: 800;
        font-size: 13px;
        transition:
          transform 0.2s,
          box-shadow 0.2s;
        cursor: pointer;
      }
      .btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 25px #0002;
      }
      .btn-red {
        background: var(--red);
        color: #fff;
        box-shadow: 0 10px 24px #0b347e35;
      }
      .btn-red:hover {
        background: var(--red-dark);
      }
      .btn-blue {
        background: var(--blue);
        color: #fff;
        box-shadow: 0 10px 24px #0b347e26;
      }
      .text-link {
        font-size: 13px;
        font-weight: 700;
        color: #fff;
      }
      .text-link span {
        margin-left: 8px;
        color: #8eb7ff;
      }
      .hero-proof {
        display: flex;
        align-items: center;
        gap: 13px;
        margin-top: 43px;
      }
      .proof-avatars {
        display: flex;
      }
      .proof-avatars span {
        display: grid;
        place-items: center;
        border: 2px solid #14213a;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: #244574;
        color: #fff;
        font-size: 10px;
        font-weight: 900;
      }
      .proof-avatars span + span {
        margin-left: -9px;
        background: var(--red);
      }
      .hero-proof p {
        margin: 0;
        display: grid;
        gap: 3px;
      }
      .hero-proof b {
        font-size: 11px;
      }
      .hero-proof small {
        font-size: 10px;
        color: #aab8d0;
      }
      .hero-art {
        position: relative;
        min-height: 420px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .art-frame {
        width: min(100%, 425px);
        height: 385px;
        position: relative;
        overflow: hidden;
        border: 1px solid #ffffff25;
        border-radius: 14px;
        background: linear-gradient(135deg, #ffffff0b, #ffffff02);
        box-shadow: 0 35px 80px #0004;
        transform: rotate(2deg);
      }
      .art-frame:after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
          110deg,
          transparent 30%,
          #ffffff0c 31%,
          transparent 32%
        );
        pointer-events: none;
      }
      .art-top {
        display: flex;
        justify-content: space-between;
        padding: 19px 20px;
        font-size: 8px;
        letter-spacing: 1.7px;
        color: #b5c7e6;
        border-bottom: 1px solid #ffffff1c;
      }
      .art-shape {
        position: absolute;
      }
      .shape-blue {
        width: 255px;
        height: 260px;
        background: linear-gradient(145deg, #2e68bb, #0b347e);
        right: -30px;
        top: 65px;
        clip-path: polygon(35% 0, 100% 0, 100% 100%, 0 100%, 0 48%);
        opacity: 0.9;
      }
      .shape-red {
        width: 180px;
        height: 225px;
        background: linear-gradient(145deg, #2e68bb, #06245b);
        left: 30px;
        top: 112px;
        clip-path: polygon(0 0, 100% 0, 100% 75%, 60% 100%, 0 100%);
        opacity: 0.95;
      }
      .art-letter {
        position: absolute;
        z-index: 2;
        top: 73px;
        left: 112px;
        font-size: 220px;
        font-weight: 950;
        line-height: 1;
        letter-spacing: -25px;
        color: #fff;
        text-shadow: 0 10px 40px #06112780;
      }
      .art-letter span {
        color: #8eb7ff;
      }
      .art-bottom {
        position: absolute;
        z-index: 3;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 17px 20px;
        background: #0b1220d9;
        display: flex;
        justify-content: space-between;
        font-size: 9px;
        letter-spacing: 1.1px;
      }
      .floating-tag {
        position: absolute;
        z-index: 4;
        padding: 13px 16px;
        border-radius: 10px;
        background: #fff;
        color: #192338;
        box-shadow: var(--shadow);
        font-size: 11px;
        font-weight: 800;
        display: flex;
        align-items: center;
        gap: 9px;
      }
      .tag-one {
        top: 62px;
        right: -17px;
      }
      .tag-two {
        bottom: 65px;
        left: -20px;
      }
      .tag-dot {
        width: 9px;
        height: 9px;
        border-radius: 50%;
      }
      .red-dot {
        background: var(--red);
      }
      .blue-dot {
        background: var(--blue);
      }
      .hero-foot {
        border-top: 1px solid #ffffff1c;
        position: relative;
        z-index: 1;
      }
      .hero-foot-inner {
        height: 51px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 9px;
        font-weight: 800;
        letter-spacing: 1.5px;
        color: #8fa1bf;
      }
      .hero-foot b {
        color: #8eb7ff;
        font-size: 14px;
        margin-left: 8px;
      }
      .section {
        padding: 100px 0;
      }
      .section-head {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 35px;
        margin-bottom: 42px;
      }
      .dark-eyebrow {
        color: #6d7788;
      }
      .section h2 {
        font-size: clamp(34px, 4vw, 49px);
        letter-spacing: -1.8px;
        line-height: 1.12;
        margin: 17px 0 0;
        color: var(--navy);
      }
      .section h2 em {
        color: var(--red);
      }
      .section-head > p {
        max-width: 360px;
        color: var(--muted);
        font-size: 13px;
        line-height: 1.8;
        margin: 0 0 4px;
      }
      .service-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 17px;
      }
      .service-card {
        border: 1px solid var(--line);
        border-radius: 13px;
        padding: 23px 21px 25px;
        min-height: 282px;
        position: relative;
        overflow: hidden;
        transition:
          transform 0.25s,
          box-shadow 0.25s,
          border-color 0.25s;
        background: #fff;
      }
      .service-card:before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        height: 3px;
        background: var(--blue);
      }
      .service-card:nth-child(even):before {
        background: var(--red);
      }
      .service-card:hover {
        transform: translateY(-6px);
        box-shadow: var(--shadow);
        border-color: #d6dfed;
      }
      .service-number {
        font-size: 8px;
        letter-spacing: 1.3px;
        color: #8a94a4;
        font-weight: 800;
      }
      .service-icon {
        width: 45px;
        height: 45px;
        border-radius: 12px;
        display: grid;
        place-items: center;
        font-size: 26px;
        font-weight: 700;
        margin: 28px 0 17px;
      }
      .service-image {
        width: 100%;
        height: 200px;
        margin: 20px 0;
        overflow: hidden;
        border-radius: 10px;
        background: #f2f4f7;
      }

      .service-image img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.4s ease;
      }

      .service-card:hover .service-image img {
        transform: scale(1.05);
      }

      .icon-red {
        background: #fff0f1;
        color: var(--red);
      }
      .icon-blue {
        background: #edf4ff;
        color: var(--blue);
      }
      .service-card h3 {
        font-size: 18px;
        margin: 0 0 8px;
        color: var(--navy);
        letter-spacing: -0.4px;
      }
      .service-card p {
        font-size: 12px;
        color: var(--muted);
        line-height: 1.75;
        margin: 0 0 18px;
      }
      .service-card > a {
        font-size: 10px;
        font-weight: 800;
        color: var(--blue);
      }
      .service-card > a span {
        margin-left: 6px;
        color: var(--red);
      }
      .statement {
        background: #f4f7fb;
        border-top: 1px solid #e9eef6;
        border-bottom: 1px solid #e9eef6;
      }
      .statement-inner {
        min-height: 180px;
        display: flex;
        align-items: center;
        gap: 28px;
      }
      .statement-mark {
        font-family: Georgia, serif;
        font-size: 100px;
        line-height: 0.7;
        color: var(--red);
        opacity: 0.85;
      }
      .statement p {
        font-size: 25px;
        line-height: 1.4;
        letter-spacing: -0.5px;
        color: #778195;
        margin: 0;
      }
      .statement p strong {
        color: var(--navy);
      }
      .statement-line {
        height: 2px;
        background: var(--blue);
        width: 90px;
        margin-left: auto;
      }
      .process {
        background: #fff;
      }
      .process-grid {
        display: grid;
        grid-template-columns: 0.8fr 1.2fr;
        gap: 110px;
      }
      .section-intro {
        color: var(--muted);
        font-size: 14px;
        line-height: 1.8;
        margin: 22px 0 28px;
        max-width: 350px;
      }
      .steps {
        border-top: 1px solid var(--line);
      }
      .step {
        display: grid;
        grid-template-columns: 54px 1fr;
        gap: 16px;
        padding: 22px 0;
        border-bottom: 1px solid var(--line);
      }
      .step > span {
        width: 38px;
        height: 38px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        background: #edf4ff;
        color: var(--blue);
        font-size: 11px;
        font-weight: 900;
      }
      .step:nth-child(even) > span {
        background: #fff0f1;
        color: var(--red);
      }
      .step h3 {
        margin: 0 0 5px;
        font-size: 16px;
        color: var(--navy);
      }
      .step p {
        margin: 0;
        font-size: 12px;
        color: var(--muted);
        line-height: 1.7;
      }
      .projects {
        background: #f8faff;
      }
      .project-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 22px;
      }
      .project-card {
        min-width: 0;
      }
      .project-image {
        height: 235px;
        position: relative;
        overflow: hidden;
        border-radius: 13px;
        background: #e8eef7;
      }
      .project-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.4s;
      }
      .project-card:hover .project-image img {
        transform: scale(1.04);
      }
      .project-placeholder {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 22px;
        background: linear-gradient(130deg, #111d34, #0b347e);
        color: #fff;
        position: relative;
        overflow: hidden;
      }
      .project-placeholder:after {
        content: "";
        position: absolute;
        width: 200px;
        height: 250px;
        right: -55px;
        top: 20px;
        background: var(--red);
        transform: rotate(26deg);
        opacity: 0.85;
      }
      .project-placeholder span,
      .project-placeholder b {
        position: relative;
        z-index: 1;
      }
      .project-placeholder span {
        font-size: 12px;
        font-weight: 900;
        letter-spacing: 4px;
      }
      .project-placeholder b {
        font-size: 27px;
        line-height: 1.03;
        letter-spacing: -1px;
      }
      .placeholder-two {
        background: linear-gradient(130deg, #0b347e, #8e1020);
      }
      .placeholder-two:after {
        background: #0b347e;
        transform: rotate(-28deg);
      }
      .placeholder-three {
        background: linear-gradient(130deg, #101b31, #344d72);
      }
      .placeholder-three:after {
        background: #0b347e;
        transform: rotate(35deg);
      }
      .project-badge {
        position: absolute;
        top: 14px;
        left: 14px;
        padding: 7px 10px;
        border-radius: 5px;
        background: #fff;
        color: var(--navy);
        font-size: 9px;
        font-weight: 800;
      }
      .project-caption {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 15px;
        padding: 16px 2px;
      }
      .project-caption h3 {
        font-size: 15px;
        margin: 0 0 4px;
        color: var(--navy);
      }
      .project-caption p {
        font-size: 11px;
        line-height: 1.6;
        color: var(--muted);
        margin: 0;
      }
      .project-arrow {
        display: grid;
        place-items: center;
        flex: 0 0 33px;
        height: 33px;
        border: 1px solid var(--line);
        border-radius: 50%;
        color: var(--blue);
      }
      .quote-section {
        background: linear-gradient(125deg, #0b1220, #111f3b);
        color: #fff;
        position: relative;
        overflow: hidden;
      }
      .quote-section:before {
        content: "";
        position: absolute;
        width: 500px;
        height: 500px;
        right: -180px;
        top: -200px;
        border: 1px solid #ffffff12;
        border-radius: 50%;
        box-shadow:
          0 0 0 55px #ffffff05,
          0 0 0 110px #ffffff03;
      }
      .quote-grid {
        position: relative;
        display: grid;
        grid-template-columns: 0.8fr 1fr;
        gap: 95px;
        align-items: start;
      }
      .quote-copy {
        padding-top: 20px;
      }
      .quote-copy h2 {
        color: #fff;
        font-size: clamp(38px, 4.5vw, 54px);
        line-height: 1.08;
        letter-spacing: -2px;
        margin: 21px 0;
      }
      .quote-copy h2 em {
        color: #8eb7ff;
      }
      .quote-copy > p {
        color: #b7c4da;
        font-size: 14px;
        line-height: 1.8;
        max-width: 400px;
      }
      .contact-points {
        display: grid;
        gap: 18px;
        margin-top: 35px;
      }
      .contact-points > div {
        display: flex;
        gap: 13px;
        align-items: center;
      }
      .contact-points > div > span {
        width: 37px;
        height: 37px;
        display: grid;
        place-items: center;
        border-radius: 9px;
        background: #ffffff12;
        color: #8eb7ff;
        font-weight: 900;
      }
      .contact-points p {
        margin: 0;
        display: grid;
        gap: 3px;
      }
      .contact-points b {
        font-size: 12px;
      }
      .contact-points small {
        font-size: 10px;
        color: #aab8d0;
      }
      .form-panel {
        background: #fff;
        border-radius: 16px;
        color: var(--ink);
        padding: 29px 30px;
        box-shadow: 0 24px 60px #0003;
      }
      .form-heading {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 23px;
      }
      .form-heading > div > span {
        font-size: 9px;
        font-weight: 900;
        letter-spacing: 1.5px;
        color: var(--blue);
      }
      .form-heading h3 {
        font-size: 23px;
        letter-spacing: -0.7px;
        margin: 5px 0 0;
        color: var(--navy);
      }
      .form-spark {
        font-size: 28px;
        color: var(--red);
      }
      .site-form {
        display: grid;
        gap: 15px;
      }
      .form-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 13px;
      }
      .site-form label {
        display: grid;
        gap: 7px;
        font-size: 10px;
        font-weight: 800;
        color: #455065;
      }
      .site-form input,
      .site-form select,
      .site-form textarea {
        width: 100%;
        font: inherit;
        font-size: 12px;
        font-weight: 500;
        color: #1a2538;
        background: #f7f9fc;
        border: 1px solid #e1e7f0;
        border-radius: 7px;
        padding: 12px 13px;
        outline: none;
        transition:
          border 0.2s,
          box-shadow 0.2s;
      }
      .site-form input:focus,
      .site-form select:focus,
      .site-form textarea:focus {
        border-color: #0b347e;
        box-shadow: 0 0 0 3px #0b347e1a;
      }
      .site-form textarea {
        resize: vertical;
        min-height: 90px;
      }
      .site-form input[type="file"] {
        font-size: 10px;
        padding: 10px;
      }
      .file-label small {
        font-size: 9px;
        color: #8a94a4;
        font-weight: 500;
      }
      .site-form .errorlist {
        list-style: none;
        margin: 0;
        padding: 0;
        color: var(--red);
        font-size: 10px;
      }
      .submit-btn {
        width: 100%;
        margin-top: 3px;
      }
      .privacy-note {
        font-size: 9px;
        text-align: center;
        color: #8a94a4;
        margin: 0;
      }
      .notice {
        padding: 11px 13px;
        border-radius: 7px;
        font-size: 12px;
        margin-bottom: 14px;
      }
      .success {
        background: #e9f8ef;
        color: #176b3a;
      }
      .error {
        background: #fff0f1;
        color: #a50e1d;
      }
      .contact-strip {
        padding: 55px 0;
        background: #fff;
      }
      .contact-strip-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 25px;
      }
      .contact-strip h2 {
        font-size: 30px;
        letter-spacing: -1px;
        margin: 10px 0 0;
        color: var(--navy);
      }
      .contact-actions {
        text-align: right;
      }
      .contact-actions p {
        font-size: 11px;
        color: var(--muted);
        margin: 9px 0 0;
      }
      .footer {
        background: #070d18;
        color: #fff;
      }
      .footer-main {
        padding: 43px 0;
        display: flex;
        align-items: center;
        gap: 55px;
      }
      .brand-light {
        color: #fff;
      }
      .footer-main > p {
        font-size: 12px;
        line-height: 1.7;
        color: #9caac0;
        margin: 0;
        border-left: 1px solid #ffffff24;
        padding-left: 35px;
      }
      .footer-links {
        margin-left: auto;
        display: flex;
        gap: 22px;
        font-size: 11px;
        color: #c1ccdd;
      }
      .footer-links a:hover {
        color: #8eb7ff;
      }
      .footer-bottom {
        border-top: 1px solid #ffffff18;
        padding: 16px 0;
        display: flex;
        justify-content: space-between;
        gap: 15px;
        font-size: 9px;
        color: #7e8ba2;
      }
      .footer-bottom b {
        color: var(--red);
        margin-left: 7px;
      }
      .whatsapp-float {
        position: fixed;
        right: 22px;
        bottom: 22px;
        z-index: 15;
        display: grid;
        place-items: center;
        width: 52px;
        height: 52px;
        border-radius: 50%;
        background: #1bbf71;
        color: #fff;
        font-size: 27px;
        font-weight: 900;
        box-shadow: 0 10px 28px #0b122044;
        border: 3px solid #ffffffd9;
      }
      @media (max-width: 980px) {
        .hero-grid {
          gap: 25px;
        }
        .hero-art {
          min-height: 350px;
        }
        .art-frame {
          height: 330px;
        }
        .art-letter {
          font-size: 190px;
          left: 90px;
        }
        .shape-blue {
          height: 225px;
        }
        .shape-red {
          height: 190px;
        }
        .service-grid {
          grid-template-columns: repeat(2, 1fr);
        }
        .process-grid {
          gap: 55px;
        }
        .quote-grid {
          gap: 45px;
        }
        .footer-main {
          gap: 28px;
        }
        .footer-links {
          gap: 14px;
        }
      }
      @media (max-width: 720px) {
        .container {
          width: min(100% - 32px, 560px);
        }
        .site-header {
          height: 70px;
        }
        .menu-toggle {
          display: block;
          color: var(--navy);
        }
        .nav-links {
          display: none;
          position: absolute;
          top: 69px;
          left: 0;
          right: 0;
          background: #fff;
          padding: 18px 22px 22px;
          border-bottom: 1px solid var(--line);
          box-shadow: 0 15px 25px #0b12200d;
          align-items: stretch;
          gap: 0;
          flex-direction: column;
        }
        .nav-links.is-open {
          display: flex;
        }
        .nav-links > a {
          padding: 12px 5px;
        }
        .nav-links .nav-cta {
          margin-top: 8px;
          text-align: center;
          padding: 13px;
        }
        .hero {
          padding-top: 61px;
        }
        .hero-grid {
          grid-template-columns: 1fr;
          gap: 26px;
          padding-bottom: 50px;
        }
        .hero h1 {
          font-size: clamp(43px, 12vw, 60px);
          letter-spacing: -2px;
        }
        .hero-copy > p {
          font-size: 14px;
        }
        .hero-actions {
          flex-wrap: wrap;
          gap: 20px;
        }
        .hero-proof {
          margin-top: 30px;
        }
        .hero-art {
          min-height: 330px;
          margin: 0 10px;
        }
        .art-frame {
          height: 305px;
        }
        .art-letter {
          font-size: 175px;
          left: 78px;
          top: 66px;
        }
        .shape-blue {
          width: 210px;
          height: 205px;
        }
        .shape-red {
          width: 145px;
          height: 175px;
          left: 22px;
          top: 103px;
        }
        .tag-one {
          right: -8px;
          top: 34px;
        }
        .tag-two {
          left: -10px;
          bottom: 45px;
        }
        .hero-foot-inner {
          font-size: 8px;
          letter-spacing: 0.8px;
        }
        .section {
          padding: 70px 0;
        }
        .section-head {
          align-items: flex-start;
          flex-direction: column;
          gap: 18px;
          margin-bottom: 30px;
        }
        .section-head > p {
          max-width: 520px;
        }
        .section h2 {
          font-size: 38px;
        }
        .service-grid {
          gap: 12px;
        }
        .service-card {
          padding: 18px 15px;
          min-height: 275px;
        }
        .service-number {
          font-size: 7px;
          letter-spacing: 0.7px;
        }
        .service-icon {
          margin: 22px 0 13px;
        }
        .service-card h3 {
          font-size: 16px;
        }
        .service-card p {
          font-size: 11px;
        }
        .statement-inner {
          min-height: 155px;
          gap: 14px;
        }
        .statement-mark {
          font-size: 70px;
        }
        .statement p {
          font-size: 18px;
        }
        .statement-line {
          width: 35px;
        }
        .process-grid {
          grid-template-columns: 1fr;
          gap: 40px;
        }
        .project-grid {
          grid-template-columns: 1fr;
          gap: 14px;
        }
        .project-image {
          height: 250px;
        }
        .quote-grid {
          grid-template-columns: 1fr;
          gap: 35px;
        }
        .quote-copy {
          padding-top: 0;
        }
        .quote-copy h2 {
          font-size: 43px;
        }
        .form-panel {
          padding: 24px 19px;
        }
        .contact-strip-inner {
          align-items: flex-start;
          flex-direction: column;
        }
        .contact-actions {
          text-align: left;
        }
        .footer-main {
          align-items: flex-start;
          flex-wrap: wrap;
          gap: 23px;
        }
        .footer-main > p {
          border-left: 0;
          padding-left: 0;
          width: 100%;
          order: 3;
        }
        .footer-links {
          margin-left: 0;
          width: 100%;
          flex-wrap: wrap;
          order: 4;
        }
        .footer-bottom {
          flex-direction: column;
          gap: 5px;
        }
        .whatsapp-float {
          width: 48px;
          height: 48px;
          right: 15px;
          bottom: 15px;
        }
      }
      @media (max-width: 420px) {
        .form-row {
          grid-template-columns: 1fr;
        }
        .hero-actions .btn {
          width: 100%;
        }
        .text-link {
          padding-left: 3px;
        }
        .service-grid {
          grid-template-columns: 1fr;
        }
        .service-card {
          min-height: 0;
        }
        .service-icon {
          margin-top: 18px;
        }
        .project-image {
          height: 215px;
        }
        .hero-foot-inner span:first-child {
          max-width: 100px;
        }
        .statement-line {
          display: none;
        }
      }

      /* Identidad visual oficial: azul profundo y blanco del logotipo */
      
      .site-header {
        background: rgba(255, 255, 255, 0.98);
         min-height: 100px;
      }
      .hero {
        background:
          radial-gradient(ellipse at 82% 35%, #174b9b 0%, transparent 39%),
          linear-gradient(115deg, #061e4e 0%, #0b347e 54%, #061e4e 100%);
      }
      .quote-section {
        background: linear-gradient(125deg, #061e4e, #0b347e);
      }

      /* Ajustes para celulares */
      @media (max-width: 720px) {
          .site-header {
              min-height: 80px;
              height: auto;
          }

          .brand-logo {
              width: 190px;
              max-height: 68px;
          }

          .footer-logo {
              width: 145px;
              height: auto;
              object-fit: contain;
          }
      }

      /* Paleta corporativa Mega Publicidad: azul, rojo y amarillo */
      :root {
        --red: #e3262e;
        --red-dark: #b71920;
        --blue: #0b347e;
        --navy: #08285f;
        --yellow: #ffc928;
        --yellow-dark: #e5a900;
      }
      .nav-links > a:not(.nav-cta):hover {
        color: var(--red);
      }
      .nav-cta {
        background: var(--red);
        box-shadow: 0 8px 18px #e3262e35;
      }
      .hero {
        background:
          radial-gradient(ellipse at 82% 35%, #174a9b 0%, transparent 39%),
          linear-gradient(115deg, #071f59 0%, #0b347e 58%, #08285f 100%);
      }
      .hero-glow {
        background: #ffc92824;
      }
      .eyebrow > span {
        background: var(--yellow);
      }
      .hero h1 em,
      .section h2 em {
        color: var(--yellow);
      }
      .text-link span {
        color: var(--yellow);
      }
      .btn-red {
        background: var(--red);
        box-shadow: 0 10px 24px #e3262e45;
      }
      .btn-red:hover {
        background: var(--red-dark);
      }
      .btn-blue {
        background: var(--blue);
      }
      .proof-avatars span + span {
        background: var(--red);
      }
      .art-frame {
        border-top: 4px solid var(--yellow);
      }
      .shape-blue {
        background: linear-gradient(145deg, #3978cf, #0b347e);
      }
      /* Detalles rojos y amarillos para equilibrar el azul del logotipo */
      .section-kicker,
      .eyebrow-label {
        color: var(--red);
      }
      .section-kicker:before,
      .section-kicker:after {
        background: var(--yellow);
      }
      .service-icon,
      .service-number {
        color: var(--red);
      }
      .service-card:hover {
        border-color: #ffc928;
      }
      .project-card:after {
        background: linear-gradient(0deg, #08285fdd, transparent 75%);
      }
      .project-tag {
        background: var(--yellow);
        color: #08285f;
      }
      .process-number {
        background: var(--red);
        color: #fff;
      }
      .contact-section,
      .quote-section {
        border-top: 5px solid var(--yellow);
      }
      input:focus,
      textarea:focus,
      select:focus {
        border-color: var(--red) !important;
        box-shadow: 0 0 0 3px #e3262e18 !important;
      }
      footer {
        border-top: 5px solid var(--yellow);
      }
      @media (max-width: 700px) {
        .hero {
          background: linear-gradient(145deg, #071f59, #0b347e 70%, #08285f);
        }
      }