/* ============================================================
   VELORYX AI — RESPONSIVE.CSS
   Breakpoints: Mobile <768 | Tablet 768–1024 | Desktop >1024
   ============================================================ */

/* ============================================================
   1. LARGE DESKTOP — cap at max-width
   ============================================================ */
@media (min-width: 1440px) {
  .hero-headline {
    font-size: 4rem;
  }
}

/* ============================================================
   2. TABLET — 768px to 1024px
   ============================================================ */
@media (max-width: 1024px) {

  /* Nav */
  .nav-container {
    padding: 0 var(--sp-4);
  }

  .nav-links {
    gap: 0;
  }

  .nav-link {
    padding: 6px 9px;
    font-size: 0.8125rem;
  }

  /* Hero */
  .hero-inner {
    grid-template-columns: 1fr;
    text-align: center;
    gap: var(--sp-10);
    padding-bottom: var(--sp-8);
  }

  .hero-text-col {
    max-width: 640px;
    margin: 0 auto;
    align-items: center;
  }

  .hero-eyebrow {
    margin: 0 auto;
  }

  .hero-subheading {
    text-align: center;
  }

  .hero-actions {
    justify-content: center;
  }

  .hero-trust {
    justify-content: center;
  }

  /* Visual col — reshape for center layout */
  .hero-visual-col {
    width: 100%;
    max-width: 480px;
    height: 360px;
    margin: 0 auto;
  }

  .vis-card-main {
    width: 300px;
  }

  .vis-stat-1 {
    right: 0;
    top: 30px;
  }

  .vis-stat-2 {
    left: 0;
    bottom: 40px;
  }
}

/* ============================================================
   3. MOBILE — below 768px
   ============================================================ */
@media (max-width: 767px) {

  /* Nav */
  .nav-container {
    padding: 0 var(--sp-3);
  }

  .nav-links {
    display: none;
  }

  .btn-cta:not(.mobile-cta-btn) {
    display: none;
  }

  .hamburger {
    display: flex;
  }

  .mobile-menu {
    display: block;
  }

  /* Hero */
  .hero-section {
    padding-top: calc(var(--nav-h) + var(--sp-6));
    padding-bottom: var(--sp-10);
    padding-left: var(--sp-3);
    padding-right: var(--sp-3);
  }

  .hero-inner {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
    text-align: center;
  }

  .hero-text-col {
    align-items: center;
    gap: var(--sp-3);
  }

  .hero-headline {
    font-size: clamp(2rem, 8vw, 2.75rem);
  }

  .hero-subheading {
    font-size: 0.9375rem;
  }

  .hero-actions {
    flex-direction: column;
    width: 100%;
  }

  .hero-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .hero-trust {
    justify-content: center;
    gap: var(--sp-2);
  }

  /* Visual — compact on mobile */
  .hero-visual-col {
    height: 300px;
    max-width: 100%;
  }

  .vis-card-main {
    width: 260px;
  }

  .vis-stat-1 {
    top: 16px;
    right: 4px;
    min-width: 140px;
  }

  .vis-stat-2 {
    bottom: 20px;
    left: 4px;
    min-width: 140px;
  }

  .vis-badge-1 {
    top: 8px;
    left: 6px;
  }

  .vis-badge-2 {
    bottom: 8px;
    right: 4px;
  }

  /* Scroll indicator hidden on mobile */
  .scroll-indicator {
    display: none;
  }

}

/* ============================================================
   4. SMALL MOBILE — below 480px
   ============================================================ */
@media (max-width: 479px) {

  .hero-visual-col {
    height: 260px;
  }

  .vis-card-main {
    width: 230px;
  }

  .vis-code-lines {
    font-size: 0.6875rem;
  }

  .vis-stat-1,
  .vis-stat-2 {
    min-width: 120px;
    padding: 10px 12px;
  }

  .stat-value {
    font-size: 1.25rem;
  }

  .hero-trust {
    flex-direction: column;
    gap: 8px;
  }

  .trust-divider {
    display: none;
  }

}

/* ============================================================
   5. NAV TRANSITION — show hamburger at 768px exactly
   ============================================================ */
@media (min-width: 768px) {
  .hamburger {
    display: none;
  }

  .mobile-menu {
    display: none !important;
  }
}

/* ============================================================
   6. ABOUT SECTION RESPONSIVE
   ============================================================ */

/* Wide tablet — reduce grid gap */
@media (max-width: 1200px) {
  .about-inner {
    grid-template-columns: 1fr 380px;
    gap: var(--sp-10);
  }
}

/* Tablet — stack columns */
@media (max-width: 1024px) {
  .about-section {
    padding: var(--sp-10) 0;
  }

  .about-inner {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
    padding: 0 var(--sp-4);
  }

  .about-cards-col {
    max-width: 520px;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .about-section {
    padding: var(--sp-8) 0;
  }

  .about-inner {
    padding: 0 var(--sp-3);
    gap: var(--sp-7);
  }

  .about-heading {
    font-size: clamp(1.75rem, 7vw, 2.25rem);
  }

  .about-copy p {
    font-size: 0.9375rem;
  }

  .about-cards-col {
    max-width: 100%;
  }

  .about-pillar {
    padding: var(--sp-4) var(--sp-4);
  }

  .ap-icon-wrap {
    width: 42px;
    height: 42px;
    border-radius: 12px;
  }

  .ap-title {
    font-size: 0.9375rem;
  }

  .ap-label {
    font-size: 0.8125rem;
  }
}

/* ============================================================
   7. VISION SECTION RESPONSIVE
   ============================================================ */

/* Tablet */
@media (max-width: 1024px) {
  .vision-section {
    padding: var(--sp-10) 0;
  }

  .vision-inner {
    padding: 0 var(--sp-4);
    gap: var(--sp-10);
  }

  .vision-cards {
    gap: var(--sp-4);
  }

  .vision-card {
    padding: 2.25rem 2rem;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .vision-section {
    padding: var(--sp-8) 0;
  }

  .vision-inner {
    padding: 0 var(--sp-3);
    gap: var(--sp-8);
  }

  .vision-heading {
    font-size: clamp(1.75rem, 7vw, 2.375rem);
  }

  .vision-subheading {
    font-size: 0.9375rem;
  }

  .vision-cards {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }

  .vision-card {
    padding: 2rem 1.75rem;
  }

  .vc-title {
    font-size: 1.125rem;
  }

  .vc-icon-wrap {
    width: 44px;
    height: 44px;
    margin-bottom: 1.25rem;
  }
}



/* ============================================================
   8. SERVICES SECTION RESPONSIVE
   ============================================================ */

/* Tablet */
@media (max-width: 1024px) {
  .services-section {
    padding: var(--sp-10) var(--sp-4);
  }

  .services-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-3);
  }

  .services-heading {
    font-size: clamp(1.875rem, 4vw, 2.5rem);
  }
}

/* Mobile */
@media (max-width: 767px) {
  .services-section {
    padding: var(--sp-8) var(--sp-3);
  }

  .services-grid {
    grid-template-columns: 1fr;
  }

  .services-heading {
    font-size: clamp(1.75rem, 7vw, 2.25rem);
  }

  .svc-card {
    padding: var(--sp-4) var(--sp-3);
  }

  .svc-title {
    font-size: 1rem;
  }

  .services-cta {
    padding: var(--sp-5) var(--sp-4);
  }
}

/* ============================================================
   9. WHY VELORYX SECTION RESPONSIVE
   ============================================================ */

/* Tablet */
@media (max-width: 1024px) {
  .why-section {
    padding: var(--sp-10) var(--sp-4);
  }

  .why-inner {
    grid-template-columns: 1fr;
    gap: var(--sp-10);
  }

  .why-visual {
    position: relative;
    top: auto;
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .why-subheading {
    max-width: 100%;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .why-section {
    padding: var(--sp-8) var(--sp-3);
  }

  .why-heading {
    font-size: clamp(1.75rem, 7vw, 2.25rem);
  }

  .wd-body {
    padding: 16px 16px 16px 18px;
  }

  .wd-title {
    font-size: 0.9rem;
  }

  .why-visual {
    display: none;
  }
}

/* ============================================================
   10. VALUES SECTION RESPONSIVE
   ============================================================ */

/* Tablet */
@media (max-width: 1024px) {
  .values-section {
    padding: var(--sp-10) var(--sp-4);
  }

  .values-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-3);
  }

  .values-heading {
    font-size: clamp(1.875rem, 4vw, 2.5rem);
  }
}

/* Mobile */
@media (max-width: 767px) {
  .values-section {
    padding: var(--sp-8) var(--sp-3);
  }

  .values-grid {
    grid-template-columns: 1fr;
  }

  .values-heading {
    font-size: clamp(1.75rem, 7vw, 2.25rem);
  }

  .val-card {
    padding: var(--sp-4) var(--sp-3);
  }

  .val-title {
    font-size: 1rem;
  }
}

/* ============================================================
   11. PROCESS SECTION RESPONSIVE
   ============================================================ */

/* Large tablet */
@media (max-width: 1024px) {
  .process-inner {
    padding: 0 var(--sp-4);
  }

  .process-heading {
    font-size: clamp(1.875rem, 4vw, 2.5rem);
  }

  .ps-card {
    padding: var(--sp-4) var(--sp-3);
  }

  .ps-title {
    font-size: 0.925rem;
  }

  .ps-body {
    font-size: 0.82rem;
  }
}

/* Mobile — vertical stepper */
@media (max-width: 767px) {
  .process-section {
    padding: var(--sp-8) 0;
  }

  .process-inner {
    padding: 0 var(--sp-4);
  }

  .process-heading {
    font-size: clamp(1.75rem, 7vw, 2.125rem);
  }

  .process-header {
    margin-bottom: var(--sp-8);
  }

  /* Vertical timeline */
  .process-timeline {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  /* Vertical connecting line */
  .process-line {
    top: 26px;
    left: 26px;
    right: auto;
    width: 1px;
    height: calc(100% - 52px);
    background: rgba(255, 255, 255, 0.07);
  }

  .process-line-fill {
    width: 1px;
    height: 0%;
    background: linear-gradient(180deg, #8B5CF6 0%, #C084FC 50%, #EC4899 100%);
    transition: height 1.4s cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
  }

  .process-section.in-view .process-line-fill {
    width: 1px;
    height: 100%;
  }

  /* Each step: badge left, card right */
  .process-step {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--sp-4);
    padding: 0;
    margin-bottom: var(--sp-5);
  }

  .process-step:last-child {
    margin-bottom: 0;
  }

  .ps-number-wrap {
    flex-shrink: 0;
  }

  .ps-card {
    text-align: left;
    flex: 1;
  }

  .ps-card-top-border {
    left: 12px;
    right: 12px;
  }
}

/* Small mobile */
@media (max-width: 400px) {
  .ps-number,
  .ps-number-wrap {
    width: 44px;
    height: 44px;
  }

  .ps-number {
    font-size: 0.65rem;
  }
}

/* ============================================================
   12. INDUSTRIES SECTION RESPONSIVE
   ============================================================ */

/* Large tablet — 3 columns */
@media (max-width: 1100px) {
  .industries-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Tablet — 2 columns */
@media (max-width: 768px) {
  .industries-section {
    padding: var(--sp-10) 0;
  }

  .industries-inner {
    padding: 0 var(--sp-4);
  }

  .industries-heading {
    font-size: clamp(1.875rem, 5.5vw, 2.375rem);
  }

  .industries-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-2);
  }

  .ind-tile {
    padding: var(--sp-4) var(--sp-3);
    gap: var(--sp-2);
  }

  .ind-icon-wrap {
    width: 44px;
    height: 44px;
    border-radius: 12px;
  }
}

/* Mobile — 2 columns stacked */
@media (max-width: 480px) {
  .industries-section {
    padding: var(--sp-8) 0;
  }

  .industries-header {
    margin-bottom: var(--sp-6);
  }

  .industries-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-2);
  }

  .ind-tile {
    padding: var(--sp-3);
    border-radius: 14px;
    gap: var(--sp-2);
  }

  .ind-icon-wrap {
    width: 40px;
    height: 40px;
    border-radius: 10px;
  }

  .ind-icon-wrap svg {
    width: 18px;
    height: 18px;
  }

  .ind-title {
    font-size: 0.8rem;
  }
}

/* ============================================================
   13. CTA SECTION RESPONSIVE
   ============================================================ */

@media (max-width: 1024px) {
  .cta-panel {
    padding: var(--sp-8) var(--sp-7);
  }
}

@media (max-width: 767px) {
  .cta-section {
    padding: var(--sp-10) var(--sp-4);
  }

  .cta-panel {
    padding: var(--sp-7) var(--sp-5);
    border-radius: 18px;
  }

  .cta-heading {
    font-size: clamp(1.875rem, 7vw, 2.5rem);
  }

  .cta-body {
    font-size: 0.9375rem;
  }
}

/* ============================================================
   14. CONTACT SECTION RESPONSIVE
   ============================================================ */

@media (max-width: 1024px) {
  .contact-body {
    grid-template-columns: 1fr;
    gap: var(--sp-5);
  }

  .contact-info-col {
    order: -1;
  }

  .contact-info-card {
    padding: var(--sp-5);
  }

  .cic-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-4);
  }
}

@media (max-width: 767px) {
  .contact-section {
    padding: var(--sp-8) 0;
  }

  .contact-inner {
    padding: 0 var(--sp-4);
  }

  .contact-heading {
    font-size: clamp(1.875rem, 6vw, 2.375rem);
  }

  .contact-subheading {
    font-size: 0.9375rem;
  }

  .contact-form-card {
    padding: 1.75rem 1.375rem 1.5rem;
    border-radius: 18px;
  }

  .cf-row-2 {
    flex-direction: column;
    gap: 1.25rem;
  }

  .cic-list {
    grid-template-columns: 1fr;
  }

  .contact-header {
    margin-bottom: var(--sp-7);
  }
}

/* ============================================================
   18. FOOTER RESPONSIVE
   ============================================================ */

@media (max-width: 1024px) {
  .footer-inner {
    padding: var(--sp-10) var(--sp-5) var(--sp-9);
  }
}

@media (max-width: 768px) {
  .footer-inner {
    padding: var(--sp-9) var(--sp-4) var(--sp-8);
  }

  .footer-tagline {
    font-size: 0.9rem;
    margin-bottom: var(--sp-6);
  }

  .footer-link {
    font-size: 0.85rem;
    padding: 6px 9px;
  }

  .footer-link:hover::after {
    left: 9px;
    right: 9px;
  }
}

@media (max-width: 480px) {
  .footer-logo-v,
  .footer-logo-eloryx {
    font-size: 1.25rem;
  }

  .footer-nav {
    gap: var(--sp-1);
    margin-bottom: var(--sp-6);
  }

  .footer-nav-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-items: center;
    width: 100%;
    gap: 0;
  }

  /* Hide pipe separators in 2-col grid mode */
  .footer-nav-row li + li::before {
    display: none;
  }

  .footer-link {
    padding: 7px 8px;
    width: 100%;
    text-align: center;
  }

  .footer-link::after {
    left: 50%;
    right: 50%;
  }

  .footer-link:hover::after {
    left: 8px;
    right: 8px;
  }

  .footer-rule {
    max-width: 100%;
  }
}