/* ============================================================
   GGX Stúdió — egyoldalas statikus weboldal
   Bal oldal: Grafika (Giller Mariann)  |  Jobb oldal: Üzletviteli tanácsadás (Giller Tamás)
   ============================================================ */

:root{
  --left-bg: #0b2545;
  --left-bg-2: #123a6b;
  --left-fg: #eef3fa;
  --left-fg-muted: #9fb3cc;
  --left-accent: #34d399;
  --left-font-display: "Fraunces", serif;

  --right-bg: #f3f4f7;
  --right-bg-2: #ffffff;
  --right-fg: #16213a;
  --right-fg-muted: #5b6479;
  --right-accent: #b9903f;
  --right-font-display: "Fraunces", serif;

  --font-body: "Inter", system-ui, -apple-system, sans-serif;
  --seam-width: 2px;
  --container-pad: clamp(24px, 5vw, 72px);
}

*{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; }

body{
  font-family: var(--font-body);
  color:#111;
  background:#fff;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }

a{ color:inherit; text-decoration:none; }

.eyebrow{
  font-size:.78rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:600;
  opacity:.75;
  margin-bottom:14px;
  display:inline-block;
}

/* ---------- Center seam ----------
   Csak a hero + rólam szekciók (.seam-wrap) magasságában fut végig,
   a referencia-galéria tetejénél megszakad, hogy ne zavarja a galériát. */
.seam-wrap{ position:relative; }
.seam{
  position:absolute;
  top:0; bottom:0; left:50%;
  width:var(--seam-width);
  transform:translateX(-50%);
  background:linear-gradient(180deg, var(--left-accent), var(--right-accent));
  opacity:.55;
  z-index:5;
  pointer-events:none;
}

/* Sticky fejléc miatt a horgony-linkek ne takarják el a célszakasz tetejét */
[id]{ scroll-margin-top:96px; }

/* ---------- Header ---------- */
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  display:grid;
  grid-template-columns:1fr 1fr;
  height:76px;
}
.site-header .half{ height:100%; display:flex; align-items:center; }
.site-header .half.l{ background:var(--left-bg); justify-content:flex-start; padding-left:var(--container-pad); }
.site-header .half.r{ background:var(--right-bg-2); border-bottom:1px solid #e7e8ec; justify-content:flex-end; padding-right:var(--container-pad); }

.header-label{
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  white-space:nowrap;
}
.site-header .half.l .header-label{ color:var(--left-fg); }
.site-header .half.r .header-label{ color:var(--right-fg); }

.brand{
  position:absolute;
  left:50%;
  top:14px;
  transform:translateX(-50%);
  z-index:51;
  background:#0f1420;
  color:#fff;
  padding:10px 22px;
  border-radius:999px;
  text-align:center;
  box-shadow:0 6px 20px rgba(0,0,0,.28);
  white-space:nowrap;
}
.brand strong{
  font-family:var(--left-font-display);
  font-size:1.05rem;
  letter-spacing:.06em;
}

/* ---------- Split section scaffolding ---------- */
.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  position:relative;
}
.split > .l, .split > .r{
  padding:88px var(--container-pad);
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}
.split > .l{
  background:var(--left-bg);
  color:var(--left-fg);
}
.split > .r{
  background:var(--right-bg);
  color:var(--right-fg);
}

.split.tight > .l, .split.tight > .r{ padding-top:64px; padding-bottom:64px; }

h1, h2, h3{ font-weight:600; line-height:1.08; }

.split .l h1, .split .l h2, .split .l h3{ font-family:var(--left-font-display); }
.split .r h1, .split .r h2, .split .r h3{ font-family:var(--right-font-display); }

.split .l .eyebrow{ color:var(--left-accent); }
.split .r .eyebrow{ color:var(--right-accent); }

/* ---------- Hero ---------- */
.hero h1{
  font-size:clamp(2rem, 3.4vw, 3rem);
  margin-bottom:20px;
}
.hero p{
  font-size:1.02rem;
  line-height:1.6;
  max-width:46ch;
  margin-bottom:28px;
}
.split .l p{ color:var(--left-fg-muted); }
.split .r p{ color:var(--right-fg-muted); }

.portrait{
  width:180px;
  height:180px;
  border-radius:50%;
  overflow:hidden;
  margin-bottom:28px;
  border:3px solid rgba(255,255,255,.08);
}
.split .r .portrait{ border-color:rgba(22,33,58,.08); }
.portrait img{ width:100%; height:100%; object-fit:cover; }

.portrait-fallback{
  display:none;
  width:100%;
  height:100%;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg, var(--right-fg), #2c3e63);
  color:#fff;
  font-family:var(--right-font-display);
  font-size:2.4rem;
  letter-spacing:.02em;
}

.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:13px 26px;
  border-radius:999px;
  font-size:.86rem;
  font-weight:600;
  letter-spacing:.02em;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .15s ease, opacity .15s ease;
  width:fit-content;
}
.btn:hover{ transform:translateY(-2px); }

.btn-group{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.btn-l{ background:var(--left-accent); color:#062b1c; }
.btn-r{ background:var(--right-fg); color:#fff; }
.btn-outline-l{ background:transparent; border-color:rgba(244,242,238,.35); color:var(--left-fg); }
.btn-outline-r{ background:transparent; border-color:rgba(22,33,58,.25); color:var(--right-fg); }

/* ---------- Chips / tags ---------- */
.chip-row{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.chip{
  font-size:.76rem;
  font-weight:600;
  padding:7px 14px;
  border-radius:999px;
}
.split .l .chip{ background:rgba(255,255,255,.08); color:var(--left-fg); }
.split .r .chip{ background:#fff; color:var(--right-fg); box-shadow:0 1px 4px rgba(22,33,58,.12); }

/* ---------- About / bio ---------- */
.bio-block h2{ font-size:clamp(1.5rem,2.4vw,2rem); margin-bottom:18px; }
.bio-block p{ font-size:.98rem; line-height:1.7; max-width:50ch; margin-bottom:10px; }

.mini-label{
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  margin:26px 0 10px;
  opacity:.6;
}

/* ---------- Timeline (right / Tamás) ---------- */
.timeline{ margin-top:6px; }
.timeline-item{
  position:relative;
  padding:0 0 22px 26px;
  border-left:2px solid rgba(22,33,58,.14);
}
.timeline-item:last-child{ border-color:transparent; padding-bottom:0; }
.timeline-item::before{
  content:"";
  position:absolute;
  left:-6px; top:2px;
  width:10px; height:10px;
  border-radius:50%;
  background:var(--right-accent);
}
.timeline-item .yr{
  font-size:.74rem;
  font-weight:700;
  letter-spacing:.06em;
  color:var(--right-accent);
  display:block;
  margin-bottom:3px;
}
.timeline-item h4{ font-size:1rem; font-weight:600; margin-bottom:3px; }
.timeline-item p{ font-size:.88rem; color:var(--right-fg-muted); line-height:1.55; max-width:48ch; }

/* ---------- Work list (Mariann jobs) ---------- */
.job-list{ margin-top:6px; }
.job-item{ padding:12px 0; border-bottom:1px solid rgba(244,242,238,.1); }
.job-item:last-child{ border-bottom:none; }
.job-item .yr{
  font-size:.72rem;
  letter-spacing:.06em;
  color:var(--left-accent);
  font-weight:700;
  display:block;
  margin-bottom:2px;
}
.job-item h4{ font-size:.96rem; font-weight:600; }
.job-item span.role{ font-size:.84rem; color:var(--left-fg-muted); }

/* ---------- Referenciák / Szolgáltatások — önálló, teljes szélességű szekciók ---------- */
.gallery-section{
  background:var(--left-bg);
  color:var(--left-fg);
  padding:88px var(--container-pad);
}
.gallery-section .eyebrow{ color:var(--left-accent); }
.gallery-section h2{
  font-family:var(--left-font-display);
  font-size:clamp(1.6rem,2.6vw,2.2rem);
  margin-bottom:10px;
}
.gallery-section .section-inner > p{
  color:var(--left-fg-muted);
  max-width:65ch;
  margin-bottom:32px;
}

.services-section{
  background:var(--right-bg);
  color:var(--right-fg);
  padding:88px var(--container-pad);
}
.services-section .eyebrow{ color:var(--right-accent); }
.services-section h2{
  font-family:var(--right-font-display);
  font-size:clamp(1.6rem,2.6vw,2.2rem);
  margin-bottom:30px;
}
.services-section .section-inner{ max-width:1160px; margin:0 auto; }

/* ---------- Services cards ---------- */
.service-grid-full{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
  gap:18px;
}
.service-card{
  background:var(--right-bg-2);
  border-radius:16px;
  padding:20px 22px;
  box-shadow:0 1px 3px rgba(22,33,58,.06);
  border:1px solid #e9eaef;
}
.service-card .num{
  font-family:var(--right-font-display);
  font-size:.82rem;
  color:var(--right-accent);
  font-weight:700;
  margin-bottom:6px;
  display:block;
}
.service-card h4{ font-size:1rem; margin-bottom:6px; }
.service-card p{ font-size:.86rem; color:var(--right-fg-muted); line-height:1.55; }

/* ---------- Gallery marquee (left) ---------- */
.gallery-wrap{ margin-top:8px; }
.marquee{
  overflow:hidden;
  position:relative;
  width:100%;
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track{
  display:flex;
  gap:14px;
  width:max-content;
  animation-name:scroll-left;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
  /* animation-duration-t JS állítja be, hogy a két sáv egyforma sebességgel (px/mp) pörögjön */
}
.marquee.reverse .marquee-track{ animation-name:scroll-right; }
.marquee-track img{
  height:220px;
  width:auto;
  border-radius:10px;
  flex:0 0 auto;
  object-fit:cover;
}
.marquee + .marquee{ margin-top:14px; }
.marquee:hover .marquee-track{ animation-play-state:paused; }

@keyframes scroll-left{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
@keyframes scroll-right{
  from{ transform:translateX(-50%); }
  to{ transform:translateX(0); }
}

/* ---------- Contact / quote request (full width, unifies both sides) ---------- */
.contact{
  background:#0f1420;
  color:#fff;
  padding:96px var(--container-pad);
}
.contact-inner{ max-width:920px; margin:0 auto; text-align:center; }
.contact-inner .eyebrow{ color:var(--left-accent); }
.contact h2{
  font-family:var(--left-font-display);
  font-size:clamp(1.8rem,3.4vw,2.6rem);
  margin-bottom:16px;
}
.contact > .contact-inner > p{
  color:#c6c9d6;
  max-width:56ch;
  margin:0 auto 40px;
  line-height:1.6;
}

.service-toggle{
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
  margin-bottom:26px;
}
.service-toggle input{ display:none; }
.service-toggle label{
  padding:11px 22px;
  border-radius:999px;
  border:1.5px solid rgba(255,255,255,.25);
  font-size:.86rem;
  font-weight:600;
  cursor:pointer;
  transition:all .15s ease;
  color:#e9eaf0;
}
.service-toggle input:checked + label{
  background:var(--left-accent);
  border-color:transparent;
  color:#12131a;
}

.contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  text-align:left;
  margin-top:8px;
}
.contact-card{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  border-radius:20px;
  padding:32px;
}
.contact-card h3{
  font-family:var(--right-font-display);
  font-size:1.2rem;
  color:#fff;
  margin-bottom:14px;
}
.contact-card > p{
  color:#c6c9d6;
  font-size:.92rem;
  line-height:1.6;
  margin-bottom:18px;
}

.contact-steps{
  list-style:none;
  counter-reset:step;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.contact-steps li{
  counter-increment:step;
  position:relative;
  padding-left:36px;
  font-size:.9rem;
  color:#e9eaf0;
  line-height:1.5;
}
.contact-steps li::before{
  content:counter(step);
  position:absolute;
  left:0; top:-2px;
  width:24px; height:24px;
  border-radius:50%;
  background:var(--left-accent);
  color:#12131a;
  font-size:.78rem;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
}

.checklist{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:22px;
}
.checklist li{
  position:relative;
  padding-left:24px;
  font-size:.9rem;
  color:#e9eaf0;
}
.checklist li::before{
  content:"✓";
  position:absolute;
  left:0; top:0;
  color:var(--right-accent);
  font-weight:700;
}
.checklist li strong{ color:#fff; }

.contact-card .service-toggle{ justify-content:flex-start; margin-bottom:22px; }
.contact-card .btn-submit{ width:100%; justify-content:center; }
.contact-card .form-hint{ display:block; margin-top:12px; }

.btn-submit{
  background:var(--left-accent);
  color:#12131a;
  border:none;
  padding:15px 32px;
  border-radius:999px;
  font-weight:700;
  font-size:.92rem;
  cursor:pointer;
}
.btn-submit:hover{ opacity:.92; }
.form-hint{ font-size:.78rem; color:#8a8fa3; }

.direct-email{
  margin-top:36px;
  font-size:.9rem;
  color:#c6c9d6;
}
.direct-email a{ color:#fff; font-weight:600; border-bottom:1px solid rgba(255,255,255,.4); }

/* ---------- Footer ---------- */
footer{
  background:#0a0d14;
  color:#8a8fa3;
  font-size:.82rem;
}
.footer-split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  padding:48px var(--container-pad) 32px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.footer-col{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  text-align:left;
}
.footer-col.right{
  align-items:flex-end;
  text-align:right;
}
/* A kerek (pill) gomb íve miatt optikailag beljebb tűnik, mint a fölötte lévő szöveg —
   pár px negatív margóval korrigáljuk, hogy a szemnek is pontosan egy vonalba essen. */
.footer-col .linkedin-btn{ align-self:flex-start; margin-left:-4px; }
.footer-col.right .linkedin-btn{ align-self:flex-end; margin-right:-4px; }
.footer-col strong{ color:#fff; font-size:1rem; margin-bottom:2px; }
.footer-col span{ color:#8a8fa3; margin-bottom:16px; }
.linkedin-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 20px;
  border-radius:999px;
  border:1.5px solid rgba(255,255,255,.25);
  color:#fff;
  font-size:.8rem;
  font-weight:600;
}
.linkedin-btn:hover{ background:rgba(255,255,255,.08); }

.footer-bottom{
  padding:20px var(--container-pad);
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
}
.footer-bottom strong{ color:#fff; }
footer a:hover{ color:#fff; }

/* ---------- Responsive ---------- */
@media (max-width: 900px){
  .seam{ display:none; }
  .split, .contact-grid, .footer-split{ grid-template-columns:1fr; }
  .site-header{ grid-template-columns:1fr; height:auto; }
  .site-header .half.r{ display:none; }
  .header-label{ display:none; }
  .brand{ position:static; transform:none; margin:16px auto; }
  .split > .l, .split > .r{ padding:56px var(--container-pad); }
  .gallery-section, .services-section{ padding:56px var(--container-pad); }
  .contact{ padding:64px var(--container-pad); }
  .footer-col, .footer-col.right{ align-items:center; text-align:center; }
  .footer-col .linkedin-btn, .footer-col.right .linkedin-btn{ align-self:center; }
  .footer-bottom{ flex-direction:column; text-align:center; }
}