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

    :root{
      /* Virex palette (from index.html) */
      --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; /* indigo-violet */
      --hover:#22d3ee;  /* cyan */
      --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(.2,.8,.2,1);
      --maxw:1180px;
      --header-h:68px;
      --nav-font-size:14px;
      --nav-line-height:22px;

      /* surfaces */
      --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;
      padding-top:var(--header-h);
      text-rendering:optimizeLegibility;
    }

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

    /* ===== HEADER (same as landing) ===== */
    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-nav 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%}
    nav a.active{color:var(--accent)}
    nav a.active::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,.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}
    }

    /* ===== ABOUT HERO (dark theme to match index) ===== */
    .about-hero{
      background: var(--brand-hero);
      color:#fff;
      text-shadow:0 1px 0 rgba(0,0,0,.25);
      padding:56px 16px 48px;
    }
    .about-hero .container{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1.1fr 1fr;gap:24px;align-items:center}
    .ah-chip{display:inline-block;margin-bottom:10px;background:rgba(255,255,255,.18);color:#fff;font-weight:800;font-size:12.5px;letter-spacing:.3px;padding:7px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.35)}
    .ah-title{font-size:48px;line-height:1.06;font-weight:800;color:#fff;margin-bottom:10px;letter-spacing:-.3px}
    .ah-sub{font-size:15.5px;line-height:1.7;color:#eef7ff;max-width:640px}
    .ah-media img{width:100%;border-radius:12px;filter:drop-shadow(0 10px 24px rgba(0,0,0,.28))}
    @media (max-width:992px){.about-hero .container{grid-template-columns:1fr}}

    /* ===== INTRO (white block like index) ===== */
    .intro{background:#fff}
    .intro .wrap{max-width:var(--maxw);margin:0 auto;padding:48px 16px;display:grid;grid-template-columns:1fr 1.1fr;gap:28px;align-items:center}
    .intro h2{font-size:28px;font-weight:800;margin-bottom:8px;color:#0b1a30}
    .intro p{font-size:16px;line-height:1.8;color:#2a2f3e;margin-bottom:12px}
    .intro img{width:100%;border-radius:12px;box-shadow:var(--shadow)}
    @media (max-width:992px){.intro .wrap{grid-template-columns:1fr}}

    /* ===== STATS (green gradient like index) ===== */
    .stats{background:var(--brand-green)}
    .stats .grid{max-width:var(--maxw);margin:0 auto;padding:32px 16px;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
    .kpi{background:#fff;border-radius:14px;box-shadow:var(--shadow);padding:22px;text-align:center;transition:transform .25s var(--timing), box-shadow .25s var(--timing)}
    .kpi:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg)}
    .kpi .num{font-size:34px;font-weight:800;color:#0b1a30;letter-spacing:.5px}
    .kpi .lbl{font-size:13.5px;color:#2a392f;margin-top:6px}
    @media (max-width:900px){.stats .grid{grid-template-columns:repeat(2,1fr)}}

    /* ===== VALUES (white) ===== */
    .values{background:#fff}
    .values .wrap{max-width:var(--maxw);margin:0 auto;padding:48px 16px}
    .values h2{font-size:24px;font-weight:800;margin-bottom:18px;text-align:center;color:#0e1220}
    .v-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
    .v-card{
      background:linear-gradient(180deg,#ffffff 0%, #eef7ff 100%);padding:22px;border-radius:14px;box-shadow:var(--shadow);
      transform-style:preserve-3d;transition:transform .25s var(--timing), box-shadow .25s var(--timing)
    }
    .v-card:hover{transform:translateY(-4px) rotateX(3deg) rotateY(-3deg); box-shadow:var(--shadow-lg)}
    .v-card h3{font-size:17px;font-weight:800;margin-bottom:6px;color:#0e1220}
    .v-card p{font-size:14.5px;line-height:1.7;color:#2b3242}
    @media (max-width:900px){.v-grid{grid-template-columns:1fr}}

    /* ===== TIMELINE (dark strip like index dark sections) ===== */
    .timeline{background:#121212;color:#fff;padding:48px 0}
    .timeline .wrap{max-width:var(--maxw);margin:0 auto;padding:0 16px}
    .timeline h2{font-size:24px;font-weight:800;margin-bottom:12px;text-align:center}
    .t-strip{display:flex;gap:16px;overflow:auto;padding:10px 2px 6px;scroll-snap-type:x mandatory}
    .t-card{
      min-width:280px;background:#1b1b1b;border:1px solid #2b2b2b;border-radius:14px;padding:18px;scroll-snap-align:center;
      transition:transform .25s var(--timing), background .25s var(--timing)
    }
    .t-card:hover{transform:translateY(-6px);background:#212121}
    .t-year{font-weight:800;letter-spacing:.4px;margin-bottom:8px;color:#a5b4fc}
    .t-text{font-size:14.5px;line-height:1.7;color:#e6e9ef}

    /* ===== TEAM (white) ===== */
    .team{background:#fff}
    .team .wrap{max-width:var(--maxw);margin:0 auto;padding:48px 16px}
    .team h2{font-size:24px;font-weight:800;margin-bottom:18px;text-align:center;color:#0e1220}
    .team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
    .member{background:#fff;border-radius:14px;box-shadow:var(--shadow);overflow:hidden;transition:transform .25s var(--timing), box-shadow .25s var(--timing)}
    .member:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
    .member img{width:100%;height:180px;object-fit:cover}
    .member .info{padding:12px}
    .m-name{font-weight:800;color:#0e1220}
    .m-role{font-size:13.5px;color:#55607a}
    @media (max-width:992px){.team-grid{grid-template-columns:repeat(2,1fr)}}
    @media (max-width:520px){.team-grid{grid-template-columns:1fr}}

    /* ===== JOBS (white) ===== */
    .jobs{background:#fff}
    .jobs .wrap{max-width:var(--maxw);margin:0 auto;padding:32px 16px 56px}
    .jobs h2{font-size:22px;font-weight:800;margin-bottom:16px;color:#0b1a30}
    .job-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
    .job{
      background:linear-gradient(180deg,#ffffff 0%, #f4f9ff 100%);
      border:1px solid #e6ecff; border-radius:14px; padding:18px; box-shadow:var(--shadow);
      transition:transform .25s var(--timing), box-shadow .25s var(--timing)
    }
    .job:hover{transform:translateY(-5px); box-shadow:var(--shadow-lg)}
    .job h3{font-size:16.5px;font-weight:800;margin-bottom:6px;color:#0e1220}
    .job .meta{font-size:12.5px;color:#5a678a;margin-bottom:10px}
    .job a{display:inline-block;font-weight:800;color:#0b5c6b;text-decoration:none;position:relative}
    .job a::after{content:'';position:absolute;left:0;bottom:-3px;height:2px;width:0;background:#0b5c6b;transition:width .25s var(--timing)}
    .job a:hover::after{width:100%}
    @media (max-width:992px){.job-grid{grid-template-columns:1fr}}

    /* ===== CTA band (brand-green) ===== */
    .cta-band{background:var(--brand-green);padding:34px 16px}
    .cta-inner{max-width:var(--maxw);margin:0 auto;display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap}
    .cta-inner h3{font-size:22px;font-weight:800;color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.25)}
    .cta-btn{
      display:inline-block;background:rgba(255,255,255,.18);color:#fff;padding:10px 20px;border-radius:32px;font-weight:800;text-decoration:none;border:1px solid rgba(255,255,255,.35);
      box-shadow:0 6px 14px rgba(0,0,0,.06); transition:transform .25s var(--timing), box-shadow .25s var(--timing), background .25s var(--timing)
    }
    .cta-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow);background:rgba(255,255,255,.26)}

    /* ===== FOOTER (same as landing) ===== */
    .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 28px}
    .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 ===== */
    .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)}
    @media (max-width:420px){.chat-box{right:10px; left:10px; width:auto} .chat-fab{right:12px; bottom:16px}}

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