/*
 * NEXTCAR FLEET — Rólunk (R1–R6) oldalspecifikus stíluslap (ND11).
 *
 * Hatókör: kizárólag a /rolunk/ oldal (.ro-main / .ro-page).
 * Közös alap: tokens.css -> styles.css -> header.css -> footer.css -> subpages.css -> nc-motion.css.
 * Szabályok:
 *   - 0 elem kap opacity: 0 kezdőállapotot CSS-ben (no-JS és CDN-hiba mellett is 100% látható).
 *   - Egységes 14px (--nc-card-radius) kártya- és fotókeret-geometria.
 *   - Egységes 10px (--nc-btn-precision-radius) elsődleges és másodlagos CTA-geometria.
 *   - Közös fejléc (.nc-header), lábléc (.site-footer) és főoldal érintetlen.
 */

.ro-main {
  display: block;
  inline-size: 100%;
  margin: 0;
  padding: 0;
}

.ro-page {
  --ro-hero-bg: var(--nc-color-surface-dark, #0a2032);
  --ro-hero-fg: #ffffff;
  --ro-hero-muted: #cbd7e3;
  --ro-hero-accent: var(--nc-color-accent-on-dark, #93c5fd);
  --ro-surface: #ffffff;
  --ro-surface-soft: var(--nc-color-gray-50, #f3f5f7);
  --ro-surface-raised: #f8fafc;
  --ro-ink: #17212b;
  --ro-copy: #33404d;
  --ro-muted: #52606d;
  --ro-edge: var(--nc-card-edge, rgb(80 115 145 / 0.2));
  --ro-edge-strong: rgb(80 115 145 / 0.32);
  --ro-edge-hover: var(
    --nc-card-edge-hover,
    color-mix(in oklab, var(--nc-color-blue-500, #0074ca) 38%, rgb(80 115 145 / 0.22))
  );
  --ro-radius-card: var(--nc-card-radius, 0.875rem);          /* 14px */
  --ro-radius-control: var(--nc-btn-precision-radius, 0.625rem); /* 10px */
  --ro-ease: var(--nc-ease-precision, cubic-bezier(0.2, 0.7, 0.2, 1));
}

/* A subpages.css korábbi kísérleti belépőinek kikapcsolása */
.ro-page .ns-hero.is-ns-ready .ns-hero__copy,
.ro-page .ns-hero.is-ns-ready .ns-hero__media,
.ro-page [data-ns-reveal].is-ns-visible,
.ro-page :is(ol.ns-steps.is-ns-visible, .ns-steps.is-ns-visible > ol) > li::after {
  animation: none;
}

/* ---------- 0. Horgonyok scroll-margin igazítása a ragadós fejléc alá ---------- */
#rolunk-attekintes,
#alapito,
#rolunk-munkamod,
#rolunk-folyamat,
#rolunk-mukodes,
#ajanlatkeres {
  scroll-margin-block-start: calc(var(--nc-header-reserved, var(--nc-header-measured, 4.75rem)) + 1.25rem);
}

/* ---------- 1. Előnézeti jelzősáv ---------- */
.ro-preview {
  padding-block: 0.75rem;
  border-block-end: 1px solid rgb(80 115 145 / 0.22);
  background: linear-gradient(90deg, #edf4fa 0%, #f4f8fc 100%);
  color: #16364d;
  font-size: 0.875rem;
  line-height: 1.5;
}

.ro-preview__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem 0.75rem;
}

/* ---------- 2. R1: Hero (Kompakt grafit márkanyitás) ---------- */
.ro-hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-block: clamp(2.5rem, 5.5vw, 4.5rem);
  background:
    radial-gradient(ellipse 75% 55% at 70% 20%, rgb(0 116 202 / 0.15), transparent 70%),
    linear-gradient(165deg, #101821 0%, var(--ro-hero-bg) 54%, #0c131b 100%);
  border-block-end: 1px solid rgb(255 255 255 / 0.08);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.08);
  color: var(--ro-hero-fg);
}

/* Egyszeri közös stúdiófény; a parallax változókat továbbra is a közös motor kezeli. */
.ro-hero::before {
  content: "";
  position: absolute;
  inset: -15% -10%;
  pointer-events: none;
  background: radial-gradient(
    ellipse 60% 45% at 65% 30%,
    rgb(0 116 202 / 0.14),
    transparent 65%
  );
  transform: translateY(var(--nc-hero-parallax, 0px)) scale(var(--nc-hero-scale, 1));
  z-index: 0;
  animation: nc-hero-light 4s ease-out both;
}



@media (prefers-reduced-motion: reduce) {
  .ro-hero::before {
    animation: none;
    opacity: 0.85;
  }
}

.ro-hero__layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
}

.ro-hero__copy {
  max-inline-size: 52rem;
}

.ro-hero__copy h1 {
  margin-block: 0.75rem 1.25rem;
  color: #ffffff;
  font-size: clamp(2rem, 1.6rem + 1.8vw, 3.125rem);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.ro-hero__copy .ns-lead {
  margin-block-end: 2rem;
  color: var(--ro-hero-muted);
  font-size: clamp(1.0625rem, 0.98rem + 0.35vw, 1.25rem);
  line-height: 1.65;
  max-inline-size: 46rem;
}

.ro-hero .ns-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.875rem 1.25rem;
  margin-block-end: 0;
}

.ro-hero__secondary {
  border: 1px solid rgb(255 255 255 / 0.22);
  border-radius: var(--ro-radius-control);
  background: rgb(255 255 255 / 0.08);
  color: #ffffff;
  backdrop-filter: blur(8px);
  transition:
    background-color 180ms ease-out,
    border-color 180ms ease-out,
    color 180ms ease-out;
}

.ro-hero__secondary:hover {
  background: rgb(255 255 255 / 0.16);
  border-color: rgb(255 255 255 / 0.4);
  color: #ffffff;
}

.ro-hero__caption {
  margin-block-start: 1.25rem;
  color: var(--ro-hero-muted);
  font-size: 0.875rem;
  line-height: 1.5;
}

/* ---------- 3. R2: Alapító bemutatása (.ro-founder) ---------- */
.ro-founder {
  padding-block: clamp(3rem, 6vw, 5.25rem);
  background: var(--ro-surface);
  color: var(--ro-ink);
}

.ro-founder__layout {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 4.5vw, 4.5rem);
  align-items: start;
}

.ro-founder__story {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.ro-founder__story h2 {
  margin-block: 0.5rem 0.75rem;
  color: var(--ro-ink);
  font-size: clamp(1.75rem, 1.45rem + 1.2vw, 2.5rem);
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.ro-founder__lead {
  color: #174c82;
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.6;
  max-inline-size: 44ch;
}

.ro-founder__story p {
  color: var(--ro-copy);
  font-size: 1.0625rem;
  line-height: 1.68;
  margin: 0;
}

.ro-founder__sport-box {
  margin-block-start: 0.5rem;
  padding: 1.25rem 1.5rem;
  border-radius: var(--ro-radius-card);
  border: 1px solid rgb(80 115 145 / 0.18);
  border-inline-start: 4px solid var(--nc-color-blue-500, #0074ca);
  background: #f8fafc;
}

.ro-founder__sport-box h3 {
  margin: 0 0 0.5rem 0;
  color: var(--ro-ink);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.35;
}

.ro-founder__sport-box p {
  color: var(--ro-muted);
  font-size: 0.9375rem;
  line-height: 1.6;
  margin: 0;
}

/* Alapítói kapcsolat sáv */
.ro-founder__contact-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  margin-block-start: 0.75rem;
  padding-block-start: 1.25rem;
  border-block-start: 1px solid rgb(80 115 145 / 0.18);
}

.ro-founder__contact-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--nc-color-blue-600, #1449b4);
  min-block-size: 2.75rem;
  max-inline-size: 100%;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.25em;
  transition: color 150ms ease;
}

.ro-founder__contact-item:hover {
  color: var(--nc-color-blue-700, #07588a);
}

.ro-founder__contact-item svg {
  flex-shrink: 0;
  color: var(--nc-color-blue-500, #0074ca);
}

/* Hitelességi kártya (Jobb oszlop) */
.ro-founder-card {
  position: relative;
  isolation: isolate;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  border-radius: var(--ro-radius-card);
  border: 1px solid rgb(255 255 255 / 0.1);
  background: linear-gradient(155deg, #131d28 0%, #0d1722 60%, #09111a 100%);
  color: #ffffff;
  box-shadow:
    0 18px 36px -12px rgb(9 33 58 / 0.28),
    0 4px 12px rgb(9 33 58 / 0.12),
    inset 0 1px 0 rgb(255 255 255 / 0.1);
  overflow: clip;
}

/* Specular beam és stúdió fényél a kártyán */
.ro-founder-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    135deg,
    rgb(147 197 253 / 0.45) 0%,
    transparent 45%,
    rgb(0 116 202 / 0.25) 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.ro-founder-card__seal {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-block-end: 1.75rem;
  padding-block-end: 1.25rem;
  border-block-end: 1px solid rgb(255 255 255 / 0.1);
}

.ro-founder-card__monogram {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 3.5rem;
  block-size: 3.5rem;
  border-radius: 999px;
  border: 1px solid rgb(147 197 253 / 0.45);
  background: rgb(0 116 202 / 0.12);
  color: #f1f5f9;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.1);
}

.ro-founder-card__identity strong {
  display: block;
  color: #ffffff;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
}

.ro-founder-card__identity span {
  display: block;
  color: var(--ro-hero-muted);
  font-size: 0.875rem;
  line-height: 1.4;
}

/* ---------- 4. R3: Működési értékek (.ro-values) ---------- */
.ro-values {
  padding-block: clamp(3rem, 6vw, 5.25rem);
  background: var(--ro-surface-soft);
  color: var(--ro-ink);
  border-block: 1px solid rgb(80 115 145 / 0.15);
}

.ro-values__layout {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}

.ro-values__intro {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ro-values__intro h2 {
  margin: 0;
  color: var(--ro-ink);
  font-size: clamp(1.75rem, 1.45rem + 1.2vw, 2.5rem);
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.ro-values__intro .ns-lead {
  margin: 0;
  color: var(--ro-muted);
  font-size: 1.0625rem;
  line-height: 1.65;
}

.ro-values__figure {
  margin: 1.5rem 0 0 0;
}

.ro-values__photo {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--ro-radius-card);
  border: 1px solid rgb(80 115 145 / 0.22);
  box-shadow: 0 8px 24px rgb(9 33 58 / 0.08);
}

.ro-values__caption {
  margin-block-start: 0.5rem;
  color: var(--ro-muted);
  font-size: 0.8125rem;
  line-height: 1.45;
}

.ro-values__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.ro-value-card {
  position: relative;
  isolation: isolate;
  padding: 1.5rem 1.75rem;
  border-radius: var(--ro-radius-card);
  border: 1px solid var(--ro-edge);
  background: var(--ro-surface);
  box-shadow: 0 4px 16px rgb(9 33 58 / 0.04);
  transition:
    border-color 220ms ease,
    box-shadow 220ms ease,
    transform 220ms var(--ro-ease);
}

.ro-value-card:hover {
  border-color: var(--ro-edge-hover);
  box-shadow: 0 10px 24px rgb(9 33 58 / 0.09);
  transform: translateY(-2px);
}

.ro-value-card__head {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin-block-end: 0.625rem;
}

.ro-value-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border-radius: var(--ro-radius-control);
  background: rgb(0 116 202 / 0.08);
  color: var(--nc-color-blue-600, #1449b4);
  flex-shrink: 0;
}

.ro-value-card h3 {
  margin: 0;
  color: var(--ro-ink);
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.35;
}

.ro-value-card p {
  margin: 0;
  color: var(--ro-copy);
  font-size: 0.9375rem;
  line-height: 1.6;
}

/* ---------- 5. R4: Együttműködési folyamat (.ro-process) ---------- */
.ro-process {
  padding-block: clamp(3rem, 6vw, 5.25rem);
  background: var(--ro-surface);
  color: var(--ro-ink);
}

.ro-process__layout {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.ro-process__head {
  max-inline-size: 46rem;
}

.ro-process__head h2 {
  margin-block: 0.5rem 0;
  color: var(--ro-ink);
  font-size: clamp(1.75rem, 1.45rem + 1.2vw, 2.5rem);
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.ro-process__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.75rem;
}

.ro-process__step {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.5rem 0 0;
  border-block-start: 1px solid var(--ro-edge-strong);
}



.ro-process__step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  margin-block-end: 1rem;
  border-radius: 999px;
  border: 1px solid rgb(0 116 202 / 0.3);
  background: rgb(0 116 202 / 0.08);
  color: var(--nc-color-blue-600, #1449b4);
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.ro-process__step h3 {
  margin: 0 0 0.625rem 0;
  color: var(--ro-ink);
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.35;
}

.ro-process__step p {
  margin: 0;
  color: var(--ro-copy);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.ro-process__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block-start: 1.5rem;
  border-block-start: 1px solid rgb(80 115 145 / 0.18);
}

.ro-process__note {
  color: var(--ro-muted);
  font-size: 0.875rem;
  line-height: 1.5;
  margin: 0;
  max-inline-size: 42ch;
}

/* ---------- 6. R5: Országos működés (.ro-country) ---------- */
.ro-country {
  padding-block: clamp(2.5rem, 4vw, 3.5rem);
  background: var(--ro-surface-soft);
  color: var(--ro-ink);
  border-block-start: 1px solid rgb(80 115 145 / 0.15);
}

.ro-country__layout {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}

.ro-country__copy {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ro-country__copy h2 {
  margin: 0;
  color: var(--ro-ink);
  font-size: clamp(1.75rem, 1.45rem + 1.2vw, 2.5rem);
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.ro-country__copy .ns-lead {
  margin: 0;
  color: var(--ro-copy);
  font-size: 1.0625rem;
  line-height: 1.65;
}

.ro-country__copy p {
  margin: 0;
  color: var(--ro-muted);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.ro-country__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-block-start: 0.75rem;
}

.ro-country__figure {
  margin: 0;
}

.ro-country__photo {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--ro-radius-card);
  border: 1px solid rgb(80 115 145 / 0.22);
  box-shadow: 0 12px 32px rgb(9 33 58 / 0.1);
}

.ro-country__caption {
  margin-block-start: 0.5rem;
  color: var(--ro-muted);
  font-size: 0.8125rem;
  line-height: 1.45;
}

/* ---------- 7. R6: Ajánlatkérő (.ro-inquiry) ---------- */
.ro-inquiry {
  position: relative;
  isolation: isolate;
  padding-block: clamp(3rem, 6vw, 5.5rem);
  background:
    radial-gradient(ellipse 75% 55% at 85% 20%, rgb(0 116 202 / 0.14) 0%, transparent 68%),
    linear-gradient(165deg, #101821 0%, var(--nc-color-surface-dark, #0a2032) 55%, #0c131b 100%);
  color: #ffffff;
  border-block-start: 1px solid rgb(255 255 255 / 0.08);
}

.ro-inquiry__layout {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}

.ro-inquiry__copy {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ro-inquiry__copy h2 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(1.75rem, 1.45rem + 1.2vw, 2.5rem);
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.ro-inquiry__copy .ns-lead {
  margin: 0;
  color: var(--ro-hero-muted);
  font-size: 1.0625rem;
  line-height: 1.65;
}

.ro-inquiry__copy p {
  margin: 0;
  color: rgb(203 215 227 / 0.85);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.ro-inquiry__guarantee {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  margin-block-start: 0.5rem;
  border-radius: var(--ro-radius-control);
  border: 1px solid rgb(0 116 202 / 0.3);
  background: rgb(0 116 202 / 0.08);
  color: #ffffff;
  font-size: 0.9375rem;
  font-weight: 600;
}

.ro-inquiry__guarantee svg {
  flex-shrink: 0;
  color: var(--nc-color-accent-on-dark, #93c5fd);
}

.ro-founder-card__experience {
  margin: 0;
  color: var(--ro-hero-muted);
  font-size: 1rem;
  line-height: 1.6;
}

.ro-founder-card__experience strong {
  color: #ffffff;
  font-size: 1.5rem;
  font-weight: 700;
}

.ro-founder-card .ro-founder__contact-strip {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  margin-block-start: 1.5rem;
  border-color: rgb(255 255 255 / 0.15);
}

.ro-founder__contact-label {
  color: var(--ro-hero-muted);
  font-size: 0.9375rem;
}

.ro-founder-card .ro-founder__contact-item {
  color: #93c5fd;
}

.ro-founder-card .ro-founder__contact-item:hover {
  color: #ffffff;
}

.ro-founder-card :focus-visible,
.ro-hero :focus-visible,
.ro-inquiry__copy :focus-visible {
  outline-color: #93c5fd;
}

/* ---------- 8. Reszponzív nézetek ---------- */
@media (max-width: 63.999rem) {
  .ro-founder__layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
  }

  .ro-values__layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.25rem;
  }

  .ro-process__steps {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
  }

  .ro-process__step {
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr);
    gap: 0.5rem 1rem;
    align-items: start;
    padding-block-start: 1.25rem;
  }

  .ro-process__step-num {
    grid-row: 1 / span 2;
    margin: 0;
  }

  .ro-process__step h3,
  .ro-process__step p {
    grid-column: 2;
    margin: 0;
  }

  .ro-country__layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.25rem;
  }

  .ro-inquiry__layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.25rem;
  }
}


@media (max-width: 29.999rem) {
  .ro-hero .ns-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .ro-hero .ns-actions .ns-btn {
    inline-size: 100%;
    text-align: center;
    justify-content: center;
  }
}