/* Load Montserrat 700/800 */
    @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700;800&display=swap');
    
    :root {
      /* Virex palette */
      --brand-hero: linear-gradient(135deg, #8b5cf6, #7c3aed, #2563eb);
      --brand-green: linear-gradient(135deg, #7c3aed, #4f46e5);
      --brand-green-200: linear-gradient(135deg, #7c3aed, #38bdf8);
      --ink: #ffffff;
      --ink-strong:#f6f7fb;
      --ink-soft: #dfe1e8;
      --accent: #8b5cf6;
      --hover: #22d3ee;
      --bg: #0b0214;
      --shadow: 0 8px 24px rgba(0,0,0,0.18);
      --shadow-lg: 0 16px 36px rgba(0,0,0,0.28);
      --rad: 16px;
      --timing: cubic-bezier(0.2,0.8,0.2,1);
      --maxw: 1180px;
      --header-h: 68px;
      --nav-font-size: 14px;
      --nav-line-height: 22px;
      --svc-surface-1: #0d1331;
      --svc-surface-2: #0a1028;
      --svc-border: rgba(173,197,255,.16);
    }

    *{margin:0;padding:0;box-sizing:border-box}
    html,body{height:100%}
    body{
      font-family:'Montserrat',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;
      font-weight:700;
      color:var(--ink);
      background:var(--bg);
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
      text-rendering:optimizeLegibility;
      padding-top: var(--header-h);
    }

    /* ===== Reusable reveal ===== */
    .reveal{opacity:0; transform:translateY(16px); transition:opacity .6s var(--timing), transform .6s var(--timing)}
    .reveal.show{opacity:1; transform:none}

    /* ===== HEADER ===== */
    header{
      width:100%;
      height: var(--header-h);
      background: rgba(10,10,22,0.65);
      backdrop-filter:saturate(130%) blur(10px);
      display:flex;justify-content:space-between;align-items:center;
      padding:0 24px;
      border-bottom:1px solid rgba(255,255,255,0.06);
      position:fixed;top:0;left:0;z-index:1000;
    }

    .container{max-width:var(--maxw);margin:0 auto;padding:0 16px}
    

    .logo img{
      width:150px;
      height:auto;
    }

    nav{display:flex;align-items:center;gap:22px;height:100%}
    nav a{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      height: calc(var(--header-h) - 2px);
      color:var(--ink-strong);
      text-decoration:none;
      font-weight:800;
      font-size:var(--nav-font-size);
      line-height:var(--nav-line-height);
      letter-spacing:.2px;
      position:relative;
      padding:0 2px;
      transition:color .25s var(--timing), transform .25s var(--timing)
    }
    nav a:hover{ color:var(--accent); transform:translateY(-2px) }
    nav a::after{
      content:'';position:absolute;bottom:10px;left:0;width:0;height:2px;
      background:linear-gradient(90deg,var(--accent),var(--hover));
      transition:width .35s cubic-bezier(.19,1,.22,1);border-radius:2px
    }
    nav a:hover::after{ width:100% }

    .dropdown{position:relative}
    .dropdown-content{
      position:absolute;top:calc(100% + 8px);left:0;display:flex;flex-direction:column;background:#0f1221;min-width:240px;padding:10px 0;border-radius:10px;
      box-shadow:var(--shadow);opacity:0;visibility:hidden;transform:translateY(6px);transition:all .25s var(--timing);z-index:999;
      border:1px solid rgba(255,255,255,.08)
    }
    .dropdown:hover .dropdown-content{ opacity:1; visibility:visible; transform:translateY(0) }
    .dropdown-content a{ padding:12px 16px; font-size:14px; color:#e8eaf4; font-weight:700; line-height:22px; }
    .dropdown-content a:hover{ background:#1a1f3a; color:#b7c4ff }

    .contact-btn{
      background: linear-gradient(90deg, var(--accent), var(--hover));
      color:#fff; text-decoration:none; padding:9px 16px; border-radius:9px; font-size:14px; font-weight:800;
      transition:transform .25s var(--timing), box-shadow .25s var(--timing)
    }
    .contact-btn:hover{ transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,0.22) }

    /* ==== HAMBURGER ==== */
    .menu-toggle{display:none;width:38px;height:38px;border:none;background:transparent;cursor:pointer;position:relative}
    .menu-toggle .bar{
      position:absolute; left:7px; right:7px; height:3px; background:var(--ink); border-radius:3px;
      transition:transform .35s var(--timing), opacity .25s var(--timing), top .35s var(--timing)
    }
    .menu-toggle .bar:nth-child(1){top:11px}
    .menu-toggle .bar:nth-child(2){top:17px}
    .menu-toggle .bar:nth-child(3){top:23px}
    .menu-toggle.active .bar:nth-child(1){top:17px; transform:rotate(45deg)}
    .menu-toggle.active .bar:nth-child(2){opacity:0}
    .menu-toggle.active .bar:nth-child(3){top:17px; transform:rotate(-45deg)}

    /* ===== MOBILE NAV PANEL ===== */
    .nav-overlay{
      position:fixed; inset:0; background:rgba(6,20,17,.45); backdrop-filter:blur(8px);
      opacity:0; pointer-events:none; transition:opacity .32s var(--timing); z-index:998;
    }
    .nav-overlay.active{ opacity:1; pointer-events:auto }
    .m-close{ display:none }

    @media (max-width:900px){
      header{height:64px;padding:0 12px}
      :root{ --header-h: 64px; }
      nav{
        display:none; flex-direction:column; position:fixed; top:0; right:0; height:100vh; width:78%;
        background:rgba(18,22,44,.92); backdrop-filter:blur(16px); padding:84px 18px 18px;
        box-shadow:-10px 0 30px rgba(0,0,0,.2); transition:transform .45s var(--timing); z-index:999;
        transform:translateX(100%);
      }
      nav a{ color:#eef1ff; height:auto; padding:10px 2px }
      nav.active{ display:flex; transform:translateX(0) }
      nav a{ opacity:0; transform:translateX(12px) }
      nav.active a{ animation:navIn .45s var(--timing) forwards }
      nav.active a:nth-of-type(1){ animation-delay:.05s }
      nav.active a:nth-of-type(2){ animation-delay:.09s }
      nav.active a:nth-of-type(3){ animation-delay:.13s }
      nav.active a:nth-of-type(4){ animation-delay:.17s }
      nav.active a:nth-of-type(5){ animation-delay:.21s }
      @keyframes navIn{ to{ opacity:1; transform:none } }
      .menu-toggle{ display:block }
      .contact-btn{ display:none }
      .dropdown-content{
        position:static; display:none; background:rgba(26,31,58,.9); margin-top:8px; border-radius:8px;
        border:1px solid rgba(255,255,255,.06)
      }
      .dropdown:hover .dropdown-content{ display:flex }
      .m-contact{
        margin-top:auto; width:100%; background:var(--accent); color:#fff; text-align:center;
        padding:12px 16px; border-radius:12px; text-decoration:none; font-weight:800;
        box-shadow:0 10px 22px rgba(10,128,106,.25); transition:transform .25s var(--timing)
      }
      .m-contact:active{ transform:scale(.98) }
      .m-close{ display:block; margin-top:10px; text-align:center; font-weight:800; color:#fff }
    }

    /* ===== SERVICES HERO ===== */
    .services-hero {
      background: var(--brand-hero);
      padding: 100px 16px 80px;
      text-align: center;
      position: relative;
      overflow: hidden;
    }
    .services-hero::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      background: radial-gradient(circle at 30% 20%, rgba(139, 92, 246, 0.3), transparent 50%),
                  radial-gradient(circle at 70% 80%, rgba(34, 211, 238, 0.2), transparent 50%);
      pointer-events: none;
    }
    .services-hero .inner {
      max-width: var(--maxw);
      margin: 0 auto;
      position: relative;
      z-index: 2;
    }
    .services-hero h1 {
      font-size: 52px;
      font-weight: 800;
      margin-bottom: 20px;
      color: #fff;
      text-shadow: 0 2px 4px rgba(0,0,0,0.3);
    }
    .services-hero p {
      font-size: 18px;
      color: var(--ink-strong);
      max-width: 600px;
      margin: 0 auto;
      line-height: 1.6;
    }

    /* ===== SERVICES GRID ===== */
    .services-section {
      position: relative;
      padding: 80px 16px;
      background: radial-gradient(1200px 300px at 10% -10%, rgba(139,92,246,.18), transparent 60%),
                  radial-gradient(1200px 300px at 90% 110%, rgba(34,211,238,.18), transparent 60%),
                  #0a0f22;
      border-top: 1px solid rgba(255,255,255,.06);
      border-bottom: 1px solid rgba(255,255,255,.06);
    }
    .services-section .inner {
      max-width: var(--maxw);
      margin: 0 auto;
    }
    .services-title {
      text-align: center;
      margin-bottom: 60px;
      color: #fff;
      font-size: 32px;
      font-weight: 800;
      letter-spacing: .2px;
    }

    .services-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
      gap: 24px;
      margin-bottom: 60px;
    }

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

    /* Service Card */
    .service-card {
      position: relative;
      background: linear-gradient(180deg, var(--svc-surface-1) 0%, var(--svc-surface-2) 100%);
      border-radius: 20px;
      padding: 32px 28px;
      box-shadow: 0 10px 26px rgba(0,0,0,.28),
                  inset 0 1px 0 var(--svc-border),
                  inset 0 0 0 1px rgba(255,255,255,.06);
      overflow: hidden;
      transition: transform .35s var(--timing),
                  box-shadow .35s var(--timing),
                  background .35s var(--timing);
      isolation: isolate;
      border: 1px solid rgba(255,255,255,.08);
    }

    /* Animated border glow */
    .service-card::before {
      content: "";
      position: absolute;
      inset: -2px;
      z-index: 0;
      background: conic-gradient(from 180deg at 50% 50%,
                  rgba(139,92,246,.35),
                  rgba(34,211,238,.35),
                  rgba(139,92,246,.35));
      filter: blur(20px);
      opacity: .10;
      transition: opacity .35s var(--timing);
    }

    /* Sheen sweep effect */
    .service-card::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      background: linear-gradient(120deg,
                  transparent 40%,
                  rgba(255,255,255,.08) 50%,
                  transparent 60%);
      transform: translateX(-120%);
      transition: transform .8s var(--timing);
      pointer-events: none;
    }

    .service-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 20px 50px rgba(0,0,0,.38),
                  inset 0 1px 0 rgba(255,255,255,.12);
    }

    .service-card:hover::before {
      opacity: .20;
    }

    .service-card:hover::after {
      transform: translateX(120%);
    }

    /* Service Icon */
    .service-icon {
      z-index: 2;
      width: 64px;
      height: 64px;
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 20px;
      background: linear-gradient(135deg, rgba(139,92,246,.18), rgba(34,211,238,.18));
      border: 1px solid rgba(173,197,255,.28);
      box-shadow: 0 6px 18px rgba(0,0,0,.28),
                  0 0 0 6px rgba(139,92,246,.10),
                  0 0 0 12px rgba(34,211,238,.06);
      transition: transform .35s var(--timing),
                  box-shadow .35s var(--timing);
    }

    .service-card:hover .service-icon {
      transform: translateY(-4px) scale(1.05);
      box-shadow: 0 10px 24px rgba(0,0,0,.35),
                  0 0 0 8px rgba(139,92,246,.14),
                  0 0 0 16px rgba(34,211,238,.08);
    }

    .service-icon svg {
      width: 32px;
      height: 32px;
      display: block;
    }

    .service-card h3 {
      z-index: 2;
      font-weight: 800;
      font-size: 20px;
      color: #fff;
      margin-bottom: 16px;
      text-align: center;
    }

    .service-card p {
      z-index: 2;
      color: #cfd3ff;
      font-size: 15px;
      line-height: 1.7;
      text-align: center;
      margin-bottom: 24px;
    }

    .service-cta {
      z-index: 2;
      text-align: center;
    }

    .btn-service {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 12px 24px;
      border-radius: 999px;
      font-weight: 800;
      font-size: 14px;
      text-decoration: none;
      color: #ffffff;
      background: linear-gradient(90deg, #4338ca, #0e7490);
      border: 2px solid rgba(255,255,255,.14);
      transition: transform .2s var(--timing),
                  box-shadow .25s var(--timing),
                  background .25s var(--timing),
                  filter .25s var(--timing);
      box-shadow: 0 6px 16px rgba(0,0,0,.32);
    }

    .btn-service:hover {
      background: linear-gradient(90deg, #3730a3, #0b5c6b);
      transform: translateY(-2px);
      box-shadow: 0 10px 24px rgba(0,0,0,.38);
      filter: saturate(1.05);
    }

    .btn-service:active {
      transform: translateY(1px) scale(.99);
      box-shadow: 0 6px 18px rgba(0,0,0,.30);
    }

    .btn-service svg {
      width: 16px;
      height: 16px;
    }

    /* ===== CONTACT SECTION ===== */
    .contact-section {
      background: var(--brand-green);
      padding: 80px 16px;
      position: relative;
    }
    .contact-section::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(0deg, rgba(0,0,0,.08), rgba(0,0,0,.08));
      pointer-events: none;
    }
    .contact-section .inner {
      max-width: var(--maxw);
      margin: 0 auto;
      position: relative;
      z-index: 1;
    }
    .contact-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 60px;
      align-items: start;
    }
    .contact-info h2 {
      font-size: 32px;
      font-weight: 800;
      margin-bottom: 24px;
      color: #fff;
      text-shadow: 0 1px 0 rgba(0,0,0,.25);
    }
    .contact-details {
      margin-bottom: 32px;
    }
    .contact-item {
      margin-bottom: 20px;
      color: rgba(255,255,255,.92);
      font-size: 16px;
    }
    .contact-item strong {
      display: block;
      margin-bottom: 8px;
      color: #fff;
      font-size: 18px;
    }
    .contact-form {
      background: rgba(255,255,255,.95);
      padding: 32px;
      border-radius: 20px;
      box-shadow: var(--shadow-lg);
    }
    .contact-form h3 {
      font-size: 24px;
      font-weight: 800;
      margin-bottom: 24px;
      color: #0e1220;
      text-align: center;
    }
    .form-group {
      margin-bottom: 20px;
    }
    .form-group label {
      display: block;
      margin-bottom: 8px;
      font-weight: 800;
      color: #0e1220;
    }
    .form-group input,
    .form-group select,
    .form-group textarea {
      width: 100%;
      padding: 12px 16px;
      border: 2px solid #e2e8f0;
      border-radius: 10px;
      font-size: 15px;
      transition: border-color .25s var(--timing),
                  box-shadow .25s var(--timing);
    }
    .form-group input:focus,
    .form-group select:focus,
    .form-group textarea:focus {
      outline: none;
      border-color: var(--accent);
      box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
    }
    .submit-btn {
      width: 100%;
      background: linear-gradient(90deg, var(--accent), var(--hover));
      color: #fff;
      border: none;
      padding: 14px 24px;
      border-radius: 10px;
      font-size: 16px;
      font-weight: 800;
      cursor: pointer;
      transition: transform .25s var(--timing),
                  box-shadow .25s var(--timing);
    }
    .submit-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(0,0,0,.22);
    }

    @media (max-width: 768px) {
      .contact-grid {
        grid-template-columns: 1fr;
        gap: 40px;
      }
    }

    /* ===== FOOTER ===== */
    .footer {
      background: var(--brand-green);
    }
    .footer .container {
      max-width: var(--maxw);
      margin: 0 auto;
      padding: 48px 16px 24px;
    }
    .footer-content {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr;
      gap: 40px;
      margin-bottom: 40px;
    }
    .footer-brand .logo {
      font-size: 24px;
      margin-bottom: 16px;
    }
    .footer-brand p {
      color: rgba(255,255,255,.8);
      line-height: 1.6;
      margin-bottom: 20px;
    }
    .contact-info-footer {
      margin-top: 20px;
    }
    .contact-info-footer div {
      margin-bottom: 12px;
      color: rgba(255,255,255,.9);
      font-size: 14px;
    }
    .contact-info-footer strong {
      display: block;
      margin-bottom: 4px;
      color: #fff;
    }
    .footer-links h4,
    .footer-services h4 {
      font-weight: 800;
      font-size: 18px;
      margin-bottom: 20px;
      color: #fff;
    }
    .footer-links a,
    .footer-services a {
      display: block;
      font-size: 15px;
      color: rgba(255,255,255,.8);
      text-decoration: none;
      margin: 10px 0;
      transition: transform .2s var(--timing), color .2s var(--timing);
    }
    .footer-links a:hover,
    .footer-services a:hover {
      transform: translateX(4px);
      color: #cfd7ff;
    }
    .footer-bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-top: 1px solid rgba(255,255,255,0.12);
      padding-top: 24px;
      flex-wrap: wrap;
      gap: 16px;
    }
    .copyright {
      font-size: 14px;
      color: rgba(255,255,255,.8);
    }
    .footer-legal {
      display: flex;
      gap: 24px;
    }
    .footer-legal a {
      font-size: 14px;
      color: rgba(255,255,255,.8);
      text-decoration: none;
      transition: color .2s var(--timing);
    }
    .footer-legal a:hover {
      color: #fff;
    }
    .social {
      display: flex;
      gap: 12px;
    }
    .social a {
      width: 40px;
      height: 40px;
      border-radius: 8px;
      display: grid;
      place-items: center;
      background: rgba(255,255,255,.1);
      color: #fff;
      text-decoration: none;
      transition: transform .2s var(--timing), background .2s var(--timing);
    }
    .social a:hover {
      transform: translateY(-2px);
      background: rgba(255,255,255,.2);
    }
    .social svg {
      width: 20px;
      height: 20px;
      display: block;
    }

    /* ===== SCROLL TO TOP BUTTON ===== */
    .scroll-to-top {
      position: fixed;
      bottom: 20px;
      right: 20px;
      width: 50px;
      height: 50px;
      background: linear-gradient(135deg, #8b5cf6, #7c3aed);
      border: none;
      border-radius: 50%;
      color: white;
      cursor: pointer;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
      z-index: 1000;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }
    .scroll-to-top.show {
      opacity: 1;
      visibility: visible;
    }
    .scroll-to-top:hover {
      transform: scale(1.1);
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
    }
    .scroll-to-top svg {
      width: 24px;
      height: 24px;
    }

    @media (max-width: 768px) {
      .footer-content {
        grid-template-columns: 1fr;
        gap: 32px;
      }
      .footer-bottom {
        flex-direction: column;
        text-align: center;
      }
      .footer-legal {
        justify-content: center;
      }
    }
    /* Required field indicator */
.req {
  color: #ef4444;
  font-weight: bold;
}

/* Checkbox styles */
.checks {
  margin: 20px 0;
}

.checks label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 14px;
  line-height: 1.4;
  cursor: pointer;
}

.checks input[type="checkbox"] {
  margin-top: 2px;
  flex-shrink: 0;
  color:#0a0f22;
}

/* Form alert styles */
#formAlert {
  display: none;
  margin: 12px 0;
  padding: 12px 16px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 14px;
}