/* =============================================
   MARTIAN DIGITAL — Pages CSS
   Palette: Neon Blue · Black · White · Pastel Green
   ============================================= */

/* ── Page Hero ── */
.page-hero {
  position: relative;
  padding: calc(var(--nav-height) + 80px) 0 100px;
  overflow: hidden; text-align: center;
}
.page-hero-title {
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 900; letter-spacing: -.03em;
  margin-bottom: 20px; color: var(--white);
}
.page-hero-sub {
  font-size: 1.1rem; color: var(--text-secondary);
  max-width: 600px; margin: 0 auto 40px;
  line-height: 1.75;
}
.page-orb-1 {
  position: absolute; top: -100px; right: -100px;
  animation: orb-drift 12s ease-in-out infinite;
}
.page-orb-2 {
  position: absolute; bottom: 0; left: -80px;
  animation: orb-drift 16s ease-in-out infinite reverse;
}

/* ============================================
   SERVICES PAGE
   ============================================ */

.services-full-grid {
  display: grid; grid-template-columns: repeat(2,1fr);
  gap: 32px; margin-top: 60px;
}

.service-full-card {
  padding: 48px 40px;
  position: relative; overflow: hidden; transition: var(--transition);
}
.service-full-card:hover {
  transform: translateY(-6px);
  border-color: var(--border-blue);
  box-shadow: var(--glow-blue);
}
.service-full-card .card-number {
  position: absolute; top: 28px; right: 32px;
  font-family: var(--font-display);
  font-size: 4rem; font-weight: 900;
  color: rgba(255,255,255,0.03);
  line-height: 1; pointer-events: none; user-select: none;
}

.service-icon-lg {
  width: 72px; height: 72px;
  border-radius: 20px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 28px;
}
.service-icon-lg svg { width: 36px; height: 36px; }

/* Map all icon variants to neon blue or pastel green */
.si-blue   { background: rgba(0,212,255,0.1);    border: 1px solid rgba(0,212,255,0.3); }
.si-purple { background: rgba(168,245,208,0.08); border: 1px solid rgba(168,245,208,0.25); }
.si-cyan   { background: rgba(0,212,255,0.08);   border: 1px solid rgba(0,212,255,0.25); }
.si-pink   { background: rgba(168,245,208,0.08); border: 1px solid rgba(168,245,208,0.2); }
.si-green  { background: rgba(168,245,208,0.1);  border: 1px solid rgba(168,245,208,0.3); }
.si-orange { background: rgba(0,212,255,0.07);   border: 1px solid rgba(0,212,255,0.2); }

.service-full-card h3 { font-size:1.5rem; font-weight:700; margin-bottom:14px; color:var(--white); }
.service-full-card p  { font-size:.92rem; color:var(--text-secondary); line-height:1.75; margin-bottom:28px; }

.service-tags { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:28px; }
.service-tag  {
  padding: 4px 14px; border-radius:100px;
  font-size:.76rem; font-weight:500;
  font-family: var(--font-accent);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-glass);
  color: var(--text-secondary); transition:var(--transition);
}
.service-full-card:hover .service-tag {
  border-color: rgba(0,212,255,0.3);
  color: var(--neon-blue);
}

.service-lineart {
  position: absolute; bottom:0; right:0;
  opacity:.06; pointer-events:none;
  width:160px; height:160px;
}

/* ── Tools ── */
.tools-section { background: var(--bg-secondary); }
.tools-grid {
  display: grid; grid-template-columns: repeat(6,1fr);
  gap: 20px; margin-top: 48px;
}
.tool-card {
  aspect-ratio:1; display:flex;
  flex-direction:column; align-items:center;
  justify-content:center; gap:10px;
  border-radius:var(--radius-md);
  background: var(--bg-glass);
  border: 1px solid var(--border-glass);
  transition:var(--transition); cursor:default; padding:16px;
}
.tool-card:hover {
  border-color: var(--border-blue);
  transform:translateY(-4px); box-shadow:var(--glow-blue);
}
.tool-card svg { width:32px; height:32px; }
.tool-card span {
  font-size:.72rem; font-weight:500;
  color:var(--text-muted);
  font-family:var(--font-accent);
  letter-spacing:.04em; text-align:center;
}

/* ============================================
   PORTFOLIO PAGE
   ============================================ */

.portfolio-filter {
  display:flex; gap:8px; flex-wrap:wrap;
  margin-bottom:48px; justify-content:center;
}
.filter-btn {
  padding:8px 20px; border-radius:100px;
  border: 1.5px solid var(--border-glass);
  background:transparent; color:var(--text-secondary);
  font-family:var(--font-accent); font-size:.82rem;
  font-weight:500; cursor:pointer; transition:var(--transition);
  letter-spacing:.04em;
}
.filter-btn:hover,.filter-btn.active {
  background: var(--neon-blue);
  border-color: var(--neon-blue);
  color: var(--black);
}

.portfolio-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
}
.portfolio-grid .work-item-wide { grid-column:span 2; }

.portfolio-item {
  border-radius:var(--radius-lg); overflow:hidden;
  position:relative; cursor:pointer;
  background:var(--bg-secondary);
  border:1px solid var(--border-glass); transition:var(--transition);
}
.portfolio-item:hover {
  transform:translateY(-4px);
  border-color:var(--border-blue);
  box-shadow:var(--glow-blue);
}
.portfolio-item-img-wrap {
  aspect-ratio:16/10; overflow:hidden; position:relative;
}
.portfolio-item-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.portfolio-item:hover .portfolio-item-img-wrap img {
  transform: scale(1.06);
}

.portfolio-item-overlay {
  position:absolute; inset:0;
  background: rgba(7,7,7,0.87);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:var(--transition);
}
.portfolio-item:hover .portfolio-item-overlay { opacity:1; }
.portfolio-item-info { padding:24px; }
.portfolio-item-info .work-cat { margin-bottom:4px; }
.portfolio-item-info h3 { font-size:1.1rem; font-weight:700; }

/* Results Stats */
.results-grid {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:24px; margin-top:60px;
}
.result-card  { padding:40px 32px; text-align:center; }
.result-number{
  font-family:var(--font-display);
  font-size:3rem; font-weight:900;
  line-height:1; margin-bottom:8px;
  color: var(--neon-blue);
}
.result-label {
  font-size:.85rem; color:var(--text-muted);
  font-family:var(--font-accent);
  letter-spacing:.06em; text-transform:uppercase;
}

/* ============================================
   ABOUT PAGE
   ============================================ */

.about-intro-grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap:80px; align-items:center; margin-top:80px;
}
.about-visual-wrap { position:relative; height:520px; }

.about-blob {
  position:absolute;
  border-radius:60% 40% 70% 30%/50% 60% 40% 70%;
  background: rgba(0,212,255,0.07);
  animation: blobMorph 10s ease-in-out infinite;
}

.about-card {
  position:absolute; padding:24px; min-width:200px;
}
.about-card-main {
  top:0; left:0; right:0; bottom:0;
  display:flex; align-items:center; justify-content:center;
  flex-direction:column; text-align:center; gap:16px;
}
.about-card-float  {
  bottom:40px; right:-20px; width:auto; min-width:180px;
  animation:float 5s ease-in-out infinite;
}
.about-card-float2 {
  top:40px; left:-20px; width:auto; min-width:180px;
  animation:float 7s ease-in-out infinite 1s;
}

.about-text h2 {
  font-size:clamp(2rem,3.5vw,2.8rem);
  font-weight:800; margin-bottom:20px; color:var(--white);
}
.about-text p {
  color:var(--text-secondary); line-height:1.8;
  margin-bottom:20px; font-size:.95rem;
}

.about-values {
  display:grid; grid-template-columns:1fr 1fr;
  gap:16px; margin-top:40px;
}
.value-item {
  display:flex; align-items:flex-start; gap:12px;
  padding:20px; border-radius:var(--radius-md);
  background:var(--bg-glass); border:1px solid var(--border-glass);
  transition:var(--transition);
}
.value-item:hover { border-color:var(--border-blue); }
.value-icon {
  width:36px; height:36px; border-radius:var(--radius-sm);
  background:rgba(0,212,255,0.1);
  border:1px solid rgba(0,212,255,0.25);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.value-icon svg { width:18px; height:18px; }
.value-item h5 { font-size:.9rem; font-weight:600; margin-bottom:4px; }
.value-item p  { font-size:.8rem; color:var(--text-muted); line-height:1.5; }

/* Team */
.team-grid {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:24px; margin-top:60px;
}
.team-card { text-align:center; padding:36px 24px; }
.team-avatar {
  width:100px; height:100px; border-radius:50%;
  margin:0 auto 20px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display);
  font-size:2rem; font-weight:800;
  color: var(--black);
  position:relative;
}
.team-avatar::after {
  content:''; position:absolute; inset:-3px;
  border-radius:50%;
  background: var(--neon-blue);
  z-index:-1;
}
/* Override inline backgrounds on team avatars */
.team-card .team-avatar { background: var(--black-3); }

.team-card h4  { font-size:1.05rem; font-weight:700; margin-bottom:4px; }
.team-card .role {
  font-size:.82rem; color:var(--neon-blue);
  font-family:var(--font-accent); letter-spacing:.05em; margin-bottom:12px;
}
.team-card p   { font-size:.83rem; color:var(--text-muted); line-height:1.6; }

/* Timeline */
.timeline {
  position:relative; padding-left:40px; margin-top:60px;
}
.timeline::before {
  content:''; position:absolute;
  left:0; top:0; bottom:0; width:1px;
  background: var(--neon-blue);
  opacity: 0.3;
}
.timeline-item { position:relative; margin-bottom:48px; }
.timeline-item::before {
  content:''; position:absolute;
  left:-44px; top:6px;
  width:10px; height:10px; border-radius:50%;
  background: var(--neon-blue);
  box-shadow: 0 0 12px var(--neon-blue);
}
.timeline-year {
  font-size:.78rem; font-weight:700;
  color: var(--pastel-green);
  letter-spacing:.1em; margin-bottom:6px;
  font-family:var(--font-accent);
}
.timeline-item h4 { font-size:1.05rem; font-weight:700; margin-bottom:8px; }
.timeline-item p  { font-size:.88rem; color:var(--text-secondary); line-height:1.65; }

/* ============================================
   CONTACT PAGE
   ============================================ */

.contact-grid {
  display:grid; grid-template-columns:1fr 1.4fr;
  gap:60px; margin-top:60px; align-items:start;
}
.contact-info h3 { font-size:1.8rem; font-weight:800; margin-bottom:16px; }
.contact-info p  { color:var(--text-secondary); line-height:1.75; margin-bottom:40px; font-size:.95rem; }

.contact-detail-list { display:flex; flex-direction:column; gap:24px; margin-bottom:40px; }
.contact-detail      { display:flex; align-items:flex-start; gap:16px; }
.detail-icon {
  width:44px; height:44px; border-radius:var(--radius-md);
  background: rgba(0,212,255,0.08);
  border: 1px solid rgba(0,212,255,0.2);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.detail-icon svg { width:20px; height:20px; }
.detail-text strong { display:block; font-size:.85rem; font-weight:600; margin-bottom:4px; }
.detail-text span   { font-size:.88rem; color:var(--text-secondary); }

/* Contact Form */
.contact-form-wrap { padding:48px; }
.form-grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap:20px; margin-bottom:20px;
}
.form-group { display:flex; flex-direction:column; gap:8px; }
.form-group.full { grid-column:span 2; }
.form-group label {
  font-size:.82rem; font-weight:500; color:var(--text-secondary);
  font-family:var(--font-accent); letter-spacing:.04em;
}
.form-group input,
.form-group select,
.form-group textarea {
  padding:14px 18px;
  background: rgba(255,255,255,0.04);
  border: 1.5px solid var(--border-glass);
  border-radius:var(--radius-md);
  color:var(--white); font-family:var(--font-body);
  font-size:.92rem; transition:var(--transition);
  outline:none; resize:none; width:100%;
}
.form-group input::placeholder,
.form-group textarea::placeholder { color:var(--text-muted); }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--neon-blue);
  background: rgba(0,212,255,0.04);
  box-shadow: 0 0 0 4px rgba(0,212,255,0.08);
}
.form-group select { cursor:pointer; }
.form-group select option { background:var(--bg-secondary); color:var(--white); }
.form-group textarea { min-height:140px; }

.form-submit { margin-top:12px; width:100%; justify-content:center; font-size:1rem; padding:16px 32px; }

.form-success { text-align:center; padding:40px; display:none; }
.form-success.show { display:block; }
.form-success .success-icon {
  width:72px; height:72px; border-radius:50%;
  background: rgba(168,245,208,0.1);
  border: 1.5px solid rgba(168,245,208,0.3);
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 20px; font-size:2rem;
}

/* FAQ */
.faq-list {
  display:flex; flex-direction:column; gap:16px;
  max-width:800px; margin:48px auto 0;
}
.faq-item {
  border-radius:var(--radius-md);
  background:var(--bg-glass);
  border:1px solid var(--border-glass);
  overflow:hidden; transition:var(--transition);
}
.faq-item:hover { border-color:var(--border-blue); }
.faq-question {
  display:flex; align-items:center;
  justify-content:space-between;
  padding:22px 28px; cursor:pointer;
  font-weight:600; font-size:.95rem; gap:16px;
}
.faq-question svg {
  flex-shrink:0; transition:transform .3s ease;
  color:var(--neon-blue);
}
.faq-item.open .faq-question svg { transform:rotate(45deg); }
.faq-answer {
  max-height:0; overflow:hidden;
  transition:max-height .4s ease,padding .3s ease;
  padding:0 28px; color:var(--text-secondary);
  font-size:.9rem; line-height:1.75;
}
.faq-item.open .faq-answer { max-height:200px; padding:0 28px 24px; }

/* Map */
.map-wrap {
  border-radius:var(--radius-lg); overflow:hidden;
  border:1px solid var(--border-glass); margin-top:40px;
  height:200px; background:var(--bg-secondary);
  display:flex; align-items:center; justify-content:center;
  font-size:.85rem; color:var(--text-muted); position:relative;
}

/* ── Responsive ── */
@media (max-width:1024px){
  .services-full-grid { grid-template-columns:1fr; }
  .tools-grid { grid-template-columns:repeat(4,1fr); }
  .team-grid  { grid-template-columns:repeat(2,1fr); }
  .about-intro-grid { grid-template-columns:1fr; }
  .about-visual-wrap { height:300px; }
  .contact-grid { grid-template-columns:1fr; }
  .portfolio-grid { grid-template-columns:repeat(2,1fr); }
  .portfolio-grid .work-item-wide { grid-column:span 1; }
  .results-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:768px){
  .tools-grid  { grid-template-columns:repeat(3,1fr); }
  .team-grid   { grid-template-columns:repeat(2,1fr); }
  .portfolio-grid { grid-template-columns:1fr; }
  .form-grid   { grid-template-columns:1fr; }
  .form-group.full { grid-column:span 1; }
  .contact-form-wrap { padding:28px 20px; }
  .about-values { grid-template-columns:1fr; }
}
@media (max-width:480px){
  .team-grid { grid-template-columns:1fr; }
  .results-grid { grid-template-columns:1fr; }
}