/* =========================
   dunaikrisztian.hu – design css verzio3
   ========================= */

:root{
  /* fohatter */
  --bg:#0b0f16;
  --bg2:#0a0d13;

  /* szinek */
  --text:#0e1220;
  --muted:rgba(14,18,32,.70);
  --muted2:rgba(14,18,32,.55);

  --border:rgba(14,18,32,.10);
  --border2:rgba(14,18,32,.14);

  --shadow: 0 18px 55px rgba(14,18,32,.10);
  --shadow2: 0 10px 30px rgba(14,18,32,.08);

  --accent:#0e1220;

  --radius:18px;
  --radius2:26px;
  --max:1120px;

  /* zajositas az oldalon */
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");

  /* hero */
  --header-h: 74px;
  --hero-min-h: 680px;     
  --hero-fade-h: 260px;

  --section-gap: 44px;
  --section-gap-m: 30px;

  /* hero def hatter */
  --hero-img: url("/assets/hero/fooldal-banner.webp");
}


*{box-sizing:border-box}
html,body{height:100%}
html,body{margin:0;padding:0}

body{
  position:relative;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color: var(--text);
  overflow-x:hidden;

  min-height:100vh;
  display:flex;
  flex-direction:column;

  background: var(--bg);
}

body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  z-index:0;

  background-image:
    radial-gradient(1200px 700px at 50% 20%, rgba(255,255,255,.04), transparent 60%),
    radial-gradient(900px 600px at 18% 18%, rgba(76,69,215,.14), transparent 62%),
    radial-gradient(1000px 700px at 82% 28%, rgba(255,168,110,.08), transparent 66%),

    repeating-linear-gradient(135deg,
      rgba(255,255,255,.014) 0px,
      rgba(255,255,255,.014) 2px,
      rgba(0,0,0,0) 2px,
      rgba(0,0,0,0) 10px
    ),
    repeating-linear-gradient(45deg,
      rgba(255,255,255,.010) 0px,
      rgba(255,255,255,.010) 2px,
      rgba(0,0,0,0) 2px,
      rgba(0,0,0,0) 12px
    );

  background-size:
    100% 100%,
    100% 100%,
    100% 100%,
    420px 420px,
    520px 520px;

  opacity: .55; 
}

body::after{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  z-index:0;
  background-image: var(--noise);
  background-size: 260px 260px;
  opacity: .06;           /* softened */
  mix-blend-mode: overlay;
}

.bg{
  position:fixed; inset:-20vh -20vw;
  background:
    radial-gradient(1100px 700px at 18% 12%, rgba(76,69,215,.18), transparent 62%),
    radial-gradient(900px 600px at 85% 18%, rgba(255,168,110,.10), transparent 65%),
    radial-gradient(1200px 800px at 55% 95%, rgba(255,255,255,.06), transparent 66%);
  filter: blur(18px);
  pointer-events:none;
  z-index:0;
  opacity:.55;
}

.wrap{
  position:relative;
  z-index:1;
  max-width:var(--max);
  margin:0 auto;

  padding: calc(28px + var(--header-h)) 18px 42px;

  flex: 1 0 auto;
}

/* =========================
   HEADER 
   ========================= */
.header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:999;

  min-height: var(--header-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;

  padding-left: max(18px, calc((100vw - var(--max)) / 2));
  padding-right:max(18px, calc((100vw - var(--max)) / 2));
  padding-top:10px;
  padding-bottom:10px;

  background: rgba(0,0,0,.48);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.brand{
  color:#fff;
  text-decoration:none;
  font-weight:900;
  letter-spacing:-.02em;
}
.brand span{opacity:.70; font-weight:800}
.brand.small{font-size:14px}

.brandLogo{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  line-height:0;
}
.brandLogo img{
  height: 48px;
  width: auto;
  display:block;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.45));
}
.brandLogoFooter img{
  height: 72px;
  width: auto;
  display:block;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.45));
}

.nav{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.nav a{
  color: rgba(255,255,255,.84);
  text-decoration:none;
  font-size:14px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid transparent;
  transition:.2s ease;
  font-weight:900;
}
.nav a:hover{
  color:#fff;
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.14);
}
.nav a.active{
  color:#fff;
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.18);
}
.nav a.cta{
  color:#fff;
  background: rgba(76,69,215,.22);      /* #4C45D7-ből */
  border-color: rgba(76,69,215,.55);
  box-shadow: 0 10px 26px rgba(76,69,215,.18);
}

.nav a.cta:hover{
  background: rgba(76,69,215,.32);
  border-color: rgba(76,69,215,.75);
}

.nav a.cta.active{
  background: rgba(76,69,215,.70);
  border-color: rgba(76,69,215,.90);
}


/* =========================
   HERO
   ========================= */
.hero{
  margin-top:24px;
  border:1px solid var(--border);
  border-radius: var(--radius2);
  background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.70));
  padding:46px 36px;
  box-shadow: var(--shadow);
  position:relative;
}

/* =========================
   HERO TARTALOM
   ========================= */
.hero.heroMedia{
  margin-top:0;
  border:0;
  background:transparent;
  padding:0;
  box-shadow:none;
  border-radius:0;

  position:relative;
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);

  margin-top: calc(-1 * (28px + var(--header-h)));

  min-height:var(--hero-min-h);
  overflow:hidden;

  padding-top: calc(var(--header-h) + 64px);
  padding-bottom: 92px;

  display:flex;
  align-items:center;
  justify-content:center;
}

.heroBg{
  position:absolute; inset:0;
  z-index:0;

  background-image: var(--hero-img);
  background-size:cover;
  background-position:50% 35%;
  background-repeat:no-repeat;

  transform:scale(1.04);
  filter: blur(1.6px) saturate(1.06) contrast(1.08) brightness(.88);
}

.heroBgEgyedi{
  position:absolute; inset:0;
  z-index:0;

  background-size:cover;
  background-position:50% 35%;
  background-repeat:no-repeat;

  transform:scale(1.04);
  filter: blur(1.6px) saturate(1.06) contrast(1.08) brightness(.88);
}

.heroVideo{ display:none !important; }

.heroOverlay{
  position:absolute; inset:0;
  z-index:1;
  background:
    linear-gradient(180deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.30) 45%, rgba(0,0,0,.10) 100%),
    radial-gradient(1200px 700px at 50% 40%, rgba(0,0,0,.28) 0%, rgba(0,0,0,0) 62%),
    linear-gradient(90deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.30) 55%, rgba(0,0,0,.12) 100%);
}

.heroGrain{
  position:absolute; inset:0;
  z-index:2;
  pointer-events:none;
  background-image: var(--noise);
  background-size: 260px 260px;
  opacity:.10;
  mix-blend-mode: overlay;
}

.hero.heroMedia::after{
  content:"";
  position:absolute;
  left:0; right:0;
  bottom:-1px;
  height: var(--hero-fade-h);
  pointer-events:none;
  z-index:3;
  background: linear-gradient(to bottom, rgba(11,15,22,0), var(--bg));
}

.heroInner{
  position:relative;
  z-index:4;

  width: min(980px, calc(100% - 48px));
  margin:0 auto;

  padding: 54px 52px; /* levegősebb */
  border-radius: 26px;

  background: rgba(0,0,0,.46);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
  box-shadow: 0 30px 90px rgba(0,0,0,.45);

  color:#fff;
  text-shadow: 0 2px 18px rgba(0,0,0,.55);
}

.kicker{
  color: rgba(255,255,255,.80);
  font-size:13px;
  font-weight:900;
  letter-spacing:.02em;
  margin-bottom: 14px;
}

h1{
  margin:0;
  font-size: clamp(30px, 4vw, 56px);
  line-height: 1.06;
  letter-spacing:-.045em;
}

.lead{
  margin-top:14px;
  color: var(--muted);
  max-width:72ch;
  font-size:16px;
  line-height:1.75;
}

.hero.heroMedia .lead{
  margin-top:18px;
  color: rgba(255,255,255,.82);
  display:-webkit-box;
  -webkit-line-clamp:4;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.heroBtns{margin-top:28px; display:flex; gap:12px; flex-wrap:wrap}
.heroNote{margin-top:10px; max-width:72ch; opacity:.90}

/* =========================
   GOMBOK
   ========================= */
.btn, button.btn, input.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  padding:12px 16px;
  border-radius:16px;
  border:1px solid var(--border2);
  background: rgba(255,255,255,.90);
  color: var(--text);
  text-decoration:none;
  font-weight:900;
  font-size:14px;
  cursor:pointer;
  transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease, filter .16s ease;
  box-shadow: 0 10px 26px rgba(14,18,32,.06);
}
.btn:hover{transform: translateY(-1px)}
.btn.primary{
  background: var(--accent);
  color:#fff;
  border-color: rgba(14,18,32,.16);
}
.btn.primary:hover{filter:brightness(.98)}
.btn.ghost{
  background: transparent;
  box-shadow:none;
  color: var(--text);
}

.hero.heroMedia .btn{
  color:#fff;
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 10px 26px rgba(0,0,0,.18);
}
.hero.heroMedia .btn.primary{
  background: rgba(255,255,255,.92);
  color:#0e1220;
  border-color: rgba(255,255,255,.20);
}
.hero.heroMedia .btn.ghost{
  background: transparent;
  color:#fff;
  box-shadow:none;
  border-color: rgba(255,255,255,.18);
}

.pillRow{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px}
.pill{
  font-size:12px;
  color: rgba(14,18,32,.75);
  background: rgba(255,255,255,.66);
  border:1px solid rgba(14,18,32,.08);
  padding:8px 10px;
  border-radius:999px;
  font-weight:900;
  backdrop-filter: blur(8px);
  transition: transform .16s ease, background-color .16s ease;
}
.pill:hover{transform: translateY(-1px); background: rgba(255,255,255,.74)}
.hero.heroMedia .pill{
  color: rgba(255,255,255,.86);
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.16);
}
.hero.heroMedia .pill:hover{background: rgba(255,255,255,.16)}

/* =========================
   ELKULONITES
   ========================= */
.section{
  position:relative;
  margin-top: var(--section-gap);
  scroll-margin-top: calc(var(--header-h) + 18px);
}
.hero.heroMedia + .section{ margin-top: 26px; }

.section + .section::before{
  content:"";
  position:absolute;
  left:0; right:0;
  top: calc(var(--section-gap) * -0.58);
  height: 2px;
  background: linear-gradient(90deg,
    transparent,
    rgba(255,255,255,.14),
    rgba(76,69,215,.26),
    rgba(255,255,255,.14),
    transparent
  );
  opacity: 1;
  filter: blur(.2px);
}

.panel .section{
  margin-top: 18px;
}
.panel .section::before,
.panel .section + .section::before{
  display:none;
}

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

.card{
  border:1px solid var(--border);
  background:rgba(255,255,255,.88);
  border-radius: var(--radius);
  padding:18px;
  box-shadow: var(--shadow2);
  transition: transform .18s ease, box-shadow .18s ease;
}
.card:hover{transform: translateY(-2px)}
.card h3{margin:0; font-size:16px; letter-spacing:-.02em}
.card p{margin:10px 0 0; color:var(--muted); line-height:1.75}
.card ul{margin:12px 0 0; padding-left: 16px; color:var(--muted); font-size:14px; line-height:1.75}

/* panelek es kartyak */
.panel{
  border:1px solid var(--border);
  border-radius: var(--radius2);
  background:rgba(255,255,255,.88);
  padding:28px 22px;
  box-shadow: var(--shadow);
}
.h2{margin:0; font-size:26px; letter-spacing:-.03em}
.p{margin:10px 0 0; color:var(--muted); line-height:1.85}
.muted{color:var(--muted)}
.tiny{font-size:12px; color:var(--muted2)}
.hr{height:1px; background:rgba(14,18,32,.10); margin:16px 0}

.split{display:grid; gap:14px; grid-template-columns: 1.2fr .8fr}

.priceGrid{display:grid; gap:14px; grid-template-columns: repeat(2, minmax(0,1fr))}
.priceBox{
  border:1px solid rgba(14,18,32,.10);
  background:rgba(255,255,255,.92);
  border-radius:22px;
  padding:18px;
  box-shadow: var(--shadow2);
}
.priceTop{display:flex; justify-content:space-between; gap:12px; align-items:flex-start}
.price{font-size:24px; font-weight:1000; letter-spacing:-.03em}
.badge{font-size:11px; color:rgba(14,18,32,.70); font-weight:900}
.note{font-size:12px; color:var(--muted2); margin-top:10px}

.refsGrid{display:grid; gap:14px; grid-template-columns: repeat(2, minmax(0,1fr))}
.thumb{
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  border:1px solid rgba(14,18,32,.12);
  background: linear-gradient(180deg, rgba(14,18,32,.06), rgba(14,18,32,.03));
  overflow:hidden;
}
.thumb iframe{width:100%; height:100%; border:0}

.form{display:grid; gap:12px; grid-template-columns:1fr 1fr}
.field label{display:block; font-size:12px; color:var(--muted); margin-bottom:6px; font-weight:900}
.input, .select, .textarea{
  width:100%;
  border-radius:16px;
  border:1px solid rgba(14,18,32,.12);
  background:rgba(255,255,255,.95);
  color:var(--text);
  padding:12px 14px;
  outline:none;
}
.textarea{min-height:130px; resize:vertical}
.input:focus, .select:focus, .textarea:focus{
  border-color: rgba(76,69,215,.35);
  box-shadow: 0 0 0 4px rgba(76,69,215,.12);
}

.msg{
  border-radius:18px;
  border:1px solid rgba(14,18,32,.12);
  padding:14px;
  margin-top:14px;
  display:none;
}
.msg.show{display:block}
.msg.ok{border-color: rgba(16,185,129,.35); background: rgba(16,185,129,.12); color: rgba(6,95,70,.95)}
.msg.err{border-color: rgba(239,68,68,.35); background: rgba(239,68,68,.12); color: rgba(153,27,27,.95)}

.gallery{display:grid; gap:10px; grid-template-columns: repeat(4, minmax(0,1fr))}
.gItem{
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(14,18,32,.10);
  background: rgba(255,255,255,.92);
  box-shadow: var(--shadow2);
  position:relative;
  cursor:pointer;
  transition: transform .18s ease, box-shadow .18s ease;
}
.gItem:hover{transform: translateY(-2px)}
.gItem img{width:100%; height:100%; display:block; object-fit:cover; aspect-ratio: 4/3}
.gItem:after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, transparent, rgba(14,18,32,.12));
  opacity:0; transition:.18s ease;
}
.gItem:hover:after{opacity:1}


/* =========================
   ROLAM ÉS MUNKÁM SZEKCIO
   ========================= */
.about{
  display:grid;
  gap:14px;
  align-items:start;

  grid-template-columns: 1.15fr .85fr;
  grid-template-areas:
    "aboutCard  aboutPhoto"
    "aboutCards aboutPhoto";
}

.aboutCard{
  grid-area: aboutCard;
  border:1px solid var(--border);
  background:rgba(255,255,255,.88);
  border-radius: var(--radius2);
  padding:22px;
  box-shadow: var(--shadow);
}

.aboutCards{
  grid-area: aboutCards;
  display:grid;
  gap:14px;
}

.aboutTop{display:flex; gap:12px; align-items:center}

.aboutAvatar{
  width:56px; height:56px;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(14,18,32,.10);
  background:rgba(14,18,32,.04);
  flex:0 0 auto;
}
.aboutAvatar img{width:100%; height:100%; object-fit:cover; display:block}

.aboutList{
  margin:14px 0 0;
  padding-left: 18px;
  color: var(--muted);
  line-height: 1.75;
  font-size:14px;
}
.aboutList li{ margin: 8px 0; }

.aboutBtns{margin-top:16px; display:flex; gap:10px; flex-wrap:wrap}

.aboutPhoto{
  grid-area: aboutPhoto;
  position:relative;
  border-radius: var(--radius2);
  overflow:hidden;
  border:1px solid rgba(14,18,32,.10);
  box-shadow: var(--shadow2);
  background: rgba(255,255,255,.70);

  align-self: stretch;
  min-height: 520px;
}
.aboutPhoto img{
  width:100%; height:100%;
  display:block;
  object-fit:cover;
  object-position: 50% 35%;
  transform: scale(1.02);
}
.aboutPhotoOverlay{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.05) 40%, rgba(0,0,0,.55) 100%),
    radial-gradient(900px 420px at 30% 20%, rgba(0,0,0,.18), rgba(0,0,0,0) 60%);
  pointer-events:none;
}
.aboutPhotoCap{
  position:absolute;
  left:16px; right:16px; bottom:14px;
  color:#fff;
  text-shadow: 0 8px 24px rgba(0,0,0,.55);
}
.aboutPhotoTitle{font-weight:1000; letter-spacing:-.02em; font-size:16px}
.aboutPhotoSub{margin-top:4px; font-size:12px; opacity:.9; letter-spacing:.02em}

/* =========================
   FOOTER
   ========================= */
.footer{
  flex: 0 0 auto;
  position:relative;
  width:100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  margin-top: 64px;
  padding: 56px 0 40px;

  background:
    radial-gradient(1200px 520px at 15% 10%, rgba(76,69,215,.14), transparent 60%),
    radial-gradient(900px 420px at 85% 0%, rgba(255,168,110,.08), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.00));
  border-top: 1px solid rgba(255,255,255,.10);

  color: rgba(255,255,255,.86);
}

.footer::before{
  content:"";
  position:absolute;
  left:0; right:0;
  top:-90px;
  height:90px;
  pointer-events:none;
  background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.24));
}

.footer .panel{
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
}

.footer .wrap{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 18px;
  flex: 0 0 auto;
}

.footer .footerGrid{
  display:grid;
  grid-template-columns: 1.35fr 1fr .95fr;
  gap: 44px;
  align-items:start;
}

.footer .footerLinks{display:flex; gap:14px; flex-wrap:wrap}
.footer .footerLinks a{
  color: rgba(255,255,255,.78);
  text-decoration:none;
  font-weight:600;
}

.footer .footerLinksAlso a{
  color: rgba(255,255,255,.78);
  text-decoration:none;
  font-weight:700;
  font-size: 12px;
}


.footer .footerLinks a:hover{color:#fff}

.footer .tiny{ color: rgba(255,255,255,.66); }
.footer strong{ color: rgba(255,255,255,.92); }

.footer .btn,
.footer a.btn{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.18);
  color:#fff;
  box-shadow: 0 10px 26px rgba(0,0,0,.22);
}
.footer .btn:hover{ background: rgba(255,255,255,.14); }
.footer .btn.primary,
.footer a.btn.primary{
  background: rgba(255,255,255,.92);
  color:#0e1220;
  border-color: rgba(255,255,255,.22);
}
.footer .btn.ghost{
  background: transparent;
  color:#fff;
  border-color: rgba(255,255,255,.16);
  box-shadow:none;
}

.footer .hr{
  height: 1px;
  margin: 22px 0 16px;
  background: linear-gradient(90deg,
    transparent,
    rgba(255,255,255,.18),
    transparent
  );
  opacity: 1;
}

/* =========================
   MOBILOS NÉZET
   ========================= */
@media (max-width: 980px){
  .gallery{grid-template-columns: repeat(3, minmax(0,1fr))}
  .refsGrid{grid-template-columns:1fr}

  .footer .footerGrid{
    grid-template-columns: 1fr;
    gap: 22px;
  }
}

@media (max-width: 880px){
  .grid3{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .priceGrid{grid-template-columns:1fr}
  .form{grid-template-columns:1fr}
  .gallery{grid-template-columns: repeat(2, minmax(0,1fr))}

  .section{ margin-top: var(--section-gap-m); }
  .hero.heroMedia + .section{ margin-top: 22px; }

  .section + .section::before{
    top: calc(var(--section-gap-m) * -0.58);
    background: linear-gradient(90deg,
      transparent,
      rgba(255,255,255,.12),
      rgba(76,69,215,.22),
      rgba(255,255,255,.12),
      transparent
    );
  }

  .about{
    grid-template-columns: 1fr;
    grid-template-areas:
      "aboutCard"
      "aboutCards"
      "aboutPhoto";
    gap: 16px;
  }
  .aboutCards{ gap: 12px; }
  .aboutPhoto{ min-height: 420px; }
}

@media (max-width: 760px){
  :root{
    --header-h: 92px;
    --hero-min-h: 640px;
    --hero-fade-h: 200px;
  }

  .header{
    padding-left: 16px;
    padding-right: 16px;
  }

  .nav{ gap: 8px; }
  .nav a{ padding: 9px 10px; font-size: 13px; }

  .hero.heroMedia{
    padding-top: calc(var(--header-h) + 34px);
    padding-bottom: 70px;
  }

  .heroInner{
    padding: 34px 18px;
    border-radius: 20px;
  }

  .hero.heroMedia .lead{ -webkit-line-clamp: 5; }

  .brandLogo img{ height: 28px; }
}

@media (prefers-reduced-motion: reduce){
  /* mozgás csökkentése video esetén, most nincs */
}


.footer .kapcsolatLink{
  color: rgba(255,255,255,.92);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.22);
}
.footer .kapcsolatLink:hover{
  color:#fff;
  border-bottom-color: rgba(255,255,255,.45);
}

/* adatvédelmi rész */
.consent{
  display:flex;
  gap:10px;
  align-items:flex-start;
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(14,18,32,.12);
  border-radius: 16px;
  background: rgba(255,255,255,.86);
  color: rgba(14,18,32,.80);
  line-height: 1.6;
  font-size: 13px;
}
.consent input{
  margin-top: 3px;
  transform: scale(1.05);
}
.consent a{
  color: inherit;
  font-weight: 900;
  text-decoration: underline;
}


/* =========================
   ref és wrap kártyák
   ========================= */

.wrap .card{
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.84));
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 14px 40px rgba(0,0,0,.16);
}

.wrap .card::before{
  content:"";
  position:absolute; inset:-1px;
  pointer-events:none;
  opacity:.95;
  background:
    radial-gradient(700px 260px at 12% 0%, rgba(76,69,215,.10), transparent 60%),
    radial-gradient(700px 260px at 88% 0%, rgba(255,168,110,.08), transparent 60%);
}

.wrap .card::after{
  position:absolute;
  left:16px; right:16px; top:12px;
  height:2px;
  content: none !important;
  display: none !important;
  border-radius:999px;
  background: linear-gradient(90deg,
    transparent,
    rgba(76,69,215,.55),
    rgba(255,168,110,.35),
    transparent
  );
  opacity:.75;
}

.wrap .card > *{ position: relative; z-index: 1; }

.wrap .card:hover{
  transform: translateY(-3px);
  box-shadow: 0 22px 55px rgba(0,0,0,.18);
}

/* ---------- referenciában a változó méretek ---------- */
section.section.grid3 > .card:nth-child(2)::before{
  background: radial-gradient(760px 280px at 10% 0%, rgba(76,69,215,.16), transparent 62%);
}
section.section.grid3 > .card:nth-child(2)::after{
  background: linear-gradient(90deg, transparent, rgba(76,69,215,.75), transparent);
}

section.section.grid3 > .card:nth-child(3)::before{
  background: radial-gradient(760px 280px at 90% 0%, rgba(255,168,110,.16), transparent 62%);
}
section.section.grid3 > .card:nth-child(3)::after{
  background: linear-gradient(90deg, transparent, rgba(255,168,110,.75), transparent);
}

section.section.grid3 > .card:nth-child(4)::before{
  background: radial-gradient(760px 280px at 50% 0%, rgba(0,0,0,.06), transparent 65%);
}
section.section.grid3 > .card:nth-child(4)::after{
  background: linear-gradient(90deg, transparent, rgba(0,0,0,.18), transparent);
}

section.panel .grid3 > .card:nth-child(1)::before{
  background: radial-gradient(760px 280px at 12% 0%, rgba(76,69,215,.14), transparent 62%);
}
section.panel .grid3 > .card:nth-child(2)::before{
  background: radial-gradient(760px 280px at 88% 0%, rgba(255,168,110,.14), transparent 62%);
}
section.panel .grid3 > .card:nth-child(3)::before{
  background: radial-gradient(760px 280px at 50% 0%, rgba(0,0,0,.06), transparent 65%);
}

.aboutCards .card:nth-child(1)::before{
  background: radial-gradient(760px 280px at 10% 0%, rgba(76,69,215,.14), transparent 62%);
}
.aboutCards .card:nth-child(2)::before{
  background: radial-gradient(760px 280px at 90% 0%, rgba(255,168,110,.14), transparent 62%);
}


html { scroll-behavior: smooth; }
#video, #foto, #extra { scroll-margin-top: 90px; }

.panelWideSection{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 0 18px;
}

.panelWideCard{
  max-width: 1320px;
  margin: 0 auto;
}


.panelWideCard .refsGrid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(520px, 1fr));
  gap: 16px;
}

@media (max-width: 980px){
  .panelWideCard{ max-width: 100%; }
  .panelWideCard .refsGrid{ grid-template-columns: 1fr; }
}

.panelWideCard .gallery{
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
}


/* mobil menu */

.navToggle{ display:none; }
.mobileCta{ display:none; }

@media (max-width: 760px){

  .mobileCta{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    color:#fff;
    text-decoration:none;
    font-size:13px;
    font-weight:1000;
    padding:10px 12px;
    border-radius:14px;

    background: rgba(76,69,215,.34);
    border: 1px solid rgba(76,69,215,.82);
    box-shadow: 0 14px 34px rgba(76,69,215,.20);
  }
  .mobileCta:hover{
    background: rgba(76,69,215,.44);
    border-color: rgba(76,69,215,.95);
  }
  .mobileCta.active{
    background: rgba(76,69,215,.72);
    border-color: rgba(76,69,215,.95);
  }

  .navToggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    width:auto;
    height:48px;
    padding: 0 14px;
    gap:8px;

    border-radius:16px;
    border:1px solid rgba(255,255,255,.26);
    background: rgba(255,255,255,.14);
    box-shadow: 0 18px 55px rgba(0,0,0,.50);

    cursor:pointer;
    flex: 0 0 auto;
  }

  .navToggle .bars{
    display:flex;
    flex-direction:column;
    gap:4px;
  }

  .navToggle .bars i{
    display:block;
    width:18px;
    height:2px;
    background: rgba(255,255,255,.95);
    border-radius:999px;
  }

  .navToggle .label{
    font-size:12px;
    font-weight:900;
    letter-spacing:.02em;
    color: rgba(255,255,255,.92);
    white-space: nowrap;
  }

  .header.navOpen::after{
    content:"";
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.65);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 0;
    pointer-events: none; 
  }

  .nav{
    position: absolute;
    top: calc(100% + 10px);
    left: 12px;
    right: 12px;

    display: none;
    flex-direction: column;
    gap: 8px;

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

    background: rgba(6,7,9,.98);
    border: 1px solid rgba(255,255,255,.16);
    box-shadow: 0 34px 110px rgba(0,0,0,.78);

    z-index: 2; 
  }

  .header.navOpen .nav{ display:flex; }

  .nav a{
    width: 100%;
    text-align: center;
    justify-content: center;

    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
  }
  .nav a:hover{
    background: rgba(255,255,255,.10);
    border-color: rgba(255,255,255,.16);
  }
  .nav a.navCta{ display:none; }
}


@media (max-width: 780px){
  .hero.heroMedia,
  .footer,
  .panelWideSection{
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

html, body{
  overflow-x: hidden;
}

@supports (overflow: clip){
  html, body{ overflow-x: clip; }
}