:root {
  --black: #120e0b; --dark: #1e1611; --brown: #302219;
  --brown-lighter: #453023; --tan: #aa805b; --beige: #e3c49b;
  --cream: #f8f0e3; --muted: #d9c6b1; --line: rgba(227,196,155,.48);
  --radius: 20px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: Arial, Helvetica, sans-serif; color: var(--cream); background: var(--black); }
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.skip-link { position:absolute; top:-80px; left:10px; padding:12px; background:var(--cream); color:var(--black); z-index:100; }
.skip-link:focus { top:10px; }
.page-shell { max-width: 1600px; margin: auto; overflow: clip; background: radial-gradient(ellipse at 45% 90%,#38251b 0%,transparent 45%),#120e0b; min-height:100vh; }
.topbar { min-height:77px; display:flex; align-items:center; justify-content:space-between; gap:28px; padding: 13px clamp(22px,3.8vw,58px); background:rgba(12,10,9,.94); position:relative; z-index:10; }
.brand { font-family: Georgia, 'Times New Roman',serif; font-style: italic; font-size: 39px; letter-spacing:-2px; white-space:nowrap; text-decoration:none; line-height:1; }
.brand span:first-child { color: var(--cream); }
.brand-heart { color:var(--beige); font-size:34px; margin-left:8px; }
.nav { display:flex; gap:25px; align-items:center; }
.nav a { text-decoration:none; font-size:13px; padding:10px 14px; border-radius:30px; transition:background .2s; white-space:nowrap; }
.nav a:hover { background: #3a2a21; }
.nav .nav-active { background:var(--beige); color:#1b120c; font-weight:bold; }
.top-socials { display:flex; gap:18px; align-items:center; }
.top-socials a { color:var(--beige); text-decoration:none; font-size:19px; font-weight:bold; }
.menu-toggle { display:none; }
.hero { min-height:304px; display:grid; grid-template-columns:52% 48%; position:relative; isolation:isolate; background:radial-gradient(ellipse at 74% 45%,#3d2d23 0%,#1c1511 45%,#17110e 100%); overflow:hidden; }
.hero-photo { background-image:linear-gradient(to right, transparent 75%, #211711 100%), url('assets/hero-demo.webp'); background-size:cover; background-position:center 45%; min-height:304px; }
.hero-content { padding:48px 36px 35px; position:relative; z-index:1; }
.eyebrow { font-size:11px; letter-spacing:3px; color:var(--beige); margin:4px 0 9px; font-weight:bold; }
.hero h1 { font-size:clamp(54px,6.3vw,91px); margin:0; line-height:1.04; letter-spacing:-3px; font-weight:800; color:var(--cream); position:relative; white-space:nowrap; }
.hero h1 span:first-child { color:var(--beige); }
.crown { display:inline-block; position:relative; top:-35px; margin-left:8px; font-size:46px; transform:rotate(15deg); color:var(--beige); }
.hero-subtitle { margin:10px 0; font-size:clamp(16px,1.6vw,23px); }
.hero-subtitle span { color:var(--beige); }
.hero-line { width:125px; height:4px; background:var(--beige); transform:rotate(-5deg); border-radius:10px; margin:24px 0 16px 80px; }
.hero-note { max-width:430px; font-size:13px; color:var(--muted); line-height:1.5; }
.otter-doodle { position:absolute; right:-7px; top:115px; font-size:45px; color:#b89a7a; opacity:.31; transform:rotate(-10deg); border:4px solid currentColor; border-radius:52% 48% 40% 46%; width:180px; height:150px; text-align:center; z-index:0; }
.otter-doodle span { display:block; font-size:34px; padding-top:19px; }
.content-grid { display:grid; grid-template-columns:minmax(0, .8fr) minmax(0,1.2fr); gap:17px; padding:0 clamp(18px,2.2vw,34px) 28px; margin-top:-3px; position:relative; z-index:2; }
.content-panel { background:linear-gradient(125deg,rgba(44,31,23,.96),rgba(20,16,13,.94)); border:1.5px solid var(--line); border-radius:var(--radius); padding:15px 15px 19px; box-shadow:inset 0 0 32px rgba(200,150,104,.07),0 9px 25px rgba(0,0,0,.23); }
.panel-heading { display:flex; align-items:flex-start; gap:14px; padding:2px 10px 21px; }
.heading-icon { font-size:32px; color:var(--beige); width:36px; flex-shrink:0; text-align:center; }
.panel-heading h2 { font-size:clamp(21px,2.1vw,29px); margin:0 0 4px; letter-spacing:-.7px; }
.panel-heading p { font-size:13px; color:var(--muted); margin:0; line-height:1.5; }
.panel-heading p span { color:var(--beige); }
.social-list, .partner-list { display:grid; gap:9px; }
.social-item { min-height:85px; border:1px solid rgba(227,196,155,.18); border-radius:15px; padding:12px 14px; display:flex; align-items:center; gap:14px; background:linear-gradient(90deg,#38271c,#1e1814); }
.social-icon { flex:0 0 56px; height:56px; background:linear-gradient(130deg,#8e6542,#4c321f); border-radius:13px; display:grid; place-items:center; color:var(--cream); }
.icon-tiktok { background:#130e0b; }
.icon-youtube { background:#6b4629; }
.social-info { flex:1; min-width:0; }
.social-info h3 { font-size:17px; margin:0 0 5px; }
.social-info p { font-size:13px; color:var(--muted); margin:0; overflow-wrap:anywhere; }
.action-button { flex-shrink:0; text-decoration:none; background:linear-gradient(#f5debd,#dab78b); color:#20150d; border:1px solid #f8e5ca; border-radius:8px; padding:12px 13px; font-size:12px; font-weight:700; text-align:center; transition:transform .18s,filter .18s; }
.action-button:hover { filter:brightness(1.07); transform:translateY(-2px); }
.action-button.disabled-link { filter:grayscale(.6); opacity:.55; cursor:not-allowed; }
.partner-item { display:grid; grid-template-columns:minmax(150px,1.05fr) minmax(150px,1.35fr) minmax(95px,.6fr) auto; align-items:center; gap:12px; min-height:72px; padding:8px 11px; background:linear-gradient(100deg,#2b1e16,#38271d 60%,#211812); border:1px solid var(--line); border-radius:11px; }
.partner-logo { display:flex; align-items:center; gap:9px; min-width:0; border-right:1px solid rgba(227,196,155,.35); padding-right:8px; }
.partner-mark { flex-shrink:0; display:grid; place-items:center; width:36px; height:36px; font-size:24px; color:var(--beige); font-family:Georgia,serif; font-weight:700; }
.partner-wordmark { font-weight:800; font-size:clamp(13px,1.22vw,19px); line-height:1.1; overflow-wrap:anywhere; }
.partner-detail h3 { margin:0 0 3px; font-size:15px; }
.partner-detail p { margin:0; font-size:11px; line-height:1.35; color:var(--muted); }
.partner-domain { font-size:11px; font-weight:700; color:var(--cream); white-space:nowrap; text-decoration:none; }
.partner-domain:hover { text-decoration:underline; }
.partner-button { padding:10px 12px; white-space:nowrap; }
.footer { display:flex; justify-content:space-between; padding:12px 36px 28px; font-size:12px; color:var(--muted); }
@media(max-width:1180px) {
  .nav { gap:6px; }
  .top-socials { display:none; }
  .partner-item { grid-template-columns:minmax(115px,.8fr) minmax(150px,1.2fr) auto; }
  .partner-domain { display:none; }
  .social-item { gap:10px; padding:10px; }
  .social-icon { flex-basis:46px;height:46px; }
  .action-button { padding:11px 9px; }
}
@media(max-width:830px) {
  .topbar { min-height:70px; }
  .menu-toggle { display:flex; width:43px; height:39px; flex-direction:column; align-items:center; justify-content:center; gap:5px; background:transparent; border:1px solid var(--line); border-radius:8px; cursor:pointer; }
  .menu-toggle span { width:20px; height:2px; background:var(--beige); }
  .nav { display:none; position:absolute; top:100%; left:0; right:0; background:#1c1511; padding:14px 22px; flex-direction:column; align-items:stretch; box-shadow:0 16px 20px #0005; }
  .nav.nav-open { display:flex; }
  .hero { grid-template-columns:1fr; }
  .hero-photo { min-height:260px; background-position:center 38%; }
  .hero-content { padding:20px 25px 35px; }
  .hero h1 { font-size:clamp(52px,11vw,79px); }
  .crown { top:-20px; font-size:33px; }
  .otter-doodle { top:auto; bottom:20px; right:8px; width:120px; height:100px; font-size:23px; }
  .otter-doodle span { font-size:20px; padding-top:9px; }
  .content-grid { grid-template-columns:1fr; padding:12px 16px 24px; }
  .partner-item { grid-template-columns:minmax(135px,.9fr) minmax(160px,1.2fr) auto; }
}
@media(max-width:560px) {
  .brand { font-size:32px; }
  .hero-photo { min-height:195px; }
  .hero h1 { font-size:52px; white-space:normal; }
  .hero-content { padding:20px 18px 27px; }
  .hero-note { max-width:280px; }
  .otter-doodle { opacity:.16; }
  .content-panel { padding:12px 10px; }
  .panel-heading { padding:4px 4px 16px; gap:9px; }
  .panel-heading h2 { font-size:22px; }
  .social-item { min-height:70px; }
  .social-info h3 { font-size:15px; }
  .social-info p { font-size:11px; }
  .social-icon { flex-basis:43px;height:43px; }
  .social-icon svg { width:26px; height:26px; }
  .social-item .action-button { max-width:116px; font-size:10px; padding:9px 7px; }
  .partner-item { grid-template-columns:minmax(115px,.8fr) minmax(145px,1.2fr); gap:7px; padding:10px; }
  .partner-mark { width:23px; font-size:19px; }
  .partner-wordmark { font-size:13px; }
  .partner-logo { gap:4px; }
  .partner-detail h3 { font-size:13px; }
  .partner-detail p { font-size:10px; }
  .partner-button { grid-column:1/-1; justify-self:stretch; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition:none!important; } }

.partner-real-logo { width:100%; max-width:148px; max-height:53px; object-fit:contain; }


/* KAPCSOLATI PANEL */

.contact-section {
  padding: 0 clamp(18px, 2.2vw, 34px) 35px;
}

.contact-panel {
  background: linear-gradient(125deg, #302219, #17110e);
  border: 1.5px solid #aa805b;
  border-radius: 20px;
  padding: 30px;
  box-shadow: 0 9px 25px rgba(0, 0, 0, 0.23);
}

.contact-heading {
  display: flex;
  align-items: center;
  gap: 15px;
}

.contact-heading h2 {
  color: #f8f0e3;
  font-size: 28px;
  margin: 0;
}

.contact-icon {
  color: #e3c49b;
  font-size: 30px;
}

.contact-description {
  color: #d9c6b1;
  line-height: 1.7;
  max-width: 650px;
  margin: 15px 0 25px;
}

.contact-box {
  background: rgba(15, 10, 8, 0.5);
  border: 1px solid #6d503b;
  border-radius: 14px;
  padding: 22px;
}

.contact-box h3 {
  color: #f8f0e3;
  margin: 0 0 8px;
}

.contact-box p {
  color: #d9c6b1;
  font-size: 14px;
  margin-bottom: 20px;
}

.contact-button {
  display: inline-block;
  background: #e3c49b;
  color: #21160e;
  padding: 14px 25px;
  border-radius: 9px;
  font-weight: bold;
  text-decoration: none;
  transition: 0.2s ease;
}

.contact-button:hover {
  background: #f8f0e3;
  transform: translateY(-2px);
}

.contact-button.is-disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* Mobilos megjelenés */
@media (max-width: 600px) {
  .contact-panel {
    padding: 20px;
  }

  .contact-heading h2 {
    font-size: 23px;
  }

  .contact-button {
    display: block;
    text-align: center;
  }
}


/* 1. Kártyák animációja */
.social-card,
.partner-card,
.contact-panel {
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

.social-card:hover,
.partner-card:hover {
  transform: translateY(-5px);
  border-color: #e3c49b;
  box-shadow: 0 10px 28px rgba(227, 196, 155, 0.16);
}

/* 2. Kapcsolati panel */
.contact-panel:hover {
  border-color: #e3c49b;
  box-shadow: 0 0 28px rgba(227, 196, 155, 0.12);
}

/* 3. Gombok */
.contact-button,
.partner-card a,
.social-card a {
  transition:
    transform 0.25s ease,
    filter 0.25s ease;
}

.contact-button:hover,
.partner-card a:hover,
.social-card a:hover {
  filter: brightness(1.12);
}

/* 4. Bors Dia felirat */
#hero-title {
  animation: titleAppear 1s ease-out both;
}

@keyframes titleAppear {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 5. Görgetéskor beúszó panelek */
.reveal-ready {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}

.reveal-ready.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Akik csökkentett animációt kérnek */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }

  .reveal-ready {
    opacity: 1;
    transform: none;
  }
}