/* ==========================================================================
   KRPELAN - design tokens
   ========================================================================== */
:root{
  --bg:           #09090c;
  --bg-alt:       #100f14;
  --bg-card:      #131218;
  --line:         rgba(243, 239, 230, 0.10);
  --line-strong:  rgba(243, 239, 230, 0.22);

  --ink:          #f3efe6;
  --ink-soft:     #cfc9bd;
  --muted:        #8c8794;

  --gold:         #c9a24b;
  --gold-bright:  #f0d38a;
  --violet:       #8b6cff;
  --blue:         #4f7cff;

  --font-display: 'Cinzel', serif;
  --font-accent:  'Cormorant Garamond', serif;
  --font-body:    'Inter', sans-serif;

  --container:    1160px;
  --ease:         cubic-bezier(.16,.84,.44,1);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; max-width: 100%; overflow-x: hidden; }

body{
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  max-width: 100%;
}

/* defensive: never let a long word/phrase force horizontal overflow on narrow screens */
h1, h2, h3, p, span, a, button, label, input, textarea{
  overflow-wrap: break-word;
  word-break: break-word;
}

img, svg{ display:block; max-width:100%; }
a{ color: inherit; text-decoration: none; }
ul, ol{ margin:0; padding:0; list-style:none; }
code{ font-family: ui-monospace, monospace; background: rgba(255,255,255,0.06); padding: .1em .4em; border-radius: 4px; font-size: .9em; }

::selection{ background: var(--gold); color: #101014; }

/* film grain overlay for texture */
.grain{
  position: fixed; inset: 0; pointer-events: none; z-index: 200;
  opacity: .035; mix-blend-mode: overlay;
  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' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ==========================================================================
   Global animated background - same canvas + vignette behind every section,
   fixed to the viewport so it never scrolls and there is no visible seam
   between the hero and the rest of the page.
   ========================================================================== */
/* Note: deliberately NOT using negative z-index here. position:fixed +
   negative z-index is a known WebKit/mobile-Safari bug where the fixed
   layer silently fails to paint (renders solid black) on real phones, even
   though it renders fine in desktop browsers and headless testing. Instead
   the background sits at z-index:0 and every content layer above it gets
   an explicit z-index of at least 1. */
.bg-canvas{
  position: fixed; inset: 0; z-index: 0;
  width: 100vw; height: 100vh;
  opacity: .45;
  background:
    radial-gradient(ellipse 60% 50% at 50% 20%, rgba(139,108,255,0.16), transparent 60%),
    radial-gradient(ellipse 50% 40% at 80% 80%, rgba(201,162,75,0.10), transparent 60%),
    var(--bg);
  /* force its own compositing layer - avoids another WebKit quirk where
     fixed elements sometimes don't repaint correctly during scroll */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}
.bg-vignette{
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 0%, transparent 35%, var(--bg) 96%);
}

.cursor-glow{
  position: fixed; top:0; left:0; width: 480px; height: 480px;
  border-radius: 50%; pointer-events: none; z-index: 2;
  transform: translate(-50%,-50%);
  background: radial-gradient(circle, rgba(139,108,255,0.10), rgba(139,108,255,0) 70%);
  transition: opacity .3s ease;
  opacity: 0;
}
.cursor-glow.active{ opacity: 1; }

/* ==========================================================================
   Layout helpers
   ========================================================================== */
main{ position: relative; z-index: 1; }
.section-inner{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 28px;
}
.section{ padding: 140px 0; position: relative; }

.eyebrow{
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--gold);
  letter-spacing: .04em;
  margin: 0 0 14px;
}
.section-title{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2rem, 4vw, 3rem);
  letter-spacing: .015em;
  margin: 0 0 22px;
  color: var(--ink);
}
.lede{
  font-size: 1.15rem;
  color: var(--ink-soft);
  max-width: 640px;
  margin: 0 0 50px;
  font-weight: 300;
}
.body-text{ color: var(--ink-soft); max-width: 620px; }

/* ==========================================================================
   Reveal-on-scroll
   ========================================================================== */
[data-reveal]{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
[data-reveal].is-visible{ opacity: 1; transform: translateY(0); }

/* ==========================================================================
   Header / nav
   ========================================================================== */
.site-header{
  position: fixed; top:0; left:0; right:0; z-index: 100;
  padding: 22px 0;
  transition: background .4s ease, padding .4s ease, border-color .4s ease;
  border-bottom: 1px solid transparent;
}
.site-header.scrolled{
  padding: 14px 0;
  background: rgba(9,9,12,0.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.header-inner{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 28px;
  display: flex; align-items: center; justify-content: space-between;
}
.logo-mark{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.3rem;
  letter-spacing: .12em;
  color: var(--ink);
}
.logo-mark.small{ font-size: 1rem; }
.main-nav{ display: flex; align-items: center; gap: 34px; }
.main-nav a{
  font-size: .92rem;
  letter-spacing: .03em;
  color: var(--ink-soft);
  position: relative;
  padding: 4px 0;
  transition: color .25s ease;
}
.main-nav a:not(.nav-cta)::after{
  content:''; position:absolute; left:0; bottom:-2px; width:0; height:1px;
  background: var(--gold); transition: width .3s ease;
}
.main-nav a:not(.nav-cta):hover{ color: var(--ink); }
.main-nav a:not(.nav-cta):hover::after{ width: 100%; }
.nav-cta{
  border: 1px solid var(--line-strong);
  padding: 8px 18px !important;
  border-radius: 999px;
  color: var(--ink) !important;
}
.nav-cta:hover{ border-color: var(--gold); color: var(--gold-bright) !important; }

.nav-toggle{
  /* must be a positioned element with a z-index above .main-nav, otherwise
     the fixed nav panel paints on top of it (position:static content always
     paints below positioned siblings, regardless of DOM order) and the
     button becomes unclickable - can't close the menu - while the panel is open */
  position: relative; z-index: 2;
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer; padding: 8px;
}
.nav-toggle span{ width: 22px; height: 1px; background: var(--ink); display: block; }

/* ==========================================================================
   Language switch
   ========================================================================== */
.lang-switch{
  display: flex; align-items: center; gap: 7px;
  margin-left: 28px;
  font-size: .8rem; letter-spacing: .04em;
}
.lang-sep{ color: var(--muted); }
.lang-btn{
  background: none; border: none; cursor: pointer;
  color: var(--muted); font-family: var(--font-body); font-size: .8rem;
  letter-spacing: .04em; padding: 4px 2px;
  transition: color .25s ease;
}
.lang-btn:hover{ color: var(--ink); }
.lang-btn.active{ color: var(--gold-bright); }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position: relative;
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.hero-content{
  position: relative; z-index: 2;
  text-align: center;
  max-width: 780px;
  padding: 0 28px;
}
.kicker{
  font-size: .82rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 26px;
}
.hero-title{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3.2rem, 10vw, 7.2rem);
  letter-spacing: .06em;
  margin: 0 0 26px;
  background: linear-gradient(180deg, var(--gold-bright) 0%, var(--gold) 45%, #8a713a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 60px rgba(201,162,75,0.25);
}
.hero-tagline{
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  color: var(--ink-soft);
  font-weight: 300;
  margin: 0 auto 44px;
  max-width: 620px;
}
.hero-tagline em{ color: var(--ink); font-style: italic; font-family: var(--font-accent); }

.hero-actions{ display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }

.btn{
  display: inline-block;
  padding: 14px 30px;
  border-radius: 999px;
  font-size: .92rem;
  letter-spacing: .03em;
  transition: all .3s var(--ease);
  border: 1px solid transparent;
}
.btn-primary{
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  color: #17140a;
  font-weight: 500;
  box-shadow: 0 0 0 rgba(201,162,75,0);
}
.btn-primary:hover{ box-shadow: 0 8px 30px rgba(201,162,75,0.35); transform: translateY(-2px); }
.btn-ghost{
  border-color: var(--line-strong);
  color: var(--ink);
}
.btn-ghost:hover{ border-color: var(--gold); color: var(--gold-bright); transform: translateY(-2px); }

/* ==========================================================================
   About
   ========================================================================== */
.about-grid{ display: block; }
.about-copy{ max-width: 760px; }
.about-copy .body-text + .body-text{ margin-top: 18px; }

.about-points{ margin-top: 36px; display: flex; flex-direction: column; gap: 22px; }
.about-point{ display: flex; gap: 18px; align-items: baseline; }
.about-point-num{ font-family: var(--font-display); color: var(--gold); font-size: .85rem; letter-spacing: .05em; }
.about-point-text{ color: var(--ink-soft); font-size: .98rem; }

/* ==========================================================================
   Offer cards
   ========================================================================== */
.offer-grid{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.offer-card{
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 36px 30px;
  transition: border-color .35s ease, transform .35s ease, background .35s ease;
}
.offer-card:hover{
  border-color: var(--line-strong);
  transform: translateY(-6px);
  background: linear-gradient(160deg, var(--bg-card), #17151d);
}
.offer-icon{
  width: 48px; height: 48px; color: var(--gold); margin-bottom: 22px;
}
.offer-card h3{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.15rem;
  margin: 0 0 12px;
  letter-spacing: .02em;
}
.offer-card p{ color: var(--muted); font-size: .95rem; margin: 0; }

/* ==========================================================================
   Process timeline
   ========================================================================== */
.timeline{ position: relative; max-width: 760px; margin-top: 60px; }
.timeline::before{
  content:''; position: absolute; left: 27px; top: 6px; bottom: 6px; width: 1px;
  background: linear-gradient(var(--line-strong), var(--line-strong) 80%, transparent);
}
.timeline-item{ display: flex; gap: 30px; padding-bottom: 56px; }
.timeline-item:last-child{ padding-bottom: 0; }
.timeline-marker{
  flex: none; width: 56px; height: 56px; border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--bg-alt);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); color: var(--gold-bright); font-size: .95rem;
  position: relative; z-index: 1;
}
.timeline-copy h3{
  font-family: var(--font-display); font-weight: 500; font-size: 1.2rem;
  margin: 6px 0 10px; letter-spacing: .01em;
}
.timeline-copy p{ color: var(--muted); margin: 0; max-width: 540px; }

/* ==========================================================================
   Ako to riešim - coverflow karusel
   ========================================================================== */
.section.riesenia{ overflow: hidden; }
.section.riesenia .section-inner{ margin-bottom: 30px; }

.carousel{
  position: relative;
  display: flex; align-items: center; justify-content: center;
  gap: 8px;
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 12px;
}
.carousel-viewport{
  position: relative;
  flex: 1;
  min-width: 0;
  height: 340px;
  overflow: hidden;
  touch-action: pan-y;
}
.carousel-track{ position: relative; width: 100%; height: 100%; }

.carousel-card{
  position: absolute; top: 50%; left: 50%;
  width: 300px;
  padding: 30px 26px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 18px;
  transition: transform .55s var(--ease), opacity .55s var(--ease);
  cursor: pointer;
  user-select: none;
}
.carousel-card.is-center{ cursor: default; border-color: var(--line-strong); }
.carousel-card-tag{
  font-family: var(--font-display); color: var(--gold);
  font-size: .78rem; letter-spacing: .06em;
}
.carousel-card h3{
  font-family: var(--font-display); font-weight: 500; font-size: 1.12rem;
  margin: 12px 0 12px; letter-spacing: .01em;
}
.carousel-card p{ color: var(--muted); font-size: .92rem; margin: 0; }

.carousel-arrow{
  flex: none; width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--line-strong); background: transparent; color: var(--ink);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: border-color .25s ease, color .25s ease, transform .2s ease;
}
.carousel-arrow svg{ width: 20px; height: 20px; }
.carousel-arrow:hover{ border-color: var(--gold); color: var(--gold-bright); }
.carousel-arrow:active{ transform: scale(.92); }

.carousel-dots{ display: flex; justify-content: center; gap: 9px; margin-top: 30px; }
.carousel-dot{
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--line-strong); border: none; padding: 0; cursor: pointer;
  transition: background .3s ease, transform .3s ease;
}
.carousel-dot.active{ background: var(--gold); transform: scale(1.4); }

@media (max-width: 720px){
  .carousel-viewport{ height: 300px; }
  .carousel-card{ width: 240px; padding: 24px 20px; }
  .carousel-arrow{ width: 38px; height: 38px; }
}

/* ==========================================================================
   Projekty - vertical looping carousel (one card fully visible, the card
   above and below peek in faded - same coverflow language as "Ako to
   riešim" above, just rotated 90°). Custom arrows + dots, wraps around at
   both ends. Viewport height animates to match whichever card is showing
   since project cards vary in length.
   ========================================================================== */
.projects-shell{
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 22px;
}
.projects-viewport{
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  transition: height .45s cubic-bezier(.4, 0, .2, 1);
}
.projects-track{ position: relative; width: 100%; height: 100%; }

.project-card{
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  box-sizing: border-box;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 34px 34px 30px;
  transition: transform .5s cubic-bezier(.4, 0, .2, 1), opacity .5s cubic-bezier(.4, 0, .2, 1);
  cursor: pointer;
  user-select: none;
}
.project-card.is-current{ cursor: default; border-color: var(--line-strong); }
.project-card.is-current .project-title{ cursor: pointer; }
.project-title{
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.2rem;
  letter-spacing: .01em;
  color: var(--gold-bright);
  margin: 0 0 14px;
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, color .25s ease;
}
.project-title:hover{ border-color: var(--gold); color: var(--gold); }
.project-card > p{ color: var(--ink-soft); font-size: .96rem; margin: 0 0 16px; }
.project-points{ margin: 0 0 20px; display: flex; flex-direction: column; gap: 8px; }
.project-points li{
  position: relative; padding-left: 18px;
  color: var(--ink-soft); font-size: .92rem;
}
.project-points li::before{
  content: ''; position: absolute; left: 0; top: .55em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--gold);
}
.project-tech{ display: flex; flex-wrap: wrap; gap: 8px; }
.project-tech span{
  font-size: .7rem; color: var(--muted);
  border: 1px solid var(--line); padding: 3px 10px; border-radius: 999px;
}

.projects-controls{
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.projects-arrow{
  flex: none; width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--line-strong); background: transparent; color: var(--ink);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: border-color .25s ease, color .25s ease, transform .2s ease;
}
.projects-arrow svg{ width: 18px; height: 18px; }
.projects-arrow:hover{ border-color: var(--gold); color: var(--gold-bright); }
.projects-arrow:active{ transform: scale(.92); }

.projects-dots{ display: flex; flex-direction: column; gap: 9px; }
.projects-dot{
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--line-strong); border: none; padding: 0; cursor: pointer;
  transition: background .3s ease, transform .3s ease;
}
.projects-dot.active{ background: var(--gold); transform: scale(1.4); }

@media (max-width: 680px){
  .projects-shell{ flex-direction: column; align-items: stretch; gap: 18px; }
  .projects-controls{ flex-direction: row; }
  .projects-dots{ flex-direction: row; }
  .project-card{ padding: 26px 24px 24px; }
}

/* ==========================================================================
   Contact
   ========================================================================== */
.contact{ text-align: center; }
.contact-inner{ display: flex; flex-direction: column; align-items: center; }
.contact .lede{ margin-left: auto; margin-right: auto; }

.contact-form{
  width: 100%; max-width: 560px;
  text-align: left;
  display: flex; flex-direction: column; gap: 20px;
  margin-top: 10px;
}
.form-row{ display: flex; flex-direction: column; gap: 8px; }
.form-row label{
  font-size: .85rem; letter-spacing: .03em; color: var(--ink-soft);
}
.form-hint{ color: var(--muted); font-weight: 300; }
.form-row input,
.form-row textarea{
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 13px 16px;
  transition: border-color .25s ease, box-shadow .25s ease;
  resize: vertical;
}
.form-row input:focus,
.form-row textarea:focus{
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201,162,75,0.15);
}
.form-row input:invalid.touched,
.form-row textarea:invalid.touched{ border-color: #a4534f; }

.form-honeypot{
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.contact-form .btn{
  font-size: 1.02rem; padding: 16px 40px;
  align-self: center;
  border: none; cursor: pointer;
}
.contact-form .btn:disabled{ opacity: .6; cursor: default; transform: none !important; box-shadow: none !important; }

.form-status{
  min-height: 1.2em;
  text-align: center;
  font-size: .92rem;
  margin: 0;
}
.form-status.ok{ color: var(--gold-bright); }
.form-status.err{ color: #d98e88; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{ position: relative; z-index: 1; border-top: 1px solid var(--line); padding: 40px 0; }
.footer-inner{
  display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 12px;
  text-align: center;
}
.footer-inner p{ color: var(--muted); font-size: .85rem; margin: 0; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 900px){
  .offer-grid{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 680px){
  .main-nav{
    position: fixed; top: 0; right: 0; height: 100vh; width: 78%; max-width: 320px;
    background: var(--bg-alt); border-left: 1px solid var(--line);
    flex-direction: column; align-items: flex-start; justify-content: center;
    gap: 28px; padding: 40px;
    transform: translateX(100%); transition: transform .4s var(--ease);
  }
  .main-nav.open{ transform: translateX(0); }
  .nav-toggle{ display: flex; }
  .lang-switch{ margin-left: 0; }
  .offer-grid{ grid-template-columns: 1fr; }
  .section{ padding: 96px 0; }
}

@media (max-width: 480px){
  .hero-content{ padding: 0 20px; }
  .kicker{
    font-size: .68rem;
    letter-spacing: .1em;
    line-height: 1.5;
  }
  .hero-title{ letter-spacing: .03em; }
}