/* =========================================================
   SAMOCHODOWY RAJ — Design System
   Style: Techniczny Nowoczesny (steel navy / silver / amber)
   Type superfamily: IBM Plex (Sans + Mono)
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@200..800&display=swap');

:root{
  /* --- color tokens: 60 / 30 / 10 --- */
  --ink:        #0B121A;   /* deepest background */
  --navy:       #16212E;   /* dominant surface — 60% */
  --navy-light: #202F3F;   /* elevated panels/cards */
  --navy-glass: rgba(22,33,46,0.72);

  --silver-mute:  #8A95A3; /* secondary text / dividers — 30% */
  --silver:       #B9C4CE; /* body text on dark */
  --silver-bright:#EDF1F4; /* headings, high contrast */

  --accent:        #FF6A1A; /* amber/orange — 10% */
  --accent-bright: #FF8A47;
  --accent-glow:   rgba(255,106,26,0.38);

  --line: rgba(185,196,206,0.16);

  /* type */
  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-body:    'Bricolage Grotesque', system-ui, sans-serif;
  --font-mono:    'Bricolage Grotesque', system-ui, sans-serif;

  /* layout */
  --container: 1240px;
  --pad: clamp(20px, 5vw, 64px);
  --radius: 14px;
  --radius-sm: 8px;

  --ease: cubic-bezier(.16,.8,.24,1);
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *,*::before,*::after{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

body{
  margin:0;
  background: var(--ink);
  color: var(--silver);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1,h2,h3,h4{
  font-family: var(--font-display);
  color: var(--silver-bright);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.08;
  margin: 0 0 0.5em;
}
h1{ font-size: clamp(2.6rem, 6vw, 5rem); font-weight: 650; }
h2{ font-size: clamp(1.9rem, 4vw, 3.1rem); }
h3{ font-size: clamp(1.25rem, 2vw, 1.6rem); }
p{ margin: 0 0 1em; max-width: 60ch; }
a{ color: inherit; }

.eyebrow{
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 1.1em;
}
.eyebrow::before{
  content:'';
  width: 22px; height: 1.5px;
  background: var(--accent);
  display:inline-block;
}

.mono{ font-family: var(--font-mono); }

.container{ max-width: var(--container); margin: 0 auto; padding: 0 var(--pad); }
section{ position: relative; padding: clamp(64px, 10vw, 140px) 0; }

/* =========================================================
   Ambient animated background (site-wide, fixed, behind all)
   ========================================================= */
.bg-scene{
  position: fixed; inset: 0; z-index: -2;
  background: var(--ink);
  overflow: hidden;
}
.bg-scene::after{
  /* fine noise/grain texture — keeps large flat panels from looking dead,
     kept far away from CTA elements so it never competes with them */
  content:'';
  position:absolute; inset:-10%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.02 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.5;
  mix-blend-mode: overlay;
}
.bg-orb{
  position:absolute; border-radius:50%;
  filter: blur(70px);
  opacity: 0.55;
  will-change: transform;
}
.bg-orb--1{ width:46vw; height:46vw; top:-14vw; left:-10vw;
  background: radial-gradient(circle at 30% 30%, rgba(32,47,63,0.9), transparent 70%);
  animation: drift1 34s ease-in-out infinite; }
.bg-orb--2{ width:38vw; height:38vw; bottom:-12vw; right:-8vw;
  background: radial-gradient(circle at 60% 40%, rgba(255,106,26,0.14), transparent 70%);
  animation: drift2 28s ease-in-out infinite; }
.bg-orb--3{ width:30vw; height:30vw; top:40%; left:60%;
  background: radial-gradient(circle, rgba(138,149,163,0.16), transparent 72%);
  animation: drift3 40s ease-in-out infinite; }

@keyframes drift1{ 0%,100%{ transform: translate(0,0) scale(1);} 50%{ transform: translate(6vw,8vw) scale(1.12);} }
@keyframes drift2{ 0%,100%{ transform: translate(0,0) scale(1);} 50%{ transform: translate(-5vw,-6vw) scale(1.08);} }
@keyframes drift3{ 0%,100%{ transform: translate(0,0);} 50%{ transform: translate(-8vw,4vw);} }

/* full-bleed hero: background photo + centered overlay text */
.hero-full{
  position:relative; overflow:hidden;
  min-height: 92vh;
  display:flex; align-items:center;
  padding: 140px 0 90px;
}
.hero-bg{ position:absolute; inset:0; z-index:0; }
.hero-bg img{ width:100%; height:100%; object-fit:cover; display:block; }
.hero-bg-overlay{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 65% 55% at 50% 42%, rgba(11,18,26,0.55) 0%, rgba(11,18,26,0.15) 60%, transparent 100%),
    linear-gradient(180deg, rgba(11,18,26,0.72) 0%, rgba(11,18,26,0.62) 45%, var(--ink) 97%),
    linear-gradient(90deg, rgba(11,18,26,0.6), rgba(11,18,26,0.25) 35%, rgba(11,18,26,0.25) 65%, rgba(11,18,26,0.6));
}
@media (max-width:720px){ .hero-full{ min-height:82vh; } }

/* =========================================================
   Nav
   ========================================================= */
.site-nav{
  position: fixed; top:16px; left:50%; z-index: 100;
  transform: translateX(-50%);
  width: calc(100% - 32px);
  max-width: 1240px;
  border-radius: 999px;
  background: var(--navy-glass);
  backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 20px 48px -20px rgba(0,0,0,0.65);
}
.site-nav .container{ display:flex; align-items:center; justify-content:space-between; height: 90px; max-width:none; padding: 0 12px 0 20px; }
@media (max-width:900px){
  .site-nav{ top:10px; width:calc(100% - 20px); }
  .site-nav .container{ height:68px; padding:0 8px 0 16px; }
}
.brand{ display:flex; align-items:center; gap:16px; text-decoration:none; }
.brand img{ height: 72px; width:72px; }
.brand-word{ font-family: var(--font-display); font-weight:700; color: var(--silver-bright); font-size:1.45rem; letter-spacing:0.01em; line-height:1.1; }
.brand-word small{ display:block; font-family: var(--font-mono); font-weight:500; font-size:0.75rem; letter-spacing:0.18em; color: var(--silver-mute); margin-top:4px; }

.nav-links{ display:flex; align-items:center; gap: 34px; list-style:none; margin:0; padding:0; }
.nav-links a{
  text-decoration:none; color: var(--silver);
  font-family: var(--font-mono); font-size:0.82rem; letter-spacing:0.06em;
  text-transform: uppercase; position:relative; padding: 6px 0;
  transition: color .25s var(--ease);
}
.nav-links a::after{
  content:''; position:absolute; left:0; right:100%; bottom:0; height:2px; background: var(--accent);
  transition: right .3s var(--ease);
}
.nav-links a:hover{ color: var(--silver-bright); }
.nav-links a:hover::after, .nav-links a.active::after{ right:0; }
.nav-links a.active{ color: var(--accent); }

.nav-cta{ display:flex; align-items:center; gap:20px; }
.btn-sm{ padding:10px 18px; font-size:0.76rem; }

/* compact mobile header controls — hidden on desktop */
.nav-mobile{ display:none; align-items:center; gap:16px; }
.nav-mobile-link{
  text-decoration:none; color: var(--silver); font-family:var(--font-mono); font-size:0.78rem;
  letter-spacing:0.05em; text-transform:uppercase; transition: color .2s;
}
.nav-mobile-link:hover, .nav-mobile-link.active{ color: var(--accent); }

.nav-more{ position:relative; }
.nav-more-toggle{
  display:flex; align-items:center; gap:6px; background:none; border:none; cursor:pointer; padding:6px 2px;
  color: var(--silver); font-family:var(--font-mono); font-size:0.78rem; letter-spacing:0.05em; text-transform:uppercase;
}
.nav-more-toggle svg{ width:14px; height:14px; transition: transform .25s var(--ease); }
.nav-more-toggle[aria-expanded="true"]{ color: var(--silver-bright); }
.nav-more-toggle[aria-expanded="true"] svg{ transform: rotate(180deg); }

.nav-more-menu{
  position:absolute; top:calc(100% + 14px); right:0; min-width:170px; z-index:60;
  background: var(--navy-light); border:1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: 0 24px 50px -16px rgba(0,0,0,0.65);
  list-style:none; margin:0; padding:8px;
  opacity:0; transform: translateY(-8px); pointer-events:none;
  transition: opacity .22s var(--ease), transform .22s var(--ease);
}
.nav-more-menu.open{ opacity:1; transform:none; pointer-events:auto; }
.nav-more-menu a{
  display:block; padding:11px 12px; border-radius:6px; text-decoration:none;
  color: var(--silver); font-family:var(--font-mono); font-size:0.8rem; letter-spacing:0.04em; text-transform:uppercase;
  transition: background .2s, color .2s;
}
.nav-more-menu a:hover{ background: rgba(255,106,26,0.1); color: var(--silver-bright); }
.nav-more-menu a.active{ color: var(--accent); }

@media (max-width: 900px){
  .nav-links, .nav-cta{ display:none; }
  .nav-mobile{ display:flex; align-items:center; gap:18px; }
  .brand-word{ display:none; }
  .brand img{ height:44px; width:44px; }
  .nav-mobile-link{ font-size:0.74rem; }
  .nav-more-toggle{ font-size:0.74rem; padding:6px 2px; gap:4px; }
  .btn-sm{ padding:9px 13px; font-size:0.7rem; }
}


/* =========================================================
   Buttons — CTAs are always solid & high-contrast, never ghost
   ========================================================= */
.btn{
  font-family: var(--font-mono); font-weight:600; font-size:0.86rem; letter-spacing:0.05em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:10px;
  padding: 15px 28px; border-radius: 999px; text-decoration:none; border: none; cursor:pointer;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
  white-space: nowrap;
}
.btn-primary{
  background: linear-gradient(135deg, var(--accent-bright), var(--accent));
  color: var(--ink);
  box-shadow: 0 8px 30px -8px var(--accent-glow), 0 0 0 1px rgba(255,255,255,0.06) inset;
}
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 14px 36px -8px var(--accent-glow), 0 0 0 1px rgba(255,255,255,0.1) inset; }

/* header CTA (desktop "Umów wizytę" / mobile "Kontakt") — same solid button, just without the glow */
.site-nav .btn-primary{ box-shadow: 0 0 0 1px rgba(255,255,255,0.06) inset; }
.site-nav .btn-primary:hover{ box-shadow: 0 6px 16px -6px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.1) inset; }

/* island collapses on scroll, expands on hover — desktop only */
@media (min-width:901px){
  .site-nav{ transition: width .9s var(--ease); }
  .site-nav.scrolled{ width: 290px; }
  .site-nav.scrolled:hover{ width: min(calc(100% - 32px), 1240px); }

  .site-nav nav{ overflow:hidden; max-width:520px; transition: max-width .75s var(--ease), opacity .5s ease; }
  .brand-word{ overflow:hidden; max-width:220px; white-space:nowrap; transition: max-width .75s var(--ease), opacity .5s ease; }
  .site-nav.scrolled nav{ max-width:0; opacity:0; pointer-events:none; }
  .site-nav.scrolled .brand-word{ max-width:0; opacity:0; }
  .site-nav.scrolled:hover nav{ max-width:520px; opacity:1; pointer-events:auto; transition-delay:.2s; }
  .site-nav.scrolled:hover .brand-word{ max-width:220px; opacity:1; transition-delay:.2s; }

  .site-nav.scrolled .brand img{ animation: navHintPulse 2.6s ease-in-out infinite; }
  .site-nav.scrolled:hover .brand img{ animation:none; }
}
@keyframes navHintPulse{
  0%,100%{ filter: drop-shadow(0 0 0 rgba(255,106,26,0)); }
  50%{ filter: drop-shadow(0 0 9px rgba(255,106,26,0.5)); }
}
@media (prefers-reduced-motion: reduce){ .site-nav.scrolled .brand img{ animation:none; } }
.btn-secondary{
  background: var(--navy-light); color: var(--silver-bright);
  border: 1px solid var(--line);
}
.btn-secondary:hover{ border-color: var(--silver-mute); transform: translateY(-2px); }
.btn-lg{ padding: 19px 38px; font-size: 0.95rem; }
.btn:focus-visible{ outline: 2px solid var(--accent-bright); outline-offset: 3px; }

/* =========================================================
   Reveal-on-scroll
   ========================================================= */
/* ==========================================================
   Scroll reveal — original version (fade up)
   ========================================================== */
.reveal{ opacity:0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-visible{ opacity:1; transform:none; }
.reveal-stagger > *{ transition-delay: calc(var(--i, 0) * 90ms); }

@keyframes fadeUp{ from{ opacity:0; transform: translateY(22px);} to{ opacity:1; transform:none; } }
.hero-in{ opacity:0; animation: fadeUp .9s var(--ease) forwards; }
@media (prefers-reduced-motion: reduce){ .hero-in{ animation:none; opacity:1; } }


/* package pricing cards: hover scan-light sweep + pulsing glow on the featured tier */
/* pop-in variant for the package cards — used together with .reveal */
.reveal-pop{ transform: translateY(28px) scale(0.94); }
.reveal-pop.is-visible{ transform:none; }

.package-card{ position:relative; overflow:hidden; }
.package-card::after{
  content:''; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.08), transparent);
  transform: skewX(-20deg);
  transition: left .7s var(--ease);
  pointer-events:none;
}
.package-card:hover::after{ left:120%; }
.package-badge{
  position:absolute; top:20px; right:20px;
  background: var(--accent); color: var(--ink);
  font-family: var(--font-mono); font-weight:700; font-size:0.64rem; letter-spacing:0.07em;
  padding:5px 11px; border-radius:999px; text-transform:uppercase; white-space:nowrap;
}
@keyframes pulseGlow{
  0%,100%{ box-shadow: 0 20px 50px -24px rgba(255,106,26,0.22); }
  50%{ box-shadow: 0 26px 64px -18px rgba(255,106,26,0.4); }
}
.package-card--featured{ animation: pulseGlow 3.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce){ .package-card--featured{ animation:none; } .package-card::after{ display:none; } }

/* =========================================================
   Cards
   ========================================================= */
.card{
  background: linear-gradient(180deg, var(--navy-light), var(--navy));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px;
  position: relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.card::before{
  content:''; position:absolute; inset:0 0 auto 0; height:2px;
  background: linear-gradient(90deg, transparent, var(--silver-mute), transparent);
  opacity:0.5;
}
.card:hover{ transform: translateY(-6px); border-color: rgba(255,106,26,0.4); box-shadow: 0 20px 50px -20px rgba(0,0,0,0.6); }
.card .tag{ font-family: var(--font-mono); font-size:0.72rem; letter-spacing:0.18em; color: var(--accent); text-transform:uppercase; }

/* =========================================================
   Horizontal pinned-scroll showcase
   ========================================================= */
.hscroll{ position: relative; }
.hscroll-pin{ position: sticky; top:0; height:100vh; display:flex; align-items:center; overflow:hidden; }
.hscroll-track{ display:flex; gap: clamp(20px,3vw,40px); will-change: transform; padding: 0 var(--pad); }
.hscroll-progress{ position:absolute; bottom: 40px; left: var(--pad); right: var(--pad); height:2px; background: var(--line); }
.hscroll-progress span{ display:block; height:100%; background: var(--accent); width:0%; box-shadow: 0 0 10px var(--accent-glow); }
.hscroll-car{
  position:absolute; top:50%; left:0%; width:34px; height:auto;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 2px 6px var(--accent-glow));
  transition: left .05s linear;
  pointer-events:none;
}
.hscroll-hint{ position:absolute; bottom: 60px; right: var(--pad); font-family: var(--font-mono); font-size:0.7rem; letter-spacing:0.2em; color: var(--silver-mute); text-transform:uppercase; display:flex; align-items:center; gap:8px; }

.reduced-motion .hscroll{ height:auto !important; }
.reduced-motion .hscroll-pin{ position:static; height:auto; padding: 20px 0 60px; }
.reduced-motion .hscroll-track{ overflow-x:auto; scroll-snap-type:x mandatory; transform:none !important; padding-bottom: 20px; }
.reduced-motion .hscroll-track > *{ scroll-snap-align:start; }
.reduced-motion .hscroll-progress, .reduced-motion .hscroll-hint{ display:none; }
.reduced-motion .bg-orb{ animation:none; }

/* =========================================================
   Brushed metal divider / texture accents
   ========================================================= */
.brushed{
  height: 64px;
  background:
    repeating-linear-gradient(100deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, var(--navy-light), var(--navy));
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}

.grain{
  position:absolute; inset:0; pointer-events:none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix type='matrix' values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.035 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
}

/* =========================================================
   Footer
   ========================================================= */
.site-footer{ border-top: 1px solid var(--line); padding: 56px 0 32px; position:relative; }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; margin-bottom: 40px; }
.footer-grid h4{ font-size:0.82rem; text-transform:uppercase; letter-spacing:0.14em; color: var(--silver-mute); font-family:var(--font-mono); font-weight:500; margin-bottom:1em; }
.footer-grid ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
.footer-grid a{ text-decoration:none; color: var(--silver); font-size:0.92rem; transition: color .2s; }
.footer-grid a:hover{ color: var(--accent); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:24px; border-top:1px solid var(--line);
  font-family: var(--font-mono); font-size:0.75rem; color: var(--silver-mute); letter-spacing:0.04em; flex-wrap:wrap; gap:12px; }
@media (max-width: 720px){ .footer-grid{ grid-template-columns: 1fr; } }

/* =========================================================
   Utility layout
   ========================================================= */
.grid-2{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(24px,4vw,64px); align-items:center; }
.grid-3{ display:grid; grid-template-columns: repeat(3,1fr); gap: 26px; }
@media (max-width: 900px){ .grid-2, .grid-3{ grid-template-columns: 1fr; } }
.stack{ display:flex; flex-direction:column; }
.row{ display:flex; align-items:center; }
.gap-sm{ gap:12px;} .gap-md{ gap:20px;} .gap-lg{ gap:40px;}
.center-text{ text-align:center; margin-left:auto; margin-right:auto; }

.stat{ font-family: var(--font-mono); }
.stat .num{ font-size: clamp(2rem,3vw,2.8rem); color: var(--silver-bright); font-weight:600; display:block; line-height:1; }
.stat .label{ font-size:0.72rem; letter-spacing:0.14em; color: var(--silver-mute); text-transform:uppercase; }

hr.rule{ border:none; border-top:1px solid var(--line); margin: 48px 0; }

/* =========================================================
   Photo placeholders — swap for real <img> once photos arrive
   ========================================================= */
.photo-slot{
  position:relative; border-radius: var(--radius); overflow:hidden;
  background: linear-gradient(160deg, var(--navy-light), var(--navy));
  border: 1px dashed rgba(185,196,206,0.3);
  display:flex; align-items:center; justify-content:center;
  padding:28px; text-align:center;
}
.photo-slot .hint{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  color: var(--silver-mute); font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.05em; text-transform:uppercase;
  max-width:26ch; line-height:1.6;
}
.photo-slot svg{ width:28px; height:28px; opacity:0.6; flex:none; }

.photo-fill{ border-radius: var(--radius); overflow:hidden; }
.photo-fill img{ width:100%; height:100%; object-fit:cover; display:block; }

/* hero photo — thin rotating orange glow tracing the frame, like a chasing LED */
@property --angle{
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.hero-photo-frame{ position:relative; border-radius: var(--radius); padding:3px; }
.hero-photo-frame::before{
  content:''; position:absolute; inset:-8px; border-radius: inherit;
  background: conic-gradient(from var(--angle),
    transparent 0deg, transparent 270deg,
    rgba(255,106,26,0.12) 300deg, var(--accent) 340deg,
    var(--accent-bright) 355deg, var(--accent) 360deg);
  filter: blur(10px);
  animation: heroGlowSpin 6s linear infinite;
  z-index:0;
}
.hero-photo-frame .photo-fill{ position:relative; z-index:1; width:100%; height:100%; }
@keyframes heroGlowSpin{ to{ --angle: 360deg; } }
@media (prefers-reduced-motion: reduce){ .hero-photo-frame::before{ animation:none; } }

/* same glow effect, circular — for the logo mark */
.logo-glow-frame{ position:relative; border-radius:50%; padding:3px; display:inline-block; }
.logo-glow-frame::before{
  content:''; position:absolute; inset:-8px; border-radius:50%;
  background: conic-gradient(from var(--angle),
    transparent 0deg, transparent 270deg,
    rgba(255,106,26,0.12) 300deg, var(--accent) 340deg,
    var(--accent-bright) 355deg, var(--accent) 360deg);
  filter: blur(10px);
  animation: heroGlowSpin 6s linear infinite;
  z-index:0;
}
.logo-glow-frame img{ position:relative; z-index:1; display:block; }
@media (prefers-reduced-motion: reduce){ .logo-glow-frame::before{ animation:none; } }

.card-photo{
  height:130px; margin:-32px -32px 20px; overflow:hidden; position:relative;
  border-radius: var(--radius) var(--radius) 0 0;
}
.card-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.card-photo.photo-slot{
  padding:12px; border:none; border-bottom:1px dashed rgba(185,196,206,0.25);
}
.card-photo.photo-slot .hint{ font-size:0.6rem; max-width:19ch; gap:6px; line-height:1.4; }
.card-photo.photo-slot svg{ width:20px; height:20px; }

/* =========================================================
   Gallery masonry (placeholder tiles — swap for real photos)
   ========================================================= */
.masonry{ columns: 3 260px; column-gap: 22px; }
@media (max-width:700px){ .masonry{ columns: 1 260px; } }
.masonry .tile{ break-inside: avoid; margin-bottom: 22px; border-radius: var(--radius); overflow:hidden; position:relative; border: 1px solid var(--line); transition: transform .35s var(--ease), border-color .35s var(--ease); }
.masonry .tile:hover{ transform: translateY(-4px); border-color: rgba(255,106,26,0.4); }
.masonry .tile-inner{ aspect-ratio: var(--ar, 4/5); display:flex; align-items:center; justify-content:center; background: var(--tile-bg, linear-gradient(160deg, var(--navy-light), var(--navy))); position:relative; }
.masonry .tile-inner svg{ width:32%; height:32%; opacity:0.8; color: var(--silver-mute); }
.masonry .tile-inner img{ width:100%; height:100%; object-fit:cover; display:block; }
.masonry .tile .cap{ position:absolute; left:0; right:0; bottom:0; padding: 16px 18px; background: linear-gradient(to top, rgba(11,18,26,0.92), transparent); }
.masonry .tile .cap span{ display:block; color: var(--accent); font-family:var(--font-mono); font-size:0.66rem; letter-spacing:0.16em; text-transform:uppercase; margin-bottom:4px; }
.masonry .tile .cap strong{ display:block; color: var(--silver-bright); font-weight:600; font-size:0.92rem; }

/* =========================================================
   Form fields (kontakt.html)
   ========================================================= */
.field{ display:flex; flex-direction:column; gap:8px; margin-bottom:22px; }
.field label{ font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--silver-mute); }
.field input, .field select, .field textarea{
  background: var(--navy); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:14px 16px; color:var(--silver-bright); font-family:var(--font-body); font-size:0.95rem;
  transition: border-color .2s, box-shadow .2s;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-glow);
}
.field textarea{ resize:vertical; min-height:120px; }
.form-status{ font-family:var(--font-mono); font-size:0.85rem; min-height:1.2em; margin-top:14px; opacity:0; transition:opacity .3s; }
.form-status.is-visible{ opacity:1; color:var(--accent); }

.package-notice{
  display:flex; align-items:center; gap:10px;
  background: rgba(255,106,26,0.1); border:1px solid rgba(255,106,26,0.35);
  color: var(--accent-bright); font-family:var(--font-mono); font-size:0.8rem;
  padding:12px 16px; border-radius:var(--radius-sm); margin-bottom:22px;
}
.package-notice[hidden]{ display:none; }

.map-embed{ border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); height:260px; filter: grayscale(0.35) contrast(1.1) brightness(0.9); }
.map-embed iframe{ display:block; width:100%; height:100%; border:0; }

.contact-info-item{ display:flex; gap:14px; align-items:flex-start; margin-bottom:22px; }
.contact-info-item svg{ flex:none; width:22px; height:22px; color:var(--accent); margin-top:2px; }
.contact-info-item strong{ display:block; color:var(--silver-bright); font-size:0.95rem; margin-bottom:2px; }

::selection{ background: var(--accent); color: var(--ink); }

/* scrollbar */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background: var(--ink); }
::-webkit-scrollbar-thumb{ background: var(--navy-light); border-radius:10px; border: 2px solid var(--ink); }