:root{
  --bg: #f6f9fc;
  --bg-main: #f7f9fc;
  --bg-section: #ffffff;
  --bg-soft: #eef2f7;
  --card: #ffffff;
  --text: #0f1724;
  --muted: #64748b;
  --accent: #0b74ff; /* világoskék fő accent */
  --accent-2: #ff7b00; /* másodlagos, CTA */
  --glass-alpha: 0.72;
  --radius: 12px;
  --maxw: 1200px;
  --nav-h: 72px;
}

/* reset */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  background:var(--bg-main);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.6;
}

/* container helper */
.container{max-width:var(--maxw);margin:0 auto;padding:0 20px}

/* ---------- GLASS NAVBAR ---------- */
.header-wrap{height:var(--nav-h)}
.navbar{
  position:fixed;left:0;right:0;top:0;height:var(--nav-h);z-index:1200;
  display:flex;align-items:center;backdrop-filter: blur(10px) saturate(140%);
  transition: all .28s ease;
  background: rgba(255,255,255,0.0); /* transparent by default on top */
  box-shadow: none;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.navbar.scrolled{
  background: rgba(255,255,255,var(--glass-alpha));
  box-shadow: 0 8px 30px rgba(2,6,23,0.06);
  border-bottom: 1px solid rgba(14,54,105,0.06);
}

.navbar .nav-inner{
  width:100%;max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:0 20px;
}

/* logo */
.logo a{font-weight:800;font-size:1.15rem;color:var(--accent);text-decoration:none;letter-spacing:-0.4px}
.logo a small{color:var(--muted);font-weight:600;margin-left:6px;font-size:.85rem}

/* nav links - desktop */
.nav-links {
  display:flex;
  gap:18px;
  align-items:center
}

.nav-links a{
  text-decoration:none;
  color:var(--text);
  font-weight:600;
  padding:8px 10px;
  border-radius:8px;
  position:relative;
  transition:all .18s;
  box-sizing:border-box;

  border:1px solid rgba(0,0,0,0.15); /* új keret */
}

.nav-links a:hover{
  color:var(--accent);
  border-color:var(--accent);        /* hover kiemelés */
}

.nav-links a::after{
  content:"";
  position:absolute;
  left:12px;
  bottom:4px;
  height:2px;
  width:0;
  background:var(--accent);
  transition:width .22s;
}

.nav-links a:hover::after{
  width:calc(100% - 24px);
}

/* CTA */
.cta{
  padding:8px 16px;border-radius:999px;background:linear-gradient(90deg,var(--accent-2),#ff9b4d);color:#07101a;font-weight:800;text-decoration:none;
  box-shadow:0 10px 32px rgba(255,123,0,0.12);
}
.cta:hover{transform:translateY(-2px)}

/* hamburger */
.hamburger{display:none;border:0;background:transparent;cursor:pointer;padding:8px 10px}
.hamburger .bar{display:block;width:22px;height:2px;background:var(--text);margin:4px 0;transition:transform .28s,opacity .28s}

/* mobile menu panel (slide from top) */
.mobile-panel{
  position:fixed;left:0;right:0;top:var(--nav-h);background:rgba(255,255,255,0.98);backdrop-filter: blur(8px);
  box-shadow:0 18px 40px rgba(2,6,23,0.06);z-index:1100;transform:translateY(-30px);opacity:0;pointer-events:none;
  transition: transform .28s ease, opacity .28s ease;
  padding:18px 20px;border-bottom-left-radius:12px;border-bottom-right-radius:12px;
}
.mobile-panel.open{transform:translateY(0);opacity:1;pointer-events:auto}
.mobile-panel a{display:block;padding:12px 8px;text-decoration:none;color:var(--text);font-weight:700;border-radius:8px}
.mobile-panel a.active{color:var(--accent)}

/* ---------- HERO ---------- */
.hero{
  padding:120px 0 40px; /* space for fixed nav */
  background: linear-gradient(135deg,#f7f9fc 0%,#eef2f7 60%,#e9eef5 100%);
}
.hero .hero-inner{display:grid;grid-template-columns:1fr 460px;gap:36px;align-items:center;max-width:var(--maxw);margin:0 auto;padding:0 20px}
.eyebrow{font-weight:700;color:var(--accent);font-size:.85rem;margin-bottom:8px}
.hero h1{font-size:2.4rem;line-height:1.02;margin-bottom:10px}
.lead{color:var(--muted);font-size:1.05rem;max-width:56ch}
.hero-ctas{margin-top:16px;display:flex;gap:12px;flex-wrap:wrap}

/* hero visual */
.hero-card{height:320px;border-radius:16px;background:linear-gradient(180deg,#e8f6ff,#ffffff);box-shadow:0 20px 60px rgba(2,6,23,0.06);display:flex;align-items:center;justify-content:center;overflow:hidden}
.hero-card img{max-width:94%;height:auto;display:block;}

/* ---------- SECTIONS ---------- */
.section{padding:56px 0}
.section .container{padding:0}
.section h2{font-size:1.6rem;margin-bottom:8px}
.section {background: var(--bg-section);}
.section.alt {background: var(--bg-soft);}
.muted{color:var(--muted)}

/* grids */
.grid{display:grid;gap:22px}
.services-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.projects-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.team-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}

/* cards */
.card{background:var(--card);padding:20px;border-radius:12px;border:1px solid rgba(2,6,23,0.03);box-shadow:0 8px 28px rgba(2,6,23,0.04);transition:transform .22s}
.card:hover{transform:translateY(-8px)}

/* project specifics */
.project-card h3{color:var(--accent);margin-bottom:8px}
.tag{display:inline-block;background:#eaf4ff;color:var(--accent);padding:6px 10px;border-radius:999px;font-size:.85rem;margin-right:8px}

/* team */
.member{text-align:center}
.member img{width:88px;height:88px;border-radius:50%;object-fit:cover;margin:0 auto 12px}

/* contact layout */
.contact-grid{display:grid;grid-template-columns:1fr 420px;gap:28px}
.contact-card{padding:18px;border-radius:12px;background:var(--card);box-shadow:0 12px 36px rgba(2,6,23,0.04)}
.contact-form input,.contact-form textarea{width:100%;padding:12px;border-radius:8px;border:1px solid #e6eef8;margin-bottom:12px}

/* page footer */
.footer{background:#fff;padding:28px 0;border-top:1px solid #eef3fb;text-align:center;color:var(--muted)}

/* responsiveness */
@media (max-width:980px){
  .hero .hero-inner{grid-template-columns:1fr}
  .nav-links{display:none}
  .hamburger{display:block}
}
@media (max-width:720px){
  .contact-grid{grid-template-columns:1fr}
}