/* ==========================================================================
   VIJAY GLOBAL EXPORTS — Home Page
   ========================================================================== */

/* ---- Hero ---- */
.hero {
  position: relative;
  background: linear-gradient(155deg, var(--color-blue-dark) 0%, var(--color-blue-deep) 55%, #2382B8 100%);
  color: var(--color-white);
  overflow: hidden;
  min-height: calc(100vh - 110px);
  padding-block: 0rem 0;
  display: flex;
  align-items: center;
}

.hero__texture {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 85% 18%, rgba(244,121,32,0.22), transparent 45%),
    radial-gradient(circle at 8% 82%, rgba(212,162,76,0.16), transparent 40%);
  pointer-events: none;
}

.hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 2rem;
  align-items: center;
  padding-bottom: 0.5rem;
}
@keyframes drift {
  from { background-position: 0 0; }
  to { background-position: 220px 180px; }
}

.hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--space-lg);
  align-items: center;
  padding-bottom: var(--space-2xl);
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-sm);
}
.hero__eyebrow::before {
  content: "";
  width: 22px; height: 2px;
  background: var(--color-orange);
  border-radius: 2px;
}

.hero h1 {
  color: var(--color-white);
  font-size: clamp(2.4rem, 3vw, 3.8rem);
  line-height: 1.1;
  max-width: 14ch;
}
.hero h1 .accent { color: var(--color-orange); position: relative; }

.hero__lead {
  margin-top: 0.6rem;
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.82);
  max-width: 48ch;
}

.hero__cta-row {
  display: flex;
  gap: 0.8rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}

.hero__trust {
  display: flex;
  gap: 1.5rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}
.hero__trust .stat__num,
.hero__trust .stat__label { color: var(--color-white); }
.hero__trust .stat { text-align: left; }
.hero__trust .stat__num { color: var(--color-white); }
.hero__trust .stat__num .unit { color: var(--color-orange); }
.hero__trust .stat__label { color: rgba(255,255,255,0.68); }

/* ---- Hero visual: layered spice crates / sack illustration ---- */
.hero__visual {
  position: relative;
  z-index: 1;
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero__orb {
  position: absolute;
  width: 36%; height: 46%;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 28%, rgba(255,255,255,0.16), rgba(255,255,255,0) 60%);
  border: 1px solid rgba(255,255,255,0.18);
  animation: pulse-ring 4.5s var(--ease-soft) infinite;
}
@keyframes pulse-ring {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50% { transform: scale(1.035); opacity: 1; }
}
.hero__card {
  position: relative;
  z-index: 2;
  background: rgba(255,255,255,0.97);
  border-radius: var(--radius-lg);
  padding: 0.9rem;
  width: min(320px, 80%);
  box-shadow: var(--shadow-lg);
  color: var(--color-ink);
  animation: float-card 6s ease-in-out infinite;
}
@keyframes float-card {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-14px); }
}
.hero__card-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding-block: 0.7rem;
  border-bottom: 1px solid var(--color-line);
}
.hero__card-row:last-child { border-bottom: none; }
.hero__card-row .swatch {
  width: 42px; height: 42px;
  border-radius: 12px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
}
.hero__card-row strong { display: block; font-size: 0.94rem; color: var(--color-blue-dark); }
.hero__card-row span { font-size: 0.8rem; color: var(--color-ink-soft); }
.hero__card-badge {
  position: absolute;
  top: -18px; right: -18px;
  background: var(--color-orange);
  color: var(--color-white);
  border-radius: 50%;
  width: 76px; height: 76px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  box-shadow: var(--shadow-orange);
  animation: spin-slow 18s linear infinite;
  text-align: center;
  line-height: 1.05;
}
.hero__card-badge span { font-size: 0.55rem; letter-spacing: 0.06em; text-transform: uppercase; font-family: var(--font-body); font-weight: 700; }
.hero__card-badge strong { font-size: 1.25rem; }

/* ---- Marquee strip ---- */
.marquee {
  background: var(--color-orange);
  color: var(--color-white);
  overflow: hidden;
  white-space: nowrap;
  padding-block: 0.4rem;
}
.marquee__track {
  display: inline-flex;
  animation: marquee 28s linear infinite;
  gap: 3rem;
}
.marquee__track span {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.marquee__track span::after { content: "•"; opacity: 0.6; margin-left: 3rem; }
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---- Category grid ---- */
.category-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-sm);
}
.cat-card {
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: var(--space-sm);
  text-align: center;
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med), border-color var(--dur-fast);
}
.cat-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: transparent; }
.cat-card__icon {
  width: 58px; height: 58px;
  margin-inline: auto;
  border-radius: 50%;
  background: var(--color-cream-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
  margin-bottom: var(--space-xs);
  transition: background var(--dur-fast);
}
.cat-card:hover .cat-card__icon { background: var(--color-orange); }
.cat-card h3 { font-size: 1rem; color: var(--color-blue-dark); }
.cat-card p { font-size: 0.82rem; color: var(--color-ink-soft); margin-top: 0.25rem; }

/* ---- Why us preview strip ---- */
.feature-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

/* ---- Route / journey signature element ---- */
.route-section { position: relative; overflow: hidden; }
.route-line {
  position: relative;
  margin-top: var(--space-xl);
  height: 3px;
  background: var(--color-line);
  border-radius: 3px;
}
.route-line__fill {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--color-orange), var(--color-gold));
  border-radius: 3px;
  transition: width 1.4s var(--ease-out);
}
.route-line.is-visible .route-line__fill { width: 100%; }
.route-points {
  display: flex;
  justify-content: space-between;
  margin-top: -10px;
}
.route-point {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--color-white);
  border: 3px solid var(--color-orange);
  position: relative;
}
.route-points-labels {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-xs);
}
.route-points-labels span {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-blue-dark);
  text-align: center;
  max-width: 90px;
}

/* ---- CTA band ---- */
.cta-band {
  position: relative;
  background: linear-gradient(135deg, var(--color-orange) 0%, var(--color-orange-dark) 100%);
  color: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-lg) var(--space-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  overflow: hidden;
  flex-wrap: wrap;
}
.cta-band::before {
  content: "";
  position: absolute;
  right: -40px; top: -40px;
  width: 220px; height: 220px;
  border-radius: 50%;
  border: 30px solid rgba(255,255,255,0.12);
}
.cta-band h2 { color: var(--color-white); font-size: var(--fs-h3); max-width: 26ch; }
.cta-band p { color: rgba(255,255,255,0.86); margin-top: 0.4rem; }
.cta-band__actions { display: flex; gap: var(--space-sm); flex-wrap: wrap; position: relative; z-index: 1; }

/* ---- Testimonial / trust strip ---- */
.testimonial-card {
  background: var(--color-white);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-line);
  padding: var(--space-md);
  position: relative;
}
.testimonial-card .quote-mark {
  font-family: var(--font-display);
  font-size: 3.2rem;
  color: var(--color-orange);
  line-height: 1;
  opacity: 0.5;
}
.testimonial-card p.quote { font-size: 1.02rem; color: var(--color-ink); margin-top: -0.6rem; }
.testimonial-card__who { display: flex; align-items: center; gap: 0.7rem; margin-top: var(--space-sm); }
.testimonial-card__avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--color-blue-deep);
  color: var(--color-white);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-family: var(--font-display);
}
.testimonial-card__who strong { display: block; font-size: 0.92rem; color: var(--color-blue-dark); }
.testimonial-card__who span { font-size: 0.8rem; color: var(--color-ink-soft); }

@media (max-width: 980px) {
  .hero__grid { grid-template-columns: 1fr; text-align: left; }
  .hero__visual { aspect-ratio: auto; margin-top: var(--space-lg); }
  .category-grid { grid-template-columns: repeat(2, 1fr); }
  .feature-row { grid-template-columns: 1fr; }
  .cta-band { flex-direction: column; text-align: center; }
  .cta-band__actions { justify-content: center; }
}
@media (max-width: 560px) {
  .category-grid { grid-template-columns: 1fr 1fr; gap: var(--space-xs); }
  .hero__trust { gap: var(--space-md); }
  .route-points-labels span { font-size: 0.72rem; max-width: 60px; }
}

/* ===============================
   Desktop Compact Layout
================================= */

@media (min-width: 1200px) {

  .section {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .section-head {
    margin-bottom: 2rem;
  }

  .section-head h2 {
    font-size: 2rem;
    line-height: 1.2;
  }

  .section-head .lead {
    font-size: 1rem;
  }

  .cat-card,
  .card,
  .testimonial-card {
    padding: 1.2rem;
  }

  .route-section {
    padding-top: 50px;
    padding-bottom: 50px;
  }

  .cta-band {
    padding: 2rem;
  }
}
/* =========================
   HERO FULL SCREEN FIX
========================= */

html,
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

main {
  margin: 0;
  padding: 0;
}

/* Remove container side gaps only in hero */
.hero .container {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding-left: 30px;
  padding-right: 30px;
}

.hero {
  margin: 0;
   min-height: 68vh; /* navbar height */
  padding: 0;
  display: flex;
  align-items: center;
}

.hero__grid {
  min-height: calc(100vh - 120px);
  padding: 0;
  margin: 0;
  align-items: center;
}

/* Remove extra bottom space */
.hero__visual,
.hero__card,
.hero__orb {
  margin-bottom: 0px;
  margin-top: 0%;
}

/* Remove trust section gap */
.hero__trust {
  margin-bottom: 0;
}

/* Marquee directly after hero */
.marquee {
  margin: 0;
  padding: 8px 0;
  line-height: 1;
}

/* Remove section gap after hero */
.hero + .marquee {
  margin-top: 0;
}

/* Fix floating orb overflow */
.hero__orb {
  width: 75%;
  height: 75%;
}

/* Compact hero card */
.hero__card {
  width: 420px;
  max-width: 100%;
}

/* Compact text */
.hero h1 {
  font-size: 1.6rem;
  line-height: 1.05;
  margin-bottom: 12px;
}

.hero__lead {
   font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 0;
}

.hero__cta-row {
  margin-top: 20px;
  margin-bottom: 0;
}
.hero__trust .stat__num {
  font-size: 1.4rem;
}

.hero__trust .stat__label {
  font-size: 0.8rem;
}
/* Desktop only */
@media (min-width: 1200px) {

  .hero {
    min-height: calc(100vh - 86px);
  }

  .hero__grid {
      min-height: 2vh;
  }

  .hero h1 {
  font-size: clamp(2.8rem, 2.8vw, 2.5rem);
  line-height: 1.1;
  }

  .hero__lead {
    font-size: 0.9rem;
    max-width: 600px;
  }
.hero__cta-row .btn {
  padding: 10px 18px;
  font-size: 0.85rem;
}
  .hero__card {
    transform: scale(0.92);
  }
}
@media (max-width: 768px) {

  .hero {
    min-height: auto;
    padding: 40px 0;
  }

  .hero__grid {
    min-height: auto;
    gap: 1.5rem;
  }

  .hero h1 {
    font-size: 2rem;
    max-width: 100%;
  }

  .hero__lead {
    font-size: 0.9rem;
  }

  .hero__card {
    width: 100%;
    max-width: 320px;
    margin: auto;
  }

  .hero__orb {
    width: 65%;
    height: 65%;
  }
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.brand__logo {
  width: 200px;
  height: 55px;
  object-fit: contain;
  display: block;
  margin-left: 0%;
}

.brand__text {
  display: flex;
  flex-direction: column;
}

.brand__name {
  font-size: 1.1rem;
  font-weight: 700;
}

.brand__sub {
  font-size: 0.75rem;
  opacity: 0.8;
}
/* ==========================================
   HOME PAGE - COMPACT TYPOGRAPHY
   ========================================== */

/* Section headings */
.section-head h2 {
  font-size: 1.8rem;
  line-height: 1.3;
}

.section-head .lead {
  font-size: 0.9rem;
  line-height: 1.6;
}

/* Hero */
.hero h1 {
  font-size: 2.5rem !important;
  line-height: 1.1;
}

.hero__lead {
  font-size: 0.9rem;
  line-height: 1.6;
}

.hero__eyebrow {
  font-size: 0.75rem;
}

/* Category Cards */
.cat-card {
  padding: 16px;
}

.cat-card h3 {
  font-size: 1rem;
  margin-bottom: 4px;
}

.cat-card p {
  font-size: 0.85rem;
  line-height: 1.5;
}

/* Feature Cards / Why Us Preview */
.feature-row .card h3,
.card h3 {
  font-size: 1rem;
}

.feature-row .card p,
.card p {
  font-size: 0.85rem;
  line-height: 1.6;
}

/* Route Section */
.route-points-labels span {
  font-size: 0.8rem;
}
@media (max-width: 768px) {
  .route-points-labels span {
    font-size: 0.65rem;
  }
}

/* Testimonial */
.testimonial-card {
  padding: 18px;
}

.testimonial-card p.quote {
  font-size: 0.9rem;
  line-height: 1.6;
}

.testimonial-card__who strong {
  font-size: 0.9rem;
}

.testimonial-card__who span {
  font-size: 0.8rem;
}

/* CTA */
.cta-band h2 {
  font-size: 1.6rem;
}

.cta-band p {
  font-size: 0.9rem;
  line-height: 1.6;
}

/* Stats */
.hero__trust .stat__num {
  font-size: 1.3rem;
}

.hero__trust .stat__label {
  font-size: 0.8rem;
}

/* Icons */
.icon-tile,
.cat-card__icon {
  width: 52px;
  height: 52px;
}

.icon-tile svg {
  width: 22px;
  height: 22px;
}
.swatch{
  width:48px;
  height:48px;
  border-radius:10px;
  overflow:hidden;
  flex-shrink:0;
}

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

.hero__card-row{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  color:inherit;
  padding:10px 0;
  transition:all .3s ease;
}

.hero__card-row:hover{
  transform:translateX(5px);
}