:root{
 color-scheme: dark;
  /* Brand */
  --bc-blue:#4DA9FF;
  --bc-blue-dark:#2d5580;

  /* Dark UI */
  --bg:
    radial-gradient(1200px 900px at 50% -15%, rgba(77,169,255,.10), transparent 60%),
    radial-gradient(900px 700px at 15% 35%, rgba(45,85,128,.10), transparent 55%),
    radial-gradient(800px 600px at 85% 65%, rgba(45,85,128,.08), transparent 55%),
    linear-gradient(180deg, #0c0d10 0%, #101218 45%, #0a0b0e 100%);
    
  --surface:#14161b;
  --surface-2:#1b1e25;
  --text:#ffffff;
  --text-2:rgba(255,255,255,.72);
  --border:rgba(255,255,255,.10);

  --nav-h:76px;
  --footer-h:72px;
  --r:14px;
  --shadow:0 12px 30px rgba(0,0,0,.35);
  --transition:180ms cubic-bezier(.2,.8,.2,1);
  --max:1120px;
  --borderblue:1px solid rgb(102 164 221 / 70%);
  --bgFont: 21px;
  --smFont: 13px;
  --mdFont: 17px;
}

/* Base */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
/* Scroll snapping (desktop/tablet). Keeps mobile natural. */
@media (min-width: 900px){
  html{
    scroll-snap-type:y mandatory;
    scroll-padding-top:var(--nav-h);
    scroll-padding-bottom:var(--footer-h);
  }
  /* Disabled when JS wheel-snap is active (fixes Firefox odd snap stops) */
  html.bc-wheel-snap{ scroll-snap-type: none; }
  header.hero, section{scroll-snap-align:start; scroll-snap-stop:always;}

  header.hero, section{height:auto; min-height:100svh;}
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;

  background:radial-gradient(1500px 800px at 15% 20%, rgb(54 63 95 / 46%), #0d0e10b3 60%), radial-gradient(800px 900px at 85% 40%, rgb(41 54 92 / 51%), #355eb13b 60%), radial-gradient(1000px 600px at 50% 120%, rgb(255 255 255 / 0%), #00000000 60%);
}
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  user-select: none;
    /* --- TEXT SELECTION --- */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  user-drag: none;
  touch-action: manipulation;
  -webkit-font-smoothing: antialiased;
  outline: none;
}
img{max-width:100%;display:block}
a{
    color:inherit;
    -webkit-user-drag: none;
}
img, a img {
  pointer-events: none;
  -webkit-user-drag: none;
  user-drag: none;
}
::selection{background:rgba(77,169,255,.35)}

/* Anchor offset for fixed nav */
section, header{scroll-margin-top:var(--nav-h)}

/* Nav */
.main-nav{
    position: fixed;
    inset: 0 0 auto 0;
    height: var(--nav-h);
    z-index: 1000;
    background: rgba(10, 10, 12, .66);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow);

}
.fa-solid, .fas {
    font-size: 18px;
    font-weight: 900;
}
.nav-container{
  max-width:var(--max);
  margin:0 auto;
  padding:0px;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
.logo{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  min-width:0;
  filter: drop-shadow(2px 4px 6px black);
}
.logo-image{
    min-width:140px;
    height:50px;
    object-fit:contain
}
.logo-text{
  font-family:"Space Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-weight:700;
  letter-spacing:.04em;
  color:var(--bc-blue);
  white-space:nowrap;
}

.nav-links{
  list-style:none;
  display:flex;
  gap:20px;
  align-items:center;
}
.nav-links a{
    text-decoration: none;
    text-transform:uppercase;
    font-weight: 300;
    color: rgb(89 89 93);
    font-size: 14px;
    letter-spacing: 0.1em;
    padding: 10px 10px;
    border-radius: 10px;
    transition: background var(--transition), color var(--transition);
}
.nav-links a:hover{
  color:var(--text);
  background:rgba(255,255,255,.06);
}
.nav-links a:focus-visible{
  color:var(--text);
  border:none;
  outline: none;
  background:rgba(255,255,255,.06);
}
.nav-links a.is-current{
  color:var(--text);
  background:rgba(255,255,255,.06);
}
.nav-links a:focus{
  border:none;
  text-decoration: none;
}
/* Mobile toggle (hamburger) */
.mobile-menu-toggle{
  display:none;
  width:44px;height:44px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.03);
  border-radius:12px;
  cursor:pointer;
  transition:transform var(--transition), background var(--transition);
}
.mobile-menu-toggle:hover{background:rgba(255,255,255,.06)}
.mobile-menu-toggle span{
  display:block;
  width:18px;height:2px;
  background:var(--text);
  margin:4px auto;
  border-radius:2px;
  transition:transform var(--transition), opacity var(--transition);
}
.mobile-menu-toggle.is-active span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.mobile-menu-toggle.is-active span:nth-child(2){opacity:0}
.mobile-menu-toggle.is-active span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* Mobile drawer */
.mobile-drawer{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
  opacity:0;
  pointer-events:none;
  transition:opacity var(--transition);
  height: 100svh;
}
.mobile-drawer.is-open{
  opacity:1;
  pointer-events:auto;
}
.mobile-drawer-panel{
  position:absolute;
  top:0; right:0;
  height:100svh;
  width:min(86vw, 360px);
  background:linear-gradient(180deg, rgba(20,22,27,1), rgba(14,15,18,1));
  border-left:1px solid var(--border);
  box-shadow:var(--shadow);
  transform:translateX(0);
  transition:transform var(--transition);
  padding:14px 14px 18px;
  display:flex;
  flex-direction:column;
  gap:18px;
}
.mobile-drawer.is-open .mobile-drawer-panel{transform:translateX(0)}
.mobile-drawer-header{
  display:flex;
  align-items:center;
  justify-content:end;
  gap:10px;
}
.mobile-drawer-close{
  width:44px;height:44px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.03);
  border-radius:12px;
  cursor:pointer;
}
.mobile-nav-links{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:6px 4px;
}
.mobile-nav-links a{
    display: block;
    text-decoration: none;
    color: var(--text);
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .06);
    text-transform: uppercase;
    font-weight: 300;
    font-size: 14px;
    letter-spacing: 0.1em;
    padding: 10px 25px;
    border-radius: 14px;
    transition: background var(--transition), color var(--transition);
  border:1px solid rgba(255,255,255,.06);
}
.mobile-nav-links a:hover{border-color:rgba(77,169,255,.35)}
.mobile-nav-links a.is-current{
  border-color:rgba(255, 255, 255, .15);
  background:rgba(255, 255, 255, .15);
}
.mobile-drawer-footer{margin-top:auto}

/* SectionCenter */
.bc-container{
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
}
.AbsoluteIndicator{
    position: absolute;
    right: 25px;
    top: 25px;
    color: #949598;
    font-size: 13px;
}
.AbsoluteIndicator-btn{
    position: absolute;
    right: 15px;
    color: #0710186b;
    font-size: 10px;
}
/* Hero */
.hero{
  min-height:100svh;
  padding-top:var(--nav-h);
  display:grid;
  place-items:center;
  position:relative;
  overflow:hidden;
}
.particle-background{
  position:absolute; inset:0;
  background:
    radial-gradient(800px 400px at 20% 20%, rgba(77,169,255,.18), transparent 60%),
    radial-gradient(700px 450px at 80% 35%, rgba(45,85,128,.16), transparent 55%),
    radial-gradient(circle at 50% 120%, rgba(255,255,255,.10), transparent 55%),
    linear-gradient(180deg, #0d0e11 0%, #1e2c56d9);
}
.triangle-overlay{
  position:absolute; inset:-20%;
  background:
    /* horizontální linky */
    repeating-linear-gradient(
      0deg,
      rgba(77,169,255,.08) 0px,
      rgba(77,169,255,.08) 1px,
      transparent 1px,
      transparent 42px
    ),
    /* vertikální linky */
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.05) 0px,
      rgba(255,255,255,.05) 1px,
      transparent 1px,
      transparent 42px
    );

  opacity:.60;
  mask-image: radial-gradient(circle at center, black 0%, transparent 60%);
  pointer-events:none;
  transform:rotate(8deg);
}

.hero-content{
  position:relative;
  z-index:2;
  text-align:center;
  padding:28px 18px;
  max-width:860px;
}
.hero-logo{
    display:flex;
    justify-content:center;
    margin-bottom:18px
}
.hero-logo-image{
  width:min(260px, 70vw);
  filter:drop-shadow(0 4px 10px rgba(0, 0, 0, .35));
  opacity: 0.5;
}

.hero-title {
    font-size: 54px;
    line-height: 1.08;
    letter-spacing: 2px;
    margin-top: 10px;
    text-transform: uppercase;
}
.hero-subtitle {
    font-size: 32px;
    line-height: 1.08;
    letter-spacing: 2px;
    margin-top: 2px;
    text-transform: uppercase;
    font-weight: 400;
    color: #4aa0f2;
}
.typewriter-text{
  font-family:"Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  color:var(--text-2);
  font-size:17px;
  margin:14px 0 24px;
  min-height: 35px;    
}

@media (max-width: 420px){

  .hero-title{
    font-size: clamp(30px, 10vw, 54px);
  }

  .hero-subtitle{
    font-size: clamp(18px, 6vw, 32px);
  }

  .typewriter-text{
    font-size: clamp(13px, 4vw, 17px);
  }

}
.cta-buttons{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

.scroll-indicator{
  position:absolute;
  bottom:22px;
  left:50%;
  transform:translateX(-50%);
  width:42px;height:42px;
  border-radius:999px;
  border:1px solid var(--border);
  display:grid;place-items:center;
  color:var(--text-2);
  background:rgba(255,255,255,.03);
  text-decoration:none;
  transition:transform var(--transition), background var(--transition), color var(--transition);
  z-index:2;
}
.scroll-indicator:hover{transform:translateX(-50%) translateY(-2px);background:rgba(255,255,255,.06);color:var(--text)}

/* Sections */
section{
  padding:88px 18px;
  min-height:100svh;
}
.section-header{
  max-width:var(--max);
  margin:0 auto 80px;
}
.section-header h3{
    font-size: 38px;
    letter-spacing: 2px;
    margin-bottom: 10px;
    text-transform: uppercase;
    font-weight: 400;
    padding: 5px;
    color: #eee;
}
.section-header h3::after {
    content: '';
    display: block;
    width: 78px;
    height: 4px;
    margin-top: -8px;
    margin-left: 1px;
    background: linear-gradient(200deg, rgb(39 152 241) 0%, rgb(46 145 239 / 74%) 30%, rgb(37 75 199 / 32%) 100%);
    border-radius: 10px;
    opacity: 0.8;
    filter: drop-shadow(2px 4px 6px black);
    /* border: 1px solid rgb(206 206 206 / 20%); */
}
.section-subtitle{
    color: rgb(255 255 255 / 70%);
    font-size: var(--mdFont);
    letter-spacing: 0.2px;
    padding:5px;
    margin-left: 34px;
    font-family: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 17px;
}


/* Cards / buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-size: 12px;
  padding:12px 18px;
  border-radius:14px;
  font-weight:700;
  text-decoration:none;
  border:var(--borderblue);
  cursor:pointer;
  transition:transform var(--transition), box-shadow var(--transition), background var(--transition), border-color var(--transition);
}
.btn.primary{
  background:linear-gradient(200deg, rgba(77,169,255,1), rgba(45,85,128,1));
  color:#071018;
  box-shadow:0 10px 24px rgba(77,169,255,.22);
  text-align: center;
  line-height: normal;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 13px;
  font-weight:600;
  filter: drop-shadow(2px 4px 6px black);

}
.btn.secondary{
  background: linear-gradient(200deg, rgb(255 255 255 / 72%) 0%, rgb(180 180 180 / 55%) 30%, rgb(58 63 74) 100%);
  border-color: rgb(85 85 85 / 45%);
  color:var(--text);
  text-align: center;
  line-height: normal;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 13px;
  font-weight:600;
  filter: drop-shadow(2px 4px 6px #111);
}
.steam{
    width: 150px;
    position: relative;
    display: block;
    z-index: 99;
    margin: 4px auto;
    filter: drop-shadow(2px 4px 6px black);
    opacity: 0;
    transform: translateY(20px);
}
@media (min-width: 768px){
 .steam{
    position: absolute;
    z-index: 99;
    top: 230px;
    right: 60px;
    margin: 0;
 }
}

.project-slide.is-active .steam {
  opacity: 1;
  transform: none;
}

.btn.full{width:100%}
.btn:hover{transform:translateY(2px)}
.btn.primary:hover{box-shadow:0 14px 32px rgba(77,169,255,.30); transform: translateY(2px);}
.btn.secondary:hover{background: linear-gradient(200deg, rgb(255 255 255 / 88%) 0%, rgb(180 180 180 / 95%) 30%, rgb(58 63 74) 100%); border-color: rgb(97 97 97);}

/* Services */
.services{
    background:transparent;
}
.services-grid{
  max-width:var(--max);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:16px;
}
.service-card{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--r);
  padding:18px 16px;
  box-shadow:0 0 0 rgba(0,0,0,0);
  transition:transform var(--transition), border-color var(--transition), background var(--transition), box-shadow var(--transition);
}
.service-card i{
  color:var(--bc-blue);
  font-size:1.35rem;
}
.service-card h3{margin:10px 0 6px;font-size:1.05rem}
.service-card p{color:var(--text-2)}
.service-card:hover{
  transform:translateY(-4px);
  border-color:rgba(77,169,255,.35);
  background:rgba(255,255,255,.045);
  box-shadow:var(--shadow);
}

/* Tools */
.tools{background:transparent;}
.tools-grid{
    max-width: var(--max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 25px;
}
/* Tools cards reveal */
#technology .tool-card{
  opacity: 0;
  transform: translateY(14px) scale(.99);
  transition: opacity 420ms cubic-bezier(.2,.8,.2,1),
              transform 420ms cubic-bezier(.2,.8,.2,1);
  will-change: opacity, transform;
}
#technology .tool-card.is-in{
  opacity: 1;
  transform: translateY(0) scale(1);
}
#technology .tool-card.is-in:hover{
  transform: translateY(2px);
}
@media (prefers-reduced-motion: reduce){
  #technology .tool-card{ opacity:1; transform:none; transition:none; }
}

.tool-card{
background: linear-gradient(200deg, rgb(255 255 255 / 54%) 0%, rgb(255 255 255 / 34%) 30%, rgb(53 60 74 / 66%) 100%);
    border: 2px solid rgb(255 255 255 / 28%);
    border-radius: 22px;
    padding: 16px;
    display: flex;
    gap: 20px;
    align-items: center;
    height: 200px;
    filter: drop-shadow(2px 4px 6px black);
}
.tool-icon{
  width:44px;
  height:44px;
  border-radius:14px;
  display:grid;
  place-items:center;
  border:1px solid rgba(77,169,255,.18);
  background: linear-gradient(200deg, rgba(77, 169, 255, 1), rgba(45, 85, 128, 1));
  color: #071018;
}
.tool-info h4{
    font-size: var(--bgFont);
    margin-bottom: 8px;
    letter-spacing: 2px;
}
.progress-bar{
  width:100%;
  height:7px;
  background:rgba(255,255,255,.06);
  border-radius:999px;
  overflow:hidden;
}
.progress{
  width:0%;
  height:100%;
  background:linear-gradient(90deg, var(--bc-blue) 0%, var(--bc-blue-dark) 100%);
  transition:width 900ms cubic-bezier(.2,.8,.2,1);
}

/* Projects / Carousel */
.projects{background:transparent;}
.project-carousel{
  max-width:var(--max);
  margin:0 auto;
  position:relative;
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:12px;
  align-items:center;
}
.carousel-viewport{
  overflow:hidden;
  border-radius:var(--r);
}
.carousel-track{
  display:flex;
  transform:translateX(0);
  transition:transform var(--transition);
  will-change:transform;
}
.project-slide{
  flex:0 0 100%;
  padding:0;
}
.project-card{
  background:transparent;
  border:none;
  border-radius:var(--r);
  overflow:hidden;
}
.project-header{
  background:rgba(255,255,255,.04);
  border-bottom:1px solid rgba(255,255,255,.08);
  padding:14px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.project-title{
  font-family:"Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  color:var(--text-2);
  font-size:.95rem;
}
.terminal-dots{display:flex;gap:7px}
.terminal-dots span{
  width:10px;height:10px;border-radius:999px;
  background:rgba(255,255,255,.18);
}
.project-content{padding:18px 16px}
.terminal-text{
  font-family:"Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  color:rgba(77,169,255,.92);
}
.terminal-text p{margin:8px 0}

.carousel-btn{
  background: linear-gradient(200deg, rgb(255 255 255 / 75%) 0%, rgb(255 255 255 / 30%) 30%, rgb(86 94 110 / 28%) 100%);
  border: 2px solid rgb(255 255 255 / 27%);
  color: var(--text);
  box-shadow: 0 10px 24px rgb(0 0 0 / 25%);
  width:44px;height:44px;
  border-radius:14px;
  cursor:pointer;
  display:grid;
  place-items:center;
  transition:transform var(--transition), opacity var(--transition);
  filter: drop-shadow(2px 4px 6px black);
}
.carousel-btn:hover{transform:translateY(2px); background: linear-gradient(200deg, rgb(255 255 255 / 88%) 0%, rgb(180 180 180 / 95%) 30%, rgb(58 63 74) 100%); border-color: rgb(246 246 246 / 50%);}
.carousel-btn:disabled{opacity:.35;cursor:not-allowed;transform:none}

.carousel-dots{
  grid-column:1 / -1;
  display:flex;
  gap:10px;
  justify-content:center;
  margin-top:12px;
}
.carousel-dot{
  width:10px;height:10px;border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.08);
  cursor:pointer;
}
.carousel-dot.is-active{
  background:rgba(77,169,255,.85);
  border-color:rgba(77,169,255,.85);
}

/* Contact */
/* === Contact: blueprint grid overlay === */
#contact{
  position: relative;
  overflow: hidden; /* aby overlay nelezl ven */
}

#contact::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;

  /* blueprint grid (32px) */
  background:
    repeating-linear-gradient(
      0deg,
      rgba(77,169,255,.06) 0px,
      rgba(77,169,255,.06) 1px,
      transparent 1px,
      transparent 42px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.04) 0px,
      rgba(255,255,255,.04) 1px,
      transparent 1px,
      transparent 42px
    );
  pointer-events: none;
  transform: rotate(8deg);
  opacity:.8;
  /* stejný “soft focus” jako na hero overlay, ale jemně */
  mask-image: radial-gradient(circle at 50% 30%, black 0%, transparent 70%);
}

#contact > *{
  position: relative;
  z-index: 1;
}

.contact{background:transparent;}
.contact-container{max-width:720px;margin:0 auto}
.contact-form{
  background: linear-gradient(200deg, rgb(255 255 255 / 38%) 0%, rgb(255 255 255 / 26%) 30%, rgb(55 59 67) 100%);
  border: 2px solid rgb(255 255 255 / 28%);
  border-radius: 22px;
  padding:25px;
  filter: drop-shadow(2px 4px 6px black);
}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-group{
    position:relative;
    margin-bottom:20px;
    font-size: 13px;
}
.form-group input,
.form-group textarea{
  width:100%;
  background: linear-gradient(200deg, rgb(67 67 69) 0%, rgb(56 57 59) 30%, rgb(32 35 40) 100%);
  border: 1px solid rgb(255 255 255 / 25%);
  border-radius: 22px;
  padding: 16px;
  color:var(--text);
  outline:none;
  transition:border-color var(--transition), background var(--transition);
  font-size:13px;
}
textarea{
  resize: none; 
  min-height: 200px;
  max-height: 500px;
}
.form-group input:focus,
.form-group textarea:focus{
  border-color:rgba(77,169,255,.55);
  background:rgba(255,255,255,.045);
}
.form-group label{
  position:absolute;
  left:12px;
  top:12px;
  padding:0 8px;
  color:rgba(255,255,255,.62);
  background:transparent;
  pointer-events:none;
  transform-origin:left top;
  transition:transform var(--transition), color var(--transition), background var(--transition);
}
.form-group input:focus + label,
.form-group textarea:focus + label{
  transform:translateY(-18px) scale(.88);
  color:rgba(255,255,255,.65);
  background: #161719;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .10);
}
.form-group input:not(:placeholder-shown) + label,
.form-group textarea:not(:placeholder-shown) + label{
  transform:translateY(-18px) scale(.88);
  color:rgba(255,255,255,.40);
  background: #161719;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .10);
}
.form-hint{margin-top:10px;color:var(--text-2);font-size:.9rem}

.toast{
  margin-top:12px;
  min-height:20px;
  color:rgba(255,255,255,.90);
  font-size:.95rem;
}

/* Footer (fixed social bar) */
.footer{
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 950;
    padding: 12px 14px;
    background: rgba(20, 22, 27, .72);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--border);
    box-shadow: var(--shadow);

}
.footer-content{
  max-width:100%;
  margin:0 auto;
  display:grid;
  grid-template-columns: 1fr auto 1fr; /* left | center | right */
  align-items:center;
  gap:14px;
}

/* footer slots */
.footer-logo{ justify-self:start; }
.social-links{ justify-self:center; }
.footer-logo{
  display:flex;
  align-items:center;
  gap:10px;
  opacity: 0.32;
  min-width:100px;
}
 .fa-brands, .fab {
    font-weight: 400;
    font-size: 18px;
}
@media (max-width: 768px){
  .footer-logo{
    display:none;
  }
}
.footer .logo-image{width:28px;height:28px}
.footer .logo-text{font-size:.95rem}
.social-links{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin:0;
}
.social-links a{
  background: linear-gradient(200deg, rgba(77, 169, 255, 1), rgba(45, 85, 128, 1));
  color: #071018;
  box-shadow: 0 10px 24px rgba(77, 169, 255, .22);
  width:40px;height:40px;
  border-radius:14px;
  display:grid;place-items:center;
  text-decoration:none;
  border:var(--borderblue);
  transition:transform var(--transition);
  filter: drop-shadow(2px 4px 6px black);
}
.social-links a:hover{transform:translateY(2px);border-color:rgba(77,169,255,.35);color: var(--text);}
.copyright{
    color:rgb(89 89 93); 
    white-space:nowrap; 
    justify-content:center; 
    display: flex;
    justify-self:end;
    font-size: var(--smFont);
}
.mobile-drawer-footer a{
  background: linear-gradient(200deg, rgba(77, 169, 255, 1), rgba(45, 85, 128, 1));
  color: #071018;
  box-shadow: 0 10px 24px rgba(77, 169, 255, .22);
  width:100%;
  height:40px;
  padding: 10px 25px;
  border-radius:14px;
  display:flex;
  place-items:center;
  text-decoration:none;
  border:1px solid rgba(255,255,255,.10);
  transition:transform var(--transition);
  gap: 20%;
}
/* Responsive */
@media (max-width: 980px){
  .services-grid, .tools-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
}
@media (max-width: 768px){
  .nav-links{display:none}
  .mobile-menu-toggle{display:block}
  .project-carousel{grid-template-columns:1fr;gap:10px}
  .carousel-btn{display:none}
  .form-row{grid-template-columns:1fr}
}

@media (min-width: 521px) and (max-width: 768px){
  .footer-content{
    display:block;         /* override grid */
    position:relative;     /* anchor absolute children */
    min-height:40px;       /* match icon height for safe centering */
  }

  .social-links{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    justify-content:center;
  }

  .copyright{
    position:absolute;
    right:0;               /* uses footer-content inner edge */
    top:50%;
    transform:translateY(-50%);
  }
}

@media (max-width: 899px){
  section{
    padding-bottom: calc(88px + var(--footer-h) + 28px);
  }
}

@media (max-width: 520px){
  section{
    padding: 74px 14px calc(74px + var(--footer-h) + 28px);
    }
  .footer-content{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    }
  .social-links{
      justify-content:center;
    }
}


@media (min-width: 900px){

  header.hero, section{
    height: 100svh;
    min-height: 100svh;
  }
  section{
    padding-top: calc(var(--nav-h) + 22px);
    padding-bottom: calc(var(--footer-h) + 22px);
  }
  section#contact {
    height: auto !important;
    min-height: calc(100svh - var(--nav-h));
  }
    

  html{
    scroll-padding-top: var(--nav-h);
    scroll-padding-bottom: var(--footer-h);
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .carousel-track{transition:none}
  .btn, .service-card, .carousel-btn, .scroll-indicator, .social-links a{transition:none}
}



/* === Carousel content centering (keeps arrows in place) === */
.carousel-viewport{
  display:flex;
  justify-content:center; /* centers the whole slide content within the viewport */
}
.carousel-track{width:100%;}
.project-slide{
  display:flex;
  justify-content:center; /* center the card as a whole */
}
.project-card{width:100%;}
/* Width of the whole content block (logo+tags+about). Adjust if you want tighter/wider. */
.project-layout{
  width:min(710px, 100%);
  margin:0 auto;
  position:relative;
  padding:18px 16px 16px;
}

.project-card{overflow:visible;}

/* About panel (content area) */
.project-about{
  margin-top:68px;
  background: linear-gradient(200deg, rgb(255 255 255 / 15%) 0%, rgb(50 50 50 / 94%) 30%, rgb(0 0 0 / 80%) 100%);
  border: 1px solid rgb(49 48 48 / 66%);
  border-radius:20px;
  padding:16px 16px;
  min-height: calc(1.6em * 2 + 32px);
}
.project-about p{margin:8px 0;color:var(--text-2);}
.project-about p:first-child{margin-top:0;}
.project-about p:last-child{margin-bottom:0;}

/* Logo tile (glass) */
.project-logo-tile{
  position:absolute;
  top:8px;
  left:50%;
  transform:translateX(-50%);
  width:220px;
  height:220px;
  border-radius:22px;
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
  display:grid;
  place-items:center;
  z-index:3;
  margin-top: 10px;
  background: linear-gradient(200deg, rgb(255 255 255 / 75%) 0%, rgb(255 255 255 / 30%) 30%, rgb(86 94 110 / 28%) 100%);
  border: 2px solid rgb(255 255 255 / 27%);
}
.project-logo{
  width:100%;
  height:100%;
  object-fit:contain;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.45));
}
.Project-Description{
    max-width: 40ch;
    font-size: 14px;
    font-weight: 300;
    letter-spacing: 0.5px;
    line-height: 1.7;
}
/* Tags */
.project-tags{
  margin-top:156px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:flex-start;
}
.project-tag{
  font-family:"Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  line-height:1;
  padding:8px 10px;
  border-radius:999px;
  border:var(--borderblue);
  background:rgb(77 169 255 / 25%);
  color:rgba(255,255,255,.85);
  white-space:nowrap;
  letter-spacing: 1px;
  box-shadow: inset 0 0px 24px rgb(39 152 241 / 20%);
}

/* Desktop overlap look: logo overlaps the about panel a bit */
@media (min-width: 769px){
  .project-logo-tile{
    left:65%;
    top:-10px;
    transform:none;
  }
  .project-about{ margin-top:28px; padding:25px 50px 30px 50px; max-width: 80%; min-height: 206px;}
  .project-tags{ margin-top:18px; }
}

/* Mobile layout: logo -> tags -> about, with tag rows (3 + offset) */
@media (max-width: 768px){
  .project-layout{
    padding:18px 16px 16px;
    text-align:center;
  }
  .project-logo-tile{
    position:relative;
    left:auto; top:auto;
    transform:none;
    margin:0 auto 14px;
  }
  .project-tags{
    justify-content:center;
    margin-top:0;
    display:grid;
    grid-template-columns: repeat(3, max-content);
    gap:10px 10px;
  }
  .project-tags .project-tag:nth-child(4){ grid-column:2; }
  .project-tags .project-tag:nth-child(5){ grid-column:3; }
  .project-about{
    margin-top:14px;
    text-align:left;
  }
}

/* Reveal animations (stagger controlled by JS) */
.project-logo-tile,
.project-about,
.project-tag{
  opacity:0;
  transform:translateY(10px) scale(.985);
  transition:opacity 320ms cubic-bezier(.2,.8,.2,1), transform 320ms cubic-bezier(.2,.8,.2,1);
  will-change:opacity, transform;
  filter: drop-shadow(2px 4px 6px black);
}
.project-tag{transition-duration:260ms;}

.project-slide.is-active .project-logo-tile,
.project-slide.is-active .project-about,
.project-slide.is-active .project-tag{
  opacity:1;
  transform:translateY(0) scale(1);
}
.ProjectClass-Title{
    text-transform:uppercase;
    letter-spacing:4px;
    margin-bottom:15px;
    font-size: 21px;
    font-weight: 500;
}
.fa-xmark{
    color:var(--text);
}
.submit-btn {
    margin: auto;
    width: 200px;
    display: block;
    filter: drop-shadow(2px 4px 6px #111) !important;
}

/* === Projects background video (desktop only) === */
@media (min-width: 900px){
  .projects{
    position:relative;
    overflow:hidden; /* clip the video */
  }
  .projects-bg{
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
  }
    .projects-bg::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;

  background: radial-gradient(ellipse at center, rgb(0 0 0 / 50%) 0%, rgb(0 0 0 / 70%) 30%, rgb(12 12 14) 100%);
}
  .projects-bg-video{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center center;
    filter: blur(5px);
    transform: scale(1.02); /* avoid edge bleed from blur */
    opacity:0;
    transition: opacity 520ms cubic-bezier(.2,.8,.2,1);
  }
  .projects-bg-video.is-active{
    opacity:1;
  }
  /* ensure real content stays above */
  .projects > *:not(.projects-bg){
    position:relative;
    z-index:1;
  }
}

@media (max-width: 899px){
  .projects-bg{ display:none; }
}

/* === Tools cards: showcase layout (logo + title + subtitle) === */
/* Keeps existing grid/card sizing intact; only upgrades inner balance. */
.tools-grid .tool-card{
  text-decoration:none;
  position:relative;
  cursor:pointer;
  transition:transform var(--transition), border-color var(--transition), background var(--transition), box-shadow var(--transition);
}

.tool-logo{
  width:100px;
  height:100px;
  border-radius:22px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  color:white;
  background: linear-gradient(200deg, rgb(255 255 255 / 83%) 0%, rgb(255 255 255 / 28%) 30%, rgb(86 94 110 / 28%) 100%);
  border: 2px solid rgb(255 255 255 / 27%);
  box-shadow:
    0 18px 38px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.10);
}

.tool-logo img{
  width:60px;
  height:60px;
  object-fit:contain;
  opacity:.95;
  filter:brightness(0) invert(1) drop-shadow(0 14px 18px rgba(0,0,0,.45));
}

.tool-subtitle{
  color:rgba(255,255,255,.62);
  margin-top:7px;
  font-size:15px;
  line-height:1.35;
  max-width:46ch;
}

.tools-grid .tool-card:hover{
  transform: translateY(2px);
  background: linear-gradient(200deg, rgb(255 255 255 / 41%) 0%, rgb(255 255 255 / 30%) 30%, rgb(74 86 111 / 50%) 100%);
  border: 2px solid rgb(113 122 141 / 55%);
}

.tools-grid .tool-card:hover::before{
  background:rgba(102,164,221,.70);
}

.tools-grid .tool-card:focus-visible{
  outline:none;
  border-color:rgba(102,164,221,.40);
  background:rgba(255,255,255,.05);
  box-shadow:
    0 24px 60px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.10);
}

.tools-grid .tool-card:focus-visible::before{
  background:rgba(102,164,221,.80);
}

@media (max-width: 768px){
  .tools-grid{
    grid-template-columns: 1fr;
  }
}

/* === STUDIO === */

#studio.bc-studio{
  /* uses global section padding */
}

/* Cluster layout (stable 2-3-2-3-2) */
#studio.bc-studio .studioG__cluster{
  --sq: 120px;                  /* square size desktop */
  --gap: 4px;                  /* spacing */

  max-width: var(--max);
  margin: 25px auto;

  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--gap);

  user-select: none;
}

/* Column containers */
#studio.bc-studio .studioG__col{
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  filter: drop-shadow(2px 4px 6px black);
}

/* Offset only the 2-item columns */
#studio.bc-studio .studioG__col--2{
}


/* === STUDIO PIANO HOVER (MECHANICAL / PISTON) === */
#studio.bc-studio .studioG__cluster{
  overflow: visible;
}

#studio.bc-studio .gPill{
  /* Reveal vars (already used elsewhere) */
  --reveal-y: 0px;
  --reveal-scale: 1;

  /* Piston vars */
  --lift: 0px;  /* subtle upward motion (no text scaling) */
  --px: 1;      /* body scaleX */
  --py: 1;      /* body scaleY */
  position: relative;
  isolation: isolate;
  /* Keep existing geometry */
  width: var(--sq);
  height: 300px;
  border-radius: 22px;

  display: grid;
  place-items: center;
  text-align: center;

  padding: 12px;
  font-weight: 400;
  letter-spacing: 0.5px;
  line-height: 1.2;
  color: rgba(255,255,255,.90);
  font-size: 14px;
  /* Body moved to ::before */
  background: transparent;
  border: none;
  box-shadow: none;

  transform: translateY(var(--reveal-y)) scale(var(--reveal-scale)) translateY(var(--lift));
  transition: transform 120ms cubic-bezier(.2,.9,.1,1), opacity .55s ease;

  will-change: transform, opacity;
}

/* Scaled "piston body" (text stays crisp) */
#studio.bc-studio .gPill::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;

  background: linear-gradient(200deg, rgb(255 255 255 / 83%) 0%, rgb(255 255 255 / 28%) 30%, rgb(86 94 110 / 28%) 100%);
  border: var(--pill-border);

  transform: scaleX(var(--px)) scaleY(var(--py));
  transform-origin: center;
  transition: transform 120ms cubic-bezier(.2,.9,.1,1), box-shadow 120ms cubic-bezier(.2,.9,.1,1);
  will-change: transform;

  box-shadow:
    0 18px 38px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 0 0 1px rgba(77,169,255, calc(.12 * var(--glow)));
  z-index: -1;
}


/* Center tile */
#studio.bc-studio .gPill.is-hot{
  --lift: -2px;
  --px: 1;
  --py: 1.10;
}
#studio.bc-studio .gPill.is-hot::before{
   background: linear-gradient(200deg, rgb(255 255 255 / 93%) 0%, rgb(255 255 255 / 55%) 30%, rgb(55 62 76) 100%);
}

#studio.bc-studio .studioLine{
  max-width: 80ch;
  margin: 25px auto;
  text-align: center;
  font-weight: 400;
  letter-spacing: .02em;
  color: rgba(255,255,255,.92);
  min-height: 1.6em;
  opacity: .92;
  transition: opacity 160ms ease, transform 160ms ease;
  padding: 80px 10px;
  font-family: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 17px;
}



#studio.bc-studio .studioLine.is-fade{
  opacity: .0;
  transform: translateY(2px);
}

@media (prefers-reduced-motion: reduce){
  #studio.bc-studio .gPill,
  #studio.bc-studio .gPill::before,
  #studio.bc-studio .gPill::after{
    transition: none !important;
    transform: none !important;
  }
  #studio.bc-studio .studioLine{
    transition: none !important;
  }
}



/* Variants */
#studio.bc-studio .gPill[data-variant="blue1"]{
  --pill-bg: linear-gradient(200deg, rgb(255 255 255) 0%, rgb(180 180 180) 30%, rgb(58 63 74) 100%);
  --pill-border: 2px solid rgb(255 255 255 / 27%);
}
#studio.bc-studio .gPill[data-variant="blue2"]{
  --pill-bg: linear-gradient(200deg, rgb(255 255 255) 0%, rgb(180 180 180) 30%, rgb(58 63 74) 100%);
  --pill-border: 2px solid rgb(255 255 255 / 27%);
}
#studio.bc-studio .gPill[data-variant="glass"]{
  --pill-bg: linear-gradient(200deg, rgb(255 255 255) 0%, rgb(180 180 180) 30%, rgb(58 63 74) 100%);
  --pill-border: 2px solid rgb(255 255 255 / 27%);
}
#studio.bc-studio .gPill[data-variant="white"]{
  --pill-bg: linear-gradient(200deg, rgb(255 255 255) 0%, rgb(180 180 180) 30%, rgb(58 63 74) 100%);
  --pill-border: 2px solid rgb(255 255 255 / 27%);
}

/* --- OPTIONAL: reveal animation hooks (requires JS to add classes) --- */
#studio.bc-studio .studioG__cluster.is-anim .gPill{
  opacity: 0;
  --reveal-y: 12px;
  --reveal-scale: 0.96;
  transition: opacity .55s ease, transform .55s ease;
  will-change: opacity, transform;
}

#studio.bc-studio .studioG__cluster.is-anim .gPill.is-in{
  opacity: 1;
  --reveal-y: 0px;
  --reveal-scale: 1;
}


/* Responsive tuning */
@media (max-width: 980px){
  #studio.bc-studio .studioG__cluster{
    --sq: 120px;
    --gap: 8px;
  }
}

@media (max-width: 640px){
  #studio.bc-studio .studioG__cluster{
    --sq: 120px;
    --gap: 8px;

    flex-wrap: wrap;
    justify-content: center;
  }
  #studio.bc-studio .studioG__col--2{
    margin-top: 0;
  }
}

/* Reduced motion: keep everything visible and instant */
@media (prefers-reduced-motion: reduce){
  #studio.bc-studio .studioG__cluster.is-anim .gPill{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

@media (hover: none) and (pointer: coarse) {
  .gPill {
    pointer-events: none;      /* žádné kliky/tapy */
    cursor: default;
    transform: none !important; /* pro jistotu žádné “scale” */
    transition: none !important;
  }
}


@media (max-width: 1130px){
  #studio.bc-studio .studioG__cluster{
    --sq: clamp(84px, 26vw, 120px);
    --gap: 12px;

    display: grid;
    grid-template-columns: repeat(3, var(--sq));
    gap: var(--gap);

    justify-content: center; 
    justify-items: center;   

    width: 100%;
    max-width: var(--max);
    margin: 0 auto;
  }

  #studio.bc-studio .gPill{
    width: var(--sq);
    height: var(--sq);
  }

  #studio.bc-studio .studioLine{
    display:none;
  }
    .nav-container {
    padding: 0 25px;

}
/* === SCROLL BAR === */
/* Firefox */
html {
  scrollbar-width: thin;                 /* auto | thin | none */
  scrollbar-color: rgba(255,255,255,.28) rgba(0,0,0,.12);
}

/* Chromium / Safari */
html::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
html::-webkit-scrollbar-track {
  background: rgba(0,0,0,.10);
}
html::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.22);
  border-radius: 999px;
  border: 2px solid rgba(0,0,0,.10);     /* “pill” look */
}
html::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,.32);
}