/* Teratech - Dark Under Construction styles */
:root {
  --bg-1: #07080c; /* deep background */
  --bg-2: #0b1220; /* subtle gradient */
  --panel: rgba(255,255,255,0.03);
  --muted: #98a0ac;
  --text: #e6eef8;
  --accent: #9aa4b2; /* subtle gray-blue */
  --glass-border: rgba(255,255,255,0.04);
  --glow-1: rgba(160,172,190,0.04); /* reduced cool glow */
  --glow-2: rgba(90,100,115,0.03); /* reduced ambient */
  --center-glow: rgba(130,145,170,0.05); /* softer central spotlight */

  /* Typography & spacing */
  --base-font: 18px; /* comfortable base */
  --h1-size: clamp(1.9rem, 4vw, 3rem);
  --lead-size: clamp(1.05rem, 2.2vw, 1.25rem);
  --muted-size: 0.98rem;
  --card-gap: 36px;
  --card-padding: 36px;
  --hero-padding: 48px;
  --header-height: 120px; /* used to offset content (increased for larger brand) */
}  


* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  font-size: var(--base-font);
  line-height: 1.5;
  letter-spacing: 0.005em;
  background: var(--bg-2);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--hero-padding);
  padding-top: calc(var(--hero-padding) + var(--header-height));
  position: relative;
  overflow: hidden;
}   


.site-header {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
  background: rgba(255,255,255,0.70); /* more subtle, semi-transparent */
  color: var(--bg-2);
  border-radius: 0;
  padding: 12px 32px;
  box-shadow: 0 4px 12px rgba(2,6,23,0.28); /* even softer shadow */
  display: flex;
  align-items: center;
  gap: 16px;
  backdrop-filter: blur(6px);
  border: 1px solid rgba(0,0,0,0.025); /* even lighter border */
  width: 100%;
}

.site-header .brand { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; color: inherit; }
.site-header .brand-logo { width: 120px; height: 120px; display: inline-block; }
.site-header .brand-logo img { width: 100%; height: auto; display: block; }
.site-header .brand-name { font-weight: 800; font-size: 1.6rem; color: #071124; }

.hero {
  width: 100%;
  max-width: 1100px;
  padding: calc(var(--hero-padding) / 2);
  position: relative;
  z-index: 2;
} 

/* Background slideshow (6 images) */
.bg-slideshow {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.bg-slideshow .slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: grayscale(100%) contrast(1.04) brightness(0.68);
  opacity: 0;
  transform: scale(1.02);
  animation: slideFade 30s linear infinite;
  will-change: opacity, transform;
}

/* map each slide to an image and stagger the animation */
.bg-slideshow .slide:nth-child(1) { background-image: url("assets/industry1.jpg"); animation-delay: 0s; }
.bg-slideshow .slide:nth-child(2) { background-image: url("assets/industry2.jpg"); animation-delay: 5s; }
.bg-slideshow .slide:nth-child(3) { background-image: url("assets/industry3.jpg"); animation-delay: 10s; }
.bg-slideshow .slide:nth-child(4) { background-image: url("assets/industry4.jpg"); animation-delay: 15s; }
.bg-slideshow .slide:nth-child(5) { background-image: url("assets/industry5.jpg"); animation-delay: 20s; }
.bg-slideshow .slide:nth-child(6) { background-image: url("assets/industry6.jpg"); animation-delay: 25s; }

@keyframes slideFade {
  0% { opacity: 0; transform: scale(1.02); }
  6% { opacity: 0.18; transform: scale(1.03); }
  17% { opacity: 0.18; transform: scale(1.03); }
  24% { opacity: 0; transform: scale(1.02); }
  100% { opacity: 0; }
}  

/* make the effect slightly more subtle on small screens */
@media (max-width: 720px) {
  :root { --header-height: 96px; }
  .bg-slideshow .slide { filter: grayscale(100%) brightness(0.8); transform: scale(1.01); }
  /* header adjustments for tablet */
  .site-header { left: 0; right: 0; transform: none; padding: 10px 16px; border-radius: 0; justify-content: flex-start; }
  .site-header .brand-logo { width: 88px; height: 88px; }
  .site-header .brand-name { font-size: 1.1rem; }
}  
  

.card {
  display: flex;
  gap: var(--card-gap);
  align-items: center;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.008));
  border: 1px solid rgba(255,255,255,0.035);
  padding: var(--card-padding);
  border-radius: 14px;
  backdrop-filter: blur(6px) saturate(100%);
  box-shadow: 0 10px 30px rgba(3,10,30,0.6);
  position: relative;
  z-index: 1;
} 

.card::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 15px;
  background: linear-gradient(90deg, rgba(255,255,255,0.015), rgba(255,255,255,0));
  pointer-events: none;
}

@keyframes drift {
  0% { transform: translate3d(-2%, -2%, 0) scale(1); }
  50% { transform: translate3d(2%, 2%, 0) scale(1.02); }
  100% { transform: translate3d(-2%, -2%, 0) scale(1); }
}

@keyframes pulseGlow {
  0% { opacity: 0.45; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(1.01); }
  100% { opacity: 0.45; transform: scale(1); }
}

.logo-wrap {
  width: 180px;
  height: 180px;
  min-width: 180px;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius: 12px;
  padding: 20px;
  border: 1px solid rgba(255,255,255,0.03);
}

@media (max-width: 720px) {
  .logo-wrap { width: 140px; height: 140px; min-width: auto; padding: 16px; }
} 

.logo {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,0.6));
  animation: float 6s ease-in-out infinite, appear 0.9s ease both;
}

.content { flex: 1; text-align: center; }

h1 {
  margin: 0 0 14px 0;
  font-weight: 700;
  font-size: var(--h1-size);
  line-height: 1.05;
  letter-spacing: -0.01em;
} 

.lead {
  margin: 0 0 18px 0;
  color: var(--muted);
  font-size: var(--lead-size);
  line-height: 1.6;
} 

.map { margin: 12px 0 12px 0; }

.map-embed-wrapper { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; align-items: center; }

.map { width: 100%; text-align: center; }

.map-embed {
  width: 100%;
  max-width: 520px;
  height: 300px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.03);
  box-shadow: 0 6px 20px rgba(3,10,30,0.5);
}

.map-embed iframe { width: 100%; height: 100%; border: 0; display: block; }

.map-link {
  display: inline-block;
  padding: 10px 16px;
  background: rgba(255,255,255,0.02);
  color: var(--text);
  border-radius: 10px;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,0.03);
  box-shadow: 0 6px 16px rgba(2,6,23,0.45);
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
  color: var(--accent);
  font-size: 1rem;
} 

.map-link:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(2,6,23,0.7); }

.small { color: var(--muted); font-size: var(--muted-size); margin-top: 12px; } 

@keyframes float {
  0% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
  100% { transform: translateY(0); }
}

@keyframes appear {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 720px) {
  .card { flex-direction: column; gap: 18px; padding: 20px; }
  .logo-wrap { width: 140px; height: 140px; min-width: auto; padding: 16px; }
  body { font-size: 16px; padding: 20px; padding-top: calc(20px + var(--header-height)); }
  h1 { font-size: 1.6rem; }
}

@media (max-width: 480px) {
  :root { --header-height: 104px; }
  body { padding: 16px; padding-top: calc(16px + var(--header-height)); }
  .logo { width: 100%; }
  h1 { font-size: 1.4rem; }
  .map-link { display: block; margin-top: 10px; }
  /* Mobile header: full width and larger brand */
  .site-header { left: 0; right: 0; padding: 12px 14px; border-radius: 0; gap: 12px; min-height: var(--header-height); align-items: center; }
  .site-header .brand-logo { width: 88px; height: 88px; }
  .site-header .brand-name { font-size: 1.15rem; }
}