/*
 * Stylesheet for the ABsynth AS product website
 * Mobile nav + list styling added while keeping animations intact.
 */

/* CSS Variables */
:root{
  --color-primary:#0070c9;
  --color-secondary:#0a1f44;
  --color-tertiary:#102c63;
  --color-accent:#00bfff;
  --color-text:#f5faff;
  --color-muted:#8aa4c8;
  --transition-speed:0.3s;
}

/* Reset */
*{box-sizing:border-box;margin:0;padding:0}

body{
  font-family:'Inter',sans-serif;
  line-height:1.6;
  background-color:var(--color-secondary);
  color:var(--color-text);
  overflow-x:hidden;
  scroll-behavior:smooth;
}

/* 3D grid background */
#grid3D{
  position:fixed; inset:0; width:200vw; height:200vh; pointer-events:none; z-index:-2; display:block; background:transparent;
  background-image:
    repeating-linear-gradient(0deg, rgba(0,187,255,0.15) 0 2px, transparent 2px 40px),
    repeating-linear-gradient(90deg, rgba(0,187,255,0.15) 0 2px, transparent 2px 40px);
  background-size:40px 40px;
  perspective:800px; transform:rotateX(60deg) translateY(-25%); transform-origin:top; mix-blend-mode:overlay;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0.2));
  mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0.2));
}

a{color:var(--color-accent); text-decoration:none; transition:color var(--transition-speed)}
a:hover{color:#78d7ff}

/* Navigation Bar */
nav{
  position:fixed; top:0; left:0; width:100%; z-index:1000;
  background:rgba(10,31,68,0.8); backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(255,255,255,0.05);
}

.nav-container{
  display:flex; align-items:center; justify-content:space-between;
  max-width:1200px; margin:0 auto;
}
.nav-container>div{padding:1rem 2rem}

.logo{display:inline-flex; padding:0; line-height:1; transform:translateX(-2rem)}
.logo img{display:inline-flex; height:3rem; width:auto; line-height:1}
@supports not (transform: translateX(0)){ nav .nav-container>a.logo{ margin-left:-2rem !important }}

/* MENU TOGGLE (mobile) */
.menu-toggle{
  display:none;
  margin-right:1rem;
  background:transparent;
  border:none;
  width:44px; height:44px;
  border-radius:8px;
  position:relative;
}
.menu-toggle .bar{
  position:absolute; left:10px; right:10px; height:2px; background:var(--color-text);
  transition:transform var(--transition-speed), opacity var(--transition-speed), top var(--transition-speed), bottom var(--transition-speed);
}
.menu-toggle .bar:nth-child(1){top:14px}
.menu-toggle .bar:nth-child(2){top:21px}
.menu-toggle .bar:nth-child(3){top:28px}
body.nav-open .menu-toggle .bar:nth-child(1){top:21px; transform:rotate(45deg)}
body.nav-open .menu-toggle .bar:nth-child(2){opacity:0}
body.nav-open .menu-toggle .bar:nth-child(3){top:21px; transform:rotate(-45deg)}

.nav-links{
  list-style:none; display:flex; gap:1.5rem; font-size:.95rem; flex-wrap:wrap;
}
.nav-links li a{
  color:var(--color-muted); text-transform:uppercase; font-weight:600; letter-spacing:.5px; position:relative; padding:.5rem 0;
}
.nav-links li a:hover{color:var(--color-text)}
.nav-links li a.active{color:var(--color-text); border-bottom:2px solid var(--color-accent); padding-bottom:.25rem}

/* HERO */
.hero{
  position:relative; display:flex; align-items:center; justify-content:center; text-align:center;
  min-height:100vh; padding-top:6rem; background:transparent; overflow:hidden;
}
.hero-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; image-rendering:crisp-edges; z-index:0}
.video-wrap{position:relative; display:inline-block; max-width:100%}
.video-wrap video{display:block; width:100%; height:auto}
.grid-overlay{
  --grid:28px; --thickness:1px; --color:rgba(160,160,160,0.45);
  pointer-events:none; position:absolute; inset:0;
  background-image:
    repeating-linear-gradient(0deg, var(--color), var(--color) var(--thickness), transparent var(--thickness), transparent var(--grid)),
    repeating-linear-gradient(90deg, var(--color), var(--color) var(--thickness), transparent var(--thickness), transparent var(--grid));
  background-position:0 0, 0 0; animation:grid-pan 30s linear infinite;
}
@keyframes grid-pan{ to{ background-position:200px 200px, 200px 200px } }

.hero-content{ position:relative; z-index:2; max-width:800px; text-align:center; color:#fff; backdrop-filter:blur(2px); background:rgba(10,31,68,0.35); padding:2rem 1.5rem; border-radius:8px}
.hero h1{ font-size:2.6rem; font-weight:700; margin-bottom:1rem; line-height:1.2 }
.hero p{ font-size:1.2rem; color:var(--color-muted); margin-bottom:2rem }
.cta-btn{ display:inline-block; padding:.75rem 1.5rem; background:var(--color-accent); color:#0a1f44; font-weight:600; border-radius:4px; transition:background var(--transition-speed) }
.cta-btn:hover{ background:#0093cc; color:#fff }

/* Page sub-hero (for internal pages) */
.sub-hero{
  padding-top:7rem; padding-bottom:2rem;
  background:linear-gradient(180deg, rgba(16,44,99,0.55), rgba(16,44,99,0));
}
.sub-hero h1{ font-size:2.2rem }
.sub-hero p{ color:var(--color-muted) }

/* Sections */
.section{ padding:4rem 1rem 3rem; background-color:var(--color-secondary) }
.section-alt{ background-color:var(--color-tertiary) }
.section-container{ max-width:1100px; margin:0 auto }
.section h2{ font-size:2rem; margin-bottom:1rem; color:var(--color-accent); text-align:left }
.section p{ font-size:1.05rem; margin-bottom:1.2rem; color:var(--color-muted) }

/* Subheads + bullets */
.subhead{ margin-top:1.25rem; margin-bottom:.5rem; color:var(--color-text); font-size:1.15rem }
.bullets{ margin:0 0 1.25rem 1.25rem }
.bullets li{ margin:.4rem 0; color:var(--color-text) }

/* Grids */
.features-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:2rem; margin-top:2rem;
}
.feature-card{
  background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.05);
  border-radius:8px; padding:1.5rem; transition:transform var(--transition-speed), box-shadow var(--transition-speed); text-align:left;
}
.feature-card:hover{ transform:translateY(-5px); box-shadow:0 10px 20px rgba(0,0,0,0.25) }
.feature-card h3{ font-size:1.2rem; margin-bottom:.5rem; color:var(--color-text) }
.feature-card p{ font-size:.95rem; color:var(--color-muted) }
.icon{ display:flex; align-items:center; justify-content:center; width:64px; height:64px; margin:0 auto .75rem auto; border-radius:50%; background:rgba(0,191,255,0.15)}
.icon i{ font-size:1.6rem; color:var(--color-accent) }
.icon svg{ width:28px; height:28px }

.application-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:2rem; margin-top:2rem;
}
.app-card{
  display:flex; flex-direction:column; align-items:flex-start;
  background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.05);
  border-radius:8px; padding:1.5rem; transition:transform var(--transition-speed), box-shadow var(--transition-speed);
}
.app-card:hover{ transform:translateY(-5px); box-shadow:0 10px 20px rgba(0,0,0,0.25) }
.app-card h3{ font-size:1.1rem; margin:.5rem 0; color:var(--color-text) }
.app-card p{ font-size:.95rem; color:var(--color-muted); line-height:1.5 }

/* Team */
.team-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:2rem; margin-top:2rem; text-align:center;justify-items: center; }
.team-member{
  background:rgba(255,255,255,0.05); text-align: center; border:1px solid rgba(255,255,255,0.05);
  border-radius:8px; padding:1.5rem; transition:transform var(--transition-speed), box-shadow var(--transition-speed);
}
.team-member:hover{ transform:translateY(-5px); box-shadow:0 10px 20px rgba(0,0,0,0.25) }

.team-member h3{ font-size:1.1rem; margin-bottom:.25rem; color:var(--color-text) }
.team-member p{ font-size:.9rem; color:var(--color-muted) }

/* --- FORCE-CENTER TEAM IMAGES (desktop & mobile) --- */
.team-grid{ justify-items:center; } /* centers each card in the grid */

.team-member{
  text-align:center;            /* keep text centered */
}

.team-member .team-icon {
  width: 220px;
  aspect-ratio: 220 / 164;   /* fixed frame shape */
  margin: 0 auto 12px;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(0,191,255,0.10);
  border: 1px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: center;       /* vertical center */
  justify-content: center;   /* horizontal center */
}

.team-member .team-icon img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;        /* fit without cropping */
  object-position: center center;
  display: block;
}

/* Optional: narrow screens scale the frame but keep centering */
@media (max-width: 220px){
  .team-member .team-icon{
    width:min(220px, 90%);
  }
}



/* Contact form (kept) */
.contact-form{ margin-top:1.5rem; max-width:600px; margin-left:auto; margin-right:auto }
.contact-form .form-row{ display:flex; gap:1rem; flex-wrap:wrap }
.contact-form input[type="text"], .contact-form input[type="email"], .contact-form textarea{
  flex:1 1 250px; padding:.8rem 1rem; border:none; border-radius:4px; margin-bottom:1rem; background:rgba(255,255,255,0.1); color:var(--color-text); font-size:.95rem; resize:vertical;
}
.contact-form textarea{ min-height:150px }
.contact-form button{
  display:inline-block; padding:.75rem 1.5rem; background:var(--color-accent); color:#0a1f44; font-weight:600; border:none; border-radius:4px; cursor:not-allowed; opacity:.6;
}
.contact-form .form-note{ font-size:.8rem; color:var(--color-muted) }

/* Footer */
footer{
  background:rgba(10,31,68,0.8); padding:1.5rem; text-align:center; border-top:1px solid rgba(255,255,255,0.05);
}
.social-links{ display:flex; align-items:center; justify-content:center; gap:1rem; margin-top:1.5rem }
.social-links a{
  display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%;
  background:rgba(0,191,255,0.15); color:var(--color-accent); transition:background var(--transition-speed), color var(--transition-speed);
}
.social-links a:hover{ background:var(--color-accent); color:#0a1f44 }
.social-links svg{ width:20px; height:20px }

/* Accordion (use-cases) */
.accordion{ background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.08); border-radius:8px; padding:1rem 1.25rem; margin-bottom:1rem }
.accordion>summary{ cursor:pointer; font-weight:700; list-style:none }
.accordion>summary::-webkit-details-marker{ display:none }
.accordion[open]{ box-shadow:0 10px 20px rgba(0,0,0,0.25) }
.accordion-body{ margin-top:.75rem; color:var(--color-muted) }

/* --- Responsive tweaks & mobile nav --- */
@media (max-width: 1024px){
  .nav-links{ gap:1rem }
}

@media (max-width: 900px){
  .menu-toggle{ display:block }
  .nav-container>div{ padding:1rem }
  .nav-links{
    position:fixed;
    top:64px; left:16px; right:16px;
    flex-direction:column; gap:.75rem;
    background:rgba(10,31,68,0.95);
    border:1px solid rgba(255,255,255,0.05);
    border-radius:12px;
    padding:1rem;
    transform:scale(0.98) translateY(-8px);
    opacity:0; pointer-events:none;
    transition:opacity var(--transition-speed), transform var(--transition-speed);
  }
  body.nav-open .nav-links{
    opacity:1; transform:scale(1) translateY(0); pointer-events:auto;
  }
  .logo{ transform:none; margin-left:1rem }
  .stack-on-mobile{ flex-direction:column !important }
  .vision-figure img{ max-width:100%; height:auto }
  .hero h1{ font-size:2rem }
  .hero p{ font-size:1rem }
}

/* --- Use-case figures & gallery --- */
.uc-gallery{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:1rem;
  margin-top:1rem;
}

/* Square figures with equal height & width */
.uc-figure{
  position:relative;
  border:1px solid rgba(255,255,255,0.08);
  border-radius:10px;
  overflow:hidden;
  background:rgba(255,255,255,0.04);
  cursor:zoom-in;
  transition:transform var(--transition-speed), box-shadow var(--transition-speed);
  aspect-ratio:1 / 1;       /* ensures perfect square */
}
.uc-figure:hover{ transform:translateY(-3px); box-shadow:0 8px 16px rgba(0,0,0,0.25) }

.uc-figure img{
  width:100%;
  height:100%;
  object-fit:cover;          /* fills the square, crops if needed */
  display:block;
}

.uc-figure figcaption{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:.4rem .6rem;
  font-size:.85rem;
  line-height:1.2;
  color:#dbe9ff;
  background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 100%);
}

/* Lightbox */
.lightbox{
  position:fixed; inset:0; z-index:2000;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,0.88);
  padding:1rem;
}
.lightbox[hidden]{ display:none; }

.lightbox img{
  max-width:92vw;
  max-height:92vh;
  width:auto; height:auto;
  box-shadow:0 10px 24px rgba(0,0,0,0.6);
  border-radius:8px;
}
.lightbox:focus{ outline:2px solid var(--color-accent) }
body.lb-open{ overflow:hidden; } /* prevent background scroll */
/* Make inline SVGs fill the square figure area just like images */
.uc-figure svg{
  width:100%;
  height:100%;
  display:block;
}