@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700;800&display=swap');

  :root{
    /* Virex palette (from index) */
    --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;

    /* services card surfaces (used in one block below) */
    --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);
  }

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

  /* ====== NAVBAR (exact same as index) ====== */
  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;
  }
.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) }

  .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) }

  .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){
    :root{ --header-h:64px }
    header{ height:64px; padding:0 12px }
    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; opacity:0; transform:translateX(12px) }
    nav.active{ display:flex; transform:translateX(0) }
    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 }
  }

  /* ====== STARLIFY PAGE CONTENT (styled to match index) ====== */
  main{ display:block }

  /* HERO — gradient like index */
  .starlify-hero{
    background:var(--brand-hero);
    color:#fff;
    text-shadow:0 1px 0 rgba(0,0,0,.25);
    padding:48px 16px 64px;
  }
  .hero-inner{ max-width:var(--maxw); margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap }
  .starlify-title{ font-size:48px; line-height:1.06; font-weight:800; letter-spacing:-.3px; }
  .starlify-eyebrow{ font-size:11px; letter-spacing:.18em; font-weight:800; text-transform:uppercase; color:#c8fff4; opacity:.9; margin-bottom:8px }
  .starlify-cta{ margin-top:16px; display:flex; gap:12px; align-items:center }
  .starlify-btn{
    display:inline-block; font-weight:800; background: linear-gradient(90deg, var(--hover), var(--accent));
    color:#fff; padding:10px 18px; border-radius:42px; font-size:15px; border:2px solid rgba(255,255,255,0.18);
    box-shadow:var(--shadow); text-decoration:none; transition:transform .25s var(--timing), box-shadow .25s var(--timing)
  }
  .starlify-btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lg) }
  .starlify-link{ color:#fff; text-decoration:none; font-weight:700 }
  .starlify-link:hover{ color:#e0faff; text-decoration:underline }

  /* White info section (same structure as index info-section white) */
  .info-section{ display:flex; flex-wrap:wrap; gap:28px; padding:48px 16px; justify-content:center; align-items:center }
  .info-section .inner{ max-width:var(--maxw); width:100%; display:flex; flex-wrap:wrap; gap:28px; justify-content:space-between; align-items:center }
  .info-text{ max-width:560px }
  .info-text h2{ font-size:22px; font-weight:800; margin-bottom:10px; letter-spacing:-.2px }
  .info-text p{ font-size:15px; line-height:1.7; margin-bottom:12px; color:var(--ink-soft) }
  .info-section.white{ background:#fff }
  .info-section.white .info-text h2{ color:#0d1320 }
  .info-section.white .info-text p{ color:#2a2f3e }
  .info-section.white img{ max-width:520px; width:100%; height:auto; border-radius:10px; box-shadow:var(--shadow) }

  /* Green gradient strip (like index green section) */
  .band{ background:var(--brand-green); color:#fff; position:relative; padding:48px 16px }
  .band::before{ content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(0,0,0,.08),rgba(0,0,0,.08)); pointer-events:none }
  .band .inner{ max-width:var(--maxw); margin:0 auto }
  .band h3{ font-size:22px; font-weight:800; margin-bottom:10px; text-shadow:0 1px 0 rgba(0,0,0,.25) }
  .band p{ color:rgba(255,255,255,.92); font-size:15px; line-height:1.7; max-width:900px }

  /* Stats grid styled to match white block */
  .stats{ background:#fff; padding:48px 16px }
  .stats .inner{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px }
  .stat-item{ background:#eaf8f1; border-radius:12px; padding:22px; text-align:center; box-shadow:var(--shadow) }
  .stat-number{ font-size:42px; font-weight:800; color:#0b1a30; margin-bottom:6px }
  .stat-label{ font-size:15px; color:#2a392f }

  /* Clients logos (white strip like index logo slider vibe) */
  .client-logos{ background:#fff; padding:48px 16px; text-align:center }
  .client-logos h4{ font-size:11px; letter-spacing:.18em; font-weight:800; text-transform:uppercase; color:#22bfa8; margin-bottom:18px }
  .logos-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:24px; align-items:center; max-width:var(--maxw); margin:0 auto }
  .logo-item img{ max-width:100%; height:auto; filter:grayscale(100%); opacity:.8; transition:filter .25s, opacity .25s }
  .logo-item img:hover{ filter:grayscale(0); opacity:1 }

  /* Alternating content blocks (white) */
  .content-2col{ padding:60px 16px; background:#fff }
  .content-2col .inner{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:36px; align-items:center }
  .content-2col h2{ font-size:20px; font-weight:800; color:#0b1a30; margin-bottom:12px }
  .content-2col p{ font-size:14.8px; line-height:1.7; color:#2a392f }
  .content-2col img{ width:100%; height:auto; border-radius:12px; box-shadow:var(--shadow) }

  @media (max-width:900px){
    .content-2col .inner{ grid-template-columns:1fr; gap:20px }
  }
  .footer_logo img{
    width:200px;
    height:auto;
  }
  /* Footer (identical to index) */
  .footer{ background:var(--brand-green) }
  .footer .container{ max-width:var(--maxw); margin:0 auto; padding:36px 16px 22px }
  .footer-top{ display:grid; grid-template-columns:1fr 260px; gap:18px; padding:8px 0 24px }
  .brand-wrap{ display:flex; align-items:center; gap:12px }
  .brand-text{ font-size:26px; letter-spacing:8px; font-weight:800; color:#fff; text-shadow:0 1px 0 rgba(0,0,0,.25) }
  .footer-links{ text-align:right }
  .footer-links h4{ font-weight:800; font-size:16px; margin-bottom:10px; color:#fff }
  .footer-links a{ display:block; font-size:15px; color:#eef1ff; text-decoration:none; margin:6px 0; transition:transform .2s var(--timing),color .2s var(--timing) }
  .footer-links a:hover{ transform:translateX(2px); color:#cfd7ff }
  .footer-bottom{ display:grid; grid-template-columns:1fr auto auto auto; align-items:center; gap:12px; border-top:1px solid rgba(255,255,255,0.12); padding-top:12px }
  .copyright{ font-size:13.5px; color:#f5f6ff }
  .legal a{ font-size:13.5px; color:#fff; font-weight:800; text-decoration:none }
  .legal a:hover{ text-decoration:underline }
  .iso{ display:flex; align-items:center; gap:8px }
  .iso-badge{ font-size:12px; font-weight:800; color:#fff; border:2px solid rgba(255,255,255,.9); border-radius:999px; padding:8px 14px; line-height:1 }
  .social{ display:flex; gap:10px }
  .social a{ width:32px; height:32px; border-radius:6px; display:grid; place-items:center; background:#0f142a; color:#fff; text-decoration:none; transition:transform .2s var(--timing),opacity .2s }
  .social a:hover{ transform:translateY(-2px); opacity:.92 }
  .social svg{ width:18px; height:18px; display:block }
  @media (max-width:768px){
    .footer-top{ grid-template-columns:1fr; text-align:center }
    .footer-links{ text-align:center }
    .footer-bottom{ grid-template-columns:1fr; gap:8px }
    .social{ justify-content:center }
  }

  /* Chat widget (identical to index) */
  .chat-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.25); backdrop-filter:blur(2px); opacity:0; pointer-events:none; transition:opacity .25s var(--timing); z-index:1001 }
  .chat-overlay.show{ opacity:1; pointer-events:auto }
  .chat-fab{ position:fixed; right:20px; bottom:22px; width:56px; height:56px; border-radius:50%; background: radial-gradient(120% 120% at 100% 0%, #42c2a7 0%, #0a7a64 60%); color:#fff; display:grid; place-items:center; box-shadow:0 10px 24px rgba(0,0,0,.18); cursor:pointer; z-index:1002; transition:transform .2s var(--timing), box-shadow .2s var(--timing) }
  .chat-fab:hover{ transform:translateY(-2px); box-shadow:0 14px 28px rgba(0,0,0,.22) }
  .chat-fab svg{ width:26px; height:26px }
  .chat-fab .pulse{ position:absolute; inset:-6px; border-radius:50%; border:2px solid #42c2a7; opacity:.6; animation:pulse 1.8s ease-out infinite }
  @keyframes pulse{0%{transform:scale(.9);opacity:.6}70%{transform:scale(1.25);opacity:0}100%{opacity:0}}
  .chat-box{ position:fixed; right:20px; bottom:86px; width:340px; max-width:calc(100vw - 28px); background:#fff; border-radius:16px; box-shadow:0 18px 40px rgba(0,0,0,.25); display:flex; flex-direction:column; overflow:hidden; z-index:1003; transform:translateY(16px) scale(.98); opacity:0; pointer-events:none; transition:transform .28s var(--timing), opacity .28s var(--timing) }
  .chat-box.open{ transform:none; opacity:1; pointer-events:auto }
  .chat-head{ background:linear-gradient(90deg, var(--accent), var(--hover)); color:#fff; padding:12px 14px; display:flex; align-items:center; justify-content:space-between }
  .chat-head .tit{ font-weight:800 }
  .chat-head .mini{ opacity:.9; font-size:12px }
  .chat-head button{ background:transparent; border:0; color:#fff; cursor:pointer; padding:6px }
  .chat-body{ padding:12px; height:300px; overflow:auto; background:#f8fbf9 }
  .msg{ display:flex; margin:8px 0 }
  .msg .bubble{ padding:9px 12px; border-radius:12px; max-width:78%; box-shadow:var(--shadow); font-size:14px; line-height:1.45 }
  .msg.user{ justify-content:flex-end }
  .msg.user .bubble{ background:#e6fff6 }
  .msg.bot .bubble{ background:#fff }
  .chat-input{ display:flex; gap:8px; padding:10px; border-top:1px solid #eef1ef; background:#fff }
  .chat-input input{ flex:1; padding:10px 12px; border-radius:10px; border:1px solid #dfe8e4; outline:none; font-size:14px }
  .chat-input button{ background:var(--accent); color:#fff; font-weight:800; border:0; border-radius:10px; padding:10px 14px; cursor:pointer; transition:transform .15s var(--timing), opacity .15s }
  .chat-input button:active{ transform:scale(.98) }

  /* ===== 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;
  }