/* GoldenCZ + canonical design tokens (design-token-baseline step 3b, Rex 6912)
   Layering per vstd 97e0f7fd: canonical neutrals/type via alias, brand untouched. */
@import url("tokens.css");

/*
  GoldenCZ Website Stylesheet — Enhanced Design

  This stylesheet is based on an improved UI template and serves as the new
  visual foundation for the GoldenCZ website. It emphasises modern
  typography, generous spacing, subtle gradients and elegant card layouts
  while retaining brand colours. Additional classes are provided for the
  Gallery and Partners sections as well as for technology card images.
*/

/* Global resets and enhanced typography */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font);
  line-height: 1.7;
  color: var(--fg);
  background-color: var(--surface);
  font-size: 16px;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Enhanced typography hierarchy */
h1,
h2,
h3,
h4 {
  font-weight: 600;
  color: var(--fg);
  margin-bottom: 1rem;
}

h1 {
  font-size: 3.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

h2 {
  font-size: 2.5rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 1.5rem;
}

h3 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

h4 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
}

p {
  font-size: 1.1rem;
  line-height: 1.8;
  margin-bottom: 1.25rem;
  color: var(--muted);
}

/* Utility classes */
.content-container {
  width: 90%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 1rem;
}

.section {
  padding: 5rem 0;
  scroll-margin-top: 100px;
}

.section h2 {
  text-align: center;
  margin-bottom: 2rem;
  position: relative;
}

.section h2::after {
  content: '';
  position: absolute;
  bottom: -0.5rem;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #3b82f6, #6366f1);
  border-radius: 2px;
}

/* Navigation */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  z-index: 1000;
  transition: all 0.3s ease;
  background-color: transparent;
  color: #ffffff;
}

.navbar.scrolled {
  background-color: rgba(26, 32, 44, 0.95);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.nav-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo a {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.05rem;
  color: #ffffff;
  background: linear-gradient(90deg, #60a5fa, #a78bfa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.nav-links ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.nav-links li a {
  font-size: 0.85rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.02rem;
  padding: 0.5rem 0;
  transition: all 0.3s ease;
  position: relative;
  white-space: nowrap;
}

.nav-links li a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #60a5fa, #a78bfa);
  transition: width 0.3s ease;
}

.nav-links li a:hover::after {
  width: 100%;
}

/* Mobile nav */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 24px;
  height: 18px;
  cursor: pointer;
  border: none;
  background: none;
}

.nav-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: #ffffff;
  transition: all 0.3s ease;
  border-radius: 1px;
}

/* Hero */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  color: #ffffff;
  background: #0b1530;
  overflow: hidden;
}

.hero-split {
  flex: 1;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  min-height: 100vh;
}

.hero-copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.4rem;
  padding: 6rem 1rem 6rem 8vw;
  animation: fadeInUp 1s ease-out;
}

.hero-eyebrow {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #7fb3ff;
}

.hero-copy h1 {
  font-size: clamp(2.4rem, 4.6vw, 3.8rem);
  line-height: 1.12;
  font-weight: 750;
  letter-spacing: -0.015em;
  color: #ffffff;
  margin: 0;
}

.tagline {
  font-size: 1.15rem;
  max-width: 44ch;
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.6;
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 0.4rem;
}

.hero-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  padding: 0.85rem 1.5rem;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.25s ease;
}

.hero-btn.primary {
  background: #2f6df6;
  color: #ffffff;
}

.hero-btn.primary:hover {
  background: #2459d1;
  transform: translateY(-1px);
}

.hero-btn.ghost {
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #ffffff;
}

.hero-btn.ghost:hover {
  border-color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.06);
}

.hero-visual {
  position: relative;
}

.hero-visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #0b1530 0%, rgba(11, 21, 48, 0) 38%);
}

/* top scrim so fixed white nav stays readable over the bright photo edge */
.hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 110px;
  background: linear-gradient(180deg, rgba(11, 21, 48, 0.65) 0%, rgba(11, 21, 48, 0) 100%);
  z-index: 1;
  pointer-events: none;
}

.hero-cred {
  position: absolute;
  left: 8vw;
  right: 1.6rem;
  bottom: 26px;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.55);
}

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

/* About Section */
.about {
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
}

.about-intro {
  max-width: 900px;
  margin: 0 auto 3rem;
  text-align: center;
  font-size: 1.2rem;
  color: #475569;
  line-height: 1.8;
}

.capabilities-section {
  margin-top: 3rem;
}

.capabilities-section h3 {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 2rem;
  color: #1e293b;
}

.capabilities-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.capability-card {
  background: #ffffff;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid #e2e8f0;
  transition: all 0.3s ease;
}

.capability-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.capability-card .icon {
  width: 50px;
  height: 50px;
  border-radius: 10px;
  background: linear-gradient(135deg, #3b82f6, #6366f1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  color: #ffffff;
  font-size: 1.5rem;
}

/* Technology Section */
.technology {
  background-color: #ffffff;
}

.tech-intro {
  max-width: 900px;
  margin: 0 auto 3rem;
  font-size: 1.2rem;
  text-align: center;
  color: #475569;
  line-height: 1.8;
}

.tech-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2.5rem;
  margin-top: 3rem;
}

.tech-card {
  background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
  border-radius: 16px;
  padding: 2.5rem;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  border: 1px solid #e2e8f0;
  text-align: center;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.tech-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #3b82f6, #6366f1, #8b5cf6);
}

.tech-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.tech-card h3 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: #1e293b;
}

.tech-card p {
  font-size: 1rem;
  color: #64748b;
  line-height: 1.7;
}

/* Allow images within technology cards */
.tech-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 1.5rem;
}

/* Products Section */
.products {
  background: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 100%);
}

.products-intro {
  max-width: 900px;
  margin: 0 auto 3rem;
  font-size: 1.2rem;
  text-align: center;
  color: #475569;
  line-height: 1.8;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2.5rem;
  margin-top: 3rem;
}

.product-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  min-height: 400px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 2.5rem;
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.15);
  /* Use dark text by default for better contrast against translucent card backgrounds */
  color: #1e293b;
  transition: all 0.3s ease;
}

/* Override product card text colours to ensure high contrast against light card backgrounds */
/*
  Use !important to ensure these colours override earlier declarations that
  set white text on product cards. Without !important the later white
  declarations in this file take precedence due to cascading order.
*/
.product-card h3,
.product-card .product-desc,
.product-card ul li,
.product-card ul li strong {
  color: #1e293b !important;
}

.product-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.25);
}

.products-bg-emblems {
  background: linear-gradient(135deg, #7c2d12 0%, #dc2626 100%);
}

.products-bg-strips {
  background: linear-gradient(135deg, #0f766e 0%, #0d9488 100%);
}

.products-bg-displays {
  background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
}

.products-bg-chmsl {
  background: linear-gradient(135deg, #b45309 0%, #f59e0b 100%);
}

.products-bg-edge {
  background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
}

.product-card h3 {
  font-size: 1.8rem;
  margin-bottom: 1rem;
  color: #ffffff;
}

.product-card .product-desc {
  font-size: 1.1rem;
  margin-bottom: 2rem;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.7;
}

.product-features {
  list-style: none;
  margin-bottom: 2rem;
}

.product-features li {
  font-size: 1rem;
  margin-bottom: 0.75rem;
  position: relative;
  padding-left: 1.5rem;
  color: rgba(255, 255, 255, 0.95);
}

.product-features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  color: #60f6ff;
  font-weight: bold;
}

/* Gallery Section */
.gallery {
  background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
}

.gallery-intro {
  max-width: 900px;
  margin: 0 auto 3rem;
  font-size: 1.2rem;
  text-align: center;
  color: #475569;
  line-height: 1.8;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin-top: 3rem;
}

.gallery-item {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  background: #ffffff;
}

.gallery-item img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

/* Ensure embedded videos in the gallery match the size and styling of images */
.gallery-item video {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 0;
  display: block;
}

.gallery-item figcaption {
  padding: 1rem;
  text-align: center;
  font-size: 1rem;
  color: #475569;
}

.gallery-item figcaption strong {
  display: block;
  color: #1e293b;
  font-size: 1.1rem;
  margin-bottom: 0.3rem;
  font-weight: 600;
}

.gallery-item .app-details {
  color: #64748b;
  font-size: 0.9rem;
  font-style: italic;
  display: block;
  margin-top: 0.2rem;
}

/*
 * LED Strip Lights Page
 * These styles adapt the cards and layout for the dedicated light‑strip
 * product page. Each strip card uses a clean white background with
 * subtle shadows and border treatments to echo the capability cards on the
 * home page, ensuring a cohesive look across the site.
 */

.strips {
  background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
  padding-top: 8rem; /* Account for fixed navbar height + extra spacing */
}

.strip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2.5rem;
  margin-top: 3rem;
}

.strip-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 2rem;
  border: 1px solid #e2e8f0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
}

/* Product card photo header (P0-B) */
.card-photo {
  height: 190px;
  margin: -2rem -2rem 1.4rem;
  border-radius: 16px 16px 0 0;
  background: #0b1530;
  overflow: hidden;
}

.card-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-photo.placeholder {
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.45);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
}

.featured-badge {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9a6b14;
  background: #fdf3df;
  border: 1px solid #ecd9ae;
  border-radius: 5px;
  padding: 3px 9px;
  margin-bottom: 0.8rem;
}

.strip-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.12);
}

.strip-card h3 {
  font-size: 1.6rem;
  margin-bottom: 1rem;
  color: #1e293b;
}

.strip-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 1rem;
}

.strip-card .card-photo img {
  height: 100%;
  border-radius: 0;
  margin-bottom: 0;
}

.strip-details {
  margin-top: auto;
}

.strip-details h4 {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  color: #1e293b;
}

.strip-details ul {
  list-style: none;
  margin-bottom: 1rem;
}

.strip-details ul li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.5rem;
  color: #475569;
}

.strip-details ul li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: #3b82f6;
}

/* Industry Applications Grid */
.app-categories {
  margin-top: 4rem;
  padding-top: 3rem;
  border-top: 2px solid #e2e8f0;
}

.app-categories h3 {
  font-size: 2rem;
  text-align: center;
  margin-bottom: 3rem;
  color: #1e293b;
  font-weight: 600;
}

.app-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin-bottom: 2rem;
}

.app-category {
  background: #ffffff;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  border: 1px solid #e2e8f0;
}

.app-category:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  transform: translateY(-4px);
  border-color: #3b82f6;
}

.app-category h4 {
  font-size: 1.3rem;
  color: #1e293b;
  margin-bottom: 1.2rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  border-bottom: 2px solid #3b82f6;
  padding-bottom: 0.5rem;
}

.app-category ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.app-category ul li {
  padding: 0.6rem 0;
  color: #475569;
  font-size: 1rem;
  line-height: 1.6;
  position: relative;
  padding-left: 1.5rem;
}

.app-category ul li::before {
  content: "▸";
  position: absolute;
  left: 0;
  color: #3b82f6;
  font-weight: bold;
}

/* Responsive adjustments for app grid */
@media (max-width: 768px) {
  .app-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .app-category {
    padding: 1.5rem;
  }
  
  .app-categories h3 {
    font-size: 1.6rem;
    margin-bottom: 2rem;
  }
}

/* Display Solutions Page Styles */
.comparison-section {
  margin-top: 4rem;
  padding: 3rem 0;
  background: #f8fafc;
  border-radius: 12px;
  /* wide spec table scrolls inside its section instead of stretching the page */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.comparison-table {
  width: 100%;
  border-collapse: collapse;
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.comparison-table thead {
  background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
  color: white;
}

.comparison-table th,
.comparison-table td {
  padding: 1rem;
  text-align: center;
  border: 1px solid #e2e8f0;
}

.comparison-table th {
  font-weight: 600;
  font-size: 1.05rem;
}

.comparison-table tbody tr:hover {
  background: #f1f5f9;
}

.comparison-table td:first-child {
  text-align: left;
  font-weight: 600;
  background: #f8fafc;
}

.showcase-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.showcase-item {
  background: white;
  padding: 1.5rem;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  transition: all 0.3s ease;
}

.showcase-item:hover {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  transform: translateY(-4px);
  border-color: #a855f7;
}

.showcase-item h4 {
  color: #7c3aed;
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
}

.applications-showcase {
  margin-top: 4rem;
}

.applications-showcase h2 {
  text-align: center;
  margin-bottom: 2rem;
}

/* Responsive table */
@media (max-width: 768px) {
  .comparison-table {
    font-size: 0.85rem;
  }
  
  .comparison-table th,
  .comparison-table td {
    padding: 0.5rem;
  }
  
  .showcase-grid {
    grid-template-columns: 1fr;
  }
}

/* Aquarium Demo Section */
.aquarium {
  background: linear-gradient(135deg, #0ea5e9 0%, #0369a1 100%);
  color: #ffffff;
}

.aquarium h2 {
  color: #ffffff;
}

.aquarium-intro {
  max-width: 800px;
  margin: 0 auto 2rem;
  text-align: center;
  font-size: 1.25rem;
  color: #e0f2fe;
  line-height: 1.8;
}

.aquarium-content {
  max-width: 900px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.1);
  padding: 2.5rem;
  border-radius: 16px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.aquarium-content p {
  color: #f0f9ff;
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
}

.aquarium-features {
  list-style: none;
  padding: 0;
  margin: 2rem 0;
}

.aquarium-features li {
  padding: 1rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: #e0f2fe;
  font-size: 1.05rem;
}

.aquarium-features li:last-child {
  border-bottom: none;
}

.aquarium-features strong {
  color: #ffffff;
  display: inline-block;
  margin-right: 0.5rem;
}

/* Partners Section */
.partners {
  background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);
}

.partner-intro {
  max-width: 900px;
  margin: 0 auto 3rem;
  text-align: center;
  font-size: 1.2rem;
  color: #475569;
  line-height: 1.8;
}

.partner-list {
  list-style: none;
  padding-left: 0;
  max-width: 800px;
  margin: 1rem auto 2rem;
}

.partner-list li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 1rem;
  font-size: 1rem;
  color: #475569;
}

.partner-list li::before {
  content: '\2022';
  position: absolute;
  left: 0;
  top: 0;
  color: #6366f1;
  font-weight: bold;
}

.partner-highlight {
  max-width: 900px;
  margin: 0 auto;
  padding: 2rem;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.partner-highlight h3 {
  margin-bottom: 1rem;
  color: #1e293b;
}

.partner-highlight p {
  color: #475569;
  line-height: 1.7;
  font-size: 1.1rem;
}

/* Contact Section */
.contact {
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
  color: #ffffff;
}

.contact h2 {
  color: #ffffff;
}

.contact-intro {
  max-width: 800px;
  margin: 0 auto 3rem;
  text-align: center;
  font-size: 1.2rem;
  color: #cbd5e1;
  line-height: 1.8;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  margin-top: 3rem;
}

.contact-form {
  background: rgba(255, 255, 255, 0.05);
  padding: 2.5rem;
  border-radius: 16px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: #e2e8f0;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  font-size: 1rem;
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  transition: all 0.3s ease;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #60a5fa;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1);
}

.btn {
  background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
  color: #ffffff;
  padding: 1rem 2rem;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 0.05rem;
}

.btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(59, 130, 246, 0.4);
}

.btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

.btn-loading {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-loading::after {
  content: '';
  width: 1rem;
  height: 1rem;
  border: 2px solid transparent;
  border-top: 2px solid currentColor;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.form-message {
  padding: 1rem;
  border-radius: 8px;
  margin-bottom: 1.5rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.form-message.success {
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.3);
  color: #4ade80;
}

.form-message.success::before {
  content: '✓';
  font-weight: bold;
  font-size: 1.2rem;
}

.form-message.error {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #f87171;
}

.form-message.error::before {
  content: '⚠';
  font-weight: bold;
  font-size: 1.2rem;
}

.contact-info {
  padding: 2rem 0;
}

.contact-info h3 {
  font-size: 1.5rem;
  margin-bottom: 2rem;
  color: #ffffff;
}

.contact-info p {
  margin-bottom: 1.5rem;
  font-size: 1.1rem;
  color: #cbd5e1;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.contact-info strong {
  color: #60a5fa;
  min-width: 80px;
}

/* Footer */
.footer {
  background-color: #0f172a;
  color: #94a3b8;
  text-align: center;
  padding: 2rem 0;
  font-size: 0.95rem;
  border-top: 1px solid #1e293b;
}

/* Responsive */
@media (max-width: 1024px) {
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .tech-grid,
  .product-grid,
  .gallery-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .nav-links {
    position: fixed;
    top: 0;
    right: -100%;
    width: 70%;
    max-width: 300px;
    height: 100vh;
    background-color: rgba(26, 32, 44, 0.95);
    backdrop-filter: blur(10px);
    padding-top: 4rem;
    transition: right 0.3s ease;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }
  .nav-links.open {
    right: 0;
  }
  .nav-links ul {
    flex-direction: column;
    gap: 2rem;
    text-align: left;
    padding-left: 2rem;
  }
  .nav-toggle {
    display: flex;
  }
  .hero-split {
    grid-template-columns: 1fr;
  }
  .hero-visual {
    position: absolute;
    inset: 0;
  }
  .hero-visual::after {
    background: linear-gradient(
      180deg,
      rgba(11, 21, 48, 0.55) 0%,
      rgba(11, 21, 48, 0.82) 55%,
      #0b1530 100%
    );
  }
  .hero-copy {
    padding: 7rem 1.6rem 5.5rem;
  }
  .hero-cred {
    left: 1.6rem;
    gap: 0.9rem;
  }
  .tagline {
    font-size: 1.05rem;
  }
  .section {
    padding: 3rem 0;
  }
  .strips {
    padding-top: 6rem; /* Extra padding on mobile to account for navbar */
  }
  .form-row {
    grid-template-columns: 1fr;
  }
  .capabilities-grid {
    grid-template-columns: 1fr;
  }
  
  /* Technology section mobile improvements */
  .tech-card {
    padding: 1.5rem;
  }
  
  .tech-card img {
    height: 250px; /* Taller on mobile for better aspect ratio */
    margin-bottom: 1rem;
  }
  
  .tech-card h3 {
    font-size: 1.3rem;
  }
  
  .tech-card p {
    font-size: 0.95rem;
  }
}