/* ==========================================================================
   RAFIX · rafix.hu · Plakát-trió design
   Színszabály: borostyán #FFB300 = cselekszik (CTA), türkiz #2FD6C3 = mér,
   terrakotta #C65A2E = mesél (felület). Alap: #111 + fehér.
   ========================================================================== */

@font-face {
  font-family: 'Archivo Black';
  src: url('../assets/fonts/archivo-black-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-0130, U+0132-0151, U+0154-017F, U+0192, U+01FA-01FF, U+0218-021B, U+02C7, U+02C9, U+02DD, U+1E80-1E85, U+1EF2-1EF3, U+2020, U+20A3-20A4, U+20A7, U+2113;
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'Archivo Black';
  src: url('../assets/fonts/archivo-black-latin.woff2') format('woff2');
  unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2032-2033, U+2039-203A, U+2044, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('../assets/fonts/space-grotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-0130, U+0132-0151, U+0154-0180, U+018F, U+0192, U+01A0-01A1, U+01AF-01B0, U+01C4-01DC, U+01E6-01E7, U+01EA-01EB, U+01FA-021B, U+022A-022D, U+0230-0233, U+0237, U+0243, U+0251, U+0259, U+02B9-02BA, U+02BE-02BF, U+02C7-02CC, U+02DD, U+1E08-1E09, U+1E0C-1E0F, U+1E14-1E17, U+1E1C-1E1D, U+1E20-1E21, U+1E24-1E25, U+1E2A-1E2B, U+1E2E-1E2F, U+1E36-1E3B, U+1E42-1E49, U+1E4C-1E53, U+1E5A-1E69, U+1E6C-1E6F, U+1E78-1E7B, U+1E80-1E85, U+1E8E-1E8F, U+1E92-1E93, U+1E97, U+1E9E, U+1EF2-1EF9, U+2020, U+20A1, U+20A3-20A4, U+20A6-20A7, U+20A9, U+20AB, U+20AD, U+20B1-20B2, U+20B5, U+20B9-20BA, U+20BC-20BD, U+20BF, U+2113;
  font-weight: 300 700; font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('../assets/fonts/space-grotesk-latin.woff2') format('woff2');
  unicode-range: U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+2009, U+200B, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2032-2033, U+2039-203A, U+2044, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
  font-weight: 300 700; font-display: swap;
}

:root {
  --black: #111111;
  --card: #1a1a1a;
  --white: #ffffff;
  --amber: #FFB300;
  --teal: #2FD6C3;
  --teal-deep: #0b2a27;   /* 02 szekció: látható türkizes mély */
  --terra: #C65A2E;       /* világos terrakotta: csíkok, sötét szöveggel */
  --terra-deep: #A8471F;  /* mély terrakotta: Rólam, fehér szöveggel */
  --coal: #15161a;        /* alap sötét felület */
  --slate: #1f2127;       /* világosabb grafit: 03 szekció */
  --ink: #0d0d0f;         /* legmélyebb: Munkáim */
  --grey: #c7c7c7;
  --display: 'Archivo Black', 'Arial Black', sans-serif;
  --body: 'Space Grotesk', 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--body);
  background: var(--amber); /* JS szinkronizálja az aktív szekcióhoz (túlgörgetésnél látszik) */
  color: var(--white);
  line-height: 1.6;
  font-size: 17px;
  transition: background-color 0.7s ease;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

.wrap {
  max-width: 1080px; margin: 0 auto;
  padding-left: max(24px, env(safe-area-inset-left));
  padding-right: max(24px, env(safe-area-inset-right));
}
.center { text-align: center; margin-top: 40px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--black); color: var(--white); padding: 12px 20px;
}
.skip-link:focus { left: 0; }

/* ---------- Fejléc ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; gap: 36px;
  padding: 18px max(32px, env(safe-area-inset-right)) 18px max(32px, env(safe-area-inset-left));
  transition: background-color 0.35s ease, box-shadow 0.35s ease, padding 0.35s ease;
}
.site-header.scrolled {
  background: var(--black);
  box-shadow: 0 2px 0 rgba(255, 179, 0, 0.9);
  padding: 12px 32px;
}
.wordmark {
  font-family: var(--display); font-size: 24px; color: inherit;
  text-decoration: none; letter-spacing: 0.06em; color: var(--black);
}
.wordmark span { color: var(--white); text-shadow: 2px 2px 0 var(--black); -webkit-text-stroke: 1px var(--black); }
.site-header.scrolled .wordmark { color: var(--white); }
.site-header.scrolled .wordmark span { color: var(--amber); text-shadow: none; }
.main-nav { display: flex; gap: 26px; }
.main-nav a {
  color: var(--black); text-decoration: none; font-weight: 600;
  font-size: 15px; text-transform: uppercase; letter-spacing: 0.05em;
}
.site-header.scrolled .main-nav a { color: var(--grey); }
.main-nav a:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 3px; }
.site-header.scrolled .main-nav a:hover { color: var(--teal); text-decoration: none; }
.header-cta { margin-left: auto; }

/* ---------- Gombok ---------- */
.btn {
  display: inline-block; text-decoration: none; cursor: pointer;
  font-family: var(--body); font-weight: 700; font-size: 15px;
  text-transform: uppercase; letter-spacing: 0.05em;
  padding: 15px 28px; border: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover { transform: translate(-2px, -2px); }
.btn:active { transform: translate(0, 0); }
.btn-amber { background: var(--amber); color: var(--black); box-shadow: 4px 4px 0 rgba(0,0,0,0.55); }
.btn-amber:hover { box-shadow: 6px 6px 0 rgba(0,0,0,0.55); }
.btn-dark { background: var(--black); color: var(--white); box-shadow: 4px 4px 0 rgba(0,0,0,0.25); }
.btn-dark:hover { box-shadow: 6px 6px 0 rgba(0,0,0,0.25); }
.btn-outline-dark { background: transparent; color: var(--black); border: 3px solid var(--black); padding: 12px 25px; }

/* ---------- Szekció-alap ----------
   Minden szekció TÖMÖR háttérszínt kap (a jóváhagyott trió-demó szerint),
   így a szöveg-kontraszt minden görgetés-állapotban garantált; a body
   színváltása csak túlgörgetésnél / szekció-váltás pillanatában látszik. */
/* Szekció-tónusok: minden szekció saját felületet kap, hogy görgetés közben
   határozottan elváljanak. A data-bg érték a JS body-szinkronnal is egyezik. */
.sec { position: relative; padding: 96px 0; background: var(--coal); }
.sec[data-bg="amber"] { background: var(--amber); }
.sec[data-bg="coal"]  { background: var(--coal); }
.sec[data-bg="teal"]  { background: var(--teal-deep); }
.sec[data-bg="slate"] { background: var(--slate); }
.sec[data-bg="ink"]   { background: var(--ink); }
.sec[data-bg="terra"] { background: var(--terra-deep); }
/* finom felső él minden sötét szekción, hogy a váltás akkor is látszódjon,
   ha két rokon tónus kerül egymás mellé */
.sec[data-bg="coal"], .sec[data-bg="slate"], .sec[data-bg="ink"] {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

/* Halftone-raszter a SÖTÉT szekciókban is: tiszta CSS pontháló, jobb felső
   sarokból halványuló maszkkal (a hero jobbra sűrűsödését folytatja).
   Nulla JS-terhelés; a tartalom a .sec > .wrap z-indexével fölötte marad. */
.sec[data-bg="coal"]::before,
.sec[data-bg="slate"]::before,
.sec[data-bg="ink"]::before,
.sec[data-bg="teal"]::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, 0.14) 1.6px, transparent 1.7px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(135% 115% at 100% 0%, #000 12%, rgba(0,0,0,0.45) 45%, transparent 78%);
  mask-image: radial-gradient(135% 115% at 100% 0%, #000 12%, rgba(0,0,0,0.45) 45%, transparent 78%);
}
/* a türkiz szekcióban a raszter is türkizes */
.sec[data-bg="teal"]::before {
  background-image: radial-gradient(rgba(47, 214, 195, 0.2) 1.6px, transparent 1.7px);
}
.sec > .wrap { position: relative; z-index: 1; }
.sec.service.warm[data-bg="slate"] { border-top: 5px solid var(--amber); }
.sec-title {
  font-family: var(--display); font-size: clamp(27px, 5vw, 46px);
  line-height: 1.05; text-transform: uppercase; letter-spacing: -0.01em;
  margin-bottom: 18px;
}
.sec-title .amber { color: var(--amber); }
.sec-lead { font-size: 19px; max-width: 560px; }

/* ---------- Hero ---------- */
.hero { padding: 170px 0 120px; color: var(--black); }
.kicker {
  font-size: 14px; letter-spacing: 0.22em; text-transform: uppercase;
  font-weight: 700; margin-bottom: 22px;
}
.hero h1 {
  font-family: var(--display);
  font-size: clamp(42px, 8vw, 88px);
  line-height: 0.97; text-transform: uppercase; letter-spacing: -0.015em;
  max-width: 950px;
}
.hero .flip { color: var(--white); text-shadow: 4px 4px 0 var(--black); -webkit-text-stroke: 2.5px var(--black); paint-order: stroke fill; }
.hero .sub { font-size: 20px; font-weight: 500; max-width: 520px; margin: 30px 0 38px; }
.ctas { display: flex; gap: 18px; flex-wrap: wrap; }

/* ---------- Futó sáv ---------- */
/* A futósáv terrakotta felület: elválasztó csík két sötét szekció között. */
.ticker { background: var(--terra); overflow: hidden; padding: 14px 0; }
.ticker-track {
  display: inline-flex; align-items: center; white-space: nowrap;
  font-family: var(--display); font-size: 15px; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--black);
  animation: ticker 28s linear infinite;
}
.ticker-track span, .ticker-track i { margin-right: 14px; }
.ticker-track i { color: var(--white); font-style: normal; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Szolgáltatások ---------- */
.services-intro { padding-bottom: 30px; }
.service { padding: 70px 0; }
.service-title { font-family: var(--display); font-size: clamp(24px, 4vw, 34px); text-transform: uppercase; margin-bottom: 12px; }
.service.warm .service-title b { color: var(--amber); }
.service.cold .service-title b { color: var(--teal); }
.service-lead { font-size: 18px; color: var(--grey); max-width: 560px; margin-bottom: 26px; }
.service-list { list-style: none; max-width: 640px; }
.service-list li {
  padding: 14px 0 14px 30px; position: relative;
  border-bottom: 1px solid rgba(255,255,255,0.12); font-size: 16.5px;
}
.service.warm .service-list li::before,
.service.cold .service-list li::before {
  content: ''; position: absolute; left: 0; top: 22px; width: 12px; height: 12px;
}
.service.warm .service-list li::before { background: var(--amber); }
.service.cold .service-list li::before { background: var(--teal); }
.service.cold { border-top: 4px solid var(--teal); }
.service.cold .service-lead { color: #b8ccc9; }

/* ---------- Hogyan dolgozunk ---------- */
.steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 40px; }
.steps li { background: var(--card); padding: 26px; border-top: 6px solid var(--amber); }
.steps b { display: block; font-family: var(--display); font-size: 18px; text-transform: uppercase; margin-bottom: 10px; }
.steps p { font-size: 15.5px; color: var(--grey); }

/* ---------- Rólam (szerény változat: kisebb cím, kisebb portré, sűrűbb) ---------- */
.about { color: var(--white); padding: 64px 0; }
.about .sec-title { margin-bottom: 20px; font-size: clamp(24px, 3.6vw, 36px); }
.about p { max-width: 620px; margin-bottom: 15px; font-size: 15.5px; color: #ffe9dc; }
.about p:first-of-type, .about .sec-title { color: var(--white); }
.about-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 48px; align-items: center; }
.portrait { max-width: 240px; justify-self: end; }
.portrait img { width: 100%; height: auto; display: block; box-shadow: 10px 10px 0 var(--black); }
.portrait figcaption {
  margin-top: 16px; font-weight: 700; font-size: 14px;
  letter-spacing: 0.06em; text-transform: uppercase;
}

/* ---------- Munkáim ---------- */
.video-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 26px; }
.works-alcim {
  font-family: var(--display); font-size: 20px; text-transform: uppercase;
  letter-spacing: 0.05em; margin: 40px 0 4px;
}
.works-alcim:first-of-type { margin-top: 18px; }
.works-lead { color: var(--grey); font-size: 14.5px; margin-bottom: 22px; }
.video-grid figure { margin: 0; }
.video-grid video {
  width: 100%; aspect-ratio: 9 / 16; object-fit: cover; display: block;
  background: var(--card); border: 2px solid #2c2c2c;
}
.video-grid figcaption {
  margin-top: 9px; font-size: 12.5px; color: var(--grey);
  text-transform: uppercase; letter-spacing: 0.07em;
}
.video-tobb { display: block; margin: 6px auto 40px; }
.ref-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 34px; }
.ref-card {
  display: block; background: var(--card); padding: 26px;
  text-decoration: none; color: var(--white); border: 2px solid #333;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.ref-card.live:hover { transform: translate(-3px, -3px); border-color: var(--teal); }
.ref-tag {
  display: inline-block; font-size: 11.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em; padding: 4px 10px; margin-bottom: 14px;
}
.ref-card.live .ref-tag { background: var(--amber); color: var(--black); }
.ref-card.soon .ref-tag { background: #2e2e2e; color: var(--grey); }
.ref-name { display: block; font-family: var(--display); font-size: 17px; text-transform: uppercase; margin-bottom: 8px; }
.ref-desc { display: block; font-size: 14px; color: var(--grey); }
.ref-card.soon { opacity: 0.75; }

/* ---------- Partner-logó carousel ---------- */
.partner-band { margin-top: 56px; border-top: 1px solid #2c2c2c; padding-top: 34px; }
.partner-cim {
  font-family: var(--display); font-size: 13px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--grey); margin-bottom: 24px;
}
.partner-strip { overflow: hidden; }
.partner-track {
  display: inline-flex; align-items: center; white-space: nowrap;
  animation: partner-futas 45s linear infinite;
}
.partner-track img { height: 44px; width: auto; margin-right: 64px; opacity: 0.8; }
@keyframes partner-futas { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Záró CTA ---------- */
.closing { color: var(--black); text-align: center; border-top: 6px solid var(--black); overflow: hidden; }
.about { overflow: hidden; }
.closing .sec-lead { margin: 0 auto 30px; }
.closing .sec-title { margin-bottom: 14px; }

/* ---------- Kapcsolat ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; }
.contact p { max-width: 420px; margin-bottom: 16px; color: var(--grey); }
.contact-mail a { color: var(--teal); font-weight: 600; }
form label { display: block; margin-bottom: 18px; font-weight: 600; font-size: 14.5px; }
form input, form textarea {
  display: block; width: 100%; margin-top: 7px;
  background: var(--card); border: 2px solid #6a6a6a; color: var(--white);
  padding: 13px 15px; font-family: var(--body); font-size: 16px;
}
form input:focus, form textarea:focus { outline: none; border-color: var(--amber); }
form button { margin-top: 6px; }
.form-note { font-size: 13px; color: var(--grey); margin: 4px 0 14px; }
.form-note a { color: var(--teal); }
.hp-field { position: absolute; left: -9999px; }

/* ---------- Lábléc ---------- */
.site-footer { background: #0b0b0b; padding: 26px 0 90px; font-size: 13.5px; color: #888; }
.foot-grid { display: flex; gap: 20px; justify-content: space-between; flex-wrap: wrap; }
.site-footer a { color: #aaa; }

/* ---------- Ragadós CTA (mobil) ---------- */
.sticky-cta { display: none; }

/* ---------- Reveal animációk ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.on { opacity: 1; transform: none; }

/* ---------- Mobil ---------- */
@media (max-width: 860px) {
  .sec { padding: 64px 0; }
  /* Mobilon NINCS kötőjeles szótörés: a hosszú magyar szó egészben ugrik
     a következő sorba. A betűméretek úgy vannak hangolva, hogy a
     leghosszabb szavak (VÁLLALKOZÁSODRÓL, TARTALOMGYÁRTÁS) elférjenek. */
  .sec-title, .hero h1, .service-title, .quiz-head h1, .works-alcim {
    -webkit-hyphens: none; hyphens: none; overflow-wrap: break-word;
  }
  .hero { padding: 130px 0 80px; }
  .main-nav { display: none; }
  .header-cta { display: none; }
  .site-header { padding: 14px 20px; }
  .about-grid, .contact-grid { grid-template-columns: 1fr; gap: 36px; }
  .portrait { justify-self: start; max-width: 260px; }
  .steps { grid-template-columns: 1fr; }
  .ref-grid { grid-template-columns: 1fr; }
  .video-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .sticky-cta {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    padding: 12px max(16px, env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    background: rgba(17, 17, 17, 0.92); backdrop-filter: blur(4px);
    text-align: center;
  }
  .sticky-cta .btn { display: block; }
  body.has-sticky .site-footer { padding-bottom: calc(112px + env(safe-area-inset-bottom)); }
  body { font-size: 16px; }
}
@media (min-width: 861px) {
  .site-footer { padding-bottom: 26px; }
}


/* ==========================================================================
   POSZTER-RÉTEG (2026-08-18): óriás sorszám-vízjelek, videókeret-mockupok,
   grafikafal, böngésző-mockup, hero-csíkozás + pecsét, nagyobb címek.
   ========================================================================== */

/* Nagyobb, plakátosabb tipográfiai skála */
.sec-title { font-size: clamp(34px, 6.6vw, 76px); }
.service-title { font-size: clamp(30px, 5.2vw, 52px); }
.hero h1 { font-size: clamp(46px, 9.4vw, 124px); }

/* Statikus raszter-textúra a záró sávban és a Rólam blokkban */
.sec-dots {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 0;
}
.closing .wrap, .about .wrap { position: relative; z-index: 2; }

/* Hero: nyomdai halftone-raszter + pecsét */
.sec.hero { overflow: hidden; }
.hero-dots {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 0;
  /* mozgás-csökkentett módban is marad statikus raszter a canvasban */
}
/* fátyol a szövegoldalra: a tipográfia tiszta felületen ül, a raszter jobbra él.
   Rétegsorrend: canvas (0) → fátyol (1) → tartalom (2) → pecsét (3) */
.sec.hero::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg, var(--amber) 0 30%, rgba(255, 179, 0, 0.86) 44%, rgba(255, 179, 0, 0.35) 62%, transparent 78%);
}
.hero-stamp {
  position: absolute; right: 7%; bottom: 15%; z-index: 2;
  background: var(--black); color: var(--amber);
  padding: 18px 26px; transform: rotate(-7deg); text-align: center;
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.14em; line-height: 1.5;
  box-shadow: 6px 6px 0 rgba(0,0,0,0.25);
}
.hero-stamp b { display: block; font-family: var(--display); font-size: 34px; letter-spacing: 0; margin: 2px 0; }
.hero .wrap { position: relative; z-index: 2; }
.hero-stamp { z-index: 3; }

/* Szolgáltatás-rács + vízjel */
.service { overflow: hidden; }
.service-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 56px; align-items: center; position: relative; z-index: 1; }
.service-watermark {
  position: absolute; right: -20px; top: -50px; z-index: 0; pointer-events: none; user-select: none;
  font-family: var(--display); font-size: clamp(140px, 24vw, 280px); line-height: 1;
  color: transparent; -webkit-text-stroke: 2px rgba(255, 179, 0, 0.16);
}
.service-watermark.teal-mark { -webkit-text-stroke: 2px rgba(47, 214, 195, 0.15); }

/* 01: videókeret-mockupok */
.service-visual.clips { display: flex; gap: 18px; justify-content: center; }
.clip {
  width: 118px; aspect-ratio: 9 / 16; border-radius: 10px; position: relative;
  background: linear-gradient(160deg, #3d2d14, #1c150b);
  border: 1px solid #4d3c20; box-shadow: 8px 8px 0 rgba(255, 179, 0, 0.15);
}
.clip i { position: absolute; inset: 0; display: grid; place-items: center; font-style: normal; color: var(--amber); font-size: 22px; }
.clip small { position: absolute; left: 10px; bottom: 8px; right: 8px; color: #cfc4ae; font-size: 10.5px; letter-spacing: 0.04em; }
.clip.c2 { transform: translateY(26px); }
.clip.c3 { transform: translateY(-16px); }

/* 02: grafikafal */
.service-visual.chartwall { text-align: center; }
.bars { display: flex; gap: 14px; align-items: flex-end; justify-content: center; height: 190px; }
.bars b { width: 42px; display: block; height: var(--h); background: var(--teal); box-shadow: 5px 5px 0 rgba(47, 214, 195, 0.2); }
.chart-caption { display: block; margin-top: 16px; color: #7fb5ae; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; }

/* 03: böngésző-mockup */
.browser { max-width: 340px; margin: 0 auto; border: 2px solid #3a3a3a; background: var(--card); box-shadow: 10px 10px 0 rgba(255, 179, 0, 0.15); }
.bbar { display: flex; gap: 6px; padding: 10px 12px; border-bottom: 2px solid #3a3a3a; }
.bbar s { width: 10px; height: 10px; border-radius: 50%; background: #3a3a3a; }
.bbar s:first-child { background: var(--amber); }
.bbody { padding: 18px; }
.bhero {
  height: 84px; background: linear-gradient(120deg, var(--amber), #cc8f00); margin-bottom: 12px;
  display: grid; place-items: center; color: var(--black);
  font-family: var(--display); font-size: 21px; letter-spacing: 0.01em;
}
.brow { height: 12px; background: #333; margin-bottom: 9px; }
.brow.short { width: 65%; }
.bbtn { width: 110px; height: 26px; background: var(--amber); margin-top: 14px; }

/* Csomag-sáv: plakát-blokk */
/* Csomag-blokk: terrakotta, hogy ne folyjon egybe a mockup sárga sávjával. */
.bundle {
  margin-top: 56px; background: var(--terra); border-left: none; color: #1c0f06;
  padding: 34px 38px; max-width: none; box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.35);
}
.bundle h4 { font-family: var(--display); font-size: clamp(22px, 3.4vw, 34px); text-transform: uppercase; margin-bottom: 10px; }
.bundle p { margin-bottom: 22px; font-size: 17px; }

/* Lépés-kártyák: óriás számok */
.steps li { position: relative; padding-top: 34px; }
.step-num {
  position: absolute; right: 16px; top: 2px;
  font-family: var(--display); font-size: 88px; line-height: 1;
  color: transparent; -webkit-text-stroke: 2px rgba(255, 179, 0, 0.4);
}

/* Referencia-kártyák képpel */
.ref-card { padding: 0; overflow: hidden; }
.ref-shot { display: block; aspect-ratio: 16 / 9; overflow: hidden; border-bottom: 2px solid #333; }
.ref-shot img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.25s ease; }
.ref-card.live:hover .ref-shot img { transform: scale(1.04); }
.ref-shot.soon-pattern { background: repeating-linear-gradient(45deg, #202020 0 14px, #181818 14px 28px); }
.ref-body { display: block; padding: 20px 24px 24px; }

@media (max-width: 860px) {
  .service-grid { grid-template-columns: 1fr; gap: 34px; }
  .service-grid.flip-grid .service-visual { order: 2; }
  .service-watermark { font-size: 120px; top: -24px; right: -6px; }
  .sec.hero { padding-bottom: 175px; }
  .hero-stamp {
    right: 16px; bottom: 28px; left: auto; top: auto;
    padding: 12px 18px; font-size: 10.5px; transform: rotate(-5deg);
  }
  .hero-stamp b { font-size: 24px; }
  .clip { width: 92px; }
  .bars { height: 130px; }
  .bars b { width: 32px; }
  .step-num { font-size: 64px; }
  .bundle { padding: 26px 22px; }
  .partner-track img { height: 32px; margin-right: 44px; }
}

/* ==========================================================================
   KÉRDŐÍV-OLDAL (/jelentkezes) + KURZOR-RÉTEG (2026-08-18)
   ========================================================================== */

/* --- Kérdőív --- */
.quiz-body { background: var(--black); }
.quiz-main { min-height: 100vh; display: grid; align-items: start; padding: 150px 24px 90px; }
.quiz-shell { width: 100%; max-width: 680px; margin: 0 auto; }
.quiz-head .kicker { color: var(--amber); margin-bottom: 14px; }
.quiz-head h1 { font-family: var(--display); font-size: clamp(32px, 6vw, 58px); text-transform: uppercase; line-height: 1.04; margin-bottom: 14px; }
.quiz-sub { color: var(--grey); font-size: 16.5px; max-width: 540px; }
.quiz-progress { display: flex; gap: 8px; margin: 30px 0 26px; }
.qp { height: 5px; flex: 1; background: #2c2c2c; transition: background 0.3s ease; }
.qp.on { background: var(--amber); }

.qstep { border: none; }
.qstep legend { font-family: var(--display); font-size: clamp(19px, 3vw, 26px); text-transform: uppercase; margin-bottom: 16px; line-height: 1.2; }
.qstep legend b { color: var(--amber); margin-right: 6px; }
.qhint { color: var(--grey); font-size: 14px; margin-bottom: 14px; }
.qfree input { width: 100%; background: var(--card); border: 2px solid #6a6a6a; color: var(--white); padding: 16px 18px; font-family: var(--body); font-size: 17px; }
.qfree input:focus { outline: none; border-color: var(--amber); }

.qcards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.qcard { position: relative; display: block; background: var(--card); border: 2px solid #6a6a6a; padding: 18px 18px 16px; cursor: pointer; transition: border-color 0.15s ease, transform 0.15s ease; }
.qcard:hover { transform: translate(-2px, -2px); border-color: #666; }
.qcard input { position: absolute; opacity: 0; pointer-events: none; }
.qcard span { display: block; font-weight: 700; font-size: 15.5px; margin-bottom: 3px; }
.qcard small { color: var(--grey); font-size: 12.5px; }
.qcard:has(input:checked) { border-color: var(--amber); background: #241d0e; box-shadow: 4px 4px 0 rgba(255, 179, 0, 0.35); }
.qcard:has(input:focus-visible) { outline: 2px solid var(--amber); outline-offset: 2px; }
.qcard.wide { grid-column: 1 / -1; }

.qnav { display: flex; justify-content: space-between; align-items: center; margin-top: 24px; }
.btn-ghost-light { background: transparent; color: var(--grey); border: 2px solid #6a6a6a; padding: 13px 24px; }
.btn-ghost-light:hover { color: var(--white); border-color: #666; }
.qerror { color: var(--amber); font-weight: 600; font-size: 14px; margin-top: 12px; }

.qcontact label { display: block; margin-bottom: 16px; font-weight: 600; font-size: 14.5px; }
.qcontact em { color: var(--grey); font-style: normal; font-weight: 400; }
.qcontact input, .qcontact textarea { display: block; width: 100%; margin-top: 6px; background: var(--card); border: 2px solid #6a6a6a; color: var(--white); padding: 13px 15px; font-family: var(--body); font-size: 16px; }
.qcontact input:focus, .qcontact textarea:focus { outline: none; border-color: var(--amber); }

.quiz-success { text-align: center; padding: 40px 0; }
.quiz-success h2 { font-family: var(--display); font-size: clamp(30px, 5vw, 48px); text-transform: uppercase; color: var(--amber); margin-bottom: 16px; }
.quiz-success p { color: var(--grey); font-size: 17px; max-width: 480px; margin: 0 auto 14px; }
.quiz-success p strong { color: var(--white); }
.qs-mail a { color: var(--teal); }
.quiz-success .btn { margin-top: 18px; }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 640px) {
  .qcards { grid-template-columns: 1fr; }
  .quiz-main { padding-top: 120px; }
}

/* --- Egyedi kurzor --- */
.has-cursor, .has-cursor a, .has-cursor button, .has-cursor .btn, .has-cursor .qcard,
.has-cursor label, .has-cursor input, .has-cursor textarea, .has-cursor select { cursor: none; }
.cur-dot, .cur-ring {
  position: fixed; left: 0; top: 0; z-index: 200; pointer-events: none;
  opacity: 0; transition: opacity 0.3s ease;
  mix-blend-mode: difference; /* borostyán felületen sötétre vált, feketén borostyán marad */
}
.cur-dot { width: 8px; height: 8px; margin: -4px 0 0 -4px; background: var(--amber); border-radius: 50%; }
.cur-ring {
  width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border: 1.5px solid var(--amber); border-radius: 50%;
}
.cur-ring::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: var(--amber); opacity: 0; transform: scale(0.4);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
body.cur-hover .cur-ring { width: 52px; height: 52px; margin: -26px 0 0 -26px; }
body.cur-hover .cur-ring::after { opacity: 0.14; transform: scale(1); }
.cur-ring { transition: opacity 0.3s ease, width 0.2s ease, height 0.2s ease, margin 0.2s ease; }
/* szövegmező fölött: custom kurzor el, natív szövegkurzor vissza */
body.cur-text .cur-dot, body.cur-text .cur-ring { opacity: 0 !important; }
.has-cursor input, .has-cursor textarea { cursor: text; }
.has-cursor select { cursor: auto; }

/* --- Egérkövető fényfolt --- */
.spot { position: relative; }
.spot::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, -200px), rgba(255, 179, 0, 0.07), transparent 70%);
}
.sec.service.cold.spot::after {
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, -200px), rgba(47, 214, 195, 0.07), transparent 70%);
}

/* --- Mágneses gombok: sima visszaállás --- */
.btn { transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.15s ease; }
/* reveal-es gombon az opacity-átmenet és a hover-emelés is megmarad */
.btn.reveal { transition: opacity 0.6s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.15s ease; }
.btn.reveal.on:hover { transform: translate(-2px, -2px); }


/* ---------- Fókusz-jelzés (billentyűzetes navigáció) ---------- */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, .qcard:focus-within {
  outline: 3px solid var(--amber);
  outline-offset: 3px;
}
.sec[data-bg="amber"] a:focus-visible, .sec[data-bg="amber"] button:focus-visible,
.hero a:focus-visible, .closing a:focus-visible {
  outline-color: var(--black);
}
input:focus, textarea:focus { border-color: var(--amber); }

/* ---------- Mozgás-érzékenység ---------- */
/* ==========================================================================
   MOBIL TIPOGRÁFIA - a poszter-réteg felülírásai UTÁN, hogy érvényesüljön.
   Cél: a leghosszabb magyar szavak (VÁLLALKOZÁSODRÓL, TARTALOMGYÁRTÁS)
   szótörés nélkül, egészben férjenek el egy sorban.
   ========================================================================== */
@media (max-width: 860px) {
  .sec-title { font-size: clamp(26px, 7.2vw, 40px); }
  .service-title { font-size: clamp(24px, 6.6vw, 38px); }
  .hero h1 { font-size: clamp(34px, 9.6vw, 56px); }
  .quiz-head h1 { font-size: clamp(26px, 7vw, 40px); }
}
/* Biztosíték a leghosszabb magyar szóra (VÁLLALKOZÁSODRÓL): a záró CTA
   címe mobilon garantáltan elfér, akkor is, ha a rendszer nagyobb betűt kér. */
@media (max-width: 860px) {
  .closing .sec-title { font-size: min(6.6vw, 30px); }
}

/* csak a legkisebb (320-340px) kijelzőkre: ott a hosszú szavak nem férnének el */
@media (max-width: 340px) {
  .sec-title { font-size: 23px; }
  .service-title { font-size: 21px; }
  .hero h1 { font-size: 31px; }
  .quiz-head h1 { font-size: 23px; }
  .works-alcim { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body { transition: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .ticker-track { animation: none; }
  /* álló módban a logó-sor tördelt fallá alakul, hogy MINDEN logó látsszon */
  .partner-track { animation: none; white-space: normal; flex-wrap: wrap; gap: 18px 40px; }
  .partner-track img { margin-right: 0; }
  .partner-track img:nth-child(n+9) { display: none; } /* csak egy sorozat, ismétlés nélkül */
  .btn { transition: none; transform: none !important; }
  .cur-dot, .cur-ring { display: none; }
  .spot::after { display: none; }
  /* futás közbeni váltásnál is legyen látható natív kurzor */
  .has-cursor, .has-cursor a, .has-cursor button, .has-cursor .btn, .has-cursor .qcard,
  .has-cursor label, .has-cursor input, .has-cursor textarea, .has-cursor select { cursor: auto; }
  .has-cursor a, .has-cursor button, .has-cursor .btn, .has-cursor .qcard { cursor: pointer; }
}