:root {
  --primary:#0f766e;
  --accent:#14b8a6;
  --text:#0f172a;
}

body{font-family:'Instrument Sans',sans-serif;margin:0;color:var(--text)}
h1,h2,h3{font-family:'Outfit',sans-serif}

.container{max-width:1100px;margin:auto;padding:0 1rem}
.container.wide{max-width:900px}

.navbar{
  position:fixed;
  width:100%;
  background:rgba(255,255,255,0.6);
  backdrop-filter:blur(14px);
  padding:1rem 0;
  z-index:1000;
  border-bottom:1px solid rgba(0,0,0,0.05);
}

.nav-inner{display:flex;justify-content:space-between;align-items:center}

.nav-links a{
  margin-left:1.5rem;
  text-decoration:none;
  color:var(--text);
  transition:0.3s;
}

.nav-links a:hover{color:var(--primary)}

.hero{
  position:relative;
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#fff;
  overflow:hidden;
  background:#020617;
}

#heroCanvas{
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left:0;
}

.hero-content{
  position:relative;
  z-index:2;
  max-width:700px;
}

.hero-buttons{display:flex;gap:1rem;justify-content:center;margin-top:1.5rem}

.section{padding:6rem 0}
.section.alt{background:#f1f5f9}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2rem}

.card{padding:1.5rem;border:1px solid #eee;border-radius:12px}

.cta-button{
  background:linear-gradient(135deg,var(--primary),var(--accent));
  color:#fff;
  padding:0.9rem 1.4rem;
  border-radius:10px;
}

.secondary-button{
  border:1px solid #fff;
  color:#fff;
  padding:0.9rem 1.4rem;
  border-radius:10px;
}

footer{text-align:center;padding:2rem;background:#020617;color:#fff}


/* NAVBAR FIX (HIGH VISIBILITY) */
.navbar{
  position:fixed;
  width:100%;
  background:rgba(2,6,23,0.85);
  backdrop-filter:blur(12px);
  padding:1rem 0;
  z-index:1000;
  border-bottom:1px solid rgba(255,255,255,0.08);
}

.nav-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  max-width:1100px;
  margin:auto;
}

.logo{
  color:#fff;
  font-weight:600;
}

.nav-links a{
  margin-left:1.5rem;
  text-decoration:none;
  color:#cbd5f5;
  transition:0.3s;
}

.nav-links a:hover{
  color:#14b8a6;
}

.nav-back{
  color:#14b8a6;
  text-decoration:none;
}

/* FORM SECTION */
.form-section{
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}

/* PARTICLE CANVAS */
.form-section canvas{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:0;
}

/* CARD */

/* CARD */
.form-card{
  position:relative;
  z-index:2;
  width:100%;
  max-width:650px;
  background:rgba(255,255,255,0.06);
  backdrop-filter:blur(20px);
  border-radius:20px;
  padding:2.5rem;
  box-shadow:0 25px 70px rgba(0,0,0,0.6);
}

h1{font-family:'Outfit';}

/* INPUTS WITH BORDER */
.contact-form{
  display:flex;
  flex-direction:column;
  gap:1.2rem;
}

.input-group input,
.input-group textarea,
.row input{
  width:100%;
  padding:1rem;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.2);
  background:rgba(255,255,255,0.08);
  color:#fff;
  font-size:1rem;
  transition:0.3s;
}
/* FORM SECTION FULLSCREEN */
.form-section{
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding-top:80px;
}

/* CARD DESIGN */
.form-card{
  width:100%;
  max-width:600px;
  background:rgba(255,255,255,0.05);
  backdrop-filter:blur(20px);
  border-radius:20px;
  padding:2.5rem;
  box-shadow:0 20px 60px rgba(0,0,0,0.4);
  animation:fadeUp 0.8s ease;
}

/* INPUTS */
.contact-form{
  display:flex;
  flex-direction:column;
  gap:1.2rem;
}

.input-group input,
.input-group textarea,
.row input{
  width:100%;
  padding:1rem;
  border-radius:10px;
  border:none;
  outline:none;
  background:rgba(255,255,255,0.1);
  color:#fff;
  font-size:1rem;
  transition:0.3s;
}

.row{
  display:flex;
  gap:1rem;
}

/* INPUT FOCUS GLOW */
.input-group input:focus,
.input-group textarea:focus,
.row input:focus{
  box-shadow:0 0 15px var(--accent);
  transform:scale(1.02);
}

/* BUTTON */
.cta-button{
  padding:1rem;
  border-radius:12px;
  border:none;
  background:linear-gradient(135deg,var(--primary),var(--accent));
  color:#fff;
  font-size:1rem;
  cursor:pointer;
  transition:0.3s;
}

.cta-button:hover{
  transform:translateY(-2px);
}

/* GLOW EFFECT */
.glow{
  box-shadow:0 0 20px rgba(20,184,166,0.5);
}

/* CONTACT INFO */
.contact-info{
  margin-top:1.5rem;
  opacity:0.8;
}

/* NAV */
.navbar{
  position:fixed;
  width:100%;
  background:rgba(0,0,0,0.3);
  backdrop-filter:blur(10px);
  padding:1rem 0;
}

.nav-inner{
  display:flex;
  justify-content:space-between;
  max-width:1100px;
  margin:auto;
}

.nav-back{
  color:#14b8a6;
  text-decoration:none;
}

.form-card{
  position:relative;
  z-index:2;
  width:100%;
  max-width:650px;
  background:rgba(255,255,255,0.06);
  backdrop-filter:blur(20px);
  border-radius:20px;
  padding:2.5rem;
  box-shadow:0 25px 70px rgba(0,0,0,0.6);
}

h1{font-family:'Outfit';}

/* INPUTS WITH BORDER */
.contact-form{
  display:flex;
  flex-direction:column;
  gap:1.2rem;
}

.input-group input,
.input-group textarea,
.row input{
  width:100%;
  padding:1rem;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.2);
  background:rgba(255,255,255,0.08);
  color:#fff;
  font-size:1rem;
  transition:0.3s;
}

.row{
  display:flex;
  gap:1rem;
}

/* FOCUS GLOW */
.input-group input:focus,
.input-group textarea:focus,
.row input:focus{
  border:1px solid var(--accent);
  box-shadow:0 0 12px var(--accent);
}

/* BUTTON */
.cta-button{
  padding:1rem;
  border-radius:12px;
}

/* ANIMATION */
@keyframes fadeUp{
  from{opacity:0;transform:translateY(30px)}
  to{opacity:1;transform:translateY(0)}
}