/* =========================================================
       ROOT
    ========================================================= */

    :root {

      --bg: #f7f8f5;
      --paper: #ffffff;

      --ink: #111216;
      --muted: #73767b;
      --soft: #a5a8ad;

      --line: #e3e6e1;

      --blue: #2463df;
      --blue-dark: #1956d0;

      --lime: #efff39;

      --dark: #111316;

      --shadow:
        0 18px 50px rgba(20, 25, 30, .07);

      --shadow-lg:
        0 30px 90px rgba(20, 25, 30, .12);

      --mono: "DM Mono", monospace;
      --sans: "Inter", sans-serif;

      --radius: 22px;

      --max: 1280px;

    }


    /* =========================================================
       RESET
    ========================================================= */

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }


    html {
      scroll-behavior: smooth;
      background: var(--bg);
    }


    body {

      background: var(--bg);

      color: var(--ink);

      font-family: var(--sans);

      overflow-x: hidden;

      -webkit-font-smoothing: antialiased;

    }


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


    button,
    input,
    textarea {
      font: inherit;
    }


    ::selection {
      background: var(--ink);
      color: #fff;
    }


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


    /* =========================================================
       CONTAINER
    ========================================================= */

    .container {

      width:
        min(
          var(--max),
          calc(100% - 48px)
        );

      margin: auto;

    }


    /* =========================================================
       BACKGROUND
    ========================================================= */

    .page-grid {

      position: fixed;

      inset: 0;

      z-index: -10;

      pointer-events: none;

      background-image:

        linear-gradient(
          to right,
          rgba(25, 35, 45, .045) 1px,
          transparent 1px
        ),

        linear-gradient(
          to bottom,
          rgba(25, 35, 45, .045) 1px,
          transparent 1px
        );

      background-size: 72px 72px;

      mask-image:
        linear-gradient(
          to bottom,
          black 0%,
          rgba(0,0,0,.55) 55%,
          transparent 100%
        );

    }


    .page-glow {

      position: fixed;

      width: 680px;
      height: 680px;

      border-radius: 50%;

      left: 50%;
      top: 430px;

      transform:
        translate(-50%, -50%);

      z-index: -9;

      pointer-events: none;

      background:
        radial-gradient(
          circle,
          var(--lime) 0%,
          rgba(239,255,57,.70) 18%,
          rgba(239,255,57,.20) 42%,
          transparent 70%
        );

      filter: blur(4px);

      opacity: .42;

    }


    /* =========================================================
       HEADER
    ========================================================= */

    header {

      position: fixed;

      top: 0;
      left: 0;
      right: 0;

      z-index: 100;

      padding: 14px 0;

      transition: .3s ease;

    }


    .nav {

      height: 60px;

      padding:
        0 10px
        0 16px;

      display: flex;

      align-items: center;

      justify-content: space-between;

      background:
        rgba(255,255,255,.74);

      border:
        1px solid
        rgba(210,215,220,.78);

      border-radius: 17px;

      backdrop-filter: blur(18px);

      transition: .3s ease;

    }


    header.scrolled .nav {

      background:
        rgba(255,255,255,.92);

      box-shadow:
        0 10px 35px rgba(0,0,0,.08);

    }


    /* BRAND */

    .brand {

      display: flex;

      align-items: center;

      gap: 10px;

      font-weight: 700;

      font-size: 14px;

      letter-spacing: -.035em;

      white-space: nowrap;

    }


    .brand-mark {

      width: 32px;
      height: 32px;

      display: grid;

      place-items: center;

      background: var(--ink);

      color: white;

      border-radius: 9px;

      font-family: var(--mono);

      font-size: 10px;

      font-weight: 500;

    }


    .brand-handle {

      color: var(--muted);

      font-family: var(--mono);

      font-size: 9px;

      font-weight: 400;

    }


    /* NAV LINKS */

    .nav-links {

      display: flex;

      gap: 27px;

      list-style: none;

      margin-left: auto;

      margin-right: 32px;

    }


    .nav-links a {

      font-size: 12px;

      color: #5e6268;

      transition: .2s ease;

    }


    .nav-links a:hover {

      color: var(--ink);

    }


    .nav-cta {

      padding:
        10px 17px;

      border-radius: 11px;

      background: var(--blue);

      color: white;

      border:
        1px solid
        var(--blue);

      font-size: 12px;

      font-weight: 600;

      transition: .25s ease;

    }


    .nav-cta:hover {

      transform: translateY(-2px);

      background: var(--blue-dark);

    }


    /* MOBILE MENU */

    .menu-button {

      display: none;

      width: 40px;
      height: 40px;

      border: 1px solid var(--line);

      background: white;

      border-radius: 11px;

      cursor: pointer;

      align-items: center;
      justify-content: center;

    }


    .mobile-menu {

      display: none;

      position: absolute;

      top: 70px;

      left: 14px;
      right: 14px;

      background:
        rgba(255,255,255,.96);

      border:
        1px solid var(--line);

      border-radius: 18px;

      padding: 10px;

      box-shadow: var(--shadow-lg);

      backdrop-filter: blur(18px);

    }


    .mobile-menu.active {
      display: block;
    }


    .mobile-menu a {

      display: block;

      padding: 15px;

      border-radius: 12px;

      font-size: 14px;

    }


    .mobile-menu a:hover {

      background: #f4f5f2;

    }


    /* =========================================================
       HERO
    ========================================================= */

    .hero {

      min-height: 100vh;

      min-height: 100svh;

      padding:
        150px 0
        80px;

      position: relative;

      overflow: hidden;

    }


    .hero::before {

      content: "";

      position: absolute;

      inset: 0;

      z-index: -2;

      background:

        linear-gradient(
          90deg,
          transparent 49.9%,
          rgba(100,110,120,.08) 50%,
          transparent 50.1%
        ),

        linear-gradient(
          0deg,
          transparent 49.9%,
          rgba(100,110,120,.06) 50%,
          transparent 50.1%
        );

    }


    .radial-field {

      position: absolute;

      left: 50%;

      top: 390px;

      width:
        min(1180px, 92vw);

      height: 620px;

      transform:
        translateX(-50%);

      z-index: -1;

      overflow: hidden;

      pointer-events: none;

    }


    .radial-field::before {

      content: "";

      position: absolute;

      left: 50%;
      top: 50%;

      width: 110%;
      height: 110%;

      transform:
        translate(-50%, -20%);

      background:

        repeating-radial-gradient(
          ellipse at center,
          rgba(65,112,230,.15) 0 1px,
          transparent 1px 70px
        );

      opacity: .65;

    }


    .radial-field::after {

      content: "";

      position: absolute;

      inset: 0;

      background:

        linear-gradient(
          90deg,
          rgba(255,255,255,.5),
          transparent 30%,
          transparent 70%,
          rgba(255,255,255,.5)
        );

    }


    .hero-meta {

      display: flex;

      justify-content: center;

      align-items: center;

      gap: 10px;

      color: #555a60;

      font-family: var(--mono);

      font-size: 10px;

      letter-spacing: .12em;

      text-transform: uppercase;

      margin-bottom: 28px;

      text-align: center;

    }


    .meta-symbol {

      color: var(--blue);

      font-weight: 500;

    }


    .live-dot {

      width: 7px;
      height: 7px;

      border-radius: 50%;

      background: var(--blue);

      box-shadow:
        0 0 0 4px
        rgba(36,99,223,.1);

      animation: pulse 2s infinite;

    }


    @keyframes pulse {

      0%,100% {
        opacity: 1;
      }

      50% {
        opacity: .35;
      }

    }


    .hero-title {

      max-width: 1150px;

      margin: auto;

      text-align: center;

      font-size:
        clamp(
          3.1rem,
          7.7vw,
          7.7rem
        );

      line-height: .91;

      letter-spacing: -.078em;

      font-weight: 700;

    }


    .hero-title .accent {

      color: var(--blue);

    }


    .hero-sub {

      text-align: center;

      font-size: 17px;

      line-height: 1.55;

      max-width: 670px;

      margin:
        30px auto 0;

      color: #303238;

    }


    .hero-handle {

      margin-top: 21px;

      text-align: center;

      font-family: var(--mono);

      color: #96999d;

      font-size: 9px;

      letter-spacing: .18em;

      text-transform: uppercase;

    }


    /* HERO CTA */

    .hero-actions {

      display: flex;

      justify-content: center;

      gap: 10px;

      margin-top: 30px;

      flex-wrap: wrap;

    }


    .button-primary {

      display: inline-flex;

      align-items: center;

      justify-content: center;

      gap: 9px;

      padding:
        13px 19px;

      background: var(--blue);

      color: white;

      border-radius: 12px;

      font-size: 12px;

      font-weight: 600;

      transition: .25s ease;

    }


    .button-primary:hover {

      transform: translateY(-3px);

      background: var(--blue-dark);

      box-shadow:
        0 12px 30px
        rgba(36,99,223,.18);

    }


    .button-secondary {

      display: inline-flex;

      align-items: center;

      justify-content: center;

      gap: 9px;

      padding:
        13px 19px;

      background: white;

      border:
        1px solid var(--line);

      color: var(--ink);

      border-radius: 12px;

      font-size: 12px;

      font-weight: 600;

      transition: .25s ease;

    }


    .button-secondary:hover {

      transform: translateY(-3px);

      border-color: #c9ced2;

      box-shadow: var(--shadow);

    }


    /* HERO CARDS */

    .hero-dashboard {

      position: relative;

      width:
        min(1040px,100%);

      margin:
        55px auto 0;

      display: grid;

      grid-template-columns:
        1fr 1fr 1fr;

      gap: 10px;

    }


    .hero-card {

      background:
        rgba(255,255,255,.90);

      border:
        1px solid #e1e5e1;

      border-radius: 18px;

      padding: 23px;

      min-height: 185px;

      box-shadow:
        0 15px 45px
        rgba(20,30,40,.05);

      text-align: left;

      transition: .3s ease;

    }


    .hero-card:hover {

      transform:
        translateY(-5px);

      box-shadow:
        var(--shadow-lg);

    }


    .hero-card.blue {

      background: var(--blue);

      color: white;

      border-color: var(--blue);

    }


    .hero-card.lime {

      background: var(--lime);

    }


    .eyebrow {

      font-family: var(--mono);

      font-size: 9px;

      letter-spacing: .15em;

      text-transform: uppercase;

      color: #878b90;

    }


    .blue .eyebrow {

      color:
        rgba(255,255,255,.72);

    }


    .hero-stat {

      margin-top: 24px;

      font-size: 48px;

      line-height: .9;

      letter-spacing: -.06em;

      font-weight: 700;

    }


    .hero-card-title {

      margin-top: 22px;

      font-size: 25px;

      line-height: 1;

      letter-spacing: -.045em;

    }


    .hero-card p {

      margin-top: 18px;

      color: #71757a;

      font-size: 12px;

      line-height: 1.6;

    }


    .blue p {

      color:
        rgba(255,255,255,.78);

    }


    /* =========================================================
       GENERAL SECTION
    ========================================================= */

    section {
      position: relative;
    }


    .section {

      padding:
        130px 0;

    }


    .section-top {

      display: grid;

      grid-template-columns:
        170px
        1fr
        360px;

      align-items: start;

      gap: 20px;

      margin-bottom: 55px;

    }


    .section-code {

      font-family: var(--mono);

      color: var(--blue);

      font-size: 10px;

      white-space: nowrap;

      padding-top: 7px;

    }


    .section-heading {

      font-size:
        clamp(
          2.5rem,
          5vw,
          5.3rem
        );

      line-height: .94;

      letter-spacing: -.065em;

      font-weight: 700;

    }


    .section-intro {

      color: var(--muted);

      font-size: 13px;

      line-height: 1.8;

      padding-top: 8px;

    }


    .rule {

      height: 1px;

      background: var(--line);

      margin-top: 35px;

    }


    /* =========================================================
       SERVICES
    ========================================================= */

    .services-list {

      border-top:
        1px solid var(--line);

    }


    .service-item {

      display: grid;

      grid-template-columns:
        80px
        1fr
        330px
        50px;

      gap: 20px;

      align-items: center;

      padding:
        33px 0;

      border-bottom:
        1px solid var(--line);

      transition: .35s ease;

    }


    .service-item:hover {

      padding-left: 14px;
      padding-right: 14px;

      background:
        rgba(255,255,255,.58);

    }


    .service-number {

      font-family: var(--mono);

      color: #9a9da2;

      font-size: 9px;

    }


    .service-name {

      font-size:
        clamp(
          1.6rem,
          3.1vw,
          3.7rem
        );

      line-height: 1;

      letter-spacing: -.055em;

    }


    .service-description {

      color: var(--muted);

      font-size: 12px;

      line-height: 1.65;

    }


    .service-arrow {

      justify-self: end;

      width: 40px;
      height: 40px;

      display: grid;

      place-items: center;

      border:
        1px solid var(--line);

      border-radius: 50%;

      transition: .25s ease;

    }


    .service-item:hover .service-arrow {

      background: var(--blue);

      color: white;

      border-color: var(--blue);

      transform:
        rotate(-45deg);

    }


    /* =========================================================
       AI SECTION
    ========================================================= */

    .ai-section {

      padding:
        100px 0;

    }


    .ai-box {

      display: grid;

      grid-template-columns:
        1.05fr
        .95fr;

      gap: 14px;

    }


    .ai-main {

      background: var(--dark);

      color: white;

      border-radius: 24px;

      padding: 42px;

      min-height: 480px;

      position: relative;

      overflow: hidden;

    }


    .ai-main::before {

      content: "";

      position: absolute;

      width: 480px;
      height: 480px;

      right: -130px;
      bottom: -170px;

      border-radius: 50%;

      border:
        1px solid
        rgba(255,255,255,.15);

      box-shadow:

        0 0 0 60px
        rgba(255,255,255,.025),

        0 0 0 120px
        rgba(255,255,255,.02);

    }


    .ai-label {

      font-family: var(--mono);

      font-size: 9px;

      color:
        rgba(255,255,255,.52);

      text-transform: uppercase;

      letter-spacing: .15em;

    }


    .ai-main h3 {

      margin-top: 75px;

      max-width: 650px;

      font-size:
        clamp(
          2.7rem,
          5.5vw,
          6rem
        );

      line-height: .91;

      letter-spacing: -.07em;

    }


    .ai-main h3 span {

      color: var(--lime);

    }


    .ai-main p {

      margin-top: 27px;

      max-width: 530px;

      color:
        rgba(255,255,255,.60);

      font-size: 13px;

      line-height: 1.75;

    }


    .ai-services {

      display: grid;

      gap: 14px;

    }


    .ai-service {

      background: var(--lime);

      border-radius: 22px;

      padding: 27px;

      min-height: 146px;

      transition: .3s ease;

    }


    .ai-service:hover {

      transform:
        translateX(-5px);

      box-shadow:
        var(--shadow);

    }


    .ai-service:nth-child(2) {

      background: white;

      border:
        1px solid var(--line);

    }


    .ai-service:nth-child(3) {

      background: var(--blue);

      color: white;

    }


    .ai-service-label {

      font-family: var(--mono);

      font-size: 9px;

      color: #777;

      letter-spacing: .12em;

      text-transform: uppercase;

    }


    .ai-service:nth-child(3)
    .ai-service-label {

      color:
        rgba(255,255,255,.62);

    }


    .ai-service h4 {

      margin-top: 28px;

      font-size: 23px;

      letter-spacing: -.045em;

    }


    .ai-service p {

      margin-top: 9px;

      font-size: 11px;

      line-height: 1.6;

      color: #6e7277;

    }


    .ai-service:nth-child(3) p {

      color:
        rgba(255,255,255,.70);

    }


    /* =========================================================
       WORK
    ========================================================= */

    .work-grid {

      display: grid;

      gap: 14px;

    }


    .work-card {

      display: grid;

      grid-template-columns:
        85px
        1fr
        1fr;

      gap: 30px;

      padding: 24px;

      min-height: 430px;

      border:
        1px solid var(--line);

      border-radius: 22px;

      background:
        rgba(255,255,255,.78);

      overflow: hidden;

      transition: .35s ease;

    }


    .work-card:hover {

      border-color: #cbd0d4;

      box-shadow: var(--shadow);

      transform:
        translateY(-3px);

    }


    .work-index {

      font-family: var(--mono);

      color: #9a9da2;

      font-size: 9px;

    }


    .work-index strong {

      color: var(--blue);

      font-weight: 500;

    }


    .work-content {

      padding: 18px 0;

      display: flex;

      flex-direction: column;

      justify-content: center;

    }


    .work-tag {

      font-family: var(--mono);

      color: var(--blue);

      font-size: 9px;

      text-transform: uppercase;

      letter-spacing: .12em;

      margin-bottom: 16px;

    }


    .work-title {

      font-size:
        clamp(
          2rem,
          4vw,
          4.6rem
        );

      line-height: .92;

      letter-spacing: -.065em;

    }


    .work-desc {

      margin-top: 24px;

      max-width: 470px;

      color: #70747a;

      font-size: 12px;

      line-height: 1.75;

    }


    .pills {

      display: flex;

      flex-wrap: wrap;

      gap: 7px;

      margin-top: 24px;

    }


    .pill {

      border:
        1px solid var(--line);

      background: #fafbf9;

      border-radius: 999px;

      padding:
        7px 10px;

      font-family: var(--mono);

      color: #777b80;

      font-size: 8px;

    }


    /* PROJECT VISUAL */

    .work-visual {

      min-height: 300px;

      border:
        1px solid #dfe3df;

      border-radius: 18px;

      position: relative;

      overflow: hidden;

      display: flex;

      align-items: center;

      justify-content: center;

      background:

        #161616

    }


    .visual-grid {

      position: absolute;

      inset: 0;

      background:

        linear-gradient(
          to right,
          rgba(0,0,0,.06) 1px,
          transparent 1px
        ),

        linear-gradient(
          to bottom,
          rgba(0,0,0,.06) 1px,
          transparent 1px
        );

      background-size: 30px 30px;

      transform:
        perspective(500px)
        rotateX(60deg)
        scale(1.5);

      transform-origin:
        center bottom;

    }


    .visual-orb {

      width: 150px;
      height: 150px;

      border-radius: 50%;

      position: relative;

      z-index: 2;

      background:

        radial-gradient(
          circle at 35% 30%,
          #fff 0 5%,
          #b7c4d4 20%,
          #456b9d 48%,
          #172438 75%,
          #090e16 100%
        );

      box-shadow:

        inset
        -22px -25px 45px
        rgba(0,0,0,.55),

        0 25px 60px
        rgba(40,65,100,.25);

      animation:
        float 5s ease-in-out infinite;

    }


    .visual-orb::after {

      content: "";

      position: absolute;

      inset: -18px;

      border:
        1px solid
        rgba(36,99,223,.25);

      border-radius: 50%;

      transform:
        rotateX(65deg);

    }


    .visual-label {

      position: absolute;

      left: 15px;
      bottom: 13px;

      z-index: 3;

      font-family: var(--mono);

      font-size: 8px;

      color: #ffffff00;

    }


    @keyframes float {

      0%,100% {
        transform:
          translateY(0)
          rotate(0);
      }

      50% {
        transform:
          translateY(-10px)
          rotate(4deg);
      }

    }


    /* PROJECT THEMES */

    .work-card:nth-child(2)
    .work-visual {

      background: #161616;

    }


    .work-card:nth-child(2)
    .visual-grid {

      opacity: .15;

      background-image:

        linear-gradient(
          to right,
          rgba(255,255,255,.12) 1px,
          transparent 1px
        ),

        linear-gradient(
          to bottom,
          rgba(255,255,255,.12) 1px,
          transparent 1px
        );

    }


    .work-card:nth-child(2)
    .visual-orb {

      background:

        radial-gradient(
          circle at 35% 30%,
          #fff 0 4%,
          #f0f1f2 18%,
          #4e5258 45%,
          #151515 75%,
          #050505
        );

    }


    .work-card:nth-child(3)
    .work-visual {

      background:
        #161616;

    }


    .work-card:nth-child(3)
    .visual-orb {

      background:

        radial-gradient(
          circle at 35% 30%,
          #fff 0 5%,
          #c9d9cf 18%,
          #3f7760 47%,
          #17352b 75%,
          #08130f
        );

    }


    /* =========================================================
       WHY WAGONCLOUD
    ========================================================= */

    .why-grid {

      display: grid;

      grid-template-columns:
        1fr 1fr;

      gap: 14px;

    }


    .why-card {

      border:
        1px solid var(--line);

      border-radius: 22px;

      padding: 30px;

      background:
        rgba(255,255,255,.72);

      min-height: 260px;

      transition: .3s ease;

    }


    .why-card:hover {

      transform:
        translateY(-4px);

      box-shadow: var(--shadow);

    }


    .why-card.blue {

      background: var(--blue);

      color: white;

      border-color: var(--blue);

    }


    .why-card.lime {

      background: var(--lime);

    }


    .why-number {

      font-family: var(--mono);

      font-size: 9px;

      color: #888c91;

    }


    .blue .why-number {

      color:
        rgba(255,255,255,.60);

    }


    .why-card h3 {

      margin-top: 55px;

      font-size:
        clamp(
          2rem,
          3.5vw,
          4rem
        );

      line-height: .93;

      letter-spacing: -.06em;

    }


    .why-card p {

      margin-top: 20px;

      color: #70747a;

      font-size: 12px;

      line-height: 1.75;

      max-width: 460px;

    }


    .blue p {

      color:
        rgba(255,255,255,.74);

    }


    /* =========================================================
       PROCESS
    ========================================================= */

    .process {

      border-top:
        1px solid var(--line);

    }


    .process-row {

      display: grid;

      grid-template-columns:
        100px
        1fr
        1fr
        120px;

      gap: 25px;

      padding:
        28px 0;

      border-bottom:
        1px solid var(--line);

      align-items: center;

    }


    .process-number {

      font-family: var(--mono);

      font-size: 10px;

      color: var(--blue);

    }


    .process-title {

      font-size: 22px;

      letter-spacing: -.04em;

    }


    .process-copy {

      color: #777b80;

      font-size: 11px;

      line-height: 1.6;

    }


    .process-status {

      justify-self: end;

      font-family: var(--mono);

      font-size: 8px;

      color: #8a8e93;

    }


    /* =========================================================
       TESTIMONIALS
    ========================================================= */

    .reviews {

      display: grid;

      grid-template-columns:
        1fr 1fr;

      gap: 14px;

    }


    .review-card {

      padding: 34px;

      border:
        1px solid var(--line);

      border-radius: 22px;

      background: white;

      min-height: 300px;

      display: flex;

      flex-direction: column;

      justify-content: space-between;

      transition: .3s ease;

    }


    .review-card:hover {

      transform:
        translateY(-4px);

      box-shadow: var(--shadow);

    }


    .review-mark {

      font-size: 44px;

      line-height: .7;

      color: var(--blue);

      font-family: Georgia, serif;

    }


    .review-text {

      margin-top: 20px;

      font-size:
        clamp(
          1.3rem,
          2.1vw,
          2rem
        );

      line-height: 1.12;

      letter-spacing: -.04em;

      max-width: 650px;

    }


    .review-author {

      display: flex;

      align-items: center;

      gap: 12px;

      margin-top: 30px;

    }


    .review-avatar {

      width: 38px;
      height: 38px;

      display: grid;

      place-items: center;

      background: var(--ink);

      color: white;

      border-radius: 50%;

      font-family: var(--mono);

      font-size: 9px;

    }


    .review-author strong {

      font-size: 11px;

      display: block;

    }


    .review-author span {

      display: block;

      margin-top: 3px;

      color: #8a8e93;

      font-family: var(--mono);

      font-size: 8px;

    }


    /* =========================================================
       ABOUT
    ========================================================= */

    .about-layout {

      display: grid;

      grid-template-columns:
        1.1fr
        .9fr;

      gap: 70px;

    }


    .about-big {

      font-size:
        clamp(
          2.4rem,
          4.8vw,
          5.4rem
        );

      line-height: .96;

      letter-spacing: -.065em;

      max-width: 800px;

    }


    .about-big span {

      color: #a4a6aa;

    }


    .about-copy {

      margin-top: 42px;

      max-width: 690px;

      color: #6f7378;

      font-size: 13px;

      line-height: 1.9;

    }


    .about-copy p + p {

      margin-top: 20px;

    }


    .data-list {

      border-top:
        1px solid var(--line);

    }


    .data-row {

      display: grid;

      grid-template-columns:
        110px
        1fr;

      gap: 20px;

      padding: 20px 0;

      border-bottom:
        1px solid var(--line);

    }


    .data-label {

      font-family: var(--mono);

      color: #9a9da1;

      font-size: 9px;

      text-transform: uppercase;

      letter-spacing: .12em;

    }


    .data-value {

      font-size: 12px;

      font-weight: 500;

    }


    /* =========================================================
       CONTACT
    ========================================================= */

    .contact {

      padding:
        170px 0
        115px;

      text-align: center;

    }


    .contact-kicker {

      font-family: var(--mono);

      color: var(--blue);

      font-size: 10px;

      letter-spacing: .14em;

    }


    .contact h2 {

      margin:
        24px auto 0;

      max-width: 1050px;

      font-size:
        clamp(
          3.2rem,
          8vw,
          8rem
        );

      line-height: .9;

      letter-spacing: -.075em;

    }


    .contact h2 span {

      color: var(--blue);

    }


    .contact-copy {

      max-width: 540px;

      margin:
        27px auto 0;

      color: #777b80;

      font-size: 13px;

      line-height: 1.7;

    }


    .contact-actions {

      display: flex;

      justify-content: center;

      gap: 10px;

      flex-wrap: wrap;

      margin-top: 34px;

    }


    .contact-handle {

      display: inline-flex;

      align-items: center;

      gap: 9px;

      padding:
        13px 18px;

      border:
        1px solid var(--line);

      border-radius: 999px;

      background: white;

      font-family: var(--mono);

      font-size: 9px;

      transition: .25s ease;

    }


    .contact-handle:hover {

      border-color: #c6cbd0;

      transform:
        translateY(-2px);

      box-shadow: var(--shadow);

    }


    /* =========================================================
       FOOTER
    ========================================================= */

    footer {

      border-top:
        1px solid var(--line);

      padding:
        28px 0
        40px;

      color: #8b8f94;

      font-family: var(--mono);

      font-size: 8px;

    }


    .footer-flex {

      display: flex;

      justify-content: space-between;

      align-items: center;

      gap: 20px;

    }


    .footer-socials {

      display: flex;

      gap: 16px;

    }


    .footer-socials a {

      transition: .2s ease;

    }


    .footer-socials a:hover {

      color: var(--ink);

    }


    /* =========================================================
       WHATSAPP
    ========================================================= */

    .whatsapp {

      position: fixed;

      right: 24px;

      bottom: 24px;

      width: 52px;
      height: 52px;

      display: grid;

      place-items: center;

      border-radius: 50%;

      background: #25D366;

      color: white;

      z-index: 90;

      box-shadow:
        0 12px 30px
        rgba(0,0,0,.16);

      font-size: 23px;

      transition: .25s ease;

    }


    .whatsapp:hover {

      transform:
        translateY(-4px)
        scale(1.04);

      box-shadow:
        0 16px 35px
        rgba(0,0,0,.20);

    }


    /* =========================================================
       REVEAL
    ========================================================= */

    .reveal {

      opacity: 0;

      transform:
        translateY(24px);

      transition:
        opacity .8s ease,
        transform
        .8s cubic-bezier(.16,1,.3,1);

    }


    .reveal.visible {

      opacity: 1;

      transform: none;

    }


    /* =========================================================
       RESPONSIVE
    ========================================================= */

    @media(max-width: 1050px) {

      .section-top {

        grid-template-columns:
          110px
          1fr;

      }


      .section-intro {

        grid-column:
          2;

        max-width: 520px;

      }


      .service-item {

        grid-template-columns:
          65px
          1fr
          270px
          45px;

      }

    }


    @media(max-width: 900px) {

      .nav-links {

        display: none;

      }


      .menu-button {

        display: flex;

      }


      .nav-cta {

        display: none;

      }


      .brand-handle {

        display: none;

      }


      .hero-dashboard {

        grid-template-columns:
          1fr;

      }


      .hero-card {

        min-height: 150px;

      }


      .service-item {

        grid-template-columns:
          55px
          1fr
          45px;

      }


      .service-description {

        grid-column:
          2;

        margin-top: -10px;

      }


      .ai-box {

        grid-template-columns:
          1fr;

      }


      .ai-main {

        min-height: 400px;

      }


      .work-card {

        grid-template-columns:
          55px
          1fr;

      }


      .work-visual {

        grid-column:
          2;

      }


      .why-grid,
      .reviews {

        grid-template-columns:
          1fr;

      }


      .process-row {

        grid-template-columns:
          80px
          1fr
          100px;

      }


      .process-copy {

        grid-column:
          2;

      }


      .process-status {

        grid-column:
          3;

        grid-row:
          1;

      }


      .about-layout {

        grid-template-columns:
          1fr;

        gap: 45px;

      }

    }


    @media(max-width: 600px) {

      .container {

        width:
          min(
            100% - 28px,
            var(--max)
          );

      }


      header {

        padding: 9px 0;

      }


      .nav {

        height: 54px;

        padding-left: 10px;

      }


      .hero {

        padding-top:
          125px;

      }


      .hero-meta {

        font-size: 8px;

        letter-spacing: .07em;

        flex-wrap: wrap;

      }


      .hero-title {

        font-size:
          clamp(
            3rem,
            15vw,
            5rem
          );

      }


      .hero-sub {

        font-size: 15px;

      }


      .hero-handle {

        font-size: 8px;

      }


      .radial-field {

        top: 420px;

        height: 520px;

      }


      .page-glow {

        width: 450px;
        height: 450px;

      }


      .section {

        padding:
          90px 0;

      }


      .section-top {

        display: block;

      }


      .section-code {

        margin-bottom: 14px;

      }


      .section-intro {

        margin-top: 20px;

      }


      .section-heading {

        font-size: 2.7rem;

      }


      .service-item {

        grid-template-columns:
          42px
          1fr
          40px;

        padding:
          27px 0;

      }


      .service-description {

        grid-column:
          2;

        margin-top: 0;

      }


      .service-name {

        font-size: 1.75rem;

      }


      .service-arrow {

        width: 34px;
        height: 34px;

      }


      .ai-main {

        padding: 27px;

      }


      .ai-main h3 {

        margin-top: 55px;

        font-size: 3rem;

      }


      .ai-service {

        min-height: 130px;

      }


      .work-card {

        grid-template-columns:
          1fr;

        padding: 18px;

      }


      .work-index {

        display: none;

      }


      .work-visual {

        grid-column: auto;

        min-height: 240px;

      }


      .why-card {

        padding: 24px;

        min-height: 230px;

      }


      .process-row {

        grid-template-columns:
          55px
          1fr;

        gap: 10px;

      }


      .process-copy {

        grid-column:
          2;

      }


      .process-status {

        grid-column:
          2;

        grid-row: auto;

        justify-self: start;

      }


      .review-card {

        padding: 27px;

      }


      .about-big {

        font-size: 2.8rem;

      }


      .data-row {

        grid-template-columns:
          90px
          1fr;

      }


      .contact {

        padding:
          120px 0
          90px;

      }


      .contact h2 {

        font-size:
          clamp(
            3rem,
            15vw,
            5rem
          );

      }


      .footer-flex {

        flex-direction: column;

        align-items: flex-start;

      }


      .whatsapp {

        width: 48px;
        height: 48px;

        right: 17px;
        bottom: 17px;

        font-size: 21px;

      }

    }



    /* =========================================================
       PROJECT FORM
    ========================================================= */

    .contact-section {
      padding: 130px 0;
    }

    .contact-form-wrap {
      display: grid;
      grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr);
      gap: 14px;
      margin-top: 55px;
      align-items: stretch;
    }

    /* =========================================================
       FORM INTRO PANEL
    ========================================================= */

    .form-intro {
      position: relative;
      min-height: 700px;
      padding: 38px;
      background: var(--dark);
      color: #fff;
      border-radius: 22px;
      overflow: hidden;
    }

    .form-intro::after {
      content: "";
      position: absolute;
      width: 420px;
      height: 420px;
      right: -180px;
      bottom: -150px;
      border: 1px solid rgba(255,255,255,.13);
      border-radius: 50%;
      box-shadow:
        0 0 0 60px rgba(255,255,255,.025),
        0 0 0 120px rgba(255,255,255,.02);
      pointer-events: none;
    }

    .form-label {
      position: relative;
      z-index: 2;
      font-family: var(--mono);
      font-size: 9px;
      line-height: 1;
      letter-spacing: .14em;
      color: rgba(255,255,255,.52);
      text-transform: uppercase;
    }

    .form-intro h3 {
      position: relative;
      z-index: 2;
      margin-top: 75px;
      font-size: clamp(2.7rem, 4.5vw, 5rem);
      line-height: .92;
      letter-spacing: -.065em;
      font-weight: 700;
    }

    .form-intro > p {
      position: relative;
      z-index: 2;
      max-width: 400px;
      margin-top: 25px;
      color: rgba(255,255,255,.62);
      font-size: 13px;
      line-height: 1.75;
    }

    .form-side-info {
      position: absolute;
      z-index: 3;
      left: 38px;
      right: 38px;
      bottom: 35px;
      border-top: 1px solid rgba(255,255,255,.14);
    }

    .form-side-info > div {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      min-height: 45px;
      padding: 13px 0;
      border-bottom: 1px solid rgba(255,255,255,.10);
    }

    .form-side-info span {
      flex-shrink: 0;
      font-family: var(--mono);
      font-size: 8px;
      line-height: 1;
      color: rgba(255,255,255,.42);
    }

    .form-side-info strong {
      text-align: right;
      font-size: 10px;
      line-height: 1.4;
      font-weight: 500;
      color: rgba(255,255,255,.88);
    }

    /* =========================================================
       FORM CONTAINER
    ========================================================= */

    .project-form {
      width: 100%;
      min-width: 0;
      padding: 38px;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 22px;
      box-sizing: border-box;
    }

    .form-row {
      display: grid;
      grid-template-columns: minmax(0,1fr) minmax(0,1fr);
      gap: 18px;
      width: 100%;
    }

    .form-group {
      width: 100%;
      min-width: 0;
      margin: 0 0 24px;
    }

    .form-group > label {
      display: flex;
      align-items: center;
      width: 100%;
      height: 14px;
      margin: 0 0 9px;
      padding: 0;
      font-family: var(--mono);
      font-size: 9px;
      font-weight: 400;
      line-height: 14px;
      letter-spacing: .08em;
      color: #777b80;
      text-transform: uppercase;
      box-sizing: border-box;
    }

    /* =========================================================
       INPUTS / SELECTS / TEXTAREA
    ========================================================= */

    .form-group input,
    .form-group select,
    .form-group textarea {
      display: block;
      width: 100%;
      max-width: 100%;
      margin: 0;
      border: 1px solid #dfe2df;
      border-radius: 11px;
      background: #fafbf9;
      color: var(--ink);
      font-family: var(--sans);
      font-size: 12px;
      font-weight: 400;
      outline: none;
      box-sizing: border-box;
      transition:
        border-color .2s ease,
        background .2s ease,
        box-shadow .2s ease;
    }

    .form-group input[type="text"],
    .form-group input[type="email"],
    .form-group input[type="tel"] {
      height: 50px;
      padding: 0 15px;
      line-height: 50px;
    }

    .form-group select {
      height: 50px;
      padding: 0 42px 0 15px;
      line-height: 50px;
      appearance: none;
      -webkit-appearance: none;
      cursor: pointer;
      background-image:
        linear-gradient(45deg, transparent 50%, #888 50%),
        linear-gradient(135deg, #888 50%, transparent 50%);
      background-position:
        calc(100% - 18px) 21px,
        calc(100% - 13px) 21px;
      background-size: 5px 5px, 5px 5px;
      background-repeat: no-repeat;
    }

    .form-group textarea {
      min-height: 150px;
      padding: 14px 15px;
      resize: vertical;
      line-height: 1.65;
    }

    .form-group input::placeholder,
    .form-group textarea::placeholder {
      color: #a7aaae;
      opacity: 1;
    }

    .form-group input:focus,
    .form-group select:focus,
    .form-group textarea:focus {
      background: #fff;
      border-color: var(--blue);
      box-shadow: 0 0 0 3px rgba(36,99,223,.08);
    }

    /* =========================================================
       SERVICE OPTIONS
    ========================================================= */

    .service-options {
      display: grid;
      grid-template-columns: repeat(2, minmax(0,1fr));
      gap: 8px;
      width: 100%;
      margin: 0;
      padding: 0;
    }

    .service-option {
      position: relative;
      display: block;
      width: 100%;
      min-width: 0;
      margin: 0;
      padding: 0;
      cursor: pointer;
    }

    .service-option input {
      position: absolute;
      width: 1px;
      height: 1px;
      margin: -1px;
      padding: 0;
      opacity: 0;
      overflow: hidden;
      clip: rect(0,0,0,0);
      white-space: nowrap;
      border: 0;
    }

    .service-option span {
      display: flex;
      align-items: center;
      width: 100%;
      min-height: 50px;
      margin: 0;
      padding: 0 13px;
      border: 1px solid #dfe2df;
      border-radius: 11px;
      background: #fafbf9;
      color: #555a60;
      font-family: var(--sans);
      font-size: 11px;
      font-weight: 400;
      line-height: 1.3;
      box-sizing: border-box;
      user-select: none;
      transition:
        border-color .2s ease,
        background .2s ease,
        color .2s ease,
        box-shadow .2s ease;
    }

    .service-option span::before {
      content: "+";
      flex: 0 0 18px;
      width: 18px;
      height: 18px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin: 0 9px 0 0;
      padding: 0;
      border: 1px solid #cfd3d0;
      border-radius: 5px;
      background: #fff;
      color: #9a9da1;
      font-family: var(--mono);
      font-size: 10px;
      line-height: 18px;
      box-sizing: border-box;
      flex-shrink: 0;
      transition:
        background .2s ease,
        border-color .2s ease,
        color .2s ease;
    }

    .service-option:hover span {
      background: #fff;
      border-color: #c8ceca;
    }

    .service-option input:checked + span {
      background: rgba(36,99,223,.055);
      border-color: var(--blue);
      color: var(--blue);
      box-shadow: 0 0 0 2px rgba(36,99,223,.045);
    }

    .service-option input:checked + span::before {
      content: "✓";
      background: var(--blue);
      border-color: var(--blue);
      color: #fff;
      font-size: 9px;
    }

    .service-option input:focus-visible + span {
      border-color: var(--blue);
      box-shadow: 0 0 0 3px rgba(36,99,223,.12);
    }

    /* =========================================================
       FORM FOOTER
    ========================================================= */

    .form-bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 25px;
      padding: 5px 0 0;
    }

    .form-note {
      max-width: 280px;
      margin: 0;
      color: #96999d;
      font-family: var(--mono);
      font-size: 8px;
      line-height: 1.6;
    }

    .form-submit {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      height: 50px;
      padding: 0 20px;
      margin: 0;
      border: 0;
      border-radius: 11px;
      background: var(--blue);
      color: #fff;
      font-family: var(--sans);
      font-size: 11px;
      font-weight: 600;
      line-height: 1;
      cursor: pointer;
      white-space: nowrap;
      box-sizing: border-box;
      transition:
        background .25s ease,
        transform .25s ease,
        box-shadow .25s ease;
    }

    .form-submit:hover {
      background: var(--blue-dark);
      transform: translateY(-2px);
      box-shadow: 0 12px 28px rgba(36,99,223,.18);
    }

    .form-submit:active {
      transform: translateY(0);
    }

    .form-status {
      display: none;
      width: 100%;
      margin: 18px 0 0;
      padding: 13px 15px;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: #f4f5f2;
      color: #555a60;
      font-family: var(--mono);
      font-size: 9px;
      line-height: 1.5;
      box-sizing: border-box;
    }

    .form-status.visible {
      display: block;
    }

    /* =========================================================
       FORM RESPONSIVE
    ========================================================= */

    @media (max-width: 1050px) {
      .contact-form-wrap {
        grid-template-columns: 1fr;
      }

      .form-intro {
        min-height: 470px;
      }

      .form-intro h3 {
        margin-top: 55px;
      }
    }

    @media (max-width: 700px) {
      .form-row {
        grid-template-columns: 1fr;
        gap: 0;
      }
    }

    @media (max-width: 600px) {
      .contact-section {
        padding: 90px 0;
      }

      .contact-form-wrap {
        margin-top: 35px;
        gap: 12px;
      }

      .form-intro,
      .project-form {
        padding: 24px;
        border-radius: 20px;
      }

      .form-intro {
        min-height: 485px;
      }

      .form-intro h3 {
        font-size: 3rem;
      }

      .form-intro > p {
        font-size: 12px;
      }

      .form-side-info {
        left: 24px;
        right: 24px;
        bottom: 24px;
      }

      .form-side-info > div {
        min-height: 43px;
        padding: 11px 0;
      }

      .form-side-info strong {
        max-width: 58%;
      }

      .project-form {
        width: 100%;
      }

      .form-group {
        margin-bottom: 22px;
      }

      .service-options {
        grid-template-columns: 1fr;
        gap: 8px;
      }

      .service-option span {
        min-height: 50px;
      }

      .form-group textarea {
        min-height: 150px;
      }

      .form-bottom {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
      }

      .form-note {
        max-width: none;
      }

      .form-submit {
        width: 100%;
      }
    }

    @media (max-width: 380px) {
      .form-intro,
      .project-form {
        padding: 20px;
      }

      .form-side-info {
        left: 20px;
        right: 20px;
        bottom: 20px;
      }

      .form-intro {
        min-height: 500px;
      }

      .form-intro h3 {
        font-size: 2.7rem;
      }
    }


    /* =========================================================
       REDUCED MOTION
    ========================================================= */

    @media(prefers-reduced-motion: reduce) {

      *,
      *::before,
      *::after {

        scroll-behavior:
          auto !important;

        animation:
          none !important;

        transition:
          none !important;

      }

    }