/* ===== Base ===== */
:root{
  --bg:#0b0b0f; --fg:#f0f0f0; --muted:#9aa0a6; --card:rgba(255,255,255,0.03);
  --border:#3b3b45; --accent1:#60a5fa; --accent2:#a78bfa;
}
*{box-sizing:border-box}
html,body{
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  background:var(--bg);
  color:var(--fg);
  overflow-x:hidden;   /* prevent sideways scroll */
}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-weight:700;margin:24px 0;text-align:center}
.grad{background:linear-gradient(90deg,var(--accent1),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
.grad-anim{
  background:linear-gradient(90deg,var(--accent1),var(--accent2),var(--accent1));
  background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:gradientMove 8s ease-in-out infinite;
}
@keyframes gradientMove{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

/* ===== Layout & spacing ===== */
section{padding:90px 20px}
p,li{line-height:1.85;letter-spacing:.3px;font-size:15px}
.wrap{max-width:1100px;margin:0 auto;padding:0 20px}
.row{display:flex}.between{justify-content:space-between}.center{align-items:center}
.gap{gap:10px}.mt{margin-top:16px}.mt-lg{margin-top:28px}
.max{max-width:900px;margin:10px auto 0;text-align:justify}

/* ===== Header ===== */
.header{
  background:rgba(0,0,0,.75);
  backdrop-filter:blur(10px);
  padding:20px 32px;              /* increased */
  position:sticky;top:0;z-index:100;
  border-bottom:1px solid #1f1f25
}
.logo{width:48px;height:48px;object-fit:contain;border-radius:8px} /* increased */
.logo-sm{width:20px;height:20px;object-fit:contain;border-radius:4px}
.brand{font-weight:700;font-size:20px}                              /* increased */
.tagline{font-size:14px;color:var(--muted)}                         /* increased */
.nav a{margin:0 6px;transition:opacity .2s,transform .2s}.nav a:hover{opacity:.9;transform:translateY(-1px)}
.separator{color:#aaa;margin:0 6px;opacity:.6}

/* ===== Hero ===== */
.hero {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  justify-items: center;
  gap: 28px;

  padding-top: 32px;   /* reduced from 64px */
  padding-bottom: 24px;

  position: relative;
  z-index: 1;

  /* full-width translucent background without overflow */
  width: 100vw;
  max-width: 100vw;
  margin-left: -50vw;
  left: 50%;

  background: rgba(255, 255, 255, 0.06); /* translucent grey/white */
  backdrop-filter: blur(6px);
}

.hero-left {
  width: 100%;
  max-width: 900px;
  text-align: center;
}

.hero-title { margin: 0 0 16px; line-height: 1.15; }
.hero-text { max-width: 820px; margin: 0 auto 24px; text-align: justify; }
.hero-buttons { display: flex; gap: 14px; justify-content: center; align-items: center; flex-wrap: wrap; }
.hero-right { width: 100%; display: grid; place-items: center; }

/* Full-width About block inside hero */
.hero-about{
  grid-column: 1 / -1;
  width: 100%;
  padding-top: 26px;
  margin-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.14); /* subtle separator */
}

@media(min-width:980px){
  .hero {
    grid-template-columns: 1.1fr .9fr;
    min-height: 78vh;
  }
}

/* ===== Buttons ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;height:46px;padding:0 20px;line-height:46px;
  border-radius:14px;font-weight:700;background:#fff;color:#111;border:none;cursor:pointer;
  transition:transform .2s,box-shadow .25s,background .2s,opacity .2s,border-color .2s;
  box-shadow:0 6px 18px -12px rgba(255,255,255,.35);
}
.btn:hover{transform:translateY(-2px);box-shadow:0 18px 40px -18px rgba(0,0,0,.5),0 0 30px -20px rgba(96,165,250,.6)}
.btn:active{transform:translateY(0);opacity:.92}
.btn.outline{background:transparent;color:var(--fg);border:1px solid var(--border);box-shadow:none}
.btn.outline>span{display:inline-block;line-height:1;transform:translateY(1px)}
.btn.outline:hover{border-color:#6366f1;box-shadow:0 10px 28px -18px rgba(99,102,241,.6)}

/* Chips */
.chips{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.chip{padding:6px 10px;border:1px solid var(--border);border-radius:999px;color:#cfd1d6;font-size:12px}

/* ===== Orb ===== */
.hero-right{display:grid;place-items:center}
.orb{
  position:relative;width:min(320px,70vw);aspect-ratio:1/1;border-radius:24px;overflow:hidden;
  background:transparent;box-shadow:none;transform-style:preserve-3d;animation:bob 6s ease-in-out infinite;margin-top:6px;
}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.orb-glow{position:absolute;inset:0;border-radius:24px;background:transparent}
.orb-logo{position:absolute;inset:18px;object-fit:contain;border-radius:16px;width:calc(100% - 36px);height:calc(100% - 36px);margin:auto}
.ripple{position:absolute;inset:0;border-radius:24px;pointer-events:none}

/* ===== Services Grid ===== */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(440px, 1fr));
  gap: 2rem;
  justify-items: center;
  align-items: stretch;
  margin-top: 2rem;
}

/* ===== SERVICE SECTION ===== */
#services {
  margin-top: 4rem;
  padding: 3rem 1rem 5rem;
  position: relative;
  z-index: 5;
}

#services h3 {
  text-align: center;
  margin-bottom: 2.5rem;
}

/* Service grid layout */
.services-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  max-width: 1100px;
  margin: 0 auto;
}

@media (max-width: 900px) {
  .services-grid {
    grid-template-columns: 1fr;
  }
}

/* Service card styling */
.service-card {
  position: relative;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 2rem;
  color: #eaeaea;
  box-shadow: 0 12px 35px -18px rgba(0, 0, 0, 0.7);
  text-align: center;
  transition: all 0.35s ease;
  overflow: hidden;
}

.service-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 60px -20px rgba(96, 165, 250, 0.25);
}

.service-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  opacity: 0;
  background: radial-gradient(circle at center, rgba(167, 139, 250, 0.25), transparent 70%);
  transition: opacity 0.35s ease;
  z-index: 0;
}

.service-card:hover::after {
  opacity: 1;
}

.service-card h4 {
  position: relative;
  z-index: 2;
  margin-bottom: 1rem;
  font-size: 1.4rem;
  color: #fff;
}

.service-card p {
  position: relative;
  z-index: 2;
  color: #ccc;
  line-height: 1.7;
  font-size: 0.95rem;
  margin-bottom: 1.5rem;
}

/* Distinct background accent for each service */
.service-card:nth-child(1) {
  background: linear-gradient(145deg, rgba(96, 165, 250, 0.08), rgba(15, 23, 42, 0.8));
}
.service-card:nth-child(2) {
  background: linear-gradient(145deg, rgba(139, 92, 246, 0.08), rgba(15, 23, 42, 0.8));
}
.service-card:nth-child(3) {
  background: linear-gradient(145deg, rgba(236, 72, 153, 0.08), rgba(15, 23, 42, 0.8));
}
.service-card:nth-child(4) {
  background: linear-gradient(145deg, rgba(20, 184, 166, 0.08), rgba(15, 23, 42, 0.8));
}

/* Learn More button */
.service-card .btn {
  position: relative;
  z-index: 2;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 10px 22px;
  font-size: 0.95rem;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(90deg, rgba(96, 165, 250, 0.3), rgba(167, 139, 250, 0.3));
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}

.service-card .btn:hover {
  background: linear-gradient(90deg, rgba(96, 165, 250, 0.5), rgba(167, 139, 250, 0.5));
  box-shadow: 0 10px 30px -10px rgba(96, 165, 250, 0.3);
  transform: translateY(-2px);
}

.service-card details {
  position: relative;
  z-index: 2;
  text-align: left;
  margin-top: 1.5rem;
}

.service-card summary {
  cursor: pointer;
  font-weight: 600;
  color: #60a5fa;
  font-size: 0.95rem;
}

.service-card ul {
  margin: 0.8rem 0 0 1.2rem;
  color: #bbb;
  font-size: 0.9rem;
  line-height: 1.6;
}

/* Mobile spacing */
@media (max-width: 500px) {
  .service-card {
    padding: 1.6rem;
  }
  .service-card p {
    text-align: justify;
  }
}



/* ===== Contact form ===== */
form input,form textarea{
  margin-bottom:18px;padding:14px;width:100%;
  border-radius:12px;border:1px solid var(--border);background:transparent;color:var(--fg);font-size:15px;
}
form button{padding:12px 28px;font-size:15px;border-radius:12px;background:#4f46e5;color:#fff;border:none;cursor:pointer;transition:transform .2s,box-shadow .25s,background .2s}
form button:hover{background:#4338ca;transform:translateY(-2px);box-shadow:0 18px 40px -18px rgba(99,102,241,.6)}
#status{margin-top:18px;font-size:14px}

/* ===== Footer ===== */
.footer{border-top:1px solid #23232b;padding:22px;text-align:center}
.footer-links{display:flex;gap:6px;justify-content:center}

/* ===== Starfield overlay ===== */
#starfield{position:fixed;inset:0;z-index:50;pointer-events:none;opacity:.35;mix-blend-mode:screen}

/* ===== Team section ===== */
#team h2 { margin-bottom: 38px; }
.teamcard{display:grid;grid-template-columns:320px 1fr;gap:28px;align-items:start;width:min(100%,1040px);margin:0 auto 60px;padding:28px;border:1px solid var(--border);border-radius:20px;background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));backdrop-filter:blur(10px);box-shadow:0 18px 48px -28px rgba(0,0,0,.65);}
@media (max-width: 860px){.teamcard{grid-template-columns:1fr;padding:22px}}
.teamcard-aside{display:flex;flex-direction:column;align-items:center;gap:16px;padding:12px;border-radius:16px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);}
.teamcard-avatar{width:180px;height:180px;border-radius:50%;object-fit:cover;border:3px solid rgba(255,255,255,.28);box-shadow:0 10px 30px -14px rgba(0,0,0,.7);}
.teamcard-meta{text-align:center}
.teamcard-name{margin:8px 0 2px;font-size:clamp(20px,2.2vw,26px)}
.teamcard-role{margin:0;color:var(--muted);font-size:14px}
.teamcard-badges{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:10px}
.badge{font-size:11px;color:#d6d8de;border:1px solid var(--border);background:rgba(255,255,255,0.04);padding:6px 10px;border-radius:999px}
.teamcard-body{display:flex;flex-direction:column;gap:18px}
.teamcard-highlights{margin:0;padding-left:20px;line-height:1.85;letter-spacing:.3px;font-size:15px;color:#e8e9ee}
.teamcard-highlights li{margin-bottom:10px}
.teamcard-details summary{cursor:pointer;color:var(--accent1);font-size:14px;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:rgba(255,255,255,0.03);transition:background .2s,border-color .2s;}
.teamcard-details[open] summary{border-color:#6366f1;background:rgba(99,102,241,.06)}
.teamcard-summary{position:relative;margin-top:12px;background:rgba(15,15,22,.75);border:1px solid var(--border);border-radius:12px;padding:16px 18px;line-height:1.95;letter-spacing:.32px;text-align:justify;max-height:260px;overflow:auto;box-shadow:0 24px 60px -24px rgba(0,0,0,.7);}
.teamcard-summary::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:radial-gradient(circle at top,rgba(99,102,241,.18),rgba(167,139,250,.10) 60%,transparent 80%);filter:blur(22px);}
.teamcard-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}


@media (max-width: 860px) {
  .teamcard {
    grid-template-columns: 1fr;
    padding: 22px;
  }
}


/* Social links */
.social-links{display:flex;gap:8px;justify-content:center;margin-top:10px}
.icon-btn{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;font-size:13px;color:#e6e7ec;border:1px solid var(--border);border-radius:999px;background:rgba(255,255,255,0.04);transition:transform .2s,box-shadow .25s,border-color .2s,background .2s;}
.icon-btn:hover{transform:translateY(-2px);border-color:#6366f1;background:rgba(99,102,241,.08);box-shadow:0 14px 34px -18px rgba(99,102,241,.35)}

/* === CONTACT SECTION === */
#contact {
  position: relative;
  z-index: 5;
  margin-top: 4rem;
  padding: 3rem 1rem 4rem;
}

#contact h2 {
  text-align: center;
  margin-bottom: 2rem;
}

/* Two-column layout for desktop */
.contact-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: stretch; /* Ensures equal height */
  max-width: 1100px;
  margin: 0 auto;
}

/* WHY PARTNER CARD */
.why-card {
  background: rgba(17, 17, 17, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
  border-radius: 16px;
  padding: 2rem;
  backdrop-filter: blur(8px);
  color: #e0e0e0;
  text-align: left;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* balances spacing inside */
  height: 100%; /* match height with form card */
}

.why-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 30px rgba(0, 188, 212, 0.15);
}

.why-card h3 {
  color: #89b4fa;
  font-size: 1.3rem;
  margin-bottom: 1.2rem;
}

.why-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
  flex-grow: 1; /* makes list expand evenly */
}

.why-card li {
  margin-bottom: 1.2rem;
  line-height: 1.6;
  font-size: 0.95rem;
  color: #ccc;
}

.why-card li strong {
  color: #fff;
}

/* FORM SIDE */
.contact-right {
  background: rgba(10, 10, 15, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 2rem;
  backdrop-filter: blur(6px);
  box-shadow: 0 0 16px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* even vertical spacing */
  height: 100%; /* match height with why-card */
}

.form-intro {
  margin: 0 0 1rem;
  font-size: 1rem;
  color: #ccc;
  text-align: left;
}

/* Form structure */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex-grow: 1; /* make it expand evenly */
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  padding: 12px 15px;
  font-size: 0.95rem;
  border-radius: 10px;
  outline: none;
  transition: border-color 0.3s ease, background 0.3s ease;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: #777;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: #00bcd4;
  background: rgba(255, 255, 255, 0.08);
}

textarea {
  resize: vertical;
}

/* Form footer */
.form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 0.5rem;
  gap: 0.5rem;
}

.form-footer small {
  color: #888;
  font-size: 0.8rem;
}

/* Send button */
#send-btn {
  background: linear-gradient(90deg, #2826c8, #a78bfa);
  color: #fff;
  border: none;
  padding: 0.8rem 1.6rem;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.3s ease;
}

#send-btn:hover {
  opacity: 0.9;
  transform: scale(1.03);
}

/* Form submission status message */
.status {
  margin-top: 1rem;
  color: #00bcd4;
  text-align: center;
}

/* === RESPONSIVE DESIGN === */
@media (max-width: 900px) {
  .contact-container {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .why-card,
  .contact-right {
    padding: 1.6rem;
    height: auto; /* disable equal height on small screens */
  }

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

  #send-btn {
    align-self: flex-end;
  }
}

@media (max-width: 500px) {
  .why-card h3 {
    font-size: 1.1rem;
  }
  .why-card li {
    font-size: 0.9rem;
  }
}


/* ===== Email Sent Toast ===== */
.toast{
  position: fixed;
  inset: auto 20px 20px auto;        /* bottom-right */
  z-index: 1000;
  pointer-events: none;
  opacity: 0;
  transform: translateY(10px) scale(.98);
  transition: opacity .25s ease, transform .25s ease;
}
.toast.show{
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.toast-inner{
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(17,17,22,.92);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 20px 50px -30px rgba(0,0,0,.7),
              0 0 0 1px rgba(96,165,250,.10) inset;
  backdrop-filter: blur(8px);
  max-width: 360px;
}
.toast-check{
  display:inline-grid; place-items:center;
  width:24px; height:24px; border-radius:999px;
  background: linear-gradient(90deg,var(--accent1,#60a5fa),var(--accent2,#a78bfa));
  color:#0b0b0f; font-weight:700;
}
.toast-text strong{display:block; font-size:14px; line-height:1.2}
.toast-text small{display:block; color:#b8bcc4; margin-top:2px; font-size:12px}
.toast-close{
  margin-left: 6px;
  background: transparent; border: 0; color: #dfe3ea;
  font-size: 18px; cursor: pointer; line-height: 1;
  padding: 4px; border-radius: 8px;
}
.toast-close:hover{ background: rgba(255,255,255,.06) }

@media (max-width:560px){
  .toast{ inset:auto 12px 12px 12px }      /* center-ish on mobile */
  .toast-inner{ justify-content: space-between }
}

.tab-btn {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
  transition: all 0.25s ease;
}

.tab-btn:hover {
  background: rgba(255, 255, 255, 0.12);
}

.tab-btn[aria-selected="true"] {
  border-color: #6366f1;
  background: linear-gradient(90deg, rgba(96,165,250,0.2), rgba(167,139,250,0.2));
}

/* --- Fix lingering close button issue --- */
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.9);
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
.lightbox.open { display: flex; }

.lightbox img {
  max-width: 90%;
  max-height: 90%;
  border-radius: 8px;
  box-shadow: 0 0 20px rgba(255,255,255,0.3);
  object-fit: contain;
  cursor: zoom-out;
}

/* Hide the close button completely unless lightbox is active */
.lightbox-close {
  position: absolute;
  top: 20px;
  right: 30px;
  color: #fff;
  font-size: 2rem;
  cursor: pointer;
  background: none;
  border: none;
  transition: opacity 0.2s ease;
  display: none; /* hidden by default */
}

.lightbox.open .lightbox-close {
  display: block; /* only visible when lightbox is open */
}

.lightbox-close:hover { opacity: 0.7; }