/* ============================================================================
   Rólunk oldal (main.cf-membership.cf-rolunk) — oldal-stíluslap
   Forrás: 03-DESIGN-HANDOVER/import/design_handoff_rolunk_oldal/rolunk-oldal.dc.html (2026-09-05).

   MIRE ÉPÜL: a lap a tagsági landing `cf-membership` rendszerét használja (tokenek, reveal,
   [data-spot] spotlight, .cfm-section/.cfm-container, .cfm-eyebrow-label/.cfm-h2/.cfm-lede,
   .cfm-cta*, partner-marquee, .cfm-trackrecord-*, .cfm-testimonial-*, .cfm-founder-*,
   .cfm-closing*) — azok a publikus bundle-ből jönnek (_membership-page.scss). Itt CSAK az van,
   amit a tagsági oldal nem ismer: a kéthasábos hero a 2×2 statisztika-kártyával, a ciklus-
   grafikon kártya, a média-kártyák, a tagsági mini-kártyák és a záró CTA eltérései.

   MIÉRT KÜLÖN FÁJL, NEM A BUNDLE-BEN: egy oldalé; a CSS-bundle-bontás (2026-08-17) pontosan az
   ilyen halott súlyt vette le a többi ~4700 oldalról. Sima .css (nincs LESS-fordítás), a cache-
   bustert az `assetVersion "rolunk.css"` adja. Minta: public/tozsdek.css.

   DESIGN vs. ÉLŐ RENDSZER (Roland 2026-09-05: „a mostani honlaphoz kell igazodnia"): ahol a
   design és a már élesített tagsági/tőzsde-oldalak RENDSZER-eleme eltér (eyebrow, H2-méret,
   kártya-rács, alapító-kártya), az élő rendszer nyer; ahol a design ÚJ blokkot hoz, azt a
   design geometriájával, az élő tokenekkel építjük.

   HATÓKÖR: minden szabály `.cf-rolunk` alatt. Dekoratív hover CSAK `@media (hover:hover)` mögött.
   ============================================================================ */

/* --- 1. Lap-lokális tokenek ------------------------------------------------ */
.cf-rolunk {
  /* Szöveg-akcentus (link, kiemelt kicker): világosban AA-biztos mélyzöld, sötétben márkazöld.
     Az ikonok/eyebrow-k a tagsági `--mem-accent`-et (élénk lime) viszik, ahogy a landingen. */
  --cfr-accent-text: #0d8040;
  --cfr-glow: rgba(13,128,64,.10);
  --cfr-shadow: 0 18px 40px -26px rgba(12,13,22,.35);
  --cfr-card-hover-bd: rgba(30,215,96,.35);
  --cfr-wolf-op: .10;
}
body.darkmode .cf-rolunk {
  --cfr-accent-text: #1ed760;
  --cfr-glow: rgba(30,215,96,.13);
  --cfr-shadow: 0 22px 44px -26px rgba(0,0,0,.7);
  --cfr-wolf-op: .16;
}

/* --- 2. Közös apróságok ------------------------------------------------------ */
.cf-rolunk .cfr-dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--mem-accent); margin-right:.4em; vertical-align:middle; }
.cf-rolunk .cfr-h2 { margin-top:.5em; }
.cf-rolunk .cfr-link { display:inline-flex; align-items:center; gap:.55em; font-size:14px; font-weight:600; color:var(--cfr-accent-text); transition:color .16s ease; }
.cf-rolunk .cfr-link:hover { color:var(--primary-text); text-decoration:none; }
.cf-rolunk .cfr-link-inline { color:var(--cfr-accent-text); font-weight:600; }
.cf-rolunk .cfr-link-inline:hover { color:var(--primary-text); }
.cf-rolunk .cfr-cta-ico { color:var(--mem-accent); }
/* A tagsági `.cfm-container` alsó paddingje a Rólunk sűrűbb szekció-ritmusához (design: 3.6em). */
.cf-rolunk .cfm-section .cfm-container { padding-top:3.6em; padding-bottom:3.6em; }

/* --- 3. 01 · HERO: kéthasábos, farkas-sziluett + lime fény ------------------- */
.cf-rolunk .cfr-hero-wolf {
  background:url('/public/assets/tagsagok-2026/03-wolf-silhouette-16x9.webp') right center/cover no-repeat;
  opacity:var(--cfr-wolf-op);
  /* Két maszk metszete: a design balról-jobbra kifutó maszkja (40%→85%) + egy függőleges
     kifutás alul, hogy a réteg a hero alsó élén beolvadjon a lap hátterébe (a landing
     sötétítő átmenete ALATTA van, l. rolunk.hbs). */
  -webkit-mask-image:linear-gradient(100deg,transparent 40%,#000 85%),linear-gradient(180deg,#000 60%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(100deg,transparent 40%,#000 85%),linear-gradient(180deg,#000 60%,transparent 100%);
  mask-composite:intersect;
}
/* A design 640×640-es fényudvara (top:-220px; left:-160px) rétegként: középpont (160px,100px). */
.cf-rolunk .cfr-hero-glow { background:radial-gradient(320px circle at 160px 100px,var(--cfr-glow),transparent 62%); }
.cf-rolunk .cfr-hero-inner {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));
  gap:2.4em 3em; align-items:center;
  padding:3.8em 1.1em 3.2em;
}
/* Kéthasábos elrendezésben a landing 64px-es H1-je négy sorra törne — a design H1-mérete megy. */
.cf-rolunk .cfm-hero-h1 { font-size:clamp(34px,4.6vw,56px); line-height:1.03; max-width:none; margin-top:.7em; }
.cf-rolunk .cfm-hero-sub { font-size:16.5px; max-width:56ch; }
.cf-rolunk .cfr-hero-quote { padding-left:1em; border-left:2px solid rgba(30,215,96,.45); font-size:14px; line-height:1.5; font-style:italic; margin-top:1.7em; }
.cf-rolunk .cfr-hero-stats { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.cf-rolunk .cfr-stat-card {
  position:relative; background:var(--x-cell); border:1px solid var(--x-hair-strong); border-radius:14px;
  padding:1.3em 1.3em 1.2em;
  transition:border-color .16s ease,transform .16s ease,box-shadow .16s ease;
}
.cf-rolunk .cfr-stat-card .cfm-stat-num { display:block; font-size:clamp(28px,3vw,36px); letter-spacing:-.03em; line-height:1; }
.cf-rolunk .cfr-stat-card .cfm-stat-label { display:block; margin-top:.5em; font-size:13.5px; color:var(--secondary-text); }

/* --- 4. Kártya-hover (dekoratív, csak mutatós eszközön) ----------------------- */
@media (hover:hover) {
  .cf-rolunk .cfr-stat-card:hover,
  .cf-rolunk .cfr-cycle-card:hover,
  .cf-rolunk .cfr-media-card:hover,
  .cf-rolunk .cfr-media-feature:hover,
  .cf-rolunk .cfr-tier:hover { border-color:var(--cfr-card-hover-bd); box-shadow:var(--cfr-shadow); }
  .cf-rolunk .cfr-stat-card:hover,
  .cf-rolunk .cfr-media-card:hover,
  .cf-rolunk .cfr-tier:hover { transform:translateY(-2px); }
  .cf-rolunk .cfr-tier--featured:hover { border-color:rgba(30,215,96,.5); box-shadow:0 0 0 1px rgba(30,215,96,.2),0 24px 54px -20px rgba(30,215,96,.5); }
  .cf-rolunk .cfr-video-poster:hover img { transform:scale(1.04); }
}

/* --- 5. 02 · MIÉRT JÖTT LÉTRE: két hasáb + ciklus-grafikon kártya -------------- */
.cf-rolunk .cfr-split { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr)); gap:2.2em 3em; align-items:center; }
.cf-rolunk .cfr-split .cfm-lede + .cfm-lede { margin-top:.9em; }
.cf-rolunk .cfr-cycle-card {
  position:relative; background:var(--x-cell); border:1px solid var(--x-hair-strong); border-radius:20px;
  padding:1.5em 1.5em 1.3em; transition:border-color .16s ease,box-shadow .16s ease;
}
.cf-rolunk .cfr-cycle-head { display:flex; justify-content:space-between; align-items:center; gap:1em; flex-wrap:wrap; }
.cf-rolunk .cfr-cycle-title { font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--pale-text); }
.cf-rolunk .cfr-cycle-legend { display:inline-flex; gap:.9em; font-size:12px; font-weight:600; color:var(--secondary-text); }
.cf-rolunk .cfr-cycle-legend > span { white-space:nowrap; }
.cf-rolunk .cfr-up { color:var(--x-up); }
.cf-rolunk .cfr-down { color:var(--x-down); }
.cf-rolunk .cfr-cycle-chart { margin-top:.8em; }
.cf-rolunk .cfr-cycle-chart svg { display:block; width:100%; height:auto; }
.cf-rolunk .cfr-axis { stroke:var(--x-hair-strong); }
.cf-rolunk .cfr-axis-2018 { stroke:#1ed760; stroke-opacity:.45; stroke-dasharray:3 4; }
.cf-rolunk .cfr-cycle-years {
  display:grid; grid-template-columns:repeat(10,1fr); margin:.45em 0 0; padding-left:1.5%;
  font-size:11px; font-weight:600; color:var(--pale-text); letter-spacing:.02em;
}
.cf-rolunk .cfr-cycle-years b { color:var(--mem-accent); font-weight:700; }
.cf-rolunk .cfr-cycle-timeline {
  margin-top:1.1em; display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:.8em;
  border-top:1px solid var(--x-hair); padding-top:1em;
}
.cf-rolunk .cfr-cycle-timeline b { display:block; font-size:13px; font-weight:700; color:var(--primary-text); }
.cf-rolunk .cfr-cycle-timeline b.cfr-accent { color:var(--mem-accent); }
.cf-rolunk .cfr-cycle-timeline span { display:block; margin-top:.25em; font-size:12.5px; line-height:1.45; color:var(--pale-text); }

/* --- 5b. 04 · EREDMÉNYEK: 6 kártya → 3 oszlop (a landing 280px-es minimuma 1190-en 4 oszlopot
   ad, ami 6 kártyánál 4+2-es árva sort hagy). --- */
.cf-rolunk .cfm-trackrecord-grid { grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr)); }

/* --- 6. 03 · PARTNEREK: fejléc + oldalsó bevezető, a sáv a közös partialból ------ */
.cf-rolunk .cfr-section-head { display:flex; justify-content:space-between; align-items:flex-end; gap:1.5em; flex-wrap:wrap; }
.cf-rolunk .cfr-section-head-lede { margin:0; max-width:44ch; font-size:14.5px; }
.cf-rolunk .cfm-logos-rows { margin-top:1.8em; }

/* --- 7. 05 · MÉDIA: kiemelt videó + 2 videókártya + 1 szöveges kártya ---------- */
.cf-rolunk .cfr-media-grid {
  margin-top:1.8em; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap:12px; align-items:stretch;
}
.cf-rolunk .cfr-media-feature {
  grid-column:1 / -1; background:var(--x-cell); border:1px solid var(--x-hair-strong); border-radius:20px;
  overflow:hidden; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));
  transition:border-color .16s ease,box-shadow .16s ease;
}
.cf-rolunk .cfr-media-card {
  background:var(--x-cell); border:1px solid var(--x-hair-strong); border-radius:14px; overflow:hidden;
  display:flex; flex-direction:column; transition:border-color .16s ease,transform .16s ease,box-shadow .16s ease;
}
.cf-rolunk .cfr-video { position:relative; background:#000; aspect-ratio:16/9; }
.cf-rolunk .cfr-media-feature .cfr-video { min-height:240px; }
.cf-rolunk .cfr-video-poster {
  position:absolute; inset:0; display:block; width:100%; height:100%;
  border:none; padding:0; margin:0; cursor:pointer; overflow:hidden; background:#000;
}
.cf-rolunk .cfr-video-poster img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.2,.7,.2,1); }
.cf-rolunk .cfr-video-shade { position:absolute; inset:0; background:linear-gradient(180deg,rgba(10,10,10,.05) 40%,rgba(10,10,10,.5)); pointer-events:none; }
.cf-rolunk .cfr-video-play {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:64px; height:64px; border-radius:50%;
  background:var(--color-primary); color:#04130a; display:flex; align-items:center; justify-content:center;
  font-size:20px; box-shadow:0 14px 38px -10px rgba(30,215,96,.65); pointer-events:none;
}
.cf-rolunk .cfr-video-play i { margin-left:3px; }
.cf-rolunk .cfr-media-card .cfr-video-play { width:46px; height:46px; font-size:15px; box-shadow:0 10px 26px -8px rgba(30,215,96,.6); }
.cf-rolunk .cfr-video iframe { position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }
.cf-rolunk .cfr-media-feature-body { padding:1.6em 1.7em; display:flex; flex-direction:column; justify-content:center; gap:.7em; }
.cf-rolunk .cfr-media-badge { align-self:flex-start; display:inline-flex; align-items:center; gap:.45em; }
.cf-rolunk .cfr-media-feature-body h3 { margin:0; font-size:clamp(19px,2vw,24px); font-weight:700; letter-spacing:-.015em; line-height:1.2; color:var(--primary-text); text-wrap:balance; }
.cf-rolunk .cfr-media-feature-body p { margin:0; font-size:14.5px; line-height:1.6; color:var(--secondary-text); }
.cf-rolunk .cfr-media-foot { display:flex; align-items:center; gap:.8em; padding:.95em 1.2em; }
.cf-rolunk .cfr-media-foot-title { flex:1; font-size:14.5px; font-weight:700; color:var(--primary-text); }
.cf-rolunk .cfr-media-foot a { color:var(--pale-text); font-size:16px; transition:color .16s ease; }
.cf-rolunk .cfr-media-foot a:hover { color:var(--cfr-accent-text); }
.cf-rolunk .cfr-media-card--text { padding:1.4em; gap:.7em; }
.cf-rolunk .cfr-icon-chip {
  width:44px; height:44px; border-radius:12px; background:rgba(30,215,96,.13); color:var(--mem-accent);
  display:flex; align-items:center; justify-content:center; font-size:19px;
}
.cf-rolunk .cfr-media-card--text h3 { margin:.3em 0 0; font-size:18px; font-weight:700; letter-spacing:-.01em; color:var(--primary-text); }
.cf-rolunk .cfr-media-card--text p { margin:0; font-size:14px; line-height:1.55; color:var(--secondary-text); }
.cf-rolunk .cfr-media-links { margin-top:auto; display:flex; gap:1.2em; flex-wrap:wrap; }

/* --- 8. 07 · ALAPÍTÓ: a tagsági alapító-kártya + pill a fotón ------------------ */
.cf-rolunk .cfr-founder-card { margin-top:0; }
.cf-rolunk .cfr-founder-pill {
  position:absolute; left:1.2em; bottom:1.2em; z-index:1; display:inline-flex; align-items:center; gap:.5em;
  height:32px; padding:0 .9em; border-radius:100px; background:rgba(10,10,10,.72); border:1px solid rgba(255,255,255,.1);
  font-size:12px; font-weight:700; color:#f2f2f2; letter-spacing:.04em; white-space:nowrap;
}
.cf-rolunk .cfr-founder-pill img { width:18px; height:18px; border-radius:50%; }
.cf-rolunk .cfr-founder-name { margin-top:.5em; }
.cf-rolunk .cfr-founder-nick { color:var(--pale-text); font-weight:600; }
.cf-rolunk .cfr-founder-role { margin:.3em 0 0; font-size:14px; font-weight:600; color:var(--secondary-text); }
.cf-rolunk .cfr-founder-closing { margin:1.1em 0 0; font-size:14px; line-height:1.55; color:var(--pale-text); }

/* --- 9. 08 · TAGSÁG: középre zárt fejléc + 3 mini-kártya + garancia-sor --------- */
.cf-rolunk .cfr-center { text-align:center; }
.cf-rolunk .cfr-center .cfm-h2 { margin-left:auto; margin-right:auto; max-width:22ch; }
.cf-rolunk .cfr-center .cfm-lede { margin-left:auto; margin-right:auto; max-width:58ch; }
.cf-rolunk .cfr-tier-grid {
  margin-top:2em; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));
  gap:12px; align-items:stretch;
}
.cf-rolunk .cfr-tier {
  position:relative; display:flex; flex-direction:column; gap:.6em;
  background:var(--x-cell); border:1px solid var(--x-hair-strong); border-radius:14px; padding:1.5em;
  color:inherit; transition:border-color .16s ease,transform .16s ease,box-shadow .16s ease;
}
.cf-rolunk .cfr-tier--featured {
  border:1.5px solid rgba(30,215,96,.5);
  box-shadow:0 0 0 1px rgba(30,215,96,.12),0 18px 44px -20px rgba(30,215,96,.35);
}
/* A tagsági `[data-spot]{ overflow:hidden }` levágná a kártya tetején kilógó jelvényt. */
.cf-rolunk .cfr-tier[data-spot] { overflow:visible; }
.cf-rolunk .cfr-tier[data-spot]::before { border-radius:inherit; }
.cf-rolunk .cfr-tier-badge { position:absolute; top:-11px; left:1.5em; z-index:1; }
.cf-rolunk .cfr-tier-kicker { font-size:12.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--pale-text); }
.cf-rolunk .cfr-tier--featured .cfr-tier-kicker { color:var(--cfr-accent-text); }
.cf-rolunk .cfr-tier-price { font-size:26px; font-weight:700; letter-spacing:-.02em; color:var(--primary-text); font-variant-numeric:tabular-nums; }
.cf-rolunk .cfr-tier-price small { font-size:14px; font-weight:500; color:var(--pale-text); }
.cf-rolunk .cfr-tier-desc { font-size:14px; line-height:1.55; color:var(--secondary-text); }
.cf-rolunk .cfr-tier-cta { margin-top:auto; padding-top:.6em; font-size:14px; font-weight:600; color:var(--cfr-accent-text); }
.cf-rolunk .cfr-guarantee { margin-top:1.4em; display:flex; align-items:center; justify-content:center; gap:1em 2em; flex-wrap:wrap; text-align:center; }
.cf-rolunk .cfr-guarantee > span { display:inline-flex; align-items:center; gap:.55em; font-size:14px; font-weight:600; color:var(--primary-text); }
.cf-rolunk .cfr-guarantee i { color:var(--mem-accent); }

/* --- 10. 09 · ZÁRÓ CTA: particle-háttér, három gomb egy sorban ----------------- */
.cf-rolunk .cfr-closing {
  border-top:1px solid var(--x-hair);
  background:var(--cta-overlay), url('/public/assets/rolunk-2026/01-particle-network-16x9.webp') center/cover no-repeat;
}
.cf-rolunk .cfr-closing-glow {
  position:absolute; left:50%; bottom:-320px; transform:translateX(-50%); width:820px; height:620px; border-radius:50%;
  background:radial-gradient(circle,var(--cfr-glow),transparent 60%); pointer-events:none;
}
.cf-rolunk .cfr-closing .cfm-closing-inner { padding:4.2em 1.1em 4.6em; }
.cf-rolunk .cfr-closing-lede { margin:1em auto 0; max-width:52ch; font-size:15.5px; line-height:1.6; color:var(--secondary-text); }
.cf-rolunk .cfr-closing-ctas { flex-direction:row; flex-wrap:wrap; justify-content:center; gap:10px; }
.cf-rolunk .cfr-closing-contact { margin:2em auto 0; font-size:14px; color:var(--pale-text); }
.cf-rolunk .cfr-closing-contact .cfr-link { display:inline; font-size:inherit; }

/* --- 11. MOBIL <768px ---------------------------------------------------------- */
@media (max-width:767px) {
  .cf-rolunk .cfr-hero-inner { padding:1.2em 1.05em 2.6em; gap:1.8em; }
  .cf-rolunk .cfm-hero-h1 { font-size:clamp(30px,8.6vw,38px); }
  .cf-rolunk .cfr-hero-stats { gap:8px; }
  .cf-rolunk .cfr-stat-card { padding:1.1em 1em 1em; }
  .cf-rolunk .cfr-stat-card .cfm-stat-num { font-size:24px; }
  .cf-rolunk .cfm-section .cfm-container { padding-top:2.6em; padding-bottom:2.8em; }
  .cf-rolunk .cfr-cycle-card { padding:1.2em 1.1em 1.1em; }
  .cf-rolunk .cfr-cycle-years { font-size:9.5px; }
  .cf-rolunk .cfr-section-head-lede { font-size:14px; }
  .cf-rolunk .cfr-media-feature .cfr-video { min-height:0; }
  .cf-rolunk .cfr-media-feature-body { padding:1.3em 1.2em; }
  .cf-rolunk .cfr-closing .cfm-closing-inner { padding:3.2em 1.05em 3.6em; }
  .cf-rolunk .cfr-closing-ctas .cfm-cta { width:100%; }
  .cf-rolunk .cfr-closing-glow { width:520px; height:400px; bottom:-220px; }
}