/* =============================================================
   about.css — Veloryn About page styles
   Linked from: about.html
   ============================================================= */

/* ── HERO SECTION ─────────────────────────────────────────── */

.contact-hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: #0A1224;
}

/* Responsive background image */
.contact-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url('../images/hero/contact-1280.jpg');
  background-size: cover;
  background-position: 80% 90%;
  background-repeat: no-repeat;
}

/* Mobile */
@media (max-width: 767px) {
  .contact-hero-bg {
    background-position: 80% 90%;
  }
  .contact-hero-heading br {
    display: none;
  }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1279px) {
  .contact-hero-bg {
    background-position: 80% 90%;
  }
}

@media (min-width: 1280px) {
  .contact-hero-bg {
    background-image: url('../images/hero/contact-1920.jpg');
  }
}

@media (min-width: 1920px) {
  .contact-hero-bg {
    background-image: url('../images/hero/contact-2560.jpg');
  }
}

/* Dark overlay — removed tint, hero image shows at 100% */
.contact-hero-overlay {
  display: none;
}

/* Hero content wrapper */
.contact-hero-content {
  position: relative;
  z-index: 10;
  flex: 1;
  display: flex;
}

/* Hero inner: constrained left-aligned text block */
.contact-hero-inner {
  max-width: 1800px;
  width: 100%;
  margin: 0 auto;
  padding: 140px 24px 90px;
}

@media (min-width: 768px) {
  .contact-hero-inner {
    padding: 140px 48px 90px;
  }
}

@media (min-width: 1024px) {
  .contact-hero-inner {
    padding: 140px 80px 90px;
  }
}

@media (min-width: 1536px) {
  .contact-hero-inner {
    padding: 140px 112px 90px;
  }
}

.contact-hero-text {
  max-width: 860px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  text-align: left;
}

/* Heading */
.contact-hero-heading {
  font-family: 'Sora', sans-serif;
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #F5F7FF;
}

.contact-hero-heading span {
  color: #1E5FFF;
}

/* Subtext */
.contact-hero-subtext {
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.75;
  color: #AEB6D3;
  max-width: 560px;
}

/* CTA row */
.contact-hero-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  padding-top: 8px;
}

/* Primary CTA button — matches index.html "Discover Veloryn" */
.contact-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  min-width: 180px;
  padding: 0 32px;
  background-color: #1E5FFF;
  color: #F5F7FF;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 700;
  border-radius: 5px;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(30, 95, 255, 0.2);
  transition: background-color 0.25s ease-out, transform 0.2s ease-out, box-shadow 0.25s ease-out;
  white-space: nowrap;
}

.contact-btn-primary:hover {
  background-color: #4AA3FF;
  transform: scale(1.02);
  box-shadow: 0 8px 32px rgba(30, 95, 255, 0.35);
}

/* Secondary CTA button — matches index.html "See how we build" */
.contact-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  min-width: 180px;
  padding: 0 32px;
  background-color: transparent;
  color: #F5F7FF;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 700;
  border-radius: 5px;
  border: 1px solid #26304A;
  text-decoration: none;
  transition: background-color 0.25s ease-out, border-color 0.25s ease-out;
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
}

.contact-btn-secondary:hover {
  border-color: rgba(255, 255, 255, 0.25);
  background-color: rgba(255, 255, 255, 0.04);
}

.contact-btn-secondary:focus-visible {
  outline: 2px solid rgba(30, 95, 255, 0.65);
  outline-offset: 3px;
  border-radius: 5px;
}

/* ── FADE-UP ANIMATION (matches index.html) ───────────────── */

.fade-up {
  opacity: 0;
  transform: translateY(24px);
  animation: fadeUp 0.7s ease-out forwards;
}

.fade-up-1 { animation-delay: 0.1s; }
.fade-up-2 { animation-delay: 0.25s; }
.fade-up-3 { animation-delay: 0.4s; }

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .fade-up {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .contact-btn-primary,
  .contact-btn-secondary {
    transition: none !important;
  }
}


/* ── CONTACT FORM SECTION ─────────────────────────────────── */

/* Blueprint grid texture — applied at opacity-[0.15] on overlay div */
.contact-form-grid {
  background-image:
    linear-gradient(to right, #26304A 1px, transparent 1px),
    linear-gradient(to bottom, #26304A 1px, transparent 1px);
  background-size: 40px 40px;
}

/* Legal disclaimer links (Privacy Policy / Terms of Service)
   Default: solid underline, inherited colour.
   Hover:   white text + dashed underline. */
.contact-legal-link {
  text-decoration: underline;
  text-decoration-style: solid;
  text-underline-offset: 3px;
  color: inherit;
  transition: color 0.2s ease, text-decoration-style 0.2s ease;
}

.contact-legal-link:hover {
  color: #ffffff;
  text-decoration-style: dashed;
}


/* ── Form field validation errors ────────────────────────────── */

.contact-field-error {
  display: none;
  font-size: 0.7rem;
  color: #FF6B6B;
  margin-top: 4px;
  line-height: 1.4;
}

/* Red border on invalid fields */
.contact-field-invalid {
  border-color: #FF6B6B !important;
}

.contact-field-invalid:focus {
  --tw-ring-color: rgba(255, 107, 107, 0.4);
  border-color: #FF6B6B !important;
}

/* Form-level error banner */
.contact-form-error {
  font-size: 0.75rem;
  font-weight: 500;
  color: #FF6B6B;
  background: rgba(255, 107, 107, 0.08);
  border: 1px solid rgba(255, 107, 107, 0.3);
  border-radius: 6px;
  padding: 10px 14px;
  text-align: center;
}


/* ── Card icon animations ── */

@keyframes iconRock {
  0%, 100% { transform: rotate(0deg); }
  30%       { transform: rotate(-2deg); }
  70%       { transform: rotate(2deg); }
}

@keyframes iconRise {
  0%, 100% { transform: translateY(0px); opacity: 1; }
  50%       { transform: translateY(-4px); opacity: 0.7; }
}

@keyframes iconGlow {
  0%, 100% { filter: brightness(1) drop-shadow(0 0 0px rgba(255,255,255,0)); }
  50%       { filter: brightness(1.4) drop-shadow(0 0 6px rgba(255,255,255,0.35)); }
}

.icon-float {
  display: inline-block;
  animation: iconRock 5s ease-in-out infinite;
}

.icon-spin {
  display: inline-block;
  animation: iconRise 2.8s ease-in-out infinite;
}

.icon-pulse {
  display: inline-block;
  animation: iconGlow 3s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .icon-float,
  .icon-spin,
  .icon-pulse {
    animation: none !important;
    filter: none !important;
  }
}


/* ── Shared token classes (replaces repeated inline styles) ─── */

/* Eyebrow spans — colour only, Tailwind handles font/spacing */
.contact-eyebrow {
  color: #AEB6D3;
}

/* Body text paragraphs — section subtext and card descriptions */
.contact-body-text {
  color: #AEB6D3;
}

/* Section/card headings — Sora font */
.contact-heading-sora {
  font-family: 'Sora', sans-serif;
}

/* Direct Communications reach cards */
.contact-reach-card {
  background-color: rgba(255, 255, 255, 0.02);
  border: 1px solid #26304A;
  border-radius: 8px;
}

/* Icon in reach cards — white, 32px */
.contact-reach-icon {
  color: #ffffff;
  font-size: 32px;
}

/* Icon box in capability items */
.contact-capability-box {
  background-color: #171C2F;
  border: 1px solid #26304A;
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

/* Icon in capability items — 22px (colour stays inline as it varies per item) */
.contact-capability-icon {
  font-size: 22px;
}


/* =============================================================
   Careers panel — embedded styles moved from careers.html
   ============================================================= */

body {
    background-color: #0A1224;
    color: #F5F7FF;
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.glass-panel {
    background: linear-gradient(145deg, rgba(23, 28, 47, 0.4) 0%, rgba(10, 18, 36, 0) 100%);
    border: 1px solid rgba(38, 48, 74, 0.4);
}

.glow-subtle {
    box-shadow: 0 0 40px -10px rgba(30, 95, 255, 0.15);
}

.careers-panel {
    position: relative;
}

.careers-bottom-accent {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: 170px;
            pointer-events: none;
            opacity: 0.96;
            mix-blend-mode: screen;
            background-image:
                url("data:image/png;base64,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");
            background-position: center bottom, center bottom;
            background-repeat: no-repeat, no-repeat;
            background-size: 100% auto, 100% auto;
        }

@media (max-width: 768px) {
    .careers-bottom-accent {
        height: 110px;
        background-size: 100% auto, 100% auto;
    }
}

/* ── Get Started CTA button ── */
.btn-cta-scale {
  transition: transform 200ms ease;
}
.btn-cta-scale:hover {
  transform: scale(1.05);
}