:root{
  --bg:#0b0b0b;
  --accent:#04c2d9;
  --glass-top: rgba(255,255,255,0.06);
  --glass-bottom: rgba(5,5,25,0.85);
  --card-radius:18px;
  --shadow-dark: rgba(2,8,20,0.6);
  --border-light: rgba(255,255,255,0.06);
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Montserrat, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; background:var(--bg); color:#eee; scroll-behavior: smooth;}

/* NAV - CENTERED LOGO LAYOUT */
.nav{
  position:fixed;left:0;right:0;top:0;min-height:80px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px 4vw;
  z-index:50;
  background:linear-gradient(180deg, rgba(0,0,0,0.9), rgba(0,0,0,0.6));
  backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(255,255,255,0.03);
}

/* Container for Links and Logo */
.nav-container { display:flex; align-items:center; gap:40px; }
.nav .brand{ font-family:Pacifico; font-size:28px; color:#fff; text-decoration:none; letter-spacing:1px; margin:0 10px; white-space:nowrap; }
.nav a.link{ color:#cfcfcf; text-decoration:none; font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:1px; transition:color 0.2s; position:relative; }
.nav a.link:hover{ color:var(--accent) }
.nav a.link::after { content:''; position:absolute; width:0; height:2px; bottom:-4px; left:0; background-color:var(--accent); transition: width 0.3s; }
.nav a.link:hover::after { width:100%; }

/* HERO */
.hero{
  min-height:60vh;
  background-image: url('https://i.postimg.cc/qMCG71Tj/Gemini-Generated-Image-j1cd85j1cd85j1cd.png');
  background-size:cover;
  background-position:center;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:140px 6vw 60px;
  position:relative;
  text-align:center;
}
.overlay{position:absolute;inset:0;background:linear-gradient(180deg, rgba(3,3,3,0.35), rgba(3,3,3,0.85));}
.hero-inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;max-width:800px;margin:0 auto;}
.eyebrow{color:#bfbfbf;font-size:14px;margin-bottom:12px;letter-spacing:2px;text-transform:uppercase;}
.title{font-size:56px;line-height:1.1;color:#e6ffff;text-shadow:0 6px 20px rgba(4,194,217,0.06);font-weight:800;letter-spacing:0.5px;margin:0 0 20px 0;}
.neon{color:transparent;text-shadow:0 0 18px rgba(4,194,217,0.65), 0 0 40px rgba(4,194,217,0.12);background:linear-gradient(90deg,#dff,#9ff);-webkit-background-clip:text;background-clip:text}
.sub{color:#cfdcdc;opacity:0.95;font-size:20px;max-width:600px;margin:0 auto 30px;}
.cta-btn{display:inline-block;padding:14px 32px;background:var(--accent);color:#000;font-weight:700;text-decoration:none;border-radius:50px;box-shadow:0 0 20px rgba(4,194,217,0.4);transition:transform 0.2s;}
.cta-btn:hover{transform:scale(1.05);}

/* SOCIAL SECTION */
.social-wrap{padding:40px 20px;background:#151515;display:flex;justify-content:center;}
.social-card{background-color:#1f1f1f;color:white;padding:24px;border-radius:12px;width:100%;max-width:600px;text-align:center;box-shadow:0 4px 20px rgba(0,0,0,0.4);}
.social-columns{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;}
.social-button{flex:0 0 48%;display:flex;align-items:center;justify-content:center;padding:10px;border-radius:6px;margin:6px 0;text-decoration:none;transition:all 0.3s ease;color:white;font-size:13px;}
.social-button:hover{transform:scale(1.03);box-shadow:0 4px 12px rgba(0,0,0,0.3);}
.social-icon{height:18px;margin-right:8px;}

/* CONTACT CARD */
.contact-wrap{padding:80px 6vw;background:linear-gradient(180deg,#050505 0%,#000 100%);display:flex;flex-direction:column;align-items:center;}
.contact-card{width:100%;max-width:500px;background:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(0,0,0,0.65));border-radius:var(--card-radius);padding:32px;box-shadow:0 30px 60px var(--shadow-dark);backdrop-filter:blur(10px);border:1px solid var(--border-light)}
.contact-card h3{text-align:center;margin:0 0 20px;font-size:26px;color:#fff}
.field{margin-bottom:14px}
.field label{display:block;font-size:12px;color:#bfbfbf;margin-bottom:6px;font-weight:600}
.input{width:100%;padding:14px 12px;border-radius:8px;border:1px solid var(--border-light);background:rgba(0,0,0,0.7);color:#eee;font-size:15px;transition:border-color 0.2s}
.input:focus{outline:none;border-color:var(--accent)}
textarea.input{min-height:120px;resize:vertical}
.btn{display:block;width:100%;padding:14px;border-radius:999px;border:none;margin-top:18px;background:linear-gradient(90deg,var(--accent),#00a6ff);color:#012;font-weight:700;font-size:16px;cursor:pointer;transition:transform 0.2s, opacity 0.2s}
.btn:hover{transform:translateY(-1px);opacity:0.95}

/* SECTIONS GENERAL */
.section-wrap{padding:80px 6vw 100px;}
.section-inner{max-width:1100px;margin:0 auto}
.section-title{color:#fff;text-align:center;font-size:32px;margin-bottom:40px;font-weight:700}

/* Work/Services Grid */
.work-wrap{background:linear-gradient(180deg,#0b0b0b 0%, #151515 100%)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px}
.card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.6));padding:16px;border-radius:18px;box-shadow:0 12px 30px var(--shadow-dark);border:1px solid rgba(255,255,255,0.04);overflow:hidden;transition:transform 0.3s}
.card:hover{transform:translateY(-5px);box-shadow:0 20px 40px var(--shadow-dark)}
.card img{width:100%;height:160px;object-fit:cover;border-radius:12px}
.card p{font-size:15px;text-align:center;color:#ddd;margin-top:15px;font-weight:600}

/* About/Founders Grid */
.about-wrap{background:transparent;}
.founders-grid{display:flex;justify-content:center;align-items:center;width:100%;}
.founder-card{width:100%;max-width:600px;min-height:400px;border-radius:var(--card-radius);position:relative;overflow:hidden;background:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(0,0,0,0.6));box-shadow:0 20px 40px var(--shadow-dark);border:1px solid var(--border-light);display:flex;flex-direction:column;align-items:center;justify-content:center;transition:transform 0.3s, box-shadow 0.3s;}
.founder-card:hover{transform:scale(1.02);box-shadow:0 25px 50px var(--shadow-dark)}
.founder-bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:blur(10px) saturate(80%);opacity:0.8;transform:scale(1.08)}
.founder-avatar{position:relative;z-index:2;margin-bottom:18px;width:150px;height:150px;border-radius:50%;padding:6px;background:linear-gradient(45deg, var(--accent), #00a6ff);border:4px solid rgba(255,255,255,0.9);box-shadow:0 0 20px rgba(4,194,217,0.3)}
.founder-avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.founder-name{position:relative;z-index:2;color:#f1f1f1;font-weight:700;margin-top:8px;font-size:22px;}
.founder-title{position:relative;z-index:2;color:var(--accent);font-size:16px;font-weight:400;margin:6px 0 0;text-align:center;padding:0 20px;}
.founder-card-link{text-decoration:none;color:inherit;display:inline-block;}

/* footer */
.footer{padding:30px 6vw;text-align:center;font-size:14px;color:#999;border-top:1px solid rgba(255,255,255,0.03);background:#000}
.footer a{color:var(--accent);text-decoration:none;transition:color 0.2s}
.footer a:hover{color:#fff}

/* responsive */
@media (max-width:980px){
  .nav-container{flex-direction:column;gap:15px;padding:10px 0;}
  .nav{min-height:auto;padding:10px;}
  .nav .brand{font-size:24px;margin-bottom:5px;}
  .nav a.link{font-size:11px;margin:0 6px;}
  .hero{padding:160px 4vw 80px}
  .title{font-size:38px}
  .founders-grid{flex-direction:column;}
}
@media (max-width:520px){
  .nav-container{flex-wrap:wrap;justify-content:center;}
  .nav a.link{margin:4px 8px;}
  .title{font-size:32px}
  .section-title{font-size:24px}
}
/* Contact page specific */
.contact-page .contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 28px;
  align-items: start;
}

.card { background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.6)); padding: 22px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.04); box-shadow: 0 10px 30px rgba(2,8,20,0.5); }

.contact-info h3 { margin: 0 0 8px 0; color:#fff; }
.contact-info p { color:#d6d6d6; margin:6px 0; }

.contact-card .field { display:block; margin-bottom:12px; }
.field-label { display:block; font-size:13px; color:#bfbfbf; margin-bottom:6px; font-weight:600; }
.input { width:100%; padding:12px; border-radius:8px; border:1px solid rgba(255,255,255,0.06); background: rgba(0,0,0,0.7); color:#eee; font-size:15px; }
textarea.input { min-height:140px; resize:vertical; }

.btn { display:inline-block; padding:12px 22px; border-radius:999px; border:none; background: linear-gradient(90deg, var(--accent), #00a6ff); color:#012; font-weight:700; cursor:pointer; margin-top:8px; }
.btn:hover { transform: translateY(-2px); opacity:0.98; }

.social-button { text-decoration:none; padding:8px 12px; border-radius:8px; background:rgba(255,255,255,0.03); color:#fff; font-weight:600; font-size:13px; }

@media (max-width: 900px) {
  .contact-page .contact-grid { grid-template-columns: 1fr; }
  .contact-page .section-inner { padding: 0 18px; }
}
/* Fix contact info alignment and spacing */
.contact-info {
  /* left-align text and stack items neatly */
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 26px;              /* slightly more breathing room */
}

/* headings / paragraphs / links inside the left card */
.contact-info h3,
.contact-info p,
.contact-info a {
  text-align: left;
  width: 100%;
  margin: 0;
}

/* Make follow buttons centered but keep their own layout */
.contact-info .social-columns {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;   /* keep buttons centered horizontally */
  gap: 10px;
  margin-top: 12px;
}

/* Slight visual tweaks so the left card height matches the right form */
.contact-info,
.contact-card {               /* contact-card is the right form wrapper class */
  align-self: stretch;       /* encourages equal heights in grid/flex layouts */
}

/* Mobile: stack and center text again for narrow screens */
@media (max-width: 900px) {
  .contact-info {
    text-align: center;
    align-items: center;
  }
  .contact-info .social-columns { justify-content: center; }
}

/* ABOUT PAGE STYLES */

.about-hero {
  min-height: 50vh;
  background: url("https://i.postimg.cc/qMCG71Tj/Gemini-Generated-Image-j1cd85j1cd85j1cd.png") center/cover no-repeat;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
}

.about-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0.4),
    rgba(0,0,0,0.85)
  );
}

.about-hero-inner {
  position: relative;
  z-index: 2;
  text-align: center;
}

.about-title {
  font-size: 48px;
  color: #e6ffff;
  text-shadow: 0 6px 20px rgba(4,194,217,0.3);
  margin-bottom: 12px;
}

.about-subtitle {
  font-size: 18px;
  color: #cfdcdc;
}

.about-content-grid {
  display: grid;
  grid-template-columns: 320px auto;
  gap: 40px;
  align-items: start;
}

.about-photo-card {
  text-align: center;
}

.about-photo-frame img {
  width: 260px;
  height: 260px;
  border-radius: 50%;
  object-fit: cover;
  border: 5px solid rgba(255,255,255,0.9);
  padding: 5px;
  background: linear-gradient(45deg, var(--accent), #00a6ff);
  box-shadow: 0 0 25px rgba(4,194,217,0.4);
}

.about-text-card {
  background: rgba(255,255,255,0.03);
  border-radius: 16px;
  padding: 28px;
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 10px 40px rgba(2,8,20,0.5);
}

.about-text-card h2 {
  color: #eafafa;
  margin-top: 12px;
}

.about-text-card p {
  color: #cfcfcf;
  line-height: 1.6;
  margin-bottom: 12px;
}

/* Mobile */
@media(max-width: 900px) {
  .about-content-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .about-photo-card {
    margin-bottom: 20px;
  }
}