/* ============================================================
   Bodzer / Growth Partner
   Design system. Dark base, one committed look.
   Sections: 1 tokens, 2 reset, 3 type, 4 layout, 5 header,
   6 hero, 7 marquee, 8 about, 9 services, 10 quote, 11 refs,
   12 process, 13 why, 14 faq, 15 blog, 16 cta, 17 forms,
   18 footer, 19 utilities, 20 motion + responsive
   ============================================================ */

/* ---------- 1. tokens ---------- */
:root{
  --ink:#08090B;
  --ink-2:#0F1013;
  --ink-3:#16181C;
  --ink-4:#1E2126;
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.16);
  --fg:#F4F5F7;
  --fg-2:#B9BDC5;
  --fg-3:#8A8F98;
  --lime:#C9F24C;
  --lime-2:#A9D22F;
  --on-lime:#0B0D06;
  --ember:#FF6A3D;

  --ff-display:"Archivo Black",Impact,"Haettenschweiler","Arial Narrow Bold",sans-serif;
  --ff-body:"DM Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  --ff-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --shell:1320px;
  --gut:clamp(1.25rem,4vw,3.5rem);
  --rad:4px;
  --rad-lg:10px;
  --head-h:76px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- 2. reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--ink);color:var(--fg);
  font-family:var(--ff-body);font-size:clamp(1rem,.35vw + .93rem,1.0625rem);
  line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%;height:auto}
button{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px;border-radius:2px}
::selection{background:var(--lime);color:var(--on-lime)}

/* ---------- 3. type ---------- */
h1,h2,h3,h4{margin:0;font-weight:400;line-height:1}
.display{
  font-family:var(--ff-display);text-transform:uppercase;
  letter-spacing:-.02em;line-height:.86;
  font-size:clamp(2rem,7.9vw,6.4rem);
}
.display--md{font-size:clamp(1.85rem,5.1vw,4.15rem)}
.display--sm{font-size:clamp(1.6rem,3.4vw,2.7rem)}
.display .line{display:block}
.display .soft{
  font-family:var(--ff-body);font-weight:500;text-transform:none;
  letter-spacing:-.015em;color:var(--fg-2);
  font-size:.42em;line-height:1.1;display:block;margin-top:.5em;
}
.eyebrow{
  font-family:var(--ff-mono);font-size:.6875rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--lime);
  display:inline-flex;align-items:center;gap:.6rem;margin:0 0 1.25rem;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--lime);opacity:.7}
.lead{font-size:clamp(1.0625rem,.5vw + .95rem,1.25rem);color:var(--fg-2);max-width:56ch;margin:0}
.muted{color:var(--fg-3)}
.hl{color:var(--lime)}
.hl-e{color:var(--ember)}
.outline-text{
  color:transparent;-webkit-text-stroke:1.4px var(--line-2);
  paint-order:stroke fill;
}

/* ---------- 4. layout ---------- */
.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gut)}
.section{position:relative;padding-block:clamp(4.5rem,9vw,8.5rem)}
.section--tight{padding-block:clamp(3rem,6vw,5.5rem)}
.section-head{max-width:min(100%,66rem);margin-bottom:clamp(2.5rem,5vw,4rem)}
.section-head .lead{max-width:56ch}
.rule{height:1px;background:var(--line);border:0;margin:0}

/* faint vertical grid, the structural motif of the whole page */
.gridlines{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.gridlines::before{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:calc(100% / 4) 100%;
  opacity:.85;
}
@media (min-width:900px){.gridlines::before{background-size:calc(100% / 6) 100%}}
.section > .shell{position:relative;z-index:1}

/* ---------- buttons ---------- */
.btn{
  --btn-bg:var(--lime);--btn-fg:var(--on-lime);
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.95rem 1.45rem;border:1px solid transparent;border-radius:999px;
  background:var(--btn-bg);color:var(--btn-fg);cursor:pointer;
  font-weight:700;font-size:.9375rem;letter-spacing:-.005em;
  transition:transform .25s var(--ease),background-color .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);
  will-change:transform;
}
.btn:hover{transform:translateY(-2px);background:#fff}
.btn > svg{width:1.05em;height:1.05em;flex:none}
.btn .arrow{width:1em;height:1em;flex:none;transition:transform .25s var(--ease)}
.btn:hover .arrow{transform:translate(2px,-2px)}
.btn--ghost{--btn-bg:transparent;--btn-fg:var(--fg);border-color:var(--line-2)}
.btn--ghost:hover{--btn-fg:var(--on-lime);background:var(--lime);border-color:var(--lime)}
.btn--ember{--btn-bg:var(--ember);--btn-fg:#170703}
.btn--sm{padding:.6rem 1rem;font-size:.8125rem}
.btn--block{width:100%;justify-content:center}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.55;pointer-events:none}
.link-arrow{
  display:inline-flex;align-items:center;gap:.5rem;font-weight:700;
  border-bottom:1px solid var(--line-2);padding-bottom:.2rem;
  transition:color .2s var(--ease),border-color .2s var(--ease)
}
.link-arrow:hover{color:var(--lime);border-color:var(--lime)}

/* ---------- 5. header ---------- */
.skip-link{
  position:absolute;left:.75rem;top:-3rem;z-index:200;
  background:var(--lime);color:var(--on-lime);padding:.6rem 1rem;border-radius:var(--rad);
  font-weight:700;transition:top .2s var(--ease)
}
.skip-link:focus{top:.75rem}

.site-head{
  position:fixed;inset:0 0 auto;z-index:100;height:var(--head-h);
  display:flex;align-items:center;
  border-bottom:1px solid transparent;transition:background-color .3s var(--ease),border-color .3s var(--ease);
}
.site-head.is-stuck{background:rgba(8,9,11,.82);backdrop-filter:blur(14px);border-bottom-color:var(--line)}
.site-head .shell{display:flex;align-items:center;gap:1.25rem;width:100%}
.brand{display:inline-flex;align-items:center;gap:.65rem;font-weight:700;letter-spacing:-.02em}
.brand__mark{
  width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:8px;
  background:var(--lime);color:var(--on-lime);
  font-family:var(--ff-display);font-size:.8125rem;letter-spacing:0
}
.brand__name{font-size:.9375rem;white-space:nowrap}
.brand__name span{color:var(--fg-3);font-weight:400}

.nav{display:none;margin-inline:auto}
.nav ul{display:flex;align-items:center;gap:clamp(.75rem,1.8vw,1.9rem)}
.nav a{
  font-size:.9375rem;font-weight:500;color:var(--fg-2);padding:.3rem 0;
  position:relative;transition:color .2s var(--ease)
}
.nav a::after{
  content:"";position:absolute;left:0;right:100%;bottom:-2px;height:1px;
  background:var(--lime);transition:right .25s var(--ease)
}
.nav a:hover,.nav a[aria-current="page"]{color:var(--fg)}
.nav a:hover::after,.nav a[aria-current="page"]::after{right:0}
@media (min-width:1040px){.nav{display:block}}

.head-actions{display:flex;align-items:center;gap:.6rem;margin-left:auto}
@media (min-width:1040px){.head-actions{margin-left:0}}
.head-cta{display:none}
@media (min-width:720px){.head-cta{display:inline-flex}}
/* A nav 1040px-tol jelenik meg, ezert a foglalas gomb csak 1240px felett
   fer el mellette. Alatta a mobil menuben van, mindig elerhetoen. */
.head-book{display:none}
@media (min-width:1240px){.head-book{display:inline-flex}}

/* language switcher */
.lang{position:relative}
.lang__btn{
  display:inline-flex;align-items:center;gap:.45rem;cursor:pointer;
  background:transparent;border:1px solid var(--line-2);border-radius:999px;
  padding:.5rem .8rem;font-family:var(--ff-mono);font-size:.75rem;font-weight:700;letter-spacing:.08em;
  transition:border-color .2s var(--ease),color .2s var(--ease)
}
.lang__btn:hover{border-color:var(--lime);color:var(--lime)}
.lang__btn .chev{width:.7em;height:.7em;transition:transform .2s var(--ease)}
.lang__btn[aria-expanded="true"] .chev{transform:rotate(180deg)}
.lang__menu{
  position:absolute;right:0;top:calc(100% + .5rem);min-width:11rem;
  background:var(--ink-3);border:1px solid var(--line-2);border-radius:var(--rad-lg);
  padding:.4rem;box-shadow:0 24px 48px rgba(0,0,0,.55);
  display:none
}
.lang__menu[data-open="true"]{display:block}
.lang__menu a{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.6rem .7rem;border-radius:6px;font-size:.9375rem;
  transition:background-color .18s var(--ease)
}
.lang__menu a:hover{background:var(--ink-4)}
.lang__menu a[aria-current="true"]{color:var(--lime)}
.lang__menu .code{font-family:var(--ff-mono);font-size:.6875rem;color:var(--fg-3);letter-spacing:.1em}

/* burger + mobile drawer */
.burger{
  display:inline-grid;place-items:center;width:44px;height:44px;
  background:transparent;border:1px solid var(--line-2);border-radius:10px;cursor:pointer
}
@media (min-width:1040px){.burger{display:none}}
.burger span{display:block;width:18px;height:1.5px;background:var(--fg);position:relative}
.burger span::before,.burger span::after{
  content:"";position:absolute;left:0;width:18px;height:1.5px;background:var(--fg);
  transition:transform .25s var(--ease),top .25s var(--ease)
}
.burger span::before{top:-6px}
.burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

.drawer{
  position:fixed;inset:var(--head-h) 0 0;z-index:99;background:var(--ink);
  padding:2rem var(--gut) 3rem;overflow-y:auto;
  transform:translateY(-8px);opacity:0;visibility:hidden;
  transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s
}
.drawer[data-open="true"]{opacity:1;transform:none;visibility:visible}
.drawer ul{display:grid;gap:.25rem;border-top:1px solid var(--line)}
.drawer li{border-bottom:1px solid var(--line)}
.drawer ul a{
  display:flex;align-items:baseline;gap:1rem;padding:1.1rem 0;
  font-family:var(--ff-display);text-transform:uppercase;font-size:1.5rem;letter-spacing:-.01em
}
.drawer ul a .n{font-family:var(--ff-mono);font-size:.6875rem;color:var(--lime);letter-spacing:.1em}
.drawer .drawer__cta{margin-top:2rem;display:grid;gap:.75rem}
@media (min-width:1040px){.drawer{display:none}}
body.is-locked{overflow:hidden}

/* ---------- 6. hero ---------- */
.hero{
  position:relative;padding-top:calc(var(--head-h) + clamp(2.5rem,7vw,5.5rem));
  padding-bottom:clamp(3rem,6vw,5rem);overflow:hidden
}
.hero__inner{position:relative;z-index:2}
.hero__headline{position:relative;margin-bottom:clamp(2rem,4.5vw,3.25rem)}
.hero__display{position:relative;z-index:1}
.hero__display .line--2{padding-left:clamp(0rem,4vw,4rem)}
.hero__star{
  position:absolute;z-index:0;color:var(--lime);opacity:.95;display:block;
  width:clamp(46px,6.4vw,112px);right:clamp(4px,4.5vw,72px);bottom:-.3em;
  animation:spin 26s linear infinite
}
@keyframes spin{to{transform:rotate(360deg)}}
.hero__grid{
  display:grid;gap:clamp(2rem,4vw,3.5rem);align-items:end;
  grid-template-columns:1fr
}
@media (min-width:900px){.hero__grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center}}
.hero__soft{
  font-weight:500;letter-spacing:-.02em;color:var(--fg);
  font-size:clamp(1.3rem,2.7vw,2.05rem);line-height:1.14;margin:0 0 1.1rem;max-width:24ch
}
.hero__copy{min-width:0}
.hero__ctas{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}
.hero__media{position:relative}
.hero__frame{
  position:relative;border:1px solid var(--line-2);border-radius:var(--rad-lg);
  overflow:hidden;background:var(--ink-2);aspect-ratio:4/5;
  max-height:min(58vh,520px);margin-inline:auto
}
.hero__frame img{width:100%;height:100%;object-fit:cover}
.hero__frame::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 58%,rgba(8,9,11,.5) 100%)
}

/* rotating disc badge */
.disc{
  position:absolute;left:-1.75rem;bottom:-1.75rem;width:clamp(104px,13vw,152px);aspect-ratio:1;
  display:grid;place-items:center;z-index:3
}
.disc svg{position:absolute;inset:0;width:100%;height:100%;animation:spin 22s linear infinite}
.disc text{
  font-family:var(--ff-mono);font-size:7.4px;font-weight:700;letter-spacing:.16em;
  fill:var(--fg-2);text-transform:uppercase
}
.disc__core{
  width:42%;aspect-ratio:1;border-radius:50%;background:var(--lime);color:var(--on-lime);
  display:grid;place-items:center;position:relative;z-index:1
}
.disc__core svg{position:static;width:44%;height:auto;animation:none}
@media (max-width:760px){.disc{left:auto;right:.5rem;bottom:-1.25rem}}

/* social rail */
.rail{
  position:absolute;right:calc(var(--gut) / 2);top:38%;z-index:3;
  display:none;flex-direction:column;align-items:center;gap:1rem
}
@media (min-width:1200px){.rail{display:flex}}
.rail__label{
  font-family:var(--ff-mono);font-size:.625rem;letter-spacing:.24em;color:var(--fg-3);
  writing-mode:vertical-rl;text-transform:uppercase
}
.rail__line{width:1px;height:52px;background:var(--line-2)}
.rail a{color:var(--fg-3);transition:color .2s var(--ease),transform .2s var(--ease)}
.rail a:hover{color:var(--lime);transform:translateY(-2px)}
.rail svg{width:16px;height:16px}

/* ---------- rotator: "your partner in <service>" ---------- */
/* All items sit in the same grid cell, so the slot is as wide as the
   longest service and the line never jumps while the text changes. */
.rotator{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .6rem;
  margin:1.75rem 0 0;font-size:clamp(1rem,1.6vw,1.35rem);font-weight:500;color:var(--fg-2)
}
.rotator__pre{white-space:nowrap}
.rotator__slot{
  display:inline-grid;overflow:hidden;
  border-bottom:2px solid var(--lime);padding-bottom:.12em
}
.rotator__item{
  grid-area:1/1;white-space:nowrap;
  font-family:var(--ff-display);text-transform:uppercase;letter-spacing:-.01em;
  color:var(--lime);font-size:1.05em;line-height:1.15;
  opacity:0;transform:translateY(.55em);
  transition:opacity .45s var(--ease),transform .45s var(--ease)
}
.rotator__item.is-on{opacity:1;transform:none}
.rotator__item.is-out{opacity:0;transform:translateY(-.55em)}
@media (prefers-reduced-motion:reduce){
  .rotator__item{transition:none}
  .rotator__item.is-out{opacity:0}
}
@media (max-width:520px){
  .rotator{font-size:1rem}
  .rotator__slot{max-width:100%;overflow-x:hidden}
  .rotator__item{white-space:normal}
}

/* ---------- 7. marquee ---------- */
.marquee{
  border-block:1px solid var(--line);padding-block:1.1rem;overflow:hidden;
  background:var(--ink-2)
}
.marquee + .marquee{border-top:0}
.marquee__track{display:flex;width:max-content;animation:slide 42s linear infinite}
.marquee--rev .marquee__track{animation-direction:reverse}
.marquee:hover .marquee__track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.marquee__item{
  display:inline-flex;align-items:center;gap:1.5rem;padding-inline:1.5rem;
  font-family:var(--ff-display);text-transform:uppercase;font-size:clamp(1.05rem,2.1vw,1.6rem);
  letter-spacing:-.01em;white-space:nowrap;color:var(--fg)
}
.marquee--rev .marquee__item{color:transparent;-webkit-text-stroke:1px var(--line-2)}
.marquee__dot{width:7px;height:7px;border-radius:50%;background:var(--lime);flex:none}
.marquee--rev .marquee__dot{background:var(--ember)}

/* ---------- 8. about ---------- */
.about__grid{display:grid;gap:clamp(2rem,5vw,4rem);grid-template-columns:1fr}
@media (min-width:900px){.about__grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:start}}
.about__media{position:relative}
.about__frame{
  border:1px solid var(--line-2);border-radius:var(--rad-lg);overflow:hidden;
  background:var(--ink-2);aspect-ratio:3/4
}
.about__frame img{width:100%;height:100%;object-fit:cover}
.about__note{
  position:absolute;right:-.75rem;bottom:1.5rem;max-width:14rem;
  background:var(--lime);color:var(--on-lime);border-radius:var(--rad-lg);
  padding:1rem 1.1rem;font-weight:700;line-height:1.35;font-size:.9375rem
}
.about__body p{margin:0 0 1.15rem;color:var(--fg-2);max-width:58ch}
.about__body p:first-of-type{color:var(--fg);font-size:1.0625em}
.about__sign{display:flex;align-items:center;gap:.85rem;margin:1.75rem 0 2rem}
.about__sign .who{font-weight:700}
.about__sign .role{font-family:var(--ff-mono);font-size:.6875rem;letter-spacing:.14em;color:var(--lime);text-transform:uppercase}

/* stats */
.stats{
  display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--rad-lg);overflow:hidden;margin-top:clamp(2.5rem,5vw,4rem);
  grid-template-columns:repeat(2,1fr)
}
@media (min-width:820px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{background:var(--ink);padding:clamp(1.25rem,2.5vw,2rem)}
.stat__val{font-family:var(--ff-display);font-size:clamp(1.9rem,4vw,3.1rem);line-height:1;letter-spacing:-.02em}
.stat__val .suf{color:var(--lime)}
.stat__lab{font-family:var(--ff-mono);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3);margin-top:.7rem}

/* ---------- 9. services ---------- */
.svc-grid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--rad-lg);overflow:hidden}
@media (min-width:640px){.svc-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1040px){.svc-grid{grid-template-columns:repeat(3,1fr)}}
.svc{
  background:var(--ink);padding:clamp(1.5rem,2.6vw,2.1rem);
  display:flex;flex-direction:column;gap:.65rem;position:relative;isolation:isolate;
  transition:background-color .3s var(--ease)
}
.svc::before{
  content:"";position:absolute;inset:auto 0 0 0;height:2px;background:var(--lime);
  transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease);z-index:-1
}
.svc:hover{background:var(--ink-2)}
.svc:hover::before{transform:scaleX(1)}
.svc__n{font-family:var(--ff-mono);font-size:.6875rem;letter-spacing:.14em;color:var(--fg-3)}
.svc:hover .svc__n{color:var(--lime)}
.svc__t{font-family:var(--ff-display);text-transform:uppercase;font-size:clamp(1.05rem,1.7vw,1.3rem);letter-spacing:-.01em;line-height:1.08}
.svc__d{color:var(--fg-3);font-size:.9375rem;margin:0}
/* Concrete deliverables under each service, so it is clear what is actually
   being offered rather than only what it is called. */
.svc__list{display:grid;gap:.45rem;margin-top:.35rem}
.svc__list li{
  position:relative;padding-left:1.05rem;font-size:.875rem;color:var(--fg-2);line-height:1.45
}
.svc__list li::before{
  content:"";position:absolute;left:0;top:.62em;width:7px;height:1.5px;background:var(--lime);opacity:.75
}
.svc:hover .svc__list li::before{opacity:1}

/* ---------- 10. quote ---------- */
.pull{background:var(--lime);color:var(--on-lime);position:relative;overflow:hidden}
.pull .display{font-size:clamp(1.55rem,5.4vw,4.4rem)}
.pull .line:nth-child(2),.pull .line:nth-child(4){margin-left:clamp(0rem,5vw,6rem)}
/* The payoff line is inverted rather than set in white. White on this lime
   is about 1.7:1, which fails contrast even at display size. Lime on ink is
   over 15:1 and it reads as a deliberate highlight. */
.pull .line:nth-child(4){
  width:fit-content;background:var(--ink);color:var(--lime);
  padding:.04em .22em .1em;margin-top:.04em
}

/* ---------- 11. references ---------- */
.refs{border-top:1px solid var(--line)}
.ref{
  display:grid;gap:.85rem 1.5rem;padding-block:clamp(1.5rem,3vw,2.35rem);
  border-bottom:1px solid var(--line);position:relative;
  grid-template-columns:1fr;align-items:start;transition:padding-left .35s var(--ease)
}
@media (min-width:900px){
  .ref{grid-template-columns:3.5rem minmax(0,1fr) minmax(0,1.15fr) auto;align-items:center}
  .ref:hover{padding-left:1rem}
}
.ref__n{font-family:var(--ff-mono);font-size:.6875rem;letter-spacing:.14em;color:var(--fg-3)}
.ref__id{display:grid;gap:.85rem;min-width:0}
/* Client logos arrive in whatever colour their own site uses. brightness(0)
   flattens every pixel to black while keeping the alpha channel, then
   invert(1) lifts it to white. The result is one consistent monochrome row
   instead of five mismatched brand palettes on a dark page. */
.ref__logo{display:block}
/* Height cap for wide lockups, width cap for stacked ones, so a logo never
   dominates the row and never shrinks to an illegible sliver. */
.ref__logo img{
  max-height:34px;max-width:180px;width:auto;height:auto;
  object-fit:contain;object-position:left center;
  filter:brightness(0) invert(1);opacity:.78;
  transition:opacity .3s var(--ease)
}
.ref:hover .ref__logo img{opacity:1}
.ref__out{display:inline-flex;width:.6em;height:.6em;margin-left:.4em;flex:none;opacity:0;
  transition:opacity .3s var(--ease),transform .3s var(--ease)}
.ref__name a{display:inline}
.ref__out svg{width:100%;height:100%;display:block}
.ref:hover .ref__out{opacity:1}
@media (min-width:900px){
  .ref{grid-template-columns:3.5rem minmax(0,1fr) minmax(0,1.05fr) auto}
}
@media (max-width:899px){.ref__logo img{max-height:28px;max-width:150px}}
.ref__name{font-family:var(--ff-display);text-transform:uppercase;font-size:clamp(1.3rem,2.9vw,2.15rem);letter-spacing:-.02em;line-height:1;transition:color .3s var(--ease)}
.ref:hover .ref__name{color:var(--lime)}
.ref__meta{display:grid;gap:.55rem}
.ref__role{font-family:var(--ff-mono);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--lime)}
.ref__desc{color:var(--fg-3);font-size:.9375rem;margin:0}
.chips{display:flex;flex-wrap:wrap;gap:.35rem}
.chip{
  font-family:var(--ff-mono);font-size:.6875rem;font-weight:700;letter-spacing:.08em;
  border:1px solid var(--line-2);border-radius:999px;padding:.28rem .6rem;color:var(--fg-2)
}
.ref:hover .chip{border-color:var(--lime);color:var(--lime)}

/* ---------- 12. process ---------- */
.steps{display:grid;gap:1px;background:var(--line);border-block:1px solid var(--line)}
@media (min-width:760px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.steps{grid-template-columns:repeat(4,1fr)}}
.step{background:var(--ink);padding:clamp(1.5rem,2.8vw,2.25rem);display:flex;flex-direction:column;gap:.9rem}
.step__n{
  font-family:var(--ff-display);font-size:clamp(2.4rem,4.6vw,3.6rem);line-height:.8;
  color:transparent;-webkit-text-stroke:1.4px var(--line-2);transition:-webkit-text-stroke-color .3s var(--ease)
}
.step:hover .step__n{-webkit-text-stroke-color:var(--lime)}
.step__t{font-family:var(--ff-display);text-transform:uppercase;font-size:1.15rem;letter-spacing:-.01em}
.step__d{color:var(--fg-3);font-size:.9375rem;margin:0}

/* ---------- 13. why ---------- */
.why__grid{display:grid;gap:clamp(1.5rem,3vw,2.5rem);grid-template-columns:1fr}
@media (min-width:760px){.why__grid{grid-template-columns:repeat(2,1fr)}}
.why__item{display:flex;gap:1rem;align-items:flex-start}
.why__ico{
  width:40px;height:40px;flex:none;border-radius:10px;display:grid;place-items:center;
  border:1px solid var(--line-2);color:var(--lime)
}
.why__ico svg{width:18px;height:18px}
.why__t{font-weight:700;margin:0 0 .4rem;font-size:1.0625rem}
.why__d{color:var(--fg-3);font-size:.9375rem;margin:0}

/* ---------- 14. faq ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer;list-style:none;display:flex;align-items:flex-start;gap:1.25rem;
  padding-block:clamp(1.15rem,2.2vw,1.6rem);font-weight:700;
  font-size:clamp(1.0625rem,1.5vw,1.25rem);transition:color .2s var(--ease)
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--lime)}
.faq summary .q{flex:1}
.faq summary .pm{
  flex:none;width:26px;height:26px;border:1px solid var(--line-2);border-radius:50%;
  display:grid;place-items:center;position:relative;margin-top:.15rem
}
.faq summary .pm::before,.faq summary .pm::after{
  content:"";position:absolute;background:currentColor;transition:transform .25s var(--ease)
}
.faq summary .pm::before{width:11px;height:1.5px}
.faq summary .pm::after{width:1.5px;height:11px}
.faq details[open] summary{color:var(--lime)}
.faq details[open] summary .pm{border-color:var(--lime)}
.faq details[open] summary .pm::after{transform:scaleY(0)}
.faq__a{padding:0 0 clamp(1.15rem,2.2vw,1.6rem);color:var(--fg-3);max-width:72ch;margin:0}

/* ---------- 15. blog ---------- */
.posts{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--rad-lg);overflow:hidden}
@media (min-width:700px){.posts{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1040px){.posts{grid-template-columns:repeat(3,1fr)}}
.post{background:var(--ink);display:flex;flex-direction:column;transition:background-color .3s var(--ease)}
.post:hover{background:var(--ink-2)}
.post__thumb{aspect-ratio:16/10;overflow:hidden;background:var(--ink-3);position:relative}
.post__thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.post:hover .post__thumb img{transform:scale(1.04)}
.post__body{padding:clamp(1.25rem,2.4vw,1.85rem);display:flex;flex-direction:column;gap:.7rem;flex:1}
.post__tags{display:flex;flex-wrap:wrap;gap:.4rem}
.tag{
  font-family:var(--ff-mono);font-size:.625rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--lime);border:1px solid rgba(201,242,76,.34);border-radius:999px;padding:.24rem .55rem
}
.post__t{font-family:var(--ff-display);text-transform:uppercase;font-size:clamp(1.05rem,1.8vw,1.3rem);line-height:1.1;letter-spacing:-.01em}
.post__x{color:var(--fg-3);font-size:.9375rem;margin:0}
.post__foot{
  margin-top:auto;padding-top:.9rem;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:1rem;
  font-family:var(--ff-mono);font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3)
}

/* article */
.article{max-width:min(100%,46rem);margin-inline:auto}
.article__head{max-width:min(100%,46rem);margin:0 auto clamp(2rem,4vw,3rem)}
.article__meta{
  display:flex;flex-wrap:wrap;gap:1rem;align-items:center;margin-top:1.25rem;
  font-family:var(--ff-mono);font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3)
}
.article__hero{border:1px solid var(--line-2);border-radius:var(--rad-lg);overflow:hidden;margin-bottom:clamp(2rem,4vw,3rem);aspect-ratio:16/9}
.article__hero img{width:100%;height:100%;object-fit:cover}
.prose{color:var(--fg-2)}
.prose > * + *{margin-top:1.15em}
.prose h2{font-family:var(--ff-display);text-transform:uppercase;color:var(--fg);font-size:clamp(1.35rem,2.6vw,1.9rem);letter-spacing:-.015em;line-height:1.06;margin-top:2.2em}
.prose h3{color:var(--fg);font-weight:700;font-size:1.1875rem;margin-top:1.9em}
.prose a{color:var(--lime);border-bottom:1px solid rgba(201,242,76,.4)}
.prose a:hover{border-bottom-color:var(--lime)}
.prose strong{color:var(--fg);font-weight:700}
.prose ul,.prose ol{padding-left:1.15rem;display:grid;gap:.55rem}
.prose ul li{list-style:none;position:relative;padding-left:.35rem}
.prose ul li::before{content:"";position:absolute;left:-.9rem;top:.72em;width:6px;height:1.5px;background:var(--lime)}
.prose ol{list-style:decimal}
.prose ol li::marker{color:var(--lime);font-family:var(--ff-mono);font-size:.85em}
.prose blockquote{
  margin:1.8em 0;padding:1.1rem 1.4rem;border-left:2px solid var(--lime);
  background:var(--ink-2);border-radius:0 var(--rad-lg) var(--rad-lg) 0;color:var(--fg)
}
.prose blockquote p{margin:0}
.prose code{
  font-family:var(--ff-mono);font-size:.875em;background:var(--ink-3);
  border:1px solid var(--line);border-radius:4px;padding:.12em .38em;color:var(--lime)
}
.prose pre{
  background:var(--ink-2);border:1px solid var(--line);border-radius:var(--rad-lg);
  padding:1.1rem 1.25rem;overflow-x:auto
}
.prose pre code{background:none;border:0;padding:0;color:var(--fg-2)}
.prose img{border-radius:var(--rad-lg);border:1px solid var(--line)}
.prose hr{border:0;height:1px;background:var(--line);margin:2.4em 0}

/* ---------- logo strip ---------- */
.logos{border-block:1px solid var(--line);background:var(--ink-2)}
.logos__label{
  font-family:var(--ff-mono);font-size:.6875rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--fg-3);margin:0 0 1.5rem;text-align:center
}
.logos__row{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(1.75rem,5vw,4rem)
}
.logos__item img{
  max-height:38px;max-width:170px;width:auto;height:auto;object-fit:contain;
  filter:brightness(0) invert(1);opacity:.72;transition:opacity .3s var(--ease)
}
.logos__item:hover img{opacity:1}
@media (max-width:620px){.logos__item img{max-height:28px;max-width:120px}}

/* ---------- problem recognition ---------- */
.prob-grid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--rad-lg);overflow:hidden}
@media (min-width:640px){.prob-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1040px){.prob-grid{grid-template-columns:repeat(4,1fr)}}
.prob{background:var(--ink);padding:clamp(1.5rem,2.6vw,2rem);display:grid;gap:.6rem;align-content:start}
.prob__t{
  font-family:var(--ff-display);text-transform:uppercase;font-size:1rem;line-height:1.14;
  letter-spacing:-.01em;position:relative;padding-top:1.6rem
}
.prob__t::before{
  content:"";position:absolute;top:0;left:0;width:22px;height:2px;background:var(--ember)
}
.prob__d{color:var(--fg-3);font-size:.9375rem;margin:0}

/* ---------- before and after ---------- */
.ba{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--rad-lg);overflow:hidden}
@media (min-width:820px){.ba{grid-template-columns:repeat(2,1fr)}}
.ba__col{background:var(--ink);padding:clamp(1.5rem,3vw,2.25rem)}
.ba__col--after{background:var(--ink-2)}
.ba__label{
  font-family:var(--ff-mono);font-size:.6875rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;margin:0 0 1.25rem;color:var(--fg-3)
}
.ba__col--after .ba__label{color:var(--lime)}
.ba__list{display:grid;gap:.9rem}
.ba__list li{
  position:relative;padding-left:1.6rem;color:var(--fg-3);font-size:.9375rem;line-height:1.5
}
.ba__list li::before{
  content:"";position:absolute;left:0;top:.55em;width:10px;height:10px;border-radius:50%;
  border:1.5px solid var(--line-2)
}
.ba__col--after .ba__list li{color:var(--fg)}
.ba__col--after .ba__list li::before{background:var(--lime);border-color:var(--lime)}

/* ---------- outcomes ---------- */
.out-grid{display:grid;gap:clamp(1.5rem,3vw,2.5rem)}
@media (min-width:760px){.out-grid{grid-template-columns:repeat(2,1fr)}}
.out__item{display:grid;grid-template-columns:2.6rem 1fr;gap:1rem;align-items:start}
.out__n{
  font-family:var(--ff-mono);font-size:.6875rem;font-weight:700;letter-spacing:.1em;
  color:var(--lime);padding-top:.35em
}
.out__t{font-weight:700;font-size:1.0625rem;margin:0 0 .4rem}
.out__d{color:var(--fg-3);font-size:.9375rem;margin:0}

/* ---------- comparison table ---------- */
.cmp-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--rad-lg)}
.cmp{width:100%;min-width:34rem;border-collapse:collapse;font-size:.9375rem}
.cmp th,.cmp td{padding:clamp(.9rem,1.8vw,1.15rem) clamp(.85rem,1.8vw,1.35rem);text-align:left;
  vertical-align:top;border-bottom:1px solid var(--line)}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:0}
.cmp thead th{
  font-family:var(--ff-mono);font-size:.6875rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fg-3);background:var(--ink-2)
}
.cmp thead th.cmp__mine{color:var(--lime)}
.cmp tbody th{
  font-family:var(--ff-mono);font-size:.6875rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--fg-3);white-space:nowrap
}
.cmp__them{color:var(--fg-3)}
.cmp__me{color:var(--fg);font-weight:700;background:rgba(201,242,76,.05)}
.cmp thead th.cmp__mine,.cmp td.cmp__me{border-left:1px solid var(--line)}

/* ---------- pre qualification ---------- */
.pq-grid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--rad-lg);overflow:hidden}
@media (min-width:900px){.pq-grid{grid-template-columns:repeat(3,1fr)}}
.pq__item{background:var(--ink);padding:clamp(1.5rem,2.6vw,2rem);display:grid;gap:.7rem;align-content:start}
.pq__q{font-weight:700;font-size:1.0625rem;margin:0;color:var(--lime)}
.pq__a{color:var(--fg-2);font-size:.9375rem;margin:0}

/* ---------- 16. cta band ---------- */
.cta-band{position:relative;overflow:hidden;background:var(--ink-2);border-block:1px solid var(--line)}
.cta-band__grid{display:grid;gap:clamp(2rem,4vw,3.5rem);grid-template-columns:1fr;align-items:center}
@media (min-width:900px){.cta-band__grid{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr)}}
.cta-band .display .line:nth-child(2){padding-left:clamp(0rem,5vw,5rem)}
.cta-band__btns{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}
.cta-band__frame{border:1px solid var(--line-2);border-radius:var(--rad-lg);overflow:hidden;aspect-ratio:1;background:var(--ink-3)}
.cta-band__frame img{width:100%;height:100%;object-fit:cover}

/* ---------- 17. forms ---------- */
.form-page{padding-top:calc(var(--head-h) + clamp(2.5rem,6vw,4.5rem))}
.form-layout{display:grid;gap:clamp(2rem,4vw,3.5rem);grid-template-columns:1fr}
@media (min-width:1000px){.form-layout{grid-template-columns:minmax(0,1fr) 20rem;align-items:start}}
.form-aside{
  border:1px solid var(--line);border-radius:var(--rad-lg);padding:clamp(1.5rem,2.6vw,2rem);
  background:var(--ink-2);position:sticky;top:calc(var(--head-h) + 1.5rem)
}
.form-aside h2{font-family:var(--ff-display);text-transform:uppercase;font-size:1.0625rem;margin-bottom:1.25rem}
.form-aside ol{display:grid;gap:1rem;counter-reset:s}
.form-aside ol li{
  counter-increment:s;display:grid;grid-template-columns:1.6rem 1fr;gap:.75rem;
  color:var(--fg-3);font-size:.9375rem
}
.form-aside ol li::before{
  content:counter(s,decimal-leading-zero);font-family:var(--ff-mono);font-size:.6875rem;
  color:var(--lime);letter-spacing:.1em;padding-top:.28em
}
.aside-book{margin-top:1.75rem;padding-top:1.5rem;border-top:1px solid var(--line)}
.aside-book h3{
  font-family:var(--ff-display);text-transform:uppercase;font-size:.9375rem;
  letter-spacing:-.01em;margin:0 0 .5rem
}
.aside-book p{margin:0 0 1rem;color:var(--fg-3);font-size:.875rem;line-height:1.5}
.form-aside .aside-contact{margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid var(--line);font-size:.9375rem}
.form-aside .aside-contact a{color:var(--lime)}

form.brief{display:grid;gap:clamp(2rem,3.5vw,2.75rem)}

/* Gyors nezet: a reszletes szekciok rejtve vannak, de a mezok bent maradnak a
   kiszolgalt HTML-ben. Netlify a telepiteskor olvassa ki a mezoneveket, tehat
   egy csak JS-sel letrehozott mezot sosem tarolna el. */
form.brief[data-mode="quick"] .fset[data-detail]{display:none}
.mode{display:grid;gap:.7rem;padding-bottom:clamp(1.25rem,2.5vw,1.75rem);border-bottom:1px solid var(--line)}
.mode__label{
  font-family:var(--ff-mono);font-size:.6875rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--lime)
}
.mode__btns{
  display:inline-flex;flex-wrap:wrap;gap:.3rem;padding:.3rem;width:fit-content;max-width:100%;
  border:1px solid var(--line-2);border-radius:999px;background:var(--ink-2)
}
.mode__btn{
  background:transparent;border:0;border-radius:999px;cursor:pointer;
  padding:.62rem 1.15rem;font-size:.9375rem;font-weight:700;color:var(--fg-3);
  transition:background-color .22s var(--ease),color .22s var(--ease)
}
.mode__btn:hover{color:var(--fg)}
.mode__btn[aria-pressed="true"]{background:var(--lime);color:var(--on-lime)}
.mode__btn[aria-pressed="true"]:hover{color:var(--on-lime)}
.mode__btn:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
.mode__hint{margin:0;color:var(--fg-3);font-size:.875rem}
.fset{border:0;margin:0;padding:0;display:grid;gap:1.25rem}
.fset > legend{
  font-family:var(--ff-mono);font-size:.6875rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--lime);padding:0;margin-bottom:.35rem;
  display:flex;align-items:center;gap:.6rem;width:100%
}
.fset > legend::after{content:"";flex:1;height:1px;background:var(--line)}
.fgrid{display:grid;gap:1.25rem;grid-template-columns:1fr}
@media (min-width:660px){.fgrid--2{grid-template-columns:repeat(2,1fr)}}
.field{display:grid;gap:.5rem}
.field--wide{grid-column:1/-1}
.field > label,.field > .flabel{
  font-size:.875rem;font-weight:700;display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem
}
.field .req,.field .opt{
  font-family:var(--ff-mono);font-size:.625rem;font-weight:400;letter-spacing:.1em;text-transform:uppercase
}
.field .req{color:var(--ember)}
.field .opt{color:var(--fg-3)}
.input,.select,.textarea{
  width:100%;background:var(--ink-2);color:var(--fg);
  border:1px solid var(--line-2);border-radius:var(--rad-lg);
  padding:.85rem 1rem;font:inherit;font-size:.9375rem;
  transition:border-color .2s var(--ease),background-color .2s var(--ease)
}
.textarea{min-height:7.5rem;resize:vertical}
.input::placeholder,.textarea::placeholder{color:var(--fg-3)}
.input:hover,.select:hover,.textarea:hover{border-color:var(--line-2);background:var(--ink-3)}
.input:focus,.select:focus,.textarea:focus{outline:0;border-color:var(--lime);background:var(--ink-3)}
.input[aria-invalid="true"],.textarea[aria-invalid="true"],.select[aria-invalid="true"]{border-color:var(--ember)}
.select{
  appearance:none;padding-right:2.6rem;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--fg-3) 50%),linear-gradient(135deg,var(--fg-3) 50%,transparent 50%);
  background-position:calc(100% - 1.2rem) 1.28rem,calc(100% - .85rem) 1.28rem;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat
}
.err{color:var(--ember);font-size:.8125rem;min-height:0}
.hint{color:var(--fg-3);font-size:.8125rem}

/* checkbox pills for multi answer questions */
.pills{display:flex;flex-wrap:wrap;gap:.5rem}
.pill{position:relative}
.pill input{position:absolute;opacity:0;width:0;height:0}
.pill span{
  display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;
  border:1px solid var(--line-2);border-radius:999px;padding:.55rem .95rem;
  font-size:.875rem;color:var(--fg-2);
  transition:border-color .18s var(--ease),color .18s var(--ease),background-color .18s var(--ease)
}
.pill span::before{
  content:"";width:8px;height:8px;border-radius:50%;border:1px solid var(--line-2);flex:none;
  transition:background-color .18s var(--ease),border-color .18s var(--ease)
}
.pill span:hover{border-color:var(--fg-3);color:var(--fg)}
.pill input:checked + span{border-color:var(--lime);color:var(--lime);background:rgba(201,242,76,.07)}
.pill input:checked + span::before{background:var(--lime);border-color:var(--lime)}
.pill input:focus-visible + span{outline:2px solid var(--lime);outline-offset:3px}

.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-foot{display:grid;gap:1rem;border-top:1px solid var(--line);padding-top:1.5rem}
@media (min-width:560px){.form-foot{grid-template-columns:auto 1fr;align-items:center}}
.form-foot .note{color:var(--fg-3);font-size:.8125rem;margin:0}
.form-foot .note a{color:var(--lime);border-bottom:1px solid rgba(201,242,76,.4)}
.form-alert{
  border:1px solid var(--ember);background:rgba(255,106,61,.09);color:var(--fg);
  border-radius:var(--rad-lg);padding:.9rem 1.1rem;font-size:.9375rem
}
.form-alert[hidden]{display:none}

/* thank you page */
.thanks{min-height:70vh;display:grid;place-items:center;padding-top:var(--head-h);text-align:center}
.thanks__inner{max-width:52ch}
.thanks .display{margin-bottom:1.5rem}
.thanks__btns{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center;margin-top:2rem}
.tick{
  width:64px;height:64px;margin:0 auto 2rem;border-radius:50%;
  background:var(--lime);color:var(--on-lime);display:grid;place-items:center
}
.tick svg{width:28px;height:28px}

/* legal / long text page */
.legal{max-width:76ch}
.legal h2{font-family:var(--ff-display);text-transform:uppercase;font-size:clamp(1.15rem,2.2vw,1.5rem);margin:2.4rem 0 .75rem;letter-spacing:-.01em}
.legal p{color:var(--fg-2)}
.legal .updated{font-family:var(--ff-mono);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3)}

/* ---------- service detail page ---------- */
.svc__more{
  margin-top:auto;padding-top:1rem;display:inline-flex;align-items:center;gap:.45rem;
  font-family:var(--ff-mono);font-size:.6875rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--fg-3);transition:color .25s var(--ease)
}
.svc__more svg{width:.9em;height:.9em}
.svc:hover .svc__more{color:var(--lime)}
.svc__t a{display:inline;color:inherit}
.svc:hover .svc__t a{color:var(--lime)}

.sd{display:grid;gap:clamp(2rem,4vw,3.5rem);grid-template-columns:1fr}
@media (min-width:1000px){.sd{grid-template-columns:minmax(0,1fr) 20rem;align-items:start}}
.sd__main{min-width:0;max-width:46rem}
.sd__h{
  font-family:var(--ff-display);text-transform:uppercase;letter-spacing:-.01em;
  font-size:clamp(1.15rem,2.1vw,1.5rem);margin:2.5rem 0 1rem
}
.sd__main > .sd__h:first-child{margin-top:0}
.sd__signals{display:grid;gap:.8rem}
.sd__signals li{
  position:relative;padding-left:1.7rem;color:var(--fg-2);line-height:1.55
}
.sd__signals li::before{
  content:"";position:absolute;left:0;top:.52em;width:11px;height:11px;border-radius:50%;
  border:1.5px solid var(--ember)
}
.sd__steps{display:grid;gap:1rem;counter-reset:sd}
.sd__steps li{display:grid;grid-template-columns:2.4rem 1fr;gap:.85rem;align-items:start;
  color:var(--fg-2);line-height:1.55}
.sd__n{
  font-family:var(--ff-mono);font-size:.6875rem;font-weight:700;letter-spacing:.1em;
  color:var(--lime);padding-top:.32em
}
.sd__side .form-aside{position:sticky;top:calc(var(--head-h) + 1.5rem)}
.sd__side .form-aside h2{margin-bottom:1rem}
.sd__more{margin-top:clamp(3rem,6vw,5rem);padding-top:2rem;border-top:1px solid var(--line)}
.sd__morelist{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.5rem}
.sd__morelist a{
  display:inline-flex;border:1px solid var(--line-2);border-radius:999px;
  padding:.5rem .95rem;font-size:.875rem;color:var(--fg-2);
  transition:border-color .2s var(--ease),color .2s var(--ease)
}
.sd__morelist a:hover{border-color:var(--lime);color:var(--lime)}

/* ---------- 18. footer ---------- */
.site-foot{border-top:1px solid var(--line);background:var(--ink-2);padding-block:clamp(3rem,6vw,4.5rem) 2rem}
.foot__top{display:grid;gap:clamp(2rem,4vw,3rem);grid-template-columns:1fr}
@media (min-width:760px){.foot__top{grid-template-columns:1.4fr 1fr 1fr 1fr}}
.foot__brand .brand{margin-bottom:1rem}
.foot__brand p{color:var(--fg-3);max-width:34ch;margin:0}
.foot__col h3{
  font-family:var(--ff-mono);font-size:.6875rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--fg-3);margin-bottom:1rem
}
.foot__col ul{display:grid;gap:.6rem}
.foot__col a{color:var(--fg-2);font-size:.9375rem;transition:color .2s var(--ease)}
.foot__col a:hover{color:var(--lime)}
.foot__bottom{
  margin-top:clamp(2.5rem,5vw,4rem);padding-top:1.5rem;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;
  font-family:var(--ff-mono);font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3)
}
.foot__socials{display:flex;gap:.75rem}
.foot__socials a{color:var(--fg-3)}
.foot__socials a:hover{color:var(--lime)}
.foot__socials svg{width:16px;height:16px}

/* language notice bar */
.langbar{
  position:fixed;left:50%;bottom:1rem;transform:translateX(-50%) translateY(140%);
  z-index:98;max-width:min(92vw,34rem);
  background:var(--ink-3);border:1px solid var(--line-2);border-radius:999px;
  padding:.6rem .7rem .6rem 1.15rem;display:flex;align-items:center;gap:1rem;
  box-shadow:0 20px 40px rgba(0,0,0,.5);transition:transform .4s var(--ease)
}
.langbar[data-show="true"]{transform:translateX(-50%)}
.langbar__text{margin:0;font-size:.8125rem;color:var(--fg-2);flex:1}
.langbar__close{
  flex:none;background:transparent;color:var(--fg-3);border:0;cursor:pointer;
  padding:.45rem .6rem;font-size:.8125rem
}
.langbar__close:hover{color:var(--fg)}
.langbar .btn--sm{flex:none}
@media (max-width:520px){
  .langbar{border-radius:var(--rad-lg);flex-wrap:wrap;padding:.85rem 1rem;left:1rem;right:1rem;
    transform:translateY(160%);max-width:none;width:auto}
  .langbar[data-show="true"]{transform:none}
}

/* ---------- 19. utilities ---------- */
.to-top{
  position:fixed;right:1.25rem;bottom:1.25rem;z-index:97;
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:var(--ink-3);border:1px solid var(--line-2);color:var(--fg-2);cursor:pointer;
  opacity:0;pointer-events:none;transform:translateY(10px);
  transition:opacity .3s var(--ease),transform .3s var(--ease),color .2s var(--ease),border-color .2s var(--ease)
}
.to-top[data-show="true"]{opacity:1;pointer-events:auto;transform:none}
.to-top:hover{color:var(--lime);border-color:var(--lime)}
.to-top svg{width:16px;height:16px}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0
}
.ph{position:relative;display:block;width:100%;height:100%}
.ph__tag{
  position:absolute;left:.6rem;bottom:.6rem;z-index:2;
  font-family:var(--ff-mono);font-size:.5625rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--fg-3);background:rgba(8,9,11,.7);border:1px solid var(--line);
  border-radius:999px;padding:.22rem .5rem
}

/* ---------- 20. motion + responsive ---------- */
[data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
[data-reveal].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  [data-reveal]{opacity:1;transform:none}
  .marquee__track{animation:none}
  .disc svg,.hero__star{animation:none}
}
@media print{
  .site-head,.drawer,.to-top,.langbar,.rail,.marquee{display:none!important}
  body{background:#fff;color:#000}
  .display,.prose h2{color:#000}
}

/* ---------- 21. markets map ---------- */
.mk__head{max-width:56ch;margin-bottom:clamp(2rem,4vw,3.25rem)}
.mk__head .lead{color:var(--fg-2);margin:1.25rem 0 0}
.mk__grid{
  display:grid;gap:clamp(1.5rem,3vw,3rem);
  grid-template-columns:minmax(0,1fr) minmax(0,.62fr);align-items:start;
}
.mk__map{
  position:relative;border:1px solid var(--line);border-radius:var(--rad-lg);
  background:var(--ink-2);padding:clamp(.75rem,2vw,1.5rem);overflow:hidden;
}
.mk__map svg{width:100%;height:auto;max-height:78vh;margin-inline:auto}
/* context countries stay quiet, they are there so the shape reads as Europe */
.cty{fill:var(--ink-4);stroke:var(--ink-2);stroke-width:1.1;vector-effect:non-scaling-stroke}
.cty--on{fill:var(--lime);stroke:var(--ink);opacity:0}
.mk__map.is-in .cty--on{animation:ctyOn .5s var(--ease) forwards;animation-delay:calc(var(--i) * 90ms)}
@keyframes ctyOn{from{opacity:0}to{opacity:1}}

.mk__list{
  display:grid;gap:.5rem;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  align-content:start;
}
.mk__list li{
  display:flex;align-items:center;gap:.625rem;
  padding:.625rem .75rem;border:1px solid var(--line);border-radius:var(--rad);
  background:var(--ink-2);color:var(--fg-2);font-size:.875rem;
  opacity:0;transform:translateY(6px);
}
.mk__list.is-in li{
  animation:mkIn .45s var(--ease) forwards;animation-delay:calc(var(--i) * 55ms);
}
@keyframes mkIn{to{opacity:1;transform:none}}
.mk__iso{
  font-family:var(--ff-mono);font-size:.6875rem;letter-spacing:.06em;
  color:var(--lime);border:1px solid var(--line-2);border-radius:2px;
  padding:.125rem .375rem;flex:none;
}

@media (max-width:1000px){
  .mk__grid{grid-template-columns:1fr}
  .mk__map svg{max-height:60vh}
}
@media (prefers-reduced-motion:reduce){
  .cty--on,.mk__list li{opacity:1;transform:none;animation:none}
}

/* ---------- 22. single photo layouts ----------
   Any portrait slot left empty in site.json drops its whole media block. The
   remaining column then has to run full width, otherwise the grid keeps an
   empty half. :only-child means no extra class is needed anywhere. */
@media (min-width:900px){
  .hero__grid > .hero__copy:only-child,
  .about__grid > .about__body:only-child,
  .cta-band__grid > *:only-child{grid-column:1 / -1}
  .about__grid > .about__body:only-child{max-width:74ch}
  .hero__grid > .hero__copy:only-child .lead{max-width:62ch}
}

/* The hero photo is a cutout on transparency, so it is anchored to the top of
   the frame rather than centred. Centring crops the head. If this file is ever
   replaced by a photo that still has its background, switch back to
   object-position:50% 50% here. */
.hero__frame img{object-position:50% 0}