<style>
    :root {
      --primary: #073b8f;
      --primary-dark: #05265f;
      --secondary: #0d6efd;
      --accent: #ff9f1c;
      --light: #f5f8ff;
      --dark: #101828;
      --muted: #667085;
    }

    * { scroll-behavior: smooth; }

    body {
      font-family: "Poppins", sans-serif;
      color: var(--dark);
      background: #fff;
    }

    .navbar {
      box-shadow: 0 2px 18px rgba(0,0,0,.08);
      background: #fff;
    }


    .site-logo {
      width: 235px;
      height: auto;
      display: block;
      object-fit: contain;
    }

    @media (max-width: 767px) {
      .site-logo { width: 185px; }
    }

    .navbar-brand {
      font-weight: 800;
      color: var(--primary) !important;
      letter-spacing: .5px;
    }

    .brand-mark {
      width: 42px;
      height: 42px;
      border-radius: 12px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      background: linear-gradient(135deg, var(--primary), #16a085);
      margin-right: 9px;
    }

    .nav-link {
      font-weight: 500;
      color: #344054 !important;
    }

    .nav-link:hover { color: var(--secondary) !important; }

    .btn-primary-custom {
      background: var(--accent);
      border: 0;
      color: #111;
      font-weight: 700;
      border-radius: 10px;
      padding: 12px 22px;
    }

    .btn-primary-custom:hover {
      background: #f28d00;
      color: #111;
    }

    .btn-outline-custom {
      border: 2px solid #fff;
      color: #fff;
      font-weight: 600;
      border-radius: 10px;
      padding: 11px 22px;
    }

    .btn-outline-custom:hover {
      background: #fff;
      color: var(--primary);
    }

    .hero {
      position: relative;
      overflow: hidden;
      color: #fff;
      background:
        radial-gradient(circle at 85% 20%, rgba(255,159,28,.25), transparent 28%),
        radial-gradient(circle at 10% 90%, rgba(20,184,166,.20), transparent 25%),
        linear-gradient(135deg, #05265f 0%, #073b8f 55%, #0b62c9 100%);
      padding: 105px 0 90px;
    }

    .hero h1 {
      font-size: clamp(2.3rem, 5vw, 4.4rem);
      line-height: 1.08;
      font-weight: 800;
    }

    .hero h1 span { color: #ffd166; }

    .hero-text {
      font-size: 1.08rem;
      color: rgba(255,255,255,.86);
      max-width: 760px;
    }

    .hero-card {
      background: rgba(255,255,255,.1);
      border: 1px solid rgba(255,255,255,.2);
      backdrop-filter: blur(10px);
      border-radius: 22px;
      padding: 26px;
    }

    .section {
      padding: 85px 0;
    }

    .section-light { background: var(--light); }

    .section-title {
      font-weight: 800;
      color: var(--primary-dark);
    }

    .section-subtitle {
      max-width: 760px;
      margin: 0 auto;
      color: var(--muted);
    }

    .domain-card {
      height: 100%;
      border: 1px solid #e4e7ec;
      border-radius: 18px;
      padding: 28px;
      background: #fff;
      transition: .3s ease;
      box-shadow: 0 8px 30px rgba(16,24,40,.05);
    }

    .domain-card:hover {
      transform: translateY(-7px);
      box-shadow: 0 18px 40px rgba(16,24,40,.11);
      border-color: rgba(13,110,253,.25);
    }

    .domain-icon {
      width: 58px;
      height: 58px;
      border-radius: 15px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 27px;
      color: #fff;
      background: linear-gradient(135deg, var(--primary), var(--secondary));
      margin-bottom: 18px;
    }

    .domain-card h3 {
      font-size: 1.25rem;
      font-weight: 700;
    }

    .domain-card p {
      color: var(--muted);
      font-size: .94rem;
    }

    .tag {
      display: inline-block;
      padding: 6px 10px;
      margin: 3px;
      border-radius: 50px;
      background: #eef4ff;
      color: var(--primary);
      font-size: .76rem;
      font-weight: 600;
    }

    .feature-card {
      height: 100%;
      padding: 28px;
      border-radius: 18px;
      background: #fff;
      border: 1px solid #eaecf0;
    }

    .feature-card i {
      font-size: 32px;
      color: var(--secondary);
    }

    .process-item {
      position: relative;
      text-align: center;
      padding: 15px;
    }

    .process-number {
      width: 55px;
      height: 55px;
      margin: 0 auto 15px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--primary);
      color: #fff;
      font-weight: 800;
      font-size: 1.1rem;
    }

    .process-item h5 {
      font-weight: 700;
      font-size: 1rem;
    }

    .process-item p {
      font-size: .85rem;
      color: var(--muted);
    }

    .cta {
      background: linear-gradient(135deg, #05265f, #073b8f);
      color: #fff;
      border-radius: 28px;
      padding: 60px;
      overflow: hidden;
      position: relative;
    }

    .cta:after {
      content: "";
      position: absolute;
      width: 260px;
      height: 260px;
      border-radius: 50%;
      right: -80px;
      top: -100px;
      background: rgba(255,159,28,.18);
    }

    .contact-box {
      border-radius: 18px;
      padding: 25px;
      background: #fff;
      border: 1px solid #e4e7ec;
      height: 100%;
    }

    .contact-box i {
      color: var(--secondary);
      font-size: 26px;
    }

    footer {
      background: #061b43;
      color: rgba(255,255,255,.75);
      padding: 55px 0 25px;
    }

    footer h5 {
      color: #fff;
      font-weight: 700;
    }

    footer a {
      color: rgba(255,255,255,.75);
      text-decoration: none;
    }

    footer a:hover { color: #fff; }

    .footer-bottom {
      border-top: 1px solid rgba(255,255,255,.12);
      margin-top: 35px;
      padding-top: 20px;
      font-size: .85rem;
    }

    .floating-whatsapp {
      position: fixed;
      right: 20px;
      bottom: 20px;
      width: 56px;
      height: 56px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: #25d366;
      color: #fff;
      font-size: 28px;
      box-shadow: 0 8px 25px rgba(0,0,0,.25);
      z-index: 999;
      text-decoration: none;
    }

    @media (max-width: 767px) {
      .hero { padding: 75px 0 65px; }
      .section { padding: 65px 0; }
      .cta { padding: 35px 24px; }
    }
  </style>
