:root{
  --bg:#E8ECE7;
  --bg-2:#E0E6DE;
  --surface:#FFFFFF;
  --ink:#0E1A17;
  --muted:rgba(14,26,23,0.60);
  --petrol:#0A3A32;
  --petrol-2:#0F4940;
  --green:#1B8A6E;
  --green-700:#13705A;
  --green-soft:#D6E6DE;
  --gold:#BE8528;
  --gold-soft:#F0E2C4;
  --coral:#C8503C;
  --line:#C7D3CC;
  --line-dk:rgba(234,241,237,0.16);
  --paper-dk:#EAF1ED;
  --muted-dk:rgba(234,241,237,0.60);
  --r:14px;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:var(--bg); color:var(--ink);
  font-family:'Inter',sans-serif;
  font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
.pl{ font-family:'Inter',sans-serif; }

.disp{ font-family:'Inter Tight',sans-serif; font-weight:800; letter-spacing:-0.015em; line-height:1.06; }
.mono{ font-family:'Inter',sans-serif; }

/* layout */
.wrap{ max-width:1120px; margin:0 auto; padding:0 24px; width:100%; }
.wrap-sm{ max-width:760px; margin:0 auto; padding:0 24px; width:100%; }
.wrap-md{ max-width:920px; margin:0 auto; padding:0 24px; width:100%; }
.sec{ padding:88px 0; }
.sec-sm{ padding:60px 0; }
.band{ background:var(--bg-2); }
.dark{ background:var(--petrol); color:var(--paper-dk); }
.dark .muted{ color:var(--muted-dk); }

/* eyebrow / labels */
.eyebrow{
  font-family:'Inter',sans-serif; font-size:0.70rem; font-weight:500;
  letter-spacing:0.22em; text-transform:uppercase; color:var(--green-700);
  display:inline-flex; align-items:center; gap:0.5rem;
}
.eyebrow::before{ content:"\u25C6"; font-size:0.45rem; color:var(--green); }
.dark .eyebrow{ color:#7FC9B2; }
.dark .eyebrow::before{ color:#7FC9B2; }

/* headings */
h1,h2,h3{ margin:0; font-weight:600; }
.h1{ font-size:clamp(2.1rem,5.2vw,3.5rem); font-weight:600; }
.h2{ font-size:clamp(1.7rem,3.6vw,2.5rem); font-weight:600; }
.h3{ font-size:clamp(1.2rem,2.2vw,1.55rem); font-weight:600; }
.lead{ color:var(--muted); font-size:1.075rem; line-height:1.65; }
.dark .lead{ color:var(--muted-dk); }
.muted{ color:var(--muted); }

/* buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:0.55rem;
  font-family:'Inter Tight',sans-serif; font-weight:600; font-size:0.95rem;
  padding:0.85rem 1.5rem; border-radius:999px; border:1.5px solid transparent;
  cursor:pointer; transition:transform .15s ease, background .18s ease, color .18s ease, border-color .18s ease;
  text-decoration:none; line-height:1; white-space:nowrap;
}
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--green); color:#fff; }
.btn-primary:hover{ background:var(--green-700); transform:translateY(-1px); }
.btn-dark{ background:var(--ink); color:var(--paper-dk); }
.btn-dark:hover{ transform:translateY(-1px); }
.btn-outline{ background:transparent; color:var(--ink); border-color:var(--ink); }
.btn-outline:hover{ background:var(--ink); color:var(--paper-dk); }
.btn-ghost-dk{ background:transparent; color:var(--paper-dk); border-color:var(--line-dk); }
.btn-ghost-dk:hover{ border-color:var(--paper-dk); }
.btn-sm{ padding:0.6rem 1.1rem; font-size:0.85rem; }
.btn:disabled{ opacity:0.4; cursor:not-allowed; transform:none; }
.link-arrow{
  font-family:'Inter Tight',sans-serif; font-weight:600; font-size:0.92rem;
  color:var(--green-700); background:none; border:none; cursor:pointer;
  display:inline-flex; align-items:center; gap:0.4rem; padding:0;
}
.link-arrow:hover{ gap:0.6rem; }


/* CTA border light streak */
@keyframes btnLightStreak{
  0%{ transform:rotate(0deg); }
  100%{ transform:rotate(360deg); }
}
.btn-primary{ position:relative; overflow:hidden; }
.btn-primary::before{
  content:""; position:absolute; inset:-1px;
  border-radius:inherit; padding:1px; z-index:-1;
  background:conic-gradient(
    from 0deg,
    transparent 0%,
    transparent 30%,
    rgba(127,201,178,.55) 38%,
    rgba(180,230,210,.80) 42%,
    rgba(127,201,178,.55) 46%,
    transparent 54%,
    transparent 100%
  );
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite:exclude;
  animation:btnLightStreak 4s linear infinite;
}

/* surfaces */
.card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); }
.card-dk{ background:rgba(234,241,237,0.05); border:1px solid var(--line-dk); border-radius:var(--r); }
.pad{ padding:28px; }
.pad-lg{ padding:36px; }

/* grids */
.grid{ display:grid; gap:24px; }
.g2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.g3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.g4{ grid-template-columns:repeat(4,minmax(0,1fr)); }

/* the signature growth thread */
.thread{ display:block; width:100%; height:60px; }
.thread path{ fill:none; stroke:var(--green); stroke-width:1.5; stroke-dasharray:5 5; opacity:0.5; }
.thread circle{ fill:var(--gold); }

/* \u2500\u2500 Mobile video fix \u2500\u2500 */
@media(max-width:768px){
  .hero-video{ display:none !important; }
  .pb10-video{ display:none !important; }
}

/* \u2500\u2500 Mobile header \u2500\u2500 */
@media(max-width:768px){
  .hdr-nav{ display:none !important; }
  .hdr-wrap{ padding:0 16px !important; }
}

/* \u2500\u2500 Mobile header \u2500\u2500 */
@media(max-width:768px){
  .hdr-nav{ display:none !important; }
  .hdr-wrap{ padding:0 16px !important; }
}

/* ================================================================
   BLOKK 01 \u2013 HERO
   ================================================================ */
@keyframes hIn{
  from{ opacity:0; transform:translateY(22px); filter:blur(8px); }
  to{   opacity:1; transform:translateY(0);    filter:blur(0); }
}
@keyframes hInFast{
  from{ opacity:0; transform:translateY(14px); }
  to{   opacity:1; transform:translateY(0); }
}
@keyframes hScrollPulse{
  0%,100%{ opacity:0.28; transform:scaleY(1); }
  50%    { opacity:0.60; transform:scaleY(1.12); }
}

.hero{
  position:relative; overflow:hidden;
  min-height:100vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:#060e0b;
}
/* Video background */
.hero-video{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%;
  object-fit:cover;
  pointer-events:none;
  transform: scale(1.42) translate(-9%, -9%);
  transform-origin: center center;
}
/* Overlay \u2014 dark */
.hero-ovr-dark{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:rgba(0,0,0,0.28);
}
/* Overlay \u2014 green gradient (subtle, for text legibility) */
.hero-ovr-grad{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(160deg,
    rgba(2,28,23,0.18) 0%,
    transparent 45%,
    rgba(6,24,18,0.30) 100%);
}
.hero-center{
  position:relative; z-index:2;
  max-width:980px; width:100%; padding:0 40px 90px;
  text-align:center; overflow:visible;
}
.hero-badge{  opacity:0; animation:hInFast .60s cubic-bezier(.22,1,.36,1) .10s forwards; }
.hero-h1{     opacity:0; animation:hIn   1.10s cubic-bezier(.22,1,.36,1) .26s forwards; overflow:visible; }
.hero-sub{    opacity:0; animation:hIn    .90s cubic-bezier(.22,1,.36,1) .52s forwards; }
.hero-cta1{   opacity:0; animation:hInFast .65s cubic-bezier(.22,1,.36,1) .74s forwards; }
.hero-cta2{   opacity:0; animation:hInFast .55s cubic-bezier(.22,1,.36,1) .88s forwards; }
.hero-anchor{ opacity:0; animation:hInFast .55s cubic-bezier(.22,1,.36,1) 1.02s forwards; }

.hero-badge-inner{
  display:inline-flex; align-items:center; gap:0.5rem;
  font-family:'Inter',sans-serif; font-size:0.65rem; font-weight:400;
  letter-spacing:0.20em; text-transform:uppercase;
  color:rgba(180,228,210,0.78);
  border:1px solid rgba(127,201,178,0.22); border-radius:999px;
  padding:0.42rem 1.1rem;
  background:rgba(27,138,110,0.12); backdrop-filter:blur(12px);
}
.hero-badge-dot{
  width:5px; height:5px; border-radius:50%;
  background:rgba(78,203,160,0.95);
  box-shadow:0 0 8px rgba(78,203,160,0.85);
  flex:0 0 auto;
}
.hero-h1-text{
  display:block;
  font-family:'Inter Tight',sans-serif;
  font-size:clamp(2.6rem, 8vw, 6.875rem);
  font-weight:700; line-height:0.98; letter-spacing:-0.06em;
  color:#F4F8F6;
  margin:0; padding:0.04em 0 0.22em 0; overflow:visible;
  text-shadow:0 2px 30px rgba(0,0,0,0.35);
}
.hero-h1-accent{
  display:inline-block;
  color:transparent;
  background:linear-gradient(120deg, #5CD6AC 0%, #2DB07E 42%, #D4A23A 100%);
  -webkit-background-clip:text; background-clip:text;
  padding-bottom:0.18em; line-height:1.0;
}
.hero-sub-text{
  font-family:'Inter Tight',sans-serif;
  font-size:clamp(1.05rem, 1.7vw, 1.3rem);
  font-weight:400; line-height:1.6;
  color:rgba(255,255,255,0.72);
  max-width:700px; margin:2.0rem auto 2.8rem;
  letter-spacing:-0.01em;
}
.hero-sub-text strong{ color:rgba(255,255,255,0.92); font-weight:600; }

.hero-btn-primary{
  display:inline-flex; align-items:center; gap:0.60rem;
  font-family:'Inter Tight',sans-serif; font-weight:600; font-size:1.0rem;
  letter-spacing:-0.01em;
  padding:1.0rem 2.2rem; border-radius:999px; border:none; cursor:pointer;
  background:linear-gradient(155deg, #22A883 0%, #15705A 100%);
  color:rgba(255,255,255,0.97);
  box-shadow:0 1px 0 rgba(255,255,255,0.12) inset,
             0 6px 28px rgba(27,138,110,0.40), 0 2px 8px rgba(0,0,0,0.30);
  transition:transform .24s cubic-bezier(.22,1,.36,1), box-shadow .24s cubic-bezier(.22,1,.36,1);
}
.hero-btn-primary:hover{
  transform:translateY(-3px);
  box-shadow:0 1px 0 rgba(255,255,255,0.14) inset,
             0 12px 40px rgba(27,138,110,0.52), 0 3px 10px rgba(0,0,0,0.32);
}
.hero-btn-primary:active{ transform:translateY(-1px); }
.hero-btn-primary .btn-arrow{ transition:transform .24s cubic-bezier(.22,1,.36,1); opacity:0.9; }
.hero-btn-primary:hover .btn-arrow{ transform:translateX(4px); opacity:1; }

.hero-btn-ghost{
  display:inline-flex; align-items:center; gap:0.45rem;
  font-family:'Inter Tight',sans-serif; font-weight:400; font-size:0.92rem;
  padding:0.85rem 1.6rem; border-radius:999px; cursor:pointer;
  background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.18);
  color:rgba(255,255,255,0.78); backdrop-filter:blur(10px);
  transition:all .22s cubic-bezier(.22,1,.36,1);
}
.hero-btn-ghost:hover{
  background:rgba(255,255,255,0.14); border-color:rgba(255,255,255,0.30);
  color:rgba(255,255,255,0.95); transform:translateY(-1px);
}

.hero-scroll-hint{
  position:absolute; bottom:34px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:9px;
  border:none; background:none; cursor:pointer; z-index:3;
  opacity:0; animation:hInFast .5s cubic-bezier(.22,1,.36,1) 1.5s forwards;
}
.hero-scroll-label{
  font-family:'Inter',sans-serif; font-size:0.58rem;
  letter-spacing:0.22em; text-transform:uppercase; color:rgba(255,255,255,0.40);
}
.hero-scroll-line{
  width:1px; height:34px;
  background:linear-gradient(to bottom, rgba(180,228,210,0.65), transparent);
  transform-origin:top; animation:hScrollPulse 2.4s ease-in-out 2.0s infinite;
}

@media (max-width:860px){
  .hero-center{ padding:0 24px; }
  .hero-h1-text{ font-size:clamp(2.4rem,11vw,3.6rem); line-height:1.0; }
  .hero-sub-text{ font-size:1.05rem; margin:1.6rem auto 2.2rem; }
  .hero-btn-primary,.hero-btn-ghost{ width:100%; justify-content:center; }
  .hero-cta1,.hero-cta2{ width:100%; }
}


/* ================================================================
   BLOKK 04 \u2013 RENDSZER v2 (Premium process section)
   ================================================================ */
@keyframes sys4In{
  from{ opacity:0; transform:translateY(24px); filter:blur(8px); }
  to{   opacity:1; transform:translateY(0);    filter:blur(0); }
}

.sys4{ padding:112px 0 120px; background:var(--bg); position:relative; overflow:hidden; }
.sys4::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 55% 50% at 80% 30%, rgba(27,138,110,0.048) 0%, transparent 65%);
}

/* Intro */
.sys4-intro{ max-width:640px; margin:0 auto 72px; text-align:center; opacity:0; }
.sys4-intro.vis{ animation:sys4In .85s cubic-bezier(.22,1,.36,1) .05s forwards; }
.sys4-eyebrow{
  font-family:'Inter',sans-serif; font-size:0.64rem;
  letter-spacing:0.22em; text-transform:uppercase; color:var(--green-700);
  display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:18px;
}
.sys4-eyebrow::before{ content:""; width:20px; height:1px; background:var(--green); display:inline-block; }
.sys4-eyebrow::after{  content:""; width:20px; height:1px; background:var(--green); display:inline-block; }
.sys4-h2{
  font-family:'Inter Tight',sans-serif;
  font-size:clamp(1.85rem,3.6vw,2.8rem);
  font-weight:700; line-height:1.12; letter-spacing:-0.024em;
  color:var(--ink); margin:0 0 14px;
}
.sys4-h2 em{ font-style:italic; color:var(--green-700); }
.sys4-sub{ font-family:'Inter',sans-serif; font-size:1.0rem; color:var(--muted); line-height:1.75; margin:0; }

/* Steps grid */
.sys4-steps{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:0; position:relative; margin-bottom:64px;
  padding-top:8px;
}
/* Connector line \u2014 sits at centre of num circles (56px/2 = 28px + 8px top padding = 36px) */
.sys4-steps::before{
  content:""; position:absolute;
  top:36px; left:calc(12.5% + 14px); right:calc(12.5% + 14px); height:1px;
  background:linear-gradient(90deg,
    transparent 0%,
    var(--line) 8%, var(--line) 92%,
    transparent 100%);
  z-index:0;
}

/* Step \u2014 opacity starts at 1 as fallback; IO overrides when supported */
.sys4-step{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:0 14px; position:relative; z-index:1;
  opacity:1; /* fallback: always visible */
}
/* Only hide when JS has confirmed IO support (vis class applied by JS) */
.sys4-step.io-ready{ opacity:0; }
.sys4-step.vis{ animation:sys4In 750ms cubic-bezier(.22,1,.36,1) both; }

/* Number circle */
.sys4-num{
  width:56px; height:56px; border-radius:50%; flex-shrink:0;
  background:var(--surface); border:1.5px solid var(--line);
  display:grid; place-items:center; margin-bottom:20px;
  font-family:'Inter',sans-serif; font-size:0.75rem; font-weight:600;
  color:var(--muted); position:relative; z-index:2;
  box-shadow:0 0 0 6px var(--bg);   /* punches through the connector line */
  transition:border-color .3s ease, color .3s ease, box-shadow .3s ease;
}
.sys4-step:hover .sys4-num{
  border-color:var(--green); color:var(--green);
  box-shadow:0 0 0 6px var(--bg), 0 0 0 10px rgba(27,138,110,0.08), 0 0 18px rgba(27,138,110,0.18);
}

/* Step content card */
.sys4-card{
  background:rgba(255,255,255,0.72); border:1px solid rgba(10,58,50,0.08);
  border-radius:16px; padding:22px 18px;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  box-shadow:0 1px 0 rgba(255,255,255,0.9) inset, 0 3px 12px rgba(10,26,23,0.05);
  width:100%;
  transition:transform 540ms cubic-bezier(.22,1,.36,1),
             box-shadow 540ms cubic-bezier(.22,1,.36,1),
             border-color 480ms ease;
}
.sys4-step:hover .sys4-card{
  transform:translateY(-4px);
  box-shadow:0 1px 0 rgba(255,255,255,0.95) inset, 0 14px 36px rgba(10,26,23,0.10);
  border-color:rgba(27,138,110,0.20);
}
.sys4-card::before{
  content:""; display:block; height:1px; width:100%;
  background:linear-gradient(90deg, transparent, rgba(27,138,110,0.28) 40%, rgba(27,138,110,0.28) 60%, transparent);
  margin-bottom:14px; border-radius:1px;
}
.sys4-title{
  font-family:'Inter Tight',sans-serif; font-weight:650; font-size:0.92rem;
  color:var(--ink); line-height:1.35; margin-bottom:8px;
}
.sys4-body{
  font-family:'Inter',sans-serif; font-size:0.80rem;
  color:var(--muted); line-height:1.6; margin:0;
}

/* Closing quote */
.sys4-quote{
  max-width:580px; margin:0 auto 56px;
  padding:22px 28px; border-left:2px solid var(--green);
  background:rgba(27,138,110,0.04); border-radius:0 12px 12px 0;
  opacity:0;
}
.sys4-quote.vis{ animation:sys4In .8s cubic-bezier(.22,1,.36,1) .35s forwards; }
.sys4-quote p{
  font-family:'Inter Tight',sans-serif; font-weight:500;
  font-size:1.0rem; color:var(--ink); margin:0; line-height:1.55;
}

/* VSL placeholder */
.sys4-vsl{
  border-radius:22px; overflow:hidden;
  background:linear-gradient(160deg, #0B2E20 0%, #061810 100%);
  border:1px solid rgba(127,201,178,0.14);
  box-shadow:0 24px 64px rgba(10,26,23,0.18), 0 4px 16px rgba(10,26,23,0.10);
  cursor:pointer; opacity:0;
  transition:box-shadow .3s ease;
}
.sys4-vsl:hover{ box-shadow:0 32px 72px rgba(10,26,23,0.24), 0 0 0 1px rgba(127,201,178,0.22); }
.sys4-vsl.vis{ animation:sys4In .9s cubic-bezier(.22,1,.36,1) .45s forwards; }
.sys4-vsl-inner{
  aspect-ratio:16/9; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:18px; position:relative;
  padding:48px;
}
.sys4-vsl-glow{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 55% 45% at 50% 0%, rgba(27,138,110,0.18) 0%, transparent 62%);
}
.sys4-vsl-label{
  font-family:'Inter',sans-serif; font-size:0.60rem;
  letter-spacing:0.22em; text-transform:uppercase; color:rgba(127,201,178,0.45);
  position:relative; z-index:1;
}
.sys4-vsl-play{
  width:76px; height:76px; border-radius:50%; position:relative; z-index:1;
  background:rgba(27,138,110,0.15); border:1px solid rgba(127,201,178,0.32);
  display:grid; place-items:center;
  box-shadow:0 0 0 12px rgba(27,138,110,0.06), 0 0 32px rgba(27,138,110,0.22);
  transition:background .25s ease, transform .25s ease, box-shadow .25s ease;
}
.sys4-vsl:hover .sys4-vsl-play{
  background:rgba(27,138,110,0.32); transform:scale(1.08);
  box-shadow:0 0 0 16px rgba(27,138,110,0.08), 0 0 48px rgba(27,138,110,0.35);
}
.sys4-vsl-title{
  font-family:'Inter Tight',sans-serif; font-weight:600; font-size:1.15rem;
  color:rgba(234,241,237,0.88); text-align:center; max-width:380px;
  line-height:1.38; position:relative; z-index:1;
}
.sys4-vsl-sub{
  font-family:'Inter',sans-serif; font-size:0.88rem;
  color:rgba(234,241,237,0.38); position:relative; z-index:1;
}

@media(max-width:860px){
  .sys4{ padding:80px 0 88px; }
  .sys4-steps{ grid-template-columns:1fr; gap:14px; padding-top:0; }
  .sys4-steps::before{ display:none; }
  .sys4-step{ align-items:flex-start; text-align:left; flex-direction:row; gap:16px; padding:0; }
  .sys4-num{ width:44px; height:44px; flex-shrink:0; font-size:0.70rem; margin-bottom:0; box-shadow:none; }
  .sys4-step:hover .sys4-num{ box-shadow:none; }
  .sys4-vsl-inner{ aspect-ratio:auto; min-height:220px; padding:32px; }
}

/* ================================================================
   BLOKK 02 \u2013 BIZALOM (Trust block)
   ================================================================ */
/* ================================================================
   BLOKK 02 v2 \u2014 Premium asymmetric stat layout
   Glassmorphism \xB7 3D hover \xB7 watermark \xB7 radial bg \xB7 negative space
   ================================================================ */

@keyframes tIn{
  from{ opacity:0; transform:var(--t-from,translateY(32px)); filter:blur(10px); }
  to{   opacity:1; transform:translateY(0) rotateX(0) rotateY(0); filter:blur(0); }
}
@keyframes tIntroIn{
  from{ opacity:0; transform:translateY(16px); filter:blur(6px); }
  to{   opacity:1; transform:translateY(0); filter:blur(0); }
}

/* Section */
.ts2{
  position:relative;
  padding:120px 0 128px;
  background:var(--bg);
  overflow:hidden;
}
/* Subtle radial bg glow */
.ts2::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 65% 55% at 70% 40%, rgba(27,138,110,0.055) 0%, transparent 65%),
    radial-gradient(ellipse 50% 40% at 15% 70%, rgba(190,133,40,0.040) 0%, transparent 55%);
}
/* Faint grid overlay */
.ts2::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(127,201,178,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(127,201,178,0.025) 1px, transparent 1px);
  background-size:48px 48px;
  opacity:0.6;
}

/* Intro */
.ts2-intro{
  max-width:680px; margin:0 auto 80px;
  text-align:center; position:relative; z-index:1;
  opacity:0;
}
.ts2-intro.vis{
  animation:tIntroIn .85s cubic-bezier(.22,1,.36,1) .05s forwards;
}
.ts2-intro-lead{
  font-family:'Inter Tight',sans-serif;
  font-size:clamp(1.05rem,1.8vw,1.25rem);
  font-weight:400; line-height:1.9;
  color:var(--muted); letter-spacing:0.01em; margin:0;
}

/* Asymmetric bento grid */
.ts2-grid{
  position:relative; z-index:1;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  grid-auto-rows:auto;
  gap:14px;
}

/* Base card \u2014 glassmorphism */
.tc{
  position:relative; overflow:hidden;
  border-radius:20px;
  padding:32px 28px 30px;
  background:rgba(255,255,255,0.032);
  border:1px solid rgba(255,255,255,0.065);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 8px 32px rgba(10,26,23,0.12),
    0 2px 8px rgba(10,26,23,0.08);
  opacity:0;
  transform:translateY(32px);
  transition:
    transform 560ms cubic-bezier(.22,1,.36,1),
    box-shadow 560ms cubic-bezier(.22,1,.36,1),
    border-color 560ms ease;
  transform-style:preserve-3d;
  cursor:default;
}
.tc.vis{ animation:tIn 750ms cubic-bezier(.22,1,.36,1) both; }

/* 3D hover */
.tc:hover{
  transform:translateY(-6px) rotateX(2deg) rotateY(-1.5deg) scale(1.018);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.09) inset,
    0 24px 56px rgba(10,26,23,0.18),
    0 6px 20px rgba(10,26,23,0.10);
  border-color:rgba(127,201,178,0.20);
}

/* Top accent line */
.tc::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,
    transparent 0%,
    var(--tc-accent, rgba(27,138,110,0.6)) 40%,
    var(--tc-accent, rgba(27,138,110,0.6)) 60%,
    transparent 100%);
}

/* Inner glow */
.tc::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  border-radius:20px;
  background:radial-gradient(ellipse 80% 60% at 50% -10%,
    var(--tc-glow, rgba(27,138,110,0.08)) 0%, transparent 70%);
}

/* Watermark number */
.tc-wm{
  position:absolute; right:-8px; bottom:-16px;
  font-family:'Inter Tight',sans-serif;
  font-size:clamp(5rem,10vw,8.5rem);
  font-weight:800; line-height:1;
  letter-spacing:-0.05em;
  color:var(--tc-wm-color, rgba(127,201,178,0.05));
  pointer-events:none; user-select:none;
  white-space:nowrap;
}

/* Number */
.tc-num{
  font-family:'Inter Tight',sans-serif;
  font-size:clamp(2rem,3.8vw,3rem);
  font-weight:700; line-height:1;
  letter-spacing:-0.03em;
  color:var(--tc-color, var(--green));
  margin-bottom:10px; position:relative; z-index:1;
}
/* Suffix smaller */
.tc-num-suffix{
  font-size:0.52em; font-weight:500; opacity:0.75;
  letter-spacing:-0.01em; margin-left:0.12em;
}

/* Label */
.tc-label{
  font-family:'Inter',sans-serif;
  font-size:0.88rem; font-weight:500; line-height:1.45;
  color:var(--ink); position:relative; z-index:1;
  margin-bottom:6px;
}
.tc-desc{
  font-family:'Inter',sans-serif;
  font-size:0.80rem; color:var(--muted); line-height:1.6;
  position:relative; z-index:1; margin:0;
}

/* Grid positions \u2014 asymmetric bento */
.tc-1{ grid-column:1/5;  grid-row:1; }   /* 850+      \u2014 wide left    */
.tc-2{ grid-column:5/9;  grid-row:1; }   /* 3.2 mrd  \u2014 middle       */
.tc-3{ grid-column:9/13; grid-row:1; }   /* 9 \xE9v     \u2014 right        */
.tc-4{ grid-column:1/7;  grid-row:2; }   /* 2500+    \u2014 wide left    */
.tc-5{ grid-column:7/13; grid-row:2; }   /* 1000+    \u2014 wide right   */

/* Hierarchic layout: featured hero + explanation + 3 support stats */
.ts2-featured{
  position:relative; z-index:1;
  max-width:920px; margin:0 auto 24px;
}
.ts2-featured .tc-featured{
  padding: 52px 44px 46px;
  border-radius: 26px;
  background: rgba(255,255,255,0.55);
  border-color: rgba(10,58,50,0.10);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.7) inset,
    0 16px 40px rgba(10,26,23,0.10),
    0 40px 80px rgba(10,26,23,0.08);
}
.ts2-featured .tc-featured .tc-num{
  font-size: clamp(4.4rem, 8.5vw, 7.2rem);
  line-height: 1;
  margin-bottom: 14px;
}
.ts2-featured .tc-featured .tc-num-suffix{
  font-size: 0.42em;
}
.ts2-featured .tc-featured .tc-label{
  font-size: 1.08rem; line-height: 1.55;
  max-width: 620px;
}
.ts2-featured .tc-featured .tc-wm{
  font-size: clamp(9rem, 18vw, 15rem);
  right:-24px; bottom:-40px;
  opacity: 0.9;
}
.ts2-explain{
  position:relative; z-index:1;
  max-width: 780px; margin: 0 auto 42px;
  text-align:center;
  font-family:'Inter Tight',sans-serif;
  font-size: clamp(1.05rem, 1.4vw, 1.22rem);
  line-height: 1.55;
  color: rgba(10,26,23,0.78);
  letter-spacing:-0.005em;
  font-weight:500;
}
.ts2-support{
  position:relative; z-index:1;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  max-width: 960px;
  margin: 0 auto;
}
.ts2-support .tc-small{
  padding: 22px 22px 20px;
  border-radius: 16px;
  background: rgba(255,255,255,0.42);
  border-color: rgba(10,58,50,0.08);
}
.ts2-support .tc-small .tc-num{
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  line-height: 1;
  margin-bottom: 6px;
}
.ts2-support .tc-small .tc-num-suffix{ font-size: 0.55em; }
.ts2-support .tc-small .tc-label{
  font-size: 0.78rem; line-height:1.45;
  color: rgba(10,26,23,0.62);
}
.ts2-support .tc-small .tc-wm{ display:none; }
.ts2-support .tc-small .tc-desc{ display:none; }
.ts2-support .tc-small:hover{
  transform:translateY(-4px) scale(1.015);
}
@media (max-width: 760px){
  .ts2-featured .tc-featured{ padding: 36px 22px 30px; }
  .ts2-support{ grid-template-columns: 1fr; gap:12px; }
}

/* Dark-mode friendly glass */
@media (prefers-color-scheme:dark){
  .tc{ background:rgba(255,255,255,0.028); border-color:rgba(255,255,255,0.055); }
}

/* Light mode override \u2014 slightly more visible */
.tc{
  background:color-mix(in srgb, var(--surface) 70%, transparent);
}

@media (max-width:860px){
  .ts2{ padding:80px 0 88px; }
  .ts2-grid{
    grid-template-columns:1fr;
    grid-auto-rows:auto;
    gap:12px;
  }
  .tc-1,.tc-2,.tc-3,.tc-4,.tc-5{
    grid-column:1/-1; grid-row:auto;
  }
  .tc{ padding:28px 24px 26px; backdrop-filter:blur(8px); }
  .tc-num{ font-size:clamp(2.2rem,9vw,3rem); }
  .tc-wm{ font-size:clamp(4rem,16vw,6rem); bottom:-10px; right:-4px; }
  .tc:hover{ transform:translateY(-3px); }
}

/* ================================================================
   BLOKK 03 v2 \u2014 Premium editorial pain layout
   ================================================================ */

@keyframes painIn{
  from{ opacity:0; transform:translateY(24px); filter:blur(8px); }
  to{   opacity:1; transform:translateY(0);    filter:blur(0); }
}
@keyframes painHeadIn{
  from{ opacity:0; transform:translateY(18px); filter:blur(6px); }
  to{   opacity:1; transform:translateY(0);    filter:blur(0); }
}

.pain-section{
  position:relative; overflow:hidden;
  padding:120px 0 128px;
  background:var(--bg-2, #F4F6F3);
}

/* Subtle bg layers */
.pain-section::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 60% 50% at 10% 30%, rgba(27,138,110,0.05) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 90% 75%, rgba(190,133,40,0.04) 0%, transparent 55%);
}
.pain-section::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(10,58,50,0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10,58,50,0.022) 1px, transparent 1px);
  background-size:52px 52px; opacity:0.5;
}

/* \u2500\u2500 Header area \u2500\u2500 */
.pain-header{
  position:relative; z-index:1;
  max-width:720px; margin:0 auto 72px;
  opacity:0;
}
.pain-header.vis{
  animation:painHeadIn .85s cubic-bezier(.22,1,.36,1) .06s forwards;
}
.pain-eyebrow{
  font-family:'Inter',sans-serif;
  font-size:0.65rem; font-weight:400;
  letter-spacing:0.22em; text-transform:uppercase;
  color:var(--green-700); margin-bottom:20px;
  display:flex; align-items:center; gap:10px;
}
.pain-eyebrow::before{
  content:""; display:inline-block; width:22px; height:1px;
  background:var(--green);
}
.pain-headline{
  font-family:'Inter Tight',sans-serif;
  font-size:clamp(1.9rem,3.8vw,2.9rem);
  font-weight:700; line-height:1.12;
  letter-spacing:-0.025em; color:var(--ink);
  margin:0 0 20px;
}
.pain-headline em{
  font-style:italic; color:var(--green-700);
  font-weight:600;
}
.pain-subhead{
  font-family:'Inter',sans-serif;
  font-size:1.05rem; color:var(--muted);
  line-height:1.75; margin:0;
}

/* \u2500\u2500 Bento pain layout \u2500\u2500 */
.pain-bento{
  position:relative; z-index:1;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  grid-template-rows:auto auto;
  gap:12px;
}

/* Pain item positions \u2014 editorial asymmetric */
.pi-1{ grid-column:1/6;  }   /* wide left */
.pi-2{ grid-column:6/10; }   /* medium */
.pi-3{ grid-column:10/13;}   /* narrow accent */
.pi-4{ grid-column:1/7;  }   /* wide */
.pi-5{ grid-column:7/13; }   /* wide */

/* Pain item card */
.pain-item{
  position:relative; overflow:hidden;
  border-radius:18px;
  padding:30px 26px 26px;
  background:rgba(255,255,255,0.72);
  border:1px solid rgba(10,58,50,0.08);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.90) inset,
    0 4px 20px rgba(10,26,23,0.06),
    0 1px 4px rgba(10,26,23,0.04);
  opacity:0;
  transition:
    transform 560ms cubic-bezier(.22,1,.36,1),
    box-shadow 560ms cubic-bezier(.22,1,.36,1),
    border-color 480ms ease;
}
.pain-item.vis{
  animation:painIn 800ms cubic-bezier(.22,1,.36,1) both;
}
.pain-item:hover{
  transform:translateY(-5px) rotateX(1.5deg) rotateY(-1deg);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.95) inset,
    0 16px 48px rgba(10,26,23,0.10),
    0 4px 14px rgba(10,26,23,0.06);
  border-color:rgba(27,138,110,0.18);
}

/* Top gradient line */
.pain-item::before{
  content:""; position:absolute; top:0; left:16px; right:16px; height:1px;
  background:linear-gradient(90deg,
    transparent, rgba(27,138,110,0.35) 40%, rgba(27,138,110,0.35) 60%, transparent);
}

/* Number badge */
.pi-num{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:8px;
  background:rgba(27,138,110,0.08);
  border:1px solid rgba(27,138,110,0.14);
  font-family:'Inter',sans-serif;
  font-size:0.68rem; font-weight:600; color:var(--green-700);
  margin-bottom:16px; flex-shrink:0;
}

/* Title */
.pi-title{
  font-family:'Inter Tight',sans-serif;
  font-size:1.05rem; font-weight:650; line-height:1.3;
  color:var(--ink); margin-bottom:9px;
}

/* Body */
.pi-body{
  font-family:'Inter',sans-serif;
  font-size:0.87rem; color:var(--muted);
  line-height:1.65; margin:0;
}

/* Accent card variant \u2014 pi-3 (narrow right) gets green tint */
.pi-3{
  background:rgba(27,138,110,0.055);
  border-color:rgba(27,138,110,0.14);
}
.pi-3::before{
  background:linear-gradient(90deg,
    transparent, rgba(27,138,110,0.55) 40%, rgba(27,138,110,0.55) 60%, transparent);
}
.pi-3 .pi-num{
  background:rgba(27,138,110,0.14);
  border-color:rgba(27,138,110,0.22);
}
.pi-3 .pi-title{ color:var(--green-900, #0A3A2A); }
.pi-3:hover{ border-color:rgba(27,138,110,0.30); }

@media (max-width:860px){
  .pain-section{ padding:80px 0 88px; }
  .pain-header{ max-width:100%; margin-bottom:48px; }
  .pain-bento{ grid-template-columns:1fr; gap:10px; }
  .pi-1,.pi-2,.pi-3,.pi-4,.pi-5{ grid-column:1/-1; }
  .pain-item{ padding:24px 22px 22px; backdrop-filter:blur(8px); border-radius:14px; }
  .pain-item:hover{ transform:translateY(-3px); }
  .pain-headline{ font-size:clamp(1.65rem,7vw,2.2rem); }
}


/* ================================================================
   BLOCKS 4\u201313 \u2014 Premium Design System
   Shared animation + per-block character
   ================================================================ */

/* Shared scroll-reveal keyframe */
@keyframes revIn{
  from{ opacity:0; transform:translateY(24px); filter:blur(8px); }
  to{   opacity:1; transform:translateY(0);    filter:blur(0); }
}
@keyframes revInFast{
  from{ opacity:0; transform:translateY(16px); }
  to{   opacity:1; transform:translateY(0); }
}
/* Shared section label */
.s-label{
  font-family:'Inter',sans-serif; font-size:0.64rem; font-weight:400;
  letter-spacing:0.22em; text-transform:uppercase; color:var(--green-700);
  display:flex; align-items:center; gap:10px; margin-bottom:18px;
}
.s-label::before{ content:""; display:inline-block; width:20px; height:1px; background:var(--green); }

/* \u2500\u2500 BLOKK 04 \u2014 RENDSZER \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
.sys2{
  padding:120px 0 128px; background:var(--bg);
  position:relative; overflow:hidden;
}
.sys2::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 55% 50% at 80% 30%, rgba(27,138,110,0.05) 0%, transparent 60%);
}
.sys2-intro{ max-width:640px; margin:0 auto 72px; text-align:center; opacity:0; }
.sys2-intro.vis{ animation:revIn .85s cubic-bezier(.22,1,.36,1) .05s forwards; }
.sys2-h2{
  font-family:'Inter Tight',sans-serif; font-size:clamp(1.9rem,3.6vw,2.8rem);
  font-weight:700; line-height:1.12; letter-spacing:-0.024em; color:var(--ink); margin:0 0 14px;
}
.sys2-h2 span{ color:var(--green-700); }
.sys2-sub{ font-family:'Inter',sans-serif; font-size:1.05rem; color:var(--muted); line-height:1.75; margin:0; }

/* Timeline */
.sys2-timeline{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative; padding-top:32px; margin-bottom:64px; }
.sys2-track{
  position:absolute; top:13px; left:calc(12.5% + 14px); right:calc(12.5% + 14px);
  height:1px;
  background:linear-gradient(90deg, transparent, var(--line) 15%, var(--line) 85%, transparent);
}
.sys2-track-fill{
  height:1px; background:linear-gradient(90deg, var(--green), var(--green-700));
  transform-origin:left; transform:scaleX(0);
  transition:transform 1.6s cubic-bezier(.4,0,.2,1);
  box-shadow:0 0 8px rgba(27,138,110,0.4);
}
.sys2-track-fill.go{ transform:scaleX(1); }
.sys2-step{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:0 14px; opacity:0; }
.sys2-step.vis{ animation:revIn 700ms cubic-bezier(.22,1,.36,1) both; }
.sys2-dot{
  width:28px; height:28px; border-radius:50%; z-index:1; position:relative;
  background:var(--surface); border:1.5px solid var(--line);
  display:grid; place-items:center; margin-bottom:20px;
  font-family:'Inter',sans-serif; font-size:0.64rem; font-weight:600; color:var(--muted);
  transition:border-color .3s ease, color .3s ease, box-shadow .3s ease;
}
.sys2-step:hover .sys2-dot{
  border-color:var(--green); color:var(--green);
  box-shadow:0 0 12px rgba(27,138,110,0.25);
}
.sys2-step-title{ font-family:'Inter Tight',sans-serif; font-weight:600; font-size:0.95rem; color:var(--ink); margin-bottom:8px; line-height:1.3; }
.sys2-step-body{ font-family:'Inter',sans-serif; font-size:0.83rem; color:var(--muted); line-height:1.6; max-width:200px; }

/* VSL placeholder */
.vsl2{
  border-radius:20px; overflow:hidden;
  background:linear-gradient(160deg, #0A2820 0%, #061610 100%);
  border:1px solid rgba(127,201,178,0.12);
  box-shadow:0 24px 64px rgba(10,26,23,0.18), 0 4px 16px rgba(10,26,23,0.10);
  opacity:0;
}
.vsl2.vis{ animation:revIn .9s cubic-bezier(.22,1,.36,1) .3s forwards; }
.vsl2-inner{
  aspect-ratio:16/9; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:20px; padding:48px; position:relative;
}
.vsl2-glow{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 60% 50% at 50% 0%, rgba(27,138,110,0.15) 0%, transparent 65%);
}
.vsl2-play{
  width:72px; height:72px; border-radius:50%;
  background:rgba(27,138,110,0.15); border:1px solid rgba(127,201,178,0.30);
  display:grid; place-items:center; cursor:pointer; position:relative; z-index:1;
  transition:background .25s ease, transform .25s ease, border-color .25s ease;
  box-shadow:0 0 32px rgba(27,138,110,0.20);
}
.vsl2-play:hover{ background:rgba(27,138,110,0.35); transform:scale(1.08); border-color:rgba(127,201,178,0.55); }
.vsl2-tag{ font-family:'Inter',sans-serif; font-size:0.62rem; letter-spacing:0.18em; text-transform:uppercase; color:rgba(127,201,178,0.45); position:relative; z-index:1; }
.vsl2-title{ font-family:'Inter Tight',sans-serif; font-size:1.15rem; font-weight:600; color:rgba(234,241,237,0.85); text-align:center; max-width:400px; line-height:1.4; position:relative; z-index:1; }
.vsl2-scenes{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; position:relative; z-index:1; }
.vsl2-scene{ font-family:'Inter',sans-serif; font-size:0.60rem; letter-spacing:0.08em; color:rgba(234,241,237,0.22); border:1px solid rgba(234,241,237,0.07); border-radius:6px; padding:3px 9px; }

/* Closing quote */
.sys2-quote{
  margin-top:48px; padding:22px 28px;
  border-left:2px solid var(--green);
  background:rgba(27,138,110,0.04);
  border-radius:0 12px 12px 0;
  max-width:580px; margin-left:auto; margin-right:auto;
  opacity:0;
}
.sys2-quote.vis{ animation:revIn .8s cubic-bezier(.22,1,.36,1) .4s forwards; }
.sys2-quote p{ font-family:'Inter Tight',sans-serif; font-size:1.0rem; font-weight:500; color:var(--ink); margin:0; line-height:1.55; }

@media(max-width:860px){
  .sys2-timeline{ grid-template-columns:1fr; padding-top:0; }
  .sys2-track{ display:none; }
  .sys2-step{ flex-direction:row; text-align:left; align-items:flex-start; gap:16px; padding:0 0 28px; }
  .sys2-step:last-child{ padding-bottom:0; }
  .sys2-dot{ flex:0 0 auto; margin-bottom:0; margin-top:2px; }
  .sys2-step-body{ max-width:none; }
  .vsl2-inner{ aspect-ratio:auto; min-height:240px; padding:32px; }
  .vsl2-scenes{ display:none; }
}

/* \u2500\u2500 BLOKK 05 \u2014 BEFEKTET\xC9SI T\xCDPUSOK (orbital) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
@keyframes inv5In{
  from{ opacity:0; transform:translateY(32px) scale(.96); filter:blur(8px); }
  to{   opacity:1; transform:translateY(0) scale(1);      filter:blur(0); }
}

.inv5{
  padding:128px 0; position:relative; overflow:hidden;
  background:linear-gradient(160deg, #031a16 0%, #010c0a 50%, #020807 100%);
}
.inv5-ambient{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 45% 40% at 50% 45%, rgba(28,140,110,.10) 0%, transparent 65%),
    radial-gradient(circle at 20% 80%, rgba(28,140,110,.06) 0%, transparent 40%),
    radial-gradient(circle at 80% 20%, rgba(42,196,153,.04) 0%, transparent 35%);
}

/* Intro */
.inv5-intro{ max-width:700px; margin:0 auto 80px; text-align:center; opacity:0; position:relative; z-index:2; }
.inv5-intro.vis{ animation:inv5In .9s cubic-bezier(.22,1,.36,1) forwards; }
.inv5-eyebrow{
  font-family:'Inter',sans-serif; font-size:0.68rem; font-weight:500;
  letter-spacing:0.22em; text-transform:uppercase; color:rgba(127,201,178,.55);
  margin-bottom:18px;
}
.inv5-h2{
  font-family:'Inter Tight',sans-serif; font-size:clamp(2rem,4.2vw,3.2rem);
  font-weight:800; letter-spacing:-0.035em; line-height:1.08;
  color:#F0F5F2; margin:0 0 16px;
}
.inv5-h2 em{ font-style:normal; color:rgba(127,201,178,.85); }
.inv5-sub{
  font-family:'Inter',sans-serif; font-size:clamp(1rem,1.3vw,1.15rem);
  color:rgba(234,241,237,.50); line-height:1.7; margin:0;
}

/* Orbital layout */
.inv5-orbital{
  position:relative; max-width:1100px; margin:0 auto;
  display:grid; grid-template-columns:repeat(5,1fr);
  gap:14px; padding:0 4vw; z-index:2;
}

/* Hub \u2014 below cards */
.inv5-hub{
  grid-column:1/-1; margin-top:24px;
  background:linear-gradient(160deg, rgba(28,140,110,.14) 0%, rgba(28,140,110,.04) 100%);
  border:1px solid rgba(127,201,178,.18);
  border-radius:24px; padding:56px 32px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; position:relative; overflow:hidden;
  opacity:0;
}
.inv5-hub.vis{ animation:inv5In .9s cubic-bezier(.22,1,.36,1) .1s forwards; }
.inv5-hub:hover{ transform:translateY(-4px); box-shadow:0 24px 64px rgba(0,0,0,.3), 0 0 0 1px rgba(127,201,178,.15); }
.inv5-hub{ transition:transform .6s cubic-bezier(.22,1,.36,1), box-shadow .6s ease; }
.inv5-hub-glow{
  position:absolute; width:400px; height:400px; border-radius:50%;
  background:radial-gradient(circle, rgba(42,196,153,.22) 0%, transparent 65%);
  /* CPU-kör 2026-08-13: az inv5Glow pulzálás KI — blur(70px) réteg animálása
     volt a lap legdrágább effektje; statikus fény, köztes fényerőn */
  filter:blur(70px); opacity:.55;
  top:50%; left:50%; transform:translate(-50%,-50%); pointer-events:none;
}
.inv5-hub-h3{
  font-family:'Inter Tight',sans-serif; font-size:clamp(1.6rem,2.6vw,2.2rem);
  font-weight:800; letter-spacing:-0.03em; line-height:1.12;
  color:#F0F5F2; margin:0 0 14px; position:relative; z-index:1;
}
.inv5-hub-p{
  font-family:'Inter',sans-serif; font-size:0.92rem;
  color:rgba(234,241,237,.50); line-height:1.65; margin:0;
  max-width:280px; position:relative; z-index:1;
}

/* Satellite cards */
.inv5-sat{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  border-radius:22px; padding:30px 26px;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  position:relative; overflow:hidden; opacity:0;
  transition:transform .5s cubic-bezier(.22,1,.36,1),
             border-color .4s ease, box-shadow .5s ease;
}
.inv5-sat.vis{ animation:inv5In 750ms cubic-bezier(.22,1,.36,1) both; }
.inv5-sat:hover{
  transform:translateY(-6px) scale(1.02);
  border-color:rgba(127,201,178,.22);
  box-shadow:0 20px 56px rgba(0,0,0,.35), 0 0 0 1px rgba(127,201,178,.12), 0 0 24px rgba(42,196,153,.08);
}
.inv5-sat::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(127,201,178,.30) 40%, rgba(127,201,178,.30) 60%, transparent);
}
.inv5-sat-title{
  font-family:'Inter Tight',sans-serif; font-weight:800; font-size:1.35rem;
  color:rgba(160,230,200,.92); margin-bottom:18px; letter-spacing:-0.025em; line-height:1.1;
}
.inv5-sat-label{
  font-family:'Inter',sans-serif; font-size:0.56rem; font-weight:500;
  letter-spacing:0.14em; text-transform:uppercase;
  color:rgba(127,201,178,.35); margin-bottom:5px;
}
.inv5-sat-item{
  display:flex; align-items:flex-start; gap:7px;
  font-family:'Inter',sans-serif; font-size:0.80rem;
  color:rgba(234,241,237,.50); line-height:1.5; margin-bottom:3px;
}
.inv5-sat-dot-pro{ width:5px; height:5px; border-radius:50%; background:rgba(127,201,178,.65); flex-shrink:0; margin-top:6px; }
.inv5-sat-dot-con{ width:5px; height:5px; border-radius:2px; background:rgba(234,241,237,.15); flex-shrink:0; margin-top:6px; }
.inv5-sat-div{ height:1px; background:rgba(255,255,255,.06); margin:12px 0; }

/* Closing */
.inv5-close{
  text-align:center; margin-top:72px; position:relative; z-index:2;
  opacity:0;
}
.inv5-close.vis{ animation:inv5In .8s cubic-bezier(.22,1,.36,1) .3s forwards; }
.inv5-close-lead{
  font-family:'Inter',sans-serif; font-size:1rem;
  color:rgba(234,241,237,.45); margin-bottom:8px;
}
.inv5-close-big{
  font-family:'Inter Tight',sans-serif; font-weight:800;
  font-size:clamp(1.4rem,2.6vw,2rem); color:#F0F5F2;
  letter-spacing:-0.02em; margin-bottom:28px;
}
.inv5-close-big em{ font-style:normal; color:rgba(127,201,178,.85); }

@media(max-width:860px){
  .inv5{ padding:88px 0; }
  .inv5-orbital{ grid-template-columns:1fr; gap:14px; }
  .inv5-hub{ grid-column:1; margin-top:14px; }
}

/* \u2500\u2500 BLOKK 06 \u2014 SZEKTOROK (premium orbital) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
@keyframes sec6In{
  from{ opacity:0; transform:translateY(28px) scale(.97); filter:blur(6px); }
  to{   opacity:1; transform:translateY(0) scale(1);      filter:blur(0); }
}
.sec6{
  padding:128px 0; position:relative; overflow:hidden;
  background:linear-gradient(170deg, #021610 0%, #010a08 45%, #030f0c 100%);
}
.sec6-ambient{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 50% 40% at 30% 50%, rgba(28,140,110,.06) 0%, transparent 55%),
    radial-gradient(ellipse 40% 35% at 75% 35%, rgba(100,60,180,.04) 0%, transparent 50%);
}
/* Network lines */
.sec6-net{
  position:absolute; inset:0; pointer-events:none; opacity:.12;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(127,201,178,.4) 1px, transparent 1px),
    radial-gradient(circle at 50% 60%, rgba(127,201,178,.3) 1px, transparent 1px),
    radial-gradient(circle at 80% 25%, rgba(127,201,178,.35) 1px, transparent 1px),
    radial-gradient(circle at 65% 75%, rgba(127,201,178,.25) 1px, transparent 1px),
    radial-gradient(circle at 35% 80%, rgba(127,201,178,.3) 1px, transparent 1px);
  background-size:100% 100%;
}

.sec6-intro{ max-width:740px; margin:0 auto 72px; text-align:center; position:relative; z-index:2; opacity:0; }
.sec6-intro.vis{ animation:sec6In .9s cubic-bezier(.22,1,.36,1) forwards; }
.sec6-eyebrow{
  font-family:'Inter',sans-serif; font-size:0.68rem; font-weight:500;
  letter-spacing:0.22em; text-transform:uppercase; color:rgba(127,201,178,.50); margin-bottom:18px;
}
.sec6-h2{
  font-family:'Inter Tight',sans-serif; font-size:clamp(1.8rem,3.8vw,2.8rem);
  font-weight:800; letter-spacing:-0.03em; line-height:1.1;
  color:#F0F5F2; margin:0 0 16px;
}
.sec6-sub{
  font-family:'Inter',sans-serif; font-size:clamp(1rem,1.3vw,1.12rem);
  color:rgba(234,241,237,.45); line-height:1.7; margin:0;
}

/* Cards grid \u2014 organic: 3 cols, varied heights */
.sec6-grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:16px; max-width:1100px; margin:0 auto; padding:0 4vw;
  position:relative; z-index:2;
}
.sec6-card{
  border-radius:22px; padding:30px 26px; position:relative; overflow:hidden;
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.06);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  opacity:0;
  transition:transform .55s cubic-bezier(.22,1,.36,1),
             border-color .4s ease, box-shadow .55s ease;
}
.sec6-card.vis{ animation:sec6In 750ms cubic-bezier(.22,1,.36,1) both; }
.sec6-card:hover{
  transform:translateY(-6px) scale(1.015);
  border-color:rgba(255,255,255,.12);
}
.sec6-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--card-accent,.3) 40%, var(--card-accent,.3) 60%, transparent);
}
/* Per-card glow */
.sec6-card-glow{
  position:absolute; width:200px; height:200px; border-radius:50%;
  top:-60px; right:-40px; pointer-events:none;
  filter:blur(60px); opacity:.35;
  transition:opacity .4s ease;
}
.sec6-card:hover .sec6-card-glow{ opacity:.55; }

.sec6-card-label{
  font-family:'Inter',sans-serif; font-size:0.60rem; font-weight:500;
  letter-spacing:0.16em; text-transform:uppercase; margin-bottom:10px;
  display:flex; align-items:center; gap:7px;
}
.sec6-card-title{
  font-family:'Inter Tight',sans-serif; font-weight:800; font-size:1.2rem;
  color:rgba(234,241,237,.92); margin-bottom:18px; letter-spacing:-0.015em; line-height:1.15;
}
.sec6-chips{
  display:flex; flex-wrap:wrap; gap:7px;
}
.sec6-chip{
  display:inline-flex; align-items:center; gap:5px;
  background:rgba(255,255,255,0.82);
  border:1px solid rgba(255,255,255,.35);
  border-radius:8px; padding:5px 10px;
  font-family:'Inter',sans-serif; font-size:0.72rem; font-weight:700;
  color:rgba(7,28,24,.88);
  transition:background .3s ease, border-color .3s ease;
}
.sec6-chip:hover{
  background:rgba(255,255,255,.92);
  border-color:rgba(255,255,255,.50);
  color:rgba(234,241,237,.85);
}

/* Featured card (6th) */
.sec6-featured{
  grid-column:1/-1; border-radius:24px; padding:40px 36px;
  background:linear-gradient(135deg, rgba(80,50,160,.08) 0%, rgba(42,196,153,.06) 50%, rgba(28,140,110,.04) 100%);
  border:1px solid rgba(120,80,200,.12);
}
.sec6-featured:hover{
  border-color:rgba(120,80,200,.22);
  box-shadow:0 20px 56px rgba(0,0,0,.3), 0 0 32px rgba(100,60,180,.08), 0 0 0 1px rgba(120,80,200,.10);
}
.sec6-featured .sec6-card-glow{
  width:300px; height:300px; top:-80px; right:auto; left:50%;
  transform:translateX(-50%);
  background:radial-gradient(circle, rgba(100,60,180,.18) 0%, rgba(42,196,153,.08) 50%, transparent 70%);
}
.sec6-featured .sec6-card-title{
  font-size:1.5rem; margin-bottom:22px;
}
.sec6-featured .sec6-chips{
  justify-content:center;
}

/* Closing */
.sec6-close{
  text-align:center; margin-top:80px; position:relative; z-index:2; opacity:0;
}
.sec6-close.vis{ animation:sec6In .8s cubic-bezier(.22,1,.36,1) .2s forwards; }
.sec6-close-lead{
  font-family:'Inter',sans-serif; font-size:1rem;
  color:rgba(234,241,237,.40); margin-bottom:6px;
}
.sec6-close-big{
  font-family:'Inter Tight',sans-serif; font-weight:800;
  font-size:clamp(1.6rem,3.2vw,2.4rem); letter-spacing:-0.025em;
  line-height:1.1; margin-bottom:32px;
}
.sec6-close-big em{ font-style:normal; }
.sec6-close-big .w1{ color:rgba(234,241,237,.92); }
.sec6-close-big .w2{
  background:linear-gradient(120deg, rgba(127,201,178,.95), rgba(100,160,220,.85), rgba(140,100,200,.80));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

@media(max-width:860px){
  .sec6{ padding:88px 0; }
  .sec6-grid{ grid-template-columns:1fr; }
  .sec6-featured{ grid-column:1; }
}

/* \u2500\u2500 BLOKK 07 \u2014 KINEK SZ\xD3L \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
.fit2{ padding:112px 0; background:var(--bg); position:relative; overflow:hidden; }
.fit2::before{ content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse 55% 45% at 15% 70%, rgba(27,138,110,0.045) 0%, transparent 55%); }
.fit2-intro{ max-width:600px; margin:0 auto 68px; text-align:center; opacity:0; }
.fit2-intro.vis{ animation:revIn .85s cubic-bezier(.22,1,.36,1) forwards; }
.fit2-h2{ font-family:'Inter Tight',sans-serif; font-size:clamp(1.9rem,3.6vw,2.7rem); font-weight:700; letter-spacing:-0.024em; color:var(--ink); margin:0 0 8px; line-height:1.1; }
.fit2-lead{ font-family:'Inter',sans-serif; font-size:1rem; color:var(--muted); line-height:1.7; margin:0; }
.fit2-cols{ display:grid; grid-template-columns:1fr 1px 1fr; gap:0; align-items:start; }
.fit2-divider{ background:var(--line); align-self:stretch; margin:0 40px; }
.fit2-col{ }
.fit2-col-head{ display:flex; align-items:center; gap:10px; margin-bottom:28px; }
.fit2-col-badge{
  width:30px; height:30px; border-radius:9px; display:grid; place-items:center; flex:0 0 auto;
}
.fit2-col-title{ font-family:'Inter Tight',sans-serif; font-weight:650; font-size:1.05rem; color:var(--ink); }
@keyframes fitIn{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:translateY(0); } }
.fit2-item{ display:flex; align-items:flex-start; gap:10px; padding:13px 0; border-bottom:1px solid var(--line); opacity:0; }
.fit2-item:last-child{ border-bottom:none; }
.fit2-item.vis{ animation:fitIn .55s cubic-bezier(.22,1,.36,1) both; }
.fit2-item-dot{ width:6px; height:6px; border-radius:50%; flex:0 0 auto; margin-top:6px; }
.fit2-item-text{ font-family:'Inter',sans-serif; font-size:0.92rem; color:var(--ink); line-height:1.55; }
.fit2-item-note{ font-family:'Inter',sans-serif; font-size:0.80rem; color:var(--muted); line-height:1.5; margin-top:3px; }
.fit2-closing{
  margin-top:72px; text-align:center; max-width:600px; margin-left:auto; margin-right:auto;
  opacity:0;
}
.fit2-closing.vis{ animation:revIn .8s cubic-bezier(.22,1,.36,1) .3s forwards; }
.fit2-closing-lead{ font-family:'Inter',sans-serif; font-size:1rem; color:var(--muted); margin-bottom:8px; }
.fit2-closing-big{ font-family:'Inter Tight',sans-serif; font-weight:700; font-size:clamp(1.4rem,2.6vw,1.9rem); color:var(--ink); letter-spacing:-0.014em; line-height:1.25; }
.fit2-closing-big span{ color:var(--green-700); }
@media(max-width:860px){ .fit2-cols{ grid-template-columns:1fr; gap:36px; } .fit2-divider{ display:none; } }

/* \u2500\u2500 BLOKK 08 \u2014 \xC9LETGAL\xC9RIA (infinite marquee) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
@keyframes lifeMarquee{
  0%{ transform:translateX(0); }
  100%{ transform:translateX(-50%); }
}
.life8{ padding:96px 0 0; background:var(--petrol); position:relative; overflow:hidden; }
.life8-intro{ max-width:600px; margin:0 auto 56px; text-align:center; opacity:0; }
.life8-intro.vis{ animation:revIn .85s cubic-bezier(.22,1,.36,1) forwards; }
.life8-title{
  font-family:'Inter Tight',sans-serif;
  font-size:clamp(2rem,4vw,3.2rem); font-weight:700; color:var(--paper-dk);
  margin:0 0 14px; line-height:1.1; letter-spacing:-0.03em;
}
.life8-sub{
  font-family:'Inter',sans-serif; font-size:1rem;
  color:var(--muted-dk); line-height:1.75; font-style:italic; margin:0;
}
.life8-track-wrap{
  overflow:hidden; position:relative;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
}
.life8-track{
  display:flex; gap:18px;
  animation:lifeMarquee 60s linear infinite;
  width:max-content;
}
.life8-track:hover{ animation-play-state:paused; }
.life8-card{
  flex-shrink:0; width:320px; height:420px;
  border-radius:24px; overflow:hidden; position:relative;
  background:#0a0f0d; cursor:pointer;
  transition:transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s ease;
}
.life8-card:hover{
  transform:translateY(-8px) scale(1.04);
  box-shadow:0 20px 50px rgba(0,0,0,.35), 0 0 0 1px rgba(127,201,178,.12);
}
.life8-card img{
  width:100%; height:100%; object-fit:cover;
  transition:filter .4s ease, opacity .4s ease;
  filter:brightness(.88); opacity:.92;
}
.life8-card:hover img{ filter:brightness(1.02); opacity:1; }
.life8-card-overlay{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to top, rgba(0,0,0,.65) 0%, rgba(0,0,0,.08) 40%, transparent 60%);
}
.life8-card-label{
  position:absolute; bottom:22px; left:22px; z-index:2;
  font-family:'Inter Tight',sans-serif;
  font-size:0.80rem; font-weight:600; letter-spacing:0.08em; text-transform:uppercase;
  color:rgba(255,255,255,.75);
  transition:color .3s ease;
}
.life8-card:hover .life8-card-label{ color:rgba(255,255,255,.98); }
.life8-strip{
  background:rgba(10,14,12,0.55); padding:26px 24px;
  display:flex; align-items:center; justify-content:center; margin-top:48px;
}
.life8-strip-q{
  font-family:'Inter Tight',sans-serif; font-size:0.88rem;
  color:rgba(234,241,237,0.45); font-style:italic; text-align:center;
}
@media(max-width:860px){
  .life8-card{ width:260px; height:340px; border-radius:18px; }
}

/* \u2500\u2500 BLOKK 09 \u2014 ZAJSZ\u0170R\xC9S (phone stories) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
.noise9{ padding:112px 0; background:var(--bg); position:relative; overflow:hidden; }
.noise9::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 40% 50% at 25% 40%, rgba(27,138,110,0.04) 0%, transparent 60%); }
.noise9-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:72px;
  max-width:1200px; margin:0 auto; padding:0 4vw; align-items:center;
}
.noise9-phone{ display:flex; justify-content:center; }
.noise9-device{
  width:260px; background:#0A0A0A; border-radius:40px; padding:12px;
  box-shadow:0 40px 80px rgba(10,22,38,0.22), 0 0 0 1.5px rgba(255,255,255,0.07);
}
.noise9-notch{ width:90px; height:26px; background:#0A0A0A; border-radius:0 0 18px 18px; margin:0 auto 6px; }
.noise9-screen{
  border-radius:28px; overflow:hidden; aspect-ratio:9/19; background:#111; position:relative;
}
.noise9-slide{
  position:absolute; inset:0;
  opacity:0; transition:opacity 1.2s cubic-bezier(.22,1,.36,1);
}
.noise9-slide.active{ opacity:1; }
.noise9-slide img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.noise9-slide-overlay{
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.15) 40%, transparent 60%);
  pointer-events:none;
}
.noise9-slide-text{
  position:absolute; bottom:20px; left:16px; right:16px; z-index:2;
  font-family:'Inter',sans-serif; font-size:0.62rem; font-weight:500;
  color:rgba(255,255,255,.82); line-height:1.55; text-align:left;
}
.noise9-dots{
  position:absolute; bottom:8px; left:50%; transform:translateX(-50%); z-index:3;
  display:flex; gap:5px;
}
.noise9-dot{
  width:5px; height:5px; border-radius:50%;
  background:rgba(255,255,255,.25); transition:background .4s ease, transform .4s ease;
}
.noise9-dot.active{ background:rgba(255,255,255,.85); transform:scale(1.3); }

.noise9-text{ max-width:520px; }
.noise9-eyebrow{
  font-family:'Inter',sans-serif; font-size:0.68rem; font-weight:500;
  letter-spacing:0.20em; text-transform:uppercase; color:var(--green-700);
  display:flex; align-items:center; gap:10px; margin-bottom:18px;
}
.noise9-eyebrow::before{ content:""; width:20px; height:1px; background:var(--green); }
.noise9-h2{
  font-family:'Inter Tight',sans-serif; font-size:clamp(1.8rem,3.2vw,2.5rem);
  font-weight:800; letter-spacing:-0.022em; line-height:1.12;
  color:var(--ink); margin:0 0 18px;
}
.noise9-h2 em{ font-style:normal; color:var(--green-700); }
.noise9-body{
  font-family:'Inter',sans-serif; font-size:1rem; font-weight:400;
  color:var(--muted); line-height:1.75; margin:0 0 32px;
}
.noise9-quote{
  padding:22px 24px; border-left:2px solid var(--green);
  background:rgba(27,138,110,0.04); border-radius:0 14px 14px 0;
}
.noise9-quote p{
  font-family:'Inter Tight',sans-serif; font-weight:600;
  font-size:1.05rem; color:var(--ink); margin:0; line-height:1.35;
}
.noise9-note{
  font-family:'Inter',sans-serif; font-size:0.92rem; font-weight:400;
  color:var(--muted); line-height:1.65; margin-top:18px;
}
@media(max-width:860px){
  .noise9-grid{ grid-template-columns:1fr; gap:48px; }
  .noise9-phone{ order:-1; }
  .noise9-device{ width:220px; }
}

/* \u2500\u2500 BLOKK 10 \u2014 KAPCSOLAT (editorial two-col) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
@keyframes pb10In{
  from{ opacity:0; transform:translateY(40px); filter:blur(10px); }
  to{   opacity:1; transform:translateY(0);    filter:blur(0); }
}
@keyframes pb10ImgIn{
  from{ opacity:0; transform:translateX(60px); filter:blur(8px); }
  to{   opacity:.95; transform:translateX(0);  filter:blur(0); }
}
.pb10{ position:relative; overflow:hidden; min-height:100vh;
  background:linear-gradient(135deg, #031c18 0%, #02110f 45%, #010605 100%); }
.pb10-video{ position:absolute; inset:0; z-index:0; width:100%; height:100%;
  object-fit:cover; pointer-events:none; }
.pb10-ovr1{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:rgba(0,0,0,0.48); }
.pb10-ovr2{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,20,16,0.65)); }
.pb10-radial{ position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(circle at 75% 40%, rgba(28,155,120,.18) 0%, rgba(8,28,24,.12) 25%, rgba(3,18,15,.95) 60%, transparent 100%); }
.pb10-glow{
  position:absolute; z-index:1; pointer-events:none;
  width:800px; height:900px; border-radius:50%;
  right:2%; bottom:0; transform:translateY(10%);
  background:radial-gradient(ellipse 55% 65% at 50% 45%, rgba(28,140,110,.10) 0%, rgba(20,100,80,.05) 40%, transparent 75%);
  filter:blur(90px); opacity:.55;
}

.pb10-content{
  position:relative; z-index:3; max-width:1200px;
  margin:0 auto; padding:0 4vw;
  display:flex; align-items:center; min-height:100vh;
}
.pb10-left{ max-width:980px; width:58vw; }
.pb10-h2{
  font-family:'Inter Tight',sans-serif;
  font-size:clamp(28px,3.6vw,54px); font-weight:700; line-height:1.0;
  letter-spacing:-0.05em; color:#fff; margin:0 0 24px;
  opacity:0;
}
.pb10-h2.vis{ animation:pb10In .9s cubic-bezier(.22,1,.36,1) forwards; }
.pb10-h2 em{ font-style:normal; color:rgba(127,201,178,0.85); }
.pb10-sub{
  font-family:'Inter Tight',sans-serif;
  font-size:clamp(17px,1.3vw,22px); line-height:1.6; color:rgba(255,255,255,0.72);
  max-width:540px; margin:0; opacity:0;
}
.pb10-sub.vis{ animation:pb10In .9s cubic-bezier(.22,1,.36,1) .15s forwards; }


@media(max-width:860px){
  .pb10-content{ min-height:75vh; }
  .pb10-left{ max-width:100%; width:100%; padding:80px 0 120px; }
  .pb10-h2{ font-size:clamp(28px,7.5vw,42px); }
}

.brand-vid2-inner{ aspect-ratio:16/9; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; padding:36px; position:relative; }
.brand-vid2-glow{ position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse 55% 45% at 50% 0%, rgba(27,138,110,0.13) 0%, transparent 60%); }
.brand-vid2-play{ width:60px; height:60px; border-radius:50%; background:rgba(27,138,110,0.14); border:1px solid rgba(127,201,178,0.28); display:grid; place-items:center; cursor:pointer; position:relative; z-index:1; transition:all .22s ease; box-shadow:0 0 28px rgba(27,138,110,0.18); }
.brand-vid2-play:hover{ background:rgba(27,138,110,0.35); transform:scale(1.08); }
.brand-vid2-label{ font-family:'Inter',sans-serif; font-size:0.60rem; text-transform:uppercase; letter-spacing:0.16em; color:rgba(127,201,178,0.42); z-index:1; }
.brand-vid2-title{ font-family:'Inter Tight',sans-serif; font-size:1.05rem; font-weight:600; color:rgba(234,241,237,0.82); text-align:center; max-width:380px; line-height:1.35; z-index:1; }
.partner2-closing{ margin-top:56px; text-align:center; opacity:0; }
.partner2-closing.vis{ animation:revIn .8s cubic-bezier(.22,1,.36,1) .3s forwards; }
.partner2-closing-lead{ font-family:'Inter',sans-serif; font-size:1rem; color:var(--muted); margin-bottom:8px; }
.partner2-closing-big{ font-family:'Inter Tight',sans-serif; font-weight:700; font-size:clamp(1.4rem,2.6vw,1.9rem); color:var(--ink); letter-spacing:-0.014em; }
.partner2-closing-big span{ color:var(--green-700); }
@media(max-width:860px){ .partner2-grid{ grid-template-columns:1fr; } .brand-vid2-inner{ aspect-ratio:auto; min-height:220px; } }

/* \u2500\u2500 BLOKK 11 \u2014 CSAPAT \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
.team2{ padding:112px 0; background:var(--bg); position:relative; overflow:hidden; }
.team2::before{ content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse 50% 45% at 80% 60%, rgba(27,138,110,0.04) 0%, transparent 55%); }
.team2-intro{ max-width:580px; margin:0 auto 60px; text-align:center; opacity:0; }
.team2-intro.vis{ animation:revIn .85s cubic-bezier(.22,1,.36,1) forwards; }
.team2-h2{ font-family:'Inter Tight',sans-serif; font-size:clamp(1.75rem,3.2vw,2.5rem); font-weight:700; letter-spacing:-0.022em; color:var(--ink); margin:0 0 12px; line-height:1.1; }
.team2-sub{ font-family:'Inter',sans-serif; font-size:1rem; color:var(--muted); line-height:1.75; margin:0; }
.team2-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start; }
.team2-photo{
  border-radius:18px; overflow:hidden; background:var(--bg-2); border:1px solid var(--line);
  aspect-ratio:3/4; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
  position:relative; opacity:0;
  transition:opacity .8s ease, transform .8s ease;
}
.team2-photo.vis{ opacity:1; transform:translateY(0)!important; }
.team2-photo-dashed{ position:absolute; inset:10px; border:1.5px dashed var(--line); border-radius:10px; }
.team2-photo-icon{ font-size:2rem; opacity:0.25; }
.team2-photo-text{ font-family:'Inter',sans-serif; font-size:0.60rem; text-transform:uppercase; letter-spacing:0.14em; color:var(--muted); text-align:center; }
.team2-photo img{ width:100%; height:100%; object-fit:cover; position:absolute; inset:0; border-radius:18px; }
.team2-cards{ display:flex; flex-direction:column; gap:14px; }
.role2-card{
  background:rgba(255,255,255,0.82); border:1px solid rgba(10,58,50,0.08); border-radius:16px; padding:24px 22px;
  backdrop-filter:blur(8px);
  box-shadow:0 1px 0 rgba(255,255,255,0.9) inset, 0 4px 14px rgba(10,26,23,0.05);
  opacity:0;
  transition:transform 540ms cubic-bezier(.22,1,.36,1), box-shadow 540ms ease, border-color 480ms ease;
}
.role2-card.vis{ animation:revIn 750ms cubic-bezier(.22,1,.36,1) both; }
.role2-card:hover{ transform:translateY(-3px); box-shadow:0 1px 0 rgba(255,255,255,0.95) inset, 0 12px 36px rgba(10,26,23,0.09); border-color:rgba(27,138,110,0.12); }
.role2-head{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.role2-avatar{ width:40px; height:40px; border-radius:50%; background:var(--bg-2); border:1px solid var(--line); display:grid; place-items:center; flex:0 0 auto; font-size:1rem; overflow:hidden; }
.role2-avatar img{ width:100%; height:100%; object-fit:cover; }
.role2-name{ font-family:'Inter Tight',sans-serif; font-weight:700; font-size:1.0rem; color:var(--ink); margin-bottom:2px; }
.role2-title{ font-family:'Inter',sans-serif; font-size:0.60rem; text-transform:uppercase; letter-spacing:0.10em; color:var(--green-700); }
.role2-note{ font-family:'Inter',sans-serif; font-size:0.82rem; color:var(--green-700); margin-bottom:12px; font-style:italic; line-height:1.5; }
.role2-list{ display:flex; flex-direction:column; gap:5px; }
.role2-item{ display:flex; align-items:flex-start; gap:7px; font-family:'Inter',sans-serif; font-size:0.87rem; color:var(--muted); line-height:1.5; }
.role2-dot{ width:5px; height:5px; border-radius:50%; background:var(--green); flex:0 0 auto; margin-top:6px; }
.team2-closing{ margin-top:48px; padding:22px 28px; background:var(--petrol); border-radius:16px; text-align:center; opacity:0; }
.team2-closing.vis{ animation:revIn .8s cubic-bezier(.22,1,.36,1) .3s forwards; }
.team2-closing p{ font-family:'Inter Tight',sans-serif; font-weight:600; font-size:1.05rem; color:var(--paper-dk); margin:0; line-height:1.4; }
.team2-closing span{ color:#7FC9B2; }
@media(max-width:860px){ .team2-grid{ grid-template-columns:1fr; } .team2-photo{ aspect-ratio:4/3; } }

/* \u2500\u2500 BLOKK 12 \u2014 SOCIAL PROOF \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
.proof2{ padding:112px 0; background:var(--bg-2, #F4F6F3); position:relative; overflow:hidden; }
.proof2::before{ content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse 55% 45% at 20% 40%, rgba(27,138,110,0.05) 0%, transparent 55%); }
.proof2-intro{ max-width:680px; margin:0 auto 60px; opacity:0; }
.proof2-intro.vis{ animation:revIn .85s cubic-bezier(.22,1,.36,1) forwards; }
.proof2-h2{ font-family:'Inter Tight',sans-serif; font-size:clamp(1.8rem,3.4vw,2.6rem); font-weight:700; letter-spacing:-0.022em; line-height:1.12; color:var(--ink); margin:0 0 12px; }
.proof2-sub{ font-family:'Inter',sans-serif; font-size:1rem; color:var(--muted); line-height:1.75; margin:0; }
/* Featured video */
.proof2-vid-main{ border-radius:20px; overflow:hidden; background:linear-gradient(160deg,#0A2820 0%,#061610 100%); border:1px solid rgba(127,201,178,0.12); box-shadow:0 28px 72px rgba(10,26,23,0.18); margin-bottom:14px; opacity:0; }
.proof2-vid-main.vis{ animation:revIn .9s cubic-bezier(.22,1,.36,1) forwards; }
.proof2-vid-main-inner{ aspect-ratio:16/9; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; padding:48px; position:relative; }
.proof2-vid-glow{ position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse 50% 40% at 50% 0%, rgba(27,138,110,0.16) 0%, transparent 60%); }
.proof2-play{ width:64px; height:64px; border-radius:50%; background:rgba(27,138,110,0.15); border:1px solid rgba(127,201,178,0.28); display:grid; place-items:center; cursor:pointer; z-index:1; transition:all .22s ease; box-shadow:0 0 32px rgba(27,138,110,0.20); }
.proof2-play:hover{ background:rgba(27,138,110,0.38); transform:scale(1.08); }
.proof2-vid-lbl{ font-family:'Inter',sans-serif; font-size:0.62rem; text-transform:uppercase; letter-spacing:0.16em; color:rgba(127,201,178,0.42); z-index:1; }
.proof2-vid-title{ font-family:'Inter Tight',sans-serif; font-size:1.1rem; font-weight:600; color:rgba(234,241,237,0.85); text-align:center; z-index:1; line-height:1.35; }
/* Small vids */
.proof2-vid-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:48px; }
.proof2-vid-sm{ border-radius:14px; overflow:hidden; background:rgba(10,40,30,0.65); border:1px solid rgba(127,201,178,0.10); opacity:0; transition:transform .25s ease, border-color .25s ease; }
.proof2-vid-sm.vis{ animation:revIn .7s cubic-bezier(.22,1,.36,1) both; }
.proof2-vid-sm:hover{ transform:translateY(-3px); border-color:rgba(127,201,178,0.22); }
.proof2-vid-sm-inner{ aspect-ratio:16/9; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:14px; }
.proof2-play-sm{ width:30px; height:30px; border-radius:50%; border:1px solid rgba(127,201,178,0.30); background:rgba(27,138,110,0.12); display:grid; place-items:center; }
.proof2-vid-sm-lbl{ font-family:'Inter',sans-serif; font-size:0.56rem; text-transform:uppercase; letter-spacing:0.1em; color:rgba(127,201,178,0.40); }
/* Google */
.proof2-section-label{ font-family:'Inter',sans-serif; font-size:0.62rem; text-transform:uppercase; letter-spacing:0.16em; color:var(--muted); display:flex; align-items:center; gap:10px; margin-bottom:18px; }
.proof2-section-label::before{ content:""; display:inline-block; width:18px; height:1px; background:var(--green); }
.proof2-google-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:40px; }
.proof2-google-card{ background:rgba(255,255,255,0.82); border:1px solid rgba(10,58,50,0.08); border-radius:14px; padding:18px 16px; opacity:0; backdrop-filter:blur(6px); box-shadow:0 1px 0 rgba(255,255,255,0.9) inset, 0 3px 12px rgba(10,26,23,0.05); transition:transform .25s ease, box-shadow .25s ease; }
.proof2-google-card.vis{ animation:revIn .7s cubic-bezier(.22,1,.36,1) both; }
.proof2-google-card:hover{ transform:translateY(-3px); box-shadow:0 1px 0 rgba(255,255,255,0.95) inset, 0 10px 30px rgba(10,26,23,0.09); }
.proof2-stars{ font-size:0.82rem; margin-bottom:8px; }
.proof2-google-text{ font-family:'Inter',sans-serif; font-size:0.83rem; color:var(--ink); line-height:1.55; margin:0 0 12px; }
.proof2-google-author{ font-family:'Inter',sans-serif; font-size:0.58rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--muted); }
.proof2-google-ph{ border:1.5px dashed rgba(10,58,50,0.10); border-radius:10px; padding:22px; text-align:center; }
.proof2-google-ph-icon{ font-size:1.4rem; opacity:0.25; margin-bottom:6px; }
.proof2-google-ph-text{ font-family:'Inter',sans-serif; font-size:0.56rem; text-transform:uppercase; letter-spacing:0.10em; color:var(--muted); }
/* Msg */
.proof2-msg-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:56px; }
.proof2-msg-card{ background:rgba(255,255,255,0.82); border:1px solid rgba(10,58,50,0.08); border-radius:14px; overflow:hidden; opacity:0; backdrop-filter:blur(6px); box-shadow:0 1px 0 rgba(255,255,255,0.9) inset, 0 3px 12px rgba(10,26,23,0.05); }
.proof2-msg-card.vis{ animation:revIn .7s cubic-bezier(.22,1,.36,1) both; }
.proof2-msg-head{ padding:9px 14px; border-bottom:1px solid rgba(10,58,50,0.06); display:flex; align-items:center; gap:7px; font-family:'Inter',sans-serif; font-size:0.58rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--muted); }
.proof2-msg-body{ padding:14px; }
.proof2-msg-ph-dashed{ border:1.5px dashed rgba(10,58,50,0.10); border-radius:8px; padding:18px; display:flex; flex-direction:column; align-items:center; gap:7px; }
.proof2-msg-ph-icon{ font-size:1.4rem; opacity:0.25; }
.proof2-msg-ph-text{ font-family:'Inter',sans-serif; font-size:0.56rem; text-transform:uppercase; letter-spacing:0.10em; color:var(--muted); text-align:center; }
/* CTA */
.proof2-cta{ text-align:center; opacity:0; }
.proof2-cta.vis{ animation:revIn .8s cubic-bezier(.22,1,.36,1) .2s forwards; }
.proof2-cta-label{ font-family:'Inter Tight',sans-serif; font-size:clamp(1.5rem,3vw,2rem); font-weight:700; letter-spacing:-0.016em; color:var(--ink); margin-bottom:22px; }
@media(max-width:860px){ .proof2-vid-row,.proof2-google-grid,.proof2-msg-row{ grid-template-columns:1fr; } }

/* \u2500\u2500 BLOKK 13 \u2014 CTA \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
.cta14{ padding:120px 0; background:var(--petrol); position:relative; overflow:hidden; }
.cta14::before{ content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse 65% 55% at 50% -10%, rgba(32,160,110,0.22) 0%, rgba(22,110,76,0.08) 45%, transparent 65%); }
.cta14::after{ content:""; position:absolute; inset:0; pointer-events:none; background-image:linear-gradient(rgba(127,201,178,0.018) 1px, transparent 1px),linear-gradient(90deg,rgba(127,201,178,0.018) 1px, transparent 1px); background-size:52px 52px; }
.cta14-inner{ position:relative; z-index:1; max-width:680px; margin:0 auto; text-align:center; padding:0 24px; opacity:0; }
.cta14-inner.vis{ animation:revIn .9s cubic-bezier(.22,1,.36,1) .1s forwards; }
.cta14-h2{ font-family:'Inter Tight',sans-serif; font-weight:700; font-size:clamp(2rem,4.8vw,3.2rem); line-height:1.1; letter-spacing:-0.028em; color:var(--paper-dk); margin:0 0 22px; }
.cta14-h2 span{ color:var(--gold); font-style:italic; }
.cta14-body{ font-family:'Inter',sans-serif; font-size:1.05rem; color:var(--muted-dk); line-height:1.78; margin:0 auto 36px; max-width:520px; }
.cta14-list{ display:flex; flex-direction:column; gap:9px; max-width:400px; margin:0 auto 44px; text-align:left; }
.cta14-item{ display:flex; align-items:flex-start; gap:10px; font-family:'Inter',sans-serif; font-size:0.95rem; color:var(--paper-dk); line-height:1.5; }
.cta14-check{ width:20px; height:20px; border-radius:6px; background:rgba(127,201,178,0.15); border:1px solid rgba(127,201,178,0.25); display:grid; place-items:center; flex:0 0 auto; margin-top:1px; }
.cta14-btn{
  display:inline-flex; align-items:center; gap:0.6rem;
  font-family:'Inter Tight',sans-serif; font-weight:700; font-size:1.1rem; letter-spacing:-0.008em;
  padding:1.1rem 2.4rem; border-radius:999px; border:none; cursor:pointer;
  background:linear-gradient(155deg,#1E9C7C 0%,#146050 100%);
  color:rgba(255,255,255,0.96);
  box-shadow:0 1px 0 rgba(255,255,255,0.10) inset, 0 6px 28px rgba(27,138,110,0.35), 0 2px 6px rgba(0,0,0,0.22);
  transition:transform .24s cubic-bezier(.22,1,.36,1), box-shadow .24s cubic-bezier(.22,1,.36,1);
}
.cta14-btn:hover{ transform:translateY(-2px) scale(1.016); box-shadow:0 1px 0 rgba(255,255,255,0.12) inset, 0 12px 40px rgba(27,138,110,0.42), 0 3px 8px rgba(0,0,0,0.26); }
.cta14-btn:active{ transform:translateY(0) scale(1); }
.cta14-btn.pulse{ animation:ctaPulse 1.2s ease .6s 1; }
@keyframes ctaPulse{ 0%{box-shadow:0 1px 0 rgba(255,255,255,0.10) inset,0 6px 28px rgba(27,138,110,0.35);} 50%{box-shadow:0 1px 0 rgba(255,255,255,0.12) inset,0 10px 48px rgba(27,138,110,0.55),0 0 0 8px rgba(27,138,110,0.10);} 100%{box-shadow:0 1px 0 rgba(255,255,255,0.10) inset,0 6px 28px rgba(27,138,110,0.35);} }
.cta14-meta{ margin-top:22px; display:flex; align-items:center; justify-content:center; gap:1.6rem; flex-wrap:wrap; }
.cta14-meta-item{ font-family:'Inter',sans-serif; font-size:0.68rem; color:rgba(234,241,237,0.35); display:flex; align-items:center; gap:0.4rem; text-transform:uppercase; letter-spacing:0.10em; }
@media(max-width:860px){ .cta14-btn{ width:100%; justify-content:center; font-size:1rem; } .cta14-meta{ flex-direction:column; gap:0.5rem; } }

/* \u2500\u2500 R\xD3LAM + GYIK (inline funnel) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
.about-sec{
  padding:112px 0 80px; position:relative; overflow:hidden;
  background:linear-gradient(170deg, #031a16 0%, #010c0a 50%, #020807 100%);
}
.about-sec::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 45% 40% at 65% 30%, rgba(28,140,110,.06) 0%, transparent 55%),
             radial-gradient(ellipse 30% 40% at 20% 70%, rgba(100,60,180,.03) 0%, transparent 50%);
}
.about-intro{ max-width:780px; margin-bottom:56px; position:relative; z-index:1; }
.about-eyebrow{
  font-family:'Inter',sans-serif; font-size:.68rem; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; color:rgba(127,201,178,.50);
  display:flex; align-items:center; gap:10px; margin-bottom:18px;
}
.about-eyebrow::before{ content:""; width:20px; height:1px; background:rgba(42,196,153,.6); }
.about-h2{
  font-family:'Inter Tight',sans-serif; font-weight:800;
  font-size:clamp(1.6rem,3.6vw,2.6rem); letter-spacing:-.03em;
  line-height:1.1; color:#F0F5F2; margin-bottom:18px;
}
.about-h2 em{ font-style:normal; color:rgba(127,201,178,.85); }
.about-lead{
  font-family:'Inter',sans-serif; font-size:clamp(1rem,1.2vw,1.1rem);
  color:rgba(234,241,237,.48); line-height:1.75;
}
.about-stats{
  display:flex; gap:36px; flex-wrap:wrap; padding:40px 0;
  border-top:1px solid rgba(127,201,178,.08);
  border-bottom:1px solid rgba(127,201,178,.08);
  margin-bottom:56px; position:relative; z-index:1;
}
.about-stat-num{
  font-family:'Inter Tight',sans-serif; font-weight:800; font-size:1.6rem;
  color:rgba(127,201,178,.85); letter-spacing:-.02em;
}
.about-stat-label{
  font-family:'Inter',sans-serif; font-size:.68rem; font-weight:500;
  letter-spacing:.10em; text-transform:uppercase;
  color:rgba(234,241,237,.35); margin-top:4px;
}
.about-story{
  position:relative; z-index:1; padding-left:36px;
}
.about-story-line{
  position:absolute; left:10px; top:6px; bottom:6px; width:1px;
  background:linear-gradient(to bottom, rgba(42,196,153,.5), rgba(100,60,180,.2), transparent);
}
.about-chapter{
  position:relative; margin-bottom:40px;
  background:rgba(255,255,255,.025); border:1px solid rgba(127,201,178,.07);
  border-radius:18px; padding:28px 28px 28px 30px;
  backdrop-filter:blur(8px);
  transition:transform .4s cubic-bezier(.22,1,.36,1), border-color .3s ease, box-shadow .4s ease;
}
.about-chapter:hover{
  transform:translateY(-3px); border-color:rgba(127,201,178,.16);
  box-shadow:0 12px 36px rgba(0,0,0,.18);
}
.about-dot{
  position:absolute; left:-31px; top:30px;
  width:10px; height:10px; border-radius:50%;
  background:#020807; border:2px solid rgba(42,196,153,.7);
}
.about-ch-label{
  font-family:'Inter',sans-serif; font-size:.58rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:rgba(127,201,178,.50); margin-bottom:8px;
}
.about-ch-title{
  font-family:'Inter Tight',sans-serif; font-weight:700; font-size:1.05rem;
  color:#F0F5F2; margin-bottom:10px; letter-spacing:-.01em; line-height:1.25;
}
.about-ch-body{
  font-family:'Inter',sans-serif; font-size:.88rem;
  color:rgba(234,241,237,.45); line-height:1.7;
}
.about-quote{
  position:relative; z-index:1; margin-top:56px;
  padding:28px 32px; border-left:2px solid rgba(42,196,153,.5);
  background:rgba(42,196,153,.04); border-radius:0 16px 16px 0;
}
.about-quote p{
  font-family:'Inter Tight',sans-serif; font-weight:600; font-size:1.05rem;
  color:rgba(234,241,237,.80); line-height:1.4; margin:0;
}

/* FAQ inline */
.faq-sec{
  padding:96px 0 80px; position:relative;
  background:linear-gradient(180deg, #020807 0%, #031a16 100%);
}
.faq-wrap{ max-width:780px; margin:0 auto; }
.faq-h2{
  font-family:'Inter Tight',sans-serif; font-weight:800;
  font-size:clamp(1.5rem,3vw,2.2rem); letter-spacing:-.025em;
  color:#F0F5F2; margin-bottom:8px;
}
.faq-sub{
  font-family:'Inter',sans-serif; font-size:.95rem;
  color:rgba(234,241,237,.42); margin-bottom:44px; line-height:1.6;
}
.faq-item{
  border:1px solid rgba(127,201,178,.07); border-radius:16px;
  margin-bottom:10px; overflow:hidden;
  background:rgba(255,255,255,.02);
  transition:border-color .3s ease;
}
.faq-item:hover{ border-color:rgba(127,201,178,.14); }
.faq-q{
  width:100%; background:none; border:none; cursor:pointer;
  padding:20px 24px; display:flex; justify-content:space-between; align-items:center;
  text-align:left;
}
.faq-q-text{
  font-family:'Inter Tight',sans-serif; font-weight:700; font-size:.92rem;
  color:rgba(234,241,237,.85);
}
.faq-chevron{
  width:18px; height:18px; color:rgba(127,201,178,.55); flex-shrink:0;
  transition:transform .3s ease;
}
.faq-chevron.open{ transform:rotate(180deg); }
.faq-a{
  padding:0 24px 20px;
  font-family:'Inter',sans-serif; font-size:.86rem;
  color:rgba(234,241,237,.45); line-height:1.7;
}
.faq-social{
  margin-top:56px; text-align:center;
  padding-top:48px; border-top:1px solid rgba(127,201,178,.08);
}
.faq-social-h3{
  font-family:'Inter Tight',sans-serif; font-weight:700;
  font-size:1.15rem; color:#F0F5F2; margin-bottom:8px;
}
.faq-social-sub{
  font-family:'Inter',sans-serif; font-size:.88rem;
  color:rgba(234,241,237,.40); max-width:480px; margin:0 auto 24px; line-height:1.6;
}
.faq-social-icons{ display:flex; gap:10px; justify-content:center; margin-bottom:10px; }
.faq-social-btn{
  width:40px; height:40px; border-radius:11px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06);
  display:flex; align-items:center; justify-content:center;
  transition:all .25s ease; cursor:pointer;
}
.faq-social-btn:hover{ background:rgba(42,196,153,.12); border-color:rgba(127,201,178,.20); }
.faq-email{
  font-family:'Inter',sans-serif; font-size:.82rem; color:rgba(234,241,237,.40);
}


/* Footer */
.footer2{ background:var(--petrol); border-top:1px solid rgba(127,201,178,0.08); padding:40px 0; }
.footer2-inner{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px; }
.footer2-brand{ font-family:'Inter Tight',sans-serif; font-size:0.9rem; font-weight:600; color:rgba(234,241,237,0.55); }
.footer2-links{ display:flex; gap:20px; flex-wrap:wrap; }
.footer2-link{ font-family:'Inter',sans-serif; font-size:0.8rem; color:rgba(234,241,237,0.38); text-decoration:none; background:none; border:none; cursor:pointer; padding:0; transition:color .2s ease; }
.footer2-link:hover{ color:rgba(234,241,237,0.70); }
.footer2-social{ display:flex; gap:14px; }
.footer2-soc{ font-family:'Inter',sans-serif; font-size:0.68rem; color:rgba(234,241,237,0.35); text-decoration:none; background:none; border:none; cursor:pointer; padding:0; letter-spacing:0.06em; transition:color .2s ease; }
.footer2-soc:hover{ color:rgba(234,241,237,0.65); }
@media(max-width:860px){ .footer2-inner{ flex-direction:column; align-items:flex-start; } }


/* \u2500\u2500 R\xD3LAM + GYIK (funnel inline) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
@keyframes aboutIn{
  from{ opacity:0; transform:translateY(24px); filter:blur(6px); }
  to{   opacity:1; transform:translateY(0);    filter:blur(0); }
}
.about-sec{ padding:120px 0 80px; position:relative; overflow:hidden;
  background:linear-gradient(180deg, var(--petrol) 0%, #061812 100%); }
.about-sec::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 50% 40% at 65% 30%, rgba(28,140,110,.06) 0%, transparent 55%),
             radial-gradient(ellipse 30% 35% at 20% 70%, rgba(100,60,180,.03) 0%, transparent 50%); }

.about-eyebrow{
  font-family:'Inter',sans-serif; font-size:.68rem; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; color:rgba(127,201,178,.55);
  display:flex; align-items:center; gap:10px; margin-bottom:20px;
}
.about-eyebrow::before{ content:""; width:20px; height:1px; background:rgba(127,201,178,.6); }
.about-h2{
  font-family:'Inter Tight',sans-serif; font-weight:800;
  font-size:clamp(1.7rem,3.5vw,2.6rem); letter-spacing:-.03em;
  line-height:1.1; color:var(--paper-dk); margin:0 0 18px; max-width:780px;
}
.about-h2 em{ font-style:normal; color:rgba(127,201,178,.85); }
.about-lead{
  font-family:'Inter',sans-serif; font-size:clamp(1rem,1.3vw,1.1rem);
  color:var(--muted-dk); line-height:1.75; max-width:640px; margin:0 0 56px;
}

/* Stats */
.about-stats{
  display:flex; gap:36px; flex-wrap:wrap; margin-bottom:64px;
  padding-bottom:48px; border-bottom:1px solid rgba(127,201,178,.08);
}
.about-stat-num{
  font-family:'Inter Tight',sans-serif; font-weight:800; font-size:1.7rem;
  color:rgba(127,201,178,.85); letter-spacing:-.02em;
}
.about-stat-label{
  font-family:'Inter',sans-serif; font-size:.70rem; font-weight:500;
  letter-spacing:.10em; text-transform:uppercase; color:var(--muted-dk); margin-top:4px;
}

/* Story blocks */
.about-story{ max-width:720px; margin-bottom:64px; }
.about-story-h3{
  font-family:'Inter Tight',sans-serif; font-weight:700; font-size:1.15rem;
  color:var(--paper-dk); margin-bottom:12px; letter-spacing:-.01em; line-height:1.25;
}
.about-story-p{
  font-family:'Inter',sans-serif; font-size:.92rem;
  color:var(--muted-dk); line-height:1.75; margin-bottom:20px;
}
.about-quote{
  padding:22px 26px; border-left:2px solid rgba(127,201,178,.5);
  background:rgba(127,201,178,.04); border-radius:0 14px 14px 0;
  font-family:'Inter Tight',sans-serif; font-weight:600; font-size:1.0rem;
  color:var(--paper-dk); line-height:1.4; margin:32px 0;
}

/* FAQ */
.faq-sec{ padding:80px 0 96px; background:#061812; position:relative; }
.faq-h2{
  font-family:'Inter Tight',sans-serif; font-weight:800;
  font-size:clamp(1.4rem,2.8vw,2rem); letter-spacing:-.02em;
  color:var(--paper-dk); margin-bottom:8px;
}
.faq-sub{
  font-family:'Inter',sans-serif; font-size:.95rem;
  color:var(--muted-dk); margin-bottom:40px;
}
.faq-card{
  border:1px solid rgba(127,201,178,.08); border-radius:16px;
  margin-bottom:10px; overflow:hidden; background:rgba(255,255,255,.02);
  transition:border-color .3s ease;
}
.faq-card:hover{ border-color:rgba(127,201,178,.16); }
.faq-card-q{
  width:100%; background:none; border:none; cursor:pointer;
  padding:20px 24px; display:flex; justify-content:space-between; align-items:center; text-align:left;
}
.faq-card-q-text{
  font-family:'Inter Tight',sans-serif; font-weight:700; font-size:.92rem;
  color:rgba(234,241,237,.85);
}
.faq-card-chevron{
  flex-shrink:0; color:rgba(127,201,178,.6);
  transition:transform .3s ease;
}
.faq-card-a{
  padding:0 24px 20px;
  font-family:'Inter',sans-serif; font-size:.86rem;
  color:var(--muted-dk); line-height:1.7;
}

/* Social strip */
.social-strip{ padding:56px 0; text-align:center; }
.social-strip-h3{
  font-family:'Inter Tight',sans-serif; font-weight:700; font-size:1.2rem;
  color:var(--paper-dk); margin-bottom:8px;
}
.social-strip-sub{
  font-family:'Inter',sans-serif; font-size:.88rem;
  color:var(--muted-dk); max-width:480px; margin:0 auto 24px; line-height:1.6;
}
.social-strip-icons{ display:flex; gap:10px; justify-content:center; margin-bottom:12px; }
.social-strip-btn{
  width:40px; height:40px; border-radius:10px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07);
  display:flex; align-items:center; justify-content:center;
  transition:all .25s ease; cursor:pointer;
}
.social-strip-btn:hover{ background:rgba(42,196,153,.12); border-color:rgba(127,201,178,.20); }

/* Mobile header + video fixes */
@media(max-width:768px){
  .hide-mobile{ display:none !important; }
  .hero-video{ display:none; }
  .pb10-video{ display:none; }
}

/* ============================================================
   PREMIUM CSS UPGRADE — Block inv5 (asset windows) + sec6 (portfolio)
   Pure CSS, no React / DOM changes.
   ============================================================ */

/* ---------- Block 2: .inv5-sat as floating glass windows ---------- */
.inv5-sat{
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(127,201,178,.06) 0%, transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.045) 0%, rgba(255,255,255,.018) 100%) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  border-radius:18px !important;
  padding:42px 28px 26px !important;
  backdrop-filter:blur(22px) saturate(140%) !important;
  -webkit-backdrop-filter:blur(22px) saturate(140%) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 -1px 0 rgba(0,0,0,.25) inset,
    0 10px 30px rgba(0,0,0,.35),
    0 30px 60px rgba(0,0,0,.25);
  transform-style:preserve-3d;
  transition: transform .55s cubic-bezier(.2,.8,.2,1), box-shadow .55s ease, border-color .35s ease;
}
.inv5-sat::before{
  content:"" !important;
  position:absolute !important;
  top:14px !important; left:18px !important; right:auto !important;
  height:10px !important; width:46px !important;
  background:
    radial-gradient(circle at 5px 5px, rgba(255,95,86,.85) 0 4px, transparent 4.5px),
    radial-gradient(circle at 21px 5px, rgba(255,189,46,.80) 0 4px, transparent 4.5px),
    radial-gradient(circle at 37px 5px, rgba(39,201,63,.80) 0 4px, transparent 4.5px) !important;
  filter:drop-shadow(0 0 6px rgba(0,0,0,.4));
  opacity:.85;
}
.inv5-sat::after{
  content:"";
  position:absolute; left:0; right:0; top:0; height:48%;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.05) 0%, transparent 100%);
  border-radius:18px 18px 0 0;
  mix-blend-mode:screen;
  opacity:.7;
}
.inv5-sat:hover{
  transform: translateY(-10px) scale(1.018) !important;
  border-color:rgba(127,201,178,.28) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.10) inset,
    0 -1px 0 rgba(0,0,0,.28) inset,
    0 28px 60px rgba(0,0,0,.45),
    0 0 0 1px rgba(127,201,178,.18),
    0 0 60px rgba(42,196,153,.16) !important;
}
.inv5-sat-title{ margin-top:4px; }
.inv5-hub{
  box-shadow:
    0 0 0 1px rgba(127,201,178,.10) inset,
    0 30px 80px rgba(0,0,0,.5),
    0 0 80px rgba(42,196,153,.10);
}

/* ---------- Block 3: .sec6-card as premium dashboard panels ---------- */
.sec6-card{
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(127,201,178,.05) 0%, transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.015) 100%) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  border-radius:20px !important;
  padding:44px 26px 26px !important;
  backdrop-filter:blur(22px) saturate(140%) !important;
  -webkit-backdrop-filter:blur(22px) saturate(140%) !important;
  position:relative;
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 -1px 0 rgba(0,0,0,.25) inset,
    0 12px 32px rgba(0,0,0,.35),
    0 36px 70px rgba(0,0,0,.25);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease !important;
}
.sec6-card::before{
  content:"" !important;
  position:absolute !important;
  top:16px !important; left:20px !important; right:auto !important; bottom:auto !important;
  height:10px !important; width:46px !important;
  background:
    radial-gradient(circle at 5px 5px, rgba(255,95,86,.85) 0 4px, transparent 4.5px),
    radial-gradient(circle at 21px 5px, rgba(255,189,46,.80) 0 4px, transparent 4.5px),
    radial-gradient(circle at 37px 5px, rgba(39,201,63,.80) 0 4px, transparent 4.5px) !important;
  filter:drop-shadow(0 0 6px rgba(0,0,0,.4));
  opacity:.85;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}
.sec6-card::after{
  content:"";
  position:absolute; left:0; right:0; top:0; height:46%;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.05) 0%, transparent 100%);
  border-radius:20px 20px 0 0;
  mix-blend-mode:screen;
  opacity:.7;
}
.sec6-card:hover{
  transform: translateY(-8px) scale(1.04) !important;
  border-color:rgba(127,201,178,.28) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.10) inset,
    0 -1px 0 rgba(0,0,0,.28) inset,
    0 36px 70px rgba(0,0,0,.5),
    0 0 0 1px rgba(127,201,178,.20),
    0 0 80px rgba(42,196,153,.20) !important;
}
.sec6-card-title{ margin-top:6px; }
.sec6-card-glow{ filter:blur(2px); opacity:.85; }
.sec6-featured{
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(140,100,220,.10) 0%, transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.02) 100%) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.08) inset,
    0 -1px 0 rgba(0,0,0,.28) inset,
    0 16px 40px rgba(0,0,0,.4),
    0 40px 80px rgba(80,40,160,.18) !important;
}
.sec6-featured:hover{
  box-shadow:
    0 1px 0 rgba(255,255,255,.12) inset,
    0 -1px 0 rgba(0,0,0,.30) inset,
    0 36px 70px rgba(0,0,0,.5),
    0 0 0 1px rgba(160,130,220,.25),
    0 0 90px rgba(140,100,220,.25) !important;
}
/* Chips never change on hover */
.sec6-chip,
.sec6-chip:hover,
.sec6-card:hover .sec6-chip,
.sec6-card:hover .sec6-chip:hover{
  background:rgba(255,255,255,0.82) !important;
  border-color:rgba(255,255,255,.35) !important;
  color:inherit !important;
  transform:none !important;
  filter:none !important;
  transition:none !important;
}
.inv5-close-big em,
.sec6-close-big{
  text-shadow:0 0 32px rgba(42,196,153,.18);
}
@media (prefers-reduced-motion: reduce){
  .inv5-sat, .sec6-card, .sec6-chip{ transition:none !important; }
  .inv5-sat:hover, .sec6-card:hover{ transform:none !important; }
}
@media (max-width:768px){
  .inv5-sat, .sec6-card{ padding-top:38px !important; }
}

/* ============================================================
   HORIZON DIVIDER — inv5 → sec6 (two dark blocks separation)
   Futuristic luminous horizon + differentiated depths
   ============================================================ */
/* inv5 ends lighter, with a glowing aurora horizon at its base */
.inv5{
  background:linear-gradient(160deg, #052620 0%, #02140f 55%, #04231b 100%) !important;
}
.inv5::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:200px;
  pointer-events:none; z-index:1;
  background:
    radial-gradient(ellipse 70% 100% at 50% 100%, rgba(42,196,153,.16) 0%, transparent 60%),
    linear-gradient(180deg, transparent 0%, rgba(1,8,6,.85) 100%);
}
/* The luminous horizon line itself */
.inv5::before{
  content:"";
  position:absolute; left:8%; right:8%; bottom:0; height:1px;
  pointer-events:none; z-index:2;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(42,196,153,.10) 18%,
    rgba(127,201,178,.85) 50%,
    rgba(42,196,153,.10) 82%,
    transparent 100%);
  box-shadow:
    0 0 18px 2px rgba(42,196,153,.45),
    0 0 60px 8px rgba(42,196,153,.18);
  animation: horizonPulse 5s ease-in-out infinite;
}
@keyframes horizonPulse{
  0%,100%{ opacity:.55; }
  50%{ opacity:1; }
}
/* sec6 opens deeper and darker — clear depth change after the horizon */
.sec6{
  background:linear-gradient(170deg, #010c09 0%, #000504 45%, #010a08 100%) !important;
}
/* Dawn glow bleeding over sec6's top edge, like light from the horizon above */
.sec6::before{
  content:"";
  position:absolute; left:0; right:0; top:0; height:220px;
  pointer-events:none; z-index:0;
  background:
    radial-gradient(ellipse 70% 90% at 50% 0%, rgba(42,196,153,.10) 0%, transparent 65%);
}
/* Floating light particles rising from the horizon (pure CSS) */
.inv5 .inv5-ambient::after{
  content:"";
  position:absolute; inset:auto 0 0 0; height:280px;
  pointer-events:none;
  background-image:
    radial-gradient(circle 2px at 12% 85%, rgba(127,201,178,.8) 0 1px, transparent 2px),
    radial-gradient(circle 1.5px at 28% 70%, rgba(127,201,178,.5) 0 1px, transparent 2px),
    radial-gradient(circle 2px at 45% 90%, rgba(42,196,153,.7) 0 1px, transparent 2px),
    radial-gradient(circle 1.5px at 62% 75%, rgba(127,201,178,.55) 0 1px, transparent 2px),
    radial-gradient(circle 2px at 78% 88%, rgba(42,196,153,.65) 0 1px, transparent 2px),
    radial-gradient(circle 1.5px at 90% 72%, rgba(127,201,178,.45) 0 1px, transparent 2px);
  background-repeat:no-repeat;
  animation: particleRise 9s ease-in-out infinite;
  opacity:.7;
}
@keyframes particleRise{
  0%,100%{ transform:translateY(0); opacity:.35; }
  50%{ transform:translateY(-30px); opacity:.85; }
}
@media (prefers-reduced-motion: reduce){
  .inv5::before{ animation:none !important; }
  .inv5 .inv5-ambient::after{ animation:none !important; }
}

/* ============================================================
   ABOUT MAGAZINE — Rólam digital-magazine layout
   ============================================================ */
.mag-page{
  min-height:100vh;
  background:
    radial-gradient(80% 60% at 20% 0%, rgba(127,201,178,0.08) 0%, transparent 50%),
    radial-gradient(60% 50% at 90% 20%, rgba(80,40,160,0.06) 0%, transparent 55%),
    linear-gradient(180deg, #f2f4ee 0%, #e7ebe4 40%, #dfe4dc 100%);
  padding: 24px 20px 60px;
  position:relative;
}
.mag-back{
  position:fixed; top:22px; left:22px; z-index:100;
  padding:10px 18px;
  background:rgba(15,26,23,0.86);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border:1px solid rgba(127,201,178,0.20);
  border-radius:999px;
  color:#EAF1ED;
  font-family:'Inter',sans-serif; font-size:13px; font-weight:500;
  cursor:pointer;
  transition: transform .3s ease, background .3s ease;
}
.mag-back:hover{ transform:translateX(-3px); background:rgba(15,26,23,0.95); }
.mag-section{ padding: 60px 0 80px; position:relative; }
.mag-viewport{
  max-width:1240px; margin:0 auto;
  background: linear-gradient(180deg, #0d1613 0%, #0a1310 100%);
  border-radius:34px;
  padding:14px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 -1px 0 rgba(0,0,0,0.3) inset,
    0 30px 80px rgba(10,26,23,0.18),
    0 60px 140px rgba(10,26,23,0.10);
  position:relative;
}
.mag-viewport::before{
  content:""; position:absolute; top:-1px; left:20%; right:20%; height:1px;
  background:linear-gradient(90deg, transparent, rgba(127,201,178,0.4), transparent);
  pointer-events:none;
}
.mag-topbar{
  display:flex; justify-content:space-between; align-items:center;
  padding: 6px 20px 10px;
  color: rgba(234,241,237,0.55);
  font-family:'Inter',sans-serif;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.mag-topbar-brand{ display:flex; align-items:center; gap:10px; }
.mag-topbar-dot{
  width:6px; height:6px; border-radius:50%;
  background:#7FC9B2;
  box-shadow: 0 0 8px rgba(127,201,178,0.7);
  animation: magPulse 2.6s ease-in-out infinite;
}
@keyframes magPulse{
  0%,100%{ opacity:.6; }
  50%{ opacity:1; }
}
.mag-topbar-mid{ opacity:.4; }
.mag-topbar-year{ color:rgba(234,241,237,0.72); font-weight:600; }
.mag-viewport-inner{
  background: #fbfaf5;
  border-radius: 24px;
  overflow: hidden;
  position:relative;
}
.mag-cover{
  position:relative;
  height: clamp(520px, 76vh, 820px);
  overflow:hidden;
  background:#0a0a0a;
}
.mag-cover-img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position: 40% center;
  animation: magKenburns 22s ease-out both;
}
@keyframes magKenburns{
  0%{ transform: scale(1.12) translate(-1%, -1%); }
  100%{ transform: scale(1.0) translate(0, 0); }
}
.mag-cover-veil{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, transparent 0%, transparent 55%, rgba(6,10,9,0.78) 100%);
}
.mag-cover-copy{
  position:absolute; left:0; right:0; bottom:0;
  padding: 44px clamp(28px, 5vw, 64px);
  color:#fff;
}
.mag-cover-eyebrow{
  font-family:'Inter',sans-serif;
  font-size:10px; letter-spacing:.30em; text-transform:uppercase;
  color:#7FC9B2; margin-bottom:22px;
}
.mag-cover-title{
  font-family:'Inter Tight',sans-serif;
  font-weight:800;
  font-size: clamp(3.2rem, 9vw, 6.4rem);
  line-height:0.92;
  letter-spacing:-0.035em;
  margin:0 0 18px;
  color:#EAF1ED;
  text-shadow: 0 4px 30px rgba(0,0,0,0.4);
}
.mag-cover-sub{
  font-family:'Inter Tight',sans-serif;
  font-weight:500;
  font-size: clamp(1rem, 1.5vw, 1.28rem);
  line-height:1.5;
  color:rgba(234,241,237,0.82);
  max-width:640px;
  margin:0 0 24px;
}
.mag-cover-meta{
  display:flex; align-items:center; gap:12px;
  font-family:'Inter',sans-serif;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(234,241,237,0.55);
}
.mag-dot-sep{
  width:3px; height:3px; background:rgba(234,241,237,0.4);
  border-radius:50%;
}
.mag-spread{
  position:relative;
  padding: clamp(60px, 8vw, 110px) clamp(28px, 5vw, 72px);
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items:center;
  border-top: 1px solid rgba(15,26,23,0.06);
}
/* Layout variants: left = image left / text right; right = image right / text left */
.mag-spread-left .mag-image-wrap  { order: 1; }
.mag-spread-left .mag-text        { order: 2; }
.mag-spread-right .mag-image-wrap { order: 2; }
.mag-spread-right .mag-text       { order: 1; }
.mag-num-lg{
  position:absolute;
  top: 26px;
  right: clamp(28px, 5vw, 72px);
  font-family:'Inter Tight',serif;
  font-weight:200;
  font-size: clamp(80px, 12vw, 160px);
  line-height:1;
  color: rgba(15,26,23,0.06);
  pointer-events:none;
  user-select:none;
  letter-spacing:-0.04em;
}
.mag-spread-right .mag-num-lg{
  right:auto; left: clamp(28px, 5vw, 72px);
}
/* Wide spread: full-width banner image + centered text below */
.mag-spread-wide{
  display: block;
  padding: 0;
  border-top: 1px solid rgba(15,26,23,0.06);
  position:relative;
}
.mag-num-lg-inline{
  position:absolute;
  top: 22px; left: clamp(28px, 5vw, 72px);
  z-index:3;
  font-family:'Inter Tight',serif;
  font-weight:200;
  font-size: clamp(80px, 12vw, 160px);
  line-height:1;
  color: rgba(255,255,255,0.18);
  pointer-events:none; user-select:none;
  letter-spacing:-0.04em;
  text-shadow: 0 2px 20px rgba(0,0,0,0.35);
}
.mag-wide-image-wrap{
  position:relative;
  aspect-ratio: 3 / 2;
  overflow:hidden;
  background:linear-gradient(180deg, #eef1eb, #dfe4dc);
}
.mag-wide-image{
  width:100%; height:100%;
  object-fit:cover;
  object-position: center center;
  animation: magKen 22s ease-in-out infinite alternate;
}
.mag-wide-text{
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(50px, 6vw, 80px) clamp(28px, 5vw, 72px);
  /* 2026-08-16 (user-döntés): balra igazítva — az oldal minden más
     szövegblokkja is balra igazodik, a két széles blokk kilógott. */
  text-align: left;
}
/* Finale spread: full-bleed image with overlaid title + subtitle */
.mag-spread-finale{
  display: block;
  padding: 0;
  border-top: 1px solid rgba(15,26,23,0.08);
  position:relative;
  min-height: clamp(520px, 82vh, 780px);
  overflow:hidden;
  background:linear-gradient(180deg, #1c1815, #0d0a08);
}
.mag-finale-bg{
  position:absolute; inset:0;
  overflow:hidden;
}
.mag-finale-img{
  width:100%; height:100%;
  object-fit:cover;
  object-position: center 40%;
  animation: magKen 26s ease-in-out infinite alternate;
}
.mag-finale-veil{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.05) 45%, rgba(0,0,0,0.55) 100%);
}
.mag-finale-copy{
  position:relative;
  z-index:2;
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(120px, 18vh, 200px) clamp(28px, 5vw, 60px) clamp(80px, 12vh, 140px);
  text-align:center;
  color:#EAF1ED;
}
.mag-eyebrow-light{ color:#7FC9B2; }
.mag-eyebrow-line-light{ background:#7FC9B2; }
.mag-finale-title{
  font-family:'Inter Tight',sans-serif;
  font-weight:700;
  font-size: clamp(2.4rem, 5.6vw, 4.4rem);
  line-height: 1.02;
  letter-spacing:-0.03em;
  color:#EAF1ED;
  margin: 12px 0 22px;
  text-shadow: 0 4px 40px rgba(0,0,0,0.5);
  text-wrap: pretty;
}
.mag-finale-sub{
  font-family:'Inter Tight',sans-serif;
  font-weight:500;
  font-size: clamp(1.05rem, 1.6vw, 1.4rem);
  line-height: 1.5;
  color: rgba(234,241,237,0.88);
  max-width: 620px;
  margin: 0 auto;
  text-shadow: 0 2px 30px rgba(0,0,0,0.4);
}
/* Closing philosophy block */
.mag-closing{
  padding: clamp(80px, 12vw, 140px) clamp(28px, 5vw, 72px);
  text-align:center;
  border-top: 1px solid rgba(15,26,23,0.06);
  background: linear-gradient(180deg, #fbfaf5 0%, #f4f5ef 100%);
}
.mag-closing-quote{
  max-width: 680px;
  margin: 0 auto 48px;
}
.mag-closing-line{
  font-family:'Inter Tight',sans-serif;
  font-weight:500;
  font-size: clamp(1.15rem, 1.9vw, 1.55rem);
  line-height: 1.45;
  color: rgba(15,26,23,0.55);
  letter-spacing:-0.012em;
  margin: 0 0 6px;
}
.mag-closing-lead{
  font-family:'Inter Tight',sans-serif;
  font-weight:700;
  font-size: clamp(1.35rem, 2.3vw, 1.85rem);
  line-height: 1.35;
  color: #0a1a17;
  letter-spacing:-0.02em;
  margin: 24px 0 20px;
  text-wrap: pretty;
}
.mag-closing-final{
  font-family:'Inter Tight',sans-serif;
  font-weight:500;
  font-size: clamp(1.05rem, 1.55vw, 1.28rem);
  line-height: 1.5;
  color: rgba(15,26,23,0.68);
  margin: 0;
}
.mag-image-wrap{
  position:relative;
  aspect-ratio: 4/5;
  border-radius: 18px;
  overflow: hidden;
  background:
    radial-gradient(80% 60% at 50% 40%, rgba(232,236,231,0.5), rgba(232,236,231,0.2)),
    linear-gradient(180deg, #eef1eb, #dfe4dc);
  box-shadow:
    0 24px 60px rgba(15,26,23,0.14),
    0 60px 120px rgba(15,26,23,0.08),
    0 0 0 1px rgba(15,26,23,0.05);
}
.mag-image{
  width:100%; height:100%;
  object-fit:cover;
  transform: scale(1.06);
  animation: magKen 22s ease-in-out infinite alternate;
}
@keyframes magKen{
  0%   { transform: scale(1.04) translate(0, 0); }
  100% { transform: scale(1.10) translate(-1%, 0); }
}
.mag-image-vignette{
  position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(ellipse at center, transparent 65%, rgba(0,0,0,0.10) 100%);
}
.mag-text{ position:relative; }
.mag-eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:'Inter',sans-serif;
  font-size:10px; letter-spacing:.30em; text-transform:uppercase;
  color:#1B8A6E;
  margin-bottom: 18px;
}
.mag-eyebrow-line{ width:24px; height:1px; background:#1B8A6E; }
.mag-title{
  font-family:'Inter Tight',sans-serif;
  font-weight:700;
  font-size: clamp(1.6rem, 3vw, 2.5rem);
  line-height: 1.12;
  letter-spacing:-0.022em;
  color:#0a1a17;
  margin: 0 0 22px;
  text-wrap: pretty;
}
.mag-body{
  font-family:'Inter',sans-serif;
  font-size: clamp(1rem, 1.15vw, 1.08rem);
  line-height: 1.75;
  color: rgba(15,26,23,0.72);
  margin:0;
  max-width: 46ch;
}
.mag-cta-panel{
  padding: clamp(60px, 7vw, 96px) clamp(28px, 5vw, 72px);
  text-align:center;
  border-top: 1px solid rgba(15,26,23,0.06);
  background:
    radial-gradient(60% 100% at 50% 100%, rgba(127,201,178,0.10) 0%, transparent 70%),
    linear-gradient(180deg, #fbfaf5 0%, #f4f5ef 100%);
}
.mag-cta-line{
  width:40px; height:1px; margin:0 auto 22px; background:#1B8A6E;
}
.mag-cta-eyebrow{
  font-family:'Inter',sans-serif;
  font-size:11px; letter-spacing:.30em; text-transform:uppercase;
  color:#1B8A6E; margin:0 0 12px;
}
.mag-cta-title{
  font-family:'Inter Tight',sans-serif;
  font-weight:700;
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  line-height:1.1; letter-spacing:-0.022em;
  color:#0a1a17;
  margin:0 0 30px;
}
.mag-cta-btn{
  display:inline-flex; align-items:center; gap:10px;
  padding: 16px 30px;
  background: linear-gradient(180deg, #1B8A6E 0%, #167058 100%);
  color:#fff;
  font-family:'Inter Tight',sans-serif;
  font-weight:600; font-size:1rem;
  letter-spacing:-0.005em;
  border: none;
  border-radius: 999px;
  cursor:pointer;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.15) inset,
    0 10px 24px rgba(27,138,110,0.32),
    0 3px 8px rgba(0,0,0,0.12);
  transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease;
}
.mag-cta-btn:hover{
  transform: translateY(-3px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.20) inset,
    0 16px 36px rgba(27,138,110,0.42),
    0 4px 10px rgba(0,0,0,0.14);
}
.mag-cta-btn:active{ transform: translateY(-1px); }
@supports (animation-timeline: view()) {
  .mag-spread{
    animation: magSpreadIn linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 30%;
  }
}
@keyframes magSpreadIn{
  from{ opacity:0; transform: translateY(40px); }
  to  { opacity:1; transform: translateY(0); }
}
@media (max-width: 860px){
  .mag-page{ padding: 20px 12px 40px; }
  .mag-back{ top:16px; left:16px; padding:8px 14px; font-size:12px; }
  .mag-section{ padding: 60px 0 40px; }
  .mag-viewport{ padding: 10px; border-radius: 24px; }
  .mag-topbar{ padding: 4px 12px 8px; font-size: 9px; letter-spacing:.16em; }
  .mag-topbar-mid{ display:none; }
  .mag-viewport-inner{ border-radius: 18px; }
  .mag-cover{ height: clamp(400px, 70vh, 540px); }
  .mag-cover-copy{ padding: 30px 22px; }
  .mag-spread{
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 56px 22px;
  }
  .mag-spread-left .mag-image-wrap,
  .mag-spread-right .mag-image-wrap { order: 1; }
  .mag-spread-left .mag-text,
  .mag-spread-right .mag-text { order: 2; }
  .mag-num-lg{ top:16px; right:22px; font-size: 72px; }
  .mag-spread-right .mag-num-lg{ left:auto; right:22px; }
  .mag-spread-wide .mag-wide-image-wrap{ aspect-ratio: 3/2; }
  .mag-num-lg-inline{ font-size:72px; top:14px; left:22px; }
  .mag-wide-text{ padding: 44px 22px; }
  .mag-spread-finale{ min-height: 520px; }
  .mag-finale-copy{ padding: 100px 22px 80px; }
  .mag-closing{ padding: 72px 22px; }
  .mag-cta-panel{ padding: 56px 22px; }
}
@media (prefers-reduced-motion: reduce){
  .mag-cover-img, .mag-image{ animation:none !important; }
  .mag-spread{ animation:none !important; opacity:1 !important; transform:none !important; }
}

/* ============================================================
   TEAM SECTION — premium portrait cards
   ============================================================ */
.team-section{
  padding:110px 0; background:var(--bg);
  position:relative; overflow:hidden;
}
.team-bg-glow{
  position:absolute; inset:0; pointer-events:none; opacity:.6; z-index:0;
  background:
    radial-gradient(60% 45% at 22% 30%, rgba(127,201,178,.14) 0%, transparent 70%),
    radial-gradient(50% 40% at 82% 70%, rgba(27,138,110,.10) 0%, transparent 70%);
}
.team-eyebrow{
  display:inline-flex; align-items:center; gap:12px;
  font-family:'Inter',sans-serif; font-size:0.62rem;
  text-transform:uppercase; letter-spacing:0.16em; color:var(--muted);
  margin-bottom:22px;
}
.team-eyebrow-line{ display:inline-block; width:32px; height:1px; background:var(--green); }
.team-h2{
  font-family:'Inter Tight',sans-serif; font-weight:700;
  font-size:clamp(1.9rem, 3.4vw, 2.7rem);
  letter-spacing:-0.022em; color:var(--ink);
  line-height:1.1; margin:0 0 16px; max-width:820px;
}
.team-sub{
  font-family:'Inter',sans-serif; font-size:1.02rem;
  color:var(--muted); line-height:1.7;
  max-width:640px; margin:0 0 64px;
}
.team-grid{ display:grid; }
.team-grid-featured{ grid-template-columns: 1fr 1fr; gap:32px; }
.team-grid-support{ grid-template-columns: repeat(4, 1fr); gap:18px; }
@media (max-width: 1100px){
  .team-grid-support{ grid-template-columns: repeat(2, 1fr); gap:16px; }
}
.team-support-eyebrow{
  display:inline-flex; align-items:center; gap:12px;
  font-family:'Inter',sans-serif; font-size:0.62rem;
  text-transform:uppercase; letter-spacing:0.16em;
  color: rgba(10,26,23,0.55);
  margin: 64px 0 20px;
}
.team-support-eyebrow-line{
  display:inline-block; width:32px; height:1px; background: rgba(27,138,110,0.55);
}
.team-card-mini .pl-fk-front{
  padding: 22px 18px 20px;
  border-radius:20px;
  background: linear-gradient(180deg, rgba(255,255,255,.86) 0%, rgba(255,255,255,.66) 100%);
  min-height:300px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.team-card-mini .pl-fk-back{ border-radius:20px; }
.team-card-mini .team-portrait{ width:min(120px, 62%); margin:0 auto 12px; }
.team-card-mini .team-name{ font-size:1.02rem; margin-bottom:2px; }
.team-card-mini .team-role{ font-size:.56rem; margin-bottom:0; letter-spacing:.14em; }
.team-card-mini .team-hint{ font-size:.50rem; margin-top:12px; opacity:.55; }
.team-easter-section + .team-easter-section{ margin-top:12px; }
.team-easter-section-label{
  font-family:'Inter',sans-serif; font-size:.52rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.20em;
  color: rgba(127,201,178,0.78);
  margin:0 0 6px;
}
.team-easter-sublist,
.team-easter-list{ display:flex; flex-direction:column; }
.team-card-mini .team-easter-item{ font-size:.72rem; padding:3px 0; line-height:1.4; }
.team-card-mini .team-easter-dot{ width:4px; height:4px; margin-top:8px; }
/* ==== FLIP-KÁRTYA szerkezet (CPU-kör + UX-csere, 2026-08-13) ====
   A korábbi hover-overlay (team-easter) gördíthetetlen volt (pointer-events:none),
   a kártyán pedig örök teamFloat animáció + backdrop-blur égette a CPU-t (6 példány,
   mérve — cetlik/penzugyilab-cpu-terheles.md). Helyette átforduló kártya: elöl a
   bemutatkozás, hátul görgethető részletek. Asztalon hover fordít, érintőn koppintás
   (oldal.js „CSAPAT FLIP-KÁRTYA" blokk). */
.team-card{
  position:relative; outline:none;
  perspective:1200px;
  text-align:center;
}
.pl-fk-inner{
  position:relative; width:100%; height:100%;
  transform-style:preserve-3d;
  transition: transform .65s cubic-bezier(.32,.9,.35,1);
}
@media (hover:hover){
  .team-card:hover .pl-fk-inner,
  .team-card:focus-within .pl-fk-inner{ transform: rotateY(180deg); }
}
.team-card.pl-fk-forditva .pl-fk-inner{ transform: rotateY(180deg); }
.pl-fk-front, .pl-fk-back{
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  border-radius:24px;
  border:1px solid rgba(10,58,50,0.08);
}
.pl-fk-front{
  position:relative;
  background: linear-gradient(180deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.72) 100%);
  padding:44px 32px 28px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.7) inset,
    0 10px 26px rgba(10,26,23,0.06),
    0 24px 48px rgba(10,26,23,0.05);
}
.pl-fk-back{
  position:absolute; inset:0;
  transform: rotateY(180deg);
  background: linear-gradient(180deg, #0A3A32 0%, #07231E 100%);
  border-color: rgba(127,201,178,.30);
  color:#EAF1ED; text-align:left;
  display:flex; flex-direction:column;
  overflow:hidden;
  box-shadow: 0 14px 32px rgba(0,0,0,.25);
}
.pl-fk-back-fej{
  flex:0 0 auto;
  padding:16px 18px 12px;
  border-bottom:1px solid rgba(127,201,178,.22);
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
}
.pl-fk-back-nev{
  font-family:'Inter Tight',sans-serif; font-weight:700; font-size:.98rem; color:#EAF1ED;
}
.pl-fk-back-szerep{
  font-family:'Inter',sans-serif; font-size:.52rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:#7FC9B2; text-align:right;
}
/* A hátlap görgethető törzse — a régi overlay pont ezt nem tudta: itt él a
   pointer, vékony saját sáv, és a görgetés nem fut ki az oldalra */
.pl-fk-back-torzs{
  flex:1 1 auto; overflow-y:auto;
  padding:14px 18px 16px;
  scrollbar-width:thin; scrollbar-color:rgba(127,201,178,.5) transparent;
  overscroll-behavior:contain;
}
.pl-fk-back-torzs::-webkit-scrollbar{ width:6px; }
.pl-fk-back-torzs::-webkit-scrollbar-thumb{ background:rgba(127,201,178,.45); border-radius:3px; }
.team-portrait{
  position:relative; width:min(220px, 55%);
  aspect-ratio:1; margin:0 auto 26px; border-radius:50%;
}
.team-portrait-glow{
  position:absolute; inset:-16%; border-radius:50%;
  background: radial-gradient(closest-side, rgba(42,196,153,.35), rgba(42,196,153,0) 70%);
  filter: blur(10px); opacity:.55;
}
.team-portrait-ring{
  position:absolute; inset:-4px; border-radius:50%;
  background: conic-gradient(from 210deg, rgba(127,201,178,.55), rgba(27,138,110,.10) 40%, rgba(127,201,178,.55) 80%, rgba(127,201,178,.55));
  padding:2px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity:.55;
}
.team-portrait-img{
  position:relative; width:100%; height:100%;
  object-fit:cover; border-radius:50%;
  border:3px solid rgba(255,255,255,.9);
  box-shadow: 0 20px 40px rgba(10,26,23,0.20);
  filter: saturate(1.05); transform: translateZ(0);
  user-select:none; -webkit-user-drag:none;
}
.team-name{
  font-family:'Inter Tight',sans-serif; font-weight:800;
  font-size:1.35rem; letter-spacing:-0.015em;
  color:var(--ink); margin-bottom:6px;
}
.team-role{
  font-family:'Inter',sans-serif; font-size:0.66rem;
  text-transform:uppercase; letter-spacing:0.16em;
  color: rgba(27,138,110,0.85); margin-bottom:20px;
}
.team-responsibilities{
  text-align:left;
}
.team-easter-quote{
  font-family:'Inter Tight',sans-serif; font-style:italic;
  font-size:.87rem; line-height:1.42;
  color:#EAF1ED;
  margin:0 0 12px;
  padding-bottom:10px;
  border-bottom:1px solid rgba(127,201,178,.16);
}
.team-easter-list{ display:flex; flex-direction:column; }
.team-easter-item{
  display:flex; gap:8px; align-items:flex-start;
  font-family:'Inter',sans-serif; font-size:.78rem;
  color:rgba(234,241,237,0.75); line-height:1.45;
  padding:5px 0;
}
.team-easter-dot{
  flex:0 0 auto; width:5px; height:5px; border-radius:50%;
  background:#7FC9B2; margin-top:8px;
  box-shadow: 0 0 6px rgba(127,201,178,.6);
}
.team-bullet{
  display:flex; gap:10px; align-items:flex-start;
  font-family:'Inter',sans-serif; font-size:0.88rem;
  color:var(--muted); line-height:1.55;
  padding:7px 4px;
  border-top:1px solid rgba(10,58,50,0.05);
}
.team-bullet:first-child{ border-top:0; padding-top:2px; }
.team-dot{
  flex:0 0 auto; width:6px; height:6px; border-radius:50%;
  background:var(--green); margin-top:9px;
  box-shadow: 0 0 8px rgba(42,196,153,.5);
}
.team-hint{
  font-family:'Inter',sans-serif; font-size:0.56rem;
  text-transform:uppercase; letter-spacing:0.14em;
  color: rgba(10,26,23,0.35);
  margin-top:14px;
}
.team-closing{
  margin-top:56px;
  background: linear-gradient(180deg, #0A2820, #061610);
  border-radius:18px; padding:26px 32px; text-align:center;
  box-shadow: 0 20px 40px rgba(10,26,23,0.08);
}
.team-closing-p{
  font-family:'Inter Tight',sans-serif; font-weight:600;
  font-size:1.05rem; line-height:1.45;
  color: rgba(234,241,237,0.78); margin:0;
}
.team-closing-em{ color:#7FC9B2; }
@media (max-width: 640px){
  .team-section{ padding:80px 0; }
  .team-grid-featured{ grid-template-columns:1fr; gap:22px; }
  .team-grid-support{ grid-template-columns:1fr; gap:14px; }
  .team-portrait{ width:min(200px, 62%); }
  .team-card .pl-fk-front{ padding:36px 24px 26px; }
  .team-card-mini .pl-fk-front{ padding:24px 20px 20px; }
  .team-h2{ font-size:1.85rem; margin-bottom:14px; }
  .team-sub{ margin-bottom:44px; }
  .team-support-eyebrow{ margin: 44px 0 16px; }
  .team-closing{ margin-top:40px; padding:22px 22px; }
}
@media (prefers-reduced-motion: reduce){
  .team-card, .team-portrait-glow, .team-portrait-img{
    animation:none !important;
  }
  /* Csökkentett mozgásnál a fordulás nem animált (azonnal vált) */
  .pl-fk-inner{ transition:none !important; }
}
/* Vimeo embed component */
.vimeo-embed{
  position:relative;
  width:100%;
  max-width:1080px;
  margin:0 auto;
  border-radius:22px;
  overflow:hidden;
  background:linear-gradient(160deg, #0B2E20 0%, #061810 100%);
  box-shadow:
    0 24px 64px rgba(10,26,23,0.22),
    0 4px 16px rgba(10,26,23,0.12),
    0 0 0 1px rgba(127,201,178,0.14);
  opacity:0;
  transform:translateY(14px);
  animation:vimeoFadeUp .7s cubic-bezier(.22,1,.36,1) .2s forwards;
}
.vimeo-embed-inner{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  background:#050d0a;
}
.vimeo-embed-glow{
  position:absolute; inset:0; pointer-events:none;
  border-radius:22px;
  box-shadow: inset 0 0 0 1px rgba(127,201,178,0.10);
}
.vimeo-unmute{
  position:absolute;
  right:14px; bottom:14px;
  z-index:2;
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 14px 9px 12px;
  border-radius:999px;
  /* CPU-kör 2026-08-13: backdrop-blur KI (játszó videó felett ült — képkockánkénti
     újra-blur); helyette sűrűbb saját háttér */
  background:rgba(6,24,16,0.85);
  border:1px solid rgba(127,201,178,0.35);
  color:#EAF1ED;
  font-family:'Inter',sans-serif;
  font-size:0.82rem;
  font-weight:500;
  letter-spacing:0.01em;
  cursor:pointer;
  box-shadow:0 8px 24px rgba(0,0,0,0.35);
  transition:background .2s ease, transform .2s ease, box-shadow .3s ease;
}
/* CPU-kör 2026-08-13: a pulzus box-shadow-animáció helyett transform+opacity
   gyűrű (::after) — kompozitor-barát, és az animáció-kapu is meg tudja állítani */
.vimeo-unmute::after{
  content:""; position:absolute; inset:-2px; border-radius:999px;
  border:2px solid rgba(27,138,110,.45); pointer-events:none;
  animation: vimeoUnmutePulse 2.4s ease-in-out infinite;
}
.vimeo-unmute:hover{
  background:rgba(11,46,32,0.9);
  transform:translateY(-1px);
  box-shadow:0 12px 28px rgba(0,0,0,0.4), 0 0 0 6px rgba(27,138,110,0.10);
}
.vimeo-unmute svg{ color:#7FC9B2; flex-shrink:0; }
@keyframes vimeoUnmutePulse{
  0%{ transform:scale(1); opacity:.9; }
  70%,100%{ transform:scale(1.35); opacity:0; }
}
@media(max-width:520px){
  .vimeo-unmute{ right:10px; bottom:10px; padding:8px 12px 8px 10px; font-size:0.76rem; }
}

/* Testimonials Vimeo grid */
.testi-featured{ max-width:960px; margin:0 auto 48px; }
.testi-caption{
  display:flex; flex-direction:column; gap:6px;
  padding:16px 4px 0;
  text-align:center;
}
.testi-caption-lg{ padding-top:22px; }
.testi-name{
  font-family:'Inter',sans-serif;
  font-size:0.66rem;
  text-transform:uppercase;
  letter-spacing:0.18em;
  color:rgba(127,201,178,0.72);
  font-weight:600;
}
.testi-caption-lg .testi-name{ font-size:0.72rem; }
.testi-title{
  font-family:'Inter Tight',sans-serif;
  font-weight:600;
  font-size:0.98rem;
  color:var(--ink);
  line-height:1.45;
  letter-spacing:-0.005em;
  text-wrap:pretty;
}
.testi-caption-lg .testi-title{ font-size:1.14rem; line-height:1.4; }
.testi-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:22px;
  margin-bottom:48px;
}
.testi-item{ display:flex; flex-direction:column; }
.testi-item .vimeo-embed{ max-width:100%; }
@media(max-width:900px){
  .testi-grid{ grid-template-columns:1fr; gap:32px; }
  .testi-featured{ margin-bottom:36px; }
}
@keyframes vimeoFadeUp{
  to{ opacity:1; transform:translateY(0); }
}
@media(max-width:860px){
  .vimeo-embed{ border-radius:16px; }
  .vimeo-embed-glow{ border-radius:16px; }
}


/* ================================================================
   F1 KIEGÉSZÍTÉSEK — a Design-exportban nem szereplő, a Blade-be
   illesztés miatt szükséges szabályok.
   FIGYELEM: ha a dizájn CSS-e újra exportálásra kerül, ezt a blokkot
   újra hozzá kell fűzni!
   ================================================================ */

/* A hero CTA az exportban <button> volt, nálunk <a> (valódi navigáció),
   ezért kell a link-aláhúzás kikapcsolása. */
a.hero-btn-primary{ text-decoration:none; }

/* A fejléc-CTA hover-effektje a dizájnban React inline eseménykezelő volt
   (app-code.js: background=var(--green-700) + translateY(-1px)) — statikus
   markupban CSS-ként pótoljuk. A !important az inline background miatt kell. */
.hdr-cta:hover{ background:var(--green-700) !important; transform:translateY(-1px); }

/* A dizájn saját mobil-hibájának javítása: 390px-en 501px-re csordul túl az
   oldal (dekor-glow elemek + life8-track lógnak ki — az EREDETI exportban is,
   méréssel igazolva). A `clip` kell, NEM `hidden`: az overflow-x:hidden
   scroll-konténert csinálna és eltörné a sticky fejlécet. */
html, body{ overflow-x: clip; }


/* ================================================================
   ALOLDALAK (F4) — rólam / GYIK / impresszum / időpontfoglalás
   ================================================================
   MIÉRT VAN ERRE SZÜKSÉG?

   1) A Design-export aloldalain a markup 40–70%-a inline `style=` volt
      (a `gyik` 111 eleméből 77) — Blade-ben olvashatatlan. Az ismétlődő
      stílus-mintákat itt emeltük CSS-osztályba; a vizuális eredmény
      pixelre azonos az exporttal.

   2) Az `impresszum` és a `foglalas` nézet TAILWIND segédosztályokra épült
      (`max-w-2xl`, `mx-auto`, `px-6`, `py-20`, `text-muted`, `gap-5`…), de a
      Design-előnézetbe Tailwind CSS nem töltődött be — ezért mutat a két
      design-PNG stílus nélküli, olvashatatlan oldalt. Az itteni szabályok a
      Tailwind ALAPÉRTELMEZETT értékeit fordítják le, azaz azt a megjelenést
      adják, amit a dizájner szánt. (A dizájn saját, létező osztályai —
      `.eyebrow`, `.card`, `.btn` — érintetlenül maradtak.)

   Névtér: minden itteni osztály `pl4-` prefixű, hogy soha ne ütközzön a
   dizájn saját osztályaival. FIGYELEM: ha a dizájn CSS-e újra exportálásra
   kerül, ezt a blokkot újra hozzá kell fűzni!
   ================================================================ */

/* ── EXPORT-HIBA JAVÍTÁSA: az `.eyebrow` rombusz-jele ─────────────────
   A Design CSS-e (fent, 51. sor és a design-forras/penzugyilab.css 53. sora)
   JS-stílusú `◆` escape-et használ a `content`-ben, amit a CSS NEM ismer
   — a böngésző szó szerint kiírja: „u25C6 JOGI TUDNIVALÓK". A CSS-escape
   alakja `\25C6`. Azért ITT javítjuk (nem fent), hogy egy esetleges
   CSS-újraexport után is megmaradjon a javítás.
   Csak az F4-es aloldalak használják a `.eyebrow`-t: a főoldal blokkjai saját
   változatokat kaptak (`mag-eyebrow`, `team-eyebrow`, …) — azokat nem érinti. */
.eyebrow::before{ content:"\25C6"; }

/* ── Közös aloldal-konténer (Tailwind: mx-auto px-6 + max-w-* py-*) ───── */
.pl4-page{
  width:100%;
  margin:0 auto;
  padding-left:1.5rem;
  padding-right:1.5rem;
}
.pl4-page-narrow{ max-width:42rem; padding-top:5rem; padding-bottom:5rem; }  /* max-w-2xl py-20 */
.pl4-page-wide  { max-width:48rem; padding-top:4rem; padding-bottom:4rem; }  /* max-w-3xl py-16 */

/* ── Tipográfia és apró segédek (Tailwind-megfelelők) ────────────────── */
.pl4-mb-3{ margin-bottom:0.75rem; }
.pl4-mb-4{ margin-bottom:1rem; }
.pl4-muted{ color:var(--muted); }

.pl4-h1{                       /* font-display text-3xl text-ink mb-10 + fw500 */
  font-family:'Inter Tight',sans-serif;
  font-weight:500;
  font-size:1.875rem;
  line-height:2.25rem;
  color:var(--ink);
  margin:0 0 2.5rem;
}
.pl4-h1-lg{                    /* font-display text-3xl md:text-4xl mb-4 + fw500 */
  font-family:'Inter Tight',sans-serif;
  font-weight:500;
  font-size:1.875rem;
  line-height:2.25rem;
  color:var(--ink);
  margin:0 0 1rem;
}
@media (min-width:768px){
  .pl4-h1-lg{ font-size:2.25rem; line-height:2.5rem; }
}
.pl4-lead{                     /* text-muted mb-8 leading-relaxed */
  color:var(--muted);
  line-height:1.625;
  margin:0 0 2rem;
}
.pl4-note{                     /* text-muted text-sm leading-relaxed */
  color:var(--muted);
  font-size:0.875rem;
  line-height:1.625;
  margin:0;
}

/* ── IMPRESSZUM ──────────────────────────────────────────────────────── */
.pl4-datalist{                 /* flex flex-col gap-5 text-ink */
  display:flex;
  flex-direction:column;
  gap:1.25rem;
  color:var(--ink);
}
/* A még pótolandó jogi adatok jelölése — a dizájn `todo` osztályának
   megfelelője (a Design CSS-ében nem volt hozzá szabály). */
.pl4-todo{ color:var(--gold); font-style:italic; }

.pl4-card-pad{ padding:1.5rem; margin-top:2.5rem; }   /* card p-6 mt-10 */

/* ── IDŐPONTFOGLALÁS ─────────────────────────────────────────────────── */
.pl4-checklist{                /* flex flex-col gap-2 mb-10 text-ink text-sm */
  list-style:none;
  margin:0 0 2.5rem;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:0.5rem;
  color:var(--ink);
  font-size:0.875rem;
  line-height:1.25rem;
}
.pl4-checklist-item{ display:flex; align-items:flex-start; gap:0.5rem; }
.pl4-check-icon{ color:var(--green); margin-top:0.125rem; flex-shrink:0; }

.pl4-embed{ overflow:hidden; min-height:700px; }      /* card overflow-hidden */
.pl4-embed iframe{ display:block; width:100%; height:700px; border:0; }

/* A dizájnban <button> volt (React navigate()), nálunk <a> — valódi navigáció */
.pl4-back-link{
  display:inline-block;
  margin-top:2rem;
  color:var(--muted);
  font-size:0.875rem;
  line-height:1.25rem;
  text-decoration:none;
  transition:color .2s ease;
}
.pl4-back-link:hover{ color:var(--ink); }

/* ── RÓLAM (magazin) ─────────────────────────────────────────────────── */
/* A markup egyébként teljesen a `mag-*` osztályokra épül (lásd az ABOUT
   MAGAZINE blokkot). Csak azért kell ide szabály, mert a dizájn két
   <button>-jéből nálunk <a> lett. */
a.mag-back{ display:inline-block; text-decoration:none; }
a.mag-cta-btn{ text-decoration:none; }

/* ── GYIK (harmonika) ────────────────────────────────────────────────── */
/* Az alábbi értékek 1:1-ben a gyik.html inline stílusaiból származnak;
   a válasz-panel stílusa a Design React-forrásából (template.html), mert
   az export csak az összecsukott állapotot tartalmazza.

   JS-SZERZŐDÉS (F3 / oldal.js): a nyitást egyetlen állapot-osztály adja —
   `.pl4-faq-item.is-open`. A CSS ebből mindent levezet (válasz megjelenik,
   a nyíl 180°-ot fordul). Itt szándékosan NINCS keret- vagy háttérváltás:
   az eredeti React-változat sem csinált ilyet. */
.pl4-faq-page{
  background:linear-gradient(rgb(2,8,7) 0%, rgb(3,26,22) 100%);
  min-height:100vh;
  padding:120px 0 80px;
}
.pl4-faq-wrap{ max-width:780px; margin:0 auto; padding:0 4vw; }
.pl4-faq-h1{
  font-family:'Inter Tight',sans-serif;
  font-weight:800;
  font-size:clamp(1.6rem,3.2vw,2.4rem);
  letter-spacing:-0.025em;
  color:#F0F5F2;
  margin:0 0 8px;
}
.pl4-faq-lead{
  font-family:'Inter',sans-serif;
  font-size:0.95rem;
  color:rgba(234,241,237,0.42);
  line-height:1.6;
  margin:0 0 48px;
}
.pl4-faq-item{
  border:1px solid rgba(127,201,178,0.07);
  border-radius:16px;
  margin-bottom:10px;
  overflow:hidden;
  background:rgba(255,255,255,0.02);
  transition:border-color .3s ease;
}
.pl4-faq-q{
  width:100%;
  background:none;
  border:none;
  cursor:pointer;
  padding:20px 24px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  text-align:left;
}
.pl4-faq-q-text{
  font-family:'Inter Tight',sans-serif;
  font-weight:700;
  font-size:0.92rem;
  color:rgba(234,241,237,0.85);
}
.pl4-faq-icon{ flex-shrink:0; transition:transform .3s ease; transform:rotate(0deg); }
.pl4-faq-a{
  display:none;
  padding:0 24px 20px;
  font-family:'Inter',sans-serif;
  font-size:0.86rem;
  color:rgba(234,241,237,0.45);
  line-height:1.7;
}
.pl4-faq-item.is-open .pl4-faq-a{ display:block; }
.pl4-faq-item.is-open .pl4-faq-icon{ transform:rotate(180deg); }

/* Záró blokk: kövess / kérdezz / jelentkezz */
.pl4-faq-cta{
  margin-top:56px;
  text-align:center;
  padding-top:48px;
  border-top:1px solid rgba(127,201,178,0.08);
}
.pl4-faq-cta-h3{
  font-family:'Inter Tight',sans-serif;
  font-weight:700;
  font-size:1.15rem;
  color:#F0F5F2;
  margin:0 0 8px;
}
.pl4-faq-cta-p{
  font-family:'Inter',sans-serif;
  font-size:0.88rem;
  color:rgba(234,241,237,0.4);
  max-width:480px;
  margin:0 auto 24px;
  line-height:1.6;
}
.pl4-faq-social{ display:flex; gap:10px; justify-content:center; margin-bottom:16px; }
.pl4-faq-social-item{
  width:40px;
  height:40px;
  border-radius:11px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.06);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:all .25s ease;
}
.pl4-faq-social-item:hover{ background:rgba(42,196,153,0.12); border-color:rgba(127,201,178,0.20); }
.pl4-faq-social-label{
  font-family:'Inter',sans-serif;
  font-size:0.5rem;
  font-weight:600;
  color:rgba(234,241,237,0.45);
  letter-spacing:0.02em;
}
.pl4-faq-contact{
  font-family:'Inter',sans-serif;
  font-size:0.82rem;
  color:rgba(234,241,237,0.4);
  margin-bottom:6px;
}
.pl4-faq-contact-last{ margin-bottom:32px; }
.pl4-faq-cta-btn{ border-radius:999px; padding:14px 32px; }

/* A közös lábléc mobil-törése (a dizájn saját hibájának javítása): az inline
   grid (1.2fr 1fr 1fr) 390px-en nem tört, a 3. oszlop (Fontos tudnivaló + MNB
   nyilvántartási szám) a viewporton kívülre került — az overflow-x: clip miatt
   OLVASHATATLANUL. Az !important az inline style felülütéséhez kell. */
@media (max-width: 860px){
  .pl-footer-grid{ grid-template-columns: 1fr !important; gap: 32px !important; }
}
@media (max-width: 640px){
  .pl-zaro-grid{ grid-template-columns: 1fr !important; }
}


/* ================================================================
   KÉRDŐÍV (F6) — felmérés varázsló + eredmény-oldalak
   ================================================================
   MIT STÍLUSOZ EZ A BLOKK?

   A felmérés markupját NEM ez a domain adja: a Form modul rendereli
   (`<x-ns-form name="penzugyilab-felmeres">` → app/Modules/Form/Views/
   components/ns-form.blade.php + field-types/*.blade.php). A modul
   Bootstrap-osztályneveket használ (form-check, form-control, mb-3, btn…),
   ezen a domainen viszont SZÁNDÉKOSAN NINCS Bootstrap — tehát minden
   osztályt itt kell felöltöztetni, a `.pl6-kerdoiv` kereten belülre zárva.

   ETALON: 1_new/penzugyilab/design-forras/nezetek/kerdoiv.png. A modul
   markupja szerkezetileg eltér a dizájn <button>-jeitől (nálunk valódi
   radio/checkbox van — billentyűzettel is használható, JS nélkül is
   beküldhető); a SZÍN, a tipográfia és a hangulat egyezik.

   ⚠️ SPECIFICITÁS: a modul komponense saját, „scoped" <style> blokkot is
   kiír a body-ba (haladás-sáv, opció-visszajelzés, is-invalid). Az a
   stíluslap KÉSŐBB jön, mint ez a fájl, ezért az itteni felülírásokhoz
   `.pl6-kerdoiv .ns-form-wrapper …` (3 osztály) kell — 2 osztállyal
   döntetlen lenne, és a későbbi (modul-)szabály nyerne.
   ================================================================ */

/* ── Segédosztályok (Bootstrap-pótlás), CSAK a kérdőív keretén belül ──── */
.pl6-kerdoiv .mb-1{ margin-bottom:.25rem; }
.pl6-kerdoiv .mb-2{ margin-bottom:.5rem; }
.pl6-kerdoiv .mb-3{ margin-bottom:1.5rem; }
.pl6-kerdoiv .my-3{ margin:1.5rem 0; }
.pl6-kerdoiv .mt-2{ margin-top:.5rem; }
.pl6-kerdoiv .mt-4{ margin-top:2rem; }
.pl6-kerdoiv .ms-3{ margin-left:1rem; }
.pl6-kerdoiv .mb-0{ margin-bottom:0; }
.pl6-kerdoiv .small{ font-size:.8rem; }

/* ── Az oldal kerete: sötét, teljes magasságú, középre zárt ───────────── */
.pl6-kerdoiv{
  background:linear-gradient(170deg, #031A16 0%, #010C0A 50%, #020807 100%);
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:60px 24px;
}
.pl6-kerdoiv-inner{ width:100%; max-width:600px; }

/* ── Fejléc-sor: rovatcímke (az űrlap `title`-je) + „X / 9" ───────────── */
/* A modul a címet a form FÖLÉ, a haladásjelzőt a formba rendereli. A
   dizájnban a kettő EGY sorban áll — ezért a cím abszolút pozíciójú a
   wrapper bal felső sarkában, a haladás-szöveg pedig jobbra zárt. */
.pl6-kerdoiv .ns-form-wrapper{
  position:relative;
  width:100%;
  color:rgba(234,241,237,0.6);
  font-family:'Inter',sans-serif;
}
.pl6-kerdoiv .ns-form-title{
  position:absolute;
  top:0; left:0;
  margin:0;
  font-family:'Inter',sans-serif;
  font-size:0.68rem;
  font-weight:500;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:rgba(127,201,178,0.5);
  line-height:1.2;
}
/* A leírás az adminban/az űrlap adatában megvan, de a dizájn kérdőív-
   képernyőjén nincs bevezető bekezdés — itt nem jelenítjük meg. */
.pl6-kerdoiv .ns-form-description{ display:none; }

.pl6-kerdoiv .ns-form-wizard-progress{ margin-bottom:48px; }
.pl6-kerdoiv .ns-form-progress-text{
  text-align:right;
  font-size:0.68rem;
  font-weight:500;
  color:rgba(234,241,237,0.35);
  line-height:1.2;
  margin:0 0 8px;
}
.pl6-kerdoiv .ns-form-wrapper .ns-form-progress-track{
  height:2px;
  background:rgba(255,255,255,0.06);
  border-radius:1px;
}
.pl6-kerdoiv .ns-form-wrapper .ns-form-progress-bar{
  height:2px;
  background:linear-gradient(90deg, rgba(127,201,178,0.6), rgba(42,196,153,0.8));
  transition:width .5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── A kérdés (radio / checkbox_group csoport-címkéje = <div>) ────────── */
.pl6-kerdoiv .ns-form-step div.form-label{
  font-family:'Inter Tight',sans-serif;
  font-weight:800;
  font-size:clamp(1.3rem, 2.8vw, 1.8rem);
  letter-spacing:-0.02em;
  color:#F0F5F2;
  line-height:1.2;
  margin-bottom:28px;
}
/* A 9. lépés beviteli mezőinek címkéje (<label>) — kicsi, halvány */
.pl6-kerdoiv .ns-form-step label.form-label{
  display:block;
  font-family:'Inter',sans-serif;
  font-size:0.8rem;
  font-weight:500;
  color:rgba(234,241,237,0.45);
  margin-bottom:8px;
}
.pl6-kerdoiv .text-danger{ color:rgba(42,196,153,0.8); margin-left:2px; }
/* A kérdés-címekben nem kell a kötelezőség-csillag: MINDEN kérdés kötelező,
   a varázsló válasz nélkül úgysem enged tovább (a dizájnban sincs csillag).
   A 9. lépés beviteli mezőinél viszont marad — ott van opcionális mező is. */
.pl6-kerdoiv .ns-form-step div.form-label .text-danger{ display:none; }

/* A 9. lépés címe és felvezetője (html mezőtípus tartalma) */
.pl6-kerdoiv .ns-form-html-block{ margin:0 0 28px; }
.pl6-kerdoiv .ns-form-step-title{
  font-family:'Inter Tight',sans-serif;
  font-weight:800;
  font-size:clamp(1.3rem, 2.8vw, 1.8rem);
  letter-spacing:-0.02em;
  color:#F0F5F2;
  line-height:1.2;
  margin:0 0 10px;
}
.pl6-kerdoiv .ns-form-step-lead{
  font-family:'Inter',sans-serif;
  font-size:0.88rem;
  color:rgba(234,241,237,0.42);
  line-height:1.6;
  margin:0;
}

/* ── Válasz-opciók: nagy, kattintható kártyák ─────────────────────────── */
.pl6-kerdoiv .ns-form-check-group,
.pl6-kerdoiv .ns-form-step .mb-3 > .form-check:first-of-type{ margin-top:0; }

.pl6-kerdoiv .form-check{
  position:relative;
  display:flex;
  align-items:center;
  gap:14px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.07);
  border-radius:14px;
  padding:15px 20px;
  margin-bottom:9px;
  cursor:pointer;
  transition:background .25s ease, border-color .25s ease;
}
.pl6-kerdoiv .form-check:hover{
  background:rgba(255,255,255,0.05);
  border-color:rgba(127,201,178,0.18);
}
/* A teljes kártya kattintható legyen, ne csak a felirat */
.pl6-kerdoiv .form-check-label::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:14px;
}
.pl6-kerdoiv .form-check-label{
  font-family:'Inter',sans-serif;
  font-size:0.9rem;
  font-weight:400;
  color:rgba(234,241,237,0.6);
  cursor:pointer;
  transition:color .2s ease;
}

/* A natív jelölő átszabása a dizájn körére / négyzetére */
.pl6-kerdoiv .form-check-input{
  appearance:none;
  -webkit-appearance:none;
  width:20px; height:20px;
  flex:0 0 20px;
  margin:0;
  border:2px solid rgba(255,255,255,0.15);
  border-radius:10px;
  background:transparent;
  display:grid;
  place-items:center;
  cursor:pointer;
  transition:border-color .2s ease, background .2s ease;
}
.pl6-kerdoiv .form-check-input[type="checkbox"]{ border-radius:7px; }
.pl6-kerdoiv .form-check-input:checked{ border-color:rgba(42,196,153,0.9); }
.pl6-kerdoiv .form-check-input:checked::after{
  content:"";
  width:10px; height:10px;
  border-radius:50%;
  background:rgba(42,196,153,0.95);
}
.pl6-kerdoiv .form-check-input[type="checkbox"]:checked::after{ border-radius:3px; }
.pl6-kerdoiv .form-check-input:focus-visible{ outline:2px solid rgba(42,196,153,0.5); outline-offset:2px; }

/* Kiválasztott kártya (a :has() a szülő állapotát adja; a felirat színe
   nélküle is átvált a szomszéd-szelektorral) */
.pl6-kerdoiv .form-check:has(.form-check-input:checked){
  background:rgba(42,196,153,0.08);
  border-color:rgba(42,196,153,0.35);
}
.pl6-kerdoiv .form-check-input:checked + .form-check-label{ color:#EAF1ED; }

/* ── Beviteli mezők (9. lépés) ────────────────────────────────────────── */
.pl6-kerdoiv .form-control{
  width:100%;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.07);
  border-radius:12px;
  padding:14px 16px;
  color:#EAF1ED;
  font-family:'Inter',sans-serif;
  font-size:0.92rem;
  line-height:1.4;
  transition:border-color .2s ease, background .2s ease;
}
.pl6-kerdoiv .form-control::placeholder{ color:rgba(234,241,237,0.25); }
.pl6-kerdoiv .form-control:focus{
  outline:none;
  border-color:rgba(42,196,153,0.45);
  background:rgba(255,255,255,0.05);
}
.pl6-kerdoiv textarea.form-control{ resize:vertical; min-height:110px; }
.pl6-kerdoiv .form-text{
  font-family:'Inter',sans-serif;
  font-size:0.78rem;
  color:rgba(234,241,237,0.3);
  margin-top:8px;
}

/* ── Opció-szintű visszajelzés (VIP-üzenet) ───────────────────────────── */
.pl6-kerdoiv .ns-form-wrapper .ns-form-option-feedback{
  background:rgba(42,196,153,0.07);
  border:1px solid rgba(42,196,153,0.22);
  border-radius:14px;
  padding:16px 18px;
  margin-top:18px;
  color:rgba(234,241,237,0.7);
  font-family:'Inter',sans-serif;
  font-size:0.84rem;
  line-height:1.65;
  white-space:pre-line;
}

/* ── Léptető gombok ───────────────────────────────────────────────────── */
.pl6-kerdoiv .ns-form-wizard-nav{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
  margin-top:32px;
}
.pl6-kerdoiv .ns-form-prev{ margin-right:auto; }
.pl6-kerdoiv .ns-form-next,
.pl6-kerdoiv .ns-form-submit{ margin-left:auto; }
.pl6-kerdoiv .btn-outline-secondary{
  background:transparent;
  color:rgba(234,241,237,0.55);
  border-color:rgba(255,255,255,0.12);
}
.pl6-kerdoiv .btn-outline-secondary:hover{
  color:#EAF1ED;
  border-color:rgba(127,201,178,0.35);
}
.pl6-kerdoiv .ns-form-draft-status{
  flex:1 0 100%;
  font-family:'Inter',sans-serif;
  font-size:0.75rem;
  color:rgba(234,241,237,0.35) !important;
  margin-left:0;
}
.pl6-kerdoiv .ns-form-wrapper .ns-form-step-error{
  flex:1 0 100%;
  font-family:'Inter',sans-serif;
  font-size:0.8rem;
  color:#E88E7D;
  margin-top:0;
}

/* Hibajelölés — a modul piros kerete helyett a sötét felülethez hangolt */
.pl6-kerdoiv .ns-form-wrapper .is-invalid{ border-color:rgba(232,142,125,0.7) !important; }
.pl6-kerdoiv .ns-form-wrapper .ns-form-check-group.is-invalid{
  border:1px solid rgba(232,142,125,0.7);
  border-radius:16px;
  padding:8px 10px;
}
.pl6-kerdoiv .ns-form-wrapper .form-check-input.is-invalid{ outline:none; }

/* ── Rendszerüzenetek (siker / validációs hiba) ───────────────────────── */
.pl6-kerdoiv .alert{
  border-radius:14px;
  padding:14px 18px;
  font-family:'Inter',sans-serif;
  font-size:0.85rem;
  line-height:1.6;
  margin-bottom:24px;
}
.pl6-kerdoiv .alert-success{
  background:rgba(42,196,153,0.1);
  border:1px solid rgba(42,196,153,0.3);
  color:#BDEBDC;
}
.pl6-kerdoiv .alert-danger{
  background:rgba(232,142,125,0.1);
  border:1px solid rgba(232,142,125,0.3);
  color:#F0C6BC;
}
.pl6-kerdoiv .alert ul{ margin:6px 0 0; padding-left:18px; }

/* ── Mobil ────────────────────────────────────────────────────────────── */
@media (max-width:600px){
  .pl6-kerdoiv{ padding:40px 18px; }
  .pl6-kerdoiv .form-check{ padding:14px 16px; }
  .pl6-kerdoiv .ns-form-next,
  .pl6-kerdoiv .ns-form-submit,
  .pl6-kerdoiv .ns-form-prev{ padding:0.75rem 1.2rem; font-size:0.88rem; }
}

/* ================================================================
   EREDMÉNY-OLDALAK (F6) — /eredmeny-a (VIP) és /eredmeny-b
   ================================================================ */

/* ── „A" ág: sötét, ünneplő ───────────────────────────────────────────── */
.pl6-result{
  background:var(--petrol);   /* a dizájn `var(--navy)`-t írt — olyan változó NINCS */
  min-height:100vh;
  padding:64px 24px;
}
.pl6-result-inner{
  max-width:42rem;
  margin:0 auto;
  text-align:center;
}
.pl6-result-badge{
  width:56px; height:56px;
  border-radius:50%;
  background:rgba(31,111,92,0.2);
  border:1px solid rgba(31,111,92,0.27);
  display:flex; align-items:center; justify-content:center;
  font-size:1.5rem;
  margin:0 auto 1.5rem;
}
.pl6-result-eyebrow{ display:flex; justify-content:center; margin-bottom:1rem; }
.pl6-result-h1{
  font-family:'Inter Tight',sans-serif;
  font-weight:500;
  font-size:clamp(1.6rem, 4vw, 2.2rem);
  line-height:1.2;
  color:var(--paper-dk);
  margin:0 0 1.25rem;
}
.pl6-result-h1-accent{ color:var(--green); }
.pl6-result-lead{
  font-family:'Inter',sans-serif;
  color:rgba(246,244,239,0.65);
  line-height:1.7;
  margin:0 0 2rem;
}

/* Videó (16:9) — amíg nincs azonosító, helyőrző doboz áll a helyén */
.pl6-video{
  border-radius:1rem;
  overflow:hidden;
  border:1px solid rgba(246,244,239,0.1);
  background:#000;
  margin-bottom:2rem;
}
.pl6-video-frame{
  position:relative;
  padding-bottom:56.25%;
  height:0;
}
.pl6-video-frame iframe{
  position:absolute; inset:0;
  width:100%; height:100%;
  border:0;
}
.pl6-video-placeholder{
  display:flex; align-items:center; justify-content:center;
  padding-bottom:0;
  height:auto;
  aspect-ratio:16 / 9;
  background:rgba(246,244,239,0.04);
  font-family:'Inter',sans-serif;
  font-size:0.85rem;
  color:rgba(246,244,239,0.35);
}
.pl6-video-note{
  padding:0.75rem 1rem;
  background:rgba(246,244,239,0.04);
  text-align:left;
  font-family:'Inter',sans-serif;
  font-size:0.72rem;
  color:rgba(246,244,239,0.4);
}
.pl6-video-note code{ font-family:'Inter',sans-serif; color:rgba(246,244,239,0.6); }

.pl6-result-actions{ display:flex; flex-direction:column; align-items:center; gap:0.75rem; }
.pl6-result-cta{ text-decoration:none; }
.pl6-result-callback{
  font-family:'Inter',sans-serif;
  font-size:0.85rem;
  color:rgba(246,244,239,0.45);
  line-height:1.6;
  max-width:34rem;
  margin:0.25rem 0 0;
}
.pl6-result-back{
  display:inline-block;
  margin-top:1.5rem;
  font-family:'Inter',sans-serif;
  font-size:0.8rem;
  color:rgba(246,244,239,0.35);
  text-decoration:none;
  transition:color .2s ease;
}
.pl6-result-back:hover{ color:rgba(246,244,239,0.7); }

/* ── „B" ág: világos, higgadt ─────────────────────────────────────────── */
.pl6-result-light{
  padding:80px 24px;
}
.pl6-result-h1-light{
  font-family:'Inter Tight',sans-serif;
  font-weight:500;
  font-size:clamp(1.6rem, 4vw, 2.2rem);
  line-height:1.2;
  color:var(--ink);
  margin:0 0 1.25rem;
}
.pl6-result-lead-light{
  font-family:'Inter',sans-serif;
  font-size:1.075rem;
  color:var(--muted);
  line-height:1.7;
  margin:0 0 2.5rem;
}
.pl6-result-card{
  display:inline-flex;
  align-items:flex-start;
  gap:0.6rem;
  text-align:left;
  padding:1.25rem 1.5rem;
  font-family:'Inter',sans-serif;
  font-size:0.9rem;
  color:var(--ink);
  line-height:1.6;
  margin-bottom:2.5rem;
}
.pl6-result-card-icon{ color:var(--green); flex-shrink:0; margin-top:3px; }


/* ================================================================
   ESZKÖZ-OLDALAK (2. KÖR / K1) — /befektetoi-profil · /kalkulator ·
   /kihivas
   ================================================================
   A három oldal KÜLÖN Claude Design-exportból jött (inline React-
   bundle), és szándékosan SÖTÉT témájú, mini-fejléces "funnel"-oldal —
   nem a főoldal világos fejlécét/láblécét használja (a layout
   `chrome=none` szekció-kapcsolójával). A markup-forrás:
   1_new/penzugyilab/design-forras/uj-oldalak/.

   Névtér: minden osztály `plk-` prefixű. A színek a dizájn nyers
   rgba-értékei (a :root világos-téma változóit ezek az oldalak nem
   használják). Dokumentált egyesítések a három export apró eltérésein:
   animáció-időzítés (.65s / .06s lépcső), kérdés-cím clamp max 1.6rem,
   "← Főoldal" link alfa .45.
   FIGYELEM: ha a dizájn CSS-e újra exportálásra kerül, ezt a blokkot
   újra hozzá kell fűzni!
   ================================================================ */

/* ---------- közös csontváz ---------- */
.plk-page{
  min-height:100vh;
  background:#060e0b;
  color:#F0F5F2;
  line-height:normal;            /* a dizájn body-ján nincs line-height — a site 1.5-ét itt visszaállítjuk */
  display:flex;
  flex-direction:column;
  position:relative;
}
.plk-bg{ position:fixed; inset:0; pointer-events:none; }
.plk-bg--profil{
  background:radial-gradient(ellipse 45% 40% at 50% 30%, rgba(28,140,110,.05) 0%, transparent 55%);
}
.plk-bg--kalkulator{
  background:radial-gradient(ellipse 50% 40% at 40% 25%, rgba(28,140,110,.05) 0%, transparent 55%),
             radial-gradient(ellipse 35% 30% at 80% 70%, rgba(212,162,58,.03) 0%, transparent 50%);
}
.plk-bg--kihivas{
  background:radial-gradient(ellipse 50% 45% at 50% 30%, rgba(28,140,110,.06) 0%, transparent 55%);
}

.plk-header{ padding:0 4vw; border-bottom:1px solid rgba(127,201,178,.06); position:relative; }
.plk-header-inner{
  max-width:1100px; margin:0 auto; height:56px;
  display:flex; align-items:center; justify-content:space-between;
}
.plk-brand{ display:flex; align-items:center; gap:8px; text-decoration:none; }
.plk-brand span{
  font-family:'Inter Tight',sans-serif; font-weight:800; font-size:.95rem;
  color:rgba(234,241,237,.85);
}
.plk-back{
  font-family:'Inter',sans-serif; font-size:.78rem;
  color:rgba(127,201,178,.45); text-decoration:none;
}
.plk-back:hover{ color:rgba(127,201,178,.75); }

.plk-col{ max-width:580px; margin:0 auto; padding:0 24px; width:100%; flex:1 0 auto; position:relative; }
.plk-col--szeles{ max-width:600px; }

.plk-footer{
  border-top:1px solid rgba(127,201,178,.06);
  padding:20px 4vw; text-align:center; margin-top:auto; position:relative;
}
.plk-footer span{
  font-family:'Inter',sans-serif; font-size:.70rem; color:rgba(234,241,237,.22);
}

/* ---------- belépő animáció (a dizájn .ani/.d1–.d4 párja) ---------- */
@keyframes plkFadeUp{
  from{ opacity:0; transform:translateY(22px); filter:blur(4px); }
  to{ opacity:1; transform:translateY(0); filter:blur(0); }
}
.plk-ani{ animation:plkFadeUp .65s cubic-bezier(.22,1,.36,1) both; opacity:0; }
.plk-d1{ animation-delay:.06s; }
.plk-d2{ animation-delay:.12s; }
.plk-d3{ animation-delay:.18s; }
.plk-d4{ animation-delay:.24s; }
@media (prefers-reduced-motion: reduce){
  .plk-ani{ animation:none; opacity:1; }
}

/* ---------- intro (nyitóképernyő) ---------- */
.plk-intro{ padding:100px 0 80px; text-align:center; }
.plk-eyebrow{
  font-family:'Inter',sans-serif; font-size:.62rem; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase;
  color:rgba(127,201,178,.50); margin-bottom:20px;
}
.plk-eyebrow--kihivas{ font-size:.65rem; }
.plk-eyebrow--arany{ color:rgba(212,162,58,.55); margin-bottom:16px; }
.plk-cim{
  font-family:'Inter Tight',sans-serif; font-weight:800;
  font-size:clamp(1.8rem,5vw,2.8rem); letter-spacing:-.04em;
  line-height:1.08; color:#F0F5F2; margin-bottom:18px;
}
.plk-cim--kihivas{ font-size:clamp(2rem,5vw,3rem); line-height:1.05; margin-bottom:20px; }
.plk-cim--kalkulator{ font-size:clamp(1.6rem,4.5vw,2.6rem); margin-bottom:14px; }
.plk-cim-arany{ color:rgba(212,162,58,.85); }
.plk-intro-lead{
  font-family:'Inter',sans-serif; font-size:.92rem;
  color:rgba(234,241,237,.45); line-height:1.7;
  max-width:440px; margin:0 auto 36px;
}
.plk-intro-lead--kihivas{ font-size:.95rem; color:rgba(234,241,237,.50); margin-bottom:8px; max-width:none; }
.plk-intro-lead2{
  font-family:'Inter',sans-serif; font-size:.86rem;
  color:rgba(234,241,237,.35); line-height:1.65;
  max-width:440px; margin:0 auto 40px;
}
.plk-intro-jegyzet{
  font-family:'Inter',sans-serif; font-size:.72rem;
  color:rgba(234,241,237,.25); margin-top:16px;
}

/* ---------- fő CTA gomb (gradiens pirula) ---------- */
.plk-cta{
  display:inline-flex; align-items:center; gap:10px;
  font-family:'Inter Tight',sans-serif; font-weight:700; font-size:1.05rem;
  padding:16px 40px; border-radius:999px; border:none; cursor:pointer;
  background:linear-gradient(155deg,#22A883,#15705A);
  color:rgba(255,255,255,.97);
  box-shadow:0 6px 28px rgba(27,138,110,.35);
  text-decoration:none;
  transition:all .24s cubic-bezier(.22,1,.36,1);
}
.plk-cta:hover{ transform:translateY(-3px); box-shadow:0 12px 40px rgba(27,138,110,.5); }
.plk-cta--kicsi{ font-size:1rem; padding:16px 36px; }

/* ---------- kvíz: haladásjelző ---------- */
.plk-kviz{ padding:60px 0; }
.plk-progress{ width:100%; margin-bottom:40px; }
.plk-progress--kozepre{ max-width:480px; margin:0 auto 40px; }
.plk-progress-fej{ display:flex; justify-content:space-between; margin-bottom:6px; }
.plk-progress-cimke{
  font-family:'Inter',sans-serif; font-size:.68rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:rgba(127,201,178,.50);
}
.plk-progress-szam{
  font-family:'Inter',sans-serif; font-size:.68rem; font-weight:500;
  color:rgba(234,241,237,.35);
}
.plk-progress-sav{ height:3px; background:rgba(255,255,255,.06); border-radius:2px; }
.plk-progress-toltes{
  height:3px; border-radius:2px;
  background:linear-gradient(90deg, rgba(127,201,178,.6), rgba(42,196,153,.85));
  transition:width .5s cubic-bezier(.22,1,.36,1);
}

/* ---------- kvíz: kérdés + opciók ---------- */
.plk-kerdes{
  font-family:'Inter Tight',sans-serif; font-weight:800;
  font-size:clamp(1.2rem,2.8vw,1.6rem); letter-spacing:-.015em;
  color:#F0F5F2; line-height:1.25; margin-bottom:28px;
}
.plk-opts{ display:flex; flex-direction:column; gap:10px; }
.plk-opt{
  width:100%; text-align:left; cursor:pointer;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.07);
  border-radius:14px; padding:15px 20px;
  display:flex; align-items:center; gap:14px;
  transition:all .25s ease;
  font:inherit; color:inherit;
}
.plk-kviz--pontszam .plk-opt{ padding:16px 20px; }
/* hover csak amíg nincs lezárva a kör (válasz után a lista .lezart) */
.plk-opts:not(.lezart) .plk-opt:hover{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.12);
}
.plk-opts.lezart .plk-opt{ cursor:default; }
.plk-opt.kivalasztott{
  background:rgba(42,196,153,.10);
  border-color:rgba(127,201,178,.30);
}
.plk-opt.helyes{
  background:rgba(42,196,153,.12);
  border-color:rgba(42,196,153,.5);
}
.plk-opt.hibas{
  background:rgba(220,60,60,.08);
  border-color:rgba(220,60,60,.4);
}
.plk-opt-szoveg{
  font-family:'Inter',sans-serif; font-size:.90rem; font-weight:400;
  color:rgba(234,241,237,.60);
}
.plk-kviz--pontszam .plk-opt-szoveg{ font-weight:500; color:rgba(234,241,237,.65); }
.plk-opt.kivalasztott .plk-opt-szoveg{ font-weight:600; color:rgba(180,230,210,.95); }
.plk-opt.helyes .plk-opt-szoveg{ color:rgba(127,201,178,.95); }
.plk-opt.hibas .plk-opt-szoveg{ color:rgba(220,120,120,.85); }

/* profil-kvíz: rádiókör */
.plk-radio{
  width:20px; height:20px; border-radius:10px; flex-shrink:0;
  border:2px solid rgba(255,255,255,.15); background:transparent;
  display:grid; place-items:center; transition:all .2s ease;
}
.plk-opt.kivalasztott .plk-radio{
  border-color:rgba(42,196,153,.8); background:rgba(42,196,153,.20);
}
.plk-radio-pont{ width:8px; height:8px; border-radius:4px; background:rgba(42,196,153,.9); }

/* tudás-kvíz: betű-jelvény */
.plk-betu{
  width:28px; height:28px; border-radius:8px; flex-shrink:0;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.10);
  display:grid; place-items:center;
  font-family:'Inter Tight',sans-serif; font-weight:700; font-size:.72rem;
  color:rgba(127,201,178,.60);
}

/* ---------- kvíz: eredmény-képernyő ---------- */
.plk-eredmeny{ padding:80px 0; text-align:center; }
.plk-eredmeny-ikon{
  width:100px; height:100px; border-radius:50%; margin:0 auto 24px;
  display:grid; place-items:center; font-size:2.4rem;
}
/* a 4 befektetői profil színvilága */
.plk-profil--a .plk-eredmeny-ikon{ background:rgba(100,160,220,.12); border:2px solid rgba(100,160,220,.25); }
.plk-profil--b .plk-eredmeny-ikon{ background:rgba(42,196,153,.12); border:2px solid rgba(42,196,153,.25); }
.plk-profil--c .plk-eredmeny-ikon{ background:rgba(212,162,58,.12); border:2px solid rgba(212,162,58,.25); }
.plk-profil--d .plk-eredmeny-ikon{ background:rgba(160,120,220,.12); border:2px solid rgba(160,120,220,.25); }
.plk-profil--a .plk-eredmeny-cim{ color:rgba(100,160,220,.80); }
.plk-profil--b .plk-eredmeny-cim{ color:rgba(42,196,153,.80); }
.plk-profil--c .plk-eredmeny-cim{ color:rgba(212,162,58,.80); }
.plk-profil--d .plk-eredmeny-cim{ color:rgba(160,120,220,.80); }
.plk-profil--a .plk-video-hely{ border-color:rgba(100,160,220,.25); }
.plk-profil--b .plk-video-hely{ border-color:rgba(42,196,153,.25); }
.plk-profil--c .plk-video-hely{ border-color:rgba(212,162,58,.25); }
.plk-profil--d .plk-video-hely{ border-color:rgba(160,120,220,.25); }
.plk-profil--a .plk-video-kor{ background:rgba(100,160,220,.12); border-color:rgba(100,160,220,.25); }
.plk-profil--b .plk-video-kor{ background:rgba(42,196,153,.12); border-color:rgba(42,196,153,.25); }
.plk-profil--c .plk-video-kor{ background:rgba(212,162,58,.12); border-color:rgba(212,162,58,.25); }
.plk-profil--d .plk-video-kor{ background:rgba(160,120,220,.12); border-color:rgba(160,120,220,.25); }
.plk-profil--a .plk-video-kor svg{ fill:rgba(100,160,220,.80); }
.plk-profil--b .plk-video-kor svg{ fill:rgba(42,196,153,.80); }
.plk-profil--c .plk-video-kor svg{ fill:rgba(212,162,58,.80); }
.plk-profil--d .plk-video-kor svg{ fill:rgba(160,120,220,.80); }

/* tudás-kvíz: pontszám-kör */
.plk-pont-kor{
  width:120px; height:120px; border-radius:50%; margin:0 auto 28px;
  background:rgba(42,196,153,.08); border:2px solid rgba(42,196,153,.25);
  display:grid; place-items:center;
}
.plk-pont-szam{
  font-family:'Inter Tight',sans-serif; font-weight:800; font-size:2.4rem;
  color:rgba(127,201,178,.90); line-height:1;
}
.plk-pont-max{
  font-family:'Inter',sans-serif; font-size:.60rem; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase;
  color:rgba(127,201,178,.45); margin-top:2px;
}

.plk-eredmeny-eyebrow{
  font-family:'Inter',sans-serif; font-size:.62rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase;
  color:rgba(127,201,178,.45); margin-bottom:10px;
}
.plk-eredmeny-cim{
  font-family:'Inter Tight',sans-serif; font-weight:800;
  font-size:clamp(1.6rem,4vw,2.4rem); letter-spacing:-.03em;
  color:#F0F5F2; margin-bottom:10px;
}
.plk-kviz--pontszam .plk-eredmeny-cim{ margin-bottom:8px; }
.plk-eredmeny-alcim{
  font-family:'Inter Tight',sans-serif; font-weight:600; font-size:1.05rem;
  color:rgba(234,241,237,.65); margin-bottom:14px;
}
.plk-kviz--pontszam .plk-eredmeny-alcim{ color:rgba(127,201,178,.75); margin-bottom:16px; }
.plk-eredmeny-szoveg{
  font-family:'Inter',sans-serif; font-size:.90rem;
  color:rgba(234,241,237,.42); line-height:1.7;
  max-width:440px; margin:0 auto 36px;
}
.plk-kviz--pontszam .plk-eredmeny-szoveg{ font-size:.92rem; color:rgba(234,241,237,.45); max-width:420px; }

/* "Videó hamarosan" helyőrző kártya */
.plk-video-hely{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(127,201,178,.08);
  border-radius:18px; aspect-ratio:16/9;
  max-width:480px; margin:0 auto 36px;
  display:flex; align-items:center; justify-content:center;
}
.plk-video-kor{
  width:48px; height:48px; border-radius:50%;
  background:rgba(42,196,153,.15); border:1px solid rgba(42,196,153,.25);
  display:grid; place-items:center; margin:0 auto 10px;
}
.plk-video-kor svg{ fill:rgba(42,196,153,.8); }
.plk-video-felirat{
  font-family:'Inter',sans-serif; font-size:.72rem; color:rgba(234,241,237,.30);
}

.plk-ujra-sor{ margin-top:20px; }
.plk-ujra{
  background:none; border:none; cursor:pointer;
  font-family:'Inter',sans-serif; font-size:.82rem;
  color:rgba(127,201,178,.40);
}
.plk-ujra:hover{ color:rgba(127,201,178,.70); }

/* ---------- kalkulátor ---------- */
.plk-kalk-fej{ padding:72px 0 40px; text-align:center; }
.plk-kalk-fej .plk-intro-lead{ font-size:.90rem; line-height:1.65; margin-bottom:0; }

.plk-chipek{ display:flex; gap:8px; justify-content:center; margin-bottom:36px; flex-wrap:wrap; }
.plk-chip{
  padding:8px 16px; border-radius:999px; cursor:pointer;
  font-family:'Inter Tight',sans-serif; font-weight:700; font-size:.78rem;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06);
  color:rgba(234,241,237,.40); transition:all .2s ease;
}
.plk-chip.aktiv{
  background:rgba(212,162,58,.15); border-color:rgba(212,162,58,.30);
  color:rgba(212,162,58,.90);
}

.plk-panel{
  background:rgba(255,255,255,.02); border:1px solid rgba(127,201,178,.07);
  border-radius:22px; padding:32px 28px; margin-bottom:32px;
  backdrop-filter:blur(8px);
}
.plk-csuszka{ margin-bottom:28px; }
.plk-csuszka:last-child{ margin-bottom:0; }
.plk-csuszka-fej{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:10px; }
.plk-csuszka-cimke{
  font-family:'Inter',sans-serif; font-size:.82rem; font-weight:500;
  color:rgba(234,241,237,.55);
}
.plk-csuszka-ertek{
  font-family:'Inter Tight',sans-serif; font-weight:800; font-size:1.15rem;
  color:rgba(127,201,178,.90); letter-spacing:-.01em;
}
.plk-csuszka-minmax{ display:flex; justify-content:space-between; margin-top:4px; }
.plk-csuszka-minmax span{
  font-family:'Inter',sans-serif; font-size:.62rem; color:rgba(255,255,255,.18);
}

/* csúszka (range) — a dizájn saját stílusa, az oldalra szűkítve */
.plk-page input[type=range]{
  -webkit-appearance:none; appearance:none; width:100%; height:4px; border-radius:2px;
  outline:none; background:rgba(255,255,255,.08); cursor:pointer; border:none; padding:0; margin:0;
}
.plk-page input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:22px; height:22px; border-radius:50%;
  background:linear-gradient(135deg,#2AC89A,#1A8866);
  border:2px solid rgba(255,255,255,.15);
  box-shadow:0 2px 10px rgba(42,196,153,.35);
  cursor:pointer; transition:transform .15s ease;
}
.plk-page input[type=range]::-webkit-slider-thumb:hover{ transform:scale(1.15); }
.plk-page input[type=range]::-moz-range-thumb{
  width:22px; height:22px; border-radius:50%;
  background:linear-gradient(135deg,#2AC89A,#1A8866);
  border:2px solid rgba(255,255,255,.15);
  box-shadow:0 2px 10px rgba(42,196,153,.35);
  cursor:pointer;
}

/* eredmény-kártya */
.plk-ek{
  background:linear-gradient(160deg, rgba(42,196,153,.06), rgba(212,162,58,.04));
  border:1px solid rgba(127,201,178,.10);
  border-radius:22px; padding:36px 28px; margin-bottom:32px; text-align:center;
}
.plk-ek-eyebrow{
  font-family:'Inter',sans-serif; font-size:.68rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  color:rgba(127,201,178,.45); margin-bottom:12px;
}
.plk-ek-ev{
  font-family:'Inter Tight',sans-serif; font-weight:800;
  font-size:clamp(2rem,5vw,3.2rem); letter-spacing:-.04em;
  color:rgba(212,162,58,.90); margin-bottom:6px;
}
.plk-ek-magyarazat{
  font-family:'Inter',sans-serif; font-size:.92rem;
  color:rgba(234,241,237,.55); line-height:1.6; margin-bottom:24px;
}
.plk-ek-kor{
  font-family:'Inter',sans-serif; font-size:.88rem;
  color:rgba(212,162,58,.70); line-height:1.6; margin-bottom:8px;
}
.plk-statok{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:28px; }
.plk-stat{ background:rgba(255,255,255,.03); border-radius:14px; padding:16px 14px; }
.plk-stat-ertek{
  font-family:'Inter Tight',sans-serif; font-weight:800; font-size:1.1rem;
  color:rgba(234,241,237,.75); margin-bottom:3px;
}
.plk-stat--hozam .plk-stat-ertek{ color:rgba(42,196,153,.80); }
.plk-stat-cimke{
  font-family:'Inter',sans-serif; font-size:.65rem; font-weight:500;
  letter-spacing:.08em; text-transform:uppercase; color:rgba(234,241,237,.30);
}
.plk-grafikon svg{ width:100%; max-width:520px; display:block; margin:0 auto; }
.plk-ek-lablec{
  font-family:'Inter',sans-serif; font-size:.70rem; font-style:italic;
  color:rgba(234,241,237,.25); margin-top:16px; line-height:1.5;
}
/* "40+ év" ág (a cél 40 éven belül nem érhető el) */
.plk-ek-nincs{ padding:20px 0; }
.plk-ek-nincs-cim{
  font-family:'Inter Tight',sans-serif; font-weight:700; font-size:1.1rem;
  color:rgba(234,241,237,.60); margin-bottom:8px;
}
.plk-ek-nincs-szoveg{
  font-family:'Inter',sans-serif; font-size:.88rem;
  color:rgba(234,241,237,.38); line-height:1.6;
}

/* záró blokk a kalkulátor alján */
.plk-zaro{ text-align:center; padding:16px 0 80px; }
.plk-zaro-cim{
  font-family:'Inter Tight',sans-serif; font-weight:800; font-size:1.2rem;
  color:#F0F5F2; margin-bottom:10px; letter-spacing:-.01em;
}
.plk-zaro-szoveg{
  font-family:'Inter',sans-serif; font-size:.88rem;
  color:rgba(234,241,237,.40); line-height:1.65;
  max-width:420px; margin:0 auto 28px;
}


/* ================================================================
   FELSŐ MENÜ (2. kör / K2) — kapcsolható navigáció a fejlécben
   ================================================================
   A weboldal-beállítás (site_meta.show_main_menu) kapcsolja BE; a
   markup a partials/header.blade.php @if ága. Kikapcsolva ezekből
   a szabályokból semmi nem érvényesül (a .hdr-nav nem renderelődik).
   FIGYELEM: ha a dizájn CSS-e újra exportálásra kerül, ezt a blokkot
   újra hozzá kell fűzni!
   ================================================================ */
.hdr-nav{ display:flex; align-items:center; gap:26px; }
.hdr-nav-link{
  font-family:'Inter',sans-serif; font-weight:500; font-size:.88rem;
  color:var(--muted); text-decoration:none; white-space:nowrap;
  transition:color .18s ease;
}
.hdr-nav-link:hover{ color:var(--ink); }

.hdr-jobb{ display:flex; align-items:center; gap:12px; }

/* hamburger — csak mobilon látszik */
.hdr-menu-gomb{
  display:none; background:none; border:none; cursor:pointer;
  padding:6px; color:var(--ink); line-height:0; border-radius:8px;
}
.hdr-menu-gomb:hover{ background:rgba(14,26,23,.06); }

/* mobil lenyíló panel */
.hdr-mobil{
  border-top:1px solid var(--line);
  background:rgba(232,236,231,.98);
  backdrop-filter:blur(10px);
  padding:8px 0 12px;
}
.hdr-mobil-link{
  display:block; padding:11px 24px;
  font-family:'Inter',sans-serif; font-weight:500; font-size:.95rem;
  color:var(--ink); text-decoration:none;
}
.hdr-mobil-link:hover{ background:rgba(14,26,23,.05); }

@media (max-width:860px){
  .hdr-nav{ display:none; }
  .hdr-menu-gomb{ display:inline-flex; }
}
/* belépés/kijelentkezés a menüben (K3) — a kijelentkezés POST-gombja
   linknek öltözve */
.hdr-nav-kilepes{ display:inline; margin:0; }
.hdr-nav-link--gomb{
  background:none; border:none; cursor:pointer; padding:0;
  width:auto; text-align:left;
}
.hdr-mobil .hdr-nav-kilepes{ display:block; }
button.hdr-mobil-link{ width:100%; background:none; border:none; cursor:pointer; }
/* ======================================================================
   3. KÖR (L3) KIEGÉSZÍTÉSEK — kártya-aljak · lap-tetejére gomb · sötét menü
   (a dizájn törzs-CSS-e feljebb érintetlen — újraexportnál ezt a blokkot
   újra hozzá kell fűzni!)
   ====================================================================== */

/* D) A 4 lépés-kártya alja egy magasságra: a grid-sor magasságát a
   leghosszabb kártya adja, a rövidebbek eddig a szövegükhöz zsugorodtak.
   A .sys4-step flex-oszlop — a kártya kitölti a szám alatti teljes teret.
   Mobilon (860 alatt sor-elrendezés) a flex:1 a szélességet tölti — ott
   a viselkedés változatlan. */
.sys4-card{ flex:1 1 auto; }

/* F) „Lap tetejére" gomb — saját, Bootstrap-mentes (a közös layout gombja
   ezen a domainen szándékosan nem töltődik). Az oldal.js L3-szekciója
   szúrja be, és a .lathato osztállyal kapcsolja. */
.pl-top-gomb{
  position:fixed; right:22px; bottom:22px; z-index:1070;
  width:44px; height:44px; border-radius:50%;
  background:var(--green); color:#fff; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 16px rgba(10,26,23,.25);
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .25s ease, transform .25s ease, visibility .25s, background .18s;
}
.pl-top-gomb.lathato{ opacity:1; visibility:visible; transform:none; }
.pl-top-gomb:hover{ background:#13705A; }
@media(max-width:640px){
  .pl-top-gomb{ right:14px; bottom:14px; width:40px; height:40px; }
}
@media (prefers-reduced-motion: reduce){
  .pl-top-gomb{ transition:none; }
}

/* G) A sötét (plk) fejléc menü-változata — a világos hdr-nav sötét párja
   (plk-fejlec.blade.php; csak show_main_menu mellett kerül a DOM-ba) */
.plkm-nav{ display:flex; align-items:center; gap:22px; }
.plkm-link{
  font-family:'Inter',sans-serif; font-weight:500; font-size:.85rem;
  color:rgba(234,241,237,.62); text-decoration:none; white-space:nowrap;
  transition:color .18s ease;
}
.plkm-link:hover{ color:#fff; }
.plkm-link--gomb{ background:none; border:none; cursor:pointer; padding:0; }
.plk-menu-gomb{
  display:none; background:none; border:none; cursor:pointer;
  padding:6px; color:rgba(234,241,237,.8); line-height:0; border-radius:8px;
}
.plk-menu-gomb:hover{ background:rgba(255,255,255,.06); }
.plkm-mobil{
  border-top:1px solid rgba(127,201,178,.10);
  background:rgba(6,14,11,.98);
  padding:8px 0 12px;
}
.plkm-mobil-link{
  display:block; padding:11px 4vw;
  font-family:'Inter',sans-serif; font-weight:500; font-size:.95rem;
  color:rgba(234,241,237,.75); text-decoration:none;
}
.plkm-mobil-link:hover{ color:#fff; background:rgba(255,255,255,.04); }
@media(max-width:860px){
  .plkm-nav{ display:none; }
  .plk-menu-gomb{ display:inline-flex; }
}

/* ==================================================================
   ANIMÁCIÓ-KAPU (CPU-kör, 2026-08-13)
   ------------------------------------------------------------------
   Párja az oldal.js azonos nevű blokkja: a [data-anim-kapu] szekciók
   csak láthatóan kapják meg a `pl-anim-be` osztályt, háttér-fülön a
   <html> `pl-lap-rejtett`-et kap. E nélkül minden végtelen animáció
   a képernyőn kívül és háttér-lapon is égette a CPU-t (mérve:
   1_new/cetlik/penzugyilab-cpu-terheles.md).
   ================================================================== */
[data-anim-kapu]:not(.pl-anim-be),
[data-anim-kapu]:not(.pl-anim-be)::before,
[data-anim-kapu]:not(.pl-anim-be)::after,
[data-anim-kapu]:not(.pl-anim-be) *,
[data-anim-kapu]:not(.pl-anim-be) *::before,
[data-anim-kapu]:not(.pl-anim-be) *::after,
html.pl-lap-rejtett [data-anim-kapu],
html.pl-lap-rejtett [data-anim-kapu]::before,
html.pl-lap-rejtett [data-anim-kapu]::after,
html.pl-lap-rejtett [data-anim-kapu] *,
html.pl-lap-rejtett [data-anim-kapu] *::before,
html.pl-lap-rejtett [data-anim-kapu] *::after{
  animation-play-state: paused !important;
}

/* ==================================================================
   FEJLÉC-AVATAR (F9, 2026-08-14) — a fiók belépési pontja
   ------------------------------------------------------------------
   A markup a KÖZÖS resources/views/partials/header-avatar.blade.php
   (Bootstrap-mentes, beágyazott stílusokkal + SVG sziluettel). Itt
   csak a penzugyilab-specifikus szín és a hover-gyűrű él, plusz a
   sötét (plk) fejléc jobb oldali csoportja.
   A `color` azért kell, mert a sziluett SVG currentColor-ral fest.
   ================================================================== */
.pl-avatar{
  color:var(--ink);
  box-shadow:0 0 0 1px rgba(14,26,23,.12);
  transition:box-shadow .18s ease, transform .15s ease;
}
.pl-avatar:hover{
  box-shadow:0 0 0 2px rgba(27,138,110,.45);
  transform:translateY(-1px);
}
.pl-avatar--sotet{
  color:#eaf1ed;
  box-shadow:0 0 0 1px rgba(127,201,178,.18);
}
.pl-avatar--sotet:hover{
  box-shadow:0 0 0 2px rgba(42,196,153,.5);
}

/* A sötét (plk) fejléc jobb oldali csoportja: avatar + hamburger, ill.
   kikapcsolt menünél a „← Főoldal" link + avatar */
.plk-jobb{ display:flex; align-items:center; gap:12px; }

@media (prefers-reduced-motion: reduce){
  .pl-avatar{ transition:none; }
  .pl-avatar:hover{ transform:none; }
}

/* ==================================================================
   AKTÍV MENÜPONT (2026-08-16)
   ------------------------------------------------------------------
   A menu-linkek partial az aktuális oldal linkjére `.aktiv` osztályt
   tesz (+ aria-current="page"). Mind a négy megjelenítés kap jelölést:
   világos/sötét fejléc, asztali/mobil. A jelölés SZÍN + súly + egy
   finom aláhúzás (asztali) vagy oldalsó sáv (mobil) — nem csak szín,
   hogy színtévesztéssel is látszódjon.
   ================================================================== */

/* Világos fejléc — asztali */
.hdr-nav-link.aktiv{
  color:var(--ink); font-weight:600;
  border-bottom:2px solid var(--green); padding-bottom:2px;
}
/* Világos fejléc — mobil panel */
.hdr-mobil-link.aktiv{
  font-weight:600; background:rgba(27,138,110,.08);
  box-shadow:inset 3px 0 0 var(--green);
}
/* Sötét fejléc — asztali */
.plkm-link.aktiv{
  color:#fff; font-weight:600;
  border-bottom:2px solid rgba(127,201,178,.9); padding-bottom:2px;
}
/* Sötét fejléc — mobil panel */
.plkm-mobil-link.aktiv{
  color:#fff; font-weight:600; background:rgba(255,255,255,.05);
  box-shadow:inset 3px 0 0 rgba(127,201,178,.9);
}

/* ==================================================================
   SÖTÉT FEJLÉC-SÁV a tölcsér-oldalakhoz (2026-08-16)
   ------------------------------------------------------------------
   A köszönő oldal és az /eredmeny-a saját, sötét dizájnnal indul, de a
   közös fejlécet (plk-fejlec) a dizájn-konténeren KÍVÜL kapják — ott a
   világos body-háttér látszana át, és a világos menüszöveg olvashatatlan
   lenne. Ez a burkoló adja a fejléc alá a sötét alapot, a hero tetejének
   színével, hogy a két sáv folytonos legyen.
   ================================================================== */
.pl-fejlec-sotet{ background:#021c17; }
.pl-fejlec-sotet .plk-header{ border-bottom:1px solid rgba(127,201,178,.08); }

/* ==================================================================
   HIBAJELENTŐ IKON a fejlécben (2026-08-16)
   ------------------------------------------------------------------
   A partials/issue-report-icon SVG-módja `currentColor`-ral rajzol, ami
   a body sötét alapszínét (--ink) örökli. A VILÁGOS fejlécben ez helyes,
   a SÖTÉT fejlécben viszont sötét ikon lenne sötét alapon — ott explicit
   világos szín kell, a menülinkekkel azonos árnyalatban.
   ================================================================== */
/* Alapértelmezés: öröklött szín (a világos fejlécben ez a sötét --ink).
   Kell, mert az <a> elem különben a böngésző kék link-színét venné fel. */
.ns-ir-trigger{ color: inherit; }
/* Sötét fejléc: a menülinkekkel azonos világos árnyalat */
.plk-jobb .ns-ir-trigger{ color: rgba(234,241,237,.78); }
.plk-jobb .ns-ir-trigger:hover{ color: #fff; }

/* ==================================================================
   FEJLÉC-HARANG — BOOTSTRAP-MENTES VÁLTOZAT (2026-08-16)
   ------------------------------------------------------------------
   A partials/notification-bell `svg => true` módjához. A weboldal
   szándékosan nem tölt Bootstrapet, ezért a lenyíló megjelenését és a
   push-sáv segédosztályait itt pótoljuk — MIND a `.ns-fbell` scope-on
   belül, hogy a globális névteret ne szennyezzük.

   ⚠️ A `.d-none` KULCSFONTOSSÁGÚ: a notification-bell.js ezzel kapcsolja
   a jelvényt és a push-blokk állapotait. Bootstrap nélkül nem rejtene
   semmit, és egyszerre látszana az összes állapot.
   ================================================================== */
.ns-fbell--svg{ position:relative; display:inline-flex; }

.ns-fbell--svg .ns-fbell-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; position:relative;
  color:inherit; opacity:.75; text-decoration:none;
  transition:opacity .18s ease;
}
.ns-fbell--svg .ns-fbell-toggle:hover{ opacity:1; }
.plk-jobb .ns-fbell--svg .ns-fbell-toggle{ color:rgba(234,241,237,.78); }
.plk-jobb .ns-fbell--svg .ns-fbell-toggle:hover{ color:#fff; }

/* Olvasatlan-jelvény */
.ns-fbell--svg .ns-fbell-badge{
  position:absolute; top:0; right:0;
  min-width:16px; height:16px; padding:0 4px;
  border-radius:999px; background:#c8433c; color:#fff;
  font-family:'Inter',sans-serif; font-size:.62rem; font-weight:600;
  line-height:16px; text-align:center;
}

/* Lenyíló panel */
.ns-fbell--svg .ns-fbell-panel{
  position:absolute; top:calc(100% + 8px); right:0; z-index:120;
  width:min(360px, calc(100vw - 32px));
  background:#fff; color:var(--ink);
  border:1px solid var(--line); border-radius:14px;
  box-shadow:0 18px 48px -18px rgba(2,28,23,.35);
  overflow:hidden;
  font-family:'Inter',sans-serif; font-size:.88rem; line-height:1.45;
}
.ns-fbell--svg .ns-fbell-panel[hidden]{ display:none; }

.ns-fbell--svg .ns-fbell-fej{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:10px 14px; border-bottom:1px solid var(--line);
}
.ns-fbell--svg .ns-fbell-fej strong{ font-weight:600; font-size:.92rem; }
.ns-fbell--svg .ns-fbell-readall{
  font-size:.8rem; color:var(--green-700); text-decoration:none; cursor:pointer;
}
.ns-fbell--svg .ns-fbell-readall:hover{ text-decoration:underline; }

.ns-fbell--svg .ns-fbell-list{ max-height:340px; overflow-y:auto; }
.ns-fbell--svg .ns-fbell-ures{ padding:16px 14px; color:var(--muted); font-size:.85rem; }

.ns-fbell--svg .ns-fbell-lab{
  padding:9px 14px; border-top:1px solid var(--line); text-align:center;
}
.ns-fbell--svg .ns-fbell-lab a{
  font-size:.82rem; color:var(--green-700); text-decoration:none;
}
.ns-fbell--svg .ns-fbell-lab a:hover{ text-decoration:underline; }

/* Push-engedélykérő sáv a panelben */
.ns-fbell--svg .ns-fbell-push{ padding:10px 14px; border-bottom:1px solid var(--line); }

/* --- Bootstrap-segédosztályok pótlása, CSAK a harang-panelen belül --- */
.ns-fbell--svg .d-none{ display:none !important; }
.ns-fbell--svg .d-flex{ display:flex; }
.ns-fbell--svg .align-items-center{ align-items:center; }
.ns-fbell--svg .gap-2{ gap:8px; }
.ns-fbell--svg .small{ font-size:.8rem; }
.ns-fbell--svg .fw-bold{ font-weight:600; }
.ns-fbell--svg .text-muted{ color:var(--muted); }
.ns-fbell--svg .text-danger{ color:#c8433c; }
.ns-fbell--svg .text-success{ color:var(--green-700); }
.ns-fbell--svg .text-warning{ color:var(--gold); }
.ns-fbell--svg .mb-1{ margin-bottom:4px; }
.ns-fbell--svg .mb-2{ margin-bottom:8px; }
.ns-fbell--svg .mt-1{ margin-top:4px; }
.ns-fbell--svg .me-1{ margin-right:4px; }
.ns-fbell--svg .btn{
  display:inline-flex; align-items:center; gap:6px;
  font-family:'Inter Tight',sans-serif; font-weight:600; font-size:.82rem;
  padding:6px 14px; border:none; border-radius:999px; cursor:pointer;
  background:var(--green); color:#fff; text-decoration:none;
}
.ns-fbell--svg .btn:hover{ background:var(--green-700); }
.ns-fbell--svg .btn-sm{ font-size:.78rem; padding:5px 12px; }

/* Mobilon a panel a KÉPERNYŐHÖZ igazodik, nem a haranghoz: a harang ott a
   fejléc közepe felé csúszik, és a 360 px-es panel balra kilógna (mérve:
   x = -72 px 390 px-es nézetben). */
@media (max-width: 560px){
  .ns-fbell--svg .ns-fbell-panel{
    position:fixed; top:56px; left:10px; right:10px; width:auto;
  }
}

/* ======================================================================
   ADMIN LENYÍLÓ a fejléc-navban (2026-08-27, CRM-kör) — tisztán CSS:
   hover ÉS focus-within nyitja (kattintás = fókusz a gombon, billentyűzettel
   is bejárható). A mobil paneleken nincs lenyíló — ott sima linkek mennek
   (menu-linkek.blade.php). Sötét (plk) fejléchez a --sotet változat.
   ====================================================================== */
.pl-lenyilo{ position:relative; display:inline-flex; }
.pl-lenyilo-gomb{ display:inline-flex; align-items:center; gap:4px; }
.pl-lenyilo-panel{
  position:absolute; top:100%; left:50%; transform:translateX(-50%);
  margin-top:8px; padding:8px 0; min-width:170px;
  background:#fff; border:1px solid var(--line); border-radius:12px;
  box-shadow:0 10px 28px rgba(14,26,23,.14);
  opacity:0; visibility:hidden; transition:opacity .15s ease;
  z-index:60;
}
/* láthatatlan híd a gomb és a panel közti résre — hoverrel átjárható */
.pl-lenyilo-panel::before{
  content:""; position:absolute; top:-8px; left:0; right:0; height:8px;
}
.pl-lenyilo:hover .pl-lenyilo-panel,
.pl-lenyilo:focus-within .pl-lenyilo-panel{ opacity:1; visibility:visible; }
.pl-lenyilo-link{
  display:block; padding:9px 16px;
  font-family:'Inter',sans-serif; font-weight:500; font-size:.88rem;
  color:var(--ink); text-decoration:none; white-space:nowrap;
}
.pl-lenyilo-link:hover{ background:rgba(27,138,110,.08); }
/* sötét (plk) fejléc-változat */
.pl-lenyilo-panel--sotet{
  background:#10201b; border-color:rgba(127,201,178,.18);
  box-shadow:0 10px 28px rgba(0,0,0,.45);
}
.pl-lenyilo-panel--sotet .pl-lenyilo-link{ color:rgba(234,241,237,.85); }
.pl-lenyilo-panel--sotet .pl-lenyilo-link:hover{ background:rgba(255,255,255,.06); color:#fff; }