:root{
  --bg:#070A12;
  --card: rgba(255,255,255,.08);
  --card2: rgba(255,255,255,.06);
  --border: rgba(255,255,255,.14);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.70);
  --shadow: 0 22px 60px rgba(0,0,0,.55);
  --shadow2: 0 10px 24px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color:var(--text);
  background: var(--bg);
  overflow-x:hidden;
}

a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}

.bg{position:fixed; inset:0; z-index:-1; overflow:hidden;}
.grid{
  position:absolute; inset:-30%;
  background:
    radial-gradient(circle at 20% 20%, rgba(120,130,255,.10), transparent 45%),
    radial-gradient(circle at 80% 40%, rgba(0,255,200,.08), transparent 50%),
    radial-gradient(circle at 50% 80%, rgba(255,220,0,.08), transparent 45%),
    linear-gradient(transparent 0 0);
  filter: blur(0px);
}
.blob{
  position:absolute;
  width:520px; height:520px;
  border-radius: 50%;
  filter: blur(60px);
  opacity:.55;
  transform: translate3d(0,0,0);
  animation: float 10s ease-in-out infinite;
}
.b1{left:-120px; top:-120px; background: rgba(120,130,255,.45)}
.b2{right:-160px; top:120px; background: rgba(0,255,200,.30); animation-delay:-3s}
.b3{left:30%; bottom:-220px; background: rgba(255,220,0,.20); animation-delay:-6s}
@keyframes float{
  0%,100%{transform: translateY(0) translateX(0) scale(1)}
  50%{transform: translateY(-22px) translateX(12px) scale(1.04)}
}
#sparkCanvas{position:absolute; inset:0; width:100%; height:100%;}

.topbar{
  position:sticky; top:0;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 22px;
  background: rgba(10,12,22,.45);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.08);
  z-index:20;
}
.brand{display:flex; gap:12px; align-items:center;}
.brand-logo{
  width:44px; height:44px;
  border-radius: 14px;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow2);
  display:grid; place-items:center;
  overflow:hidden;
}
.brand-logo img{width:100%; height:100%; object-fit:cover}
.brand-mark{
  width:18px; height:18px;
  border-radius:6px;
  background: linear-gradient(135deg, rgba(120,130,255,1), rgba(0,255,200,1));
  box-shadow: 0 0 0 8px rgba(255,255,255,.05);
}
.brand-text{display:flex; flex-direction:column; line-height:1.1}
.brand-name{font-weight:800; letter-spacing:.2px}
.brand-tag{font-size:.78rem; color:var(--muted)}

.nav{display:flex; gap:14px; align-items:center}
.nav a{opacity:.86}
.nav a:hover{opacity:1}

.wrap{max-width:1160px; margin:0 auto; padding:22px}
.hero{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:26px;
  padding: 22px 0 6px;
  align-items:center;
}
.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  border-radius: 999px;
  box-shadow: var(--shadow2);
  color: rgba(255,255,255,.86);
  font-size:.9rem;
  margin-bottom:14px;
}
h1{
  margin: 0 0 12px;
  font-size: clamp(2.0rem, 3.6vw, 3.2rem);
  letter-spacing: -0.6px;
  line-height:1.12;
}
.grad{
  background: linear-gradient(90deg, rgba(120,130,255,1), rgba(0,255,200,1), rgba(255,220,0,1));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.sub{margin:0 0 18px; color:var(--muted); font-size:1.05rem; line-height:1.6}
.cta{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:18px}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding: 12px 16px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  box-shadow: var(--shadow2);
  cursor:pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
  user-select:none;
}
.btn:hover{transform: translateY(-2px); border-color: rgba(255,255,255,.22)}
.btn:active{transform: translateY(0px) scale(.99)}
.btn-primary{
  border: 1px solid rgba(0,255,200,.30);
  background: linear-gradient(135deg, rgba(0,255,200,.16), rgba(120,130,255,.14));
}
.btn-ghost{
  background: rgba(255,255,255,.03);
}
.btn-soft{
  background: rgba(255,255,255,.05);
}


/* Bigger CTA buttons */
.cta .btn{
  padding: 16px 22px;
  border-radius: 16px;
  font-size: 1.05rem;
  font-weight: 900;
}

/* Make primary button stand out more */
.btn-primary{
  border: 1px solid rgba(0,255,200,.35);
  background: linear-gradient(135deg, rgba(255,220,0,.95), rgba(0,255,200,.35));
  color: #07101a;
  box-shadow: 0 16px 34px rgba(0,0,0,.45);
}

/* Strong hover */
.btn-primary:hover{
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 22px 46px rgba(0,0,0,.55);
}





.stats{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:12px;
  margin: 14px 0 14px;
}
.stat{
  padding: 14px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
}
.stat-num{font-weight:900; font-size:1.5rem}
.stat-label{color:var(--muted); font-size:.9rem}

.trust{display:flex; flex-wrap:wrap; gap:10px}
.trust-chip{
  padding:10px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.82);
}

.glass-card{
  position:relative;
  border-radius: 22px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.glass-top{
  display:flex; align-items:center; gap:10px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.dot{width:10px; height:10px; border-radius:50%}
.d1{background:#ff5c5c}
.d2{background:#ffcc4d}
.d3{background:#3bd671}
.glass-title{color:rgba(255,255,255,.78); font-size:.92rem}
.glass-body{padding: 16px 16px 18px; position:relative}
.mini-row{display:flex; gap:12px; align-items:flex-start; padding: 12px 0}
.mini-ic{
  width:42px; height:42px; border-radius: 14px;
  display:grid; place-items:center;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
}
.mini-title{font-weight:800}
.mini-sub{color:var(--muted); font-size:.92rem; margin-top:2px}
.shine{
  position:absolute; inset:-50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.14), transparent 55%);
  transform: rotate(12deg);
  pointer-events:none;
  animation: shine 6s ease-in-out infinite;
}
@keyframes shine{
  0%,100%{opacity:.30; transform: translateX(0) rotate(12deg)}
  50%{opacity:.55; transform: translateX(40px) rotate(12deg)}
}

.floating{margin-top:12px}
.float-card{
  display:inline-flex; gap:10px; align-items:center;
  padding: 12px 14px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  backdrop-filter: blur(10px);
}

.how, .gallery, .contact{padding: 26px 0 6px}
h2{margin:0 0 12px; font-size:1.6rem}
.how-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:12px;
}
.how-card{
  padding: 16px;
  border-radius: 18px;
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
  transition: transform .18s ease;
}
.how-card:hover{transform: translateY(-3px)}
.how-ic{
  width:46px; height:46px; border-radius: 16px;
  display:grid; place-items:center;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  margin-bottom:10px;
}
.how-card p{color:var(--muted); line-height:1.6; margin: 8px 0 0}

.gallery-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:12px;
  margin-bottom: 12px;
}
.gallery-head p{margin:0; color:var(--muted)}
.cards{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:12px;
}
.card{
  border-radius: 18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  box-shadow: var(--shadow2);
  cursor:pointer;
  transition: transform .18s ease;
}
.card:hover{transform: translateY(-4px)}
.thumb{position:relative; aspect-ratio: 4/5; overflow:hidden}
.thumb img{width:100%; height:100%; object-fit:cover; transform: scale(1.02)}
.badge{
  position:absolute; left:10px; top:10px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.18);
  font-size:.85rem;
}
.body{padding: 12px 12px 14px}
.body p{margin:6px 0 0; color:var(--muted); font-size:.95rem}

.contact-card{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding: 18px;
  border-radius: 20px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
}
.contact-num{
  display:inline-flex; gap:10px; align-items:center;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(0,255,200,.10);
  border:1px solid rgba(0,255,200,.20);
  margin-top:10px;
  font-weight:800;
}
.small{color:var(--muted); margin:10px 0 0; line-height:1.6}

.footer{
  padding: 20px 0 26px;
  color: rgba(255,255,255,.62);
  text-align:center;
}

/* Reveal animation */
.reveal{opacity:0; transform: translateY(16px); filter: blur(10px);}
.reveal.show{opacity:1; transform: translateY(0); filter: blur(0); transition: all .75s ease}

/* Modal */
.modal{
  position:fixed; inset:0;
  display:none;
  align-items:center; justify-content:center;
  z-index:50;
}
.modal.show{display:flex}
.modal-backdrop{position:absolute; inset:0; background: rgba(0,0,0,.70)}
.modal-box{
  position:relative;
  width:min(920px, 92vw);
  max-height: 86vh;
  border-radius: 18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(10,12,22,.65);
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow);
}
.modal-box img{
  width:100%;
  height:auto;
  max-height: 86vh;
  object-fit: contain;
}
.modal-close{
  position:absolute; right:10px; top:10px;
  width:44px; height:44px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.25);
  color: white;
  cursor:pointer;
}

/* Responsive */
@media (max-width: 980px){
  .hero{grid-template-columns: 1fr; }
  .cards{grid-template-columns: repeat(2, minmax(0,1fr));}
  .how-grid{grid-template-columns: 1fr;}
  .nav{display:none;}
}
@media (max-width: 520px){
  .cards{grid-template-columns: 1fr;}
  .stats{grid-template-columns: 1fr;}
  .contact-card{flex-direction:column; align-items:flex-start}
}


* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background: #0b1220;
  color: #fff;
}

.hero{
  min-height: 100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding: 50px 18px;
  text-align:center;
}

.logo-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
  background: transparent;
  border: 0;
  box-shadow: none;
  perspective: 1000px;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,.35));

}


/* the rotating 3D object */
.logo-3d{
  position: relative;
  width: 200px;   /* 👈 increased */
  height: 200px;  /* 👈 increased */
  transform-style: preserve-3d;
  animation: coinTurn 4.5s linear infinite;
}


/* both faces */
.logo-face{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: contain;
  backface-visibility: hidden; /* important */
}

/* front side */
.logo-face.front{
  transform: rotateY(0deg);
}

/* back side (mirror and rotate) */
.logo-face.back{
  transform: rotateY(180deg) scaleX(-1);
}

/* continuous same direction turning */
@keyframes coinTurn{
  from { transform: rotateY(0deg); }
  to   { transform: rotateY(360deg); }
}







/* Always forward direction:
   0 → 180 → 360 → 540 ... (front, back, front, back...)
   looks like same direction turning all the time */
@keyframes logoFlipForward{
  0%   { transform: rotateY(0deg); }
  50%  { transform: rotateY(180deg); }
  100% { transform: rotateY(360deg); }
}




.title{
  margin: 22px 0 10px;
  font-size: 40px;
  letter-spacing: 0.5px;
}

.subtitle{
  max-width: 680px;
  opacity: 0.9;
  line-height: 1.6;
  font-size: 16px;
  margin: 0 0 22px;
}

.actions{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content:center;
}

.btn{
  padding: 12px 18px;
  border-radius: 999px;
  text-decoration:none;
  font-weight: 700;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.primary{
  background: #ffd400;
  color: #0b1220;
}

.ghost{
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  background: rgba(255,255,255,0.06);
}

.vacancies{
  padding: 50px 18px;
  border-top: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.02);
}

.muted{ opacity: 0.7; }

@media (max-width: 520px){
  .title{ font-size: 30px; }
  .logo-wrap{ width: 140px; height: 140px; }
  .logo-spin{ width: 110px; height: 110px; }
}


@keyframes logoFlip {
  0%   { transform: rotateY(0deg); }
  20%  { transform: rotateY(0deg); }

  50%  { transform: rotateY(160deg); }

  80%  { transform: rotateY(160deg); }
  100% { transform: rotateY(360deg); }
}


@media (max-width: 520px){
  .cta .btn{
    width: 100%;
    padding: 16px 18px;
    font-size: 1.05rem;
  }
}

@media (max-width: 520px){
  .logo-3d{
    width: 150px;
    height: 150px;
  }
}





.logo-wrap{
  position: relative;
}

.logo-wrap::before{
  content:"";
  position:absolute;
  inset:-18px;
  border-radius: 28px;
  background: radial-gradient(circle at 50% 50%,
    rgba(255,255,255,.14),
    rgba(255,255,255,.04),
    transparent 70%);
  filter: blur(2px);
  z-index: 0;
}

.logo-3d{ position: relative; z-index: 1; }


@media (max-width: 520px){
  .logo-face img{
    filter: brightness(1.18) contrast(1.12) drop-shadow(0 10px 24px rgba(0,0,0,.6));
  }
}