:root{
  --white:#f8f8f6;
  --soft:#e3e3df;
  --muted:#bdbdb8;
  --ease:cubic-bezier(.22,1,.36,1);
  --text-shadow:
    0 1px 2px rgba(0,0,0,.80),
    0 3px 8px rgba(0,0,0,.25);
  --text-size: clamp(18px,1.6vw,25px);
  --text-line: 1.58;
}

*{box-sizing:border-box}

html,
body{

    width:100%;
    height:100%;
    margin:0;

    overflow:hidden;

    background:#999;

    color:var(--white);

    font-family:"Michroma",Arial,sans-serif;

}

body{

    font-synthesis:none;

    -webkit-font-smoothing:antialiased;

    -moz-osx-font-smoothing:grayscale;

    text-rendering:optimizeLegibility;

}

a{color:inherit}
button{font:inherit}

/* VIDEO JE VŽDY ÚPLNĚ DOLE */
.background{
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;

}

#bgVideo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
  filter:
    saturate(1)
    contrast(1)
    brightness(1);
  transform:scale(1.025);
  z-index:0;
  animation:videoWake 1.8s var(--ease) both;
}

.white-veil{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:rgba(255,255,255,.10);
  backdrop-filter:blur(.8px);
}

.edge-shade{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:
    radial-gradient(circle at 46% 44%,rgba(255,255,255,.04) 0 35%,rgba(0,0,0,.23) 100%),
    linear-gradient(90deg,rgba(0,0,0,.20),transparent 30%,transparent 72%,rgba(0,0,0,.28));
}

.grain{
  position:absolute;
  inset:-50%;
  z-index:3;
  opacity:.04;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
  animation:grain .25s steps(2) infinite;
}

/* HORNÍ BRAND BEZ SAMOSTATNÉ LIŠTY */

.topbar{

    position:fixed;

    z-index:100;

    top:clamp(20px,3vw,46px);
    left:clamp(22px,4vw,66px);
    right:clamp(82px,8vw,146px);

    display:flex;
    align-items:center;
    justify-content:space-between;

    text-shadow:var(--text-shadow);

}

.topbar-left,
.top-whatsapp,
.top-meta{

    position:relative;
    z-index:101;

}

.topbar-left{
  display:flex;
  align-items:center;
  flex:0 0 auto;
  gap:23px; /* vzdálenost mezi textem Pavel Kašša a sluchátkem */
}

.topbar-left,
.top-whatsapp,
.top-meta{
    position:relative;
    z-index:101;
}


.brand{
  display:flex;
  align-items:center;
  gap:18px;
  text-decoration:none;
}

.brand-logo{
  font-size:34px;
  font-weight:800;
  letter-spacing:-.09em;
}

.brand-divider{
  width:42px;
  height:1px;
  background:rgba(255,255,255,.55);
}

.brand-role{
    font-size:24px;
    font-weight:500;
    letter-spacing:.14em;
    text-transform:none;
}


.brand-call{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  margin:0;
  color:#fff;
  text-decoration:none;
  line-height:1;
  transform-origin:center;
  animation:phoneRing 8s ease-in-out infinite;
}

.brand-call svg{
  display:block;
  width:26px;
  height:26px;
}

.brand-call:hover{

    transform:scale(1.15);

}

.top-meta{
  display:flex;
  align-items:center;
  gap:13px;
  font-size:10px;
  font-weight:600;
  letter-spacing:.24em;
  color:rgba(255,255,255,.84);
}

.top-divider{
  width:34px;
  height:1px;
  background:rgba(255,255,255,.48);
}

/* JEDEN STÁLÝ BÍLÝ GLASS PANEL */
.glass-shell{
  position:fixed;
  z-index:20;
  left:clamp(22px,4vw,66px);
  right:clamp(88px,9vw,170px);
  top:clamp(50px,7vh,80px);
  bottom:clamp(16px,3vh,30px);
  overflow:hidden;
  border:none;
  border-radius:0;
  background:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  box-shadow:none;
}

/* SEKCE SE MĚNÍ UVNITŘ PANELU */
.scene{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  padding:clamp(34px,5vw,74px);
  opacity:0;
  visibility:hidden;
  transform:translateY(7vh) scale(.985);
  transition:
    opacity .8s ease,
    transform 1.2s var(--ease),
    visibility 0s linear .7s;
  pointer-events:none;
}

.scene.is-active{
  opacity:1;
  visibility:visible;
  transform:none;
  transition-delay:0s;
  pointer-events:auto;
}

.scene.is-leaving-up{
  transform:translateY(-7vh) scale(.985);
}

.scene-inner{
  width:min(1180px,100%);
  margin:auto;
  text-shadow:var(--text-shadow);

  padding-bottom:70px;
}

/* NOVÉ ROZLOŽENÍ SEKCÍ */
.hero-layout,
.collaboration-layout,
.project-layout,
.contact-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(320px,.92fr);
  gap:clamp(38px,5vw,86px);
  align-items:center;
  width:100%;
  min-width:0;
}

.hero-copy,
.project-copy,
.contact-copy{min-width:0}

.portrait-card{
  position:relative;
  justify-self:end;
  align-self:end;
  width:min(680px,48vw);
  height:min(76vh,760px);
  overflow:visible;
}


.hero-copy,
.project-copy,
.contact-copy{

    min-width:0;
    transform:translateX(60px);

}

.contact-copy{

    min-width:0;
    transform:translateX(180px);

}

.portrait-image{
  position:absolute;
  right:-10vw;
  bottom:-7vh;
  width:min(860px,61vw);
  max-width:none;
  height:auto;
  display:block;
}

.hero-name{
  margin:0 0 14px;
  font-size:clamp(50px,6.5vw,96px);
  line-height:.95;
  letter-spacing:-.064em;
  font-weight:680;
}

.hero-claim{
  max-width:660px;
  margin:38px 0 0;
  font-size:clamp(21px,2.2vw,34px);
  line-height:1.34;
  font-weight:360;
}

.hero-note{
  max-width:590px;
  margin:22px 0 0;
  font-size:clamp(14px,1.25vw,18px);
  line-height:1.65;
  font-weight:340;
  color:var(--soft);
}

.eyebrow{
  font-size:10px;
  font-weight:600;
  letter-spacing:.28em;
  color:rgba(255,255,255,.82);
  margin-bottom:26px;
}

h2{
  margin:0 0 34px;
  max-width:980px;
  font-size:clamp(38px,5vw,76px);
  line-height:1.02;
  letter-spacing:-.056em;
  font-weight:650;
}

.reveal{animation:rise 1s var(--ease) both}
.hero-name{animation-delay:.10s}
.hero-claim{animation-delay:.27s}
.hero-note{animation-delay:.36s}

.collaboration-layout{
  grid-template-columns:minmax(330px,.88fr) minmax(0,1.12fr);
  align-items:center;
}

.collaboration-support{

    display:flex;
    flex-direction:column;
    gap:22px;

    transform:translateX(60px);

}

.collaboration-support .eyebrow{margin-bottom:2px}
.collaboration-main{padding-left:90px;}
.collaboration-main h2{margin:0;font-size:clamp(48px,6.1vw,96px)}

.process-box{
  padding:28px 30px;
  border:3px solid rgba(255,255,255,.42);
  border-radius:18px;
  background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.035));
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05),0 18px 44px rgba(0,0,0,.10);
  transition:.35s var(--ease);
}
.process-box:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.72)}
.process-box p{margin:0;font-size:clamp(16px,1.35vw,21px);line-height:1.58;font-weight:350;color:#fff}

.project-layout{
    grid-template-columns:minmax(0,.92fr) minmax(360px,1.08fr);
}
.project-copy{
    transform:translateY(-30px);
}
.project-layout-image-left{
    grid-template-columns:minmax(360px,1.08fr) minmax(0,.92fr);
}
.project-description{max-width:620px;margin:0;font-size:clamp(18px,1.65vw,26px);line-height:1.58;font-weight:340;color:#fff}

.project-frame{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:15/10;
  overflow:visible;
  border:none;

background:transparent;

backdrop-filter:none;
-webkit-backdrop-filter:none;

box-shadow:none;
  text-decoration:none;
  transition:transform .65s var(--ease),border-color .4s ease,box-shadow .65s var(--ease);
}

.project-fog{

    position:absolute;

    left:-20%;
    right:-20%;
    top:-20%;
    bottom:-20%;

    z-index:0;

    pointer-events:none;

    opacity:.9;

    background:

        radial-gradient(
            ellipse 24% 22% at 42% 48%,
            rgba(255,255,255,.65),
            transparent 100%
        ),

        radial-gradient(
            ellipse 30% 26% at 58% 50%,
            rgba(255,255,255,.38),
            transparent 100%
        ),

        radial-gradient(
            ellipse 85% 55% at 50% 50%,
            rgba(255,255,255,.10),
            transparent 100%
        );

    filter:blur(90px);

}

.project-frame img,
.project-placeholder{

    position:relative;

    z-index:2;

}



.project-frame img{position:relative;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:2;transition:transform .85s var(--ease),filter .55s ease}
.project-placeholder{

    position:absolute;
    inset:0;

    z-index:3;

    display:flex;
    justify-content:center;
    align-items:flex-end;

    padding-bottom:56px;

    font-size:28px;
    font-weight:900;
    letter-spacing:.18em;
    text-align:center;

    color:#ffffff;

    text-shadow:
    0 0 3px #fff,
    0 0 3px #fff,
    0 0 9px rgba(255,255,255,.8);

    pointer-events:none;

}

.project-frame:hover img{transform:scale(1.055)}
.project-frame:hover .project-light{transform:translateX(80%);opacity:.85}
.project-frame.is-empty .project-placeholder{display:grid}

.contact-layout{grid-template-columns:minmax(0,1fr) minmax(320px,.82fr)}
.contact-copy h2{font-size:clamp(44px,5.8vw,88px)}
.contact-copy>p{max-width:720px;font-size:clamp(18px,1.6vw,25px);line-height:1.55}
.contact-links{display:flex;flex-wrap:wrap;gap:12px 34px;margin-top:44px}
.contact-links a{padding-bottom:6px;font-size:clamp(15px,1.4vw,20px);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.58);transition:.25s}
.contact-links a:hover{transform:translateY(-2px);border-color:#fff}
.signature{margin-top:58px;font-size:13px;font-weight:600}
.signature span{display:block;margin-top:8px;color:var(--soft);font-weight:350}
.contact-portrait{width:min(390px,32vw)}
.contact-portrait .portrait-image{

    width:min(280px,32vw);

    right:13vw;
    bottom:-5vh;

    opacity:.94;
}

/* PRAVÝ SCROLL VŽDY VIDITELNÝ */
.scroll-rail{
  position:fixed;
  z-index:100;
  right:clamp(16px,3vw,52px);
  top:37%;
  transform:translateY(-50%);
  height:min(72vh,680px);
  display:grid;
  grid-template-rows:40px minmax(0,1fr) auto minmax(0,1fr) 40px auto;
  justify-items:center;
  align-items:stretch;
  color:#fff;
  text-shadow:var(--text-shadow);
  user-select:none;
}

.rail-arrow{
  width:auto;
  height:auto;
  padding:0;
  border:none;
  border-radius:0;
  background:none;
  backdrop-filter:none;

  color:#fff;
  cursor:pointer;
  font-size:22px;

  opacity:.82;
  transition:.25s;
}

.rail-arrow:hover{
  opacity:1;
  transform:scale(1.08);
  background:none;
}

.rail-segment{
  position:relative;
  width:1px;
  min-height:120px;
  background:rgba(255,255,255,.36);
}

.rail-segment-top{
  margin-top:0;
  margin-bottom:52px;
}

.rail-segment-bottom{
  margin-top:52px;
  margin-bottom:0;
}

.rail-word{
  align-self:center;
  justify-self:center;
  writing-mode:vertical-rl;
  text-orientation:upright;
  white-space:nowrap;
  font-size:12px;
  font-weight:600;
  letter-spacing:.18em;
  line-height:1;
  opacity:.96;
  z-index:5;
}

.rail-progress{
  position:absolute;
  left:0;
  width:1px;
  background:#fff;
  box-shadow:0 0 12px #fff;
  transition:height .72s var(--ease);
}

.rail-progress-top{
  top:0;
  height:0;
}

.rail-progress-bottom{
  top:0;
  height:0;
}

.rail-dots{
  position:absolute;
  inset:0;
  z-index:6;
}

.rail-dot{
  position:absolute;
  left:50%;
  width:8px;
  height:8px;
  margin:-4px 0 0 -4px;
  padding:0;
  border:1px solid rgba(255,255,255,.96);
  border-radius:50%;
  background:rgba(55,55,55,.72);
  cursor:pointer;
  transition:.35s var(--ease);
}

.rail-dot.is-active{
  background:#fff;
  transform:scale(1.34);
  box-shadow:0 0 16px rgba(255,255,255,.90);
}

.rail-section{
    position:absolute;

    top:calc(100% + 28px);
    left:50%;

    transform:translateX(-50%);

    min-height:0;
    margin:0;

    font-size:12px;
    font-weight:600;

    writing-mode:vertical-rl;
    text-orientation:upright;

    white-space:nowrap;
    letter-spacing:.18em;
    line-height:1;
    text-align:center;
}

.mobile-hint{display:none}
.glitching{animation:textPulse .58s ease both}

@keyframes rise{
  from{opacity:0;transform:translateY(24px);filter:blur(7px)}
  to{opacity:1;transform:none;filter:none}
}

@keyframes videoWake{
  from{opacity:0;transform:scale(1.07)}
  to{opacity:1;transform:scale(1.025)}
}

@keyframes grain{
  0%{transform:translate(0,0)}
  25%{transform:translate(2%,-1%)}
  50%{transform:translate(-1%,2%)}
  75%{transform:translate(1%,1%)}
  100%{transform:translate(0,0)}
}

@keyframes textPulse{
  0%{opacity:1;filter:none}
  40%{opacity:.48;filter:blur(2px)}
  100%{opacity:1;filter:none}
}

@media (max-width:900px){
  .topbar-left{gap:10px}
  .topbar{left:20px;right:72px;top:20px}
  .brand{gap:10px}.brand-divider{width:22px}.brand-role{font-size:8px;letter-spacing:.08em}.top-meta{font-size:8px}
  .glass-shell{left:16px;right:60px;top:72px;bottom:20px;border-radius:24px}
  .scene{padding:28px 24px;overflow-y:auto}
  .hero-layout,.collaboration-layout,.project-layout,.project-layout-image-left,.contact-layout{grid-template-columns:1fr;gap:26px;align-items:start}
  .hero-copy,.project-copy,.contact-copy{order:1}
  .portrait-card,.contact-portrait,.project-frame{order:2}
  .portrait-card,.contact-portrait{justify-self:end;width:100%;height:46vh;min-height:300px}
  .portrait-image,.contact-portrait .portrait-image{right:-8vw;bottom:-4vh;width:min(690px,92vw)}
  .collaboration-main{order:1}.collaboration-support{order:2}
  .collaboration-main h2{font-size:clamp(40px,9vw,70px)}
  .project-frame{width:100%;aspect-ratio:16/10}
  .project-layout-image-left .project-frame{order:2}
  .project-layout-image-left .project-copy{order:1}
  .scroll-rail{right:10px;height:64vh}.rail-word{display:none}
  .mobile-hint{display:block;position:fixed;z-index:90;left:22px;bottom:8px;font-size:8px;letter-spacing:.3em;color:rgba(255,255,255,.76)}
}

@media (max-width:520px){
  .brand-role{max-width:150px;line-height:1.25}.top-meta{display:none}
  .glass-shell{right:52px;left:10px;top:70px;bottom:12px;border-radius:20px}
  .scene{padding:22px 18px}
  .hero-name{font-size:clamp(40px,12vw,62px)}
  h2{font-size:clamp(31px,10vw,45px)}
  .hero-claim{font-size:19px;margin-top:24px}.hero-note{font-size:14px}
  .process-box{padding:20px 21px;border-radius:14px}.process-box p{font-size:16px}
  .project-description{font-size:18px}.project-frame{border-radius:15px}
  .portrait-card,.contact-portrait{height:40vh;min-height:260px}
  .portrait-image,.contact-portrait .portrait-image{right:-14vw;width:110vw}
  .contact-links{flex-direction:column;align-items:flex-start;margin-top:28px}
  .signature{margin-top:42px}.rail-section{display:none}
}

@media (prefers-reduced-motion:reduce){
  *{
    animation:none!important;
    transition-duration:.01ms!important;
  }
}


/* =========================================
   GLOBAL OVERLAY
========================================= */

.global-overlay{

    position:absolute;
    inset:0;

    z-index:4;

    pointer-events:none;

    background:

        /* hlavní světlo od slunce */
        radial-gradient(

            ellipse 70% 95%
            at 62% 8%,

            rgba(255,255,255,.18) 0%,
            rgba(255,255,255,.10) 18%,
            rgba(255,255,255,.045) 38%,
            rgba(255,255,255,.015) 56%,
            transparent 72%

        ),

        /* jemné rozptýlení světla */
        radial-gradient(

            ellipse 80% 110%
            at 55% 30%,

            rgba(255,255,255,.05) 0%,
            rgba(255,255,255,.02) 45%,
            transparent 80%

        ),

        /* lehké ztmavení pouze středu */
        radial-gradient(

            ellipse 60% 55%
            at 50% 48%,

            rgba(20,28,38,.22) 0%,
            rgba(20,28,38,.12) 45%,
            transparent 75%

        ),

        /* vinětace */
        radial-gradient(

            ellipse at center,

            transparent 20%,
            rgba(20,28,38,.12) 52%,
            rgba(20,28,38,.34) 72%,
            rgba(20,28,38,.72) 88%,
            rgba(20,28,38,.94) 100%

        );

}

.top-whatsapp{

    display:flex;
    align-items:center;
    gap:12px;

    padding:12px 22px;

    border:2px solid rgba(255,255,255,.38);
    border-radius:18px;

    background:transparent;

    color:#fff;
    text-decoration:none;

    font-size:14px;
    font-weight:600;
    letter-spacing:.06em;

    text-shadow:0 2px 6px rgba(0,0,0,.35);

    transition:.3s;

    animation:whatsappShake 3s ease-in-out infinite;

}

.top-whatsapp:hover{

    transform:translateY(-2px);

    border-color:#fff;

}

@keyframes whatsappShake{

    0%,90%,100%{
        transform:translateX(0) rotate(0deg);
    }

    92%{
        transform:translateX(-3px) rotate(-4deg);
    }

    94%{
        transform:translateX(3px) rotate(4deg);
    }

    96%{
        transform:translateX(-2px) rotate(-2deg);
    }

    98%{
        transform:translateX(2px) rotate(2deg);
    }

}

@keyframes phoneRing{

    0%,88%,100%{
        transform:scale(1) rotate(0deg);
    }

    89%{
        transform:scale(2.5) rotate(-18deg);
    }

    90%{
        transform:scale(2.5) rotate(18deg);
    }

    91%{
        transform:scale(2.5) rotate(-14deg);
    }

    92%{
        transform:scale(2.5) rotate(14deg);
    }

    93%{
        transform:scale(2) rotate(0deg);
    }

}

.brand-call{

    position:relative;

    display:inline-flex;
    align-items:center;
    justify-content:center;

}


.phone-ripple{

    position:absolute;

    width:18px;
    height:18px;

    border:2px solid rgba(255,255,255,.8);
    border-radius:50%;

    opacity:0;

    pointer-events:none;

    animation:phoneRipple 8s ease-in-out infinite;

}

.ripple-2{

    animation-delay:.12s;

}

.ripple-3{

    animation-delay:.24s;

}


@keyframes phoneRipple{

    0%,88%,100%{

        transform:scale(.5);

        opacity:0;

    }

    89%{

        transform:scale(1);

        opacity:.8;

    }

    91%{

        transform:scale(2.5);

        opacity:.45;

    }

    93%{

        transform:scale(4);

        opacity:0;

    }

}

/* =========================================
   PROJECT WAVES
========================================= */

.project-wave{

    position:absolute;

    inset:0;

    border:2px solid rgba(255,255,255,.32);

    border-radius:38px;

    opacity:0;

    pointer-events:none;

    z-index:1;

    filter:blur(.8px);

    box-shadow:
        0 0 10px rgba(255,255,255,.08),
        0 0 24px rgba(255,255,255,.05);

    will-change:transform,opacity;

}

.project-frame:hover .wave-1{

    animation:projectWave 1.8s infinite;

}

.project-frame:hover .wave-2{

    animation:projectWave 1.8s .28s infinite;

}

.project-frame:hover .wave-3{

    animation:projectWave 1.8s .56s infinite;

}

@keyframes projectWave{

    0%{

        transform:scale(1);

        opacity:.45;

    }

    25%{

        opacity:.28;

    }

    100%{

        transform:scale(1.18);

        opacity:0;

    }
}

.hero-claim,
.hero-note,
.project-description,
.contact-copy > p,
.process-box p{

    font-size:clamp(16px,1.45vw,20px) !important;
    line-height:1.65 !important;

}

/* =========================================
   NOVÉ ROZLOŽENÍ WEBU
   03 portfolio v jedné sekci
   04 ceník
   05 o mně
   06 kontakt
========================================= */

.portfolio-scene{
  align-items:center;
}

.portfolio-layout{
  width:min(1380px,100%);
}

.portfolio-heading{
  max-width:980px;
  margin:0 auto clamp(24px,3vh,42px);
  text-align:center;
}

.portfolio-heading .eyebrow{
  margin-bottom:16px;
}

.portfolio-heading h2{
  margin:0 0 18px;
  max-width:none;
}

.portfolio-intro{
  max-width:900px;
  margin:0 auto;
  font-size:clamp(15px,1.2vw,20px);
  line-height:1.6;
}

.portfolio-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(18px,2.2vw,34px);
  align-items:start;
}

.portfolio-item{
  min-width:0;
}

.portfolio-item .project-frame{
  aspect-ratio:15/10;
}

.portfolio-item h3{
  margin:18px 0 10px;
  font-size:clamp(17px,1.35vw,24px);
  line-height:1.25;
  font-weight:600;
}

.portfolio-item .project-description{
  max-width:none;
  font-size:clamp(12px,.9vw,16px) !important;
  line-height:1.55 !important;
}

.portfolio-item .project-placeholder{
  padding:0 18px 32px;
  font-size:clamp(13px,1vw,20px);
}

.simple-section-layout{
  width:min(1180px,100%);
}

.simple-section-layout h2,
.about-me-copy h2{
  margin-bottom:28px;
}

.section-content-placeholder{
  width:min(920px,100%);
  min-height:220px;
}

.about-me-layout{
  width:min(1180px,100%);
  padding-bottom:20px;
}

.about-me-heading{
  max-width:1080px;
  margin:0 auto clamp(24px,3.6vh,40px);
  text-align:center;
}

.about-me-heading .eyebrow{
  margin-bottom:18px;
}

.about-me-heading h2{
  max-width:1080px;
  margin:0 auto 20px;
  font-size:clamp(42px,5.6vw,86px);
}

.about-me-intro{
  max-width:980px;
  margin:0 auto;
  font-size:clamp(15px,1.15vw,19px);
  line-height:1.7;
  color:#fff;
}

.about-accordion{
  display:flex;
  flex-direction:column;
  gap:14px;
  width:100%;
}

.about-panel{
  border:3px solid rgba(255,255,255,.42);
  border-radius:18px;
  background:linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,.055));
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.06),
    0 18px 44px rgba(0,0,0,.14);
  overflow:hidden;
  transition:
    transform .35s var(--ease),
    border-color .35s ease,
    background .35s ease,
    box-shadow .45s var(--ease);
}

.about-panel:hover,
.about-panel.is-open{
  transform:translateY(-3px);
  border-color:rgba(255,255,255,.78);
  background:linear-gradient(135deg,rgba(255,255,255,.22),rgba(255,255,255,.075));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08),
    0 24px 52px rgba(0,0,0,.18);
}

.about-panel-trigger{
  width:100%;
  min-height:66px;
  padding:17px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  border:0;
  background:transparent;
  color:#fff;
  text-align:left;
  cursor:pointer;
}

.about-panel-trigger > span:first-child{
  font-size:clamp(16px,1.25vw,21px);
  line-height:1.35;
  font-weight:650;
  letter-spacing:.035em;
}

.about-panel-icon{
  position:relative;
  flex:0 0 22px;
  width:22px;
  height:22px;
}

.about-panel-icon::before,
.about-panel-icon::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:18px;
  height:2px;
  border-radius:2px;
  background:#fff;
  transform:translate(-50%,-50%);
  transition:transform .4s var(--ease);
}

.about-panel-icon::after{
  transform:translate(-50%,-50%) rotate(90deg);
}

.about-panel.is-open .about-panel-icon::before{
  transform:translate(-50%,-50%) rotate(45deg);
}

.about-panel.is-open .about-panel-icon::after{
  transform:translate(-50%,-50%) rotate(-45deg);
}

.about-panel-content{
  display:grid;
  grid-template-rows:0fr;
  opacity:0;
  transition:
    grid-template-rows .52s var(--ease),
    opacity .3s ease;
}

.about-panel.is-open .about-panel-content{
  grid-template-rows:1fr;
  opacity:1;
}

.about-panel-content-inner{
  min-height:0;
  overflow:hidden;
}

.about-panel-content p{
  margin:0;
  padding:0 24px 22px;
  font-size:clamp(14px,1vw,17px);
  line-height:1.72;
  color:#fff;
}

@media (max-width:1100px){
  .portfolio-grid{
    gap:18px;
  }

  .portfolio-item .project-description{
    font-size:12px !important;
  }
}

@media (max-width:900px){
  .portfolio-scene{
    align-items:start;
  }

  .portfolio-heading{
    text-align:left;
    margin:0 0 26px;
  }

  .portfolio-grid{
    grid-template-columns:1fr;
    gap:34px;
  }

  .portfolio-item .project-frame{
    width:100%;
    aspect-ratio:16/10;
  }

  .portfolio-item .project-description{
    font-size:16px !important;
  }

  .about-me-heading{
    margin:0 0 28px;
    text-align:left;
  }

  .about-me-heading h2{
    margin:0 0 18px;
    font-size:clamp(40px,9vw,70px);
  }

  .about-me-intro{
    margin:0;
  }

  .about-accordion{
    gap:12px;
  }
}

@media (max-width:520px){
  .portfolio-heading{
    margin-bottom:22px;
  }

  .portfolio-intro{
    font-size:15px;
  }

  .portfolio-grid{
    gap:28px;
  }

  .portfolio-item h3{
    margin-top:14px;
  }

  .portfolio-item .project-description{
    font-size:15px !important;
  }

  .about-me-heading{
    margin-bottom:22px;
  }

  .about-me-intro{
    font-size:15px;
  }

  .about-panel{
    border-radius:14px;
  }

  .about-panel-trigger{
    min-height:58px;
    padding:14px 18px;
    gap:18px;
  }

  .about-panel-trigger > span:first-child{
    font-size:15px;
  }

  .about-panel-content p{
    padding:0 18px 18px;
    font-size:14px;
    line-height:1.65;
  }
}


/* =========================================
   02 SPOLUPRÁCE — VERTIKÁLNÍ ROZLOŽENÍ
   Nadpis a text nahoře, dvě okna pod nimi
========================================= */

.collaboration-scene{
  align-items:center;
}

.collaboration-vertical-layout{
  width:min(1180px,100%);
}

.collaboration-heading{
  max-width:1080px;
  margin:0 auto clamp(34px,5vh,64px);
  text-align:center;
}

.collaboration-heading .eyebrow{
  margin-bottom:18px;
}

.collaboration-heading h2{
  max-width:1080px;
  margin:0 auto;
  font-size:clamp(42px,5.6vw,86px);
}

.collaboration-boxes{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(22px,3vw,44px);
  width:100%;
}

.collaboration-boxes .process-box{
  min-height:210px;
  display:flex;
  align-items:center;
}

.collaboration-boxes .process-box p{
  width:100%;
}

@media (max-width:900px){
  .collaboration-scene{
    align-items:start;
  }

  .collaboration-heading{
    margin:0 0 28px;
    text-align:left;
  }

  .collaboration-heading h2{
    margin:0;
    font-size:clamp(40px,9vw,70px);
  }

  .collaboration-boxes{
    grid-template-columns:1fr;
    gap:22px;
  }

  .collaboration-boxes .process-box{
    min-height:0;
  }
}

@media (max-width:520px){
  .collaboration-heading{
    margin-bottom:22px;
  }

  .collaboration-boxes{
    gap:18px;
  }
}

/* =========================================
   04 CENÍK
========================================= */

.pricing-scene{
  align-items:center;
  overflow:visible;
}

.pricing-layout{
  position:relative;
  width:min(1180px,100%);
  padding-bottom:76px;
}

.pricing-heading{
  max-width:1080px;
  margin:0 auto clamp(24px,3.6vh,42px);
  text-align:center;
}

.pricing-heading .eyebrow{margin-bottom:18px}
.pricing-heading h2{
  max-width:1080px;
  margin:0 auto 20px;
  font-size:clamp(42px,5.6vw,86px);
}

.pricing-intro{
  max-width:900px;
  margin:0 auto;
  font-size:clamp(15px,1.2vw,20px);
  line-height:1.65;
  color:#fff;
}

.pricing-cards{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(18px,2.2vw,30px);
  width:100%;
}

.pricing-card,
.pricing-extras-trigger,
.pricing-extras-popup{
  border:3px solid rgba(255,255,255,.42);
  border-radius:18px;
  background:linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,.055));
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 18px 44px rgba(0,0,0,.14);
}

.pricing-card{
  min-height:290px;
  padding:26px 28px 28px;
  transition:.35s var(--ease);
}

.pricing-card:hover{
  transform:translateY(-4px);
  border-color:rgba(255,255,255,.72);
}

.pricing-card h3,
.pricing-extras-popup h3{
  margin:0;
  font-size:clamp(18px,1.45vw,25px);
  line-height:1.25;
  font-weight:650;
  letter-spacing:.04em;
}

.pricing-from{margin-top:12px;font-size:clamp(14px,1vw,17px);color:var(--white);}
.pricing-card ul{list-style:none;margin:24px 0 0;padding:0}
.pricing-card li{position:relative;margin:0 0 13px;padding-left:20px;font-size:clamp(13px,1vw,17px);line-height:1.45;color:#fff}
.pricing-card li:last-child{margin-bottom:0}
.pricing-card li::before{content:"•";position:absolute;left:0;top:0}

.pricing-extras-trigger{
  position:absolute;
  z-index:4;
  left:clamp(18px,2.2vw,30px);
  right:clamp(18px,2.2vw,30px);
  bottom:0;
  width:auto;
  min-height:58px;
  padding:14px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  color:#fff;
  cursor:pointer;
  text-align:left;
  transition:transform .3s var(--ease),border-color .3s ease,background .3s ease;
}

.pricing-extras-trigger:hover,
.pricing-extras-trigger[aria-expanded="true"]{
  transform:translateY(-3px);
  border-color:rgba(255,255,255,.78);
  background:linear-gradient(135deg,rgba(255,255,255,.22),rgba(255,255,255,.075));
}

.pricing-extras-trigger > span:first-child{
  font-size:clamp(16px,1.25vw,21px);
  font-weight:650;
  letter-spacing:.04em;
}

.pricing-extras-icon{
  position:relative;
  flex:0 0 22px;
  width:22px;
  height:22px;
}
.pricing-extras-icon::before,
.pricing-extras-icon::after{
  content:"";
  position:absolute;
  left:50%;top:50%;
  width:18px;height:2px;
  border-radius:2px;
  background:#fff;
  transform:translate(-50%,-50%);
  transition:transform .35s var(--ease);
}
.pricing-extras-icon::after{transform:translate(-50%,-50%) rotate(90deg)}
.pricing-extras-trigger[aria-expanded="true"] .pricing-extras-icon::after{transform:translate(-50%,-50%) rotate(0deg)}

.pricing-extras-layer{
  position:absolute;
  inset:0;
  z-index:30;
  visibility:hidden;
  opacity:0;
  pointer-events:none;
  transition:opacity .34s ease,visibility 0s linear .34s;
}
.pricing-extras-layer.is-open{
  visibility:visible;
  opacity:1;
  pointer-events:auto;
  transition-delay:0s;
}

.pricing-extras-backdrop{

    position:fixed;

    left:0;
    top:0;
    right:0;
    bottom:0;

    z-index:9998;

    border:0;
    padding:0;

    background:rgba(8,10,14,.34);

    backdrop-filter:blur(2px);
    -webkit-backdrop-filter:blur(2px);

    cursor:default;

}

.pricing-extras-popup{
  position:fixed;
  z-index:9999;
  width:1200px;
  left:50%;
  margin-left:-645px;
  bottom:72px;
  max-height:calc(100% - 84px);
  padding:24px 28px 26px;
  overflow:auto;
  transform:translateY(26px) scale(.965);
  transform-origin:50% 100%;
  opacity:0;
  transition:transform .38s var(--ease),opacity .3s ease,border-color .3s ease;
}
.pricing-extras-layer.is-open .pricing-extras-popup{
  transform:translateY(0) scale(1);
  opacity:1;
}

.pricing-extras-popup-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:20px}
.pricing-extras-close{
  flex:0 0 42px;
  width:42px;height:42px;
  border:1px solid rgba(255,255,255,.35);
  border-radius:50%;
  background:rgba(255,255,255,.08);
  color:#fff;
  font-size:28px;
  line-height:1;
  cursor:pointer;
  transition:.25s ease;
}
.pricing-extras-close:hover{border-color:#fff;background:rgba(255,255,255,.16);transform:rotate(90deg)}

.pricing-extras-grid{display:flex;flex-direction:column;gap:0}
.pricing-row{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.18);gap:20px;font-size:clamp(13px,1vw,16px)}
.pricing-row:last-child{border-bottom:none}
.pricing-row strong{font-weight:700;white-space:nowrap}

@media (max-width:1100px){
  .pricing-card{padding:24px 22px 26px}
  .pricing-card li{font-size:13px}
}

@media (max-width:900px){
  .pricing-scene{align-items:start}
  .pricing-layout{padding-bottom:72px}
  .pricing-heading{margin:0 0 28px;text-align:left}
  .pricing-heading h2{margin:0 0 18px;font-size:clamp(40px,9vw,70px)}
  .pricing-intro{margin:0}
  .pricing-cards{grid-template-columns:1fr;gap:22px}
  .pricing-card{min-height:0}
  .pricing-extras-trigger{left:0;right:0}
  .pricing-extras-popup{left:0;right:0;bottom:70px;max-height:calc(100% - 78px)}
}

@media (max-width:520px){
  .pricing-heading{margin-bottom:22px}
  .pricing-intro{font-size:15px}
  .pricing-cards{gap:18px}
  .pricing-card,.pricing-extras-trigger,.pricing-extras-popup{border-radius:14px}
  .pricing-card{padding:22px 20px 24px}
  .pricing-card li{font-size:15px}
  .pricing-extras-trigger{min-height:54px;padding:12px 18px}
  .pricing-extras-popup{bottom:64px;padding:20px 18px 18px}
  .pricing-row{align-items:flex-start;font-size:13px}
  .pricing-row strong{white-space:normal;text-align:right}
}


/* =========================================
   03 PORTFOLIO — DOPIS SCHOVANÝ ZA OBÁLKOU
   Glass karta má stejnou velikost jako obálka.
   Při hoveru se vysune směrem nahoru.
========================================= */

.portfolio-grid{
  position:relative;
  overflow:visible;
}

.portfolio-item{
  position:relative;
  z-index:1;
  min-width:0;
  overflow:visible;
  isolation:isolate;
  transition:z-index 0s linear .45s;
}

.portfolio-item:hover,
.portfolio-item:focus-within,
.portfolio-item.is-letter-open{
  z-index:10;
  transition-delay:0s;
}

/* Obálka zůstává vždy před dopisem */
.portfolio-item .project-frame{
  position:relative;
  z-index:3;
  display:block;
  transition:
    transform .55s var(--ease),
    filter .45s ease;
}

/* Glass karta = stejná šířka a výška jako obálka */
.project-letter{
  position:absolute;
  z-index:2;

display:flex;
flex-direction:column;
justify-content:flex-start;
align-items:flex-start;

  left:14px;
  right:0;
  top:10px;

  width:92%;
  aspect-ratio:15 / 10;

  margin:0;
  padding:30px 30px 28px;

  border:3px solid rgba(255,255,255,.42);
  border-radius:30px;

  background:linear-gradient(
    135deg,
    rgba(255,255,255,.18),
    rgba(255,255,255,.065)
  );

  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.06),
    0 22px 48px rgba(0,0,0,.18);

  color:#fff;
  text-align:left;

  overflow:hidden;
  pointer-events:none;

  transform:translateY(0);
  opacity:.98;

  transition:
    transform .62s var(--ease),
    border-color .35s ease,
    background .35s ease,
    box-shadow .55s var(--ease);
}




/* Obsah dopisu je ve výchozím stavu schovaný za obálkou */
.project-letter-title,
.project-letter-text{
  opacity:0;
  transform:translateY(18px);
  transition:
    opacity .28s ease,
    transform .42s var(--ease);
}

.project-letter-title{
  position:relative;
  z-index:2;

  margin:0 0 18px;
  min-height:0;

  display:flex;
  align-items:center;

  font-size:clamp(16px,1.2vw,22px);
  line-height:1.3;
  font-weight:650;
}

.project-letter::after{
    content:"+";

    position:absolute;
    top:22px;
    right:24px;

    opacity:0;

    font-size:22px;
    font-weight:400;

    transition:
        opacity .25s ease,
        transform .4s var(--ease);
}

.portfolio-item:hover .project-letter::after,
.portfolio-item:focus-within .project-letter::after,
.portfolio-item.is-letter-open .project-letter::after{
    opacity:1;
}


.project-letter-text{
  margin:0;
  max-width:none;

  font-size:clamp(12px,.9vw,16px) !important;
  line-height:1.6 !important;
  color:#fff;
}

/* Hover: dopis vyjede nahoru nad obálku */
.portfolio-item:hover .project-letter,
.portfolio-item:focus-within .project-letter,
.portfolio-item.is-letter-open .project-letter{
  transform:translateY(-94%);

  border-color:rgba(255,255,255,.76);

  background:linear-gradient(
    135deg,
    rgba(255,255,255,.22),
    rgba(255,255,255,.085)
  );

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08),
    0 28px 58px rgba(0,0,0,.22);
}

/* Obálka se jen nepatrně sníží, aby pohyb působil přirozeně */
.portfolio-item:hover .project-frame,
.portfolio-item:focus-within .project-frame,
.portfolio-item.is-letter-open .project-frame{
  transform:translateY(8px);
}

/* Text se objeví až po vysunutí dopisu */
.portfolio-item:hover .project-letter-title,
.portfolio-item:hover .project-letter-text,
.portfolio-item:focus-within .project-letter-title,
.portfolio-item:focus-within .project-letter-text,
.portfolio-item.is-letter-open .project-letter-title,
.portfolio-item.is-letter-open .project-letter-text{
  opacity:1;
  transform:none;
  transition-delay:.24s;
}

.portfolio-item:hover .project-letter::after,
.portfolio-item:focus-within .project-letter::after,
.portfolio-item.is-letter-open .project-letter::after{

    opacity:1;
    transform:rotate(45deg);

}

/* Trochu více prostoru nad obálkami pro vysunutý dopis */
.portfolio-grid{
  padding-top:clamp(115px,14vh,155px);
}

.portfolio-heading{
  margin-bottom:0;
}

/* Střední displeje */
/* =========================================================
   STŘEDNÍ DISPLEJE (iPad Pro, Surface...)
========================================================= */

@media (max-width:1100px) and (min-width:901px){

    .project-letter{

        padding:24px 24px 22px;

        border-radius:30px;

    }

    .portfolio-item:hover .project-letter,
    .portfolio-item:focus-within .project-letter,
    .portfolio-item.is-letter-open .project-letter{

        transform:translateY(-90%);

    }

    .portfolio-grid{

        padding-top:110px;

    }

}




/* Mobil: karta se otevře pod obálkou kliknutím */
@media (max-width:900px){
  .portfolio-grid{
    padding-top:0;
  }

  .portfolio-item{
    overflow:visible;
  }

  .project-letter{
    position:relative;

    left:auto;
    right:auto;
    top:auto;

    width:auto;
    aspect-ratio:auto;

    margin:-18px 8px 0;
    padding:19px 20px 20px;

    max-height:66px;

    border-radius:18px;

    pointer-events:auto;
    cursor:pointer;

    transform:none;
    overflow:hidden;

    transition:
      max-height .55s var(--ease),
      border-color .35s ease,
      background .35s ease,
      box-shadow .55s var(--ease);
  }

  .project-letter-title{
    margin:0;
    opacity:1;
    transform:none;
  }

  .project-letter-text{
    margin-top:17px;
    opacity:0;
    transform:translateY(-10px);
  }

  .portfolio-item:hover .project-frame,
  .portfolio-item:focus-within .project-frame,
  .portfolio-item.is-letter-open .project-frame{
    transform:none;
  }

  .portfolio-item:hover .project-letter,
  .portfolio-item:focus-within .project-letter,
  .portfolio-item.is-letter-open .project-letter{
    max-height:360px;
    transform:none;
  }

  .portfolio-item:hover .project-letter-text,
  .portfolio-item:focus-within .project-letter-text,
  .portfolio-item.is-letter-open .project-letter-text{
    opacity:1;
    transform:none;
    transition-delay:.12s;
  }

  .project-letter-text{
    font-size:15px !important;
  }
}

@media (hover:none){
  .portfolio-item:hover .project-letter{
    border-color:rgba(255,255,255,.42);
    background:linear-gradient(
      135deg,
      rgba(255,255,255,.18),
      rgba(255,255,255,.065)
    );
  }

  .portfolio-item.is-letter-open .project-letter{
    border-color:rgba(255,255,255,.76);
    background:linear-gradient(
      135deg,
      rgba(255,255,255,.22),
      rgba(255,255,255,.085)
    );
  }
}

.portfolio-more{

    width:100%;

    max-width:none;

    margin:20px auto 0;

    text-align:center;

    font-size:clamp(15px,1vw,18px);

    line-height:1.7;

    color:rgba(255,255,255,.88);

    min-height:30px;

    white-space:nowrap;

    transform:translateX(20px);
}




/* =========================================
   MOBILE PORTRAIT POSITION FIX
   - contact figure lower on grass
   - compact hero portrait on short phones (iPhone SE etc.)
========================================= */
@media (max-width:520px){
  .contact-portrait .portrait-image{
    bottom:-12vh;
  }
}

@media (max-width:520px) and (max-height:700px){
  .hero .portrait-card{
    height:30vh;
    min-height:180px;
  }

  .hero .portrait-image{
    width:88vw;
    right:-8vw;
    bottom:-10vh;
  }

  .hero .hero-claim{
    margin-top:18px;
    font-size:17px;
    line-height:1.34;
  }

  .hero .scene-inner{
    padding-bottom:26px;
  }

  .contact-portrait{
    height:34vh;
    min-height:210px;
  }

  .contact-portrait .portrait-image{
    width:98vw;
    right:-10vw;
    bottom:-15vh;
  }
}