/* ============================================================
   Portfolio UI kit — layout styles (composes DS components)
   ============================================================ */

.vjp-app{ background:var(--bg); overflow-x:hidden; }
.vjp-app section{ scroll-margin-top:90px; }
.vjp-main{ max-width:var(--container); margin:0 auto; padding:0 var(--gutter); }

/* ---------- NAV ------------------------------------------------ */
.vjp-nav{ position:fixed; top:18px; left:0; right:0; z-index:50; display:flex; justify-content:center; padding:0 var(--gutter); }
.vjp-nav__bar{ display:flex; align-items:center; gap:22px; width:min(var(--container), 100%); padding:9px 9px 9px 18px !important; }
.vjp-nav__brand{ display:flex; align-items:center; gap:10px; background:none; border:none; cursor:pointer; padding:0; }
.vjp-nav__mark{ width:30px; height:30px; }
.vjp-nav__name{ font-family:var(--font-display); font-weight:700; font-size:16px; letter-spacing:-.02em; color:var(--text-strong); white-space:nowrap; }
.vjp-nav__links{ display:flex; gap:4px; margin-left:auto; }
.vjp-nav__link{ font-family:var(--font-body); font-weight:600; font-size:15px; color:var(--text-body); background:none; border:none; cursor:pointer; padding:8px 14px; border-radius:var(--radius-pill); transition:var(--t-color), var(--t-transform); }
.vjp-nav__link:hover{ color:var(--primary); transform:translateY(-1px); }
.vjp-nav__right{ display:flex; align-items:center; gap:12px; }
.vjp-nav__avail{ white-space:nowrap; }
.vjp-nav__burger{ display:none; width:42px; height:42px; align-items:center; justify-content:center; border:none; background:var(--surface); border-radius:50%; cursor:pointer; color:var(--ink-900); box-shadow:var(--shadow-sm); }
.vjp-nav__sheet{ position:absolute; top:74px; left:var(--gutter); right:var(--gutter); background:var(--surface); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); padding:10px; display:flex; flex-direction:column; gap:4px; animation:ds-rise var(--dur-base) var(--ease-out); }
.vjp-nav__sheetlink{ text-align:left; font-family:var(--font-display); font-weight:600; font-size:18px; padding:12px 16px; border:none; background:none; border-radius:var(--radius-md); cursor:pointer; color:var(--text-strong); }
.vjp-nav__sheetlink:hover{ background:var(--surface-muted); }

/* ---------- HERO ----------------------------------------------- */
/* Full-bleed: pozadi/mesh pres celou sirku okna, obsah centrovany (viz __inner). */
.vjp-hero{ position:relative; padding:170px var(--gutter) 90px; overflow:hidden; }
.vjp-hero__mesh{ position:absolute; inset:-20% -10% auto -10%; height:120%; background:var(--grad-mesh); filter:saturate(120%); opacity:.85; z-index:0; pointer-events:none; animation:ds-float 9s var(--ease-in-out) infinite; }
.vjp-hero__inner{ position:relative; z-index:1; max-width:var(--container-wide); margin-inline:auto; display:grid; grid-template-columns:1.25fr .85fr; gap:48px; align-items:center; }
.vjp-hero__title{ font-size:var(--text-display); line-height:.94; letter-spacing:var(--ls-tighter); margin:18px 0 22px; }
.vjp-hero__lead{ font-size:var(--text-lead); color:var(--text-body); max-width:46ch; margin-bottom:30px; }
.vjp-hero__cta{ display:flex; gap:14px; flex-wrap:wrap; }
.vjp-rise{ animation:ds-rise var(--dur-slow) var(--ease-out) both; }

.vjp-hero__visual{ position:relative; aspect-ratio:4/5; }
.vjp-hero__portrait{ position:absolute; inset:0; border-radius:var(--radius-2xl); background:var(--surface); box-shadow:var(--shadow-lg); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; color:var(--ink-300, var(--ink-400)); border:2px dashed var(--border-strong); overflow:hidden; }
.vjp-hero__portrait::after{ content:""; position:absolute; inset:0; background:var(--grad-mesh); opacity:.5; mix-blend-mode:multiply; }
.vjp-hero__portraitnote{ font-family:var(--font-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-500); position:relative; z-index:1; }
/* Hero portrait photos — gentle crossfade between assets/hero/01, 02, … */
.vjp-hero__photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1.2s var(--ease-in-out, ease); z-index:1; }
.vjp-hero__photo.is-active{ opacity:1; }
/* When a real photo is present, drop the placeholder chrome (dashed border,
   icon, note, mesh tint) so the portrait looks finished. */
.vjp-hero__portrait:has(.vjp-hero__photo){ border:none; }
.vjp-hero__portrait:has(.vjp-hero__photo)::after{ display:none; }
.vjp-hero__portrait:has(.vjp-hero__photo) > svg,
.vjp-hero__portrait:has(.vjp-hero__photo) .vjp-hero__portraitnote{ display:none; }
.vjp-hero__chip{ position:absolute !important; z-index:4 !important; display:flex !important; align-items:center; gap:8px; font-family:var(--font-display); font-weight:700; padding:12px 16px !important; }
.vjp-hero__chip strong{ font-size:22px; }
.vjp-hero__chip span{ font-weight:500; color:var(--text-muted); font-family:var(--font-body); font-size:14px; }
.vjp-hero__chip--a{ top:8%; left:-34px; animation:ds-float 6s var(--ease-in-out) infinite; }
.vjp-hero__chip--b{ bottom:10%; right:-30px; animation:ds-float 7.5s var(--ease-in-out) infinite reverse; }

/* ---------- MARQUEE strip -------------------------------------- */
.vjp-marquee-strip{ border-block:var(--border-2) solid var(--ink-900); padding:18px 0; font-size:clamp(22px,3vw,34px); color:var(--text-strong); background:var(--cream-50); }

/* ---------- SECTION shell -------------------------------------- */
.vjp-section{ max-width:var(--container); margin:0 auto; padding:var(--section-y) var(--gutter); }
.vjp-section__head{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; margin-bottom:42px; }
.vjp-section__title{ font-size:var(--text-h2); margin:6px 0 0; }

/* ---------- WORK ----------------------------------------------- */
.vjp-work__filters{ display:flex; gap:8px; flex-wrap:wrap; }
.vjp-work__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.vjp-work__card{ overflow:hidden; display:flex; flex-direction:column; }
.vjp-work__thumb{ position:relative; aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.92); }
.vjp-work__thumb svg{ filter:drop-shadow(0 6px 16px rgba(0,0,0,.18)); transition:var(--t-transform); }
.vjp-work__card:hover .vjp-work__thumb svg{ transform:scale(1.12) rotate(-4deg); }
.vjp-work__year{ position:absolute; top:14px; left:14px; font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.1em; color:#fff; background:rgba(26,20,16,.32); padding:4px 9px; border-radius:var(--radius-pill); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.vjp-work__open{ position:absolute; top:12px; right:12px; width:38px; height:38px; border-radius:50%; background:rgba(255,253,249,.92); color:var(--ink-900); display:flex; align-items:center; justify-content:center; transform:translateY(-6px) scale(.7); opacity:0; transition:var(--t-transform), opacity var(--dur-base) var(--ease-out); }
.vjp-work__card:hover .vjp-work__open{ transform:translateY(0) scale(1); opacity:1; }
/* Real screenshot fills its frame and covers the gradient placeholder behind it. */
.vjp-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; z-index:1; }
.vjp-img--zoom{ cursor:zoom-in; }
/* Full-screen image viewer — shows the screenshot uncropped. */
.vjp-lightbox{ position:fixed; inset:0; z-index:2000; display:flex; align-items:center; justify-content:center; padding:5vmin; background:rgba(10,8,12,.9); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); animation:vjpLbFade .18s var(--ease-out, ease-out); cursor:zoom-out; }
.vjp-lightbox__img{ max-width:84vw; max-height:82vh; width:auto; height:auto; object-fit:contain; border-radius:var(--radius-lg); border:1.5px solid rgba(255,255,255,.16); animation:vjpGlow 3.4s ease-in-out infinite alternate; }
.vjp-lightbox__close{ position:fixed; top:20px; right:24px; z-index:2010; width:46px; height:46px; border-radius:50%; border:none; background:rgba(255,255,255,.16); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background var(--dur-base, .18s) ease, transform var(--dur-base, .18s) ease; }
.vjp-lightbox__close:hover{ background:rgba(255,255,255,.3); transform:rotate(90deg); }
/* Prev/next arrows + counter — tinted with the page colour (--primary). */
.vjp-lightbox__nav{ position:fixed; top:50%; transform:translateY(-50%); z-index:2010; width:54px; height:54px; border-radius:50%; border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.1); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); transition:background var(--dur-base, .18s) ease, transform var(--dur-base, .18s) ease, box-shadow var(--dur-base, .18s) ease, border-color var(--dur-base, .18s) ease; }
.vjp-lightbox__nav--prev{ left:18px; }
.vjp-lightbox__nav--next{ right:18px; }
.vjp-lightbox__nav:hover{ background:var(--primary); border-color:var(--primary); box-shadow:0 0 0 1px var(--primary), 0 0 26px 4px var(--primary); transform:translateY(-50%) scale(1.08); }
.vjp-lightbox__nav:active{ transform:translateY(-50%) scale(.95); }
.vjp-lightbox__counter{ position:fixed; bottom:24px; left:50%; transform:translateX(-50%); z-index:2010; font-family:var(--font-mono); font-size:13px; font-weight:600; letter-spacing:.08em; color:#fff; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.16); padding:6px 15px; border-radius:var(--radius-pill); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
@media (max-width:560px){
  .vjp-lightbox__nav{ width:46px; height:46px; }
  .vjp-lightbox__nav--prev{ left:10px; }
  .vjp-lightbox__nav--next{ right:10px; }
}
@keyframes vjpLbFade{ from{ opacity:0 } to{ opacity:1 } }
@keyframes vjpGlow{
  from{ box-shadow:0 0 0 1px rgba(255,77,141,.55), 0 0 22px 3px rgba(255,77,141,.5), 0 0 55px 12px rgba(255,77,141,.32), 0 0 110px 26px rgba(62,139,255,.18); }
  to{ box-shadow:0 0 0 1px rgba(62,139,255,.6), 0 0 28px 5px rgba(62,139,255,.55), 0 0 70px 16px rgba(62,139,255,.34), 0 0 120px 30px rgba(20,184,166,.22); }
}
html[data-motion="calm"] .vjp-lightbox__img{ animation:none; box-shadow:0 0 0 1px rgba(255,77,141,.5), 0 0 40px 8px rgba(255,77,141,.4), 0 0 90px 22px rgba(62,139,255,.25); }
.vjp-work__card:hover .vjp-work__thumb .vjp-img{ transform:scale(1.04); transition:var(--t-transform); }
.vjp-work__body{ padding:18px 20px 22px; }
.vjp-work__head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:6px; }
.vjp-work__head h3{ font-size:21px; margin:0; }
.vjp-work__body p{ color:var(--text-muted); font-size:15px; margin:0; }

/* ---------- ABOUT ---------------------------------------------- */
.vjp-about{ background:var(--cream-50); max-width:none; }
.vjp-about > *{ max-width:var(--container); margin-inline:auto; }
.vjp-about__grid{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; margin-bottom:48px; }
.vjp-about__statement{ font-size:var(--text-h2); line-height:1.05; letter-spacing:var(--ls-tight); margin:8px 0 0; }
.vjp-about__bio p{ font-size:var(--text-body-lg); color:var(--text-body); margin-bottom:16px; }
.vjp-about__tools{ display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; }
.vjp-about__stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.vjp-stat{ text-align:center; padding:26px 16px !important; }
.vjp-stat__num{ display:block; font-family:var(--font-display); font-weight:800; font-size:clamp(34px,4vw,52px); line-height:1; letter-spacing:-.03em; color:var(--text-strong); }
.vjp-stat__label{ display:block; margin-top:8px; font-size:14px; color:var(--text-muted); }

/* ---------- CONTACT -------------------------------------------- */
.vjp-contact__grid{ display:grid; grid-template-columns:1fr 1.05fr; gap:48px; align-items:center; }
.vjp-contact__title{ font-size:var(--text-h2); line-height:1.02; margin:8px 0 18px; }
.vjp-contact__lead{ font-size:var(--text-body-lg); color:var(--text-muted); max-width:42ch; margin-bottom:24px; }
.vjp-contact__mail{ display:inline-flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:700; font-size:20px; color:var(--text-strong); }
.vjp-contact__mail:hover{ color:var(--primary); }
.vjp-contact__socials{ display:flex; gap:10px; margin-top:26px; }
.vjp-contact__card{ display:flex; flex-direction:column; }
.vjp-contact__form{ display:flex; flex-direction:column; gap:18px; }
.vjp-contact__two{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.vjp-contact__done{ text-align:center; padding:30px 10px; display:flex; flex-direction:column; align-items:center; gap:10px; animation:ds-rise var(--dur-base) var(--ease-out); }
.vjp-contact__check{ width:64px; height:64px; border-radius:50%; background:var(--grad-lagoon); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:var(--glow-teal); margin-bottom:6px; }
.vjp-contact__done h3{ margin:0; font-size:24px; }
.vjp-contact__done p{ margin:0; color:var(--text-muted); }

/* ---------- CASE STUDY ----------------------------------------- */
.vjp-case{ padding:130px 0 40px; animation:ds-rise var(--dur-slow) var(--ease-out); }
.vjp-case__top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:28px; }
.vjp-case__hero{ max-width:none; }
.vjp-case__title{ font-size:var(--text-h1); margin:0 0 14px; max-width:18ch; }
.vjp-case__blurb{ font-size:var(--text-lead); color:var(--text-muted); max-width:60ch; }
.vjp-case__cover{ position:relative; margin:34px 0; aspect-ratio:16/7; border-radius:var(--radius-2xl); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.85); box-shadow:var(--shadow-lg); overflow:hidden; }
.vjp-case__covernote{ position:absolute; bottom:18px; font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.8); }
.vjp-case__meta{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; padding:26px 0; border-block:1px solid var(--border); margin-bottom:40px; }
.vjp-case__meta p{ margin:8px 0 0; font-size:17px; font-weight:600; color:var(--text-strong); }
.vjp-case__tools{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.vjp-case__result{ font-family:var(--font-display); }
.vjp-case__result em{ display:block; font-style:normal; font-size:13px; font-weight:500; color:var(--text-muted); }
.vjp-case__body{ max-width:var(--container-prose); margin:0 auto; }
.vjp-case__body h2{ font-size:var(--text-h3); margin:34px 0 12px; }
.vjp-case__body p{ font-size:var(--text-body-lg); line-height:var(--lh-relaxed); color:var(--text-body); }
.vjp-case__gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:40px 0; }
.vjp-case__shot{ overflow:hidden; }
.vjp-case__shotinner{ position:relative; aspect-ratio:3/4; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.vjp-case__next{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding:28px 32px; border-radius:var(--radius-xl); background:var(--surface); box-shadow:var(--shadow-sm); cursor:pointer; transition:var(--t-lift); margin-top:20px; }
.vjp-case__next:hover{ transform:translateY(-4px); box-shadow:var(--shadow-hover); }
.vjp-case__next h3{ font-size:30px; margin:6px 0 0; }
.vjp-case__nextarrow{ width:60px; height:60px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex:none; transition:var(--t-transform); }
.vjp-case__next:hover .vjp-case__nextarrow{ transform:translateX(6px) scale(1.06); }

/* ---------- FOOTER --------------------------------------------- */
.vjp-footer{ background:var(--ink-900); color:var(--cream-100); margin-top:var(--section-y); }
.vjp-footer__cta{ max-width:var(--container); margin:0 auto; padding:var(--section-y) var(--gutter) 60px; }
.vjp-footer__big{ font-size:clamp(2.5rem,7vw,6rem); line-height:.98; letter-spacing:var(--ls-tighter); color:var(--cream-50); margin:0 0 28px; }
.vjp-footer__mail{ display:inline-flex; align-items:center; gap:14px; font-family:var(--font-display); font-weight:700; font-size:clamp(1.4rem,3vw,2.4rem); color:var(--cream-100); background:none; border:none; cursor:pointer; padding:0; transition:var(--t-color); border-bottom:3px solid transparent; }
.vjp-footer__mail:hover{ color:var(--coral-400); border-bottom-color:var(--coral-500); }
.vjp-footer__bar{ max-width:var(--container); margin:0 auto; padding:28px var(--gutter); border-top:1px solid rgba(255,255,255,.12); display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.vjp-footer__brand{ display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:700; }
.vjp-footer__copy{ font-size:14px; color:var(--ink-400); }
.vjp-footer__socials{ display:flex; gap:8px; }
.vjp-footer__social{ width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--cream-100); background:rgba(255,255,255,.08); transition:var(--t-transform), background-color var(--dur-fast); }
.vjp-footer__social:hover{ background:var(--coral-500); color:#fff; transform:translateY(-3px); }

/* ---------- RESPONSIVE ----------------------------------------- */
@media (max-width:900px){
  .vjp-nav__links{ display:none; }
  .vjp-nav__burger{ display:flex; }
  .vjp-nav__avail{ display:none; }
  .vjp-hero__inner{ grid-template-columns:1fr; }
  .vjp-hero__visual{ max-width:340px; margin:0 auto; width:100%; }
  .vjp-hero__chip--a{ left:0; } .vjp-hero__chip--b{ right:0; }
  .vjp-work__grid{ grid-template-columns:repeat(2,1fr); }
  .vjp-about__grid, .vjp-contact__grid{ grid-template-columns:1fr; gap:30px; }
  .vjp-about__stats{ grid-template-columns:repeat(2,1fr); }
  .vjp-case__meta{ grid-template-columns:1fr; gap:18px; }
  .vjp-case__gallery{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .vjp-work__grid{ grid-template-columns:1fr; }
  .vjp-contact__two{ grid-template-columns:1fr; }
  .vjp-nav__name{ display:none; }
}

/* ============================================================
   SERVICES (added)
   ============================================================ */
.vjp-services{ background:var(--cream-50); max-width:none; }
.vjp-services > *{ max-width:var(--container); margin-inline:auto; }
.vjp-serv__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.vjp-serv__card{ display:flex !important; flex-direction:column; gap:14px; padding:26px !important; }
.vjp-serv__icon{ width:54px; height:54px; border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center; color:#fff; box-shadow:var(--shadow-sm); transition:var(--t-transform); }
.vjp-serv__card:hover .vjp-serv__icon{ transform:translateY(-3px) rotate(-5deg) scale(1.06); }
.vjp-serv__icon[data-i="0"]{ background:var(--grad-sunset); }
.vjp-serv__icon[data-i="1"]{ background:var(--grad-lagoon); }
.vjp-serv__icon[data-i="2"]{ background:var(--grad-warm); }
.vjp-serv__icon[data-i="3"]{ background:var(--grad-lagoon); }
.vjp-serv__icon[data-i="4"]{ background:linear-gradient(135deg,var(--teal-500),var(--blue-500)); }
.vjp-serv__title{ font-size:21px; margin:0; letter-spacing:-.01em; }
.vjp-serv__desc{ font-size:15px; color:var(--text-muted); margin:0; line-height:1.55; }
@media (max-width:900px){ .vjp-serv__grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .vjp-serv__grid{ grid-template-columns:1fr; } }

/* ============================================================
   VIBE / MOTION TWEAK LAYERS (added)
   Toggled via data-attributes on <html> by the Tweaks panel.
   ============================================================ */
/* — Lagoon: cool teal → blue — */
html[data-vibe="lagoon"]{
  --coral-500: var(--teal-500);
  --primary: var(--teal-500); --primary-hover: var(--teal-600); --primary-press: var(--teal-700);
  /* warm glow tokens -> cool, so the gradient button's default glow is teal, not orange */
  --glow-soft: 0 6px 24px rgba(20,184,166,0.24);
  --glow-coral: var(--glow-teal);
  --grad-sunset: var(--grad-lagoon);
  --grad-warm: linear-gradient(135deg,#14B8A6 0%,#3E8BFF 100%);
  --grad-border: linear-gradient(120deg,#14B8A6,#3E8BFF,#7C5CFF,#14B8A6);
  --grad-mesh:
    radial-gradient(60% 70% at 12% 18%, rgba(20,184,166,0.50) 0%, rgba(20,184,166,0) 60%),
    radial-gradient(55% 65% at 88% 12%, rgba(62,139,255,0.42) 0%, rgba(62,139,255,0) 60%),
    radial-gradient(70% 80% at 78% 88%, rgba(124,92,255,0.35) 0%, rgba(124,92,255,0) 62%),
    radial-gradient(60% 70% at 20% 92%, rgba(20,184,166,0.38) 0%, rgba(20,184,166,0) 60%),
    var(--cream-100);
}
/* — Magenta: bold pop — */
html[data-vibe="magenta"]{
  --coral-500: var(--pink-500);
  --primary: var(--pink-500); --primary-hover: var(--pink-600); --primary-press:#C71F5E;
  --grad-sunset: linear-gradient(120deg,#FF4D8D 0%,#B14DFF 52%,#FF6B4A 100%);
  --grad-warm: linear-gradient(135deg,#FF4D8D 0%,#FF6B4A 100%);
  --grad-border: linear-gradient(120deg,#FF4D8D,#B14DFF,#FF6B4A,#FF4D8D);
  --grad-mesh:
    radial-gradient(60% 70% at 12% 18%, rgba(255,77,141,0.52) 0%, rgba(255,77,141,0) 60%),
    radial-gradient(55% 65% at 88% 12%, rgba(177,77,255,0.42) 0%, rgba(177,77,255,0) 60%),
    radial-gradient(70% 80% at 78% 88%, rgba(255,107,74,0.42) 0%, rgba(255,107,74,0) 62%),
    radial-gradient(60% 70% at 20% 92%, rgba(244,183,64,0.36) 0%, rgba(244,183,64,0) 60%),
    var(--cream-100);
}
/* — Calm motion: freeze ambient drift — */
html[data-motion="calm"] .vjp-hero__mesh,
html[data-motion="calm"] .vjp-hero__chip--a,
html[data-motion="calm"] .vjp-hero__chip--b{ animation:none !important; }
html[data-motion="calm"] .vjp-rise{ animation:none !important; }

/* — Hero layout: big centered type, no portrait — */
html[data-hero="center"] .vjp-hero__inner{ grid-template-columns:1fr; text-align:center; max-width:980px; margin-inline:auto; }
html[data-hero="center"] .vjp-hero__visual{ display:none; }
html[data-hero="center"] .vjp-hero__lead{ margin-left:auto; margin-right:auto; }
html[data-hero="center"] .vjp-hero__cta{ justify-content:center; }
html[data-hero="center"] .vjp-hero__title{ font-size:clamp(3.2rem,1.2rem+9vw,7.5rem); }

/* ============================================================
   SMOOTH SCROLL + SCROLL-REVEAL (added)
   ============================================================ */
html{ scroll-behavior:smooth; }
.vjp-reveal{ opacity:0; transform:translateY(32px); will-change:opacity, transform; }
.vjp-reveal.is-in{ opacity:1; transform:none;
  transition:opacity .7s var(--ease-out), transform .85s var(--ease-spring); }
/* Animace vynuceny vzdy (viz tokens/motion.css). Puvodni reduce-motion blok
   ponechan v komentari pro pripadne obnoveni pristupnosti. */
/*
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .vjp-reveal, .vjp-reveal.is-in{ opacity:1 !important; transform:none !important; transition:none !important; }
}
*/

/* ============================================================
   DARK NEON THEME (added) — html[data-theme="dark"]
   Composes with the vibe layers (which set --primary + gradients).
   ============================================================ */
html[data-theme="dark"]{
  /* neutrals remapped: warm cream → deep violet-ink; ink text → light */
  --cream-50:  #100E1A;
  --cream-100: #0B0A12;   /* page */
  --cream-200: #1A1626;
  --cream-300: #241F33;
  --sand-400:  #2E2942;
  --sand-500:  #3A3450;

  --ink-900: #F4F1FF;     /* text-strong */
  --ink-800: #E2DDF3;
  --ink-700: #CBC5E0;
  --ink-600: #ABA4C4;
  --ink-500: #8C85A6;     /* muted */
  --ink-400: #6A6384;     /* faint */

  --surface:        #15121F;
  --surface-raised: #1B1729;
  --surface-muted:  #1B1729;
  --surface-sunken: #0E0C16;

  --border:        rgba(255,255,255,0.09);
  --border-strong: rgba(255,255,255,0.17);

  /* brighter neon accents for the secondary trio */
  --teal-500:#1FD9C2; --teal-600:#13B5A2; --teal-400:#54E7D6;
  --pink-500:#FF5C9A; --pink-600:#FF3D86;
  --blue-500:#5B9BFF;

  /* glass goes dark + frosty */
  --glass-fill:        rgba(22,19,34,0.55);
  --glass-fill-strong: rgba(22,19,34,0.72);
  --glass-border:      rgba(255,255,255,0.14);
  --glass-tint-coral:  rgba(255,107,74,0.16);
  --glass-tint-teal:   rgba(31,217,194,0.16);

  /* shadows → deep black + neon hover */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.5);
  --shadow-sm: 0 2px 10px rgba(0,0,0,0.5);
  --shadow-md: 0 12px 34px rgba(0,0,0,0.55);
  --shadow-lg: 0 26px 64px rgba(0,0,0,0.6);
  --shadow-xl: 0 40px 90px rgba(0,0,0,0.66);
  --shadow-hover: 0 0 0 1px color-mix(in srgb, var(--primary) 45%, transparent),
                  0 18px 54px color-mix(in srgb, var(--primary) 30%, transparent);
}
/* ambient neon backdrop behind everything */
html[data-theme="dark"] body{
  background:
    radial-gradient(70% 52% at 86% -6%, color-mix(in srgb, var(--primary) 18%, transparent), transparent 60%),
    radial-gradient(58% 44% at -4% 104%, rgba(255,92,154,0.13), transparent 62%),
    var(--cream-100);
  background-attachment:fixed;
}
html[data-theme="dark"] .vjp-app{ background:transparent; }

/* glow the clipped gradient type */
html[data-theme="dark"] .vj-gradtext{
  filter:drop-shadow(0 0 22px color-mix(in srgb, var(--primary) 55%, transparent));
}
/* buttons get a neon lift on hover */
html[data-theme="dark"] .vj-btn:hover{
  box-shadow:0 0 0 1px color-mix(in srgb, var(--primary) 50%, transparent),
             0 12px 34px color-mix(in srgb, var(--primary) 38%, transparent);
}
/* nav glass: subtle inner sheen + neon hairline */
html[data-theme="dark"] .vjp-nav__bar{
  box-shadow:0 10px 40px rgba(0,0,0,0.5),
             inset 0 1px 0 rgba(255,255,255,0.10);
}

/* marquee strip */
html[data-theme="dark"] .vjp-marquee-strip{
  background:#0E0C18;
  border-color:color-mix(in srgb, var(--primary) 42%, transparent);
  color:var(--text-strong);
  box-shadow:inset 0 0 90px color-mix(in srgb, var(--primary) 8%, transparent);
}

/* service icon tiles + work thumbs glow */
html[data-theme="dark"] .vjp-serv__icon{
  box-shadow:0 8px 28px color-mix(in srgb, var(--primary) 26%, transparent);
}
html[data-theme="dark"] .vjp-work__thumb{ box-shadow:inset 0 0 60px rgba(0,0,0,0.25); }
html[data-theme="dark"] .vjp-work__open{ background:rgba(15,13,24,0.92); color:#fff; }

/* hero floating chips read as frosted neon glass */
html[data-theme="dark"] .vjp-hero__chip{
  box-shadow:0 12px 34px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.06);
}
html[data-theme="dark"] .vjp-hero__chip span{ color:var(--text-muted); }

/* footer: deepest panel, light type, neon mail */
html[data-theme="dark"] .vjp-footer{ background:#08060F; color:var(--text-body); }
html[data-theme="dark"] .vjp-footer__big{ color:var(--text-strong);
  text-shadow:0 0 40px color-mix(in srgb, var(--primary) 30%, transparent); }
html[data-theme="dark"] .vjp-footer__mail{ color:var(--text-strong); }
html[data-theme="dark"] .vjp-footer__bar{ border-top-color:rgba(255,255,255,0.10); }
/* Soc. ikony: v tmavem tematu byla barva (cream-100) skoro cerna -> neviditelne.
   Svetla barva + jemny obrys, aby byly videt. Hover dal prebarvi na coral. */
html[data-theme="dark"] .vjp-footer__social{ color:var(--text-body); background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.16); }
html[data-theme="dark"] .vjp-footer__social:hover{ color:#fff; background:var(--primary); border-color:transparent; }

/* mobile burger stays visible on dark glass */
html[data-theme="dark"] .vjp-nav__burger{ background:var(--surface); color:var(--text-strong); }