:root{
  --bg: #050607;
  --bg2:#0b0f10;
  --card:#0c1314;
  --neon:#00ff88;
  --neon-soft: rgba(0,255,136,.18);
  --text:#e7f7ef;
  --muted:#93a7a0;
  --line: rgba(0,255,136,.25);
}
body {
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(900px 500px at 10% -10%, rgba(0,255,136,.08), transparent 60%),
    radial-gradient(800px 500px at 90% 0%, rgba(0,255,136,.06), transparent 55%),
    var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}


.page {
  min-height: calc(100vh - 120px); /* header + footer hely */
  display: flex;
  flex-direction: column;
}

/* NAV */
.nav{
  position: sticky; top:0; z-index:50;
  background: rgba(5,6,7,.8);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  max-width:1100px; margin:0 auto;
  padding:14px 18px;
  display:flex; align-items:center; gap:14px;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-weight:800; letter-spacing:1px;
}
.brand .dot{
  width:10px; height:10px; border-radius:50%;
  background:var(--neon);
  box-shadow:0 0 10px var(--neon), 0 0 25px var(--neon);
}
.nav-links{margin-left:auto; display:flex; gap:10px; align-items:center}
.nav-links a{
  padding:8px 12px; border-radius:10px; color:var(--muted);
  border:1px solid transparent;
}
.nav-links a.active,
.nav-links a:hover{
  color:var(--text);
  background: rgba(0,255,136,.06);
  border:1px solid var(--line);
}

/* LAYOUT */
.container{
  max-width:1500px;
  margin:0 auto;
  padding:22px 18px; /* ← 60px LEVÉVE */
}

/* HERO */
.hero{
  margin-top:18px;
  border-radius:18px;
  background: linear-gradient(180deg, var(--bg2), transparent);
  border:1px solid var(--line);
  box-shadow: 0 0 0 1px rgba(0,255,136,.05) inset;
  padding: 40px 50px;
  max-width: 900px; /* 650 → 900 */
}
.hero h1{
  margin:0 0 6px 0; font-size: clamp(24px, 4vw, 36px);
}
.hero p{margin:0; color:var(--muted)}
.hero-actions{margin-top:14px; display:flex; gap:10px; flex-wrap:wrap}

/* BUTTONS */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px; border-radius:12px;
  background: transparent; color:var(--text);
  border:1px solid var(--line);
  box-shadow: 0 0 16px var(--neon-soft);
  transition:.15s transform, .15s background, .15s box-shadow;
  cursor:pointer; font-weight:600;
}
.btn:hover{
  transform: translateY(-1px);
  background: rgba(0,255,136,.07);
  box-shadow: 0 0 22px var(--neon-soft);
}
.btn.primary{
  background: rgba(0,255,136,.12);
}

/* GRID + CARDS */
.section-title{
  margin:22px 0 10px; font-size:18px; font-weight:700;
}
/* CARD STYLE */
.card, .tool-card {
  background: #111;
  border: 1px solid #222;
  padding: 20px;
  border-radius: 12px;
  text-decoration: none;
  color: white;
  transition: 0.2s;
  display: block;
}

.card:hover, .tool-card:hover {
  border-color: #0f0;
  transform: translateY(-3px);
}

.card h3{margin:0 0 6px; font-size:16px}
.card p{margin:0 0 10px; color:var(--muted); font-size:14px}
.card .open{width:100%}

/* TOOL PAGE (centered invisible card) */
.tool-page{
  max-width: 760px;
  margin: 26px auto 0;
  padding: 0 6px 40px;
}
.tool-title{
  font-size: clamp(22px, 3.2vw, 30px);
  font-weight: 800;
  letter-spacing: .5px;
  margin: 6px 0 10px;
  text-shadow: 0 0 12px rgba(0,255,136,.25);
}
.tool-sub{
  color: var(--muted);
  font-size: 14px;
  margin-bottom: 14px;
}
.tool-shell{
  padding: 10px 2px; /* invisible card: nincs keret */
}

/* INPUTS */
.input, select{
  width:100%; margin:6px 0 10px; padding:10px 12px;
  border-radius:12px; border:1px solid var(--line);
  background:#060a0b; color:var(--text);
  outline:none;
  transition: .15s border, .15s box-shadow;
}
.input:focus, select:focus{
  border-color: var(--neon);
  box-shadow: 0 0 0 3px var(--neon-soft);
}

.row{display:flex; gap:10px; flex-wrap:wrap}
.row > *{flex:1}

.small{font-size:12px; color:var(--muted)}
.output{
  margin-top:8px;
  padding:10px 12px; border-radius:12px;
  background:#050808; border:1px solid var(--line);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  word-break:break-all;
}

/* QR */
.qr-wrap{
  display:flex; justify-content:center; padding:10px 0;
}
.qr-wrap canvas, .qr-wrap img{
  border-radius:10px; background:white; padding:8px;
}

.footer {
  margin-top: 60px; /* ami eddig a container padding volt */
}
/* FOOTER */
.footer{
  margin-top:36px;
  padding:14px 10px 20px;
  color:var(--muted);
  font-size:13px; text-align:center;
  border-top:1px solid var(--line);
}
.footer-links{
  display:flex; gap:10px; justify-content:center; flex-wrap:wrap;
  margin-bottom:6px;
}
.footer-links a{
  color: var(--text);
  opacity: .9;
  padding:4px 8px;
  border-radius: 999px;
  border:1px solid transparent;
}
.footer-links a:hover{
  border-color: var(--line);
  background: rgba(0,255,136,.05);
}

.badge{
  display:inline-block; padding:3px 8px; border-radius:999px;
  border:1px solid var(--line); background:rgba(0,255,136,.05);
  color:var(--text); font-size:12px;
}
.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-top: 20px;
}
.card, .tool-card {
  background: linear-gradient(180deg, #0c1314, #070b0c);
  border: 1px solid rgba(0,255,136,0.20);
  padding: 22px 20px;
  border-radius: 14px;
  color: var(--text);
  box-shadow:
      0 0 6px rgba(0,255,136,0.08),
      0 0 18px rgba(0,255,136,0.05) inset;
  transition: 0.2s ease;
  display: block;
  backdrop-filter: blur(4px);
}

.card:hover, .tool-card:hover {
  border-color: rgba(0,255,136,0.35);
  box-shadow:
      0 0 12px rgba(0,255,136,0.2),
      0 0 25px rgba(0,255,136,0.12) inset;
  transform: translateY(-4px);
}

/* Titles */
.card h3 {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 700;
  text-shadow: 0 0 6px rgba(0,255,136,0.15);
}

/* Subtext */
.card p {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
}
/* --- ICON STYLE --- */
.card .icon {
  font-size: 22px;
  margin-bottom: 10px;
  color: var(--neon);
  text-shadow: 0 0 10px rgba(0,255,136,0.4);
  display: block;
}

/* --- SEXY NEON CARD WITH 3D EFFECT --- */
.card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #0c1314, #060a0b);
  border: 1px solid rgba(0,255,136,0.18);
  padding: 24px 20px;
  border-radius: 14px;
  color: var(--text);
  transition: 0.2s ease, transform 0.15s ease;
  box-shadow: 0 0 6px rgba(0,255,136,0.12),
              inset 0 0 16px rgba(0,255,136,0.05);
  backdrop-filter: blur(4px);
}

/* Hover → neon glow + lift */
.card:hover {
  transform: translateY(-6px) scale(1.02);
  border-color: rgba(0,255,136,0.38);
  box-shadow: 0 0 16px rgba(0,255,136,0.25),
              inset 0 0 25px rgba(0,255,136,0.12);
}

/* --- 3D Mouse Light Effect --- */
.card::before {
  content: "";
  position: absolute;
  top: var(--y);
  left: var(--x);
  transform: translate(-50%, -50%);
  width: 0px;
  height: 0px;
  border-radius: 50%;
  background: rgba(0,255,136,0.15);
  filter: blur(30px);
  transition: width .2s, height .2s, opacity .2s;
  opacity: 0;
}

.card:hover::before {
  width: 160px;
  height: 160px;
  opacity: 1;
}

html, body {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
}

/* GRID FIX – always 3 columns on desktop */

.grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
}

@media (max-width: 1100px) {
    .grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .grid {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}
.card {
    width: 100%;
    box-sizing: border-box;
    min-height: 170px; /* extra hely */
    padding: 24px 22px;
    max-width:1500px;
}