:root{
      --bg:#0b1220; --panel:#0f172acc; --text:#e5e7eb; --muted:#a1a1aa;
      --brand:#22c55e; --brand-700:#15803d; --accent:#38bdf8;
      --border:#263244; --card:#0f172a99; --shadow:0 12px 40px rgba(0,0,0,.45);
      --ring:#22c55e40; --btn:#22c55e; --btn-text:#0b1220;
      --nav-h:64px;
    }
    @media (prefers-color-scheme: light){
      :root{
        --bg:#f6f7fb; --panel:#ffffffde; --text:#0f172a; --muted:#475569;
        --brand:#16a34a; --brand-700:#15803d; --accent:#0284c7;
        --border:#e5e7eb; --card:#ffffffee; --shadow:0 12px 40px rgba(2,6,23,.10);
        --btn:#0ea5e9; --btn-text:#ffffff;
      }
    }

    *{box-sizing:border-box;margin:0;padding:0}
    html,body{height:100%}
    body{
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans";
      color: var(--text);
      background:
        radial-gradient(1200px 600px at -10% -10%, #22c55e22, transparent 60%),
        radial-gradient(900px 500px at 110% 0%, #38bdf822, transparent 65%),
        linear-gradient(180deg, #060a13, var(--bg));
      background-repeat: no-repeat, no-repeat, no-repeat;
      background-attachment: fixed, fixed, fixed;
      background-size: 160% 160%, 160% 160%, 100% 100%;
    }
    a{color:inherit;text-decoration:none}

    /* NAVIGATION */
    nav{
      position: sticky; top:0; z-index:100;
      background: var(--panel); border-bottom:1px solid var(--border);
      height: var(--nav-h);
    }
    .nav-container{
      max-width:1100px; margin:0 auto; height:100%;
      display:flex; align-items:center; justify-content:space-between;
      padding: 0 .75rem;
    }
    .nav-brand{ display:flex; align-items:center; gap:10px }
    .nav-brand img{
      height:48px; background:#fff; border-radius:10px; padding:5px;
      box-shadow:0 2px 6px rgba(0,0,0,.15)
    }
    .nav-menu{ display:flex; gap:1.5rem; align-items:center }
    .nav-menu a{ font-weight:600; opacity:.95 }
    .nav-menu a:hover{ color: var(--brand) }

    .nav-toggle{ display:none; flex-direction:column; gap:4px; cursor:pointer }
    .nav-toggle span{ width:26px; height:2px; background:var(--text) }

    @media (max-width: 768px){
      .nav-toggle{ display:flex }
      .nav-menu{
        position:absolute; right:.75rem; top:calc(var(--nav-h) + 8px);
        display:none; flex-direction:column; gap:0;
        background: var(--panel); border:1px solid var(--border); border-radius:10px;
        min-width: 190px; overflow:hidden; box-shadow: var(--shadow);
      }
      .nav-menu a{ padding:.8rem 1rem; display:block }
      .nav-menu.show{ display:flex }
    }

    .container{ max-width:1100px; margin:0 auto; padding: clamp(16px, 3vw, 32px); }

    /* HERO */
    .hero{
      position:relative; overflow:hidden; border-radius:20px;
      padding: clamp(20px, 4vw, 40px);
      background: linear-gradient(180deg, var(--panel), transparent 120%);
      border:1px solid var(--border); box-shadow: var(--shadow);
      display:grid; grid-template-columns:1fr; gap:20px;
      scroll-margin-top: calc(var(--nav-h) + 16px);
    }
    @media (min-width:900px){ .hero{ grid-template-columns:1.2fr .8fr; align-items:center } }

    .brandline{ display:flex; align-items:center; gap:12px; margin-bottom:10px }
    .brandline img.logo{
      width:auto; max-height:56px; border-radius:12px; background:#fff; padding:6px;
      box-shadow:0 2px 10px rgba(0,0,0,.15)
    }
    .brandline img.logo + img.logo{ margin-left:8px }
    .brandline .tag{
      display:inline-flex; align-items:center; gap:8px; margin-left:4px;
      background:#10b98122; color:#10b981; padding:8px 12px; border-radius:999px; font-weight:600; font-size:13px;
    }

    .hero-copy h1{ margin:0 0 8px 0; font-size:clamp(28px,5vw,44px); line-height:1.1; letter-spacing:-.02em }
    .hero-copy p{ margin:0; color:var(--muted); font-size:clamp(14px,1.8vw,18px) }

    .cta-row{ display:flex; flex-wrap:wrap; gap:12px; margin-top:18px }
    .btn{
      display:inline-flex; align-items:center; justify-content:center; gap:10px;
      border:0; border-radius:12px; padding:12px 18px; cursor:pointer;
      font-weight:700; box-shadow:0 10px 28px rgba(34,197,94,.35);
      background:linear-gradient(135deg, var(--btn), var(--brand-700)); color:var(--btn-text);
      transition: transform .06s, filter .2s, box-shadow .2s;
    }
    .btn:hover{ filter:brightness(1.05) } .btn:active{ transform:translateY(1px) }
    .btn:focus-visible{ outline:none; box-shadow:0 0 0 4px var(--ring) }
    .btn.btn-secondary{ background:transparent; color:var(--text); border:1px solid var(--border); box-shadow:none }

    .hero-visual{
      border-radius:16px; border:1px solid var(--border);
      background: linear-gradient(180deg, var(--card), transparent 160%);
      padding:18px; min-height:220px
    }
    .statgrid{ display:grid; gap:12px; grid-template-columns:repeat(2, minmax(0,1fr)) }
    .stat{ background:linear-gradient(180deg, var(--panel), transparent 160%); border:1px solid var(--border); border-radius:14px; padding:14px }
    .stat h3{ margin:0; font-size:14px; color:var(--muted); font-weight:600 }
    .stat p{
	  margin:6px 0 0;
	  font-size:20px;
	  font-weight:800;
	  text-align:center;   /* <-- ez középre igazítja az értékeket */
	}


    /* SECTIONS */
    section{ margin-top: clamp(28px, 6vw, 64px); scroll-margin-top: calc(var(--nav-h) + 16px) }
    .section-head{ text-align:center; margin-bottom:16px }
    .section-head h2{ margin:0; font-size:clamp(22px,3.6vw,32px); letter-spacing:-.01em }
    .section-head p{ margin:.5rem auto 0; color:var(--muted); max-width:760px }

    .features{ display:grid; gap:16px; grid-template-columns:1fr }
    @media (min-width:720px){ .features{ grid-template-columns:repeat(2, minmax(0,1fr)) } }
    @media (min-width:1040px){ .features{ grid-template-columns:repeat(4, minmax(0,1fr)) } }
    .feature{
      background:linear-gradient(180deg, var(--panel), transparent 160%);
      border:1px solid var(--border); border-radius:16px; padding:16px; box-shadow:var(--shadow);
      transition: transform .12s ease; height:100%;
    }
    .feature:hover{ transform:translateY(-2px) }
    .feature h3{ margin:0 0 6px 0; font-size:16px }
    .feature p{ margin:0; color:var(--muted); font-size:14px; line-height:1.55 }
    .emoji{
      font-size:22px; display:inline-grid; place-items:center; width:38px; height:38px;
      border-radius:10px; background:#22c55e22; margin-bottom:8px; border:1px solid var(--border)
    }

    .cta-block{
      text-align:center; background:linear-gradient(180deg, var(--panel), transparent 140%);
      border:1px solid var(--border); border-radius:18px; padding:24px; box-shadow:var(--shadow)
    }
    .cta-block h2{ margin:0 0 8px 0; font-size:clamp(20px,3vw,28px) }
    .cta-block p{ margin:0 0 16px 0; color:var(--muted) }

    footer{ margin-top: clamp(28px, 6vw, 64px); text-align:center; color:var(--muted); padding:24px 12px }