/*===================================================================
  HiPer Semiconductor — Custom CSS
  Bright, professional theme with larger desktop typography.
  Supplements Tailwind CDN.
  ===================================================================*/

/* ---- Smooth Scroll ---- */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

/* ---- Body base: larger default ---- */
body {
  font-size: 1.125rem; /* 18px base */
}

/* ---- Header glass effect ---- */
.header-scrolled {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* ---- Hero Gradient (bright, not dark) ---- */
.hero-gradient {
  background: linear-gradient(
    135deg,
    rgba(0, 55, 100, 0.88) 0%,
    rgba(0, 102, 180, 0.72) 50%,
    rgba(71, 175, 223, 0.45) 100%
  );
}

/* ---- Section accent bar ---- */
.section-accent {
  position: relative;
}
.section-accent::after {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  margin: 1rem auto 0;
  background: linear-gradient(90deg, #0066B4, #47AFDF);
  border-radius: 2px;
}

/* ---- Feature list checkmark ---- */
.feature-list {
  list-style: none;
  padding: 0;
}
.feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.5rem 0;
  font-size: 1.1rem;
}
.feature-list li::before {
  content: '';
  display: inline-block;
  width: 1.3rem;
  height: 1.3rem;
  min-width: 1.3rem;
  margin-top: 0.15rem;
  background-color: #0066B4;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd'/%3E%3C/svg%3E") no-repeat center;
  mask-size: contain;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd'/%3E%3C/svg%3E") no-repeat center;
  -webkit-mask-size: contain;
}

/* ---- Spec Table (larger) ---- */
.spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1.05rem;
}
.spec-table thead th {
  background: linear-gradient(135deg, #0066B4, #005299);
  color: #ffffff;
  padding: 1rem 1.25rem;
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: left;
  white-space: nowrap;
}
.spec-table tbody td {
  padding: 0.9rem 1.25rem;
  border-bottom: 1px solid #e5e7eb;
  color: #1a1a2e;
}
.spec-table tbody tr:hover td {
  background-color: #f0f7ff;
}
.spec-table tbody td:first-child {
  font-weight: 700;
  color: #0066B4;
}

/* ---- Application Card ---- */
.app-card {
  background: #fff;
  border-radius: 0.75rem;
  padding: 1.75rem;
  border: 1px solid #e5e7eb;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  border-top: 3px solid transparent;
}
.app-card:hover {
  box-shadow: 0 12px 40px rgba(0,0,0,0.08);
  transform: translateY(-3px);
}
.app-card:nth-child(1) { border-top-color: #0066B4; }
.app-card:nth-child(2) { border-top-color: #1D4148; }
.app-card:nth-child(3) { border-top-color: #10b981; }
.app-card:nth-child(4) { border-top-color: #f59e0b; }

/* ---- Page Banner (inner pages) ---- */
.page-banner {
  background: linear-gradient(135deg, #003764 0%, #0066B4 50%, #47AFDF 100%);
  position: relative;
  overflow: hidden;
}
.page-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 50%, rgba(255,255,255,0.08) 0%, transparent 60%);
  pointer-events: none;
}

/* ---- Form Input ---- */
.form-input {
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-input:focus {
  border-color: #0066B4;
  box-shadow: 0 0 0 3px rgba(0, 102, 180, 0.12);
  outline: none;
}

/* ---- Circuit Pattern for Hero ---- */
.circuit-overlay {
  background-image:
    linear-gradient(rgba(0,102,180,0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,102,180,0.12) 1px, transparent 1px),
    radial-gradient(circle at 30px 30px, rgba(71,175,223,0.25) 2px, transparent 2px),
    radial-gradient(circle at 90px 70px, rgba(71,175,223,0.25) 2px, transparent 2px),
    radial-gradient(circle at 60px 120px, rgba(71,175,223,0.18) 3px, transparent 3px),
    radial-gradient(circle at 130px 40px, rgba(71,175,223,0.18) 3px, transparent 3px);
  background-size: 120px 120px, 120px 120px, 120px 120px, 120px 120px, 120px 120px, 120px 120px;
}

/* ---- Hero Right Glass Card (transparent) ---- */
.hero-card-glass {
  background: rgba(255,255,255,0.45);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 20px 60px rgba(0,30,60,0.10), 0 0 0 1px rgba(255,255,255,0.4);
  border: 1px solid rgba(255,255,255,0.5);
}

/* ---- Scroll-to-Top ---- */
.scroll-top-btn {
  box-shadow: 0 4px 16px rgba(0, 102, 180, 0.3);
}

/* ---- Active nav link ---- */
.nav-active {
  color: #0066B4;
  background: #eff6ff;
}

/* Contact button in nav — needs higher specificity to beat nav-active */
.nav-btn {
  color: #ffffff !important;
  background: #0066B4 !important;
}
.nav-btn:hover {
  background: #1d4ed8 !important;
}

/* ---- Footer link hover ---- */
.footer-link {
  transition: color 0.2s;
}
.footer-link:hover {
  color: #47AFDF;
}

/* ---- Breadcrumb ---- */
.breadcrumb-sep {
  color: #94a3b8;
  margin: 0 0.5rem;
}