/* ============================================================
   PixelBrand Studio – Design System
   Fonts: Marcellus (headings) · Plus Jakarta Sans (body/UI)
   ============================================================ */

/* Page transitions */
html.pt-ready body { opacity: 0; transform: translateY(8px); }
html.pt-ready.pt-in body { opacity: 1; transform: none; transition: opacity .42s ease, transform .42s ease; }
html.pt-ready.pt-out body { opacity: 0; transform: translateY(-8px); transition: opacity .3s ease, transform .3s ease; }
@media (prefers-reduced-motion: reduce) { html.pt-ready body, html.pt-ready.pt-in body, html.pt-ready.pt-out body { opacity: 1 !important; transform: none !important; transition: none !important; } }

:root {
  --c-primary: #49616D;
  --c-primary-d: #3a4e58;
  --c-accent: #CB8D40;
  --c-accent-d: #b67c32;
  --c-light: #F5F0E8;
  --c-light-2: #F0E9DC;
  --c-warm: #F4D9B5;
  --c-cream: #FBF7F0;
  --c-ink: #090A0C;
  --c-navy: #002B5B;
  --c-neutral: #757575;
  --c-gold: #D4A017;

  --c-line: rgba(73, 97, 109, 0.16);
  --c-line-light: rgba(255, 255, 255, 0.16);
  --c-paper: #ffffff;
  --c-paper-soft: #FBF7F0;

  --f-head: "Marcellus", Georgia, serif;
  --f-body: "Plus Jakarta Sans", system-ui, sans-serif;

  --maxw: 1240px;
  --gut: clamp(20px, 5vw, 64px);
  --sec-y: clamp(72px, 9vw, 130px);

  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-xl: 36px;
  --r-pill: 100px;

  --shadow-sm: 0 2px 6px rgba(9,10,12,.05), 0 8px 24px rgba(9,10,12,.06);
  --shadow-md: 0 14px 50px rgba(9,10,12,.11);
  --shadow-lg: 0 30px 90px rgba(9,10,12,.18);
  --shadow-gold: 0 24px 60px rgba(203,141,64,.28);

  --grad-warm: linear-gradient(135deg, #F4D9B5 0%, #E9C088 100%);
  --grad-primary: linear-gradient(150deg, #54707d 0%, #3a4e58 100%);
  --grad-navy: linear-gradient(150deg, #013a6b 0%, #001a38 100%);

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-soft: cubic-bezier(.34,1.2,.44,1);
}

/* ============================================================
   DARK THEME — flips neutral surfaces & text; brand accent
   bands (navy, primary, gold) keep their own colours.
   ============================================================ */
[data-theme="dark"] {
  --c-primary: #A9C3CF;
  --c-primary-d: #8EAAB7;
  --c-accent-d: #E3AE65;
  --c-ink: #ECECEA;
  --c-neutral: #A8AFB3;
  --c-paper: #161B1F;
  --c-paper-soft: #1C2227;
  --c-light: #12161A;
  --c-light-2: #1A2025;
  --c-cream: #12161A;
  --c-warm: #2A2620;
  --c-line: rgba(255, 255, 255, 0.12);
  --shadow-sm: 0 2px 6px rgba(0,0,0,.30), 0 8px 24px rgba(0,0,0,.34);
  --shadow-md: 0 14px 50px rgba(0,0,0,.46);
  --shadow-lg: 0 30px 90px rgba(0,0,0,.55);
  --grad-warm: linear-gradient(135deg, #3a3326 0%, #2a2620 100%);
}
[data-theme="dark"] body { background: var(--c-light); }
/* Header glass goes dark */
[data-theme="dark"] .site-header { background: rgba(22,27,31,.82); }
[data-theme="dark"] .nav__menu, [data-theme="dark"] .nav__menu::before { background: var(--c-paper); }
/* Keep brand-colour surfaces dark while text and outline icons become brighter. */
[data-theme="dark"] .topbar,
[data-theme="dark"] .solution-bar,
[data-theme="dark"] .why__quote,
[data-theme="dark"] .cta-band,
[data-theme="dark"] .footer { background: #49616D; }
[data-theme="dark"] .lang a.is-active,
[data-theme="dark"] .filter.is-active,
[data-theme="dark"] .svc:hover .svc__icn,
[data-theme="dark"] .btn--ghost:hover,
[data-theme="dark"] .article__share a:hover {
  background: #49616D;
  border-color: #49616D;
  color: #fff;
}
[data-theme="dark"] .quad-intro h3,
[data-theme="dark"] .quad-intro p,
[data-theme="dark"] .newsletter__copy p,
[data-theme="dark"] .newsletter__consent,
[data-theme="dark"] .cta-strip__txt p { color: var(--c-ink); }
[data-theme="dark"] .newsletter__status,
[data-theme="dark"] .form__status.ok { color: #73E3A7; }
[data-theme="dark"] .form__status.err { color: #FF9B8E; }
[data-theme="dark"] .btn--light { --fg: #3A4E58; }
[data-theme="dark"] .btn:not(.btn--accent):not(.btn--ghost):not(.btn--light):not(.btn--outline-light):not(.btn--wa) {
  --bg: #49616D;
  --fg: #fff;
}
[data-theme="dark"] .lang {
  border-color: rgba(255,255,255,.25);
  box-shadow: 0 0 0 2px rgba(203,141,64,.12);
}
[data-theme="dark"] .lang a:not(.is-active) { color: #D6DEE2; }
[data-theme="dark"] .why .adv__t, [data-theme="dark"] .why .eyebrow, [data-theme="dark"] .why h2,
[data-theme="dark"] .offer-note p, [data-theme="dark"] .statement p { color: var(--c-ink); }
/* Deep sections on the warm band hardcode a dark paragraph colour — lift it in dark mode */
[data-theme="dark"] .why .measure, [data-theme="dark"] .why .mini small, [data-theme="dark"] .why .mini b { color: var(--c-ink) !important; }
[data-theme="dark"] .why .mini small { color: var(--c-neutral) !important; }
/* Logo plate in footer stays light so the colour logo reads */
[data-theme="dark"] .footer__brand .brand__logo { background: #fff; }
[data-theme="dark"] .partner { background: #f3f1ec; }
/* Inputs */
[data-theme="dark"] .input, [data-theme="dark"] .textarea, [data-theme="dark"] .select { background: var(--c-paper-soft); color: var(--c-ink); }
/* Theme toggle button */
.theme-toggle { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--c-line);
  background: transparent; display: grid; place-items: center; color: var(--c-ink); cursor: pointer;
  transition: background .2s, color .2s, border-color .2s; flex: none; }
.theme-toggle:hover { border-color: var(--c-accent); color: var(--c-accent-d); }
.theme-toggle .i-sun { display: none; }
.theme-toggle .i-moon { display: block; }
[data-theme="dark"] .theme-toggle .i-sun { display: block; }
[data-theme="dark"] .theme-toggle .i-moon { display: none; }

*,*::before,*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0;
  font-family: var(--f-body);
  color: var(--c-ink);
  background: var(--c-paper);
  font-size: 17px;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  letter-spacing: .005em;
  overflow-x: clip;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }
h1,h2,h3,h4 { font-family: var(--f-head); font-weight: 400; line-height: 1.12; margin: 0; letter-spacing: .003em; }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }
.section { padding-block: var(--sec-y); }
.section--tight { padding-block: clamp(48px, 6vw, 84px); }

.eyebrow {
  font-family: var(--f-body); font-size: 12.5px; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase; color: var(--c-accent-d);
  display: inline-flex; align-items: center; gap: .7em;
}
.eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--c-accent); display: inline-block; }
.eyebrow--center { justify-content: center; }
.eyebrow--light { color: var(--c-warm); }
.eyebrow--light::before { background: var(--c-warm); }

h1.display { font-size: clamp(2.4rem, 5.6vw, 4.1rem); line-height: 1.05; }
h2.title   { font-size: clamp(2rem, 3.8vw, 3rem); line-height: 1.08; }
h3.subttl  { font-size: clamp(1.35rem, 2.1vw, 1.7rem); }

.lead { font-size: clamp(1.05rem, 1.4vw, 1.2rem); color: var(--c-primary); line-height: 1.7; max-width: 60ch; }
.muted { color: var(--c-neutral); }
.measure { max-width: 62ch; }

.section-head { max-width: 720px; }
.section-head .lead { margin-top: 18px; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .lead { margin-inline: auto; }

.rule { height: 1px; background: var(--c-line); border: 0; margin: 0; }

/* Buttons */
.btn {
  --bg: var(--c-primary); --fg: #fff;
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: .6em; white-space: nowrap;
  font-size: 15px; font-weight: 600; letter-spacing: .01em;
  padding: 15px 28px; background: var(--bg); color: var(--fg);
  border: 1px solid var(--bg); border-radius: var(--r-pill);
  transition: transform .35s var(--ease), background .25s var(--ease), box-shadow .35s var(--ease), color .25s, border-color .25s;
  will-change: transform;
}
.btn > * { position: relative; z-index: 1; }
/* designer sheen sweep */
.btn::after {
  content: ""; position: absolute; top: 0; left: -120%; width: 70%; height: 100%; z-index: 0;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.38), transparent);
  transform: skewX(-18deg); transition: left .6s var(--ease); pointer-events: none;
}
.btn:hover::after { left: 130%; }
.btn .arr { transition: transform .35s var(--ease); }
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn:hover .arr { transform: translateX(4px); }
.btn:focus-visible { outline: 3px solid var(--c-warm); outline-offset: 2px; }
.btn--accent { --bg: var(--c-accent); --fg: #fff; border-color: var(--c-accent); }
.btn--accent:hover { background: var(--c-accent-d); border-color: var(--c-accent-d); }
.btn--ghost { --bg: transparent; --fg: var(--c-primary); border-color: var(--c-line); }
.btn--ghost:hover { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
.btn--light { --bg: #fff; --fg: var(--c-primary); border-color: #fff; }
.btn--outline-light { --bg: transparent; --fg: #fff; border-color: var(--c-line-light); }
.btn--outline-light:hover { background: rgba(255,255,255,.08); }
.btn--wa { --bg: #25D366; --fg: #0a3d22; border-color: #25D366; }
.btn--wa:hover { background: #1ebe5a; border-color: #1ebe5a; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .5em;
  font-weight: 600; font-size: 15px; color: var(--c-primary);
  border-bottom: 1px solid var(--c-accent); padding-bottom: 3px;
  transition: gap .3s var(--ease), color .25s;
}
.link-arrow:hover { gap: .9em; color: var(--c-accent-d); }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.86);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: box-shadow .3s var(--ease), border-color .3s, background .3s;
}
.site-header.is-stuck { box-shadow: 0 1px 0 var(--c-line), var(--shadow-sm); border-color: var(--c-line); }
.site-header .wrap { max-width: 1500px; padding-inline: clamp(20px,3vw,44px); }
.nav { display: flex; align-items: center; gap: 18px; height: 78px; }
.brand { display: flex; align-items: center; gap: 11px; margin-right: 18px; flex: none; white-space: nowrap; }
.brand__mark {
  width: 38px; height: 38px; border-radius: 7px; background: var(--c-primary);
  display: grid; place-items: center; color: #fff;
  font-family: var(--f-head); font-size: 20px; line-height: 1;
  position: relative; overflow: hidden;
}
.brand__mark::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, transparent 55%, var(--c-accent) 55%); opacity: .9; }
.brand__mark span { position: relative; z-index: 1; }
.brand__name { display: flex; flex-direction: column; line-height: 1.05; }
.brand__name b { font-family: var(--f-head); font-weight: 400; font-size: 19px; letter-spacing: .01em; }
.brand__name small { font-size: 10px; letter-spacing: .28em; text-transform: uppercase; color: var(--c-neutral); }

.nav__links { display: flex; align-items: center; gap: 2px; margin-left: auto; flex: none; }
.nav__links a { position: relative; padding: 10px 12px; font-size: 15px; font-weight: 500; color: var(--c-ink); border-radius: var(--r-sm); transition: color .2s; white-space: nowrap; }
.nav__links a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 6px; height: 1px; background: var(--c-accent); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.nav__links a:hover { color: var(--c-primary); }
.nav__links a:hover::after, .nav__links a.is-active::after { transform: scaleX(1); }
.nav__links a.is-active { color: var(--c-primary); }

.nav__right { display: flex; align-items: center; gap: 10px; flex: none; }

/* Services dropdown */
.nav__drop { position: relative; display: flex; align-items: center; }
.nav__droptrigger { display: inline-flex; align-items: center; gap: 5px; }
.nav__droptrigger .caret { transition: transform .3s var(--ease); color: var(--c-accent); }
.nav__drop:hover .nav__droptrigger .caret, .nav__drop:focus-within .nav__droptrigger .caret { transform: rotate(180deg); }
.nav__menu { position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(8px);
  background: var(--c-paper); border: 1px solid var(--c-line); border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  padding: 10px; min-width: 248px; display: grid; gap: 2px; opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s; z-index: 120; }
.nav__drop:hover .nav__menu, .nav__drop:focus-within .nav__menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.nav__menu::before { content: ""; position: absolute; top: -6px; left: 50%; transform: translateX(-50%) rotate(45deg); width: 12px; height: 12px; background: var(--c-paper); border-left: 1px solid var(--c-line); border-top: 1px solid var(--c-line); }
.nav__menu a { position: relative; z-index: 1; padding: 11px 14px; border-radius: var(--r-sm); font-size: 14.5px; font-weight: 500; color: var(--c-ink); transition: background .2s, color .2s, padding-left .2s; }
.nav__menu a::after { display: none; }
.nav__menu a:hover { background: var(--c-cream); color: var(--c-accent-d); padding-left: 18px; }
.nav__menu-all { font-weight: 600 !important; color: var(--c-primary) !important; border-bottom: 1px solid var(--c-line); border-radius: var(--r-sm) var(--r-sm) 0 0 !important; margin-bottom: 4px; }

/* Mobile sub-menu */
.m-sub { display: grid; gap: 0; padding: 4px 0 14px 14px; border-left: 2px solid var(--c-warm); margin: -4px 0 4px; }
.m-sublink { padding: 11px 0; font-size: 1rem; color: var(--c-neutral); border-bottom: 1px solid var(--c-line); }
.m-sublink:last-child { border-bottom: 0; }
.m-sublink:hover { color: var(--c-accent-d); }

.lang { display: inline-flex; align-items: center; border: 1px solid var(--c-line); border-radius: var(--r-pill); overflow: hidden; background: var(--c-paper); }
.lang a, .lang button { background: transparent; border: 0; padding: 7px 13px; font-size: 12.5px; font-weight: 700; letter-spacing: .06em; color: var(--c-neutral); transition: background .2s, color .2s; line-height: 1; text-decoration: none; display: inline-flex; align-items: center; }
.lang a + a, .lang button + button { border-left: 1px solid var(--c-line); }
.lang a:hover, .lang button:hover { color: var(--c-primary); }
.lang a.is-active, .lang button.is-active { background: var(--c-primary); color: #fff; }

.hamburger { display: none; width: 44px; height: 44px; border: 1px solid var(--c-line); background: var(--c-paper); border-radius: var(--r-sm); position: relative; }
.hamburger span, .hamburger span::before, .hamburger span::after { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 1.6px; background: var(--c-ink); transform: translate(-50%,-50%); transition: transform .3s var(--ease), opacity .2s; }
.hamburger span::before { transform: translate(-50%,-7px); }
.hamburger span::after  { transform: translate(-50%,7px); }
body.menu-open .hamburger span { background: transparent; }
body.menu-open .hamburger span::before { transform: translate(-50%,0) rotate(45deg); }
body.menu-open .hamburger span::after  { transform: translate(-50%,0) rotate(-45deg); }

.mobile-nav { position: fixed; inset: 78px 0 0 0; z-index: 99; background: var(--c-paper); padding: 28px var(--gut) 48px; transform: translateY(-12px); opacity: 0; pointer-events: none; transition: opacity .3s var(--ease), transform .3s var(--ease); overflow-y: auto; }
body.menu-open .mobile-nav { opacity: 1; transform: none; pointer-events: auto; }
.mobile-nav a.m-link { display: flex; justify-content: space-between; align-items: center; font-family: var(--f-head); font-size: 1.7rem; padding: 18px 0; border-bottom: 1px solid var(--c-line); color: var(--c-ink); }
.mobile-nav a.m-link .arr { color: var(--c-accent); }
.mobile-nav .m-cta { margin-top: 28px; display: grid; gap: 12px; }
.mobile-nav .m-lang { margin-top: 26px; }

/* HERO */
.hero { position: relative; overflow: hidden; background: var(--c-paper); }
.hero::before { content: ""; position: absolute; top: -10%; right: -8%; width: 46vw; height: 46vw; max-width: 620px; max-height: 620px; background: radial-gradient(circle at 30% 30%, rgba(244,217,181,.55), transparent 62%); z-index: 0; pointer-events: none; }
.hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 72px); align-items: center; position: relative; z-index: 1; padding-block: clamp(54px, 7vw, 96px); }
.hero__badge { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--c-primary); background: var(--c-paper); border: 1px solid var(--c-line); border-radius: 100px; padding: 8px 16px; box-shadow: var(--shadow-sm); }
.hero__badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c-accent); }
.hero h1 { margin-top: 22px; }
.hero h1 em { font-style: normal; color: var(--c-accent-d); }
.hero__lead { margin-top: 22px; }
.hero__cta { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 14px; }
.hero__trust { margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--c-line); display: flex; flex-wrap: wrap; gap: 10px 22px; color: var(--c-neutral); font-size: 14px; }
.hero__trust span { display: inline-flex; align-items: center; gap: 8px; }
.hero__trust span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--c-accent); }

.hero__art { position: relative; min-height: 460px; }
.mk { position: absolute; border-radius: var(--r-md); box-shadow: var(--shadow-lg); overflow: hidden; background: var(--c-paper); }
.mk--laptop { left: 0; top: 8%; width: 78%; aspect-ratio: 16/10.4; border-radius: 12px; border: 1px solid var(--c-line); }
.mk--phone { right: 2%; bottom: 0; width: 30%; aspect-ratio: 9/18.5; border-radius: 22px; border: 5px solid #1a232a; }
.mk--card { left: -4%; bottom: 4%; width: 38%; aspect-ratio: 16/9.6; transform: rotate(-7deg); border: 1px solid var(--c-line); }
.hero__art .deco-ring { position: absolute; right: 8%; top: -4%; width: 120px; height: 120px; border: 1px solid var(--c-accent); border-radius: 50%; opacity: .5; z-index: -1; }
.hero__art .deco-line { position: absolute; left: 18%; bottom: -6%; width: 60%; height: 1px; background: var(--c-line); }

/* Placeholder system */
.ph { position: relative; width: 100%; height: 100%; background: repeating-linear-gradient(135deg, rgba(73,97,109,.05) 0 10px, rgba(73,97,109,.10) 10px 20px); display: grid; place-items: center; color: var(--c-primary); min-height: 60px; }
.ph[data-tone="warm"] { background: repeating-linear-gradient(135deg, rgba(203,141,64,.08) 0 10px, rgba(203,141,64,.16) 10px 20px); color: var(--c-accent-d); }
.ph[data-tone="navy"] { background: repeating-linear-gradient(135deg, rgba(0,43,91,.10) 0 10px, rgba(0,43,91,.18) 10px 20px); color: var(--c-navy); }
.ph[data-tone="dark"] { background: repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 10px, rgba(255,255,255,.12) 10px 20px); color: rgba(255,255,255,.8); }
.ph__label { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; background: rgba(255,255,255,.85); padding: 5px 10px; border-radius: 3px; text-align: center; max-width: 80%; }
.ph[data-tone="dark"] .ph__label { background: rgba(0,0,0,.35); color: rgba(255,255,255,.92); }

/* User-fillable image slots (drag-and-drop) replacing static placeholders */
.has-slot { position: relative; overflow: hidden; }
.has-slot > image-slot, .has-slot > img,
image-slot.fillslot, img.fillslot { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; display: block; object-fit: cover; }
.partner.has-slot { background: var(--c-paper); }
.blob { position: relative; }
.browser__body { position: relative; }
.scard__media, .bpost__media, .svc-detail__media, .split__media { position: relative; }
.has-slot > image-slot::part(frame), image-slot.fillslot::part(frame) { border-radius: 0; }

.screen-ui { position: absolute; inset: 0; display: flex; flex-direction: column; }
.screen-ui__bar { height: 22px; background: #eef0f1; display: flex; align-items: center; gap: 5px; padding: 0 9px; border-bottom: 1px solid var(--c-line); }
.screen-ui__bar i { width: 7px; height: 7px; border-radius: 50%; background: #cdd3d6; display: block; }
.screen-ui__body { flex: 1; }

.card { background: var(--c-paper); border: 1px solid var(--c-line); border-radius: var(--r-md); transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s; }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: rgba(203,141,64,.4); }

/* Audience / problems */
.audience { background: var(--c-light); }
.problem-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; margin-top: 44px; }
.problem { background: var(--c-paper); border: 1px solid var(--c-line); border-radius: var(--r-md); padding: 30px 28px; position: relative; }
.problem__q { font-family: var(--f-head); font-size: 1.2rem; color: var(--c-ink); line-height: 1.3; }
.problem__n { font-family: var(--f-head); color: var(--c-accent); font-size: 1.1rem; margin-bottom: 14px; }
.solution-bar { margin-top: 30px; padding: 26px 32px; border-radius: var(--r-md); background: var(--c-primary); color: #fff; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.solution-bar p { margin: 0; font-family: var(--f-head); font-size: clamp(1.2rem,2vw,1.55rem); }
.solution-bar .tag { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--c-warm); }

/* Services tiles */
.svc-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 22px; margin-top: 50px; }
.svc { position: relative; overflow: hidden; background: var(--c-paper); border: 1px solid var(--c-line); border-radius: var(--r-md); padding: 38px 36px; min-height: 240px; display: flex; flex-direction: column; transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s; }
.svc:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: rgba(203,141,64,.45); }
.svc__num { font-family: var(--f-head); font-size: 13px; letter-spacing: .2em; color: var(--c-accent); }
.svc__icn { width: 46px; height: 46px; border: 1px solid var(--c-line); border-radius: 9px; display: grid; place-items: center; margin-bottom: 22px; color: var(--c-primary); transition: background .3s, color .3s, border-color .3s; }
.svc:hover .svc__icn { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
.svc h3 { font-size: 1.5rem; margin-bottom: 12px; }
.svc p { color: var(--c-neutral); margin: 0 0 18px; font-size: 15.5px; }
.svc__more { margin-top: auto; font-weight: 600; font-size: 14px; color: var(--c-primary); display: inline-flex; gap: .5em; align-items: center; }
.svc::after { content:""; position:absolute; left:0; bottom:0; height:3px; width:100%; background: var(--c-accent); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.svc:hover::after { transform: scaleX(1); }

.svc-extra { margin-top: 26px; padding: 22px 28px; border: 1px dashed var(--c-line); border-radius: var(--r-md); background: var(--c-paper-soft); display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.svc-extra .pill { font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--c-accent-d); }

/* Why */
.why { background: var(--c-warm); }
.why__inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(34px,5vw,72px); align-items: center; }
.adv-list { display: grid; gap: 2px; margin-top: 30px; }
.adv { display: flex; gap: 18px; align-items: flex-start; padding: 22px 0; border-bottom: 1px solid rgba(73,97,109,.18); }
.adv:first-child { border-top: 1px solid rgba(73,97,109,.18); }
.adv__n { font-family: var(--f-head); color: var(--c-accent-d); font-size: 1.1rem; min-width: 34px; }
.adv__t { font-family: var(--f-head); font-size: 1.25rem; color: var(--c-ink); }
.why__quote { background: var(--c-primary); color: #fff; border-radius: var(--r-md); padding: clamp(32px,4vw,52px); position: relative; }
.why__quote .mark { font-family: var(--f-head); font-size: 4rem; color: var(--c-accent); line-height: .6; }
.why__quote p { font-family: var(--f-head); font-size: clamp(1.4rem,2.4vw,1.9rem); line-height: 1.35; margin: 18px 0 0; }

/* Process */
.proc-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; margin-top: 54px; }
.proc { padding: 0 30px 0 0; position: relative; }
.proc + .proc { padding-left: 30px; border-left: 1px solid var(--c-line); }
.proc__n { font-family: var(--f-head); font-size: 2.6rem; color: var(--c-accent); line-height: 1; }
.proc__dot { width: 11px; height: 11px; border-radius: 50%; background: var(--c-primary); margin: 22px 0 18px; position: relative; }
.proc__line { position: absolute; top: 5px; left: 11px; right: -30px; height: 1px; background: var(--c-line); }
.proc:last-child .proc__line { display: none; }
.proc h3 { font-size: 1.3rem; margin-bottom: 10px; }
.proc p { color: var(--c-neutral); font-size: 15px; margin: 0; }

/* Portfolio */
.pf-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; margin-top: 48px; }
.pf-item { grid-column: span 1; }
.pf-item.is-wide { grid-column: span 2; }
.pf { display: block; border-radius: var(--r-md); overflow: hidden; position: relative; border: 1px solid var(--c-line); background: var(--c-paper); }
.pf__img { aspect-ratio: 4/3; position: relative; overflow: hidden; }
.pf-item.is-wide .pf__img { aspect-ratio: 16/9; }
.pf__img .ph { transition: transform .6s var(--ease); }
.pf:hover .pf__img .ph { transform: scale(1.04); }
.pf__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(9,10,12,.78), rgba(9,10,12,.0) 55%); opacity: 0; transition: opacity .4s var(--ease); display: flex; align-items: flex-end; padding: 24px; }
.pf:hover .pf__overlay { opacity: 1; }
.pf__overlay .view { color:#fff; font-size: 14px; font-weight: 600; display: inline-flex; gap:.5em; align-items:center; transform: translateY(8px); transition: transform .4s var(--ease); }
.pf:hover .pf__overlay .view { transform: none; }
.pf__meta { padding: 20px 22px; }
.pf__cat { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-accent-d); font-weight: 600; }
.pf__name { font-family: var(--f-head); font-size: 1.3rem; margin: 8px 0 6px; }
.pf__desc { color: var(--c-neutral); font-size: 14.5px; margin: 0; }
.pf__external {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 16px;
  color: var(--c-primary); font-size: 14px; font-weight: 700;
  text-decoration: none; transition: color .2s var(--ease);
}
.pf__external:hover, .pf__external:focus-visible { color: var(--c-accent-d); }
.pf__external span { font-size: 16px; line-height: 1; transition: transform .2s var(--ease); }
.pf__external:hover span { transform: translate(2px,-2px); }

.filters { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.filter { border: 1px solid var(--c-line); background: var(--c-paper); color: var(--c-primary); padding: 9px 18px; border-radius: 100px; font-size: 14px; font-weight: 600; transition: background .25s, color .25s, border-color .25s; }
.filter:hover { border-color: var(--c-accent); }
.filter.is-active { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
.filter--sub { font-size: 13px; padding: 8px 15px; color: var(--c-neutral); background: var(--c-cream); }
.filter--sub::before { content: "›"; margin-right: 6px; color: var(--c-accent); font-weight: 700; }
.filter--sub.is-active { background: var(--c-accent); color: #fff; border-color: var(--c-accent); }
.filter--sub.is-active::before { color: rgba(255,255,255,.7); }
.pf-item.is-hidden { display: none; }

/* Portfolio cover = drag-drop image slot */
.pf__img { position: relative; }
.pf__img > image-slot, .pf__img > img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; object-fit: cover; transition: transform .6s var(--ease); will-change: transform; }
.pf:hover .pf__img > image-slot, .pf:hover .pf__img > img { transform: scale(1.07); }
.pf__img > image-slot::part(frame) { border-radius: 0; }
.pf__open {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%) translateY(6px);
  z-index: 3; display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.95); color: var(--c-ink); border: 0; border-radius: var(--r-pill);
  padding: 10px 18px; font-size: 13.5px; font-weight: 600; box-shadow: var(--shadow-md);
  opacity: 0; transition: opacity .3s var(--ease), transform .3s var(--ease); cursor: pointer;
}
.pf:hover .pf__open { opacity: 1; transform: translateX(-50%) translateY(0); }
.pf__open svg { color: var(--c-accent-d); }
.pf__photos { position: absolute; top: 14px; right: 14px; z-index: 3; display: inline-flex; align-items: center; gap: 6px;
  background: rgba(16,24,29,.62); color: #fff; border-radius: var(--r-pill); padding: 6px 11px; font-size: 12px; font-weight: 600; backdrop-filter: blur(4px); }

/* Portfolio lightbox / gallery */
.pf-lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(16,24,29,.74);
  backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 22px; }
.pf-lightbox[hidden] { display: none; }
.pf-lightbox__panel { background: var(--c-paper); border-radius: var(--r-xl); width: 100%; max-width: 1000px;
  max-height: 90vh; overflow: auto; padding: clamp(24px,3vw,40px); position: relative; box-shadow: var(--shadow-lg); }
.pf-lightbox__close { position: absolute; top: 16px; right: 16px; width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--c-line); background: var(--c-paper); font-size: 20px; line-height: 1; color: var(--c-ink); transition: background .2s; }
.pf-lightbox__close:hover { background: var(--c-light); }
.pf-lightbox__cat { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-accent-d); font-weight: 600; }
.pf-lightbox__title { font-family: var(--f-head); font-size: clamp(1.6rem,2.6vw,2.2rem); margin: 6px 0 0; }
.pf-lightbox__hint { font-size: 14px; color: var(--c-neutral); margin: 14px 0 0; padding: 12px 16px; background: var(--c-cream); border-radius: var(--r-md); }
.pf-lightbox__stage { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px,1fr)); gap: 16px; margin-top: 22px; }
.pf-lightbox__slot { width: 100% !important; height: 200px !important; }
.pf-lightbox.is-edit .pf-lightbox__slot.is-cover { grid-column: 1 / -1; height: 340px !important; }
.pf-lightbox__empty { grid-column: 1/-1; text-align: center; color: var(--c-neutral); padding: 40px 0; font-family: var(--f-head); font-size: 1.2rem; }

/* Fullscreen image viewer */
.img-viewer { position: fixed; inset: 0; z-index: 300; background: rgba(8,11,13,.92);
  backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; padding: clamp(16px,4vw,56px); }
.img-viewer[hidden] { display: none; }
.img-viewer .iv-fig { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.img-viewer .iv-img { max-width: min(1100px, 92vw); max-height: 82vh; width: auto; height: auto; object-fit: contain;
  border-radius: 10px; box-shadow: 0 30px 90px rgba(0,0,0,.6); animation: ivpop .35s var(--ease-soft); }
@keyframes ivpop { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
.img-viewer .iv-cap { color: rgba(255,255,255,.82); font-size: 14px; text-align: center; font-family: var(--f-head); }
.img-viewer .iv-close { position: absolute; top: 18px; right: 20px; width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); color: #fff; font-size: 18px; cursor: pointer; transition: background .2s; }
.img-viewer .iv-close:hover { background: rgba(255,255,255,.18); }
.img-viewer .iv-count { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.7); font-size: 13px; letter-spacing: .08em; }
.img-viewer .iv-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 54px; height: 54px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.08); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; transition: background .2s, transform .2s; }
.img-viewer .iv-nav:hover { background: rgba(255,255,255,.2); }
.img-viewer .iv-prev { left: clamp(12px,3vw,40px); }
.img-viewer .iv-next { right: clamp(12px,3vw,40px); }
@media (max-width: 640px) { .img-viewer .iv-nav { width: 44px; height: 44px; font-size: 22px; } .img-viewer .iv-prev { left: 8px; } .img-viewer .iv-next { right: 8px; } }
@media (max-width: 560px) { .pf-lightbox__stage { grid-template-columns: 1fr; } .pf-lightbox__slot { height: 220px !important; } }

/* Website feature */
.web { background: var(--c-navy); color: #fff; }
.web__inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px,5vw,72px); align-items: center; }
.web__inner--single { grid-template-columns: minmax(0, 820px); justify-content: center; }
.web h2 { color: #fff; }
.web .lead { color: rgba(255,255,255,.8); }
.feat-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; margin: 30px 0; }
.feat-list li { display: flex; gap: 11px; align-items: flex-start; font-size: 15px; color: rgba(255,255,255,.9); padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.1); }
.feat-list li .chk { color: var(--c-gold); flex: none; margin-top: 3px; }
.web__art { position: relative; }
.browser { border-radius: var(--r-md); overflow: hidden; border: 1px solid rgba(255,255,255,.16); box-shadow: var(--shadow-lg); background: #0c1f33; }
.browser__bar { height: 36px; background: rgba(255,255,255,.06); display: flex; align-items: center; gap: 7px; padding: 0 14px; }
.browser__bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.22); }
.browser__bar .url { margin-left: 12px; height: 18px; flex: 1; background: rgba(255,255,255,.08); border-radius: 100px; }
.browser__body { aspect-ratio: 16/10; }

/* Social / training */
.social__opts { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; margin-top: 46px; }
.opt { border: 1px solid var(--c-line); border-radius: var(--r-md); padding: 32px 30px; background: var(--c-paper); transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.opt:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.opt__icn { width: 44px; height: 44px; border-radius: 9px; background: var(--c-warm); display: grid; place-items: center; color: var(--c-accent-d); margin-bottom: 20px; }
.opt h3 { font-size: 1.3rem; margin-bottom: 10px; }
.opt p { color: var(--c-neutral); font-size: 15px; margin: 0; }

/* Testimonials */
.tst-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; margin-top: 46px; }
.tst { border: 1px solid var(--c-line); border-radius: var(--r-md); padding: 32px 30px; background: var(--c-paper-soft); display: flex; flex-direction: column; }
.tst__stars { color: var(--c-gold); letter-spacing: 2px; font-size: 15px; }
.tst__quote { font-family: var(--f-head); font-size: 1.2rem; line-height: 1.45; color: var(--c-primary); margin: 18px 0 24px; min-height: 120px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; border: 1px dashed var(--c-line); border-radius: var(--r-sm); padding: 18px; background: repeating-linear-gradient(135deg, rgba(73,97,109,.03) 0 10px, rgba(73,97,109,.06) 10px 20px); }
.tst__quote .note { font-family: var(--f-body); font-size: 12px; color: var(--c-neutral); letter-spacing: .03em; text-transform: uppercase; }
.tst__who { display: flex; align-items: center; gap: 14px; margin-top: auto; }
.tst__ava { width: 46px; height: 46px; border-radius: 50%; overflow: hidden; border: 1px solid var(--c-line); flex: none; }
.tst__who b { font-family: var(--f-head); font-weight: 400; font-size: 1.05rem; }
.tst__who small { color: var(--c-neutral); display: block; font-size: 13px; }

/* CTA band */
.cta-band { background: var(--c-primary); color: #fff; position: relative; overflow: hidden; }
.cta-band::before { content:""; position:absolute; right:-6%; top:-30%; width: 460px; height: 460px; border:1px solid rgba(255,255,255,.12); border-radius:50%; }
.cta-band::after { content:""; position:absolute; right:6%; top:-10%; width: 280px; height: 280px; border:1px solid rgba(203,141,64,.4); border-radius:50%; }
.cta-band .wrap { position: relative; z-index: 1; text-align: center; }
.cta-band h2 { color: #fff; max-width: 18ch; margin-inline: auto; }
.cta-band .lead { color: rgba(255,255,255,.82); margin: 22px auto 0; }
.cta-band__btns { margin-top: 34px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* Footer */
.footer { background: var(--c-primary); color: rgba(255,255,255,.78); padding-block: 64px 30px; font-size: 14.5px; }
.footer a { color: rgba(255,255,255,.78); transition: color .2s; }
.footer a:hover { color: #fff; }
.footer__top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
.footer__brand .brand__name b { color: #fff; }
.footer__brand .brand__name small { color: var(--c-warm); }
.footer__brand p { margin: 18px 0; max-width: 34ch; line-height: 1.6; }
.footer h4 { color: #fff; font-family: var(--f-body); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 18px; font-weight: 600; }
.footer ul { display: grid; gap: 11px; }
.footer .socials { display: flex; gap: 10px; margin-top: 4px; }
.footer .socials a { width: 40px; height: 40px; border: 1px solid rgba(255,255,255,.16); border-radius: var(--r-sm); display: grid; place-items: center; }
.footer .socials a:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.3); }
.footer__bottom { margin-top: 50px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.12); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; color: rgba(255,255,255,.5); }
.footer__bottom .legal { display: flex; gap: 22px; flex-wrap: wrap; }

/* WhatsApp float */
.wa-float { position: fixed; right: 22px; bottom: 22px; z-index: 90; width: 58px; height: 58px; border-radius: 50%; background: #25D366; display: grid; place-items: center; box-shadow: 0 10px 30px rgba(37,211,102,.45); transition: transform .3s var(--ease), box-shadow .3s; }
.wa-float:hover { transform: scale(1.07); }
.wa-float svg { width: 30px; height: 30px; }
.wa-float .tip { position: absolute; right: 70px; top: 50%; transform: translateY(-50%) translateX(8px); background: var(--c-paper); color: var(--c-ink); font-size: 13px; font-weight: 600; white-space: nowrap; padding: 9px 14px; border-radius: var(--r-sm); box-shadow: var(--shadow-md); opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; }
.wa-float:hover .tip { opacity: 1; transform: translateY(-50%) translateX(0); }

/* Page hero (subpages) */
.page-hero { background: var(--c-light); position: relative; overflow: hidden; }
.page-hero::before { content:""; position:absolute; left:-6%; top:-30%; width:380px; height:380px; background: radial-gradient(circle, rgba(244,217,181,.5), transparent 65%); }
.page-hero .wrap { position: relative; }
.page-hero__inner { padding-block: clamp(56px,8vw,104px); max-width: 760px; }
.page-hero h1 { margin-top: 20px; }
.page-hero .lead { margin-top: 22px; }
.breadcrumb { font-size: 13px; color: var(--c-neutral); display: flex; gap: 8px; align-items: center; }
.breadcrumb a:hover { color: var(--c-primary); }
.breadcrumb .sep { color: var(--c-line); }

/* Diensten detail */
.svc-detail { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(34px,5vw,64px); align-items: center; padding-block: clamp(48px,6vw,80px); }
.svc-detail:nth-child(even) .svc-detail__media { order: -1; }
.svc-detail__media { border-radius: var(--r-md); overflow: hidden; aspect-ratio: 4/3; border: 1px solid var(--c-line); }
.svc-detail h2 { font-size: clamp(1.8rem,2.8vw,2.4rem); }
.svc-detail ul.checks { display: grid; gap: 10px; margin: 22px 0 28px; }
.svc-detail ul.checks li { display: flex; gap: 11px; align-items: flex-start; font-size: 15.5px; }
.svc-detail ul.checks li .chk { color: var(--c-accent); flex: none; margin-top: 4px; }
.svc-detail .dnum { font-family: var(--f-head); color: var(--c-accent); font-size: 14px; letter-spacing: .2em; }
.svc-divider { border-top: 1px solid var(--c-line); }

.offer-note { background: var(--c-warm); border-radius: var(--r-md); padding: 30px 34px; display:flex; gap:18px; align-items:center; flex-wrap:wrap; margin-top: 10px; }
.offer-note p { margin: 0; font-family: var(--f-head); font-size: 1.25rem; color: var(--c-ink); }

/* About */
.about__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(34px,5vw,68px); align-items: start; }
.about__photo { border-radius: var(--r-md); overflow: hidden; aspect-ratio: 4/5; border: 1px solid var(--c-line); position: sticky; top: 100px; }
.about__body p { margin: 0 0 18px; }
.about__values { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 30px 0; }
.about__values .v { border: 1px solid var(--c-line); border-radius: var(--r-md); padding: 22px; }
.about__values .v b { font-family: var(--f-head); font-weight: 400; font-size: 1.15rem; display: block; margin-bottom: 6px; }
.about__values .v small { color: var(--c-neutral); font-size: 14px; line-height: 1.5; }
.placeholder-note { display: none !important; }

/* Contact */
.contact__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(34px,5vw,60px); align-items: start; }
.form { display: grid; gap: 18px; }
.field { display: grid; gap: 8px; }
.field.row2 { grid-template-columns: 1fr 1fr; gap: 18px; }
.field label { font-size: 13.5px; font-weight: 600; color: var(--c-primary); }
.field label .req { color: var(--c-accent); }
.input, .textarea, .select { width: 100%; padding: 13px 15px; font-family: inherit; font-size: 15px; color: var(--c-ink); background: var(--c-paper); border: 1px solid var(--c-line); border-radius: var(--r-sm); transition: border-color .2s, box-shadow .2s; }
.input:focus, .textarea:focus, .select:focus { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(73,97,109,.12); }
.textarea { min-height: 130px; resize: vertical; }
.check-row { display: flex; gap: 11px; align-items: flex-start; font-size: 14px; color: var(--c-neutral); }
.check-row input { margin-top: 4px; width: 17px; height: 17px; accent-color: var(--c-primary); flex: none; }
.form__status { font-size: 14px; padding: 12px 16px; border-radius: var(--r-sm); display: none; }
.form__status.ok { display: block; background: rgba(37,211,102,.12); color: #1a7a44; border: 1px solid rgba(37,211,102,.3); }
.form__status.err { display: block; background: rgba(203,80,64,.1); color: #a63a2c; border: 1px solid rgba(203,80,64,.3); }
.input.invalid, .textarea.invalid { border-color: #c0503f; box-shadow: 0 0 0 3px rgba(192,80,63,.12); }

.contact-aside { display: grid; gap: 14px; }
.ci { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; border: 1px solid var(--c-line); border-radius: var(--r-md); background: var(--c-paper); }
.ci__icn { width: 40px; height: 40px; border-radius: 9px; background: var(--c-light); display: grid; place-items: center; color: var(--c-primary); flex: none; }
.ci b { font-family: var(--f-head); font-weight: 400; font-size: 1.05rem; display: block; }
.ci a, .ci span { color: var(--c-neutral); font-size: 14.5px; }
.ci a:hover { color: var(--c-primary); }
.map { border-radius: var(--r-md); overflow: hidden; aspect-ratio: 16/10; border: 1px solid var(--c-line); margin-top: 6px; }

/* Scroll reveal – base state is VISIBLE; only below-fold elements get hidden by JS */
[data-anim] { transition: opacity .7s var(--ease), transform .7s var(--ease); }
[data-anim].anim-hidden { opacity: 0; transform: translateY(22px); }
[data-anim][data-delay="1"] { transition-delay: .08s; }
[data-anim][data-delay="2"] { transition-delay: .16s; }
[data-anim][data-delay="3"] { transition-delay: .24s; }
[data-anim][data-delay="4"] { transition-delay: .32s; }

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
  [data-anim] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .btn, .card, .svc, .pf__img .ph, .opt { transition: none !important; }
}

/* Responsive */
@media (max-width: 1080px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__art { min-height: 380px; max-width: 520px; }
  .why__inner, .web__inner, .about__grid, .contact__grid { grid-template-columns: 1fr; }
  .about__photo { position: static; }
  .svc-detail { grid-template-columns: 1fr; }
  .svc-detail:nth-child(even) .svc-detail__media { order: 0; }
}
@media (max-width: 1180px) {
  .topbar { display: none; }
  .nav__links, .nav__right .btn { display: none; }
  .hamburger { display: block; }
  .nav__right { gap: 8px; }
  .nav { height: 74px; }
  .brand { margin-right: auto; }
  .nav__right .lang { display: inline-flex; min-height: 42px; border-color: rgba(203,141,64,.55); box-shadow: 0 4px 18px rgba(73,97,109,.12); }
  .nav__right .lang a { min-width: 42px; min-height: 40px; justify-content: center; padding: 8px 12px; font-size: 13.5px; }
  .mobile-nav { inset-block-start: 74px; }
  .mobile-nav .m-lang { display: none; }
}
@media (max-width: 920px) {
  .hamburger { display: block; }
  .nav__right { gap: 8px; }
  .problem-grid, .social__opts, .tst-grid, .pf-grid { grid-template-columns: 1fr 1fr; }
  .proc-grid { grid-template-columns: 1fr 1fr; gap: 36px 30px; }
  .proc + .proc { border-left: 0; padding-left: 0; }
  .proc__line { display: none; }
  .footer__top { grid-template-columns: 1fr 1fr; gap: 34px; }
}
@media (max-width: 680px) {
  body { font-size: 16px; }
  .svc-grid, .problem-grid, .social__opts, .tst-grid, .pf-grid, .feat-list, .about__values, .field.row2,
  .scard-grid, .stats__grid, .review-grid, .blog-grid { grid-template-columns: 1fr; }
  .pf-item.is-wide { grid-column: span 1; }
  .proc-grid { grid-template-columns: 1fr; gap: 28px; }
  .footer__top { grid-template-columns: 1fr; }
  .hero__cta .btn, .cta-band__btns .btn { width: 100%; justify-content: center; }
  .wa-float { right: 16px; bottom: 16px; }
  .site-header .wrap { padding-inline: 14px; }
  .nav { gap: 6px; }
  .brand { gap: 8px; }
  .brand__logo { width: 36px; height: auto; }
  .brand__name b { font-size: 17px; }
  .brand__name small { font-size: 9px; }
  .nav__right { gap: 6px; }
  .theme-toggle { width: 40px; height: 40px; }
  .hamburger { width: 42px; height: 42px; }
  .nav__right .lang a { min-width: 38px; padding-inline: 9px; }
}

/* ============================================================
   Polish rebuild – extra components
   ============================================================ */

/* Top utility bar */
.topbar { background: var(--c-primary); color: rgba(255,255,255,.85); font-size: 13px; }
.topbar__inner { display: flex; align-items: center; justify-content: space-between; height: 40px; }
.topbar__contact { display: flex; gap: 24px; }
.topbar__contact a { display: inline-flex; align-items: center; gap: 7px; color: rgba(255,255,255,.85); transition: color .2s; }
.topbar__contact a:hover { color: #fff; }
.topbar__contact .ti { display: inline-flex; color: var(--c-warm); }
.topbar__social { display: flex; gap: 8px; }
.topbar__social a { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 5px; color: rgba(255,255,255,.85); transition: background .2s, color .2s; }
.topbar__social a:hover { background: rgba(255,255,255,.12); color: #fff; }
@media (max-width: 920px) { .topbar { display: none; } }

/* Generic split section (image + text) */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(34px,5vw,72px); align-items: center; }
.split--single { grid-template-columns: minmax(0, 820px); justify-content: center; }
.split--single > * { max-width: 820px; width: 100%; }
.split--media-right .split__media { order: 2; }
.split__media { border-radius: var(--r-md); overflow: hidden; aspect-ratio: 4/5; border: 1px solid var(--c-line); position: relative; }
.split__media.is-wide { aspect-ratio: 5/4; }
.split__media .badge-float { position: absolute; left: 18px; bottom: 18px; background: var(--c-paper); border-radius: var(--r-sm); padding: 12px 16px; box-shadow: var(--shadow-md); font-size: 13px; max-width: 70%; }
.split__media .badge-float b { font-family: var(--f-head); font-weight: 400; display: block; font-size: 1.05rem; color: var(--c-ink); }
@media (max-width: 1080px) { .split { grid-template-columns: 1fr; } .split--media-right .split__media { order: 0; } .split__media { aspect-ratio: 16/10; max-width: 560px; } }

/* Service cards with media (6) */
.scard-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; margin-top: 50px; }
@media (max-width: 920px) { .scard-grid { grid-template-columns: 1fr 1fr; } }
.scard { display: flex; flex-direction: column; background: var(--c-paper); border: 1px solid var(--c-line); border-radius: var(--r-md); overflow: hidden; transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s; }
.scard:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: rgba(203,141,64,.45); }
.scard__media { aspect-ratio: 16/10; position: relative; overflow: hidden; border-bottom: 1px solid var(--c-line); }
.scard__media .ph { transition: transform .6s var(--ease); }
.scard:hover .scard__media .ph { transform: scale(1.05); }
.scard__num { position: absolute; top: 14px; left: 14px; width: 36px; height: 36px; border-radius: 50%; background: var(--c-paper); color: var(--c-primary); display: grid; place-items: center; font-family: var(--f-head); font-size: 14px; box-shadow: var(--shadow-sm); }
.scard__num--inline { position: static; margin-bottom: 18px; background: var(--c-cream); box-shadow: none; }
.scard--text-only .scard__body { padding-top: 34px; }
.scard__body { padding: 26px 26px 30px; display: flex; flex-direction: column; flex: 1; }
.scard__body h3 { font-size: 1.32rem; margin-bottom: 10px; }
.scard__body p { color: var(--c-neutral); font-size: 15px; margin: 0 0 18px; }
.scard__more { margin-top: auto; font-weight: 600; font-size: 14px; color: var(--c-primary); display: inline-flex; gap: .5em; align-items: center; transition: gap .3s var(--ease), color .25s; }
.scard:hover .scard__more { gap: .85em; color: var(--c-accent-d); }

/* Stats band */
.stats { background: var(--c-navy); color: #fff; }
.stats__grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 30px; }
@media (max-width: 920px) { .stats__grid { grid-template-columns: 1fr 1fr; gap: 38px 24px; } }
.stat { text-align: center; position: relative; }
.stat + .stat::before { content: ""; position: absolute; left: -15px; top: 12%; height: 76%; width: 1px; background: rgba(255,255,255,.16); }
@media (max-width: 920px) { .stat + .stat::before { display: none; } }
.stat__num { font-family: var(--f-head); font-size: clamp(2.6rem,5vw,3.6rem); line-height: 1; color: var(--c-warm); }
.stat__label { margin-top: 10px; font-size: 14.5px; color: rgba(255,255,255,.82); }

/* Reviews (real testimonials) */
.review-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 22px; margin-top: 46px; }
@media (max-width: 920px) { .review-grid { grid-template-columns: 1fr; } }
.review { background: var(--c-paper); border: 1px solid var(--c-line); border-radius: var(--r-md); padding: 32px 32px 28px; display: flex; flex-direction: column; }
.review__stars { color: var(--c-gold); letter-spacing: 3px; font-size: 16px; }
.review__text { margin: 16px 0 22px; line-height: 1.7; color: var(--c-ink); font-size: 15.5px; }
.review__who { display: flex; align-items: center; gap: 14px; margin-top: auto; }
.review__ava { width: 48px; height: 48px; border-radius: 50%; overflow: hidden; border: 1px solid var(--c-line); flex: none; }
.review__ava img { width: 100%; height: 100%; object-fit: cover; }
.review__who b { font-family: var(--f-head); font-weight: 400; font-size: 1.08rem; }
.review__who small { display: block; color: var(--c-neutral); font-size: 13px; }
.reviews-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 40px; }
.reviews-cta .btn { background: var(--c-paper); }
@media (max-width: 560px) { .reviews-cta .btn { width: 100%; justify-content: center; } }

/* Partners strip — infinite marquee (right to left) */
.partners__row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; margin-top: 44px; }
.partners__marquee { margin-top: 44px; position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.partners__track { display: flex; gap: 18px; width: max-content; animation: pb-marquee 38s linear infinite; }
.partners__marquee:hover .partners__track { animation-play-state: paused; }
.partners__track .partner { width: 156px; height: 156px; flex: none; }
@keyframes pb-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .partners__track { animation: none; } .partners__marquee { overflow-x: auto; } }
.partner { width: 100%; height: auto; aspect-ratio: 1 / 1; background: var(--c-paper); border: 1px solid var(--c-line); border-radius: var(--r-lg); display: grid; place-items: center; box-shadow: var(--shadow-sm); transition: transform .35s var(--ease), box-shadow .35s var(--ease); overflow: hidden; }
.partner:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.partner.has-slot > image-slot, .partner.has-slot > img { position: absolute !important; inset: 18px; width: auto !important; height: auto !important; max-width: calc(100% - 36px); max-height: calc(100% - 36px); object-fit: contain; filter: grayscale(1); opacity: .72; transition: filter .35s var(--ease), opacity .35s var(--ease); }
.partner.has-slot:hover > image-slot, .partner.has-slot:hover > img { filter: grayscale(0); opacity: 1; }
@media (max-width: 920px) { .partners__row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .partners__row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .partners__track .partner { width: 132px; height: 132px; } }

/* Blog teaser */
.blog-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; margin-top: 46px; }
.bpost { display: flex; flex-direction: column; border: 1px solid var(--c-line); border-radius: var(--r-md); overflow: hidden; background: var(--c-paper); transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.bpost:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.bpost__media { aspect-ratio: 16/9; border-bottom: 1px solid var(--c-line); }
.bpost__body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.bpost--text-only .bpost__body { padding-top: 30px; }
.bpost__cat { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-accent-d); font-weight: 600; }
.bpost__title { font-family: var(--f-head); font-size: 1.25rem; line-height: 1.3; margin: 10px 0 14px; }
.bpost__more { margin-top: auto; font-weight: 600; font-size: 14px; color: var(--c-primary); }
@media (max-width: 920px) { .blog-grid { grid-template-columns: 1fr; } }

/* Generic hidden (filters) */
.is-hidden { display: none !important; }

/* Blog listing extras */
.bpost__media { position: relative; }
.bpost__date { font-size: 12.5px; color: var(--c-neutral); display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.bpost__date::before { content: ""; width: 16px; height: 1px; background: var(--c-accent); }
.bpost__excerpt { color: var(--c-neutral); font-size: 14.5px; line-height: 1.6; margin: 0 0 16px; }

/* Article (single post) */
.article { max-width: 760px; margin-inline: auto; }
.article__meta { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; color: var(--c-neutral); font-size: 14px; margin-top: 18px; }
.article__meta .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--c-accent); }
.article__cat { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-accent-d); font-weight: 600; }
.article__hero-img { margin: 34px auto 0; max-width: 980px; border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 16/8; position: relative; border: 1px solid var(--c-line); }
.article__hero-img > image-slot { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; display: block; }
.article__hero-img > image-slot::part(frame) { border-radius: 0; }
.article__figure .fig-slot > image-slot { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; display: block; }
.article__figure .fig-slot > image-slot::part(frame) { border-radius: 0; }
.article__body { font-size: 17px; line-height: 1.8; color: var(--c-ink); }
.article__body > * { max-width: 760px; margin-inline: auto; }
.article__body h2 { font-size: clamp(1.5rem,2.4vw,2rem); margin: 40px auto 14px; color: var(--c-ink); }
.article__body h3 { font-size: 1.3rem; margin: 28px auto 10px; color: var(--c-ink); }
.article__body p { margin: 0 auto 20px; }
.article__body ul, .article__body ol { margin: 0 auto 20px; padding-left: 22px; display: grid; gap: 8px; }
.article__body img, .article__body image-slot { display: block; }
.article__quote { border-left: 3px solid var(--c-accent); padding: 6px 0 6px 24px; margin: 30px auto; font-family: var(--f-head); font-size: 1.4rem; line-height: 1.4; color: var(--c-primary); }
.article__figure { margin: 30px auto; max-width: 860px; }
.article__figure .fig-slot { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 16/9; position: relative; border: 1px solid var(--c-line); }
.article__figure figcaption { text-align: center; font-size: 13px; color: var(--c-neutral); margin-top: 10px; }
.article__share { display: flex; align-items: center; gap: 12px; margin: 38px auto 0; max-width: 760px; padding-top: 24px; border-top: 1px solid var(--c-line); }
.article__share span { font-size: 14px; font-weight: 600; color: var(--c-primary); }
.article__share a { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--c-line); display: grid; place-items: center; color: var(--c-primary); transition: background .2s, color .2s, transform .2s; }
.article__share a:hover { background: var(--c-primary); color: #fff; transform: translateY(-2px); }
.author-box { display: flex; gap: 20px; align-items: center; max-width: 760px; margin: 38px auto 0; padding: 26px; background: var(--c-cream); border-radius: var(--r-xl); }
.author-box__photo { width: 84px; height: 84px; border-radius: 50%; overflow: hidden; flex: none; border: 1px solid var(--c-line); position: relative; }
.author-box__photo img { width: 100%; height: 100%; object-fit: cover; }
.author-box h4 { font-family: var(--f-head); font-weight: 400; font-size: 1.2rem; margin: 0 0 4px; }
.author-box p { margin: 0; font-size: 14.5px; color: var(--c-neutral); line-height: 1.6; }
@media (max-width: 560px) { .author-box { flex-direction: column; text-align: center; } }

/* ============================================================
   WOW LAYER – soft shapes, gradient orbs, arch/blob frames,
   curved dividers, floating cards. Added for the redesign.
   ============================================================ */

/* Soften existing components (less square) */
.scard, .pf, .review, .bpost, .opt, .svc, .problem, .card,
.svc-detail__media, .split__media, .ci, .map, .browser, .mk,
.input, .textarea, .select, .partner, .offer-note, .why__quote,
.solution-bar, .svc-extra, .about__photo, .about__values .v { border-radius: var(--r-lg); }
.hero__badge, .filter, .lang { border-radius: var(--r-pill); }
.scard__media, .bpost__media { border-radius: 0; }
.scard__num { border-radius: 50%; }

/* Decorative gradient orbs – drop into any position:relative section */
.orb { position: absolute; border-radius: 50%; filter: blur(8px); pointer-events: none; z-index: 0; opacity: .55; }
.orb--warm { background: radial-gradient(circle at 35% 35%, rgba(244,217,181,.9), rgba(244,217,181,0) 70%); }
.orb--gold { background: radial-gradient(circle at 35% 35%, rgba(203,141,64,.5), rgba(203,141,64,0) 70%); }
.orb--blue { background: radial-gradient(circle at 35% 35%, rgba(73,97,109,.35), rgba(73,97,109,0) 70%); }

/* floating soft dots cluster */
.dots { position: absolute; width: 110px; height: 110px; z-index: 0; pointer-events: none;
  background-image: radial-gradient(rgba(73,97,109,.28) 1.6px, transparent 1.7px);
  background-size: 16px 16px; opacity: .5; }

/* Arch frame (editorial / feminine) for portrait photos */
.arch { position: relative; }
.arch__img { position: relative; z-index: 2; overflow: hidden;
  border-radius: 50% 50% var(--r-lg) var(--r-lg) / 38% 38% var(--r-lg) var(--r-lg);
  box-shadow: var(--shadow-lg); background: var(--c-light); }
.arch__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.arch__ring { position: absolute; inset: -18px -18px auto -18px; height: 60%; z-index: 1;
  border: 1.5px solid var(--c-accent); opacity: .5;
  border-radius: 50% 50% 0 0 / 60% 60% 0 0; }
.arch__plate { position: absolute; right: -14px; bottom: 40px; z-index: 3;
  background: var(--c-paper); border-radius: var(--r-lg); box-shadow: var(--shadow-md);
  padding: 16px 20px; display: flex; align-items: center; gap: 13px; max-width: 70%; }
.arch__plate .ic { width: 40px; height: 40px; border-radius: 50%; background: var(--grad-warm);
  display: grid; place-items: center; color: var(--c-accent-d); flex: none; }
.arch__plate b { font-family: var(--f-head); font-weight: 400; font-size: 1.02rem; display: block; line-height: 1.1; }
.arch__plate small { color: var(--c-neutral); font-size: 12.5px; }

/* Blob frame – organic rounded mask */
.blob { overflow: hidden; box-shadow: var(--shadow-lg);
  border-radius: 56% 44% 47% 53% / 56% 52% 48% 44%; }
.blob img { width: 100%; height: 100%; object-fit: cover; }

/* Curved section divider (top or bottom) */
.curve-top, .curve-bottom { position: relative; }
.curve-top::before, .curve-bottom::after {
  content: ""; position: absolute; left: 0; right: 0; height: clamp(40px, 6vw, 90px);
  background: inherit; z-index: 1; }
.curve-top::before { top: -1px; border-radius: 0 0 50% 50% / 0 0 100% 100%; transform: scaleX(1.4); }

/* Gradient text accent */
.grad-text { background: linear-gradient(120deg, var(--c-accent) 0%, var(--c-gold) 60%, var(--c-accent-d) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* ---- Redesigned HERO with photo ---- */
.hero--wow { position: relative; background:
  radial-gradient(1100px 540px at 88% -8%, rgba(244,217,181,.5), transparent 60%),
  radial-gradient(800px 500px at 0% 110%, rgba(73,97,109,.08), transparent 60%); overflow: clip; }
.hero--wow .hero__grid { grid-template-columns: 1.02fr .98fr; }
.hero__photo { position: relative; min-height: 480px; display: grid; place-items: center; }
.hero__photo .arch__img { width: min(420px, 86%); aspect-ratio: 0.9; }
.hero__photo .orb--gold { width: 300px; height: 300px; right: 2%; top: 4%; }
.hero__photo .orb--blue { width: 220px; height: 220px; left: -4%; bottom: 2%; }
.hero__photo .dots { right: -6px; top: 30px; }
.hero__float { position: absolute; z-index: 4; background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.7);
  border-radius: var(--r-lg); box-shadow: var(--shadow-md); padding: 14px 18px; }
.hero__float--tl { left: -2%; top: 12%; display: flex; align-items: center; gap: 12px; }
.hero__float--tl .ic { width: 40px; height: 40px; border-radius: 50%; background: var(--grad-primary); color: #fff; display: grid; place-items: center; flex: none; }
.hero__float--tl b { font-family: var(--f-head); font-size: 1.05rem; display: block; line-height: 1; }
.hero__float--tl small { color: var(--c-neutral); font-size: 12px; }
.hero__float--br { right: 0; bottom: 8%; max-width: 220px; }
.hero__float--br .stars { color: var(--c-gold); letter-spacing: 2px; font-size: 13px; }
.hero__float--br p { margin: 6px 0 0; font-size: 12.5px; color: var(--c-ink); line-height: 1.45; }
@media (max-width: 1080px) {
  .hero__photo { min-height: 0; margin-top: 12px; }
  .hero__photo .arch__img { width: min(360px, 80%); }
}
@media (max-width: 560px) {
  .hero__float--br { display: none; }
  .hero__float--tl { left: 0; top: 4%; }
}

/* Section intro with gradient eyebrow chip */
.chip { display: inline-flex; align-items: center; gap: 9px; padding: 8px 16px 8px 12px;
  background: var(--c-paper); border: 1px solid var(--c-line); border-radius: var(--r-pill);
  font-size: 12.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--c-accent-d);
  box-shadow: var(--shadow-sm); }
.chip .chip__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--grad-warm); }

/* Feature row inside expanded service blocks */
.mini-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 22px 0; }
.mini { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border: 1px solid var(--c-line);
  border-radius: var(--r-md); background: var(--c-paper-soft); transition: transform .3s var(--ease), border-color .3s; }
.mini:hover { transform: translateY(-3px); border-color: rgba(203,141,64,.4); }
.mini .ic { width: 34px; height: 34px; border-radius: 10px; background: var(--grad-warm); color: var(--c-accent-d);
  display: grid; place-items: center; flex: none; }
.mini b { font-family: var(--f-head); font-weight: 400; font-size: 1.02rem; display: block; margin-bottom: 2px; }
.mini small { color: var(--c-neutral); font-size: 13px; line-height: 1.45; }
@media (max-width: 560px) { .mini-grid { grid-template-columns: 1fr; } }

/* O mnie photo upgrade */
.about__photo.arch__img { aspect-ratio: 0.82; position: sticky; top: 100px; border: 0; }
@media (max-width: 1080px) { .about__photo.arch__img { position: static; aspect-ratio: 4/5; max-width: 440px; } }

/* scard media gets a soft top accent on hover */
.scard { position: relative; }
.scard::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; z-index: 3;
  background: var(--grad-warm); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); border-radius: var(--r-lg) var(--r-lg) 0 0; }
.scard:hover::before { transform: scaleX(1); }

/* Make stat band richer */
.stats { position: relative; overflow: hidden; }
.stats .orb--gold { width: 380px; height: 380px; right: -4%; top: -30%; opacity: .4; }

/* ============================================================
   LIVE-SITE LIFT – full-bleed hero, gold quadrant, statement
   ============================================================ */

/* Full-bleed hero (matches live layout, lifted) */
.hero-fb { position: relative; min-height: clamp(560px, 86vh, 820px); display: flex; align-items: center;
  overflow: clip; isolation: isolate; }
.hero-fb__bg {
  position: absolute; inset: 0; z-index: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 72% 22%;
}
[data-hero="home"] .hero-fb__bg { background-image: url("img/export/hero-home-office.webp"); background-position: center; }
[data-hero="grafisch-ontwerp"] .hero-fb__bg { background-image: url("img/export/hero-grafisch-ontwerp.webp"); }
[data-hero="websites"] .hero-fb__bg { background-image: url("img/export/hero-websites.webp"); }
[data-hero="social-media"] .hero-fb__bg { background-image: url("img/export/hero-social-media.webp"); }
[data-hero="fotografie"] .hero-fb__bg { background-image: url("img/export/hero-fotografie.webp"); }
[data-hero="drukwerk"] .hero-fb__bg { background-image: url("img/export/hero-drukwerk.webp"); }
[data-hero="szkolenia-social-media"] .hero-fb__bg { background-image: url("img/export/hero-szkolenia-social-media.webp"); }
[data-hero="uslugi"] .hero-fb__bg { background-image: url("img/export/hero-uslugi.webp"); background-position: center; }
[data-hero="portfolio"] .hero-fb__bg { background-image: url("img/export/hero-portfolio.webp"); background-position: center; }
[data-hero="o-mnie"] .hero-fb__bg { background-image: url("img/export/hero-o-mnie.webp"); background-position: center; }
[data-hero="kontakt"] .hero-fb__bg { background-image: url("img/export/hero-uslugi.webp"); background-position: center; }
[data-hero="blog"] .hero-fb__bg { background-image: url("img/export/hero-szkolenia-social-media.webp"); background-position: center 42%; }
.hero-fb.has-parallax .hero-fb__bg { top: -22%; bottom: -22%; height: auto; will-change: transform; }
.hero-fb.has-parallax .hero-fb__bg image-slot,
.hero-fb.has-parallax .hero-fb__bg img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
.hero-fb__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 72% 22%; display: block; }

/* Hero edit button (editor only) */
.hero-edit { position: absolute; left: clamp(20px,5vw,64px); bottom: 22px; z-index: 5;
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.94); color: var(--c-ink); border: 0; border-radius: var(--r-pill);
  padding: 10px 16px; font-size: 13px; font-weight: 600; box-shadow: var(--shadow-md);
  cursor: pointer; transition: background .2s, transform .2s; }
.hero-edit:hover { background: var(--c-paper); transform: translateY(-2px); }
.hero-edit svg { color: var(--c-accent-d); }
@media (max-width: 760px) { .hero-edit { left: 50%; transform: translateX(-50%); bottom: 16px; } .hero-edit:hover { transform: translateX(-50%) translateY(-2px); } }
.hero-fb__overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(16,24,29,.95) 0%, rgba(16,24,29,.88) 28%, rgba(16,24,29,.6) 54%, rgba(16,24,29,.28) 78%, rgba(16,24,29,.12) 100%),
    linear-gradient(0deg, rgba(16,24,29,.55), rgba(16,24,29,0) 50%); }
.hero-fb .wrap { position: relative; z-index: 2; }
.hero-fb__inner { position: relative; z-index: 2; max-width: 680px; padding-block: clamp(60px,9vw,120px); color: #fff; }
.hero-fb .eyebrow { color: var(--c-warm); }
.hero-fb .eyebrow::before { background: var(--c-warm); }
.hero-fb h1 { color: #fff; margin: 18px 0 0; font-size: clamp(2.5rem, 5.4vw, 4.2rem); line-height: 1.04; }
.hero-fb h1 em { font-style: normal; color: var(--c-warm); }
.hero-fb__lead { color: rgba(255,255,255,.9); font-size: clamp(1.05rem,1.35vw,1.2rem); line-height: 1.7; max-width: 56ch; margin: 22px 0 0; }
.hero-fb__cta { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 14px; }
.hero-fb__trust { margin-top: 36px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.18);
  display: flex; flex-wrap: wrap; gap: 12px 26px; }
.hero-fb__trust span { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; color: rgba(255,255,255,.85); }
.hero-fb__trust span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c-warm); }
.hero-fb__badge { position: absolute; right: clamp(20px,5vw,64px); bottom: 34px; z-index: 3;
  display: flex; align-items: center; gap: 13px; background: rgba(255,255,255,.95); backdrop-filter: blur(8px);
  border-radius: var(--r-lg); padding: 14px 20px; box-shadow: var(--shadow-md); max-width: 280px; }
.hero-fb__badge .ic { width: 42px; height: 42px; border-radius: 50%; background: var(--grad-warm); color: var(--c-accent-d); display: grid; place-items: center; flex: none; }
.hero-fb__badge b { font-family: var(--f-head); font-weight: 400; font-size: 1.05rem; display: block; line-height: 1.1; }
.hero-fb__badge small { color: var(--c-neutral); font-size: 12.5px; }
@media (max-width: 760px) {
  [data-hero="home"] .hero-fb__bg { background-position: 68% center; }
  [data-hero="o-mnie"] .hero-fb__bg { background-position: 66% center; }
  .hero-fb__bg img { object-position: 68% 18%; }
  .hero-fb__overlay { background: linear-gradient(0deg, rgba(16,24,29,.95) 6%, rgba(16,24,29,.72) 55%, rgba(16,24,29,.58) 100%); }
  .hero-fb__badge { display: none; }
  .hero-fb { min-height: 0; }
  .hero-fb__inner { padding-block: clamp(48px,16vw,96px); }
}

/* Gold statement line */
.statement { background: var(--c-cream); text-align: center; }
.statement p { font-family: var(--f-head); font-size: clamp(1.5rem,2.8vw,2.3rem); line-height: 1.3;
  color: var(--c-accent-d); max-width: 22ch; margin: 0 auto; }
.statement .measure-lg { max-width: 30ch; }

/* Gold quadrant feature block (from live websites page) */
.quad-wrap { display: grid; grid-template-columns: .9fr 1.1fr; gap: 0; border: 1px solid var(--c-line);
  border-radius: var(--r-xl); overflow: hidden; background: var(--c-paper); box-shadow: var(--shadow-md); }
.quad-intro { background: var(--grad-warm); padding: clamp(34px,4vw,56px); display: flex; flex-direction: column; justify-content: center;
  position: relative; overflow: hidden; }
.quad-intro::after { content: ""; position: absolute; right: -40px; bottom: -40px; width: 200px; height: 200px;
  border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.4), transparent 70%); }
.quad-intro .ic { width: 52px; height: 52px; border-radius: 14px; background: rgba(255,255,255,.7); color: var(--c-accent-d);
  display: grid; place-items: center; margin-bottom: 20px; position: relative; z-index: 1; }
.quad-intro h3 { font-size: clamp(1.6rem,2.4vw,2.1rem); color: var(--c-ink); position: relative; z-index: 1; }
.quad-intro p { color: #5a4a30; margin: 14px 0 0; font-size: 15px; position: relative; z-index: 1; }
.quad-cells { display: grid; grid-template-columns: 1fr 1fr; }
.quad-cell { padding: clamp(26px,3vw,38px); border-left: 1px solid var(--c-line); border-top: 1px solid var(--c-line); }
.quad-cell:nth-child(-n+2) { border-top: 0; }
.quad-cell h4 { font-family: var(--f-head); font-weight: 400; font-size: 1.2rem; margin: 0 0 10px; display: flex; align-items: center; gap: 10px; }
.quad-cell h4 .n { color: var(--c-accent); font-size: 13px; }
.quad-cell p { color: var(--c-neutral); font-size: 14.5px; margin: 0; line-height: 1.6; }
@media (max-width: 860px) {
  .quad-wrap { grid-template-columns: 1fr; }
  .quad-cells { }
}
@media (max-width: 520px) {
  .quad-cells { grid-template-columns: 1fr; }
  .quad-cell { border-left: 0; }
  .quad-cell:nth-child(2) { border-top: 1px solid var(--c-line); }
}

/* FAQ accordion (live websites page) */
.faq { display: grid; gap: 12px; margin-top: 40px; }
.faq__item { border: 1px solid var(--c-line); border-radius: var(--r-md); background: var(--c-paper); overflow: hidden; }
.faq__q { width: 100%; text-align: left; background: none; border: 0; padding: 20px 24px; font-family: var(--f-body);
  font-size: 16px; font-weight: 600; color: var(--c-ink); display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.faq__q .pm { width: 24px; height: 24px; flex: none; position: relative; }
.faq__q .pm::before, .faq__q .pm::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--c-accent); }
.faq__q .pm::before { width: 14px; height: 1.8px; transform: translate(-50%,-50%); }
.faq__q .pm::after { width: 1.8px; height: 14px; transform: translate(-50%,-50%); transition: transform .3s var(--ease); }
.faq__item.open .pm::after { transform: translate(-50%,-50%) scaleY(0); }
.faq__a { max-height: 0; overflow: hidden; transition: max-height .35s var(--ease); }
.faq__a p { margin: 0; padding: 0 24px 22px; color: var(--c-neutral); font-size: 15px; line-height: 1.65; }

/* Warm section helper */
.bg-cream { background: var(--c-cream); }
.bg-light { background: var(--c-light); }

/* Newsletter band */
.newsletter { background: var(--grad-warm); padding: clamp(40px,6vw,68px) 0; }
.newsletter__inner { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(24px,4vw,56px); align-items: center; }
.newsletter__copy h2 { color: var(--c-ink); font-size: clamp(1.6rem,2.8vw,2.2rem); }
.newsletter__copy p { color: #5a4a30; margin: 12px 0 0; max-width: 46ch; }
.newsletter__row { display: flex; gap: 10px; }
.newsletter__form .input { background: #fff; border-color: rgba(0,0,0,.08); flex: 1; }
.newsletter__form .btn { white-space: nowrap; }
.newsletter__consent { font-size: 12.5px; color: #6b5b3e; margin: 12px 0 0; }
.newsletter__status { margin: 12px 0 0; font-size: 14px; font-weight: 600; color: #1a7a44; }
@media (max-width: 860px) { .newsletter__inner { grid-template-columns: 1fr; } }
@media (max-width: 460px) { .newsletter__row { flex-direction: column; } .newsletter__form .btn { justify-content: center; } }

/* Service page: benefits grid */
.ben-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; margin-top: 48px; }
.ben { background: var(--c-paper); border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: 30px 28px;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s; }
.ben:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: rgba(203,141,64,.4); }
.ben__ic { width: 48px; height: 48px; border-radius: 14px; background: var(--grad-warm); color: var(--c-accent-d);
  display: grid; place-items: center; margin-bottom: 18px; }
.ben h3 { font-size: 1.22rem; margin: 0 0 8px; }
.ben p { color: var(--c-neutral); font-size: 14.5px; margin: 0; line-height: 1.6; }
@media (max-width: 920px) { .ben-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .ben-grid { grid-template-columns: 1fr; } }

/* Related services */
.rel-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 30px; }
.rel { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 22px 26px;
  border: 1px solid var(--c-line); border-radius: var(--r-lg); background: var(--c-paper); font-family: var(--f-head);
  font-size: 1.15rem; color: var(--c-ink); transition: transform .3s var(--ease), box-shadow .3s, border-color .3s, color .25s; }
.rel:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: rgba(203,141,64,.45); color: var(--c-accent-d); }
.rel .arr { color: var(--c-accent); flex: none; }
@media (max-width: 760px) { .rel-grid { grid-template-columns: 1fr; } }

/* Light breadcrumb on dark hero */
.breadcrumb--light, .breadcrumb--light a { color: rgba(255,255,255,.8); }
.breadcrumb--light a:hover { color: #fff; }
.breadcrumb--light .sep { color: rgba(255,255,255,.4); }

/* Service hero a touch shorter than home */
.hero-fb--service { min-height: clamp(440px, 64vh, 600px); }

/* Nav "Popularne" tag + flagged service card */
.nav__menu-tag { display: inline-block; margin-left: 8px; font-family: var(--f-body); font-size: 10px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--c-accent-d); background: var(--c-warm);
  padding: 2px 8px; border-radius: var(--r-pill); vertical-align: middle; }
.scard--flag { border-color: rgba(203,141,64,.5); box-shadow: 0 0 0 1px rgba(203,141,64,.25), var(--shadow-sm); }
.scard__flag { position: absolute; top: 14px; right: 14px; z-index: 3; font-size: 11px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: #fff; background: var(--c-accent); padding: 5px 12px; border-radius: var(--r-pill); }

/* ===== Training (flagship) page ===== */
/* Big hero variant */
.hero-fb--xl { min-height: clamp(560px, 84vh, 760px); }
.hero-fb--xl .hero-fb__inner { max-width: 760px; }
.hero-fb__pills { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 10px; }
.hero-fb__pills .p { font-size: 13px; font-weight: 600; color: #fff; background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22); border-radius: var(--r-pill); padding: 8px 15px; }

/* Curriculum grid (15 topics) */
.curric { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 48px; }
.curric__item { display: flex; gap: 14px; align-items: flex-start; background: var(--c-paper); border: 1px solid var(--c-line);
  border-radius: var(--r-md); padding: 20px 20px; transition: transform .3s var(--ease), box-shadow .3s, border-color .3s; }
.curric__item:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: rgba(203,141,64,.4); }
.curric__n { font-family: var(--f-head); font-size: 1.05rem; color: var(--c-accent); flex: none; width: 30px; }
.curric__item b { font-family: var(--f-head); font-weight: 400; font-size: 1.08rem; display: block; margin-bottom: 4px; line-height: 1.2; }
.curric__item small { color: var(--c-neutral); font-size: 13px; line-height: 1.5; }
@media (max-width: 920px) { .curric { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .curric { grid-template-columns: 1fr; } }

/* Format cards (individual / group) */
.fmt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 46px; }
.fmt { border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: 36px 34px; background: var(--c-paper); position: relative; overflow: hidden; }
.fmt--accent { background: var(--grad-primary); color: #fff; border-color: transparent; }
.fmt__ic { width: 52px; height: 52px; border-radius: 14px; background: var(--grad-warm); color: var(--c-accent-d); display: grid; place-items: center; margin-bottom: 20px; }
.fmt--accent .fmt__ic { background: rgba(255,255,255,.16); color: #fff; }
.fmt h3 { font-size: 1.5rem; margin-bottom: 10px; }
.fmt > p { color: var(--c-neutral); margin: 0 0 18px; font-size: 15px; }
.fmt--accent > p { color: rgba(255,255,255,.85); }
.fmt ul { display: grid; gap: 10px; margin: 0 0 22px; }
.fmt li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; }
.fmt li .chk { color: var(--c-accent); flex: none; margin-top: 3px; }
.fmt--accent li .chk { color: var(--c-warm); }
@media (max-width: 760px) { .fmt-grid { grid-template-columns: 1fr; } }

/* Who it's for */
.who-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px 28px; margin-top: 38px; }
.who-grid li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; padding: 12px 0; border-bottom: 1px solid var(--c-line); }
.who-grid li .ic { width: 30px; height: 30px; border-radius: 50%; background: var(--c-warm); color: var(--c-accent-d); display: grid; place-items: center; flex: none; font-size: 14px; }
@media (max-width: 680px) { .who-grid { grid-template-columns: 1fr; } }

/* Expansion / future offer cards */
.exp-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-top: 44px; }
.exp { border: 1px dashed rgba(203,141,64,.5); border-radius: var(--r-lg); padding: 26px 24px; background: var(--c-paper-soft); }
.exp__tag { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-accent-d); }
.exp h3 { font-size: 1.25rem; margin: 12px 0 8px; }
.exp p { color: var(--c-neutral); font-size: 14px; margin: 0; line-height: 1.55; }
@media (max-width: 920px) { .exp-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .exp-grid { grid-template-columns: 1fr; } }
.exp--live { border-style: solid; border-color: var(--c-line); background: var(--c-paper); }
.exp__tag--soon { color: var(--c-neutral); }
.exp__tag--live { color: var(--c-accent-d); }
.offer-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; margin-top: 30px; }
@media (max-width: 920px) { .offer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .offer-grid { grid-template-columns: 1fr; } }
.offer-sublabel { display: flex; align-items: center; gap: 12px; margin: 0 0 4px; font-family: var(--f-head); font-size: 1.2rem; color: var(--c-ink); }
.offer-sublabel::after { content: ""; flex: 1; height: 1px; background: var(--c-line); }

/* Inline mid-page CTA strip */
.cta-strip { background: var(--grad-warm); border-radius: var(--r-xl); padding: clamp(30px,4vw,48px); display: flex;
  align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; position: relative; overflow: hidden; }
.cta-strip::after { content: ""; position: absolute; right: -50px; top: -50px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.4), transparent 70%); }
.cta-strip__txt { position: relative; z-index: 1; max-width: 560px; }
.cta-strip__txt h3 { font-size: clamp(1.5rem,2.4vw,2rem); color: var(--c-ink); margin: 0 0 8px; }
.cta-strip__txt p { margin: 0; color: #5a4a30; font-size: 15.5px; }
.cta-strip .btn { position: relative; z-index: 1; flex: none; }

/* Real logo in header/footer */
.brand__logo { width: 40px; height: auto; display: block; flex: none; }
.footer__brand .brand__logo { background: var(--c-paper); border-radius: 10px; padding: 7px; box-shadow: var(--shadow-sm); }

/* Designed hero fallback (premium, no stock photo needed) */
.hero-fb--designed { background:
    radial-gradient(1200px 700px at 78% -10%, rgba(203,141,64,.34), transparent 58%),
    radial-gradient(900px 600px at 10% 120%, rgba(73,97,109,.34), transparent 60%),
    linear-gradient(135deg, #1b2730 0%, #14202a 55%, #0f1920 100%); }
.hero-fb--designed .hero-fb__overlay { background:
    linear-gradient(90deg, rgba(16,24,29,.62) 0%, rgba(16,24,29,.34) 50%, rgba(16,24,29,.12) 100%); }
.hero-fb--designed::after { content: ""; position: absolute; right: -4%; top: 50%; transform: translateY(-50%);
  width: min(560px, 46vw); aspect-ratio: 1; z-index: 0; pointer-events: none; opacity: .14;
  background: url('img/logo-mark.png') center/contain no-repeat; filter: grayscale(1) brightness(2.2); }
@media (max-width: 760px) { .hero-fb--designed::after { opacity: .08; right: -20%; } }

/* Hero drag-and-drop photo slot */
.hero-fb__bg image-slot { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
.hero-fb__bg image-slot::part(frame) { background: transparent; border-radius: 0; }
.hero-fb__bg image-slot::part(empty) { color: rgba(255,255,255,.66); font-size: 13px; letter-spacing: .04em; background: transparent; border: 1px dashed rgba(255,255,255,.22); }

/* ============================================================
   PRODUCT MOCKUPS (drukwerk) — CSS-rendered, branded with logo
   ============================================================ */
.prod-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(34px,5vw,68px); align-items: center;
  padding-block: clamp(40px,5vw,64px); }
.prod-row--text-only { grid-template-columns: minmax(0, 820px); justify-content: center; }
.prod-row:nth-child(even) .prod-row__stage { order: -1; }
.prod-row__num { font-family: var(--f-head); color: var(--c-accent); font-size: 14px; letter-spacing: .2em; }
.prod-row h2 { font-size: clamp(1.7rem,2.6vw,2.3rem); margin: 12px 0 16px; }
.prod-row ul.checks { display: grid; gap: 9px; margin: 18px 0 26px; }
.prod-row ul.checks li { display: flex; gap: 11px; align-items: flex-start; font-size: 15px; }
.prod-row ul.checks li .chk { color: var(--c-accent); flex: none; margin-top: 3px; }
.prod-divider { border: 0; border-top: 1px solid var(--c-line); margin: 0; }

/* Studio stage that holds the mockup */
.stage { position: relative; border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 4/3;
  display: grid; place-items: center; padding: 8%;
  background: radial-gradient(120% 100% at 50% 0%, #fbf7f0 0%, #efe7da 60%, #e6dccb 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), var(--shadow-md); }
.stage--navy { background: radial-gradient(120% 100% at 50% 0%, #213240 0%, #16242f 70%, #0f1a22 100%); }
.stage--primary { background: radial-gradient(120% 100% at 50% 0%, #5a727e 0%, #455963 60%, #3a4e58 100%); }
.stage--warm { background: radial-gradient(120% 100% at 50% 0%, #f6e4c6 0%, #eed09c 70%, #e6c084 100%); }
.stage__shadow { position: absolute; left: 50%; bottom: 12%; width: 56%; height: 24px; transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.22), transparent 72%); filter: blur(3px); z-index: 0; }
.stage--navy .stage__shadow, .stage--primary .stage__shadow { background: radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.4), transparent 72%); }
.mk-logo { display: block; }

/* Business cards */
.m-cards { position: relative; width: 78%; z-index: 1; }
.m-card { position: absolute; inset: 0; border-radius: 12px; background: var(--c-paper); box-shadow: var(--shadow-lg);
  display: grid; place-items: center; }
.m-card--back { transform: rotate(-9deg) translate(-12%, 6%); background: linear-gradient(135deg,#fff,#f3eee5); }
.m-card--front { position: relative; aspect-ratio: 1.75/1; transform: rotate(4deg); }
.m-card--front .mk-logo { width: 56%; }
.m-card--front::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 12px; height: 3px; border-radius: 2px; background: var(--c-accent); opacity: .85; }

/* Flyer / paper */
.m-flyer { position: relative; width: 56%; aspect-ratio: 1/1.414; background: var(--c-paper); border-radius: 8px; z-index: 1;
  box-shadow: var(--shadow-lg); transform: rotate(-3deg); padding: 14% 12% 12%; display: flex; flex-direction: column; gap: 7%; }
.m-flyer__band { position: absolute; left: 0; right: 0; top: 0; height: 34%; background: var(--grad-primary); border-radius: 8px 8px 40% 40%/8px 8px 16% 16%; display: grid; place-items: center; }
.m-flyer__band .mk-logo { width: 44%; }
.m-flyer__lines { margin-top: 38%; display: grid; gap: 7px; }
.m-flyer__lines i { height: 6px; border-radius: 3px; background: #e7e0d4; display: block; }
.m-flyer__lines i:nth-child(2){ width: 86%; } .m-flyer__lines i:nth-child(3){ width: 92%; } .m-flyer__lines i:nth-child(4){ width: 70%; }
.m-flyer__chip { margin-top: auto; align-self: flex-start; font-size: 9px; font-weight: 700; letter-spacing: .1em; color: #fff; background: var(--c-accent); padding: 4px 9px; border-radius: 100px; }

/* Roll-up banner */
.m-rollup { position: relative; width: 46%; aspect-ratio: 1/2.1; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.m-rollup__panel { width: 100%; flex: 1; background: var(--c-paper); border-radius: 8px 8px 0 0; box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; align-items: center; gap: 10%; padding: 16% 12% 0; }
.m-rollup__panel .mk-logo { width: 50%; }
.m-rollup__panel .bar { width: 70%; height: 7px; border-radius: 4px; background: var(--c-accent); }
.m-rollup__panel .bar2 { width: 52%; height: 6px; border-radius: 4px; background: #e2dacd; }
.m-rollup__foot { width: 116%; height: 12px; background: linear-gradient(#cfc6b6,#b8ae9c); border-radius: 4px; box-shadow: var(--shadow-md); }

/* Mug */
.m-mug { position: relative; width: 50%; aspect-ratio: 1.15/1; z-index: 1; }
.m-mug__body { position: absolute; inset: 0 22% 0 0; background: linear-gradient(90deg,#e9e3d8 0%,#fff 22%,#fff 70%,#e3ddd1 100%); border-radius: 14px 14px 16px 16px; box-shadow: var(--shadow-lg); display: grid; place-items: center; }
.m-mug__body--navy { background: linear-gradient(90deg,#0e1a22 0%,#22323f 24%,#22323f 68%,#0e1a22 100%); }
.m-mug__body .mk-logo { width: 50%; }
.m-mug__handle { position: absolute; right: 6%; top: 24%; width: 26%; height: 52%; border: 11px solid #fff; border-left: none; border-radius: 0 60% 60% 0/0 50% 50% 0; }
.m-mug__handle--navy { border-color: #22323f; }

/* Tote bag */
.m-tote { position: relative; width: 52%; aspect-ratio: 1/1.12; background: linear-gradient(160deg,#f3ece0,#e7dcca); border-radius: 6px 6px 10px 10px; z-index: 1; box-shadow: var(--shadow-lg); display: grid; place-items: center; }
.m-tote--navy { background: linear-gradient(160deg,#22323f,#16242f); }
.m-tote::before, .m-tote::after { content: ""; position: absolute; top: -32%; width: 14%; height: 46%; border: 7px solid #e1d7c5; border-bottom: none; border-radius: 60% 60% 0 0; }
.m-tote--navy::before, .m-tote--navy::after { border-color: #2c3e4b; }
.m-tote::before { left: 22%; } .m-tote::after { right: 22%; }
.m-tote .mk-logo { width: 46%; }

/* T-shirt */
.m-tee { position: relative; width: 72%; aspect-ratio: 1/0.96; z-index: 1; filter: drop-shadow(0 18px 30px rgba(0,0,0,.18)); }
.m-tee__body { position: absolute; inset: 0; background: var(--c-paper);
  clip-path: polygon(30% 8%, 38% 2%, 62% 2%, 70% 8%, 100% 22%, 90% 40%, 78% 33%, 78% 100%, 22% 100%, 22% 33%, 10% 40%, 0% 22%); }
.m-tee__body--navy { background: #22323f; }
.m-tee__body--primary { background: var(--c-primary); }
.m-tee .mk-logo { position: absolute; left: 50%; top: 42%; width: 26%; transform: translateX(-50%); }

/* Sticker sheet */
.m-stickers { position: relative; width: 76%; display: grid; grid-template-columns: repeat(3,1fr); gap: 9%; z-index: 1; }
.m-sticker { aspect-ratio: 1; background: var(--c-paper); border-radius: 50%; box-shadow: var(--shadow-md); display: grid; place-items: center; padding: 16%; }
.m-sticker:nth-child(2){ border-radius: 18px; } .m-sticker:nth-child(4){ border-radius: 18px; }
.m-sticker:nth-child(3){ transform: rotate(-8deg); } .m-sticker:nth-child(5){ transform: rotate(7deg); }
.m-sticker .mk-logo { width: 78%; }

/* Pens */
.m-pens { position: relative; width: 84%; height: 70%; z-index: 1; }
.m-pen { position: absolute; top: 50%; left: 0; width: 100%; height: 11px; border-radius: 8px; transform-origin: center;
  box-shadow: var(--shadow-md); }
.m-pen::after { content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 11%; height: 150%; background: #d7cdbb; border-radius: 0 3px 3px 0; clip-path: polygon(0 0,100% 22%,100% 78%,0 100%); }
.m-pen::before { content: ""; position: absolute; left: 7%; top: -120%; width: 4px; height: 120%; background: #c9bfad; }
.m-pen--1 { transform: rotate(-20deg) translateY(-220%); background: linear-gradient(90deg,#cb8d40,#b67c32); }
.m-pen--2 { transform: rotate(-20deg); background: linear-gradient(90deg,#49616d,#3a4e58); }
.m-pen--3 { transform: rotate(-20deg) translateY(220%); background: linear-gradient(90deg,#22323f,#16242f); }
.m-pen span { position: absolute; left: 30%; top: 50%; transform: translateY(-50%); height: 60%; width: 30%;
  background: center/contain no-repeat url('img/logo-mark-white.png'); opacity: .9; }

/* Cap */
.m-cap { position: relative; width: 60%; aspect-ratio: 1.5/1; z-index: 1; }
.m-cap__crown { position: absolute; left: 8%; right: 8%; top: 6%; height: 74%; background: linear-gradient(#fff,#efe9de); border-radius: 50% 50% 44% 44%/70% 70% 30% 30%; box-shadow: var(--shadow-lg); display: grid; place-items: center; }
.m-cap__crown--navy { background: linear-gradient(#263845,#16242f); }
.m-cap__crown .mk-logo { width: 30%; margin-top: 10%; }
.m-cap__brim { position: absolute; left: 0; right: 18%; bottom: 12%; height: 20%; background: linear-gradient(#e6dccb,#d2c8b6); border-radius: 0 0 60% 60%/0 0 100% 100%; box-shadow: var(--shadow-md); }
.m-cap__brim--navy { background: linear-gradient(#1c2c37,#0f1a22); }

/* Vehicle / sign panel */
.m-panel { position: relative; width: 80%; aspect-ratio: 16/9; background: linear-gradient(150deg,#22323f,#16242f); border-radius: 14px; z-index: 1; box-shadow: var(--shadow-lg); display: flex; align-items: center; gap: 8%; padding: 0 9%; }
.m-panel .mk-logo { width: 26%; }
.m-panel__txt { display: grid; gap: 8px; flex: 1; }
.m-panel__txt i { height: 7px; border-radius: 4px; background: rgba(255,255,255,.85); display: block; }
.m-panel__txt i:nth-child(1){ width: 80%; background: var(--c-accent); } .m-panel__txt i:nth-child(2){ width: 60%; } .m-panel__txt i:nth-child(3){ width: 44%; }

/* Mixed grid for "other materials" */
.m-mixed { position: relative; width: 86%; display: grid; grid-template-columns: repeat(3,1fr); gap: 12%; z-index: 1; }
.m-chip { aspect-ratio: 1; border-radius: 16px; background: var(--c-paper); box-shadow: var(--shadow-md); display: grid; place-items: center; padding: 18%; }
.m-chip--gold { background: var(--grad-warm); } .m-chip--navy { background: linear-gradient(150deg,#22323f,#16242f); }
.m-chip .mk-logo { width: 76%; }

@media (max-width: 1080px) {
  .prod-row { grid-template-columns: 1fr; gap: 28px; }
  .prod-row:nth-child(even) .prod-row__stage { order: 0; }
  .prod-row__stage { max-width: 460px; }
}

/* Drop-in product photo frames (drukwerk) */
.prod-slot { display: block; width: 100%; aspect-ratio: 4/3; border-radius: var(--r-xl);
  box-shadow: var(--shadow-md); overflow: hidden; }
.prod-slot::part(frame) { background:
  radial-gradient(120% 100% at 50% 0%, #fbf7f0 0%, #efe7da 55%, #e6dccb 100%); }
.prod-slot::part(empty) { color: var(--c-primary); }
.slot-hint { display: none !important; }
.prod-row__stage .slot-hint svg { color: var(--c-accent); flex: none; }

/* ============================================================
   Projekty graficzne — feature checklist, pricing, realizacje
   ============================================================ */
/* Two-column "w cenie otrzymujesz" checklist */
.feat-checklist { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; margin: 26px 0 30px; }
.feat-checklist li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.5; }
.feat-checklist li .ic { width: 26px; height: 26px; border-radius: 8px; background: var(--grad-warm); color: var(--c-accent-d); display: grid; place-items: center; flex: none; margin-top: 1px; }
.feat-checklist li b { font-family: var(--f-head); font-weight: 400; }
@media (max-width: 680px) { .feat-checklist { grid-template-columns: 1fr; } }

/* Realizacje slot grid (drop your own work) */
.work-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 18px; }
.work-grid image-slot,
.work-grid img { display: block; width: 100%; aspect-ratio: 1/1; border-radius: var(--r-lg); box-shadow: var(--shadow-sm); overflow: hidden; object-fit: contain; background: radial-gradient(120% 100% at 50% 0%, #fbf7f0 0%, #eee6d8 100%); }
.work-grid image-slot::part(frame) { background: radial-gradient(120% 100% at 50% 0%, #fbf7f0 0%, #eee6d8 100%); }
.work-grid image-slot::part(empty) { color: var(--c-primary); }
.work-grid.is-wide { grid-template-columns: repeat(3,1fr); }
.work-grid--cards image-slot,
.work-grid--cards img { aspect-ratio: 3/2; object-fit: cover; }
@media (max-width: 680px) { .work-grid { grid-template-columns: 1fr 1fr; } }

/* Pricing packages */
.pricing { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; margin-top: 46px; align-items: stretch; }
.price-card { display: flex; flex-direction: column; background: var(--c-paper); border: 1px solid var(--c-line); border-radius: var(--r-xl);
  padding: 34px 30px; position: relative; transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.price-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.price-card--featured { background: var(--grad-primary); color: #fff; border-color: transparent; box-shadow: var(--shadow-lg); }
.price-card__tag { position: absolute; top: 18px; right: 18px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--c-accent-d); background: var(--c-warm); padding: 5px 12px; border-radius: var(--r-pill); }
.price-card__name { font-family: var(--f-head); font-size: 1.5rem; }
.price-card__sub { font-size: 13.5px; color: var(--c-neutral); margin: 6px 0 0; }
.price-card--featured .price-card__sub { color: rgba(255,255,255,.75); }
.price-card__price { font-family: var(--f-head); font-size: 2.6rem; line-height: 1; margin: 22px 0 4px; }
.price-card__price small { font-size: 14px; color: var(--c-neutral); font-family: var(--f-body); }
.price-card--featured .price-card__price small { color: rgba(255,255,255,.7); }
.price-card__note { font-size: 12px; color: var(--c-neutral); margin: 0 0 20px; }
.price-card--featured .price-card__note { color: rgba(255,255,255,.7); }
.price-card ul { display: grid; gap: 11px; margin: 0 0 26px; }
.price-card li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; line-height: 1.45; }
.price-card li .chk { color: var(--c-accent); flex: none; margin-top: 2px; }
.price-card--featured li .chk { color: var(--c-warm); }
.price-card .btn { margin-top: auto; justify-content: center; }
.pricing-note { text-align: center; font-size: 13.5px; color: var(--c-neutral); margin-top: 22px; }
@media (max-width: 900px) { .pricing { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; } }

/* Section number label like live site */
.svc-sub { font-family: var(--f-head); color: var(--c-accent); font-size: 13px; letter-spacing: .2em; text-transform: uppercase; }
.badge-new { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #fff; background: var(--c-accent); padding: 4px 11px; border-radius: var(--r-pill); margin-bottom: 14px; }

/* Cookie consent banner */
.cookie { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%) translateY(140%);
  z-index: 95; width: min(680px, calc(100vw - 32px));
  background: var(--c-paper); border: 1px solid var(--c-line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg); padding: 22px 24px;
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  transition: transform .5s var(--ease-soft), opacity .4s; opacity: 0; }
.cookie.is-visible { transform: translateX(-50%) translateY(0); opacity: 1; }
.cookie__txt { flex: 1; min-width: 240px; }
.cookie__txt b { font-family: var(--f-head); font-weight: 400; font-size: 1.1rem; display: block; margin-bottom: 4px; }
.cookie__txt p { margin: 0; font-size: 13.5px; color: var(--c-neutral); line-height: 1.55; }
.cookie__txt a { color: var(--c-accent-d); text-decoration: underline; }
.cookie__btns { display: flex; gap: 10px; flex-wrap: wrap; }
.cookie__btn { padding: 11px 18px; font-size: 13.5px; }
@media (max-width: 560px) { .cookie { bottom: 12px; padding: 18px; } .cookie__btn { flex: 1; justify-content: center; } .wa-float { bottom: 92px; } }

/* Privacy / legal page */
.legal-doc { max-width: 820px; }
.legal-doc h2 { font-size: clamp(1.4rem,2.2vw,1.85rem); margin: 40px 0 12px; }
.legal-doc h2:first-child { margin-top: 0; }
.legal-doc h3 { font-size: 1.15rem; margin: 24px 0 8px; }
.legal-doc p, .legal-doc li { color: var(--c-ink); line-height: 1.7; font-size: 15.5px; }
.legal-doc ul { display: grid; gap: 8px; margin: 12px 0 12px; padding-left: 20px; list-style: disc; }
.legal-doc a { color: var(--c-accent-d); text-decoration: underline; }
.legal-doc .meta-upd { font-size: 13px; color: var(--c-neutral); }
.legal-note { background: var(--c-cream); border: 1px dashed rgba(203,141,64,.4); border-radius: var(--r-md); padding: 16px 18px; font-size: 14px; color: var(--c-accent-d); }