:root{
  --bg:#070b13; --panel:#0d1524; --line:#13203b; --text:#e9f0ff;
  --muted:#9bb0d1; --primary:#00f0ff; --primary-2:#66fff8; --glow:#00f0ff55;
}
*{box-sizing:border-box}

/* Lock page scroll, scroll only the container */
html,body{height:100%;overflow:hidden;}
html,body{margin:0;padding:0;font-family:Inter,system-ui,Arial;background:var(--bg);color:var(--text)}

/* Fixed header */
.nav{position:fixed;inset:0 0 auto 0;background:linear-gradient(180deg,#070b13 70%,#070b1300);border-bottom:1px solid var(--line);z-index:1000}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:68px}
.container{max-width:1120px;margin:0 auto;padding:0 20px}
.brand{display:flex;gap:10px;align-items:center;color:var(--text);text-decoration:none;font-weight:800;letter-spacing:.3px}
.logo{height:28px;width:auto;filter:drop-shadow(0 0 10px #00f0ff33)}
.menu a{color:var(--muted);text-decoration:none;margin:0 12px;font-weight:600}
.menu a:hover{color:var(--text)}
.lang-switch{background:var(--panel);border:1px solid var(--line);color:var(--text);padding:8px 10px;border-radius:10px}

/* Snap-scrolling layout (container is the only scroller) */
.snap-container{
  height:100svh;               /* safe viewport height (mobile-friendly) */
  overflow-y:auto;             /* scrolling happens here */
  scroll-snap-type:y mandatory;
  scroll-padding-top:68px;     /* account for fixed header */
  overscroll-behavior-y:contain;
  padding-top:68px;            /* keep first section below the header */
  -ms-overflow-style:none;     /* IE/old Edge hide */
  scrollbar-width:none;        /* Firefox hide */
}
.snap-container::-webkit-scrollbar{
  width:0;height:0;display:none; /* Chrome/Safari/Edge hide */
}

.snap-section{
  min-height:100svh;
  scroll-snap-align:start;
  scroll-snap-stop:always;
  display:grid;
  place-items:center;
  padding:60px 0;
  position:relative;
  margin:0;                    /* avoid accidental page overflow */
}

/* Hero & common UI */
.hero{position:relative}
.grid-2{display:grid;grid-template-columns:1.1fr .9fr;gap:40px}
@media(max-width:900px){.grid-2{grid-template-columns:1fr}}
.hero h1{font-size:40px;line-height:1.1;margin:0 0 12px}
.muted{color:var(--muted)}
.actions{display:flex;gap:12px;margin-top:24px}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 18px;border-radius:12px;border:1px solid var(--line);font-weight:700;text-decoration:none;color:var(--text);transition:.2s}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:linear-gradient(90deg,var(--primary),var(--primary-2));color:#02151a;border-color:#00c7d6}
.btn-ghost{background:transparent}
.btn-outline{background:transparent;border-color:#1b2c4f}
.badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.badges li{list-style:none;font-size:13px;border:1px solid #1a2a4a;padding:6px 10px;border-radius:999px;background:#0b1322}

.glass{background:rgba(6,13,25,.55);backdrop-filter: blur(6px);border:1px solid #14305a;border-radius:16px;box-shadow:0 0 40px var(--glow)}
.card{padding:18px}
.hero .card{min-height:260px}
.meter{height:10px;background:#0c1a33;border-radius:999px;overflow:hidden;border:1px solid #12335a;margin:12px 0 6px}
.meter-bar{height:100%;background:linear-gradient(90deg,#00f0ff,#66fff8)}
.tiny{font-size:12px}

.section{border-top:1px solid var(--line)}
.section.alt{background:radial-gradient(1200px 600px at 50% 0,#0b1322 0,#070b13 50%,#070b13 100%)}
.section h2{font-size:32px;margin:0 0 10px}
.max-600{max-width:600px}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:22px}
@media(max-width:900px){.cards{grid-template-columns:1fr}}
.cards .card{border:1px solid #152a4d;border-radius:16px}
.ticks{margin:12px 0 0;padding-left:18px}
.ticks li{margin:6px 0}
.list{margin:10px 0 0;padding-left:18px}
.steps{padding-left:18px;margin:8px 0 0}
.pill-row{display:flex;gap:8px;flex-wrap:wrap}
.pill-row span{border:1px solid #1a2a4a;padding:6px 10px;border-radius:999px;background:#0b1322}

.form{display:grid;gap:10px}
.form input,.form select,.form textarea{background:#0b1322;border:1px solid #152a4d;border-radius:12px;color:var(--text);padding:12px}
.form input:focus,.form textarea:focus,.form select:focus{outline:2px solid #00e2ff33}

/* Footer */
.footer{border-top:1px solid var(--line);padding:18px 0}
.foot{display:flex;gap:12px;align-items:center;justify-content:space-between}

/* Hero glow */
.hero .glow{position:absolute;inset:0;background:radial-gradient(600px 300px at 75% 20%,#00f0ff22,transparent 60%);pointer-events:none}

/*Chatbot Section*/


/* Chatbot styles */
.chatbox {
  display: flex;
  flex-direction: column;
  height: 400px;
  border-radius: 16px;
  padding: 12px;
  margin-top: 20px;
}

#chat-window {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  border: 1px solid #1a2a4a;
  border-radius: 12px;
  background: #0b1322;
  font-size: 14px;
}

.chat-message {
  margin: 8px 0;
  padding: 8px 12px;
  border-radius: 10px;
  max-width: 80%;
  line-height: 1.4;
}

.chat-user {
  background: #00f0ff22;
  align-self: flex-end;
}

.chat-bot {
  background: #1a2a4a;
  align-self: flex-start;
}

.chat-input-row {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

#chat-input {
  flex: 1;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #152a4d;
  background: #0b1322;
  color: var(--text);
}

#chat-send {
  padding: 10px 16px;
  border-radius: 8px;
  border: none;
  font-weight: 700;
  cursor: pointer;
  background: linear-gradient(90deg,var(--primary),var(--primary-2));
  color: #02151a;
}

/* Chat contact message styling */
.chat-contact {
  background: linear-gradient(135deg, #00f0ff22, #66fff822);
  border: 1px solid var(--primary);
  border-radius: 12px;
  padding: 14px;
  margin-top: 12px;
  color: var(--text);
  font-weight: 600;
  text-align: center;
  box-shadow: 0 0 12px var(--glow);
  animation: pulseGlow 2s infinite;
}

.chat-contact a {
  color: var(--primary-2);
  font-weight: 700;
  text-decoration: none;
}

.chat-contact a:hover {
  text-decoration: underline;
}

/* Subtle glowing animation */
@keyframes pulseGlow {
  0% { box-shadow: 0 0 8px var(--glow); }
  50% { box-shadow: 0 0 20px var(--glow); }
  100% { box-shadow: 0 0 8px var(--glow); }
}