/* FeloHome nyilvános oldal — a FeloWeb design.css-re épül, csak az eltéréseket írja felül.
   A design.css-t szándékosan nem módosítjuk, hogy egy-az-egyben frissíthető maradjon. */

/* ── A design.css két ismert buktatója (lásd FeloConverter) ──────────────── */
.grad-text { padding-top: .10em; padding-bottom: .16em; }
.brand-text .word { color: var(--ink); }
.brand-text .hl   { color: #0077c8; }
.band-dark .brand-text .word { color: #fff; }
.band-dark .brand-text .hl   { color: #00aeef; }

/* ── Logó: FeloHome jel + „FeloHome” felirat a FeloWeb-logó stílusában ─────── */
.brand { gap: 14px; }
.brand-jel { width: 44px; height: auto; flex: none; filter: drop-shadow(0 4px 14px #2f7bff40); }
.brand-text .word { font-size: 31px; }
footer .brand-jel { width: 40px; }
@media (max-width: 620px) {
  .brand-jel { width: 38px; }
  .brand-text .word { font-size: 27px; }
}

/* ── Bejelentkezés fül: minden méretben látszik (a design.css 900px alatt elrejtené) ── */
.nav-belepes { gap: 9px; }
.nav-belepes svg { width: 15px; height: 15px; }
@media (max-width: 900px) { .nav-actions .nav-belepes { display: inline-flex; } }
nav.links a.nav-mobile-only { display: none; }
@media (max-width: 620px) { nav.links a.nav-mobile-only { display: block; color: #42c9ff; font-weight: 700; } }
@media (max-width: 420px) {
  .nav-actions .nav-belepes { padding: 11px 14px; }
  .nav-belepes .nav-belepes-szoveg { display: none; }
}

/* ── Hero: saját háttér (a FeloWeb végtelen-szalagja helyett) ──────────────── */
.hero {
  background:
    radial-gradient(ellipse 60% 70% at 78% 46%, #1b3cff3a, transparent 62%),
    radial-gradient(ellipse 40% 50% at 92% 20%, #8358ff30, transparent 60%),
    radial-gradient(ellipse 50% 60% at 8% 90%, #00aeef1c, transparent 60%),
    linear-gradient(180deg, #000e1b 0%, #01142a 70%, #000e1b 100%);
}
.hero-grid { grid-template-columns: 1fr 1fr; }
.hero-visual { display: grid; place-items: center; aspect-ratio: 1 / 1; max-height: 520px; }
.otthon-feny { position: absolute; inset: 14%; border-radius: 50%; background: radial-gradient(circle, #2f6bff55, #7a4dff22 45%, transparent 70%); filter: blur(28px); }
.otthon-kor { position: absolute; border-radius: 50%; border: 1px solid #5fa8ff26; }
.otthon-kor.k1 { inset: 12%; }
.otthon-kor.k2 { inset: 2%; border-color: #8358ff1c; }
.otthon-kor.k3 { inset: 22%; border-style: dashed; border-color: #42c9ff22; }
.otthon-jel { position: relative; width: 46%; height: auto; filter: drop-shadow(0 0 34px #2f7bff66) drop-shadow(0 24px 40px #0008); }
@media (prefers-reduced-motion: no-preference) {
  .otthon-feny { animation: lelegzes 7s ease-in-out infinite; }
  .otthon-kor.k1 { animation: lelegzes-kor 7s ease-in-out infinite; }
  .otthon-kor.k3 { animation: forgas 60s linear infinite; }
  .otthon-jel { animation: float-art 9s ease-in-out infinite; }
}
@keyframes lelegzes { 0%,100% { opacity: .65; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.04); } }
@keyframes lelegzes-kor { 0%,100% { transform: scale(.97); opacity: .6; } 50% { transform: scale(1.02); opacity: 1; } }
@keyframes forgas { to { transform: rotate(360deg); } }
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { width: min(100%, 420px); }
}
@media (max-width: 620px) { .hero-visual { width: min(100%, 320px); aspect-ratio: 1 / 1; } }

/* ── Szemlélet: a szolgáltatás-kártyák link nélkül ─────────────────────────── */
#szemlelet { padding-bottom: 148px; background: radial-gradient(ellipse at 15% 5%,#e5f2ff 0,transparent 37%),linear-gradient(180deg,#f4f8fd 0%,#fff 54%,#e5edf7 79%,#031728 100%); }
#szemlelet .service-card { cursor: default; }

/* ── Egy nap ritmusa: ugyanaz a sötét szalag, mint a FeloWeb „folyamat” része ── */
#ritmus { margin-top: -1px; padding-top: 118px; padding-bottom: 150px; overflow: hidden; background: radial-gradient(ellipse at 50% 54%,#0b2846,transparent 58%),linear-gradient(180deg,#031728 0%,#001426 64%,#eaf0f7 100%); }
#ritmus .head-row { margin-bottom: 56px; }
#ritmus .head { max-width: 640px; }
#ritmus .sub { max-width: 32ch; margin: 0; }
@media (max-width: 900px) { #ritmus .sub { max-width: 52ch; } }
@media (max-width: 620px) { #ritmus .head-row { margin-bottom: 34px; } }

/* ── Zárt kör ─────────────────────────────────────────────────────────────── */
#zart-kor { margin-top: -1px; background: linear-gradient(180deg,#eaf0f7,#fff 40%); }
.zart-kor-gomb { margin-top: 30px; }

/* ── A FeloWeb csapat ─────────────────────────────────────────────────────── */
#csapat { background: radial-gradient(ellipse at 0 40%,#e5efff,transparent 60%),linear-gradient(180deg,#fff,#f4f7fc); }
.csapat-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 22px; }
.csapat-kartya { gap: 20px; }
.csapat-logo { display: flex; align-items: center; justify-content: center; height: 128px; padding: 22px 26px; border-radius: 18px; background: radial-gradient(ellipse at 50% 120%, #1b3cff30, transparent 70%), #000e1b; border: 1px solid #10263d; }
.csapat-logo img { max-width: 100%; max-height: 64px; width: auto; height: auto; }
.csapat-logo .brand { gap: 12px; }
.csapat-logo .brand-jel { width: 46px; }
/* A logó-sáv sötét, de nem .band-dark szülőben ül: a fehér „Felo”-t itt ki kell mondani. */
.csapat-logo .brand-text .word { color: #fff; }
.csapat-logo .brand-text .hl { color: #00aeef; }
.csapat-kartya .csapat-szerep { flex: none; margin: 0; color: var(--accent-text); font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.csapat-kartya.te-itt { border-color: #a8c9ff; box-shadow: 0 24px 56px #24579922; }
.csapat-kartya.te-itt::after { opacity: 1; transform: scaleX(1); }
.itt-vagy { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; color: #5b6f88; font-size: .875rem; font-weight: 600; }
.itt-vagy::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--gradient); box-shadow: 0 0 0 4px #4776ff1f; }
@media (max-width: 900px) { .csapat-grid { grid-template-columns: 1fr; gap: 20px; } }

/* ── Záró szalag és lábléc ────────────────────────────────────────────────── */
.cta-band { background: radial-gradient(ellipse at 80% 120%,#4240b7aa,transparent 65%),radial-gradient(ellipse at 100% 16%,#00608966,transparent 60%),linear-gradient(180deg,#f4f7fc 0%,#00162a 40%,#00162a 100%); }
.cta-inner>div>p:not(.eyebrow) { display: block; color: #b7c7de; max-width: 52ch; margin: 16px 0 0; }
.footer-grid { grid-template-columns: 1.5fr .8fr 1fr .9fr; }
.footer-kiemelt { color: var(--accent-text); font-weight: 700; }
.footer-alkoto { color: #a3b7ce; }
.footer-alkoto a { color: #42c9ff; font-weight: 700; }
.footer-alkoto a:hover { text-decoration: underline; }