/*
Theme Name: Conto CRM
Theme URI: https://contocrm.hu
Author: Conto CRM
Description: A Conto CRM marketing-oldalának saját, könnyű sablonja — landing, blog és aloldalak, a termék zöld arculatával. Az árakat az inc/config.php adja (a backend plans.js tükre).
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.0
License: GNU General Public License v2 or later
Text Domain: conto-crm
*/

/* ── Alap / paletta (a landing eredeti változói) ─────────────── */
:root{
  --ink:#0F1B16; --paper:#EEF8F0; --cloud:#E2F1E5; --panel:#FFFFFF;
  --border:#D3E6D8; --char:#4F6358; --smoke:#74897D;
  --cb:#1DB877; --cb-d:#14834E; --cb-g:rgba(29,184,119,0.10);
  --ln:#0E5C3B; --ft:#159C68;
  --amber:#A66A12; --amber-g:rgba(166,106,18,0.10);
  --purple:#6D28D9; --purple-g:rgba(109,40,217,0.08);
  --r:10px;
  --serif:'DM Serif Display', Georgia, serif;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--paper); color:var(--char);
  font-family:'Inter', system-ui, sans-serif;
  font-size:15px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{ font-family:var(--serif); font-weight:400; line-height:1.18; color:var(--ink); margin:0; }
a{ text-decoration:none; color:inherit; }
img{ max-width:100%; height:auto; }
.wrap{ max-width:1100px; margin:0 auto; padding:0 28px; }
.wrap-narrow{ max-width:760px; }
.s{ padding:88px 0; }
.s.cloud{ background:var(--cloud); }
hr.div{ border:none; border-top:1px solid var(--border); margin:0; }

/* ── Fejléc ──────────────────────────────────────────────────── */
.lp-header{ position:sticky; top:0; background:rgba(255,255,255,0.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--border); z-index:40; }
.lp-header nav{ display:flex; align-items:center; justify-content:space-between; padding:18px 0; gap:16px; }
.logo{ font-family:var(--serif); font-size:21px; color:var(--ink); display:inline-flex; align-items:center; gap:10px; }
.logo img{ max-height:40px; width:auto; }
.navlinks{ display:flex; gap:32px; font-size:14px; color:var(--char); }
.navlinks a:hover{ color:var(--cb); }

/* ── Gombok ──────────────────────────────────────────────────── */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; border:none; cursor:pointer; font-family:inherit; font-size:14px; font-weight:600; padding:12px 24px; border-radius:8px; transition:transform .12s, background .15s, opacity .15s; letter-spacing:0.01em; }
.btn:hover{ transform:translateY(-1px); }
.btn:active{ transform:scale(0.98); }
.btn-primary{ background:var(--cb); color:#fff; }
.btn-primary:hover{ background:var(--cb-d); }
.btn-outline{ background:transparent; color:var(--cb); border:1.5px solid var(--border); }
.btn-outline:hover{ border-color:var(--cb); background:var(--cb-g); }

/* ── Hero ────────────────────────────────────────────────────── */
.hero{ position:relative; overflow:hidden; padding:96px 0 80px; }
.hero::before{ content:''; position:absolute; inset:0;
  background: radial-gradient(ellipse 60% 55% at 78% 20%, rgba(29,184,119,0.07) 0%, transparent 70%),
              radial-gradient(ellipse 40% 40% at 10% 85%, rgba(21,156,104,0.05) 0%, transparent 60%);
  pointer-events:none; }
.hero::after{ content:''; position:absolute; inset:0;
  background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 75% 65% at 75% 25%, black 0%, transparent 70%);
  mask-image: radial-gradient(ellipse 75% 65% at 75% 25%, black 0%, transparent 70%);
  opacity:0.6; pointer-events:none; }
.hero-inner{ position:relative; z-index:1; }

/* Hero: szöveg balra, jobbra háromrétegű termékkép-kollázs
   (hátul AI-asszisztens ablak, elöl analitika, rajta telefon) */
.hero-split{ display:grid; grid-template-columns:1.02fr 0.98fr; gap:48px; align-items:center; }
.hero-shot-frame{ background:#fff; border:1px solid var(--border); border-radius:var(--r); padding:12px; }
.hero-shot-frame .bar{ display:flex; gap:6px; margin-bottom:10px; }
.hero-shot-frame .dot{ width:9px; height:9px; border-radius:50%; background:var(--border); }
.hero-shot-frame img{ display:block; width:100%; border-radius:7px; border:1px solid var(--border); }

.hero-stack{ position:relative; padding:56px 0 40px 0; }
.shot-back{ position:absolute; top:0; right:-14px; width:84%; z-index:0;
  transform:rotate(2deg);
  box-shadow:0 2px 6px rgba(16,21,28,0.05), 0 10px 30px rgba(16,21,28,0.08); }
.shot-back img{ opacity:.96; }
.shot-main{ position:relative; width:86%; z-index:1;
  transform:rotate(-1.4deg);
  box-shadow:0 2px 6px rgba(16,21,28,0.06), 0 20px 50px rgba(16,21,28,0.13); }
.shot-phone{ position:absolute; bottom:-14px; right:-6px; width:21%; z-index:2;
  transform:rotate(3deg);
  box-shadow:0 4px 10px rgba(16,21,28,0.08), 0 22px 44px rgba(16,21,28,0.18); }

@media (max-width:900px){
  .hero-split{ grid-template-columns:1fr; gap:40px; }
  .hero-stack{ max-width:520px; margin:0 auto; }
}
.eyebrow{ display:inline-flex; align-items:center; gap:10px; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.13em; color:var(--cb); margin-bottom:26px; }
.eyebrow::before{ content:''; width:26px; height:1.5px; background:var(--cb); }
.hero h1{ font-size:clamp(38px,5.4vw,60px); max-width:760px; margin-bottom:22px; }
.hero h1 em{ font-style:italic; color:var(--cb); }
.sub{ font-size:17px; color:var(--char); max-width:560px; margin:0 0 40px; line-height:1.75; }
.cta-row{ display:flex; gap:14px; margin-bottom:64px; flex-wrap:wrap; }
.hero-meta{ display:flex; gap:40px; flex-wrap:wrap; }
.hero-meta-num{ font-family:var(--serif); font-size:36px; color:var(--ink); line-height:1; margin-bottom:4px; }
.hero-meta-num span{ color:var(--cb); }
.hero-meta-label{ font-size:11.5px; color:var(--smoke); text-transform:uppercase; letter-spacing:0.09em; }

/* ── Szekció-fejek ───────────────────────────────────────────── */
.sh{ margin-bottom:52px; }
.sh-label{ font-size:11.5px; font-weight:700; letter-spacing:0.13em; text-transform:uppercase; color:var(--cb); margin-bottom:14px; display:flex; align-items:center; gap:10px; }
.sh-label::before{ content:''; width:20px; height:1.5px; background:var(--cb); }
.sh h2{ font-size:clamp(26px,3.6vw,38px); margin-bottom:14px; }
.sh p{ font-size:15.5px; color:var(--char); max-width:560px; line-height:1.75; margin:0; }
.sh.center{ text-align:center; }
.sh.center .sh-label{ justify-content:center; }
.sh.center p{ margin:0 auto; }

/* ── Funkció-rács ────────────────────────────────────────────── */
.feat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--r); overflow:hidden; }
.feat-grid.cols-4{ grid-template-columns:repeat(4,1fr); }
.feat-card{ background:var(--panel); padding:30px 26px; transition:background .2s; }
.feat-card:hover{ background:var(--cloud); }
.feat-card-icon{ width:40px; height:40px; border-radius:9px; background:var(--cb-g); border:1px solid rgba(29,184,119,0.16); display:flex; align-items:center; justify-content:center; margin-bottom:16px; color:var(--cb); }
.feat-card-icon svg{ width:19px; height:19px; }
.feat-card h3{ font-family:'Inter', sans-serif; font-size:14.5px; font-weight:600; color:var(--ink); margin-bottom:8px; }
.feat-card p{ font-size:13px; color:var(--char); line-height:1.6; margin:0; }

/* ── Videó / mock blokk ──────────────────────────────────────── */
.screenshot-block{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; margin-bottom:48px; }
.screenshot-title{ font-size:21px; margin-bottom:12px; }
.screenshot-text{ font-size:14.5px; line-height:1.7; margin:0; }
.video-badge{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color:var(--cb); background:var(--cb-g); border:1px solid rgba(29,184,119,0.16); padding:6px 13px; border-radius:8px; margin-bottom:16px; letter-spacing:0.02em; }
.screenshot-mock{ background:#fff; border:1px solid var(--border); border-radius:var(--r); padding:16px; box-shadow:0 1px 3px rgba(16,21,28,0.05), 0 8px 28px rgba(16,21,28,0.05); }
.screenshot-mock.has-img img{ display:block; width:100%; border-radius:8px; border:1px solid var(--border); }
.screenshot-mock .bar{ display:flex; gap:6px; margin-bottom:12px; }
.screenshot-mock .dot{ width:9px; height:9px; border-radius:50%; background:var(--border); }
.screenshot-mock .body{ background:var(--cloud); border-radius:8px; padding:18px; min-height:200px; }
.screenshot-mock .row{ display:flex; justify-content:space-between; align-items:center; background:#fff; border:1px solid var(--border); border-radius:8px; padding:11px 13px; margin-bottom:8px; font-size:12.5px; color:var(--char); }
.screenshot-mock .tag-ok{ font-size:11px; font-weight:700; color:var(--ft); background:rgba(21,156,104,0.1); padding:3px 9px; border-radius:6px; }

/* ── Kiemelt demó-szekció (sötét háttér, teljes szélességű videó) ─ */
.demo-section{ background:
    radial-gradient(ellipse 70% 60% at 50% -10%, rgba(29,184,119,0.16) 0%, transparent 60%),
    linear-gradient(180deg, #0F1B16 0%, #10241C 100%);
  border-top:1px solid rgba(29,184,119,0.18); border-bottom:1px solid var(--border); }
.demo-section .sh h2{ color:#F3FAF5; }
.demo-section .sh p{ color:#A8C4B4; }
.demo-section .sh-label{ color:var(--cb); }
.demo-section .pricing-note{ color:#A8C4B4; }
/* sötét háttéren a fehér árkártyák keret nélkül is elválnak; a kiemelt kap zöld fényt */
.demo-section .price-card{ border-color:transparent; box-shadow:0 8px 26px rgba(0,0,0,0.35); }
.demo-section .price-card.featured{ border:1.5px solid var(--cb); box-shadow:0 8px 30px rgba(0,0,0,0.4), 0 0 60px rgba(29,184,119,0.14); }
.demo-video{ border-radius:14px; overflow:hidden; border:1px solid rgba(29,184,119,0.28);
  box-shadow:0 8px 30px rgba(0,0,0,0.45), 0 0 80px rgba(29,184,119,0.12); background:#000; }
.demo-video video{ display:block; width:100%; height:auto; }
.demo-cta{ text-align:center; margin-top:34px; }

/* ── Mobil-szekció (két telefon-képernyő) ────────────────────── */
.mobile-split{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.phone-row{ display:flex; justify-content:center; align-items:flex-start; }
.phone-frame{ width:min(46%, 230px); background:#fff; border:1px solid var(--border); border-radius:22px; padding:8px;
  box-shadow:0 2px 6px rgba(16,21,28,0.06), 0 16px 40px rgba(16,21,28,0.10); }
.phone-frame img{ display:block; width:100%; border-radius:15px; }
.phone-frame-back{ margin-left:-28px; margin-top:44px; transform:rotate(2.5deg); }
@media (max-width:900px){
  .mobile-split{ grid-template-columns:1fr; }
}

/* ── Szerepkörök ─────────────────────────────────────────────── */
.roles-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px; }
.role-card{ background:var(--panel); border:1px solid var(--border); border-radius:var(--r); padding:26px; }
.role-badge{ display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.07em; padding:4px 11px; border-radius:20px; margin-bottom:16px; }
.role-badge.admin{ color:var(--amber); background:var(--amber-g); border:1px solid rgba(166,106,18,0.2); }
.role-badge.book{ color:var(--cb); background:var(--cb-g); border:1px solid rgba(29,184,119,0.18); }
.role-badge.read{ color:var(--smoke); background:rgba(124,134,148,0.1); border:1px solid var(--border); }
.role-badge.client{ color:var(--purple); background:var(--purple-g); border:1px solid rgba(109,40,217,0.18); }
.role-card h3{ font-family:'Inter', sans-serif; font-size:14.5px; font-weight:600; color:var(--ink); margin-bottom:10px; }
.role-card ul{ display:flex; flex-direction:column; gap:6px; list-style:none; margin:0; padding:0; }
.role-card li{ font-size:13px; color:var(--char); padding-left:14px; position:relative; }
.role-card li::before{ content:'—'; position:absolute; left:0; color:var(--cb); font-size:11px; }

/* ── Integrációk ─────────────────────────────────────────────── */
.integration-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px; }
.int-card{ background:var(--panel); border:1px solid var(--border); border-radius:var(--r); padding:26px 24px; display:flex; flex-direction:column; gap:14px; }
.int-logo{ color:var(--cb); }
.int-logo svg{ width:24px; height:24px; display:block; }
.int-card h3{ font-family:'Inter', sans-serif; font-size:14.5px; font-weight:600; color:var(--ink); }
.int-status{ display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; color:var(--ft); text-transform:uppercase; letter-spacing:0.07em; margin-top:auto; }
.int-status::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--ft); }

/* ── Megtérülés (ROI) ────────────────────────────────────────── */
.roi-compare{ display:grid; grid-template-columns:1fr auto 1fr; gap:18px; align-items:stretch; margin:38px 0 6px; }
.roi-col{ background:var(--panel); border:1px solid var(--border); border-radius:var(--r); padding:24px 26px; }
.roi-col-title{ font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:var(--smoke); margin-bottom:14px; }
.roi-col-after{ border-color:var(--cb); background:var(--cb-g); }
.roi-col-after .roi-col-title{ color:var(--cb-d); }
.roi-col ul{ list-style:none; padding:0; margin:0; display:grid; gap:9px; font-size:14.5px; }
.roi-col li{ padding-left:22px; position:relative; }
.roi-col li::before{ content:'✕'; position:absolute; left:0; top:1px; color:var(--smoke); font-size:12px; }
.roi-col-after li::before{ content:'✓'; color:var(--cb-d); }
.roi-arrow{ align-self:center; font-size:24px; color:var(--cb); }
.roi-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:24px 0 6px; }
.roi-stat{ background:var(--panel); border:1px solid var(--border); border-radius:var(--r); padding:26px 20px; text-align:center; }
.roi-stat .num{ font-family:var(--serif); font-size:31px; color:var(--cb-d); margin-bottom:7px; }
.roi-stat .lbl{ font-size:13.5px; color:var(--char); line-height:1.5; }
.roi-cta{ text-align:center; margin-top:28px; }
.roi-note{ font-size:12.5px; color:var(--smoke); margin:16px auto 0; max-width:560px; line-height:1.6; }

/* ── Árazás ──────────────────────────────────────────────────── */
.pricing{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px; }
.price-card{ border:1px solid var(--border); border-radius:var(--r); padding:30px; background:var(--panel); display:flex; flex-direction:column; }
.price-card.featured{ border:1.5px solid var(--cb); box-shadow:0 8px 28px rgba(29,184,119,0.08); }
.price-card .badge{ display:inline-block; background:var(--cb-g); color:var(--cb); font-size:11.5px; font-weight:700; padding:4px 12px; border-radius:8px; margin-bottom:14px; letter-spacing:0.02em; align-self:flex-start; }
.price-card .tier{ font-size:15px; font-weight:600; color:var(--ink); margin-bottom:6px; }
.price-card .audience{ font-size:12.5px; color:var(--smoke); margin-bottom:16px; }
.price-card .price{ font-family:var(--serif); font-size:30px; color:var(--ink); }
.price-card .price-custom{ font-size:23px; padding:5px 0 4px; }
.price-card .price span{ font-family:'Inter', sans-serif; font-size:12.5px; color:var(--char); font-weight:400; }
.price-card .seats{ font-size:12.5px; color:var(--smoke); margin:8px 0 4px; }
.price-card .annual{ font-size:12px; color:var(--char); margin:0 0 18px; }
.price-card .percli{ font-size:12px; font-weight:700; color:var(--ft); margin:0 0 4px; }
.price-card ul{ list-style:none; font-size:13.5px; color:var(--char); margin:0 0 20px; padding:0; }
.price-card li{ padding:6px 0; padding-left:22px; position:relative; }
.price-card li::before{ content:"✓"; position:absolute; left:0; color:var(--ft); font-weight:700; }
.price-cta{ margin-top:auto; }
.pricing-note{ text-align:center; font-size:12.5px; color:var(--smoke); margin-top:18px; }
/* Alapítói program sáv az árazás fölött (sötét szekcióban ül) */
.founder-banner{ max-width:860px; margin:0 auto 26px; text-align:center; font-size:14px;
  color:#FFE9C2; background:rgba(255,193,77,0.12); border:1px solid rgba(255,193,77,0.35);
  border-radius:12px; padding:12px 18px; }
.founder-banner strong{ color:#FFD37A; }
#founder-remaining{ font-weight:700; color:#FFD37A; }

/* ── GYIK ────────────────────────────────────────────────────── */
.faq{ max-width:720px; margin:0 auto; display:flex; flex-direction:column; gap:10px; }
.faq details{ border:1px solid var(--border); border-radius:12px; background:#fff; overflow:hidden; }
.faq summary{ list-style:none; cursor:pointer; padding:16px 18px; font-weight:600; font-size:15px; color:var(--ink); display:flex; align-items:center; justify-content:space-between; gap:12px; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:'+'; font-size:20px; font-weight:400; color:var(--cb); line-height:1; transition:transform .2s; }
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq details[open] summary{ border-bottom:1px solid var(--border); }
.faq details p{ margin:0; padding:14px 18px 18px; font-size:14px; line-height:1.7; color:var(--char); }

/* ── Blog-kártyák (főoldali kiemelő + lista) ─────────────────── */
.blog-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px; }
.blog-card{ display:flex; flex-direction:column; gap:8px; background:var(--panel); border:1px solid var(--border); border-radius:var(--r); padding:26px; transition:box-shadow .2s, transform .12s; }
.blog-card:hover{ box-shadow:0 8px 28px rgba(16,21,28,0.07); transform:translateY(-2px); }
.blog-card-date{ font-size:12px; color:var(--smoke); text-transform:uppercase; letter-spacing:.06em; }
.blog-card h3{ font-family:'Inter', sans-serif; font-size:16px; font-weight:600; color:var(--ink); line-height:1.4; }
.blog-card p{ font-size:13.5px; color:var(--char); line-height:1.65; margin:0; }
.blog-card-more{ margin-top:auto; font-size:13px; font-weight:600; color:var(--cb); }
.pagination{ margin-top:34px; text-align:center; font-size:14px; }
.pagination .nav-links{ display:flex; gap:14px; justify-content:center; }
.pagination a{ color:var(--cb); font-weight:600; }

/* ── Bejegyzés / aloldal tartalom (.blog-body tipográfia) ────── */
.entry-header{ margin-bottom:26px; }
.entry-title{ font-size:clamp(28px,4vw,40px); margin:8px 0 12px; }
.entry-meta{ font-size:13px; color:var(--smoke); }
.entry-thumb img{ border-radius:var(--r); margin-bottom:26px; }
.blog-body{ color:#374151; line-height:1.78; font-size:16px; }
.blog-body > *:first-child{ margin-top:0; }
.blog-body h2{ font-family:'Inter', sans-serif; font-size:1.35rem; font-weight:700; color:var(--ink); margin:1.9rem 0 0.6rem; }
.blog-body h3{ font-family:'Inter', sans-serif; font-size:1.15rem; font-weight:600; color:var(--ink); margin:1.5rem 0 0.5rem; }
.blog-body p{ margin:0 0 1rem; }
.blog-body ul,.blog-body ol{ margin:0 0 1rem; padding-left:1.4rem; }
.blog-body li{ margin-bottom:.35rem; }
.blog-body a{ color:var(--cb-d); text-decoration:underline; text-underline-offset:2px; }
.blog-body blockquote{ border-left:3px solid var(--cb); margin:1.2rem 0; padding:.3rem 0 .3rem 1.1rem; color:var(--char); font-style:italic; }
.blog-body img{ border-radius:8px; }
.blog-body table{ border-collapse:collapse; width:100%; margin:0 0 1rem; font-size:14px; }
.blog-body th,.blog-body td{ border:1px solid var(--border); padding:8px 12px; text-align:left; }
.blog-body th{ background:var(--cloud); color:var(--ink); }
.blog-body code{ background:var(--cloud); border-radius:4px; padding:1px 6px; font-size:.9em; }
.post-cta{ margin:44px 0 30px; background:var(--cloud); border:1px solid var(--border); border-radius:14px; padding:30px; text-align:center; }
.post-cta h3{ font-size:22px; margin-bottom:8px; }
.post-cta p{ margin:0 0 18px; }
.post-nav{ display:flex; justify-content:space-between; gap:16px; font-size:13.5px; padding:18px 0 6px; }
.post-nav a{ color:var(--cb-d); font-weight:600; }

/* ── Funkció-aloldalak (page-funkcio.php, fx-* osztályok) ────── */
.fx-head{ max-width:760px; }
.fx-head .sh-label a{ color:inherit; }
.fx-head .sh-label a:hover{ text-decoration:underline; }
.fx-title{ font-size:clamp(30px,4.6vw,46px); margin-bottom:16px; }
.fx-lead{ font-size:17px; line-height:1.75; color:var(--char); margin:0; }
.fx-content{ max-width:760px; color:var(--char); font-size:15.5px; line-height:1.75; }
.fx-content h2{ font-size:clamp(22px,3vw,28px); margin:2.4rem 0 .8rem; }
.fx-content p{ margin:0 0 1rem; }
.fx-content ul,.fx-content ol{ margin:0 0 1rem; padding-left:1.4rem; }
.fx-content li{ margin-bottom:.4rem; }
.fx-content a{ color:var(--cb-d); text-decoration:underline; text-underline-offset:2px; }
/* pipás lista */
.fx-check{ list-style:none !important; padding-left:0 !important; display:grid; gap:9px; }
.fx-check li{ padding-left:26px; position:relative; }
.fx-check li::before{ content:'✓'; position:absolute; left:0; color:var(--ft); font-weight:700; }
/* lépések */
.fx-steps{ list-style:none !important; padding-left:0 !important; counter-reset:fx; display:grid; gap:12px; }
.fx-steps li{ counter-increment:fx; background:var(--panel); border:1px solid var(--border); border-radius:var(--r); padding:16px 18px 16px 56px; position:relative; }
.fx-steps li::before{ content:counter(fx); position:absolute; left:16px; top:14px; width:26px; height:26px; border-radius:50%; background:var(--cb-g); border:1px solid rgba(29,184,119,0.25); color:var(--cb-d); font-weight:700; font-size:13px; display:flex; align-items:center; justify-content:center; }
/* termékkép keretben – kilóghat szélesebbre, mint a szövegtörzs */
.fx-shot{ margin:2rem 0; max-width:1000px; }
.fx-shot img{ display:block; width:100%; border-radius:var(--r); border:1px solid var(--border); box-shadow:0 2px 6px rgba(16,21,28,0.06), 0 16px 40px rgba(16,21,28,0.09); }
.fx-shot figcaption{ font-size:12.5px; color:var(--smoke); margin-top:8px; }
/* kiemelt idézet/összefoglaló doboz */
.fx-note{ background:var(--cloud); border:1px solid var(--border); border-left:3px solid var(--cb); border-radius:10px; padding:14px 18px; margin:1.4rem 0; }
/* CTA + további funkciók */
.fx-cta{ margin-top:64px; background:var(--cloud); border:1px solid var(--border); border-radius:16px; padding:44px 32px; text-align:center; }
.fx-cta h2{ font-size:clamp(22px,3vw,30px); margin-bottom:10px; }
.fx-cta p{ margin:0 0 22px; }
.fx-more{ margin-top:44px; }
.fx-more-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; }
.fx-more-card{ background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:16px 18px; font-weight:600; font-size:14px; color:var(--ink); transition:border-color .15s, box-shadow .15s; }
.fx-more-card:hover{ border-color:var(--cb); box-shadow:0 6px 18px rgba(16,21,28,0.06); }
/* a landing funkció-kártyái linkként */
a.feat-card{ display:block; color:inherit; }
.feat-more{ margin:22px 0 0; font-size:14.5px; font-weight:600; }
.feat-more a{ color:var(--cb-d); }
.feat-more a:hover{ text-decoration:underline; }

/* ── Hírlevél ────────────────────────────────────────────────── */
.newsletter{ background:var(--cloud); border-top:1px solid var(--border); }
.newsletter-form{ max-width:520px; margin:0 auto; }
.newsletter-form input[type=text],
.newsletter-form input[type=email]{ width:100%; padding:12px 14px; border:1px solid var(--border); border-radius:8px; font:inherit; }
.newsletter-form button,.newsletter-form input[type=submit]{ background:var(--cb); color:#fff; border:none; border-radius:8px; padding:12px 24px; font:inherit; font-weight:600; cursor:pointer; }
.newsletter-form button:hover,.newsletter-form input[type=submit]:hover{ background:var(--cb-d); }

/* ── Záró CTA + lábléc ───────────────────────────────────────── */
.closing{ background:var(--cloud); border:1px solid var(--border); border-radius:18px; padding:64px 48px; text-align:center; position:relative; overflow:hidden; margin-top:88px; }
.closing::before{ content:''; position:absolute; top:-70px; left:50%; transform:translateX(-50%); width:340px; height:340px; background:radial-gradient(circle, rgba(29,184,119,0.10), transparent 70%); pointer-events:none; }
.closing h2{ font-size:clamp(26px,4vw,40px); margin-bottom:16px; position:relative; }
.closing p{ font-size:15.5px; color:var(--char); line-height:1.7; margin:0 auto 32px; max-width:460px; position:relative; }
.closing .btn{ position:relative; }
/* Mega-footer: sötét, négy linkoszlop + márka-hasáb (a sötét szekciókkal harmonizál) */
.mega-footer{ margin-top:64px; background:linear-gradient(180deg, #0F1B16 0%, #0C1712 100%);
  border-top:1px solid rgba(29,184,119,0.18); color:#A8C4B4; padding:56px 0 0; }
.mf-grid{ display:grid; grid-template-columns:1.4fr repeat(4, 1fr); gap:36px; padding-bottom:44px; }
.mf-logo{ font-family:var(--serif); font-size:22px; color:#F3FAF5; margin-bottom:12px; }
.mf-brand p{ font-size:13.5px; line-height:1.7; margin:0 0 18px; max-width:280px; }
.mf-cta{ font-size:13px; padding:10px 18px; }
.mf-title{ font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.12em; color:var(--cb); margin-bottom:14px; }
.mf-col ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.mf-col a{ font-size:13.5px; color:#A8C4B4; transition:color .15s; }
.mf-col a:hover{ color:#F3FAF5; }
.mf-bottom{ border-top:1px solid rgba(168,196,180,0.15); padding:20px 0 88px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; font-size:12px; color:#74897D; }
@media (max-width:960px){ .mf-grid{ grid-template-columns:repeat(2, 1fr); } .mf-brand{ grid-column:1 / -1; } }
@media (max-width:520px){ .mf-grid{ grid-template-columns:1fr; } }
.floating-cta{ position:fixed; bottom:22px; right:22px; z-index:50; box-shadow:0 6px 22px rgba(29,184,119,0.30); }

/* ── Support-chat widget (bal alsó sarok) ────────────────────── */
.sc-root{ position:fixed; left:22px; bottom:22px; z-index:60; font-family:'Inter', system-ui, sans-serif; }
/* a [hidden] attribútum nyerjen a display:flex/inline-flex felett */
.sc-root [hidden]{ display:none !important; }
.sc-toggle{ display:inline-flex; align-items:center; gap:8px; background:var(--cb); color:#fff; border:none; cursor:pointer;
  font:inherit; font-size:14px; font-weight:600; padding:12px 18px; border-radius:999px;
  box-shadow:0 6px 22px rgba(29,184,119,0.30); transition:transform .12s, background .15s; }
.sc-toggle:hover{ background:var(--cb-d); transform:translateY(-1px); }
.sc-toggle svg{ width:18px; height:18px; }
.sc-panel{ width:min(360px, calc(100vw - 44px)); height:480px; max-height:calc(100vh - 44px);
  background:#fff; border:1px solid var(--border); border-radius:16px; overflow:hidden;
  display:flex; flex-direction:column; box-shadow:0 12px 40px rgba(16,21,28,0.18); }
.sc-head{ display:flex; align-items:center; justify-content:space-between; padding:12px 16px;
  background:var(--cb); color:#fff; }
.sc-title{ font-size:14px; font-weight:700; }
.sc-close{ background:none; border:none; color:#fff; font-size:22px; line-height:1; cursor:pointer; padding:0 2px; }
.sc-msgs{ flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:8px; background:var(--paper); }
.sc-msg{ max-width:85%; padding:9px 12px; border-radius:12px; font-size:13.5px; line-height:1.55; white-space:pre-wrap; overflow-wrap:break-word; }
.sc-assistant{ background:#fff; border:1px solid var(--border); color:var(--ink); align-self:flex-start; border-bottom-left-radius:4px; }
.sc-user{ background:var(--cb); color:#fff; align-self:flex-end; border-bottom-right-radius:4px; }
.sc-form{ display:flex; gap:8px; padding:10px; border-top:1px solid var(--border); background:#fff; }
.sc-input{ flex:1; resize:none; border:1px solid var(--border); border-radius:10px; padding:9px 11px; font:inherit; font-size:13.5px; max-height:90px; }
.sc-input:focus{ outline:2px solid rgba(29,184,119,0.4); border-color:var(--cb); }
.sc-send{ background:var(--cb); color:#fff; border:none; border-radius:10px; width:40px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.sc-send:hover{ background:var(--cb-d); }
.sc-send:disabled{ opacity:.5; cursor:default; }
.sc-send svg{ width:16px; height:16px; }
.sc-note{ font-size:11px; color:var(--smoke); text-align:center; padding:0 10px 8px; background:#fff; }

/* ── Animáció ────────────────────────────────────────────────── */
.fade{ opacity:0; transform:translateY(16px); transition:opacity .55s ease, transform .55s ease; }
.fade.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .fade{ opacity:1; transform:none; transition:none; } }
/* JS nélkül is látszódjon minden */
.no-js .fade{ opacity:1; transform:none; }

/* ── Reszponzív ──────────────────────────────────────────────── */
@media (max-width:900px){
  .feat-grid, .feat-grid.cols-4{ grid-template-columns:repeat(2,1fr); }
  .screenshot-block{ grid-template-columns:1fr; }
}
@media (max-width:760px){
  .roi-compare{ grid-template-columns:1fr; }
  .roi-arrow{ transform:rotate(90deg); justify-self:center; }
  .roi-stats{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .feat-grid, .feat-grid.cols-4{ grid-template-columns:1fr; }
  .navlinks{ display:none; }
  .hero-meta{ gap:24px; }
  .closing{ padding:40px 24px; }
  .post-nav{ flex-direction:column; }
}

/* ── Süti-hozzájárulás sáv ──────────────────────────────────── */
.cookie-bar{ position:fixed; left:50%; bottom:18px; transform:translateX(-50%);
  z-index:70; width:min(720px, calc(100vw - 32px));
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  background:#fff; border:1px solid var(--border); border-radius:14px;
  box-shadow:0 12px 40px rgba(15,40,28,0.18); padding:16px 20px; }
.cookie-bar[hidden]{ display:none; }
.cookie-text{ flex:1 1 320px; margin:0; font-size:13.5px; line-height:1.55; color:var(--char); }
.cookie-text a{ color:var(--ln); text-decoration:underline; }
.cookie-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.cookie-actions .btn{ padding:9px 16px; font-size:13.5px; }
.mf-bottom a[data-cookie-settings]{ color:inherit; text-decoration:underline; }
@media (max-width:560px){ .cookie-bar{ bottom:0; border-radius:14px 14px 0 0; width:100vw; } }
.cookie-opts{ flex-basis:100%; display:flex; flex-direction:column; gap:6px;
  padding:10px 12px; background:var(--cloud, #F4F8F6); border:1px solid var(--border);
  border-radius:10px; font-size:13px; color:var(--char); }
.cookie-opts[hidden]{ display:none; }
.cookie-opts label{ display:flex; align-items:center; gap:8px; cursor:pointer; }
.cookie-opts input[disabled]{ cursor:default; }