:root{
  --bg:#0f1115;
  --fg:#0f1115;
  --muted:#6b7280;
  --line:#e5e7eb;
  --soft:#f6f7f9;
  --card:#ffffff;
  --brand:#111827;
  --accent:#0b5cff;
  --radius:16px;
  --shadow:0 10px 30px rgba(0,0,0,.08);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial; color:var(--fg); background:#fff; line-height:1.55}
a{color:inherit}
.wrap{max-width:1120px;margin:0 auto;padding:0 18px}
.topbar{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.nav{display:flex;align-items:center;justify-content:space-between;padding:12px 0;gap:14px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.logo{
  width:36px;height:36px;border-radius:12px;background:linear-gradient(135deg,#111827,#374151);
  display:grid;place-items:center;color:#fff;font-weight:800;letter-spacing:.5px
}
.brand span{font-weight:800;letter-spacing:.2px}

.links{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.links a{font-weight:650;text-decoration:none;color:#111827;padding:8px 10px;border-radius:12px}
.links a:hover{background:var(--soft)}
.links a.active{background:var(--soft);border:1px solid var(--line)}

.cta{display:flex;gap:10px;align-items:center}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:10px 14px;border-radius:14px;text-decoration:none;font-weight:750;
  border:1px solid var(--line); background:#fff; cursor:pointer;
}
.btn.primary{background:var(--brand);color:#fff;border-color:var(--brand)}
.btn.primary:hover{filter:brightness(1.05)}
.btn:hover{background:var(--soft)}

.burger{display:none;border:1px solid var(--line); background:#fff; border-radius:12px;padding:10px 12px;font-weight:800}
.mobilemenu{display:none;border-top:1px solid var(--line);padding:10px 0}
.mobilemenu a{display:block;padding:10px 12px;border-radius:12px;text-decoration:none;font-weight:650}
.mobilemenu a:hover{background:var(--soft)}
.mobilemenu a.active{background:var(--soft);border:1px solid var(--line)}

/* HERO - HÁTTÉR + FIX MAGASSÁG */
.hero{
  min-height: 80vh;               /* FIX: ne legyen összenyomva */
  display: flex;                   /* FIX: középre igazítás */
  align-items: center;             /* FIX: függőlegesen középre */

  background:
    linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.55)),
    url("/images/hatter.png") center center / cover no-repeat;

  border-bottom:1px solid var(--line);
  color:#fff;
}

.hero-inner{padding:56px 0 46px;display:grid;grid-template-columns:1.1fr .9fr;gap:26px;align-items:center}

.kicker{color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:.82rem}

h1{margin:.35rem 0 0;font-size:clamp(2rem,3.4vw,3.2rem);line-height:1.1;letter-spacing:-.02em}

.lead{margin:14px 0 18px;color:#374151;font-size:1.05rem;max-width:52ch}

.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px}
.hero-cards{display:grid;gap:12px}

.mini{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px;box-shadow:var(--shadow)
}
.mini strong{display:block}
.mini small{color:var(--muted)}

.hero h1,
.hero .lead,
.hero .kicker,
.hero .muted{
  color:#fff;
  text-shadow: 0 2px 8px rgba(0,0,0,.6); /* jobb olvashatóság */
}

/* MUTED SZÖVEG ÁLTALÁNOS */
.muted{color:var(--muted)}

.pagehead{padding:34px 0;border-bottom:1px solid var(--line);background:#fff}
.pagehead h1{font-size:clamp(1.6rem,2.4vw,2.2rem);margin:0}
.pagehead p{margin:10px 0 0;color:var(--muted);max-width:70ch}

section{padding:54px 0}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:18px}
.section-head h2{margin:0;font-size:1.7rem;letter-spacing:-.01em}
.section-head p{margin:0;color:var(--muted);max-width:60ch}

.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.col4{grid-column:span 4}
.col6{grid-column:span 6}
.col8{grid-column:span 8}
.col12{grid-column:span 12}

.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px;box-shadow:var(--shadow)
}
.card h3{margin:0 0 6px;font-size:1.05rem}
.card p{margin:0;color:#4b5563}
.tag{display:inline-flex;align-items:center;gap:8px;color:#111827;background:var(--soft);
  border:1px solid var(--line);padding:6px 10px;border-radius:999px;font-weight:700;font-size:.85rem;margin-bottom:10px}
.dot{width:8px;height:8px;border-radius:999px;background:var(--accent);display:inline-block}
.hr{height:1px;background:var(--line);margin:14px 0}

.project{padding:0;overflow:hidden}
.project .thumb{background:linear-gradient(135deg,#e5e7eb,#f3f4f6);aspect-ratio:16/10;border-bottom:1px solid var(--line)}
.project .body{padding:16px}
.meta{display:flex;gap:10px;flex-wrap:wrap;color:var(--muted);font-size:.9rem;margin-top:10px}

.nums{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.num{border:1px solid var(--line);border-radius:var(--radius);padding:16px;background:#fff}
.num b{font-size:1.35rem}
.num div{color:var(--muted);font-weight:650}

.gallery{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.ph{background:linear-gradient(135deg,#e5e7eb,#f3f4f6);border:1px solid var(--line);border-radius:14px;aspect-ratio:1/1}
.ph.wide{grid-column:span 2;aspect_ratio:2/1}
.ph.tall{grid-row:span 2;aspect_ratio:1/2}

form{display:grid;gap:10px}
input, textarea{
  width:100%; padding:12px; border-radius:14px; border:1px solid var(--line);
  background:#fff; font:inherit
}
textarea{min-height:120px;resize:vertical}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}

.footer{background:#0f1115;color:#fff}
.footer a{color:#fff}
.footer .wrap{padding:28px 18px}
.footgrid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:18px}
.subtle{color:rgba(255,255,255,.72)}

@media (max-width: 920px){
  .hero-inner{grid-template-columns:1fr; padding:44px 0}
  .nums{grid-template-columns:repeat(2,1fr)}
  .gallery{grid-template-columns:repeat(3,1fr)}
  .ph.wide{grid-column:span 1;aspect-ratio:1/1}
  .ph.tall{grid-row:span 1;aspect-ratio:1/1}
}
@media (max-width: 820px){
  .links,.cta{display:none}
  .burger{display:inline-flex}
  .mobilemenu.show{display:block}
  .col4,.col6,.col8{grid-column:span 12}
  .two{grid-template-columns:1fr}
  .footgrid{grid-template-columns:1fr}
}
.topbar{
  background: rgba(15,17,21,.92); /* sötét áttetsző */
  border-bottom: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(6px);
}

.brand span{
  color:#fff;
}

.links a{
  color:#fff;
}

.links a:hover{
  background: rgba(255,255,255,.08);
}

.links a.active{
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.15);
}

.btn{
  background: rgba(255,255,255,.08);
  color:#fff;
  border-color: rgba(255,255,255,.2);
}

.btn:hover{
  background: rgba(255,255,255,.15);
}

.btn.primary{
  background: var(--accent);
  border-color: var(--accent);
  color:#fff;
}

.burger{
  background: rgba(255,255,255,.08);
  color:#fff;
  border-color: rgba(255,255,255,.2);
}

/* Mobil menü háttér */
.mobilemenu{
  background: rgba(15,17,21,.98);
}

.mobilemenu a{
  color:#fff;
}

.mobilemenu a:hover{
  background: rgba(255,255,255,.08);
}

/* HERO – fehér kártyák helyett */
.hero-features{
  margin-top: 24px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.hero-features div{
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 14px 18px;
  border-radius: 14px;

  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(6px);

  color: #fff;
  font-weight: 600;
  border: 1px solid rgba(255,255,255,0.25);
}

.hero-features span{
  font-size: 1.3rem;
}
/* ===== ANIMÁCIÓK (finom, prémium) ===== */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero .kicker,
.hero h1,
.hero .lead,
.hero .hero-actions,
.hero .hero-features {
  opacity: 0;
  animation: fadeUp .7s ease forwards;
}

.hero .kicker{ animation-delay: .05s; }
.hero h1{ animation-delay: .12s; }
.hero .lead{ animation-delay: .20s; }
.hero .hero-actions{ animation-delay: .28s; }
.hero .hero-features{ animation-delay: .36s; }

/* aki mozgásérzékeny, annál ne animáljon */
@media (prefers-reduced-motion: reduce){
  .hero .kicker,
  .hero h1,
  .hero .lead,
  .hero .hero-actions,
  .hero .hero-features {
    opacity: 1;
    animation: none;
    transform: none;
  }
}
/* ===== ANIMÁCIÓK (finom, prémium) ===== */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero .kicker,
.hero h1,
.hero .lead,
.hero .hero-actions,
.hero .hero-features {
  opacity: 0;
  animation: fadeUp .7s ease forwards;
}

.hero .kicker{ animation-delay: .05s; }
.hero h1{ animation-delay: .12s; }
.hero .lead{ animation-delay: .20s; }
.hero .hero-actions{ animation-delay: .28s; }
.hero .hero-features{ animation-delay: .36s; }

/* aki mozgásérzékeny, annál ne animáljon */
@media (prefers-reduced-motion: reduce){
  .hero .kicker,
  .hero h1,
  .hero .lead,
  .hero .hero-actions,
  .hero .hero-features {
    opacity: 1;
    animation: none;
    transform: none;
  }
}
/* ====== MODERN KÁRTYA STÍLUS ====== */

/* Minden fő kártya */
.card{
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(0,0,0,0.05);
  box-shadow: 0 12px 35px rgba(0,0,0,.12);
  transition: all .25s ease;
}

.card:hover{
  transform: translateY(-6px);
  box-shadow: 0 18px 45px rgba(0,0,0,.18);
}

/* Szolgáltatások kártyák */
section .card{
  border-radius: 18px;
}

/* Ikonos cím */
.card h3{
  font-weight: 800;
  letter-spacing: -.01em;
}

/* Tag szebb */
.tag{
  background: rgba(11,92,255,.08);
  color: #0b5cff;
  border-color: rgba(11,92,255,.25);
}

/* Gombok hover */
.btn{
  transition: all .2s ease;
}
.btn:hover{
  transform: translateY(-1px);
}

/* Oldal háttér finom szürke */
section{
  background: linear-gradient(#fafafa,#f3f4f6);
}
/* ===== ALOLDAL FEJLÉC HÁTTÉR ===== */

.pagehead{
  min-height: 40vh;
  display: flex;
  align-items: center;

  background:
    linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.6)),
    url("/images/hatter.png") center/cover no-repeat;

  color: #fff;
}

/* Szöveg világos legyen rajta */
.pagehead h1,
.pagehead p{
  color: #fff !important;
  
}