:root {
      --dark: #06101f;
      --dark2: #0a1b32;
      --blue: #1478ff;
      --light-blue: #43b4ff;
      --purple: #7b42ff;
      --green: #20c968;

      --white: #ffffff;
      --light: #f5f8fc;

      --text: #142238;
      --muted: #6b788c;
      --border: #e5eaf2;

      --shadow:
        0 20px 60px rgba(20,45,90,.11);
    }

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

    html {
      scroll-behavior: smooth;
    }

    body {
      font-family: "Inter", sans-serif;
      color: var(--text);
      line-height: 1.6;
      background: white;
    }

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

    .container {
      width: min(1180px, 92%);
      margin: auto;
    }

    section {
      padding: 100px 0;
    }


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

    header {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;

      z-index: 1000;

      background:
        rgba(6,16,31,.93);

      backdrop-filter:
        blur(16px);

      border-bottom:
        1px solid rgba(255,255,255,.07);
    }

    .nav {
      min-height: 78px;

      display: flex;
      justify-content: space-between;
      align-items: center;

      gap: 30px;
    }

    .logo {
      display: flex;
      align-items: center;
      gap: 12px;

      color: white;

      font-size: 23px;
      font-weight: 800;

      letter-spacing: 4px;
    }

    .logo-symbol {
      width: 34px;
      height: 34px;

      border-radius: 9px;

      background:
        linear-gradient(
          135deg,
          var(--light-blue),
          var(--purple)
        );

      transform: rotate(45deg);

      position: relative;
    }

    .logo-symbol::after {
      content: "";

      position: absolute;

      width: 15px;
      height: 15px;

      left: 10px;
      top: 10px;

      border-radius: 4px;

      background: var(--dark);
    }

    nav {
      display: flex;
      align-items: center;
      gap: 27px;
    }

    nav a {
      color: #d3deef;

      font-size: 14px;
      font-weight: 500;
    }

    nav a:hover {
      color: white;
    }

    .nav-button {
      padding: 11px 20px;

      border-radius: 10px;

      background:
        var(--blue);

      color: white !important;

      font-weight: 700;
    }


    /* =========================
       BUTTONS
    ========================== */

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;

      padding: 15px 24px;

      border-radius: 11px;

      font-weight: 700;

      transition: .2s;
    }

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

    .btn-primary {
      background: var(--blue);
      color: white;

      box-shadow:
        0 12px 30px rgba(20,120,255,.23);
    }

    .btn-outline {
      color: white;

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

      background:
        rgba(255,255,255,.05);
    }

    .btn-whatsapp {
      background: var(--green);
      color: white;
    }


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

    .hero {
      min-height: 830px;

      display: flex;
      align-items: center;

      padding-top: 155px;

      color: white;

      overflow: hidden;

      background:

        radial-gradient(
          circle at 76% 25%,
          rgba(25,125,255,.27),
          transparent 31%
        ),

        radial-gradient(
          circle at 32% 82%,
          rgba(123,66,255,.20),
          transparent 30%
        ),

        linear-gradient(
          135deg,
          #050d18,
          #0a1b35
        );
    }

    .hero-grid {
      display: grid;

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

      gap: 65px;

      align-items: center;
    }

    .hero-label {
      display: inline-flex;

      padding: 8px 15px;

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

      border-radius: 999px;

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

      margin-bottom: 25px;

      font-size: 13px;
    }

    .hero h1 {
      font-size:
        clamp(48px,6.2vw,78px);

      line-height: 1.03;

      letter-spacing: -3.5px;

      margin-bottom: 25px;
    }

    .gradient {
      color: transparent;

      background:
        linear-gradient(
          90deg,
          #42b3ff,
          #9a67ff
        );

      background-clip: text;
      -webkit-background-clip: text;
    }

    .hero-description {
      max-width: 670px;

      color: #c3d0e3;

      font-size: 19px;

      margin-bottom: 34px;
    }

    .hero-buttons {
      display: flex;
      flex-wrap: wrap;

      gap: 14px;
    }


    /* Visual Hero */

    .technology {
      position: relative;

      height: 510px;
    }

    .orbit {
      width: 420px;
      height: 420px;

      border-radius: 50%;

      position: absolute;

      top: 45px;
      left: 50%;

      transform:
        translateX(-50%);

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

    .orbit::before {
      content: "";

      position: absolute;

      width: 300px;
      height: 300px;

      border-radius: 50%;

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

      left: 59px;
      top: 59px;
    }

    .core {
      width: 150px;
      height: 150px;

      position: absolute;

      left: 50%;
      top: 50%;

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

      border-radius: 35px;

      display: grid;
      place-items: center;

      font-weight: 800;

      font-size: 23px;

      background:
        linear-gradient(
          135deg,
          var(--blue),
          var(--purple)
        );

      box-shadow:
        0 0 70px rgba(65,130,255,.35);
    }

    .tech-chip {
      position: absolute;

      padding: 12px 17px;

      border-radius: 12px;

      background:
        rgba(12,29,54,.92);

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

      box-shadow:
        0 15px 35px rgba(0,0,0,.25);

      font-size: 13px;
      font-weight: 600;
    }

    .chip1 {
      left: 10px;
      top: 75px;
    }

    .chip2 {
      right: 0;
      top: 115px;
    }

    .chip3 {
      left: 25px;
      bottom: 95px;
    }

    .chip4 {
      right: 20px;
      bottom: 70px;
    }

    .chip5 {
      left: 50%;
      top: 7px;

      transform:
        translateX(-50%);
    }


    /* =========================
       INTRO STRIP
    ========================== */

    .strip {
      background: white;

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

    .strip-grid {
      padding: 28px 0;

      display: grid;

      grid-template-columns:
        repeat(4,1fr);

      gap: 20px;

      text-align: center;
    }

    .strip strong {
      display: block;

      margin-bottom: 3px;

      font-size: 15px;
    }

    .strip span {
      font-size: 13px;
      color: var(--muted);
    }


    /* =========================
       HEADERS
    ========================== */

    .section-header {
      max-width: 770px;

      margin:
        0 auto 55px;

      text-align: center;
    }

    .eyebrow {
      color: var(--blue);

      text-transform:
        uppercase;

      letter-spacing: 2px;

      font-size: 13px;
      font-weight: 800;
    }

    .section-header h2 {
      margin: 12px 0 16px;

      font-size:
        clamp(35px,4vw,52px);

      letter-spacing: -2px;

      line-height: 1.12;
    }

    .section-header p {
      color: var(--muted);

      font-size: 17px;
    }


    /* =========================
       SOLUTIONS
    ========================== */

    .solutions {
      background:
        var(--light);
    }

    .solutions-grid {
      display: grid;

      grid-template-columns:
        repeat(3,1fr);

      gap: 23px;
    }

    .solution {
      display: flex;
      flex-direction: column;

      background: white;

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

      border-radius: 21px;

      padding: 32px;

      box-shadow:
        0 10px 35px rgba(20,45,90,.05);

      transition:
        transform .2s,
        box-shadow .2s;
    }

    .solution:hover {
      transform:
        translateY(-6px);

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

    .solution-icon {
      width: 53px;
      height: 53px;

      border-radius: 14px;

      display: grid;
      place-items: center;

      margin-bottom: 21px;

      color: white;

      font-size: 22px;

      background:
        linear-gradient(
          135deg,
          var(--blue),
          var(--purple)
        );
    }

    .solution h3 {
      font-size: 21px;

      margin-bottom: 11px;
    }

    .solution p {
      flex: 1;

      color: var(--muted);

      font-size: 14px;

      margin-bottom: 20px;
    }

    .solution a {
      color: var(--blue);

      font-size: 14px;
      font-weight: 700;
    }


    /* =========================
       FEATURED AI
    ========================== */

    .ai-section {
      background: var(--dark);

      color: white;
    }

    .ai-grid {
      display: grid;

      grid-template-columns:
        1fr 1fr;

      gap: 75px;

      align-items: center;
    }

    .ai-section h2 {
      font-size:
        clamp(39px,4vw,57px);

      line-height: 1.1;

      letter-spacing: -2.5px;

      margin:
        12px 0 20px;
    }

    .ai-description {
      color: #adbbce;

      font-size: 17px;

      margin-bottom: 28px;
    }

    .ai-items {
      display: grid;

      gap: 14px;
    }

    .ai-item {
      padding: 17px 20px;

      border-radius: 12px;

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

      background:
        rgba(255,255,255,.045);
    }

    .ai-item strong {
      display: block;

      margin-bottom: 4px;
    }

    .ai-item span {
      color: #a9b7ca;

      font-size: 13px;
    }

    .ai-dashboard {
      padding: 25px;

      border-radius: 23px;

      background:
        linear-gradient(
          145deg,
          rgba(20,120,255,.16),
          rgba(123,66,255,.16)
        );

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

    .dash {
      border-radius: 15px;

      overflow: hidden;

      background: #0d203a;

      box-shadow:
        0 30px 70px rgba(0,0,0,.3);
    }

    .dash-header {
      padding: 16px 20px;

      border-bottom:
        1px solid rgba(255,255,255,.08);

      color: #d4dfef;

      font-size: 13px;
    }

    .dash-content {
      padding: 25px;
    }

    .dash-row {
      padding: 17px;

      margin-bottom: 12px;

      border-radius: 10px;

      background:
        rgba(255,255,255,.05);
    }

    .dash-row strong {
      display: block;

      margin-bottom: 4px;
    }

    .dash-row span {
      color: #9caec4;

      font-size: 12px;
    }


    /* =========================
       DIGITAL PRODUCT
    ========================== */

    .web-highlight {
      background: white;
    }

    .highlight-box {
      display: grid;

      grid-template-columns:
        1fr 1fr;

      gap: 50px;

      align-items: center;

      padding: 55px;

      border-radius: 28px;

      background:
        linear-gradient(
          135deg,
          #eff6ff,
          #f4f0ff
        );

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

    .highlight-box h2 {
      font-size:
        clamp(35px,4vw,50px);

      letter-spacing: -2px;

      line-height: 1.1;

      margin:
        12px 0 20px;
    }

    .highlight-box p {
      color: var(--muted);

      margin-bottom: 27px;
    }

    .package-preview {
      background: white;

      padding: 30px;

      border-radius: 18px;

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

    .package-preview h3 {
      font-size: 25px;
      margin-bottom: 8px;
    }

    .starting {
      color: var(--muted);
      font-size: 13px;
    }

    .starting strong {
      display: block;

      color: var(--text);

      font-size: 35px;

      margin: 5px 0 15px;
    }

    .mini-features {
      color: var(--muted);

      font-size: 14px;

      line-height: 2;
    }


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

    .process {
      background: var(--light);
    }

    .steps {
      display: grid;

      grid-template-columns:
        repeat(4,1fr);

      gap: 27px;
    }

    .step-num {
      color:
        rgba(20,120,255,.23);

      font-size: 56px;
      font-weight: 800;
    }

    .step h3 {
      margin-bottom: 8px;
    }

    .step p {
      color: var(--muted);
      font-size: 14px;
    }


    /* =========================
       BUSINESS
    ========================== */

    .business-grid {
      display: grid;

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

      gap: 70px;

      align-items: center;
    }

    .business h2 {
      font-size:
        clamp(38px,4vw,53px);

      letter-spacing: -2px;

      line-height: 1.1;

      margin:
        12px 0 20px;
    }

    .business p {
      color: var(--muted);
    }

    .business-cards {
      display: grid;

      grid-template-columns:
        1fr 1fr;

      gap: 17px;
    }

    .business-card {
      padding: 24px;

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

      border-radius: 15px;
    }

    .business-card strong {
      display: block;

      margin-bottom: 7px;
    }

    .business-card span {
      color: var(--muted);

      font-size: 13px;
    }


    /* =========================
       CTA
    ========================== */

    .cta {
      padding: 85px 0;
    }

    .cta-box {
      padding: 70px 35px;

      border-radius: 30px;

      text-align: center;

      color: white;

      background:

        radial-gradient(
          circle at 75%,
          rgba(123,66,255,.40),
          transparent 34%
        ),

        var(--dark);
    }

    .cta-box h2 {
      max-width: 800px;

      margin: auto;

      font-size:
        clamp(37px,5vw,56px);

      line-height: 1.08;

      letter-spacing: -2px;
    }

    .cta-box p {
      max-width: 600px;

      margin:
        21px auto 30px;

      color: #bdcada;
    }


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

    footer {
      background:
        #050c16;

      color:
        #9eacbe;

      padding:
        55px 0 27px;
    }

    .footer-grid {
      display: grid;

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

      gap: 60px;

      margin-bottom: 45px;
    }

    footer h4 {
      color: white;
      margin-bottom: 15px;
    }

    footer a {
      display: block;

      margin: 8px 0;

      font-size: 13px;
    }

    footer p {
      font-size: 13px;
    }

    .copyright {
      padding-top: 25px;

      border-top:
        1px solid rgba(255,255,255,.08);

      text-align: center;

      font-size: 12px;
    }


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

    .floating-wa {
      position: fixed;

      right: 22px;
      bottom: 22px;

      width: 60px;
      height: 60px;

      border-radius: 50%;

      z-index: 999;

      display: grid;
      place-items: center;

      color: white;

      background:
        var(--green);

      font-size: 25px;

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


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

    @media(max-width: 930px) {

      nav a:not(.nav-button) {
        display: none;
      }

      .hero-grid,
      .ai-grid,
      .highlight-box,
      .business-grid {
        grid-template-columns: 1fr;
      }

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

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

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

      .technology {
        height: 470px;
      }

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

    }


    @media(max-width: 620px) {

      section {
        padding: 72px 0;
      }

      .hero {
        padding-top: 125px;
      }

      .hero h1 {
        letter-spacing: -2px;
      }

      .solutions-grid,
      .steps,
      .business-cards {
        grid-template-columns: 1fr;
      }

      .highlight-box {
        padding: 32px 24px;
      }

      .technology {
        height: 420px;
      }

      .orbit {
        width: 330px;
        height: 330px;
      }

      .orbit::before {
        width: 230px;
        height: 230px;

        left: 49px;
        top: 49px;
      }

      .core {
        width: 125px;
        height: 125px;

        font-size: 19px;
      }

      .tech-chip {
        padding: 9px 12px;

        font-size: 11px;
      }

      .cta-box {
        padding:
          50px 22px;
      }

    }