@font-face {
         font-family: "Poppins";
         src: url("../fonts/Poppins-Regular.ttf") format("truetype");
         font-style: normal;
         font-weight: 400;
         font-display: swap
      }

      @font-face {
         font-family: "Poppins";
         src: url("../fonts/Poppins-SemiBold.ttf") format("truetype");
         font-style: normal;
         font-weight: 600;
         font-display: swap
      }

      @font-face {
         font-family: "Poppins";
         src: url("../fonts/Poppins-Bold.ttf") format("truetype");
         font-style: normal;
         font-weight: 700;
         font-display: swap
      }

      :root {
         --navy: #123a73;
         --deep: #0a2a56;
         --blue: #1473e6;
         --sky: #27b5f5;
         --pale: #eaf5ff;
         --soft: #f6faff;
         --ink: #102f52;
         --muted: #607a9a;
         --line: #cfe1f2;
         --white: #fff;
         --green: #0e9474;
         --shadow: 0 14px 34px rgba(18, 58, 115, .1);
         --wrap: min(1240px, calc(100% - 40px))
      }

      * {
         box-sizing: border-box
      }

      html {
         scroll-behavior: smooth
      }

      body {
         margin: 0;
         overflow-x: clip;
         color: var(--ink);
         background: #fff;
         font: 16px/1.65 Poppins, system-ui, sans-serif;
         -webkit-font-smoothing: antialiased
      }

      body.menu-open {
         overflow: hidden
      }

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

      img {
         display: block;
         max-width: 100%
      }

      button,
      input,
      select,
      textarea {
         font: inherit
      }

      button {
         cursor: pointer
      }

      :focus-visible {
         outline: 3px solid rgba(20, 115, 230, .38);
         outline-offset: 3px
      }

      .container {
         width: var(--wrap);
         margin: auto
      }

      .section {
         padding: 96px 0;
         scroll-margin-top: 76px
      }

      .soft {
         background: var(--soft)
      }

      h1,
      h2,
      h3,
      p {
         margin-top: 0
      }

      h1,
      h2,
      h3 {
         color: var(--navy);
         line-height: 1.12
      }

      h1 {
         max-width: 750px;
         margin-bottom: 24px;
         font-size: clamp(2.65rem, 5.4vw, 4.25rem);
         font-weight: 800
      }

      h2 {
         margin-bottom: 18px;
         font-size: clamp(2rem, 3.6vw, 3rem)
      }

      h3 {
         margin-bottom: 12px;
         font-size: 1.14rem
      }

      .lead {
         color: var(--muted);
         font-size: 1.08rem
      }

      .eyebrow {
         display: inline-flex;
         align-items: center;
         gap: 8px;
         margin: 0 0 14px;
         color: var(--blue);
         font-size: .78rem;
         font-weight: 800;
         text-transform: uppercase
      }

      .eyebrow:before {
         content: "";
         width: 26px;
         height: 2px;
         background: var(--sky)
      }

      .section-head {
         max-width: 720px;
         margin-bottom: 44px
      }

      .center {
         margin-inline: auto;
         text-align: center
      }

      .center .eyebrow:before {
         display: none
      }

      .icon {
         width: 20px;
         height: 20px;
         stroke-width: 1.9
      }

      .btn {
         min-height: 48px;
         display: inline-flex;
         align-items: center;
         justify-content: center;
         gap: 9px;
         padding: 12px 20px;
         border: 1px solid transparent;
         border-radius: 11px;
         font-weight: 750;
         transition: .22s
      }

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

      .primary {
         color: #fff;
         background: var(--blue);
         box-shadow: 0 10px 24px rgba(20, 115, 230, .22)
      }

      .primary:hover {
         background: #0c65cf
      }

      .secondary {
         color: var(--blue);
         background: #fff;
         border-color: var(--blue)
      }

      .secondary:hover {
         background: var(--pale)
      }

      .icon-btn {
         width: 46px;
         padding: 0;
         background: #fff;
         border-color: var(--line)
      }

      header.site {
         position: sticky;
         top: 0;
         z-index: 50;
         background: rgba(255, 255, 255, .94);
         border-bottom: 1px solid var(--line);
         backdrop-filter: blur(14px)
      }

      .nav-wrap {
         min-height: 76px;
         display: flex;
         align-items: center;
         gap: 28px
      }

      .brand {
         display: inline-flex;
         align-items: center;
         gap: 11px;
         flex-shrink: 0
      }

      .brand-mark {
         width: 46px;
         height: 39px;
         display: grid;
         place-items: center;
         color: #fff;
         background: var(--navy);
         clip-path: polygon(0 0, 78% 0, 100% 50%, 78% 100%, 0 100%, 20% 50%);
         font-size: .95rem;
         font-weight: 800
      }

      .brand-copy {
         display: grid;
         line-height: 1.05
      }

      .brand-copy strong {
         color: var(--navy);
         font-size: .93rem
      }

      .brand-copy small {
         color: var(--muted);
         font-size: .59rem;
         font-weight: 700;
         text-transform: uppercase
      }

      .nav {
         display: flex;
         align-items: center;
         gap: 23px;
         margin-left: auto
      }

      .nav a {
         color: #345474;
         font-size: .86rem;
         font-weight: 650
      }

      .nav a:hover {
         color: var(--blue)
      }

      .nav .btn {
         color: #fff
      }

      .menu {
         display: none;
         border: 0;
         color: var(--navy);
         background: transparent
      }

      .hero {
         position: relative;
         isolation: isolate;
         min-height: min(760px, calc(100svh - 76px));
         display: grid;
         align-items: center;
         overflow: hidden;
         background: #fff
      }

      .hero:after {
         content: "";
         position: absolute;
         inset: 0;
         z-index: -1;
         background: url("../images/dy-enterprise-hero-2026.jpg") center/cover no-repeat
      }

      .hero-grid {
         min-height: inherit;
         min-width: 0;
         display: grid;
         grid-template-columns: .95fr 1.05fr;
         align-items: center
      }

      .hero-copy {
         position: relative;
         z-index: 1;
         width: 100%;
         min-width: 0;
         max-width: 610px;
         padding: 80px 0
      }

      .hero-copy h1 {
         overflow-wrap: break-word;
         font-size: clamp(2.7rem, 4.5vw, 4rem)
      }

      .hero-copy .lead {
         max-width: 690px;
         margin-bottom: 30px;
         color: #466784;
         font-size: 1.13rem
      }

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

      .proof {
         display: flex;
         align-items: center;
         gap: 12px;
         margin-top: 34px;
         color: #456785;
         font-size: .84rem;
         font-weight: 650
      }

      .proof span {
         display: flex;
         flex-direction: column;
         align-items: flex-start;
         gap: 0
      }

      .proof .proof-icon {
         width: 42px;
         height: 42px;
         display: grid;
         place-items: center;
         flex: 0 0 auto;
         color: var(--blue);
         background: var(--pale);
         border-radius: 6px
      }

      .proof .icon {
         width: 21px
      }

      .proof small {
         color: var(--muted);
         font-size: .75rem;
         font-weight: 500
      }

      .client-band {
         padding: 28px 0 30px;
         background: #fff;
         border-top: 1px solid #e5eef7;
         border-bottom: 1px solid var(--line)
      }

      .client-title {
         margin-bottom: 22px;
         color: #607a9a;
         font-size: .7rem;
         font-weight: 800;
         text-align: center;
         text-transform: uppercase
      }

      .client-logos {
         display: flex;
         align-items: center;
         justify-content: center;
         gap: clamp(50px, 10vw, 140px)
      }

      .client-logos a {
         width: min(220px, 34vw);
         height: 62px;
         display: grid;
         place-items: center;
         opacity: .76;
         transition: opacity .2s, transform .2s
      }

      .client-logos a:hover {
         opacity: 1;
         transform: translateY(-2px)
      }

      .client-logos img {
         max-width: 100%;
         max-height: 54px;
         object-fit: contain
      }

      .client-logos .client-logo-light {
         filter: grayscale(1) brightness(.42)
      }

      .benefits {
         position: relative;
         z-index: 2;
         padding-top: 36px
      }

      .benefit-grid {
         display: grid;
         grid-template-columns: repeat(4, 1fr);
         background: #fff;
         border: 1px solid var(--line);
         border-radius: 16px;
         box-shadow: var(--shadow);
         overflow: hidden
      }

      .benefit {
         padding: 28px;
         border-right: 1px solid var(--line)
      }

      .benefit:last-child {
         border: 0
      }

      .ibox {
         width: 43px;
         height: 43px;
         display: grid;
         place-items: center;
         margin-bottom: 18px;
         color: var(--blue);
         background: var(--pale);
         border-radius: 10px
      }

      .benefit h3 {
         font-size: 1rem
      }

      .benefit p {
         margin: 0;
         color: var(--muted);
         font-size: .88rem;
         line-height: 1.5
      }

      .services {
         display: grid;
         grid-template-columns: repeat(3, 1fr);
         gap: 20px
      }

      .technology-band {
         padding: 78px 0;
         background: #f6faff;
         border-block: 1px solid #e1edf8;
         scroll-margin-top: 76px
      }

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

      .technology {
         min-height: 112px;
         display: grid;
         place-items: center;
         align-content: center;
         gap: 10px;
         padding: 16px 10px;
         text-align: center;
         background: #fff;
         border: 1px solid var(--line);
         border-radius: 6px;
         transition: transform .2s, border-color .2s, box-shadow .2s
      }

      .technology:hover {
         transform: translateY(-4px);
         border-color: #78b9ef;
         box-shadow: 0 10px 24px rgba(18, 58, 115, .08)
      }

      .technology .icon {
         width: 30px;
         height: 30px;
         color: var(--blue)
      }

      .technology span {
         color: var(--navy);
         font-size: .78rem;
         font-weight: 700
      }

      .service {
         position: relative;
         min-height: 292px;
         padding: 28px;
         background: #fff;
         border: 1px solid var(--line);
         border-radius: 16px;
         transition: .25s;
         overflow: hidden
      }

      .service:after {
         content: "";
         position: absolute;
         right: -36px;
         bottom: -36px;
         width: 100px;
         height: 100px;
         border: 20px solid var(--pale);
         border-radius: 50%
      }

      .service:hover {
         transform: translateY(-6px);
         border-color: #91c8f4;
         box-shadow: var(--shadow)
      }

      .service p {
         color: var(--muted);
         font-size: .92rem
      }

      .service a {
         position: absolute;
         left: 28px;
         bottom: 25px;
         z-index: 1;
         display: flex;
         gap: 7px;
         color: var(--blue);
         font-size: .86rem;
         font-weight: 750
      }

      .service a .icon {
         width: 17px
      }

      .about {
         display: grid;
         grid-template-columns: .9fr 1.1fr;
         gap: 70px;
         align-items: center
      }

      .about-photo {
         position: relative;
         min-height: 540px;
         border-radius: 16px;
         overflow: hidden
      }

      .about-photo img {
         position: absolute;
         width: 100%;
         height: 100%;
         object-fit: cover;
         object-position: 65% center
      }

      .photo-note {
         position: absolute;
         left: 24px;
         bottom: 24px;
         max-width: 285px;
         padding: 18px 20px;
         color: #fff;
         background: rgba(18, 58, 115, .94);
         border-radius: 12px
      }

      .photo-note strong {
         display: block
      }

      .photo-note span {
         font-size: .8rem;
         opacity: .82
      }

      .accordion {
         display: grid;
         gap: 12px;
         margin-top: 28px
      }

      .value {
         padding: 19px 20px;
         background: #fff;
         border: 1px solid var(--line);
         border-radius: 12px
      }

      .value button {
         width: 100%;
         display: flex;
         justify-content: space-between;
         padding: 0;
         border: 0;
         color: var(--navy);
         background: none;
         font-weight: 750
      }

      .value button .icon {
         color: var(--blue);
         transition: .2s
      }

      .value.open button .icon {
         transform: rotate(45deg)
      }

      .value-body {
         display: grid;
         grid-template-rows: 0fr;
         transition: grid-template-rows .25s
      }

      .value-body div {
         overflow: hidden
      }

      .value-body p {
         margin: 12px 0 0;
         color: var(--muted);
         font-size: .91rem
      }

      .value-list {
         display: grid;
         gap: 10px;
         padding-left: 20px;
         margin: 14px 0 2px;
         list-style: disc
      }

      .value-list li {
         display: list-item;
         padding-left: 3px;
         color: var(--muted);
         font-size: .85rem;
         line-height: 1.55
      }

      .value-list li::marker {
         color: var(--green)
      }

      .value-list strong {
         color: var(--navy)
      }

      .value.open .value-body {
         grid-template-rows: 1fr
      }

      .process {
         position: relative;
         display: grid;
         grid-template-columns: repeat(5, 1fr);
         gap: 16px
      }

      .process:before {
         content: "";
         position: absolute;
         top: 28px;
         left: 9%;
         right: 9%;
         height: 2px;
         background: var(--line)
      }

      .step {
         position: relative;
         z-index: 1;
         text-align: center
      }

      .step b {
         width: 58px;
         height: 58px;
         display: grid;
         place-items: center;
         margin: 0 auto 18px;
         color: #fff;
         background: var(--blue);
         border: 8px solid #fff;
         border-radius: 50%;
         box-shadow: 0 0 0 1px var(--line);
         font-size: .87rem
      }

      .step h3 {
         font-size: .98rem
      }

      .step p {
         margin: 0;
         color: var(--muted);
         font-size: .83rem
      }

      .carousel {
         overflow: hidden;
         border: 1px solid var(--line);
         border-radius: 16px;
         background: #fff;
         box-shadow: var(--shadow)
      }

      .portfolio-section {
         color: #d9e8f6;
         background: #092b59
      }

      .portfolio-section .section-head h2 {
         color: #fff
      }

      .portfolio-section .section-head .lead {
         color: #b8cee2
      }

      .portfolio-section .eyebrow {
         color: #66c8ff
      }

      .track {
         display: flex;
         transition: transform .55s cubic-bezier(.22, .72, .25, 1)
      }

      .slide {
         min-width: 100%;
         display: grid;
         grid-template-columns: 1.25fr .75fr
      }

      .browser {
         min-height: 480px;
         overflow: hidden;
         background: #e8f0f7
      }

      .browser-bar {
         height: 50px;
         display: flex;
         align-items: center;
         gap: 7px;
         padding: 0 16px;
         background: #f8fbfe;
         border-bottom: 1px solid var(--line)
      }

      .browser-bar>i {
         width: 9px;
         height: 9px;
         border-radius: 50%;
         background: #b9ccdc
      }

      .url {
         flex: 1;
         margin-left: 8px;
         padding: 7px 12px;
         color: var(--muted);
         background: #fff;
         border: 1px solid var(--line);
         border-radius: 7px;
         font-size: .72rem;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis
      }

      .preview {
         height: 430px;
         position: relative;
         overflow: hidden
      }

      .frame {
         position: absolute;
         left: 0;
         top: 0;
         width: 1280px;
         height: 900px;
         border: 0;
         transform: scale(.52);
         transform-origin: top left;
         pointer-events: none;
         background: #fff
      }

      .lock {
         position: absolute;
         inset: 0;
         z-index: 2;
         background: linear-gradient(180deg, transparent 72%, rgba(18, 58, 115, .12))
      }

      .preview-label {
         position: absolute;
         left: 16px;
         bottom: 14px;
         z-index: 3;
         padding: 7px 10px;
         color: var(--navy);
         background: rgba(255, 255, 255, .94);
         border: 1px solid var(--line);
         border-radius: 8px;
         font-size: .7rem;
         font-weight: 700
      }

      .project {
         display: flex;
         flex-direction: column;
         justify-content: center;
         padding: 44px;
         background: #0f407e
      }

      .tag {
         color: var(--blue);
         font-size: .76rem;
         font-weight: 800;
         text-transform: uppercase
      }

      .project h3 {
         margin: 9px 0 17px;
         color: #fff;
         font-size: 1.8rem
      }

      .project p {
         color: #c7dbed
      }

      .meta {
         display: grid;
         gap: 12px;
         margin: 12px 0 26px
      }

      .meta span {
         display: flex;
         gap: 9px;
         color: #d9e8f6;
         font-size: .87rem
      }

      .meta .icon {
         width: 17px;
         color: var(--blue)
      }

      .controls {
         display: flex;
         justify-content: space-between;
         margin-top: 20px
      }

      .portfolio-section .icon-btn {
         color: #fff;
         background: transparent;
         border-color: rgba(255, 255, 255, .32)
      }

      .portfolio-section .dot {
         background: #7595b5
      }

      .portfolio-section .dot.active {
         background: #42b8ff
      }

      .buttons,
      .dots {
         display: flex;
         gap: 8px
      }

      .dot {
         width: 9px;
         height: 9px;
         padding: 0;
         border: 0;
         border-radius: 50%;
         background: #bed2e6;
         transition: .2s
      }

      .dot.active {
         width: 27px;
         border-radius: 8px;
         background: var(--blue)
      }

      .demos,
      .plans-grid {
         display: grid;
         grid-template-columns: repeat(3, 1fr);
         gap: 20px
      }

      .demo {
         padding: 26px;
         background: #fff;
         border: 1px solid var(--line);
         border-radius: 16px
      }

      .demo-visual {
         min-height: 164px;
         display: grid;
         place-items: center;
         margin: -10px -10px 22px;
         color: var(--blue);
         background: var(--pale);
         border-radius: 11px
      }

      .demo-visual .icon {
         width: 52px;
         height: 52px;
         stroke-width: 1.3
      }

      .demo-product {
         position: relative;
         min-height: 116px;
         padding: 18px 24px 30px;
         cursor: pointer;
         overflow: hidden;
         transition: background .2s, box-shadow .2s
      }

      .demo-product img {
         width: min(76%, 250px);
         max-height: 76px;
         object-fit: contain;
         transition: transform .25s
      }

      .demo-product span {
         position: absolute;
         right: 9px;
         bottom: 8px;
         display: inline-flex;
         align-items: center;
         gap: 6px;
         padding: 5px 8px;
         color: #fff;
         background: var(--blue);
         border-radius: 6px;
         font-size: .66rem;
         font-weight: 750;
         transition: transform .2s, background .2s
      }

      .demo-product span .icon {
         width: 15px;
         height: 15px
      }

      .demo-product:hover,
      .demo-product:focus-visible {
         background: #deefff;
         box-shadow: inset 0 0 0 1px #8cc8f4
      }

      .demo-product:hover img {
         transform: scale(1.035)
      }

      .demo-product:hover span {
         background: var(--navy);
         transform: translateY(-2px)
      }

      .demo p {
         color: var(--muted);
         font-size: .9rem
      }

      .status {
         display: flex;
         align-items: center;
         gap: 7px;
         color: var(--muted);
         font-size: .77rem;
         font-weight: 750
      }

      .status:before {
         content: "";
         width: 7px;
         height: 7px;
         background: #9aafc2;
         border-radius: 50%
      }

      .status.available {
         color: var(--green)
      }

      .status.available:before {
         background: var(--green);
         box-shadow: 0 0 0 4px rgba(14, 148, 116, .12)
      }

      .plans {
         color: #fff;
         background: var(--navy)
      }

      .plans h2,
      .plans .eyebrow {
         color: #fff
      }

      .plans .lead {
         color: #c9def2
      }

      .plan {
         --plan-accent: #1473e6;
         --plan-soft: #eaf5ff;
         position: relative;
         display: flex;
         flex-direction: column;
         overflow: hidden;
         padding: 30px;
         color: var(--ink);
         background: #fff;
         border: 1px solid rgba(18, 58, 115, .14);
         border-top: 6px solid var(--plan-accent);
         border-radius: 8px;
         box-shadow: 0 18px 42px rgba(4, 28, 61, .18);
         transition: transform .25s ease, box-shadow .25s ease
      }

      .plan:nth-child(2) {
         --plan-accent: #0e9474;
         --plan-soft: #e8f7f2
      }

      .plan:nth-child(3) {
         --plan-accent: #cc5b3d;
         --plan-soft: #fff0eb
      }

      .plan.featured {
         transform: translateY(-10px);
         border: 1px solid var(--plan-accent);
         border-top: 6px solid var(--plan-accent);
         box-shadow: 0 24px 54px rgba(4, 28, 61, .26)
      }

      @media (hover:hover) {
         .plan:hover {
            transform: translateY(-8px);
            box-shadow: 0 28px 60px rgba(4, 28, 61, .28)
         }

         .plan.featured:hover {
            transform: translateY(-16px)
         }
      }

      .badge {
         position: absolute;
         top: -13px;
         right: 20px;
         padding: 6px 11px;
         color: #fff;
         background: var(--plan-accent);
         border-radius: 8px;
         font-size: .7rem;
         font-weight: 800
      }

      .plan-heading {
         display: flex;
         gap: 13px;
         align-items: center
      }

      .plan.featured .plan-heading {
         padding-right: 88px
      }

      .plan-icon {
         width: 46px;
         height: 46px;
         display: grid;
         flex: 0 0 46px;
         place-items: center;
         color: var(--plan-accent);
         background: var(--plan-soft);
         border-radius: 6px
      }

      .plan-icon .icon {
         width: 23px;
         height: 23px
      }

      .plan-heading>div>span {
         color: var(--muted);
         font-size: .68rem;
         font-weight: 700;
         text-transform: uppercase
      }

      .plan-name {
         margin: 1px 0 0;
         color: var(--plan-accent);
         font-size: 1.08rem;
         line-height: 1.2
      }

      .price {
         margin: 10px 0 5px;
         color: var(--navy);
         font-size: 2rem;
         font-weight: 800;
         line-height: 1
      }

      .price small {
         color: var(--muted);
         font-size: .78rem
      }

      .plan>p {
         margin: 16px 0 0;
         color: var(--muted);
         font-size: .87rem
      }

      .pricing-pair {
         margin: 18px 0 4px;
         border-top: 1px solid var(--line);
         border-bottom: 1px solid var(--line)
      }

      .payment-line {
         display: grid;
         grid-template-columns: minmax(0, 1fr) auto;
         gap: 2px 14px;
         align-items: end;
         padding: 14px 0
      }

      .payment-line+.payment-line {
         border-top: 1px solid var(--line)
      }

      .custom-quote-line+.payment-line {
         border-top: 1px solid var(--line)
      }

      .payment-line>span {
         color: var(--muted);
         font-size: .72rem;
         font-weight: 700;
         text-transform: uppercase
      }

      .payment-line strong {
         grid-column: 2;
         grid-row: 1 / span 2;
         color: var(--plan-accent);
         font-size: 1.65rem;
         line-height: 1.05;
         text-align: right;
         white-space: nowrap
      }

      .payment-line strong small {
         display: block;
         margin-bottom: 4px;
         color: var(--muted);
         font-size: .65rem;
         font-weight: 700
      }

      .payment-line em {
         color: var(--muted);
         font-size: .72rem;
         font-style: normal
      }

      .payment-line.monthly {
         margin: 0 -30px;
         padding-right: 30px;
         padding-left: 30px;
         background: var(--plan-soft)
      }

      .custom-quote-line {
         display: grid;
         gap: 4px;
         margin: 0 -30px;
         padding: 16px 30px;
         background: var(--plan-soft)
      }

      .custom-quote-line>span {
         color: var(--muted);
         font-size: .72rem;
         font-weight: 700;
         text-transform: uppercase
      }

      .custom-quote-line strong {
         color: var(--plan-accent);
         font-size: 1rem
      }

      .custom-quote-line em {
         color: var(--muted);
         font-size: .72rem;
         font-style: normal
      }

      .plan ul {
         display: grid;
         gap: 12px;
         padding: 0;
         margin: 18px 0 26px;
         list-style: none
      }

      .plan li {
         display: flex;
         gap: 9px;
         color: #345474;
         font-size: .86rem
      }

      .plan li .icon {
         width: 17px;
         color: var(--plan-accent)
      }

      .plan .btn {
         margin-top: auto;
         border-color: var(--plan-accent)
      }

      .plan .btn.secondary {
         color: var(--plan-accent)
      }

      .plan .btn.primary {
         color: #fff;
         background: var(--plan-accent)
      }

      .plans-note {
         max-width: 1040px;
         margin: 24px 0 0;
         margin-right: auto;
         margin-left: auto;
         color: #c9def2;
         font-size: .8rem;
         text-align: center
      }

      .quote {
         display: grid;
         grid-template-columns: .7fr 1.3fr;
         gap: 56px;
         align-items: center;
         padding: 50px;
         background: var(--pale);
         border: 1px solid var(--line);
         border-radius: 16px
      }

      .quote b {
         color: var(--sky);
         font-size: 7rem;
         line-height: .7
      }

      .quote p {
         margin: 0;
         color: var(--muted);
         font-size: 1.05rem
      }

      .contact {
         display: grid;
         grid-template-columns: .82fr 1.18fr;
         gap: 70px
      }

      .contact-list {
         display: grid;
         gap: 16px;
         margin-top: 28px
      }

      .contact-row {
         display: flex;
         align-items: center;
         gap: 13px;
         color: #345474
      }

      .contact-row .ibox {
         width: 38px;
         height: 38px;
         margin: 0
      }

      .form {
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 18px;
         padding: 30px;
         background: #fff;
         border: 1px solid var(--line);
         border-radius: 16px;
         box-shadow: var(--shadow)
      }

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

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

      label {
         color: var(--navy);
         font-size: .8rem;
         font-weight: 750
      }

      input,
      select,
      textarea {
         width: 100%;
         min-height: 46px;
         padding: 11px 13px;
         border: 1px solid #bfd5e8;
         border-radius: 9px;
         color: var(--ink);
         background: #fff
      }

      textarea {
         min-height: 118px;
         resize: vertical
      }

      input:focus,
      select:focus,
      textarea:focus {
         border-color: var(--blue);
         outline: 3px solid rgba(20, 115, 230, .1)
      }

      .form-status {
         min-height: 22px;
         margin: 0;
         color: var(--green);
         font-size: .8rem
      }

      footer {
         padding: 64px 0 24px;
         color: #d9e8f6;
         background: var(--deep)
      }

      .footer-grid {
         display: grid;
         grid-template-columns: 1.4fr repeat(3, 1fr);
         gap: 44px;
         padding-bottom: 44px
      }

      .footer-brand .brand-copy strong {
         color: #fff
      }

      .footer-brand .brand-copy small,
      .footer-brand p {
         color: #b8cee2
      }

      .social-links {
         display: flex;
         gap: 10px;
         margin-top: 18px
      }

      .social-links a {
         width: 38px;
         height: 38px;
         display: grid;
         place-items: center;
         background: #fff;
         border-radius: 50%;
         transition: transform .2s, background .2s
      }

      .social-links a:hover {
         transform: translateY(-2px);
         background: #eaf5ff
      }

      .social-links img {
         width: 19px;
         height: 19px
      }

      .footer-brand p {
         max-width: 330px;
         margin-top: 20px;
         font-size: .88rem
      }

      footer h3 {
         color: #fff;
         font-size: .9rem
      }

      .footer-links {
         display: grid;
         gap: 9px
      }

      .footer-links a,
      .footer-links span {
         color: #b8cee2;
         font-size: .82rem
      }

      .footer-links a:hover {
         color: #fff
      }

      .footer-bottom {
         display: flex;
         justify-content: space-between;
         gap: 20px;
         padding-top: 22px;
         border-top: 1px solid rgba(255, 255, 255, .13);
         color: #91aec9;
         font-size: .75rem
      }

      .floating {
         position: fixed;
         right: 22px;
         bottom: 22px;
         z-index: 40;
         min-width: 56px;
         height: 54px;
         display: flex;
         align-items: center;
         justify-content: center;
         gap: 9px;
         padding: 0 16px;
         color: #fff;
         background: #168c57;
         border-radius: 27px;
         box-shadow: 0 10px 25px rgba(16, 82, 72, .3);
         font-size: .78rem;
         font-weight: 700
      }

      .floating img {
         width: 25px;
         height: 25px
      }

      .reveal {
         opacity: 0;
         transform: translateY(24px);
         transition: opacity .65s, transform .65s
      }

      .reveal.visible {
         opacity: 1;
         transform: none
      }

      .delay1 {
         transition-delay: .08s
      }

      .delay2 {
         transition-delay: .16s
      }

      @media(max-width:1050px) {
         .nav {
            gap: 14px
         }

         .nav a {
            font-size: .79rem
         }

         .nav .btn {
            display: none
         }

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

         .technology-grid {
            grid-template-columns: repeat(4, minmax(0, 1fr))
         }

         .about,
         .contact {
            gap: 42px
         }

         .slide {
            grid-template-columns: 1.1fr .9fr
         }

         .frame {
            transform: scale(.44)
         }
      }

      @media(max-width:800px) {
         :root {
            --wrap: min(100% - 32px, 680px)
         }

         .section {
            padding: 72px 0
         }

         .menu {
            width: 44px;
            height: 44px;
            display: grid;
            place-items: center;
            margin-left: auto
         }

         .nav {
            position: fixed;
            inset: 76px 0 auto;
            display: grid;
            gap: 0;
            padding: 18px 24px 26px;
            background: #fff;
            border-bottom: 1px solid var(--line);
            box-shadow: var(--shadow);
            transform: translateY(-130%);
            opacity: 0;
            transition: .25s
         }

         .nav.open {
            transform: none;
            opacity: 1
         }

         .nav a {
            padding: 12px 0;
            font-size: .95rem
         }

         .hero {
            min-height: auto;
            background: #fff
         }

         .hero:after {
            background-position: 68% bottom;
            background-size: auto 54%;
            background-repeat: no-repeat
         }

         .hero-grid {
            min-height: 830px;
            grid-template-columns: 1fr;
            align-items: start
         }

         .hero-copy {
            padding: 64px 0 360px
         }

         .benefits {
            padding-top: 28px
         }

         .benefit-grid {
            grid-template-columns: repeat(2, 1fr)
         }

         .benefit:nth-child(2) {
            border-right: 0
         }

         .benefit:nth-child(-n+2) {
            border-bottom: 1px solid var(--line)
         }

         .about,
         .contact,
         .quote {
            grid-template-columns: 1fr
         }

         .about-photo {
            min-height: 430px;
            order: 2
         }

         .process {
            grid-template-columns: 1fr;
            gap: 24px
         }

         .process:before {
            top: 20px;
            bottom: 20px;
            left: 26px;
            right: auto;
            width: 2px;
            height: auto
         }

         .step {
            display: grid;
            grid-template-columns: 54px 1fr;
            gap: 17px;
            text-align: left
         }

         .step b {
            width: 52px;
            height: 52px;
            margin: 0
         }

         .step p {
            grid-column: 2;
            margin-top: -29px
         }

         .slide {
            grid-template-columns: 1fr
         }

         .browser {
            min-height: 340px
         }

         .preview {
            height: 290px
         }

         .frame {
            transform: scale(.36)
         }

         .project {
            padding: 32px
         }

         .demos,
         .plans-grid {
            grid-template-columns: 1fr
         }

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

         .plan.featured {
            transform: none
         }

         .footer-grid {
            grid-template-columns: repeat(2, 1fr)
         }
      }

      @media(max-width:560px) {
         :root {
            --wrap: calc(100% - 28px)
         }

         h1 {
            font-size: 2.45rem
         }

         h2 {
            font-size: 2rem
         }

         .brand-copy small {
            display: none
         }

         .hero-copy {
            padding-top: 52px
         }

         .actions {
            display: grid
         }

         .actions .btn {
            width: 100%
         }

         .proof {
            align-items: center
         }

         .benefit-grid,
         .services {
            grid-template-columns: 1fr
         }

         .client-logos {
            gap: 34px
         }

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

         .benefit {
            border-right: 0;
            border-bottom: 1px solid var(--line)
         }

         .about-photo {
            min-height: 360px
         }

         .photo-note {
            left: 14px;
            right: 14px;
            bottom: 14px
         }

         .browser {
            min-height: 290px
         }

         .preview {
            height: 240px
         }

         .frame {
            transform: scale(.29)
         }

         .project {
            padding: 26px 22px
         }

         .project h3 {
            font-size: 1.5rem
         }

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

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

         .quote {
            padding: 30px 24px;
            gap: 18px
         }

         .footer-grid {
            grid-template-columns: 1fr;
            gap: 30px
         }

         .footer-bottom {
            flex-direction: column
         }

         .floating {
            right: 15px;
            bottom: 15px;
            width: 54px;
            padding: 0
         }

         .floating span {
            position: absolute;
            width: 1px;
            height: 1px;
            overflow: hidden;
            clip: rect(0 0 0 0)
         }
      }

      @media(prefers-reduced-motion:reduce) {
         html {
            scroll-behavior: auto
         }

         *,
         *:before,
         *:after {
            transition-duration: .01ms !important
         }

         .reveal {
            opacity: 1;
            transform: none
         }
      }

/* Formulario */
.privacy-checkbox {
   width: auto;
   min-height: auto;
   margin-right: 7px;
}

.privacy-link {
   color: var(--blue);
   text-decoration: underline;
}

/* Preguntas frecuentes */
.faq-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 16px;
   align-items: start;
}

.faq-item {
   padding: 0 22px;
   background: var(--white);
   border: 1px solid var(--line);
   border-radius: 14px;
   transition: border-color .22s ease, box-shadow .22s ease;
}

.faq-item[open] {
   border-color: #91c8f4;
   box-shadow: var(--shadow);
}

.faq-item summary {
   min-height: 76px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 18px;
   color: var(--navy);
   font-size: .96rem;
   font-weight: 750;
   line-height: 1.4;
   list-style: none;
   cursor: pointer;
}

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

.faq-item summary .icon {
   flex: 0 0 auto;
   color: var(--blue);
   transition: transform .22s ease;
}

.faq-item[open] summary .icon {
   transform: rotate(45deg);
}

.faq-item p {
   margin: -2px 0 22px;
   color: var(--muted);
   font-size: .9rem;
}

.bot-field {
   position: absolute !important;
   left: -10000px !important;
   width: 1px !important;
   height: 1px !important;
   overflow: hidden !important;
}

.form-submit[disabled] {
   cursor: wait;
   opacity: .72;
   transform: none;
}

.form-status.is-error {
   color: #b42318;
}

.form-status.is-success {
   color: var(--green);
}

/* Aviso de cookies */
.cookie-notice[hidden] {
   display: none;
}

.cookie-notice {
   position: fixed;
   right: 0;
   bottom: 0;
   left: 0;
   z-index: 1200;
   color: var(--ink);
   background: rgba(255, 255, 255, .98);
   border-top: 4px solid var(--blue);
   box-shadow: 0 -18px 42px rgba(4, 28, 61, .18);
}

.cookie-notice-inner {
   min-height: 112px;
   display: grid;
   grid-template-columns: 48px minmax(0, 1fr) auto;
   gap: 18px;
   align-items: center;
   padding-top: 18px;
   padding-bottom: 18px;
}

.cookie-notice-icon {
   width: 48px;
   height: 48px;
   display: grid;
   place-items: center;
   color: var(--blue);
   background: var(--pale);
   border-radius: 6px;
}

.cookie-notice-icon .icon {
   width: 24px;
   height: 24px;
}

.cookie-notice-copy strong {
   display: block;
   margin-bottom: 3px;
   color: var(--navy);
   font-size: .96rem;
}

.cookie-notice-copy p {
   margin: 0;
   color: var(--muted);
   font-size: .82rem;
   line-height: 1.55;
}

.cookie-notice-copy a {
   color: var(--blue);
   font-weight: 700;
   text-decoration: underline;
   text-underline-offset: 2px;
}

.cookie-accept {
   min-width: 118px;
}

.cookie-notice-open .floating {
   opacity: 0;
   pointer-events: none;
}

@media (max-width: 800px) {
   .faq-grid {
      grid-template-columns: 1fr;
   }

   .cookie-notice-inner {
      grid-template-columns: 42px minmax(0, 1fr);
      gap: 12px;
      padding-top: 16px;
      padding-bottom: 16px;
   }

   .cookie-notice-icon {
      width: 42px;
      height: 42px;
   }

   .cookie-accept {
      width: 100%;
      grid-column: 1 / -1;
   }
}

/* DY Cloud */
.nav .nav-cloud {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   color: var(--blue);
}

.nav-cloud span {
   padding: 2px 6px;
   color: #087257;
   background: #dff7ef;
   border: 1px solid #a8e1d2;
   border-radius: 5px;
   font-size: .56rem;
   font-weight: 800;
   text-transform: uppercase;
}

.service-subtitle {
   display: block;
   margin: -8px 0 8px;
   color: var(--green);
   font-size: .72rem;
   font-weight: 800;
   text-transform: uppercase;
}

.cloud-service {
   min-height: 430px;
   padding-bottom: 76px;
   grid-column: 2;
   border-top: 4px solid var(--green);
   box-shadow: 0 16px 42px rgba(18, 58, 115, .09);
}

.cloud-service .ibox {
   color: #087257;
   background: #dff7ef;
}

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

.service.has-highlights {
   min-height: 430px;
   padding-bottom: 76px;
}

.service-highlights span {
   min-width: 0;
   padding: 8px 9px;
   color: #315d59;
   background: #edf9f5;
   border: 1px solid #c5e9de;
   border-radius: 5px;
   font-size: .7rem;
   font-weight: 700;
   line-height: 1.35;
   text-align: center;
   overflow-wrap: anywhere;
}

.cloud-section {
   position: relative;
   color: var(--ink);
   background: #eff9f7;
   border-block: 1px solid #cde7e1;
   overflow: hidden;
}

.cloud-intro {
   max-width: 1120px;
   margin: 0 auto;
}

.cloud-intro>div:first-child {
   max-width: 880px;
   margin: 0 auto 46px;
   text-align: center;
}

.cloud-intro h2 {
   max-width: 820px;
   margin-inline: auto;
}

.cloud-intro .lead {
   max-width: 760px;
   margin-inline: auto;
}

.cloud-intro .actions {
   justify-content: center;
}

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

.cloud-features>div {
   min-width: 0;
   min-height: 132px;
   display: grid;
   align-content: center;
   justify-items: center;
   gap: 12px;
   padding: 20px 14px;
   background: rgba(255, 255, 255, .82);
   border: 1px solid #cde7e1;
   border-radius: 8px;
   text-align: center;
   box-shadow: 0 10px 28px rgba(18, 58, 115, .055);
}

.cloud-features .ibox {
   width: 38px;
   height: 38px;
   flex: 0 0 auto;
   margin: 0;
   color: #087257;
   background: #d9f3ec;
   border-radius: 7px;
}

.cloud-features strong {
   color: var(--navy);
   font-size: .82rem;
   line-height: 1.4;
   overflow-wrap: anywhere;
}

.cloud-builder {
   max-width: 1120px;
   margin: 52px auto 0;
   padding-top: 38px;
   border-top: 1px solid #b9ddd4;
}

.cloud-builder header {
   display: grid;
   grid-template-columns: 48px minmax(0, 1fr);
   gap: 16px;
   align-items: start;
   max-width: 780px;
   margin-bottom: 30px;
}

.cloud-builder header .ibox {
   margin: 0;
   color: #087257;
   background: #d9f3ec;
}

.cloud-builder h3 {
   margin-bottom: 7px;
   font-size: 1.35rem;
}

.cloud-builder header p {
   margin: 0;
   color: var(--muted);
   font-size: .9rem;
}

.cloud-builder ol {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 26px;
   margin: 0;
   padding: 0;
   list-style: none;
}

.cloud-builder li {
   display: grid;
   grid-template-columns: 38px minmax(0, 1fr);
   gap: 12px;
   padding-left: 18px;
   border-left: 2px solid #8fd1c0;
}

.cloud-builder li b {
   width: 34px;
   height: 34px;
   display: grid;
   place-items: center;
   color: #fff;
   background: var(--green);
   border-radius: 50%;
   font-size: .78rem;
}

.cloud-builder li strong,
.cloud-builder li span {
   display: block;
}

.cloud-builder li strong {
   color: var(--navy);
   font-size: .9rem;
}

.cloud-builder li span {
   margin-top: 4px;
   color: var(--muted);
   font-size: .78rem;
   line-height: 1.5;
}

.cloud-final {
   padding: 76px 0;
   color: #d9e8f6;
   background: var(--deep);
}

.cloud-final-inner {
   max-width: 980px;
   display: grid;
   align-items: center;
   justify-items: center;
   gap: 28px;
   text-align: center;
}

.cloud-final h2 {
   max-width: 820px;
   margin: 0 auto 12px;
   color: #fff;
   font-size: clamp(1.9rem, 3vw, 2.7rem);
}

.cloud-final p:not(.eyebrow) {
   max-width: 720px;
   margin: 0 auto;
   color: #b8cee2;
}

.cloud-final .actions {
   justify-content: center;
}

.cloud-final .secondary {
   color: #fff;
   background: transparent;
   border-color: rgba(255, 255, 255, .52);
}

@media (max-width: 1050px) {
   .cloud-service {
      width: calc(50% - 10px);
      grid-column: 1 / -1;
      justify-self: center;
   }

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

   .cloud-final-inner {
      max-width: 820px;
   }

   .cloud-final .actions {
      justify-content: center;
   }
}

@media (max-width: 800px) {
   .cloud-intro>div:first-child {
      margin-bottom: 34px;
   }

   .cloud-builder ol {
      grid-template-columns: 1fr;
   }

   .cloud-builder li {
      min-height: 64px;
   }
}

@media (max-width: 560px) {
   .cloud-service {
      width: 100%;
      grid-column: auto;
   }

   .cloud-features {
      grid-template-columns: 1fr;
   }

   .cloud-features>div {
      min-height: 92px;
      grid-template-columns: 42px minmax(0, 1fr);
      justify-items: start;
      padding: 16px;
      text-align: left;
   }

   .cloud-intro .actions,
   .cloud-intro .btn {
      width: 100%;
   }

   .service-highlights {
      grid-template-columns: 1fr;
   }

   .cloud-service {
      min-height: 520px;
   }

   .service.has-highlights {
      min-height: 520px;
   }

   .cloud-builder header {
      grid-template-columns: 42px minmax(0, 1fr);
   }

   .cloud-final .actions,
   .cloud-final .btn {
      width: 100%;
   }
}