/*
 * vanlo-ui components + sections. Requires tokens.css.
 * Every section in sections/home.html uses only these classes.
 */

* { box-sizing: border-box; margin: 0; }
body { background: var(--vanlo-white); color: var(--vanlo-ink); font-family: var(--vanlo-font); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* =========================================================
   LAYOUT
   ========================================================= */
.v-section { padding: var(--vanlo-section-y) var(--vanlo-gutter); background: var(--vanlo-white); }
.v-section--paper { background: var(--vanlo-paper); }
.v-section--flush-top { padding-top: 0; }                 /* a section that continues the one above on the same background */
.v-wrap { width: 100%; max-width: var(--vanlo-max); margin: 0 auto; }

/* Section header, split: title block left, intro (+ text link) right, bottom-aligned */
.v-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; margin-bottom: var(--vanlo-head-gap); }
.v-head__title { display: flex; flex-direction: column; gap: 12px; }
.v-head__title h2 { max-width: 480px; }
.v-head__side { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; max-width: 390px; color: var(--vanlo-body); }
/* Section header, centered */
.v-head--center { flex-direction: column; align-items: center; text-align: center; gap: 12px; }
.v-head--center h2 { max-width: 600px; }

/* =========================================================
   ATOMS
   ========================================================= */
/* Eyebrow: "+" then 18px Light label. Dark by default, white on photos. */
.v-eyebrow { display: inline-flex; align-items: center; gap: 12px; }
.v-eyebrow::before {
  content: ""; width: 12px; height: 12px; flex: none;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 1.3px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.3px 100% no-repeat;
}

/* Primary button: red pill + white arrow */
.v-btn {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--vanlo-red); color: #fff; border-radius: var(--vanlo-pill);
  padding: 10px 20px;
  transition: background-color 150ms var(--vanlo-ease), scale 150ms var(--vanlo-ease);
}
.v-btn--sm { padding: 8px 20px; }
.v-btn img { width: 16px; height: 16px; transition: translate 150ms var(--vanlo-ease); }
.v-btn:hover { background: var(--vanlo-red-hover); }
.v-btn:active { scale: .96; }

/* Text link: ink label + dark arrow, no background ("View All Services →") */
.v-link { display: inline-flex; align-items: center; gap: 12px; color: var(--vanlo-ink); }
.v-link img { width: 16px; height: 16px; transition: translate 150ms var(--vanlo-ease); }

@media (hover: hover) and (pointer: fine) {
  .v-btn:hover img, .v-link:hover img { translate: 3px 0; }
}
.v-btn:focus-visible, .v-link:focus-visible, .v-nav a:focus-visible, .v-faq summary:focus-visible, .v-play:focus-visible {
  outline: 2px solid currentColor; outline-offset: 3px;
}

/* Photo: 12px radius, cover */
.v-photo { border-radius: var(--vanlo-radius); overflow: hidden; background: var(--vanlo-sand); }
.v-photo img { width: 100%; height: 100%; object-fit: cover; }

/* White card on paper background */
.v-card { background: var(--vanlo-white); border-radius: var(--vanlo-radius); }

/* =========================================================
   NAV: white floating pill
   ========================================================= */
.v-nav {
  position: relative; z-index: 2; width: 100%; max-width: var(--vanlo-max); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  background: #fff; border-radius: var(--vanlo-pill); padding: 8px 8px 8px 20px;
}
.v-nav__left { display: flex; align-items: center; gap: 32px; }
.v-logo { display: flex; align-items: flex-start; gap: 1px; }
.v-logo span { display: block; line-height: 1; padding-top: 6px; }   /* trims Anek's tall line box */
.v-logo img { margin-top: 4px; }
.v-nav__divider { width: 1px; height: 14px; background: var(--vanlo-sand); }
.v-nav__links { display: flex; gap: 32px; list-style: none; padding: 0; }
.v-nav__links a { color: var(--vanlo-body); transition: color 150ms var(--vanlo-ease); }
.v-nav__links a:hover { color: var(--vanlo-ink); }

/* =========================================================
   01 HERO: full-bleed photo/video, content pinned bottom
   ========================================================= */
.v-hero {
  position: relative; min-height: max(640px, 100svh); overflow: hidden; color: #fff;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 20px var(--vanlo-gutter) 128px;
}
.v-hero__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.v-hero__scrim { position: absolute; inset: auto 0 0 0; height: 83%; background: var(--vanlo-scrim); }
.v-hero__content {
  position: relative; z-index: 1; width: 100%; max-width: var(--vanlo-max); margin: 0 auto;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 48px;
}
.v-hero__title { display: flex; flex-direction: column; gap: 12px; max-width: 575px; }
.v-hero__side { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; max-width: 451px; }

/* =========================================================
   02 BRANDS: label + infinite logo ticker with faded edges
   ========================================================= */
.v-brands { padding: 96px var(--vanlo-gutter); background: var(--vanlo-paper); }
.v-brands .v-wrap { display: flex; align-items: center; gap: 96px; }
.v-brands__label { width: 274px; flex: none; }
.v-ticker {
  flex: 1; min-width: 0; overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0, #000 147px, #000 calc(100% - 147px), transparent 100%);
}
.v-ticker__track { display: flex; width: max-content; animation: v-ticker 40s linear infinite; }
.v-ticker__set { display: flex; align-items: center; gap: 116px; padding-right: 116px; }
.v-ticker__set > * { flex: none; font-size: 20px; line-height: 1; font-weight: 600; letter-spacing: -1.2px; color: var(--vanlo-ink); white-space: nowrap; }
.v-ticker:hover .v-ticker__track { animation-play-state: paused; }
@keyframes v-ticker { to { transform: translateX(-50%); } }

/* =========================================================
   03 STATS: four white cards on paper
   ========================================================= */
.v-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--vanlo-card-gap); }
.v-stat { display: flex; flex-direction: column; gap: 12px; padding: 40px; }
.v-stat p { color: var(--vanlo-body); }

/* =========================================================
   04 ABOUT: centered manifesto, vertical rule, 3 red icon tiles
   ========================================================= */
.v-about { display: flex; flex-direction: column; align-items: center; gap: 52px; text-align: center; }
.v-about__text { max-width: 1066px; }
.v-about__rule { width: 1px; height: 57px; background: var(--vanlo-sand); }
.v-about__pillars { display: flex; justify-content: center; gap: 76px; flex-wrap: wrap; }
.v-pillar { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.v-icon-tile { display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--vanlo-radius); background: var(--vanlo-red); color: #fff; }
.v-icon-tile svg { width: 28px; height: 28px; }

/* =========================================================
   05 SERVICES: 3 tall photo cards + title/description
   ========================================================= */
.v-services { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--vanlo-card-gap); }
.v-service { display: flex; flex-direction: column; gap: 24px; }
.v-service .v-photo { aspect-ratio: 491 / 495; }
.v-service .v-photo img { transition: scale 600ms var(--vanlo-ease); }
.v-service:hover .v-photo img { scale: 1.03; }
.v-service__text { display: flex; flex-direction: column; gap: 8px; max-width: 380px; }
.v-service__text p { color: var(--vanlo-body); }

/* =========================================================
   06 NETWORK: centered header, dotted world map, centered CTA
   ========================================================= */
.v-network { display: flex; flex-direction: column; align-items: center; }
.v-network__map { width: 100%; margin-bottom: calc(-123 / 1504 * 100%); }   /* map overhangs its 630px box in Figma */
.v-network__cta { display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; margin-top: var(--vanlo-head-gap); }
.v-network__cta p { max-width: 458px; color: var(--vanlo-body); }

/* =========================================================
   07 HOW IT WORKS: big video + 3 step cards
   ========================================================= */
.v-video { position: relative; aspect-ratio: 1504 / 786; margin-bottom: var(--vanlo-card-gap); }
.v-play {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: 68px; height: 68px; border: 0; padding: 0; background: none; cursor: pointer; border-radius: 50%;
  transition: scale 150ms var(--vanlo-ease);
}
.v-play:hover { scale: 1.06; }
.v-play:active { scale: .96; }
.v-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--vanlo-card-gap); }
.v-step { display: flex; flex-direction: column; gap: 112px; padding: 32px 80px 32px 32px; }
.v-step__text { display: flex; flex-direction: column; gap: 10px; }
.v-step__text p { color: var(--vanlo-body); }

/* =========================================================
   08 WHY US: text column + 2 features left, big photo right
   ========================================================= */
.v-why { display: flex; justify-content: space-between; align-items: stretch; gap: 48px; }
.v-why__text { display: flex; flex-direction: column; justify-content: space-between; gap: 64px; width: 493px; flex: none; }
.v-why__intro { display: flex; flex-direction: column; gap: 16px; }
.v-why__intro > p { max-width: 260px; color: var(--vanlo-body); }
.v-why__features { display: flex; gap: 52px; }
.v-feature { display: flex; flex-direction: column; gap: 24px; }
.v-feature svg, .v-feature img { width: 28px; height: 28px; color: var(--vanlo-ink); }
.v-feature__text { display: flex; flex-direction: column; gap: 6px; }
.v-feature__text p { color: var(--vanlo-body); max-width: 238px; }
.v-why .v-photo { flex: 0 1 871px; aspect-ratio: 871 / 617; }

/* =========================================================
   09 TESTIMONIALS: photo + 2 quote cards, equal height
   ========================================================= */
.v-reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--vanlo-card-gap); }
.v-reviews > * { min-height: 544px; }
.v-review { display: flex; flex-direction: column; justify-content: space-between; gap: 48px; padding: 32px; }
.v-person { display: flex; align-items: center; gap: 16px; }
.v-person img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.v-person span { display: block; color: var(--vanlo-body); }

/* =========================================================
   10 FAQ: header left, accordion of paper rows right
   ========================================================= */
.v-faq-wrap { display: flex; justify-content: space-between; align-items: flex-start; gap: 48px; }
.v-faq-wrap .v-head__title h2 { max-width: 376px; }
.v-faq-wrap .v-head__title + p { max-width: 281px; color: var(--vanlo-body); margin-top: 16px; }
.v-faq-list { display: flex; flex-direction: column; gap: 8px; width: 804px; flex: 0 1 804px; }
.v-faq { background: var(--vanlo-paper); border-radius: var(--vanlo-radius); padding: 26px 30px; }
.v-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; cursor: pointer; list-style: none; }
.v-faq summary::-webkit-details-marker { display: none; }
.v-faq summary img { width: 14px; height: 14px; flex: none; transition: rotate 200ms var(--vanlo-ease); }
.v-faq[open] summary img { rotate: 45deg; }
.v-faq__answer { padding-top: 12px; color: var(--vanlo-body); max-width: 640px; }

/* =========================================================
   11 BLOG: split header, 2 large post cards
   ========================================================= */
.v-posts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--vanlo-card-gap); }
.v-post { display: flex; flex-direction: column; gap: 40px; }
.v-post .v-photo { aspect-ratio: 744 / 445; }
.v-post .v-photo img { transition: scale 600ms var(--vanlo-ease); }
.v-post:hover .v-photo img { scale: 1.03; }
.v-post__text { display: flex; flex-direction: column; gap: 16px; }
.v-post__meta { display: flex; align-items: center; gap: 12px; color: var(--vanlo-body); }
.v-post__meta i { width: 3px; height: 3px; border-radius: 50%; background: var(--vanlo-body); }

/* =========================================================
   12 CTA + FOOTER: one dark block over a faded photo
   ========================================================= */
.v-cta-footer { position: relative; overflow: hidden; color: #fff; background: var(--vanlo-ink); padding: 152px var(--vanlo-gutter) 112px; }
.v-cta-footer__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.v-cta-footer__scrim { position: absolute; inset: 0; background: var(--vanlo-scrim-footer); }
.v-cta-footer .v-wrap { position: relative; display: flex; flex-direction: column; gap: 128px; }
.v-cta { display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; }
.v-cta__title { display: flex; flex-direction: column; gap: 12px; }
.v-cta__title h2 { max-width: 470px; }
.v-cta__side { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; max-width: 308px; }
.v-rule-light { height: 1px; background: rgba(255,255,255,.24); }
.v-footer { display: flex; flex-direction: column; gap: 104px; }
.v-footer__top { display: flex; justify-content: space-between; gap: 48px; }
.v-footer__brand { display: flex; flex-direction: column; justify-content: space-between; gap: 48px; }
.v-footer__brand .v-logo span { font-size: 67px; color: #fff; padding-top: 12px; }
.v-footer__brand .v-logo img { width: 21px; height: 21px; margin-top: 8px; }
.v-footer__brand p, .v-footer__legal { color: var(--vanlo-sand); opacity: .7; max-width: 440px; }
.v-footer__cols { display: flex; justify-content: space-between; width: 432px; padding-right: 32px; }
.v-footer__col { display: flex; flex-direction: column; gap: 28px; }
.v-footer__col h3 { font: inherit; opacity: .6; }
.v-footer__col ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.v-footer__col a { transition: opacity 150ms var(--vanlo-ease); }
.v-footer__col a:hover { opacity: .7; }
.v-footer__bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; }
.v-footer__legal { max-width: 1052px; }
.v-socials { display: flex; gap: 16px; }
.v-socials img { width: 20px; height: 20px; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1100px) {
  .v-stats { grid-template-columns: repeat(2, 1fr); }
  .v-services, .v-steps, .v-reviews { grid-template-columns: 1fr 1fr; }
  .v-reviews > :first-child { grid-column: 1 / -1; min-height: 420px; }
  .v-step { padding-right: 32px; gap: 72px; }
  .v-why { flex-direction: column; }
  .v-why__text { width: auto; }
  .v-why .v-photo { flex: none; }
  .v-faq-wrap { flex-direction: column; }
  .v-faq-list { width: 100%; flex: none; }
  .v-footer__top { flex-direction: column; }
}
@media (max-width: 860px) {
  .v-nav__links, .v-nav__divider { display: none; }
  .v-hero { padding-bottom: 48px; }
  .v-hero__content, .v-head, .v-cta, .v-footer__bottom { flex-direction: column; align-items: flex-start; }
  .v-head--center { align-items: center; }
  .v-brands .v-wrap { flex-direction: column; align-items: flex-start; gap: 40px; }
  .v-ticker { width: 100%; mask-image: linear-gradient(90deg, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%); }
  .v-ticker__set { gap: 56px; padding-right: 56px; }
  .v-services, .v-steps, .v-reviews, .v-posts { grid-template-columns: 1fr; }
  .v-reviews > * { min-height: 0; }
  .v-reviews > :first-child { min-height: 320px; }
  .v-about__pillars { gap: 40px; }
  .v-cta-footer { padding-top: 120px; padding-bottom: 64px; }
  .v-cta-footer .v-wrap { gap: 72px; }
  .v-footer { gap: 56px; }
}
@media (max-width: 640px) {
  .v-stats { grid-template-columns: 1fr; }
  .v-stat { padding: 28px; }
  .v-why__features { flex-direction: column; gap: 32px; }
  .v-faq { padding: 20px; }
  .v-footer__cols { width: 100%; padding-right: 0; }
  .v-footer__brand .v-logo span { font-size: 48px; }
}