:root{
  --bg:#05070f;
  --bg2:#0b0710;
  --card:rgba(255,255,255,.06);
  --stroke:rgba(255,255,255,.12);
  --text:#f5f5f7;
  --muted:rgba(245,245,247,.72);
  --crimson:#b11226;
  --shadow:0 20px 60px rgba(0,0,0,.45);
  --radius:18px;
  --radius2:22px;
  --max:1120px;
}

*{
  box-sizing:border-box;
}

html,body{
  margin:0;
  padding:0;
  min-height:100%;
}

body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:
    radial-gradient(1200px 700px at 12% 10%, rgba(177,18,38,.12), transparent 58%),
    radial-gradient(1000px 650px at 88% 15%, rgba(255,255,255,.04), transparent 55%),
    linear-gradient(180deg,var(--bg),var(--bg2));
  color:var(--text);
  overflow-x:hidden;
  position:relative;
}

a{
  color:inherit;
  text-decoration:none;
}

img{
  max-width:100%;
  display:block;
}

body::before{
  content:"";
  position:absolute;
  top:140px;
  left:50%;
  transform:translateX(-50%);
  width:min(72vw,860px);
  height:min(72vw,860px);
  background-image:url("./logo.png");
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  opacity:.04;
  z-index:1;
  pointer-events:none;
  filter:
    brightness(0) invert(1)
    drop-shadow(0 0 28px rgba(255,255,255,.18));
}

#bgCanvas{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  pointer-events:none;
  opacity:.95;
}

.grid{
  position:fixed;
  inset:0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size:72px 72px;
  pointer-events:none;
  opacity:.12;
  z-index:0;
}

.container,
section,
.nav,
.footer,
main{
  position:relative;
  z-index:2;
}

.container{
  width:min(var(--max),92vw);
  margin:auto;
}

main{
  padding-bottom:40px;
}

section{
  padding:28px 0;
}

.hero-section{
  padding-top:28px;
}

.nav{
  position:sticky;
  top:0;
  z-index:1000;
  background:rgba(8,8,14,.72);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.08);
}

.nav-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 0;
  position:relative;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  font-weight:900;
  letter-spacing:.18em;
  color:#fff;
  white-space:nowrap;
}

.brand-logo{
  width:56px;
  height:56px;
  object-fit:contain;
  filter:
    brightness(0) invert(1)
    drop-shadow(0 0 14px rgba(255,255,255,.95))
    drop-shadow(0 0 30px rgba(255,255,255,.45));
}

.nav-links{
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--muted);
}

.nav-links a{
  padding:10px 12px;
  border-radius:12px;
}

.nav-links a:hover{
  background:rgba(255,255,255,.06);
  color:#fff;
}

.nav-cta{
  display:flex;
  align-items:center;
  gap:10px;
}

.lang-switch{
  display:flex;
  gap:6px;
  align-items:center;
  padding:4px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.05);
}

.lang-switch button{
  border:none;
  background:transparent;
  color:#fff;
  padding:8px 10px;
  border-radius:10px;
  cursor:pointer;
  font-weight:700;
}

.lang-switch button.active{
  background:rgba(255,255,255,.18);
}

.menu-toggle{
  display:none;
  background:none;
  border:none;
  color:var(--text);
  font-size:26px;
  cursor:pointer;
}

.btn{
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.08);
  color:#fff;
  padding:10px 14px;
  border-radius:14px;
  cursor:pointer;
  transition:.18s ease;
  font-weight:700;
  display:inline-flex;
  align-items:center;
  gap:8px;
}

.btn:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.14);
}

.btn-primary{
  background:#fff;
  color:#000;
  border:1px solid rgba(255,255,255,.8);
}

.btn-primary:hover{
  background:#f2f2f2;
}

.card{
  border-radius:var(--radius2);
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:var(--shadow);
  overflow:hidden;
  position:relative;
}

.pulse{
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(600px 240px at 20% 0%, rgba(177,18,38,.18), transparent 60%),
    radial-gradient(620px 240px at 80% 10%, rgba(255,255,255,.05), transparent 60%);
  pointer-events:none;
}

.section-title{
  margin-bottom:18px;
}

.section-title h1,
.section-title h2{
  margin:0 0 10px;
}

.section-title p{
  margin:0;
  color:var(--muted);
  line-height:1.85;
  font-size:15px;
}

.hero-kpis{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-top:24px;
  position:relative;
  z-index:2;
}

.kpi{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  border-radius:16px;
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.kpi strong{
  font-size:18px;
}

.kpi span{
  color:var(--muted);
  line-height:1.8;
  font-size:14px;
}

.cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}

.card-box{
  border-radius:20px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  padding:20px;
  box-shadow:0 12px 28px rgba(0,0,0,.25);
  display:flex;
  flex-direction:column;
  gap:10px;
}
.card-box h3{
  margin:0 0 10px;
  font-size:22px;
}

.card-box p{
  margin:0;
  color:var(--muted);
  line-height:1.85;
  font-size:15px;
}

.icon{
  width:52px;
  height:52px;
  border-radius:16px;
  display:grid;
  place-items:center;
  margin-bottom:14px;
  background:linear-gradient(135deg, rgba(177,18,38,.24), rgba(255,255,255,.08));
  border:1px solid rgba(255,255,255,.12);
  font-size:22px;
}

.form-grid{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:16px;
}

.form-box{
  border-radius:20px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  padding:22px;
}


.form-box h3{
  margin:0 0 12px;
}

label{
  display:block;
  margin:14px 0 8px;
  font-weight:700;
}

input,
textarea{
  width:100%;
  background:rgba(255,255,255,.06);
  color:#fff;
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  padding:12px 14px;
  font:inherit;
  outline:none;
}

textarea{
  min-height:140px;
  resize:vertical;
}

input::placeholder,
textarea::placeholder{
  color:rgba(255,255,255,.42);
}

.footer{
  padding:22px 0 28px;
  border-top:1px solid rgba(255,255,255,.08);
  margin-top:20px;
}

.row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
}

/* Intro CSS only */

.genex-intro{
  position:fixed;
  inset:0;
  background:
    radial-gradient(circle at center, rgba(177,18,38,.10), transparent 35%),
    rgba(3,5,10,.97);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:6000;
  animation:genexIntroExit 2.8s ease forwards;
}

.genex-intro-core{
  width:min(86vw,420px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  animation:genexIntroFloat 2s ease-in-out infinite alternate;
}

.genex-intro-logo{
  width:130px;
  height:130px;
  object-fit:contain;
  display:block;
  margin:0 auto 16px;
  filter:
    brightness(0) invert(1)
    drop-shadow(0 0 18px rgba(255,255,255,.95))
    drop-shadow(0 0 34px rgba(255,255,255,.28));
}

.genex-intro-brand{
  display:block;
  width:max-content;
  margin:0 auto;
  text-align:center;
  direction:ltr;
  color:#fff;
  font-size:34px;
  font-weight:900;
  letter-spacing:.38em;
  padding-left:.38em;
  line-height:1;
  text-shadow:0 0 20px rgba(255,255,255,.25);
}

.genex-intro-sub{
  margin-top:12px;
  width:100%;
  text-align:center;
  color:rgba(255,255,255,.72);
  font-size:14px;
  letter-spacing:.16em;
}

@keyframes genexIntroFloat{
  from{ transform:translateY(-4px); }
  to{ transform:translateY(6px); }
}

@keyframes genexIntroExit{
  0%{ opacity:1; visibility:visible; pointer-events:auto; }
  70%{ opacity:1; visibility:visible; pointer-events:auto; }
  99%{ opacity:0; visibility:hidden; pointer-events:none; }
  100%{ opacity:0; visibility:hidden; pointer-events:none; z-index:-1; }
}

/* Shine word */

.genex-shine-word{
  position:relative;
  display:inline;
  color:#fff;
  font-weight:900;
  letter-spacing:.32em;
  line-height:1;
  background:linear-gradient(
    120deg,
    rgba(255,255,255,.95) 0%,
    rgba(255,255,255,.95) 40%,
    rgba(255,255,255,.22) 50%,
    rgba(255,255,255,.95) 60%,
    rgba(255,255,255,.95) 100%
  );
  background-size:220% auto;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:genexTextShine 4s linear infinite;
}

@keyframes genexTextShine{
  0%{ background-position:-200% center; }
  100%{ background-position:200% center; }
}

/* GENEX build word */

.genex-build-word{
  position:relative;
}

.genex-word-base{
  position:relative;
  z-index:2;
}

.genex-word-particles{
  position:absolute;
  inset:-10px -6px -6px -6px;
  pointer-events:none;
  z-index:1;
}

.genex-word-particles::before,
.genex-word-particles::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle, rgba(255,255,255,.95) 0 1.2px, transparent 1.8px) 0 0 / 18px 18px,
    radial-gradient(circle, rgba(255,255,255,.65) 0 1px, transparent 1.7px) 9px 9px / 18px 18px,
    radial-gradient(circle, rgba(177,18,38,.55) 0 1.1px, transparent 1.9px) 4px 12px / 24px 24px;
  opacity:0;
  filter:blur(.15px);
}

.genex-word-particles::before{
  animation:genexParticleBuild 1.4s ease-out forwards;
}

.genex-word-particles::after{
  animation:genexParticleFade 1.8s ease-out forwards;
}

.genex-build-word .genex-word-base{
  display:inline-block;
  animation:genexWordReveal 1.25s ease-out forwards;
  transform-origin:center;
}

@keyframes genexParticleBuild{
  0%{ opacity:0; transform:scale(.75) translateY(8px); }
  25%{ opacity:.95; }
  70%{ opacity:.55; transform:scale(1.04) translateY(0); }
  100%{ opacity:0; transform:scale(1.12) translateY(-2px); }
}

@keyframes genexParticleFade{
  0%{ opacity:0; transform:scale(.9); }
  35%{ opacity:.45; }
  100%{ opacity:0; transform:scale(1.15); }
}

@keyframes genexWordReveal{
  0%{ opacity:.15; transform:scale(.96); filter:blur(2px); }
  45%{ opacity:.65; transform:scale(1.015); filter:blur(.8px); }
  100%{ opacity:1; transform:scale(1); filter:blur(0); }
}

/* Chat */

.genex-chat-fab,
.genex-chat-panel{
  pointer-events:auto !important;
}

.genex-chat-fab{
  position:fixed;
  left:22px;
  bottom:22px;
  width:68px;
  height:68px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.95), rgba(255,255,255,.75)),
    linear-gradient(135deg,#ffffff,#d9d9d9);
  color:#000;
  cursor:pointer;
  z-index:9999 !important;
  box-shadow:
    0 16px 40px rgba(0,0,0,.42),
    0 0 24px rgba(255,255,255,.28);
  border:1px solid rgba(255,255,255,.85);
}

.genex-chat-fab span{
  font-size:24px;
  transform:translateY(-1px);
}

.genex-chat-panel{
  position:fixed;
  left:22px;
  bottom:102px;
  width:360px;
  max-width:calc(100vw - 40px);
  height:460px;
  background:rgba(8,8,14,.97);
  border:1px solid rgba(255,255,255,.14);
  border-radius:24px;
  display:none;
  flex-direction:column;
  overflow:hidden;
  z-index:10000 !important;
  backdrop-filter:blur(20px);
  box-shadow:
    0 24px 70px rgba(0,0,0,.6),
    0 0 28px rgba(255,255,255,.08);
}

.genex-chat-panel.show{
  display:flex;
}

.genex-chat-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:16px 18px;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.genex-chat-title-wrap{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.genex-chat-title-wrap strong{
  font-size:15px;
  color:#fff;
}

.genex-chat-title-wrap small{
  color:rgba(255,255,255,.62);
  font-size:12px;
}

.genex-chat-header button{
  background:none;
  border:none;
  color:#fff;
  cursor:pointer;
  font-size:16px;
}

.genex-chat-body{
  flex:1;
  padding:16px;
  overflow:auto;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.genex-chat-msg{
  max-width:84%;
  padding:12px 14px;
  border-radius:16px;
  font-size:14px;
  line-height:1.7;
}

.genex-chat-msg.bot{
  background:rgba(255,255,255,.08);
  color:#fff;
  align-self:flex-start;
}

.genex-chat-msg.user{
  background:#fff;
  color:#000;
  align-self:flex-end;
}

.genex-chat-quick-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:6px;
}

.genex-chat-quick-actions button{
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  color:#fff;
  border-radius:999px;
  padding:8px 12px;
  font-size:12px;
  cursor:pointer;
}

.genex-chat-input-wrap{
  display:flex;
  gap:8px;
  padding:12px;
  border-top:1px solid rgba(255,255,255,.08);
}

.genex-chat-input-wrap input{
  flex:1;
  margin:0;
}

.genex-chat-input-wrap button{
  border:none;
  border-radius:12px;
  background:#fff;
  color:#000;
  padding:0 16px;
  font-weight:700;
  cursor:pointer;
}

/* Responsive */

@media (max-width:1024px){
  body::before{
    width:min(95vw,560px);
    height:min(95vw,560px);
    top:150px;
    opacity:.035;
  }

  .brand-logo{
    width:46px;
    height:46px;
  }

  .menu-toggle{
    display:block;
  }

  .nav-links{
    display:none;
    flex-direction:column;
    position:absolute;
    top:72px;
    right:0;
    width:min(280px,88vw);
    background:rgba(10,10,20,.96);
    border:1px solid rgba(255,255,255,.1);
    border-radius:18px;
    padding:14px;
    box-shadow:0 20px 50px rgba(0,0,0,.45);
    z-index:3000;
  }

  .nav-links.active{
    display:flex;
  }

  .nav-cta{
    display:none;
  }

  .hero-kpis,
  .cards,
  .form-grid{
    grid-template-columns:1fr;
  }

  .genex-chat-panel{
    width:min(360px, calc(100vw - 24px));
    left:12px;
    bottom:90px;
  }

  .genex-chat-fab{
    left:12px;
    bottom:12px;
  }

  h1{
    font-size:30px !important;
  }

  h2{
    font-size:24px !important;
  }

  h3{
    font-size:20px !important;
  }

  p,
  .card-box p,
  .kpi span,
  .form-box p{
    font-size:15px !important;
  }

  .row{
    flex-direction:column;
    align-items:flex-start;
  }
}

@media (min-width:1025px){
  .menu-toggle{
    display:none;
  }

  .nav-links{
    display:flex !important;
    position:static;
    flex-direction:row;
    width:auto;
    background:none;
    border:none;
    padding:0;
    box-shadow:none;
  }

  .nav-cta{
    display:flex;
  }
}
.genex-chat-links{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:-2px;
}

.genex-chat-link-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:9px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.08);
  color:#fff;
  font-size:12px;
  font-weight:700;
}

/* typing cursor */

.genex-chat-msg[data-typing="true"]{
  position:relative;
}

.genex-chat-msg[data-typing="true"]::after{
  content:"";
  display:inline-block;
  width:6px;
  height:1em;
  margin-inline-start:4px;
  vertical-align:-2px;
  background:rgba(255,255,255,.75);
  animation:genexTypingCursor .8s infinite;
}

@keyframes genexTypingCursor{
  0%,49%{opacity:1;}
  50%,100%{opacity:0;}
}
/* Services page cards spacing fix */
main .cards{
  gap:18px !important;
  row-gap:18px !important;
  column-gap:18px !important;
}

main .cards .card-box{
  margin:0 !important;
}

@media (max-width:1024px){
  main .cards{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:18px !important;
    row-gap:18px !important;
  }
}