/* getstarted.css - page-specific styles for get-started.html */

/* Base page behaviour */
html {
  scroll-behavior: smooth;
}

h1,
h2,
h3,
h4 {
  font-family: 'Sora', sans-serif;
}

/* Shared layout helpers used by this page */
.site-shell-bg {
  background-color: #101522;
}

.nav-offset-fix {
  position: relative;
  top: -1px;
}

.brand-wordmark {
  font-family: 'Grava Roman', serif;
}

.nav-cta-btn {
  position: relative;
  top: -1px;
  padding-top: calc(0.5rem + 2px);
  padding-bottom: calc(0.5rem + 2px);
  border-radius: 5px;
  background-color: #1E5FFF;
  color: #F5F7FF;
}

.mobile-cta-btn {
  border-radius: 5px;
  background-color: #1E5FFF;
  color: #F5F7FF;
}

.hamburger-stack {
  gap: 6px;
}

.footer-brand-block {
  flex-shrink: 0;
  max-width: 300px;
}

.footer-logo {
  height: 48px;
  width: auto;
  object-fit: contain;
  object-position: left;
}

.footer-col-what {
  min-width: 110px;
}

.footer-col-how {
  min-width: 120px;
}

.footer-col-company {
  min-width: 100px;
}

.footer-col-connect {
  min-width: 90px;
}

/* Hero */
.get-started-hero {
  background-image: url('../images/hero/getstarted-2560.webp');
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
}

.get-started-hero-shell {
  padding: 140px 0 90px;
}

.hero-bottom-fade {
  background: linear-gradient(to bottom, transparent 0%, #0A1224 100%);
}

.get-started-hero-title {
  color: #F5F7FF;
}

.get-started-hero-copy {
  color: #AEB6D3;
  font-family: 'Inter', sans-serif;
}



/* Buttons and fields */
.standard-btn {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 0 1.25rem;
  border-radius: 5px;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  transition: background-color 200ms ease, border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}

.standard-btn-primary {
  background-color: #1E5FFF;
  color: #F5F7FF;
  box-shadow: 0 12px 24px rgba(30, 95, 255, 0.18);
}

.standard-btn-primary:hover {
  background-color: #4AA3FF;
  transform: scale(1.03);
}

.standard-btn-outline {
  border: 1.5px solid #394156;
  background: transparent;
  color: #F5F7FF;
}

.standard-btn-outline:hover {
  border-color: rgba(255, 255, 255, 0.5);
  background-color: rgba(255, 255, 255, 0.05);
}

.standard-btn:focus-visible,
.standard-field:focus-visible,
.submit-button:focus-visible {
  outline: 2px solid rgba(30, 95, 255, 0.65);
  outline-offset: 3px;
}

.standard-field {
  border-radius: 8px;
}

/* Cards and form shell */
.content-card,
.info-card,
.faq-card {
  border: 1px solid rgba(38, 48, 74, 0.9);
  border-radius: 8px;
  background-color: #171C2F;
}

.info-card {
  transition: transform 220ms ease, border-color 220ms ease, background-color 220ms ease;
}

.info-card:hover {
  transform: translateY(-4px);
  border-color: rgba(30, 95, 255, 0.45);
  background-color: #1C2340;
}

.faq-card {
  transition: transform 220ms ease, border-color 220ms ease, background-color 220ms ease;
}

.faq-card:hover {
  transform: translateY(-2px);
  border-color: rgba(30, 95, 255, 0.38);
  background-color: #1B2436;
}

.gs-form-shell {
  border-color: rgba(30, 41, 59, 0.95);
  background-color: #161E2E;
}

.submit-button {
  display: inline-flex;
  width: 100%;
  min-height: 56px;
  align-items: center;
  justify-content: center;
  padding: 0 2rem;
  border-radius: 5px;
  background-color: #1E5FFF;
  color: #F5F7FF;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 12px 24px rgba(30, 95, 255, 0.18);
  transition: background-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}

.submit-button:hover {
  background-color: #4AA3FF;
  transform: scale(1.02);
}

/* Sections */
.gs-section {
  position: relative;
  width: 100%;
  padding: 80px 0 72px;
}

.gs-section-dark {
  background-color: #0A1224;
}

.gs-section-alt {
  border-top: 1px solid rgba(57, 65, 86, 0.2);
  border-bottom: 1px solid rgba(57, 65, 86, 0.2);
  background-color: #0D1627;
}

.gs-section-intro {
  display: flex;
  max-width: 48rem;
  margin: 0 auto 4rem;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  text-align: center;
}

.gs-eyebrow {
  color: #AEB6D3;
  font-family: 'Inter', sans-serif;
}

.gs-section-title {
  color: #F5F7FF;
  font-family: 'Sora', sans-serif;
  line-height: 1.25;
}

.gs-section-copy {
  color: #AEB6D3;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
}

.faq-answer {
  font-size: 0.875rem;
  line-height: 1.7;
  display: none;
}

.faq-card.active .faq-answer {
  display: block;
  margin-top: 0.75rem;
}

/* Closing CTA */
.gs-cta-section {
  padding: 96px 0 112px;
  border-top: 1px solid rgba(57, 65, 86, 0.2);
  background-color: #0D1627;
}

.gs-cta-glow {
  background: radial-gradient(circle at 50% 50%, rgba(30, 95, 255, 0.10) 0%, rgba(10, 18, 36, 0) 70%);
}

.gs-cta-btn {
  min-width: 260px;
  box-shadow: 0 0 20px rgba(30, 95, 255, 0.25);
}

/* Scroll reveal */
.gs-scroll-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.gs-scroll-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

.gs-reveal-delay-1 {
  transition-delay: 0.15s;
}

.gs-reveal-delay-2 {
  transition-delay: 0.30s;
}

.gs-reveal-delay-3 {
  transition-delay: 0.45s;
}

/* Responsive */
@media (min-width: 640px) {
  .standard-btn {
    min-height: 56px;
    padding: 0 2rem;
    font-size: 1rem;
  }
}

@media (max-width: 1536px) {
  .get-started-hero {
    background-image: url('../images/hero/getstarted-1920.webp');
  }
}

@media (max-width: 1024px) {
  .get-started-hero {
    background-position: 80% top;
  }
}

@media (max-width: 767px) {
  .get-started-hero {
    background-image: url('../images/hero/getstarted-1280.webp');
    background-position: 61% top;
  }

  .gs-section {
    padding: 72px 0 64px;
  }

  .gs-section-intro {
    margin-bottom: 3rem;
    gap: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .gs-scroll-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .standard-btn,
  .submit-button,
  .info-card,
  .faq-card {
    transition: none;
  }
}
/* get-started.css — Veloryn Get Started page styles */

/* ── Scroll reveal ── */
.gs-scroll-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.gs-scroll-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

.gs-reveal-delay-1 { transition-delay: 0.15s; }
.gs-reveal-delay-2 { transition-delay: 0.30s; }
.gs-reveal-delay-3 { transition-delay: 0.45s; }

/* ── Closing CTA section ── */
.gs-cta-section {
  padding: 96px 0 112px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background-color: #0D1627;
}

.gs-cta-glow {
  background: radial-gradient(circle at 50% 50%, rgba(30, 95, 255, 0.10) 0%, rgba(10, 18, 36, 0) 70%);
}

/* ── Eyebrow / section labels (colours applied inline) ── */

/* ── Buttons ── */
.standard-btn {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 0 1.25rem;
  border-radius: 5px;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  transition: background-color 200ms ease, border-color 200ms ease, transform 200ms ease;
}

.standard-btn-primary {
  background-color: #1E5FFF;
  color: #F5F7FF;
  box-shadow: 0 12px 24px rgba(30, 95, 255, 0.18);
}

.standard-btn-primary:hover {
  background-color: #4AA3FF;
  transform: scale(1.03);
}

.standard-btn-outline {
  border: 1.5px solid #394156;
  background: transparent;
  color: #F5F7FF;
}

.standard-btn-outline:hover {
  border-color: rgba(255, 255, 255, 0.5);
  background-color: rgba(255, 255, 255, 0.05);
}

@media (min-width: 640px) {
  .standard-btn {
    min-height: 56px;
    padding: 0 2rem;
    font-size: 1rem;
  }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .gs-scroll-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .standard-btn {
    transition: none;
  }
}


/* ── Base / typography ── */
body {
  background-color: #0A1224;
  color: #F5F7FF;
  font-family: 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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


/* ── Legal / privacy link ── */
.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;
}


/* ── Good to Know: phase-char matrix animation ── */
.phase-char {
  display: inline-block;
}


/* ── FAQ accordion ── */
.faq-answer {
  display: none;
}



.faq-toggle {
  color: #19dece;
  transition: all 0.2s ease;
  font-size: 22px;
}

.faq-card:hover .faq-toggle {
  filter: drop-shadow(0 0 6px rgba(25, 222, 206, 0.5));
}

.icon-plus  { display: inline; }
.icon-minus { display: none;   }

.faq-card.active .icon-plus  { display: none;   }
.faq-card.active .icon-minus { display: inline; }


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

.contact-field-error[style*="block"] {
  display: block !important;
}

/* Red border — use outline + border so it wins regardless of Tailwind's CSS vars */
.contact-field-invalid,
input.contact-field-invalid,
textarea.contact-field-invalid,
select.contact-field-invalid {
  border-color: #FF6B6B !important;
  --tw-border-opacity: 1 !important;
  outline: 1.5px solid #FF6B6B !important;
  outline-offset: -1px;
}

.contact-field-invalid:focus,
input.contact-field-invalid:focus,
textarea.contact-field-invalid:focus,
select.contact-field-invalid:focus {
  border-color: #FF6B6B !important;
  --tw-ring-color: rgba(255, 107, 107, 0.45) !important;
  box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.25) !important;
  outline: 1.5px solid #FF6B6B !important;
  outline-offset: -1px;
}

.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;
}