/* ============================================
   ABOUT PAGE - genicon.ai/about
   ============================================ */

/* ===== HEADER OVERLAY (light/white text on dark hero) ===== */
.header-light .header-nav-light a { color:rgba(255,255,255,.65); }
.header-light .header-nav-light a:hover,
.header-light .header-nav-light a.active { color:#fff; background:rgba(255,255,255,.12); }
.header-light .header-nav-light:hover a:not(:hover) { opacity:.4; }
.header-light .drawer-trigger-light { border-color:rgba(255,255,255,.2); color:#fff; }
.header-light .drawer-trigger-light:hover { background:#fff; color:var(--text); }
.header-light .header-social-light { display:flex; gap:10px; }
.header-light .header-social-light a { color:rgba(255,255,255,.65); transition:color .25s; }
.header-light .header-social-light a:hover { color:#fff; }
.header-light .logo-default { display:block; }
.header-light .logo-sticky { display:none; }

/* On scroll/sticky: switch to dark text */
.header-light.scrolled { background:rgba(255,255,255,.92); backdrop-filter:blur(12px); }
.header-light.scrolled .header-nav-light a { color:rgba(0,0,0,.66); }
.header-light.scrolled .header-nav-light a:hover,
.header-light.scrolled .header-nav-light a.active { color:#000; background:rgba(0,0,0,.06); }
.header-light.scrolled .drawer-trigger-light { border-color:rgba(0,0,0,.1); color:var(--text); }
.header-light.scrolled .header-social-light a { color:rgba(0,0,0,.5); }
.header-light.scrolled .header-social-light a:hover { color:#000; }
.header-light.scrolled .logo-default { display:none; }
.header-light.scrolled .logo-sticky { display:block; height:20px; }

.mobile-trigger span { background:#fff; }
.header-light.scrolled .mobile-trigger span { background:var(--text); }

/* ===== DARK HERO ===== */
.about-hero {
  background:#2E3443;
  padding:145px 0 80px;
  text-align:center;
  position:relative;
  overflow:hidden;
}

.about-hero h1 {
  font-family:var(--font-head);
  font-size:55px;
  font-weight:600;
  color:#fff;
  letter-spacing:-.02em;
  margin-bottom:.25em;
}

.about-hero p {
  color:rgba(255,255,255,.6);
  font-size:18px;
  line-height:1.2;
  max-width:600px;
  margin:0 auto 2.85em;
}

.hero-shape {
  position:absolute;
  bottom:-1px;
  left:0;
  width:100%;
  line-height:0;
}

.hero-shape svg {
  width:100%;
  height:100px;
  display:block;
}

/* ===== WHY GENICON AI ===== */
.about-why {
  padding:140px 0 90px;
}

.why-row {
  display:flex;
  position:relative;
  min-height:500px;
}

.why-image {
  position:absolute;
  top:19px;
  left:14px;
  max-width:521px;
  z-index:1;
}

.why-image img {
  border-radius:4px;
  box-shadow:0 20px 60px rgba(0,0,0,.12);
  width:100%;
}

.why-text {
  margin-left:53%;
  padding-left:3%;
}

.why-text h2 {
  font-family:var(--font-head);
  font-size:55px;
  font-weight:600;
  letter-spacing:-.02em;
  line-height:.9;
  margin-bottom:1em;
  width:77%;
}

.why-text p {
  color:rgba(41,41,41,.6);
  line-height:1.6;
  padding-bottom:45px;
}

/* ===== TEAM ===== */
.about-team {
  padding:100px 0;
}

.team-header {
  text-align:center;
  margin-bottom:60px;
}

.team-header h2 {
  font-family:var(--font-head);
  font-size:55px;
  font-weight:600;
  letter-spacing:-.02em;
}

.team-row {
  display:flex;
  gap:30px;
  margin-bottom:25px;
  padding-bottom:30px;
}

.team-member {
  width:50%;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

.team-photo {
  width:100%;
  overflow:hidden;
  border-radius:6px;
}

.team-photo img {
  width:100%;
  height:500px;
  object-fit:contain;
  border-radius:6px;
}

.team-card {
  background:#fff;
  border-radius:5px;
  box-shadow:0 20px 50px rgba(0,0,0,.1);
  padding:15px;
  margin-top:-40px;
  position:relative;
  z-index:2;
  width:85%;
}

.team-card h4 {
  font-family:var(--font-head);
  font-size:16px;
  font-weight:600;
  margin-bottom:.2em;
}

.team-card p {
  font-size:14px;
  font-weight:400;
  color:rgba(60,69,85,.5);
  line-height:1.5;
  margin:0;
}

.team-cta {
  text-align:center;
  font-size:15px;
  color:#000;
}

.team-cta a {
  text-decoration:underline;
  font-weight:500;
}

/* ===== CLIENT LOGOS CAROUSEL ===== */
.about-clients {
  padding:100px 0 140px;
}

.clients-heading {
  font-family:var(--font-head);
  font-size:24px;
  font-weight:600;
  text-align:center;
  letter-spacing:-.1px;
  line-height:1.1;
  margin-bottom:2em;
}

.clients-carousel {
  overflow:hidden;
  margin-top:50px;
}

.clients-track {
  display:flex;
  width:max-content;
  animation:clientScroll 20s linear infinite;
}

.clients-slide {
  display:flex;
  align-items:center;
  flex-shrink:0;
}

.client-logo {
  padding:0 30px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.client-logo img {
  height:50px;
  width:auto;
  max-width:140px;
  object-fit:contain;
  opacity:.5;
  filter:grayscale(100%);
  transition:.3s;
}

.client-logo img:hover {
  opacity:1;
  filter:none;
}

@keyframes clientScroll {
  from { transform:translateX(0); }
  to { transform:translateX(-50%); }
}

/* ===== RESPONSIVE ===== */
@media (max-width:1024px) {
  .why-image { position:relative; top:0; left:0; max-width:100%; margin-bottom:40px; }
  .why-row { flex-direction:column; min-height:auto; }
  .why-text { margin-left:0; padding-left:0; margin-top:40px; }
  .why-text h2 { width:100%; }
  .about-hero { padding:120px 0 60px; }
  .about-hero h1 { font-size:42px; }
  .team-header h2 { font-size:42px; }
}

@media (max-width:768px) {
  .about-hero { padding:100px 20px 60px; }
  .about-hero h1 { font-size:36px; }
  .hero-shape svg { height:38px; }
  .about-why { padding:80px 0 60px; }
  .why-text h2 { font-size:36px; }
  .about-team { padding:60px 0 30px; }
  .team-row { flex-direction:column; }
  .team-member { width:100%; }
  .team-card { width:90%; }
  .about-clients { padding:50px 0 90px; }
  .team-header h2 { font-size:36px; }
  .header-light .header-social-light { display:none; }
}