body:not([data-allow-bar]) .bar { display: none !important; }




@font-face {
  font-family: 'Kawoszeh';
  src: url('../fonts/kawoszeh/otf/kawoszeh.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IDTFIdentifier';
  src: url('../fonts/IDTF IDENTIFIER/IDTFIdentifier-0.1-Bold.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


@font-face{
  font-family: 'Concrete';
  src: url('../fonts/concrete/Concrete.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

.hero-text h1 {
  font-size: clamp(2rem, 8vw, 6.5rem);
  margin-bottom: -1rem;
  font-weight: 800;
  line-height: 0.9;
  pointer-events: none;
font-family: 'concrete', 'kawoszeh', 'IDTF IDENTIFIER', sans-serif;


}




.kuka-otsikko {
  font-size: clamp(3.6rem, 8.2vw, 7.2rem);
  line-height: .92;
  margin: 0 0 .35rem 0;
  font-weight: 800;
  color: #f0ebdb;
  padding: 0;    
  opacity: 1;    
font-family: 'concrete', 'kawoszeh', 'IDTF IDENTIFIER', sans-serif;
}


.hero-text h1,
.hero-text h2,
.scroll-intro-title,
.esittely-otsikko,
.kvStackLabel,
.kuka-otsikko,
.hinta-paaotsikko,
.boksi-header,
.otsikko-yksi,
.otsikko-kaksi,
#pallokayttoehdot h2,
#palloevasteet h2,
#pallotietosuoja h2 {
  font-family: 'concrete', 'kawoszeh', 'IDTF IDENTIFIER', sans-serif !important;
  font-weight: 700;
  letter-spacing: 0.01em;
}


#etusivu-black-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #000;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
}
#etusivu-black-bg.show {
  opacity: 1;
  pointer-events: auto;
}
body.light-mode #etusivu-black-bg,
:root.light-mode #etusivu-black-bg {
  background: #ffffff;
  transition: background 0.2s ease;
}
#fluid-canvas {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 0;
  display: block;
}
@media (max-width: 900px){
  
  #scrollArea .extra-text-left,
  #scrollArea .extra-text-right{
    transform: translateX(var(--wavy-x, 0));
    will-change: transform;
    transition: transform .15s linear; 
  }
  #fluid-canvas { display: none !important; }
}

body.light-mode .eiretuue {
  background-color: #ffffff !important;
}

.mv-host { width: 100%; height: 100%; }
.kolmesatanen2 .review-card.small .review-header .company{ font-size: 0.78rem; }
.kolmesatanen2 .review-card.small .review-body{ font-size: 0.95rem; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.kolmesatanen2 .review-card.small .stars{ font-size: 0.95rem; }
.kolmesatanen2 .review-card.small .timepill{ font-size: 0.75rem; padding: .2rem .5rem; }
.kolmesatanen2 .review-card, .kolmesatanen2 .review-card.small { width: 100%; }
.hidden {
  display: none !important;
}

.hidden-debug-bar { display: none !important; }




@media (max-width: 900px){
  #lineBox,
  .intro-panel { display: none !important; }
}

  .contact-scroll-btn,
.contact-scroll-btn:link,
.contact-scroll-btn:visited,
.contact-scroll-btn:hover,
.contact-scroll-btn:active {
    text-decoration: none !important;
    color: #ffffff !important; 
    display: none !important;  
  }

@media (min-width: 901px) {
  #contact-scroll-btn {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}




.skip-link {
  position: absolute;
  top: -50px;
  left: 0;
  background: #0d1321;
  color:  #f0ebdb;
  padding: 10px 16px;
  z-index: 99999;
  border-radius: 0 0 6px 0;
  font-size: 1rem;
  text-decoration: none;
  transition: top 0.2s ease;
  font-weight: 700;
}


.skip-link:focus {
  top: 0;
  outline: 3px solid #3e5c76;
}





.chatbot-scroll-btn {
  position: fixed;
  
  right: calc(-100px + (var(--fab-progress, 0) * (100px + 4vw)));
  bottom: 9svh;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #3e5c765f;
  color: #f0ebdb;
  border: 2px solid #3e5c76;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  z-index: 50;
  
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
  pointer-events: auto;
  
  opacity: 0; 
  cursor: pointer;

  
  transform: translateY(calc(18px * (1 - var(--fab-progress, 0))))
             scale(calc(0.96 + (var(--fab-progress, 0) * 0.04)));
  line-height: 0;
  font-size: 0; 
}


body.light-mode .chatbot-scroll-btn {
  color: #0d1321;                         
  background: rgba(13, 19, 33, 0.08);      
  border-color: #748cab;                   
}
body.light-mode .chatbot-scroll-btn:hover {
  color: #f0ebdb;                          
  background: none;                     
  border-color: #0d1321;                   
}


.chatbot-scroll-btn svg {
  width: 28px;
  height: 28px;
}
body:not(.light-mode) .chatbot-scroll-btn:hover { color: #0d1321; }

.chatbot-scroll-btn.visible {
  
  pointer-events: auto;
}

@media (max-width: 768px) {
  .chatbot-scroll-btn {
    bottom: 4svh;
    width: 52px;
    height: 52px;
    font-size: 1.2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .chatbot-scroll-btn {
    transform: none;
  }
}

@media (max-width: 900px) {
  .contact-scroll-btn {
    position: fixed;
    
    left: calc(-160px + (var(--fab-progress, 0) * (160px + 4vw)));
    bottom: 9svh;
    min-width: 140px;
    height: 60px;
    padding: 0 16px;
    border-radius: 999px;
    text-decoration: none;  
    color: #ffffff;         
    background: #3e5c765f;
    border: 2px solid #3e5c76;
    display: flex !important;  
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 700;
    z-index: 50;
    transition: none;   
    pointer-events: auto;
    opacity: 0;         
    cursor: pointer;

    transform: translateY(calc(18px * (1 - var(--fab-progress, 0))))
               scale(calc(0.96 + (var(--fab-progress, 0) * 0.04)));
  }

  .contact-scroll-btn.visible { pointer-events: auto; }

  @media (max-width: 768px) {
    .contact-scroll-btn {
      bottom: 4svh;
      min-width: 120px;
      height: 52px;
      font-size: 0.95rem;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .contact-scroll-btn { transform: none; }
  }
}





#chatbot.chatbot {
  position: fixed;      
  right: 4vw;
  bottom: 13vh;         
  z-index: 10010;       
  display: none;        
  max-height: 88vh;
}
#chatbot.chatbot.open,
#chatbot.chatbot[aria-hidden="false"] {
  display: block;
}
@media (max-width: 768px) {
  #chatbot.chatbot { bottom: 22svh; right: 4vw; max-height: 92vh; }
}
@font-face {
  font-family: 'Verdante';
  src: url('../fonts/verdante/VerdanteSans-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Verdante';
  src: url('../fonts/verdante/VerdanteSans-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}







  .paasivu  {
  scroll-behavior: smooth;
}

.paasivu {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.paasivu  {
  height: 100%;
  width: 100%;



  }
  


  .custom-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(0, 0, 0);
    z-index: 0; 
    pointer-events: none;
    transition: z-index 0.3s; 
}

body.light-mode .custom-bg {
  background-color: #ffffff; 
}


    .error404 {

      background: #111;
      color: #eee;
      text-align: center;
      padding: 10%;
      min-height: 100vh;
      box-sizing: border-box;
    }
    .error404-title {
      font-size: 5rem;
      margin-bottom: 1rem;
    }
    .error404-text {
      font-size: 1.2rem;
      margin-bottom: 2rem;
    }
    .error404-link {
      color: #f0ebdb;
      text-decoration: none;
      font-weight: bold;
    }
    .error404-link:hover {
      color: #fff;
    }

    body.light-mode .error404 {
  background: #ffffff; 
  color: #0d1321;
}

body.light-mode .error404-link {
  color: #0d1321;
}

body.light-mode .error404-link:hover {
  color: #555; 
}





.sivu {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 100vh;
  background: inherit;

  visibility: hidden;
  opacity: 0;
  pointer-events: none;

  transition: opacity 0.4s ease;
  z-index: 0;
  content-visibility: auto;
  contain-intrinsic-size: 1000px;
}

.sivu.active {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
  content-visibility: visible;
}




#harmaaFiltteri {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(150, 150, 150, 0.4);
  z-index: 9998;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}
#harmaaFiltteri.nayta {
  opacity: 1;
}




#siirtymaOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  z-index: 9999;
  transform: translateY(100%);
  opacity: 1;
  transition: transform 0.6s ease, opacity 0.3s ease, clip-path 0.6s ease;
  pointer-events: none;
  clip-path: ellipse(0% 0% at 50% 50%);
}
#siirtymaOverlay.nayta-alhaalta,
#siirtymaOverlay.nayta-ylhaalta {
  transform: translateY(0);
  clip-path: ellipse(150% 120% at 50% 50%);
}
#siirtymaOverlay.poistu-ylos {
  transform: translateY(-100%);
  clip-path: ellipse(0% 0% at 50% 0%);
}
#siirtymaOverlay.poistu-alas {
  transform: translateY(100%);
  clip-path: ellipse(0% 0% at 50% 100%);
}


  .fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  }

  .fade-in.visible {
    opacity: 1;
    transform: translateY(0);
  }

.hero-socials-white {
  position: absolute;
  bottom: 5vh;
  right: 2%;
  display: flex;
  gap: 0.75vw;
  z-index: 500;
}


.somet-circle {
  width: 41px;
  height: 41px;
  border: 2px solid #1d2d44;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  box-sizing: border-box;
  cursor: pointer;
}

.somet-circle img {
  width: 100%;
  height: 100%;
  object-fit: contain;

  
  filter: invert(93%) sepia(9%) saturate(350%) hue-rotate(318deg) brightness(101%) contrast(90%);


}





.relative-wrapper {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 1;
  pointer-events: none; 
  background: black; 
  color: white;
}





#pallo {
  position: fixed;
  top: 0; left: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
  transition: width 0.12s ease, height 0.12s ease;
  background: radial-gradient(circle, #f0ebdb 60%, transparent 100%);
  overflow: visible;
  display: flex;
  justify-content: center;
  align-items: center;
}


@media (max-width: 900px) {
  #pallo,
  #palloProjektit,
  #palloYhteys {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }
}



::selection {
  background: transparent;   
  color:  #748cab;       
}


::-moz-selection {
  background: transparent;
  color:  #748cab;
}




  :root{
    --gap:4px;
    --rad:3px;
    --dark:#0d1321;
    --light:#f0ebdb;
  }

body {
    margin:0;
    background:#000000;
    overflow-x: hidden;
    color: var(--light);
    font-family: 'Verdante', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  }


  @keyframes slide{
    0%   { background-position:0 0%; }
    100% { background-position:0 100%; }
  }

  
  h1 {
    padding: 4rem 2rem;
    opacity: 0;
    transition: opacity 0.5s ease;
  }

  body.content-visible h1 {
    opacity: 1;
  }

    
  h2 {
    padding: 4rem 2rem;
    opacity: 0;
    transition: opacity 0.5s ease;
  }

  body.content-visible h2 {
    opacity: 1;
  }



.no-scroll {
  overflow: hidden;
  overscroll-behavior: none;
}



body.light-mode {
  background: #f0ebdb;
  color: #0d1321; 
}

body.light-mode .sivu {
  background: inherit;
}

body.light-mode #harmaaFiltteri {
  background-color: rgba(200, 200, 200, 0.3);
}

body.light-mode #siirtymaOverlay {
  background-color: #ffffff;
}

body.light-mode .hero-socials-white {
  bottom: 5vh;
  right: 2%;
}

body.light-mode .somet-circle {
  border: 2px solid #748cab;
}

body.light-mode .somet-circle img {
  filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(80%) contrast(100%);
}

body.light-mode .relative-wrapper {
  background: #f0ebdb;
  color: #0d1321;
}

body.light-mode #pallo {
  background: radial-gradient(circle, #0d1321 60%, transparent 100%);
}

body.light-mode h1 {
  color: #0d1321;
}
body.light-mode h2 {
  color: #0d1321;
}

body.light-mode .intro-panel {
  background: #ffffff;
}

body.light-mode .line-box .bar {
  background: linear-gradient(to bottom,
      #f0ebdb 0%,
      #0d1321 33%,
      #f0ebdb 66%,
      #f0ebdb 100%);
}

body.light-mode ::selection {
  background: transparent;
  color: #748cab;
}

body.light-mode ::-moz-selection {
  background: transparent;
  color: #748cab;
}

.hero {
  position: relative;
  height: 100vh ;
  width: 100vw !important;
  color: #f0ebdb;
  display: flex;
  pointer-events: none !important;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
  pointer-events: auto;
  z-index: 3;
  overflow-x: hidden;
}

.hero-text {
  max-width: 60vw;
  margin: 20px auto 0 auto;
  text-align: center;
    pointer-events: none;
}



.hero-text h2 {
  font-size: clamp(2rem, 8vw, 6.5rem);
  margin-bottom: 0.5rem;
  font-weight: 700;
  line-height: 0.8;
    pointer-events: none;
}

.hero-text p {
  font-size: clamp(1rem, 3.5vw, 1.3rem);
  line-height: 1.35;
  color: #f0ebdb;
  margin: 0.5rem auto 0;
  text-align: center;
      pointer-events: none;
}



.hero-text h1,
.hero-text p {
  opacity: 0;
  transform: scaleY(0);
  transform-origin: bottom center;
  filter: blur(10px);
  transition: 
    opacity 1.2s ease,
    transform 1.2s ease,
    filter 1.2s ease;
}


.hero-text h2,
.hero-text p {
  opacity: 0;
  transform: scaleY(0);
  transform-origin: bottom center;
  filter: blur(10px);
  transition: 
    opacity 1.2s ease,
    transform 1.2s ease,
    filter 1.2s ease;
}


.hero-text.visible h1 {
  opacity: 1;
  transform: scaleY(1);
  filter: blur(0);
  transition-delay: 0.1s;
}

.hero-text.visible h2 {
  opacity: 1;
  transform: scaleY(1);
  filter: blur(0);
  transition-delay: 0.1s;
}

.hero-text.visible p {
  opacity: 1;
  transform: scaleY(1);
  filter: blur(0);
  transition-delay: 0.3s;
}


body.light-mode .hero {
  color: #0d1321;
}

body.light-mode .hero-text h1 {
  color: #0d1321;
}
body.light-mode .hero-text h2 {
  color: #0d1321;
}

body.light-mode .hero-text p {
  color: #0d1321;
}





.hero-buttons-right {
  position: absolute;
  bottom: 8vh !important;
  left: 4vw;
  right: 4vw;               
  display: flex;
  flex-direction: row;      
  justify-content: space-between; 
  align-items: flex-end;
  gap: 10px;
  z-index: 109;
  background: none;
  pointer-events: none;     
  width: auto;
}
.hero-buttons-right .hero-btn-static{ pointer-events: auto; }


.hero-buttons-right .hero-btn-static {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.hero-buttons-right.visible .hero-btn-static {
  opacity: 1;
  transform: translateY(0);
}


#chatbot-toggle.fab-pos {
  position: absolute !important;
  bottom: 8vh;
  right: 4vw;           
  left: auto;
  z-index: 109;
  background: none;
  pointer-events: auto;

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

  
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
#chatbot-toggle.fab-pos.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.hero-text.visible p {
  opacity: 1;
  transform: scaleY(1);
  filter: blur(0);
  transition-delay: 0.4s;
}



@media (max-width: 768px) {
  .hero { height: 100svh; }
  .hero-text { max-width: 92vw; margin: -40px auto 0; }
  
  
  .hero-text h1 {
    font-size: clamp(2.4rem, 11vw, 4.6rem); 
    line-height: 0.95;
    margin-bottom: 1rem; 
    text-wrap: balance; 
  }

  .hero-text h2 {
    font-size: clamp(2.2rem, 10.5vw, 4.6rem);
    line-height: 0.98;
    margin-top: -0.5rem; 
    text-align: justify;        
    text-align-last: center;    
    hyphens: auto;              
    word-break: normal;
    text-wrap: balance;         
  }

  
  .hero-text { max-width: 94vw; }

  .hero-text.visible p { transition-delay: 0.2s; }

  
  .hero-buttons-right {
    position: absolute;
    left: 4vw;
    right: 4vw;                
    bottom: 6svh;
    top: auto;
    transform: none;
    display: flex;
    flex-direction: row;       
    justify-content: space-between; 
    align-items: center;
    width: auto;
    gap: 10px;
    z-index: 109;
    pointer-events: none;      
  }
  .hero-buttons-right .hero-btn-static{ pointer-events: auto; }
  #chatbot-toggle.fab-pos {
    position: absolute !important;
    left: auto;
    right: 4vw;
    bottom: 6svh;
    top: auto;
    transform: none;
    width: auto;
    z-index: 109;
  }
  .hero-btn-static,
  #chatbot-toggle.fab-pos {
    width: 200px;
    padding: 12px 20px;
    font-size: 1rem;
    height: auto;
  }



  
  .kuka-otsikko { font-size: clamp(2.2rem, 8vw, 3.5rem); margin-bottom: 1rem; }
  .kuka-teksti { font-size: 1.1rem; line-height: 1.35; }
  .row-wrap { height: 1.35em; }

  
  .esittely-osio { height: auto; padding: 10svh 6vw; flex-direction: column; gap: 2rem; }
  .esittely-tekstit { width: 100%; }
  .esittely-otsikko { font-size: clamp(1.8rem, 7vw, 2.6rem); }
  .esittely-kuvaus { font-size: 1.2rem; max-width: 90vw; }

  
  .jattiosio { padding: 8svh 6vw; gap: 8svh; }
  .jatti-rivi, .jatti-rivi.peilattu { flex-direction: column; gap: 2rem; }
  .jatti-teksti { width: 100%; transform: none; font-size: 1.05rem; }
  .jatti-teksti h2 { font-size: clamp(1.6rem, 6.5vw, 2.2rem); margin-left: 0; margin-bottom: 0.25rem; text-align: left; }
  .jatti-rivi .jatti-laatikko, .jatti-rivi.peilattu .jatti-laatikko { width: 100%; height: 40svh; transform: none; }

  
  .kolmesatainen { height: 220svh; }
  .vasen-teksti { font-size: clamp(1.8rem, 8vw, 3rem); left: 6vw; bottom: 10%; }
  .oikea-teksti { font-size: 1.1rem; right: 6vw; max-width: 80vw; }

  
  .kvStickyArea { height: 320svh; }
  .kvStickyArea .kuutiopelle3 { top: 280svh; height: 120svh;  }
  .kvStickyArea .kuutiopelle3-inner { top: 20svh; width: 90vw; height: 40svh; }
  .kvStickyArea .kvCard { position: relative; top: 0; margin: 2rem auto; width: 90vw; height: auto; }
  .kvStickyArea .kvSkillsStack { width: 90vw; margin: 0 auto; }
  .kvSkillCard { height: auto; position: relative; top: 0; margin: 0 0 1rem 0; }

  
  .color-theme-row { gap: 8px; padding: 0 6vw; }
}






@media (max-width: 480px){
  .hero {
    min-height: 100svh;
    padding: 2svh 5vw 18svh; 
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    text-align: center;
  }

  
  .hero-buttons-right {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    bottom: 8svh !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(12px, 5vw, 20px) !important;
    width: auto !important;
    z-index: 109 !important;
  }

  .hero-buttons-right .hero-btn-static {
    min-width: 150px;
    max-width: 200px;
    padding: 12px 16px;
    font-size: 0.95rem;
    height: auto;
    text-align: center;
  }

  
  .hero-buttons-right .hero-btn-static,
  .hero-buttons-right #chatbot-toggle.fab-pos {
    transform: none !important;
    vertical-align: middle;
  }
}

@media (max-width: 480px){
  .hero-buttons-right{
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    bottom: 8svh !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(12px, 5vw, 20px) !important;
    width: auto !important;
    z-index: 109 !important;
  }

  .hero-buttons-right .hero-btn-static{
    min-width: 190px;
    max-width: 190px;
    padding: 14px 20px;
    font-size: 1.05rem;
    height: auto;
    border-radius: 999px;
  }

  .hero-buttons-right .hero-btn-static:hover{
    height: auto !important;
    transform: none !important;
  }
}

@media (max-width: 480px){
  .hero-text {
    margin: 0 auto 0 !important;
    transform: translateY(-4svh); 
  }
}

.hero-btn-static,
#chatbot-toggle.fab-pos {
  position: relative;
  pointer-events: auto;
  width: 200px;
  height: auto;
  padding: 18px 32px;
  font-size: 1.3rem;
  background: none;
  color: #f0ebdb;
  border: 2px solid #748cab;
  border-radius: 999px;
  cursor: pointer;
  line-height: 1.4;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  z-index: 109;
  
  transition: height 0.8s ease, transform 0.8s ease;
}


body.light-mode .hero-btn-static,
body.light-mode #chatbot-toggle.fab-pos {
  color: #0d1321;
}

body.light-mode .hero-btn-static:hover,
body.light-mode #chatbot-toggle.fab-pos:hover {
  color: #f0ebdb;
}

.hero-btn-static:hover,
#chatbot-toggle.fab-pos:hover {
  
  transform: translateY( 0px);
  border: none;
  transition: transform 0.25s ease;
}

body:not(.light-mode) .hero-btn-static.hovered,
body:not(.light-mode) #chatbot-toggle.fab-pos.hovered {
  color: #f0ebdb; 
}


body.light-mode .hero-btn-static:hover,
body.light-mode #chatbot-toggle.fab-pos:hover {
  color: #f0ebdb !important;
}



@media (max-width: 480px) {
  .hero-buttons-right .hero-btn-static {
    min-width: 175px !important;   
    max-width: 175px !important;
    padding: 13px 20px !important; 
    font-size: 0.98rem !important; 
    border-radius: 999px !important;
  }

  #chatbot-toggle.fab-pos {
    min-width: 175px !important;
    max-width: 175px !important;
    padding: 13px 20px !important;
    font-size: 0.98rem !important;
  }
}



  
  .chatbot-fab {
    position: fixed; right: 24px; bottom: 24px;
    width: 56px; height: 56px; border-radius: 50%;
    border: none; font-size: 22px; cursor: pointer;
    box-shadow: 0 8px 24px rgba(0,0,0,.35);
    background: #1d2d44; color: #f0ebdb; z-index: 9999;
  }
  .chatbot { position: fixed; right: 24px; bottom: 92px; width: 360px; max-width: calc(100vw - 32px);
    background: #0d1321; color: #f0ebdb; border-radius: 14px; overflow: hidden;
    box-shadow: 0 16px 40px rgba(0,0,0,.45); transform: translateY(16px); opacity: 0; pointer-events: none; z-index: 9999; }
  .chatbot.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .chatbot-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; background: #1d2d44; }
  .chatbot-title { font-weight: 700; }
  .chatbot-sub { font-size: .85rem; opacity: .8; }
  .chatbot-close { background: transparent; border: none; color: #f0ebdb; font-size: 30px; cursor: pointer; }
  .chatbot-messages { max-height: 320px; overflow: auto; display: flex; flex-direction: column; gap: 8px; padding: 14px; }
  .msg { padding: 10px 12px; border-radius: 12px; max-width: 80%; line-height: 1.35; font-size: .98rem; }
  .msg-bot { background: #1d2d44; align-self: flex-start; }
  .msg-user { background: #3e5c76; align-self: flex-end; }
  .chatbot-form { display: flex; gap: 8px; padding: 10px; background: #0d1321; border-top: 1px solid rgba(255,255,255,.08); }
  .chatbot-form input { flex: 1; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.12); background: #111726; color: #f0ebdb; font-size: 1.1rem; }
  .chatbot-send { padding: 10px 14px; border-radius: 10px; border: none; background: #748cab; color: #0d1321; font-weight: 700; cursor: pointer; }
  @media (max-width: 480px) { .chatbot { right: 12px; left: 12px; width: auto; } }
  


body.light-mode .chatbot {
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,248,248,0.98));
  color: #0d1321;
  border: 1px solid rgba(0,0,0,0.08);
}
body.light-mode .chatbot-header {
  background: rgba(255,255,255,0.9);
  color: #0d1321;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
body.light-mode .chatbot-title { color: #0d1321; }
body.light-mode .chatbot-sub   { color: #263041; opacity: .85; }
body.light-mode .chatbot-close { color: #0d1321; }


body.light-mode .msg-bot  { background: #eef2ff; color: #0d1321; }
body.light-mode .msg-user { background: #e0f2fe; color: #0d1321; }


body.light-mode .typing-dots {
  background: rgba(0,0,0,0.06);
  color: #0d1321;
}


body.light-mode .chatbot-messages { background: transparent; }


body.light-mode .chatbot-form { background: transparent; border-top: 1px solid rgba(0,0,0,0.08); }
body.light-mode .chatbot-form input {
  background: #ffffff;
  color: #0d1321;
  border: 1px solid rgba(0,0,0,0.12);
}
body.light-mode .chatbot-form input::placeholder { color: #4b5563; }
body.light-mode .chatbot-send {
  background: #0d1321;
  color: #f0ebdb;
}
body.light-mode .chatbot-send:hover {
  filter: brightness(1.05);
}


body.light-mode .chatbot-messages::-webkit-scrollbar { width: 10px; }
body.light-mode .chatbot-messages::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 8px; }
body.light-mode .chatbot-messages::-webkit-scrollbar-track { background: rgba(0,0,0,0.05); }


@media (max-width: 480px){
  body.light-mode .chatbot { background: #ffffff; }
  body.light-mode .chatbot-header { background: #ffffff; }
}

    
    .chatbot-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.35);
      backdrop-filter: blur(4px);
      opacity: 0;
      pointer-events: none;
      transition: opacity 300ms ease;
      z-index: 9998;
    }
    .chatbot-backdrop.open { opacity: 1; pointer-events: auto; }

    
    .chatbot {
      width: min(92vw, 400px);
      max-height: 70vh;
      border-radius: 28px; 
      box-shadow: 0 10px 40px rgba(0,0,0,0.45);
      border: 1px solid rgba(255,255,255,0.08);
      background: linear-gradient(180deg, rgba(20,20,20,0.92), rgba(12,12,12,0.92));
      transform: translateY(24px) scale(0.98);
      opacity: 0;
      transition: transform 520ms cubic-bezier(.2,.8,.2,1), opacity 320ms ease;
      z-index: 9999;
    }
    body.light-mode .chatbot {
      background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(245,245,245,0.92));
      border-color: rgba(0,0,0,0.08);
    }
    .chatbot.open { transform: translateY(0) scale(1); opacity: 1; }

    
    .chatbot-header {
      position: sticky; top: 0; backdrop-filter: blur(6px);
      border-bottom: 1px solid rgba(255,255,255,0.08);
    }
    body.light-mode .chatbot-header { border-bottom-color: rgba(0,0,0,0.08); }

    
    .chatbot-fab { transition: transform 180ms ease; }
    .chatbot-fab:hover { transform: translateY(-2px) scale(1.04); }
    .chatbot-fab:active { transform: translateY(0) scale(0.98); }

    
    @keyframes msg-pop {
      0% { transform: translateY(6px) scale(0.98); opacity: 0; }
      100% { transform: translateY(0) scale(1); opacity: 1; }
    }
    .msg { animation: msg-pop 260ms cubic-bezier(.2,.8,.2,1); }

    
    .msg.typing { display: inline-flex; align-items: center; gap: 6px; }
    .typing-dots { display: inline-flex; gap: 4px; padding: 6px 10px; border-radius: 12px; background: rgba(255,255,255,0.08); }
    body.light-mode .typing-dots { background: rgba(0,0,0,0.06); }
    .typing-dots span { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .6; animation: blink 1s infinite; }
    .typing-dots span:nth-child(2) { animation-delay: .15s; }
    .typing-dots span:nth-child(3) { animation-delay: .3s; }
    @keyframes blink { 0%, 80%, 100% { opacity: .2 } 40% { opacity: 1 } }

    
    .chatbot-form { border-top: 1px solid rgba(255,255,255,0.08); }
    body.light-mode .chatbot-form { border-top-color: rgba(0,0,0,0.08); }






  
  @media (max-width: 770px) {
    
    .hero-btn-static,
    #chatbot-toggle.fab-pos {
      transition: none !important;
    }

    
    .hero-btn-static:hover,
    .hero-btn-static:active,
    #chatbot-toggle.fab-pos:hover,
    #chatbot-toggle.fab-pos:active,
    .hero-btn-static.hovered,
    #chatbot-toggle.fab-pos.hovered {
      transform: none !important;
      height: auto !important;
      background: inherit !important;
      color: inherit !important;
      border: inherit !important;
      box-shadow: none !important;
      filter: none !important;
    }
  }

  
  @media (hover: none) {
    .hero-btn-static,
    #chatbot-toggle.fab-pos { transition: none !important; }
    .hero-btn-static:hover,
    .hero-btn-static:active,
    .hero-btn-static.hovered,
    #chatbot-toggle.fab-pos:hover,
    #chatbot-toggle.fab-pos:active,
    #chatbot-toggle.fab-pos.hovered {
      transform: none !important;
      height: auto !important;
      background: inherit !important;
      color: inherit !important;
      border: inherit !important;
      box-shadow: none !important;
      filter: none !important;
    }
  }



  
  @media (max-width: 480px){
    
    #chatbot.chatbot { display: flex !important; }
    #chatbot.chatbot.open,
    #chatbot.chatbot[aria-hidden="false"] { display: flex !important; }

    
    .chatbot {
      position: fixed !important;
      inset: 0 !important;              
      width: 100vw !important;
      height: 100vh !important;
      max-width: none !important;
      max-height: none !important;
      border-radius: 0 !important;
      transform: none !important;
      opacity: 0;                        
      pointer-events: none;
      display: flex;
      flex-direction: column;
      z-index: 9999;
      
      padding-bottom: var(--kb-safe, env(safe-area-inset-bottom, 0px));
      transition: padding-bottom 160ms ease;
      overscroll-behavior: contain; 
    }

    .chatbot.open {
      opacity: 1 !important;
      pointer-events: auto !important;
      transform: none !important;
    }

    .chatbot-header {
      position: sticky; top: 0; left: 0; right: 0;
      z-index: 1;
    }

    .chatbot-messages {
      flex: 1 1 auto;
      max-height: none !important;
      overflow: auto;
      padding: 12px;
    }

    .chatbot-form {
      position: sticky; bottom: 0; left: 0; right: 0;
      background: inherit;
      z-index: 1;
      padding: 10px; gap: 10px;
    }
    .chatbot-form { margin-bottom: calc(var(--kb-safe, 0px)); }

    .chatbot-backdrop { z-index: 9998; }
  }



@media (max-width:480px){
  .chatbot{
    position: fixed;
    inset:0;
    display:flex;
    flex-direction:column;
    
    padding-bottom: max(var(--kb-safe,0px), env(safe-area-inset-bottom,0px));
    background: inherit;
  }
  .chatbot::after{
    content:"";
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    height: env(safe-area-inset-bottom,0px);
    background: inherit;
    pointer-events:none;
  }
  .chatbot-messages{
    flex:1 1 auto;
    overflow:auto;

    padding-bottom: 112px;
  }
  .chatbot-form{
    position: sticky;
    bottom:0;
    background: inherit;
    padding-bottom: max(var(--kb-safe,0px), env(safe-area-inset-bottom,0px));
    
    transform: translateY(-100px);
    transition: transform 160ms ease-out;
  }

  .chatbot-form::before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:100%;
    height:100px;
    background:#000; 
    pointer-events:none;
    z-index:-1;
  }
}









@media (max-width: 900px) {
  .hero-btn-static:hover,
  #chatbot-toggle.fab-pos:hover {
    border: 2px solid #748cab !important;
    color: inherit !important;
    background: none !important;
    transform: none !important;
  }
}






  
.kuka-mina-osio {
  position: relative;
  min-height: 86vh;                 
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: clamp(8svh, 12vh, 14svh) 10vw;
  color: #f0ebdb;
  pointer-events: none;
  z-index: 3;
  isolation: isolate;               
}


.kuka-otsikko::after {
  content: "";
  display: block;
  width: min(120px, 22vw);
  height: 3px;
  margin: .35rem 0 0 0;
  background: none;
  opacity: .55;
}

.kuka-mina-sisalto { max-width: clamp(560px, 48vw, 920px); }


.kuka-alaotsikko {
  padding: 0;
  margin: .15rem 0 .9rem;
  font-size: clamp(1.2rem, 2.6vw, 2rem);
  font-weight: 600;
  color: #748cab;
  opacity: 1;
}

.kuka-teksti {
  font-size: clamp(1.05rem, 2.2vw, 1.55rem);
  line-height: 1.35;
  margin: 0;
}


.row-wrap { display: block; height: 1.35em; overflow: hidden; }


.row {
  display: block;
  transform: translateY(1.35em);
  transition: transform .42s ease-out;
}
.kuka-teksti.visible .row { transform: translateY(0); }


.slide-left,
.slide-right {
  display: inline-block;
  
  transform: translateX(-40%);
  transition: transform .36s ease-out, color .36s ease;
  color: transparent;
  background: linear-gradient(90deg, #f0ebdb 0%, #f0ebdb var(--paint, 0%), #748cab var(--paint, 0%));
  -webkit-background-clip: text;
  background-clip: text;
}
.slide-right { transform: translateX(40%); }


.slide-left  { margin-right: .12rem; }
.slide-right { margin-left:  .12rem; }


@media (max-width: 900px) {
  .kuka-mina-osio {
    min-height: auto;
    padding: 9svh 6vw 7svh;
    justify-content: center;
    align-items: center;
  }
  .kuka-mina-sisalto { max-width: 92vw; }

  .kuka-otsikko {
    font-size: clamp(2.8rem, 10.5vw, 4.8rem);
    text-align: center;
    margin-bottom: .5rem;
  }
  .kuka-alaotsikko { text-align: center; }

  .kuka-teksti {
    font-size: clamp(1rem, 4.3vw, 1.25rem);
    line-height: 1.4;
    text-align: center;
  }
  .kuka-teksti .row-wrap { height: 1.4em; }
  .kuka-teksti .row      { transform: translateY(1.4em); }

  
  .slide-left  { transform: translateX(-45%); }
  .slide-right { transform: translateX(45%); }
}


@media (max-width: 480px) {
  .kuka-mina-osio { padding: 8svh 5vw 6svh; }
  .kuka-otsikko   { font-size: clamp(2.6rem, 12vw, 4rem); }
}




.scroll-intro-mobile {
  display: none;
}

@media (max-width: 900px) {
  .scroll-intro-mobile {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 6vw;
    margin: 0svh 0 10svh;
    text-align: center;
    color: #f0ebdb;
  }

  .scroll-intro-mobile .scroll-intro-title {
    font-size: clamp(3rem, 9.5vw, 4rem);
    font-weight: 800;
    letter-spacing: 0.01em;
    line-height: 1.08;
    color: inherit;
    text-shadow: none;
    margin: 0;
    padding: 0;
  }

  .scroll-intro-mobile .slide-left,
  .scroll-intro-mobile .slide-right {
    will-change: transform;
    backface-visibility: hidden;
    transform: translate3d(0,0,0);
    transition: none !important;
  }
}



@media (max-width: 900px){
  .sticky-line .dot{
    transition: background-color 1.2s ease, opacity 1.2s ease, transform 1.2s ease;
    will-change: background-color, opacity, transform;
  }
  .sticky-line .dot.active{
    transition-duration: 1.8s; 
  }
}


.esittely-osio {
  position: relative;
  min-height: 70vh;
  color: #f0ebdb;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: clamp(8svh, 12svh, 14svh) 10vw;
  pointer-events: none;
  z-index: 3;
  background-color: none !important;
}

.esittely-tekstit { width: 52%; display: flex; flex-direction: column; gap: .4rem; }

.esittely-otsikko {
  font-size: clamp(3rem, 6.6vw, 6rem);
  font-weight: 800;
  margin: 0 0 .25rem 0;
  color: #f0ebdb;
  letter-spacing: .01em;
  line-height: .9;
}

.esittely-left,
.esittely-right{
  color: transparent;
  background: linear-gradient(90deg, #f0ebdb 0%, #f0ebdb var(--paint, 0%), #748cab var(--paint, 0%));
  -webkit-background-clip: text; background-clip: text;
  transition: transform .36s ease-out;
}

.esittely-otsikko::after{
  content:""; display:block; width:min(120px, 22vw); height:3px; margin:.35rem 0 0;
  background:none;
  opacity:.55;
}

.esittely-kuvaus{
  font-size: clamp(1.05rem, 2.2vw, 1.55rem);
  color:#748cab;
  line-height:1.35;
  max-width: 60ch;
  margin: .2rem 0 0 0;
}
.esittely-kuvaus .row-wrap{ display:block; height:1.35em; overflow:hidden; }
.esittely-kuvaus .row{ display:block; transform:translateY(1.35em); transition:transform .42s ease-out; }
.esittely-kuvaus.visible .row{ transform:translateY(0); }


@media (max-width: 900px){
  .esittely-osio{
    min-height:auto; padding: 9svh 6vw 7svh;
    flex-direction:column; justify-content:center; align-items:center; text-align:center; gap:.8rem;
  }
  .esittely-tekstit{ width: 100%; align-items:center; }

  #projekteja .esittely-otsikko{ margin-left:0 !important; margin-top:0 !important; }

  .esittely-otsikko{ font-size: clamp(2.4rem, 10.2vw, 3.6rem); margin:0 0 .4rem 0; }
  .esittely-kuvaus{ font-size: clamp(1rem, 4.3vw, 1.25rem); line-height:1.4; max-width:92vw; margin:0 auto; }
  .esittely-kuvaus .row-wrap{ height:1.4em; }
  .esittely-kuvaus .row{ transform:translateY(1.4em); }

  .esittely-left{ transform: translateX(-45%); }
  .esittely-right{ transform: translateX(45%); }

  #projekteja .esittely-left,
  #projekteja .esittely-right{
    background: none !important; -webkit-background-clip: initial !important; background-clip: initial !important; color: #f0ebdb !important;
  }
  body.light-mode #projekteja .esittely-left,
  body.light-mode #projekteja .esittely-right{ color:#0d1321 !important; }
}


@media (max-width: 480px){
  .esittely-osio{ padding: 8svh 5vw 6svh; }
  .esittely-otsikko{ font-size: clamp(2.2rem, 11vw, 3rem); }
  .esittely-kuvaus{ font-size: clamp(.98rem, 4.4vw, 1.15rem); }
}


@media (prefers-reduced-motion: reduce){
  .esittely-left, .esittely-right{ transform:none !important; }
  .esittely-kuvaus .row{ transform:none !important; }
}






#projekteja .esittely-kuvaus{ margin-top:.2rem; }
#projekteja .esittely-kuvaus .row-wrap{ display:block; height:1.35em; overflow:hidden; }
#projekteja .esittely-kuvaus .row{ display:block; }

@media (max-width:900px){
  #projekteja .esittely-kuvaus .row-wrap{ height:1.4em; }
}

@media (prefers-reduced-motion: reduce){
  #projekteja .esittely-kuvaus .row{ transform:none !important; }
}


.kuka-otsikko::after{ background: linear-gradient(90deg, #748cab 0%, transparent 100%); }



body.light-mode .kuka-mina-osio,
body.light-mode .info-osio,
body.light-mode .esittely-osio,
body.light-mode .jattiosio {
  color: #0d1321; 
  pointer-events: none;
  background: #ffffff00; 
}

body.light-mode .kuka-otsikko,
body.light-mode .kuka-alaotsikko,
body.light-mode .kuka-teksti,
body.light-mode .info-teksti,
body.light-mode .esittely-otsikko,
body.light-mode .esittely-kuvaus,
body.light-mode .jatti-teksti {
  color: #0d1321;
}

body.light-mode .kuka-alaotsikko { color: #3e5c76; }

body.light-mode .slide-left,
body.light-mode .slide-right,
body.light-mode .esittely-left,
body.light-mode .esittely-right {
  
  color: transparent;
  background: linear-gradient(
      90deg,
      #0d1321 0%,
      #0d1321 var(--paint, 0%),
      #748cab var(--paint, 0%)
  );
  -webkit-background-clip: text;
  background-clip: text;
}

body.light-mode .row-wrap {
  height: 1.6em;
  overflow: hidden;
}

body.light-mode .row {
  transform: translateY(1.6em);
  transition: transform 0.6s ease-out;
}

body.light-mode .info-teksti p {
  transform: translateY(50%);
  opacity: 0;
  transition: transform 0.6s ease, opacity 0.6s ease;
}

body.light-mode .info-teksti.visible p {
  transform: translateY(0);
  opacity: 1;
}


body.light-mode .jatti-rivi,
body.light-mode .jatti-rivi.peilattu {
  color: #0d1321;
}

body.light-mode .jatti-rivi .jatti-laatikko,
body.light-mode .jatti-rivi.peilattu .jatti-laatikko {
  background-color: #ffffff; 
  border: 1px solid #748cab;
}

body.light-mode .jatti-rivi .jatti-teksti,
body.light-mode .jatti-rivi.peilattu .jatti-teksti {
  color: #0d1321;
}



.jattiosio {
  position: relative;
  pointer-events: none;
  padding: 8vh 6vw;            
  color: #f0ebdb;
  display: flex;
  flex-direction: column;
  gap: 10vh;                   
  min-height: auto;            
  overflow-x: hidden;
  z-index: 3;
}

.jatti-rivi {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 5vw;
}

.jatti-rivi.peilattu {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 5vw;
}


.jatti-rivi.peilattu .jatti-teksti {
  order: 2;
  width: 44%;                  
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}


.jatti-rivi.peilattu .tekstit-ja-nappi {
  align-items: flex-start;       
  text-align: left;           
}


.jatti-rivi.peilattu .jatti-teksti h2 {
  margin-left: 0;
}


.jatti-rivi.peilattu .jatti-teksti p {
  text-align: left;
}


.jatti-rivi.peilattu .jatti-laatikko {
  order: 1;
  width: 50%;
}


.jatti-teksti {
  width: 44%;                  
  font-size: 1.25rem;
  line-height: 1.65;
  color: #d9e2f1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transform: none;             
}


.jatti-teksti.visible { transform: none; }


.jatti-teksti h2 {
  font-size: clamp(3.5rem, 3.6vw, 5rem);
  margin: -2rem 0 -2rem 0;        
  color: #f0ebdb;
  text-align: left;
}


.jatti-laatikko {
  width: 50%;
  height: clamp(320px, 52vh, 620px);
  background-color: #1d2d44;
  border-radius: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5rem;
  font-weight: bold;
  color: #f0ebdb;
  
  pointer-events: none;
  will-change: transform;
  contain: paint;
  backface-visibility: hidden;
}


.jatti-laatikko.clickable { pointer-events: auto; }


.jatti-laatikko.vasen { transform: translateX(-25vw) rotate(-8deg); }
.jatti-laatikko.oikea { transform: translateX( 25vw) rotate( 8deg); }


.jatti-laatikko.visible {
  transform: translateX(0) rotate(0deg);
  opacity: 1;
}

.jatti-teksti button {
  margin-top: 2rem;
  padding: 16px 28px;
  border: 2px solid #748cab;
  background: transparent;
  border-radius: 999px;
  color: #f0ebdb;
  font-weight: 700;
  font-size: 1.2rem;
  cursor: pointer;
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  overflow: hidden;
  position: relative;
  z-index: 109;
  height: auto;
  line-height: 1.4;
}

.jatti-teksti button:hover {
  border: none;
  background-color: transparent;
  color: #000;                  
}


.tekstit-ja-nappi {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transition: transform 0s ease;
}


.tekstit-ja-nappi button {
  margin-top: 2rem;
  padding: 16px 28px;
  border: 2px solid #748cab;
  background: transparent;
  border-radius: 999px;
  color: #f0ebdb;
  font-weight: 700;
  font-size: 1.2rem;
  cursor: pointer;
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  overflow: hidden;
  position: relative;
  z-index: 109;
  height: auto;
  line-height: 1.4;
}

.tekstit-ja-nappi button:hover {
  border: none;
  background-color: transparent;
  color: #000;
}

.katsoProjektiBtn { position: relative; overflow: hidden; }




.jatti-laatikko.oikea{ position: relative; overflow: hidden; }
.jatti-laatikko.oikea img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;  
  object-position: center; 
  border-radius: inherit;  
}


@media (max-width: 1200px) {
  .jatti-teksti { width: 48%; }
  .jatti-rivi.peilattu .jatti-teksti { width: 48%; }
  .jatti-laatikko { width: 48%; height: clamp(280px, 48vh, 560px); }
}


@media (max-width: 900px) {
  .jattiosio {
    min-height: auto;
    padding: 6vh 6vw;          
    gap: 6vh;                  
  }

  .jatti-rivi,
  .jatti-rivi.peilattu {
    flex-direction: column;    
    align-items: stretch;
    gap: 0.6rem;
  }

  .jatti-teksti {
    width: 100%;
    align-items: flex-start;
    text-align: left;
    transform: none;           
    font-size: 1.1rem;
    line-height: 1.55;
  }
  .jatti-teksti.visible { transform: none; }
  .jatti-rivi.peilattu .jatti-teksti {
    order: 1;
    align-items: flex-start;
    text-align: left;
    justify-content: flex-start;
    width: 100%;
  }
  .jatti-rivi.peilattu .tekstit-ja-nappi {
    align-items: flex-start;
    text-align: left;
    justify-content: flex-start;
  }

  .jatti-teksti h2 {
    font-size: clamp(1.6rem, 6.2vw, 2.2rem);
    margin: 0 0 0.1rem 0;
    text-align: left;
  }

  .jatti-laatikko {
    width: 100%;
    height: clamp(220px, 36vh, 440px);
    transform: none;
    background: transparent !important;
    border: none !important;
  }
  .jatti-laatikko.vasen,
  .jatti-laatikko.oikea { transform: none; }

  .jatti-laatikko img {
    max-height: 320px;
    object-fit: cover;
  }

  .jatti-rivi.peilattu .jatti-laatikko { order: 2; width: 100%; }
}

@media (max-width: 480px) {
  .jatti-rivi.peilattu .jatti-teksti {
    order: 1;
    align-items: flex-start;
    text-align: left;
    justify-content: flex-start;
    width: 100%;
  }
  .jatti-rivi.peilattu .tekstit-ja-nappi {
    align-items: flex-start;
    text-align: left;
    justify-content: flex-start;
  }

  .hero-btn-static,
  #chatbot-toggle.fab-pos {
    font-size: 1.2rem !important;
    padding: 13px 20px !important;
    width: 160px !important;
  }
}




body.light-mode .jatti-teksti {
  color: #0d1321; 
}

body.light-mode .jatti-teksti h2 {
  color: #0d1321;
}

body.light-mode .jatti-laatikko {
  background-color: #f0ebdb; 
  border: 2px solid #748cab; 
  color: #0d1321;            
}

body.light-mode .jatti-laatikko.vasen { 
  transform: translateX(-25vw) rotate(-8deg); 
}
body.light-mode .jatti-laatikko.oikea { 
  transform: translateX( 25vw) rotate( 8deg); 
}

body.light-mode .jatti-laatikko.visible {
  transform: translateX(0) rotate(0deg);
  opacity: 1;
}

body.light-mode .jatti-teksti button,
body.light-mode .tekstit-ja-nappi button {
  color: #0d1321;
  border: 2px solid #748cab;
  background: transparent;
}

body.light-mode .jatti-teksti button:hover,
body.light-mode .tekstit-ja-nappi button:hover {
  color: #f0ebdb;           
  background-color: #0d132100; 
  border: none;
}


.kaksoisboksit-osio {
  height: 100vh;
  position: relative;

  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10vw;
  pointer-events: none;
}

.kaksoisboksi {
  width: 35vw;
  height: 60vh;
  background-color: #3b82f6;
  border-radius: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5rem;
  font-weight: bold;
  color: white;
}

.kaksoisboksi.vasen {
  background-color: #6366f1;
  padding: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kommentti {
  background-color: #4f46e5; 
  padding: 1.5rem 2rem;
  border-radius: 12px;
  color: white;
  max-width: 100%;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);

}

.kommentti-teksti {
  font-size: 1.2rem;
  margin-bottom: 1rem;
  line-height: 1.4;
}

.kommentti-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  opacity: 0.8;
}

.kommentti-nimi {
  font-weight: 600;
}

.kommentti-aika {
  font-style: italic;
}

.kaksoisboksi.oikea {
  background-color: #0ea5e9;
}

.tuplaboksit-osio {
  height: 100vh;
  position: relative;

  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10vw;
  pointer-events: none;
}

.tuplaboksi {
  width: 35vw;
  height: 60vh;
  background-color: #3b82f6;
  border-radius: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5rem;
  font-weight: bold;
  color: white;
}

.tuplaboksi.vasen {
  background-color: #6366f1;
}

.tuplaboksi.oikea {
  background-color: #0ea5e9;
}



.color-palette-osio {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 2rem 5vw;
  background-color: #000;
}

.color-box {
  width: 18%;
  height: 600px;
  border-radius: 8px;
  color: white;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;

  font-size: 1.1rem;
  text-align: center;
  box-shadow: 0 0 10px rgba(0,0,0,0.7);
}
.color-box:nth-child(4) {
  color: black; 
}

































body.light-mode .kaksoisboksit-osio,
body.light-mode .tuplaboksit-osio {
  pointer-events: auto;
  background-color: #f0ebdb; 
}

body.light-mode .kaksoisboksi,
body.light-mode .tuplaboksi {
  color: #0d1321; 
  font-weight: bold;
}


body.light-mode .kaksoisboksi.vasen,
body.light-mode .tuplaboksi.vasen {
  background-color: #dbeafe; 
}


body.light-mode .kaksoisboksi.oikea,
body.light-mode .tuplaboksi.oikea {
  background-color: #bfdbfe; 
}


body.light-mode .kommentti {
  background-color: #e0e7ff; 
  color: #0d1321;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}


body.light-mode .color-palette-osio {
  background-color: #f0ebdb; 
}

body.light-mode .color-box {
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
  color: #0d1321; 
}


body.light-mode .color-box:nth-child(4) {
  color: #0d1321; 
}


body.light-mode .hero-btn-static {
  color: #0d1321;
  border: 2px solid #748cab;
}

body.light-mode .hero-btn-static.hovered {
  color: #f0ebdb;
  background-color: #0d132100; 
  border: none;
}








.responsiivisuusSection {
  position: relative;
  height: 22vh;

  display: flex;
  align-items: flex-start;
  justify-content: center;
  pointer-events: none;
}

.responsiivisuusHeader {
  font-size: clamp(24px, 5vw, 48px);
  font-weight: bold;
  color: white;
  padding: 15px 30px;
  border-radius: 8px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
  text-align: center;
  margin-top: 18vh; 
}






































  
  :root{
    --kvBoxW: 44vw;
    --kvBoxH: 64vh;
    --kvGap: 4.5vh;
    --startOffset: -28;     
    --maxTranslate: 92;     
    --speedMultiplier: 1.35; 
  }

  .kvFlexRow{ display:flex; align-items:flex-start; min-height:100vh; pointer-events:none; }

  
  .kvStickyCol{
    width:var(--kvBoxW); margin-left:5vw; display:flex; flex-direction:column; gap:var(--kvGap);
    position:relative; pointer-events:none;
  }

  
  .kvCard{
    position:relative; width:100%; height:var(--kvBoxH); padding:1.25rem; border-radius:16px;
    color:#748cab; font-size:2.1rem; box-sizing:border-box; overflow:hidden;
    transform:translateY(calc(var(--startOffset) * 1vh)); opacity:0; will-change:transform,opacity;
    transition:opacity .12s ease, transform 0s ease; pointer-events:none; z-index:5; background:transparent;
  }
  .kvCard h2{ margin:0 0 1rem 0; font-size:clamp(1.8rem,2.8vw,3rem); }
  .kvCard p { font-size:clamp(1rem,1.6vw,1.35rem); line-height:1.25; margin-bottom:.45rem; }
  .kvCard h2,.kvCard p{
    position:relative; color:#f0ebdb; overflow:hidden;
    background:linear-gradient(to left,#1d2d44 var(--clip,0%), #f0ebdb 0%);
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  }
  .kvCard-img{ width:60%; height:auto; border-radius:12px; margin:.25rem auto .6rem; display:block; object-fit:cover; }
  .kvCard-nimi{ text-align:center; font-weight:500; color:#f0ebdb; margin:.4rem 0 1rem; opacity:.8; }

  
  .customBox{
    position:relative; width:100%; height:var(--kvBoxH); padding:1.25rem; border-radius:16px; color:#f0ebdb;
    font-size:1.8rem; box-sizing:border-box; overflow:hidden; transform:translateY(calc(var(--startOffset) * 1vh));
    opacity:0; z-index:5; will-change:transform,opacity; transition:opacity .12s ease, transform 0s ease; pointer-events:none;
  }
  .customBox h2{ margin:0 0 .6rem 0; font-size:2rem; }

  
  .kvSkillsWrapper{ position:relative; pointer-events:none; }
  .kvStickyTitle{ position:sticky; top:15vh; width:100%; font-size:3rem; font-weight:600; text-align:center; color:#f0ebdb; z-index:5; padding:1rem 0; }

  .kvSkillsStack{ display:flex; flex-direction:column; width:42vw; margin-left:auto; margin-right:5vw; pointer-events:none; }

  
  .kvSkillCard{
    width:100%; height:50vh; padding:1.4rem 1.4rem 1.1rem; border:2px solid #1d2d44; border-radius:16px; background:#0d1321;
    color:#f0ebdb; font-weight:700; display:flex; flex-direction:column; justify-content:flex-start; position:sticky; overflow:hidden;
    z-index:10; font-size:2rem; pointer-events:none;
  }
  .kvSkillCard h2{ font-size:1.25rem; margin-top: -0.25rem; position:relative; padding-left:2.2rem; padding-top: 0rem; color:#f0ebdb; line-height:1.25; }
  .kvSkillCard h2::before{ content:attr(data-num); position:absolute; top:-.35rem; left:-1rem; font-size:.86rem; color:#3e5c76; opacity:.55; }
  .kvSkillCard p{ margin-top:-2.2rem; padding-right:.6rem; line-height:1.5; font-size:1.12rem; color:#d0d0d0; transform:translateY(-.2rem); }

  
  .kvSkillCard:nth-child(1){ top:26vh; }
  .kvSkillCard:nth-child(2){ top:34vh; }
  .kvSkillCard:nth-child(3){ top:42vh; }
  .kvSkillCard:nth-child(4){ top:50vh; }
  .kvSkillCard:nth-child(5){ top:58vh; }
  .kvSkillCard:not(:first-child){ margin-top:-38px; }

  
  .kvSkillCard h2,.kvSkillCard p{ transform:translateY(40%); opacity:0; transition:transform .5s ease, opacity .5s ease; }
  .kvSkillCard.visible h2,.kvSkillCard.visible p{ transform:translateY(0); opacity:1; }

  
  .kvStickyArea{ position:relative; height:430vh; background:transparent; pointer-events:none; }
  .kvStickyArea::before,.kvStickyArea::after{ content:""; position:absolute; left:0; right:0; height:2px; }
  .kvStickyArea::before{ top:0; } .kvStickyArea::after{ bottom:0; }

  
  .kvStickyArea .kuutiopelle3{ position:absolute; z-index:11 !important; top:342vh; left:2vw; width:100%; height:170vh; transform:none; }
  .kvStickyArea .kuutiopelle3-inner{ position:sticky; top:30vh; width:42vw; height:64vh; will-change:transform; pointer-events:none; }

  
  .kvStickyArea .kvCard{
    position:sticky; top:20vh; margin-left:auto; margin-right:2vw; margin-top:18vh; margin-bottom:10vh; width:400px; height:600px;
    padding:1rem; border-radius:16px; box-sizing:border-box; overflow:hidden; pointer-events:none; z-index:10; background:transparent; opacity:1; transform:none;
  }
  .kvStickyArea .kvCard-img{ width:100%; height:auto; border-radius:12px; display:block; object-fit:cover; margin:0 auto .5rem; }
  .kvStickyArea .kvCard-nimi{ text-align:center; font-weight:500; color:#f0ebdb; margin-bottom:1rem; opacity:.8; font-size:1.8rem; margin-top:1rem; }

  
  .kvStickyArea .kvSkillsStack{ display:flex; flex-direction:column; width:42vw; margin-right:auto; margin-left:7vw; pointer-events:none; }
  .kvStickyArea .kvSkillCard{ width:100%; height:50vh; padding:1.5rem 1.5rem 1.2rem; border:2px solid #1d2d44; border-radius:16px; background:#0d1321; color:#f0ebdb; font-weight:700; display:flex; flex-direction:column; justify-content:flex-start; position:sticky; overflow:hidden; z-index:10; font-size:2rem; will-change:transform; }
  .kvStickyArea .kvSkillCard:nth-child(1){ top:24vh; }
  .kvStickyArea .kvSkillCard:nth-child(2){ top:32vh; }
  .kvStickyArea .kvSkillCard:nth-child(3){ top:40vh; }
  .kvStickyArea .kvSkillCard:nth-child(4){ top:48vh; }
  .kvStickyArea .kvSkillCard:nth-child(5){ top:56vh; }
  .kvStickyArea .kvSkillCard:not(:first-child){ margin-top:-36px; }

  
  .kvStickyArea .kvAtKuutiopelle2{ position:absolute; top:100vh; left:0; z-index:100 !important; }

  
  .kvStickyArea .kuutiopelle{
    position:absolute; top:32vh; transform:translateY(-50%); margin:0 50px 0 7vw; z-index:11 !important;
    width:800px; height:600px; border-radius:8px; box-shadow:0 4px 12px rgba(0,0,0,.2); display:flex; align-items:center; justify-content:center;
  }
    .kvStickyArea .kuutiopelle{
      box-shadow: none !important;
    }

  @media (max-width: 1366px) {
    .kvStickyArea .kuutiopelle p{
      font-size: 1.7rem !important;
      line-height: 1.4 !important;
    }
  }

  @media (max-width: 1366px){
    .kvStickyArea .kuutiopelle{
      margin-left: 2vw !important; 
    }
  }

  @media (max-width: 1280px){
    .kvStickyArea .kuutiopelle p{
      font-size: 1.55rem !important;
      line-height: 1.4 !important;
    }
    .kvStickyArea .kuutiopelle{
      margin-left: -2vw !important;
    }
  }

  @media (max-width: 1170px){
    .kvStickyArea .kuutiopelle p{
      font-size: 1.45rem !important;
      line-height: 1.4 !important;
    }
    .kvStickyArea .kuutiopelle{
      margin-left: -6vw !important;
    }
  }

  @media (max-width: 1100px){
    .kvStickyArea .kuutiopelle{
      width: 520px !important;   
      height: 720px !important;  
      margin-left: 5vw !important;
    }
    .kvStickyArea .kuutiopelle p{
      font-size: 1.25rem !important;
      line-height: 1.3 !important;
    }
  }


  @media (max-width: 1000px){
    .kvStickyArea .kuutiopelle{
      width: 520px !important;   
      height: 720px !important;  
      margin-left: 0vw !important;
    }
    .kvStickyArea .kuutiopelle p{
      font-size: 1.25rem !important;
      line-height: 1.3 !important;
    }
  }


  @media (max-width: 930px){
    .kvStickyArea .kuutiopelle{
      width: 420px !important;   
      height: 720px !important;  
      margin-left: 0vw !important;
    }
    .kvStickyArea .kuutiopelle p{
      font-size: 1.15rem !important;
      line-height: 1.3 !important;
    }
  }



  
  .kvStickyArea .kuutiopelle p:not(.ltr-sweep){
    background:none !important; -webkit-background-clip:initial !important; background-clip:initial !important;
    -webkit-text-fill-color:initial !important; color:#3e5c76 !important;
  }

  
  #kvStickyDemo .kuutiopelle p.ltr-sweep{
    color:transparent !important;
    background:linear-gradient(90deg,#3e5c76 0%,#3e5c76 var(--cut,0%),#f0ebdb var(--cut,0%),#f0ebdb 100%) !important;
    -webkit-background-clip:text !important; background-clip:text !important; -webkit-text-fill-color:transparent !important;
  }
  
  #kvStickyDemo .kuutiopelle .ltr-sweep{
    color:transparent !important; -webkit-text-fill-color:transparent !important;
    -webkit-background-clip:text !important; background-clip:text !important; background-repeat:no-repeat !important;
  }



  
  @media (min-width:901px){
    .kvStickyArea{ position:relative; overflow:visible !important; }
    .kvSkillsStack{ position:relative; z-index:1; overflow:visible !important; }
    .kvStackLabel{
      position:-webkit-sticky !important; position:sticky !important;
      top:clamp(12svh,19vh,22svh) !important; z-index:1000 !important;
      opacity:1 !important; transform:none !important; filter:none !important; will-change:top;
    }
  }



  @media (max-width:900px){
    :root{ --mStickTop: 18svh; --mStep: 8svh; }

    
    .kvStickyArea, .kvStickyArea .kvSkillsStack{
      overflow: visible !important;
      transform: none !important;
      contain: none !important; 
    }

    .kvStickyArea{ position:relative; height:auto; padding:6svh 0 2svh; padding-top:520px !important; pointer-events:auto; }
    .kvFlexRow{ display:block; min-height:unset; pointer-events:auto; }
    .kvStickyCol{ width:100%; margin-left:0; gap:1.1rem; pointer-events:auto; }

    .kvStickyArea .kuutiopelle3,
    .kvStickyArea .kuutiopelle3-inner,
    .kvStickyArea .kvTopBlack,
    .kvStickyArea .kvBottomRounded,
    .kvStickyArea .kvStickyTitle,
    .kvStickyArea .kvAtKuutiopelle2{
      position: static !important;
      width: 92vw !important;
      height: auto !important;
      margin: 0 auto 1.25rem !important;
      transform: none !important;
      opacity: 1 !important;
    }
    .kvStickyArea .kuutiopelle{
      position: static !important;
      width: 92vw !important;
      height: auto !important;
      margin: 0 auto 1.25rem !important;
      transform: none !important;
      z-index: 100 !important;
    }
    .kvStickyArea .kuutiopelle p{ font-size:1.08rem !important; line-height:1.46 !important; padding:1rem !important; }

    .kvStickyArea .kvCard{
      position:absolute !important; top:6svh !important; left:50% !important; transform:translateX(-50%) !important;
      width:min(92vw,320px) !important; height:auto !important; margin:0 !important; z-index:100 !important; pointer-events:none;
    }
    .kvStickyArea .kvCard-img{ width:100% !important; height:auto !important; border-radius:10px; }
    .kvStickyArea .kvCard-nimi{ font-size:1.18rem; margin-top:.5rem; }

    .kvStickyArea .kvSkillsStack{
      width:92vw;
      margin:6svh auto 0 auto; 
      pointer-events:auto;
    }
  @media (max-width:770px){
    .kvStickyArea .kvSkillsStack{
      margin-top:8svh !important; 
    }
  }

    
    .kvStickyArea .kvSkillCard{
      position: sticky !important;
      top: var(--mStickTop) !important;
      min-height: 46svh !important;
      height: auto !important;
      margin-top: 9svh !important;
      padding: 1.15rem 1.1rem 1.15rem !important;
      z-index: 10;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      transform: translateZ(0);
      will-change: top;
    }

    
    .kvStickyArea .kvSkillCard:nth-child(1){ top: calc(var(--mStickTop) + 0 * var(--mStep)) !important; }
    .kvStickyArea .kvSkillCard:nth-child(2){ top: calc(var(--mStickTop) + 1 * var(--mStep)) !important; }
    .kvStickyArea .kvSkillCard:nth-child(3){ top: calc(var(--mStickTop) + 2 * var(--mStep)) !important; }
    .kvStickyArea .kvSkillCard:nth-child(4){ top: calc(var(--mStickTop) + 3 * var(--mStep)) !important; }
    .kvStickyArea .kvSkillCard:nth-child(5){ top: calc(var(--mStickTop) + 4 * var(--mStep)) !important; }
  }
  @media (max-width:900px){ .kvStickyArea .kuutiopelle3{ display:none !important; } }

  @media (max-width:770px){
    .kvStickyArea{ padding-top:460px !important; padding-bottom:2svh; height:auto; }
    .kvStickyArea .kvCard{ width:min(94vw,300px) !important; top:3svh !important; }

    .kvStickyArea .kvSkillCard{ min-height:44svh !important; }
    .kvStickyArea .kvSkillCard:not(:first-child){ margin-top:10svh !important; }
    .kvStickyArea .kvSkillCard:nth-child(1){ top:23svh; }
    .kvStickyArea .kvSkillCard:nth-child(2){ top:31svh; }
    .kvStickyArea .kvSkillCard:nth-child(3){ top:39svh; }
    .kvStickyArea .kvSkillCard:nth-child(4){ top:47svh; }
    .kvStickyArea .kvSkillCard:nth-child(5){ top:55svh; }

    .kvStickyArea .kuutiopelle p{ font-size:1rem !important; line-height:1.46 !important; }
    .kvSkillCard h2{ font-size:1.1rem; padding-left:2rem; }
    .kvSkillCard h2::before{ left:-1.2rem; font-size:.84rem; }
    .kvSkillCard p{ font-size:.94rem; margin-top:-1.2rem; line-height:1.46; }
  }

  @media (max-width:480px){
    .kvStickyArea{ padding-top:400px !important; padding-bottom:2svh; }
    .kvStickyArea .kvCard{ width:min(94vw,260px) !important; top:3svh !important; }

    .kvStickyArea .kvSkillsStack{ width:94vw; }
    .kvStickyArea .kvSkillCard{ min-height:40svh !important; padding:1rem .9rem 1rem !important; }
    .kvStickyArea .kvSkillCard:not(:first-child){ margin-top:9svh !important; }
    .kvStickyArea .kvSkillCard:nth-child(1){ top:23svh; }
    .kvStickyArea .kvSkillCard:nth-child(2){ top:31svh; }
    .kvStickyArea .kvSkillCard:nth-child(3){ top:39svh; }
    .kvStickyArea .kvSkillCard:nth-child(4){ top:47svh; }
    .kvStickyArea .kvSkillCard:nth-child(5){ top:55svh; }

    .kvStickyArea .kuutiopelle p{ font-size:.96rem !important; line-height:1.48 !important; }
    .kvSkillCard h2{ font-size:1.02rem; padding-left:1.8rem; }
    .kvSkillCard h2::before{ left:-1.1rem; font-size:.82rem; }
    .kvSkillCard p{ font-size:.9rem; margin-top:-1.05rem; line-height:1.48; }
    .kvStickyArea .kvCard-nimi{ font-size:1.08rem; margin-top:.42rem; }
  }
  @media (max-width:900px){
  
  .kvStickyArea .kvSkillCard{ position: sticky !important; top: var(--mStickTop, 23svh) !important; transform: none !important; }
  .kvStickyArea .kvSkillCard:nth-child(1){ top: 23svh !important; }
  .kvStickyArea .kvSkillCard:nth-child(2){ top: 31svh !important; }
  .kvStickyArea .kvSkillCard:nth-child(3){ top: 39svh !important; }
  .kvStickyArea .kvSkillCard:nth-child(4){ top: 47svh !important; }
  .kvStickyArea .kvSkillCard:nth-child(5){ top: 55svh !important; }

  
  .kvStickyArea{ padding-top: 400px !important; }
  .kvStickyArea .kvSkillsStack{ margin-top: 9svh !important; }
  .kvStickyArea .kvStackLabel{ margin-bottom: 1.25rem !important; }
}


@media (max-width:480px){
  
  .kvStickyArea .kvSkillCard{ position: sticky !important; top: var(--mStickTop, 23svh) !important; transform: none !important; }
  .kvStickyArea .kvSkillCard:nth-child(1){ top: 23svh !important; }
  .kvStickyArea .kvSkillCard:nth-child(2){ top: 31svh !important; }
  .kvStickyArea .kvSkillCard:nth-child(3){ top: 39svh !important; }
  .kvStickyArea .kvSkillCard:nth-child(4){ top: 47svh !important; }
  .kvStickyArea .kvSkillCard:nth-child(5){ top: 55svh !important; }

  
  .kvStickyArea{ padding-top: 400px !important; }
  .kvStickyArea .kvSkillsStack{ margin-top: 9svh !important; }
  .kvStickyArea .kvStackLabel{ margin-bottom: 1.25rem !important; }
}

  
  .kvSkillsStack{ position:relative; }
  .kvStackLabel{
    display:block !important; position:sticky !important; top:19vh !important; z-index:10 !important; pointer-events:none !important;
    width:100%; margin:0 0 5rem 0; padding:0; text-align:center; font-weight:900;
    font-size:clamp(3.2rem,3.2vw,4.2rem); letter-spacing:.015em; line-height:1.15; color:currentColor;
    background:transparent !important; border:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
    opacity:1 !important; transform:none !important; filter:none !important;
  }

  
  body.light-mode .kvCard, body.light-mode .customBox{ background:none; color:#1d2d44; border:none; }
  body.light-mode .kvCard h2, body.light-mode .kvCard p,
  body.light-mode .customBox h2, body.light-mode .customBox p{
    background:linear-gradient(to left,#f0ebdb var(--clip,0%), #1d2d44 0%);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  }
  body.light-mode .kvCard-img{ border:none; box-shadow:0 4px 10px rgba(0,0,0,.05); }
  body.light-mode .kvSkillsWrapper, body.light-mode .kvSkillsStack{ background-color:transparent; }
  body.light-mode .kvSkillCard{ background-color:#fff; color:#1d2d44; border:2px solid #748cab; }
  body.light-mode .kvSkillCard h2, body.light-mode .kvSkillCard p{ color:#1d2d44; }
  body.light-mode .kvSkillCard h2::before{ color:#3e5c76; }
  body.light-mode .kvStickyTitle{ color:#1d2d44; }
  body.light-mode .kvCard-nimi {
    color: #1d2d44;       
    opacity: 0.9;
  }

  @media (max-width: 900px){
    .kvSkillCard h2::before{ content:attr(data-num); position:absolute; top:0rem; left: -0.5rem; font-size:.86rem; color:#3e5c76; opacity:.55; }
  }
































  
  .scroll-section { height: 220vh; }
  .content-header { left: 8vw; top: 12vh; font-size: clamp(2rem, 8vw, 3rem); }
  .extra-text-left, .extra-text-right { position: static; width: 92vw; margin: 1rem auto 0; }
  .mini-box, .mini-box-center { display: none; }
  .sticky-line { top: auto; bottom: 4vh; }


    .scroll-section {
      height: 300vh;
      position: relative;
        z-index: 3;
      pointer-events: none;
    }

    .sticky-wrapper {
      position: sticky;
      top: 0;
      height: 100vh;
      overflow: hidden;
    }

    .horizontal-content {
      display: flex;
      height: 100%;
      width: 300vw;
      will-change: transform;
      transition: transform 0.1s ease-out;
    }

    .content-box {
      width: 100vw;
      height: 100%;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 2rem;
      font-weight: bold;
      color: #f0ebdb;
      pointer-events: none;
    }



.sticky-line{
  position:sticky;        
  top: 75vh;            
  left:0;
  width:100%;
  display:flex;
  justify-content:space-between;
  padding:0 1vw;
  pointer-events:none;    
  z-index:10;
}



.dot{
  flex:0 0 .8vw;
  height: 13px;
  width: 13px !important;
  border-radius:50%;
  background:#3e5c76;         
  transition:background .25s;
}


.dot.active{ background:#fff; }




.extra-text-left,
.extra-text-right {
  position: absolute;
  width: 40vw;
  padding: 1rem;
  color: #f0ebdb;
  user-select: none;
  box-sizing: border-box;
  white-space: normal;
  overflow-wrap: break-word;
}

.extra-text-left {
  bottom: 29%;
  left: 5vw;
}

.extra-text-right {
  bottom: 4%;
  right: 4vw;
}

.extra-title {
  font-size: 1.6rem;
  font-weight: bold;
  margin-bottom: 0.4rem;
}

.extra-desc {
  font-size: 1.1rem;
  font-weight: normal;
  line-height: 1.4;
}



.content-header {
  position: absolute;
  top: 15vh;
  left: 60vw;
  transform: translateX(0);
  transition: transform 0.2s linear;
  color: #f0ebdb;
  font-size: 5rem;
  display: flex;
  flex-direction: column;
  gap: 1vh;
  user-select: none;
  z-index: 5;
}

.ylempi-rivi {
  display: flex;
  gap: 0.5rem;
}


.pieni-teksti {
  font-size: 1.2rem;
  font-weight: normal;
  margin-top: 1rem;
  max-width: 400px;
  color: #d9e2f1;
  user-select: text;
}



#scrollArea .content-header{
  gap: 1.22rem;              
  line-height: 1.02;        
}
#scrollArea .content-header .ylempi-rivi,
#scrollArea .content-header .alempi-rivi{
  margin: 0; padding: 0;    
}

#scrollArea .content-header .pieni-teksti{ margin-top: .6rem; }
    .mini-box, .mini-box-center {
  position: absolute;
  width: 2vw;
  height: 4vh;
  background: transparent; 
  border-radius: 4px;
  z-index: 5;
  font-size: 2rem;
  font-weight: bold;
  color: #f0ebdb;
  display: flex;
  justify-content: center;
  align-items: center;
  user-select: none;
  pointer-events: none; 
  line-height: 1.4;
}

.mini-box {
  left: 2vw;
  bottom: 32vh;
}

.mini-box-center {
  left: 53vw;
  bottom: 15vh;
}


@media (max-width: 900px) {
  
  .scroll-section { height: 130svh; padding: 10svh 0 6svh; }
  .sticky-wrapper { position: static; height: auto; overflow: visible; }

  
  .horizontal-content {
    display: block;
    width: 100% !important;
    height: auto;
    transform: none !important;
    transition: none !important;
  } 

  
  .content-box {
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: 1fr 1fr; 
    grid-auto-rows: auto;
    align-items: start;
    gap: 1rem 1rem;
    padding: 2rem 5vw;
    box-sizing: border-box;
  }

  
  .content-header {
    display: none;
  }
  .ylempi-rivi { gap: .35rem; }
  .pieni-teksti { max-width: none; font-size: 1rem; }

  
  .extra-text-left, .extra-text-right {
    position: static !important;
    width: auto !important;
    margin: 0; padding: .25rem 0;
  }
  .extra-text-left  { grid-column: 1; text-align: left; }
  .extra-text-right { grid-column: 2; text-align: right; }

  .extra-title { font-size: 1.15rem; }
  .extra-desc  { font-size: .98rem; line-height: 1.45; }

  
  .mini-box, .mini-box-center { display: none !important; }

  
  .sticky-line {
    position: relative !important;
    top: auto; left: auto;
    width: auto; height: auto;
    margin: 1.5rem auto 2rem;
    display: flex;
    flex-direction: column;        
    align-items: center;
    gap: .6rem;
    padding: 0;
  }
  .dot {
    flex: 0 0 auto;
    width: clamp(8px, 1.8vw, 12px);
    height: clamp(8px, 1.8vw, 12px);
    border-radius: 50%;
  }
}












@media (max-width: 900px) {
  :root{
    --mob-gutter-l: max(5vw, env(safe-area-inset-left), 16px);
    --mob-gutter-r: max(5vw, env(safe-area-inset-right), 16px);
  }
  #scrollArea { position: relative; }
  #scrollArea .sticky-wrapper { position: relative; }

  .horizontal-content{ 
    position: absolute;
    top: 0svh;
  }

  
  #proc-step-1 .extra-text-left,
  #proc-step-1 .extra-text-right,
  #proc-step-2 .extra-text-left,
  #proc-step-2 .extra-text-right,
  #proc-step-3 .extra-text-left,
  #proc-step-3 .extra-text-right {
    position: absolute !important;
    width: 42vw !important;
    max-width: 420px;
    margin: 0 !important;
    padding: 0.25rem 0 !important;
    z-index: 4;
    pointer-events: auto;
    font-size: clamp(0.95rem, 4vw, 1.2rem);
    line-height: 1.4;
    color: #f0ebdb;
    padding-inline: 0.35rem;
    text-wrap: balance;
  }

  
  #proc-step-1 .extra-text-left  { left: var(--mob-gutter-l); top: 0svh;  text-align: left; }
  #proc-step-1 .extra-text-right { right: var(--mob-gutter-r); top: 20svh; text-align: right; }

  
  #proc-step-2 .extra-text-left  { left: var(--mob-gutter-l); top: 25svh; text-align: left; }
  #proc-step-2 .extra-text-right { right: var(--mob-gutter-r); top: 45svh; text-align: right; }

  
  #proc-step-3 .extra-text-left  { left: var(--mob-gutter-l); top: 55svh; text-align: left; }
  #proc-step-3 .extra-text-right { display: none !important; }

  
  #stickyLine { position: relative; z-index: 3; }
}









.extra-desc { display: block; }
.extra-desc-short { display: none; }

@media (max-width: 630px) {
  
  .extra-desc { display: none !important; }
  .extra-desc-short { display: block !important; font-size: 0.8rem; }

}







@media (max-width: 580px) {
  
  #proc-step-1 .extra-text-left  { left: var(--mob-gutter-l);  top: 0svh; text-align: left; }
  #proc-step-1 .extra-text-right { right: var(--mob-gutter-r); top: 20svh;  text-align: right; }

  
  #proc-step-2 .extra-text-left  { left: var(--mob-gutter-l);  top: 20svh;  text-align: left; }
  #proc-step-2 .extra-text-right { right: var(--mob-gutter-r); top: 40svh;  text-align: right; }

  
  #proc-step-3 .extra-text-left  { left: var(--mob-gutter-l);  top: 50svh;  text-align: left; }
}

@media (max-width: 468px) {
  
  #proc-step-1 .extra-text-left  { left: var(--mob-gutter-l);  top: 0svh; text-align: left; }
  #proc-step-1 .extra-text-right { right: var(--mob-gutter-r); top: 16svh;  text-align: right; }

  
  #proc-step-2 .extra-text-left  { left: var(--mob-gutter-l);  top: 18svh;  text-align: left; }
  #proc-step-2 .extra-text-right { right: var(--mob-gutter-r); top: 38svh;  text-align: right; }

  
  #proc-step-3 .extra-text-left  { left: var(--mob-gutter-l);  top: 47svh;  text-align: left; }
}


@media (max-width: 381px) {
  
  #proc-step-1 .extra-text-left  { left: var(--mob-gutter-l);  top: 0svh; text-align: left; }
  #proc-step-1 .extra-text-right { right: var(--mob-gutter-r); top: 14svh;  text-align: right; }

  
  #proc-step-2 .extra-text-left  { left: var(--mob-gutter-l);  top: 16svh;  text-align: left; }
  #proc-step-2 .extra-text-right { right: var(--mob-gutter-r); top: 34svh;  text-align: right; }

  
  #proc-step-3 .extra-text-left  { left: var(--mob-gutter-l);  top: 45svh;  text-align: left; }
}



@media (max-width: 900px){
  
  #stickyLine{ --zig: 60; }

  
  #stickyLine .dot{
    transform: translateX(var(--dot-x, 0px));
    transition: transform .25s ease; 
  }

  
  #scrollArea .extra-text-left,
  #scrollArea .extra-text-right{
    transform: translateX(var(--wavy-x, 0));
    will-change: transform;
    transition: transform .15s linear;
    max-width: 44vw;
  }
}


@media (min-width: 901px){
  #stickyLine .dot{ transform: none !important; }
}




.kolmesatanen2 {
  position: relative;
  height: 230vh;
  padding: 4vh 0;
  z-index: 50 !important;
}


.kolmesatanen2 .boksi {
  position: absolute;
  width: 600px;
  max-width: 92vw;                 
  height: 385px;                   
  aspect-ratio: 600 / 385;         
  background: #1d2d44;
  border: 2px solid #748cab;
  border-radius: 12px;
  color: #f0ebdb;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: clamp(1.05rem, 2.2vw, 1.6rem);
  box-shadow: 0 18px 42px rgba(0,0,0,.35);
  --offsetY: 0vh;       
  --rot0: 50deg;        
  left: 50%;
  transform: translateX(calc(-50% + var(--slideX, 0px))) translateY(var(--slideY, 0px)) rotate(var(--rot, 0deg));
  transform-origin: 50% 60%;
  transition: none; 
  will-change: transform, opacity;
}


.kolmesatanen2 .boksi.from-left  { --dir: -1; --offsetX: 50vw; }
.kolmesatanen2 .boksi.from-right { --dir:  1; --offsetX: 50vw; }


@media (prefers-reduced-motion: reduce){
  .kolmesatanen2 .boksi{
    transition: none !important;
  }
}


.kolmesatanen2 .boksi:nth-child(1) { top: 5vh;   left: 40%; z-index: 7; }
.kolmesatanen2 .boksi:nth-child(2) { top: 55vh;  left: 60%; z-index: 6; }
.kolmesatanen2 .boksi:nth-child(3) { top: 105vh; left: 40%; z-index: 5; }
.kolmesatanen2 .boksi:nth-child(4) { top: 155vh; left: 60%; z-index: 4; }


.kolmesatanen2 .boksi{ padding: 0; }
.kolmesatanen2 .review-card{ width: 88%; max-width: 520px; }
.kolmesatanen2 .review-card.small{ max-width: 420px; }
.kolmesatanen2 .review-card .review-body{ 
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}




.kolmesatanen2 .boksi{
  background: #0b1220;                 
  border-color: rgba(116,140,171,.45); 
  box-shadow: 0 22px 48px rgba(0,0,0,.5);
}

.kolmesatanen2 .review-card{
  width: 82%;                           
  max-width: 480px;
  padding: clamp(.7rem, 2vw, 1rem) clamp(.9rem, 2.4vw, 1.2rem);
  background: linear-gradient(180deg, rgba(8,12,22,0.72), rgba(8,12,22,0.44));
  border: 1px solid rgba(91,111,133,.55);
  box-shadow: 0 14px 34px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,0.03);
}
.kolmesatanen2 .review-card .review-body{
  display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
  -webkit-line-clamp: 3;                
}
.kolmesatanen2 .review-card .review-header .avatar{ background:#2a3b52; }
.kolmesatanen2 .review-card .review-header .name{ font-size: 1rem; }
.kolmesatanen2 .review-card .review-header .company{ font-size: .8rem; }
.kolmesatanen2 .review-card .stars{ font-size: 1rem; }
.kolmesatanen2 .review-card .timepill{ font-size: .78rem; }


.kolmesatanen2 .review-card.small{
  width: 78%;
  max-width: 360px;
  padding: clamp(.55rem, 1.6vw, .85rem) clamp(.7rem, 2vw, 1rem);
}
.kolmesatanen2 .review-card.small .review-body{ -webkit-line-clamp: 2; }
.kolmesatanen2 .review-card.small .review-header .avatar{ width:30px; height:30px; }
.kolmesatanen2 .review-card.small .review-header .name{ font-size:.95rem; }
.kolmesatanen2 .review-card.small .review-header .company{ font-size:.74rem; }


body.light-mode .kolmesatanen2 .boksi{
  background: #f0f3f7;
  border-color: rgba(62,92,118,.35);
}
body.light-mode .kolmesatanen2 .review-card{
  background: linear-gradient(180deg, rgba(13,19,33,0.06), rgba(13,19,33,0.03));
  border-color: rgba(62,92,118,.35);
  box-shadow: 0 12px 28px rgba(0,0,0,.16), inset 0 1px 0 rgba(0,0,0,0.03);
}
body.light-mode .kolmesatanen2 .review-card .review-header .avatar{ background:#748cab; color:#0d1321; }

@media (max-width: 820px) {
  .kolmesatanen2 {
    height: auto;                 
    padding: 5svh 0;
    grid-template-columns: 1fr;
    justify-content: center;
  }
  .kolmesatanen2 .boksi {
    position: relative;           
    width: 92vw;
    max-width: 600px;
    height: auto;                 
    aspect-ratio: 600 / 385;
    left: auto;
    --offsetY: 0vh;               
    
    transform: translateX(var(--slideX, 0px)) translateY(var(--slideY, 0px)) rotate(var(--rot, 0deg));
    margin: 0 auto 3.2rem;        
    z-index: auto;
    justify-self: center;
  }
  
  .kolmesatanen2 .boksi.from-left,
  .kolmesatanen2 .boksi.from-right { --offsetX: 70vw; }
  
  .kolmesatanen2 .boksi:nth-child(1),
  .kolmesatanen2 .boksi:nth-child(2),
  .kolmesatanen2 .boksi:nth-child(3),
  .kolmesatanen2 .boksi:nth-child(4) {
    top: auto;
    left: auto;
    z-index: auto;
  }
  .kolmesatanen2 .boksi:last-child { margin-bottom: 2rem; }
}

@media (max-width: 480px) {
  
  .kolmesatanen2 { 
    height: auto !important;   
    padding: 3svh 0 !important;
  }
  .kolmesatanen2 .boksi {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 auto 0.9rem !important; 
  }

  
  .kolmesatanen2 .review-card,
  .kolmesatanen2 .review-card.small {
    width: 92vw !important;
    max-width: 600px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 1rem 1.2rem !important;
    font-size: 1.05rem; 
  }
  .kolmesatanen2 .review-card .review-header .avatar {
    width: 42px; height: 42px; font-size: 1.05rem;
  }
  .kolmesatanen2 .review-card .review-header .name { font-size: 1.15rem; }
  .kolmesatanen2 .review-card .review-header .company { font-size: 0.92rem; }
  .kolmesatanen2 .review-card .review-body {
    font-size: 1.03rem; 
    line-height: 1.5;
    display: -webkit-box;              
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;             
    overflow: hidden;
  }
  .kolmesatanen2 .review-card .stars { font-size: 1.1rem; }
  .kolmesatanen2 .review-card .timepill { font-size: 0.85rem; }

  .kolmesatanen2 .review-card,
  .kolmesatanen2 .review-card.small {
    margin-bottom: 0.1rem !important;  
  }
}



.hidden { display: none !important; } 


@media (min-width: 901px) {
  .kolmesatanen1 { display: block !important; }   
  .kolmesatanen2 { display: none  !important; }
}


@media (max-width: 900px) {
  .kolmesatanen1 { display: none !important; }
  .kolmesatanen2 { display: block !important; }   
}




@media (max-width: 900px){
  .kolmesatainen {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
}


@media (max-width: 900px) {
  .valijuttu {
    display: none !important;
  }
}

    .kolmesatainen {
      height: 350vh;
      position: relative;
        z-index: 3;
      color: white;
      pointer-events: none;
    }
    .sticky-ylaosa {
      position: sticky;
      top: 0;
      height: 100vh;
      pointer-events: none;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 10;
      overflow-x: hidden;
    }

.vasen-teksti {
  position: absolute;
  bottom: 7%;
  left: 4vw;
  color: #f0ebdb;
  font-size: clamp(2.6rem, 6vw, 5rem);
  font-weight: 800;
  letter-spacing: .01em;
  line-height: .98;
  display: flex;
  flex-direction: column;
  gap: .15em;
  user-select: none;
  z-index: 5;
  will-change: transform;
}

.oikea-teksti {
  position: absolute;
  bottom: 6%;
  right: 5vw;
  color: #f0ebdb;
  font-size: clamp(1.2rem, 2.2vw, 1.9rem);
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.12;
  display: flex;
  flex-direction: column;
  gap: .2em;
  text-align: right;
  max-width: 32vw;
  user-select: none;
  z-index: 5;
  will-change: transform;
}


@media (max-width: 1200px){
  .oikea-teksti{ max-width: 38vw; }
}
@media (max-width: 900px){
  .vasen-teksti, .oikea-teksti{ transform: none !important; }
}

    .center-box {
  position: relative; 
  width: 20vw;
  height: 20vh;
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
  z-index: 2;
  border-radius: 8px;
  padding: 1rem;
  overflow: hidden;
  transition: width 0.1s ease, height 0.1s ease, border-radius 0.3s ease;
}


.vasen-boksi, .oikea-boksi {
  width: 40%;
  height: 50%;
  background-color: #0d132100;
  color: #f0ebdb;
  pointer-events: none;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  font-weight: bold;
  transition: font-size 0.3s ease;
  margin: 0 8%;
  position: relative; 
  z-index: 10;
}


.vasen-pieni-boksi, .oikea-pieni-boksi {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  width: 20%;                 
  height: auto;               
  background-color: #0d132100;
  color: #f0ebdb;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  font-weight: bold;
  z-index: 5;
  pointer-events: none;
  transition: transform 0.3s ease, opacity 0.3s ease;
  overflow: visible;          
}

.vasen-pieni-boksi {
  left: 45%;
}

.oikea-pieni-boksi {
  right: 45%;
}


.boksi-sisus {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.5em;
  box-sizing: border-box;
  font-size: 1rem;
  gap: 0.3em;
}


.review-card{ 
  width: 92%; max-width: 520px; margin: 0 auto; 
  padding: clamp(.8rem, 2.4vw, 1.1rem) clamp(1rem, 3vw, 1.4rem);
  background: linear-gradient(180deg, rgba(240,235,219,0.06), rgba(240,235,219,0.02));
  border: 1px solid rgba(116,140,171,.35);
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(0,0,0,.22);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #f0ebdb;
}
.review-card.small{
  max-width: 300px;                                  
  padding: clamp(.6rem, 1.8vw, .85rem) clamp(.75rem, 2.2vw, 1rem); 
}
.review-header{ display:flex; align-items:center; gap:.8rem; margin-bottom:.6rem; }
.review-header .avatar{ width:40px; height:40px; border-radius:50%; display:grid; place-items:center; font-weight:800; background:#3e5c76; color:#f0ebdb; }
.review-header .person{ display:flex; flex-direction:column; }
.review-header .name{ font-size:1.05rem; font-weight:800; line-height:1.1; color:#f0ebdb; }
.review-header .company{ font-size:.85rem; color:#d9e2f1; opacity:.9; }
.review-body{ font-size:1.02rem; line-height:1.45; color:#f0ebdb; margin:.4rem 0 .7rem; }
.review-meta{ display:flex; align-items:center; justify-content:space-between; gap:.8rem; }
.stars{ font-size:1.05rem; letter-spacing:.15em; background: linear-gradient(90deg, #f5d565 var(--ratingPct,100%), #5b6f85 var(--ratingPct,100%)); -webkit-background-clip:text; background-clip:text; color: transparent; }
.timepill{ font-size:.82rem; padding:.25rem .55rem; border-radius:999px; background: rgba(116,140,171,.18); color:#d9e2f1; border:1px solid rgba(116,140,171,.35); }


body.light-mode .review-card{ background: linear-gradient(180deg, rgba(13,19,33,0.04), rgba(13,19,33,0.02)); border-color: rgba(62,92,118,.3); color:#0d1321; }
body.light-mode .review-header .avatar{ background:#748cab; color:#0d1321; }
body.light-mode .review-header .name{ color:#0d1321; }
body.light-mode .review-header .company{ color:#3e5c76; }
body.light-mode .review-body{ color:#1d2d44; }
body.light-mode .timepill{ background: rgba(62,92,118,.12); color:#1d2d44; border-color: rgba(62,92,118,.28); }
.vasen-boksi, .oikea-boksi {
  max-height: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

.boksi-sisus {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
  transition: font-size 0.3s ease, padding 0.3s ease;
}


.vasen-pieni-boksi .boksi-sisus,
.oikea-pieni-boksi .boksi-sisus { height: auto; padding: 0.25rem 0.25rem; }


.review-card.small .review-header .avatar{ width: 32px; height: 32px; font-size: .95rem; }
.review-card.small .review-header .name{ font-size: 0.98rem; }
.review-card.small .review-header .company{ font-size: 0.78rem; }
.review-card.small .review-body{ font-size: 0.95rem; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.review-card.small .stars{ font-size: 0.95rem; }
.review-card.small .timepill{ font-size: 0.75rem; padding: .2rem .5rem; }


.vasen-boksi .boksi-sisus, .oikea-boksi .boksi-sisus,
.vasen-pieni-boksi .boksi-sisus, .oikea-pieni-boksi .boksi-sisus {
  align-items: stretch;       
}
.vasen-boksi .review-card, .oikea-boksi .review-card,
.vasen-pieni-boksi .review-card, .oikea-pieni-boksi .review-card { width: 100%; }



body.light-mode .content-box,
body.light-mode .extra-text-left,
body.light-mode .extra-text-right,
body.light-mode .content-header,
body.light-mode .mini-box,
body.light-mode .mini-box-center,
body.light-mode .vasen-teksti,
body.light-mode .oikea-teksti {
  color: #0d1321;
}

body.light-mode .pieni-teksti {
  color: #3e5c76;
}


body.light-mode .dot {
  background: #748cab;
}
body.light-mode .dot.active {
  background: #0d1321;
}


body.light-mode .vasen-boksi,
body.light-mode .oikea-boksi {
  background-color: none;
  color: #0d132100;
}

body.light-mode .vasen-pieni-boksi,
body.light-mode .oikea-pieni-boksi {
  background-color:#ffffff00;
  color: #0d1321;
}


body.light-mode .boksi-sisus .kommentti {
  color: #0d1321;
}
body.light-mode .boksi-sisus .asiakas {
  color: #555;
}
body.light-mode .boksi-sisus .yritys {
  color: #888;
}

body.light-mode .boksi-sisus .kommentti {

  background-color: #748cab;
}






.static-middle-box {
  position: absolute;
  top: 52.5%;          
  left: 50%;
  width: 15%;        
  height: 25%;       
  background-color: #1d2d44;
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 6px;
  font-weight: bold;
  transform: translate(-50%, -50%) scale(0.5); 
  transition: transform 0.3s ease;
  z-index: 4;
}

.comment-wrapper {
  width: 90%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.comment-label {
  font-size: 0.9rem;
  font-weight: 600;
  margin: 0;
}

.comment-name,
.comment-text {
  width: 100%;
  border: none;
  border-radius: 4px;
  padding: 0.4rem 0.5rem;
  font-size: 0.8rem;
  resize: none;
}

.comment-name {
  height: 1.8rem;
}

.comment-text {
  height: 4rem;
}











.hinta-osio {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100vh;
  z-index: 3;
  pointer-events: none;
  width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
  flex-direction: row;
}



.hinta-osio .hinta-laatikko { position: relative; }
.hinta-osio .hinta-laatikko .ylavasen-teksti {
  position: absolute;
  top: 0.75rem;

  right: 1.2rem;            
  left: auto;               
  max-width: calc(100% - 2.4rem);
  text-align: right;        
  white-space: normal;
  z-index: 50 !important;              
}




.hinta-paaotsikko {
  
  
  
  
  
  
  display: flex;
  flex-direction: column;
  gap: 0;
  font-size: 6.5rem;
  font-weight: 700;
  z-index: 11 !important ;
  line-height: 1.2;
  color: #f0ebdb;
  pointer-events: none;
  flex: 1;
  text-align: left;
  margin-left: 2vw;
  
  justify-content: flex-start;
  align-items: flex-start;
  min-width: 0;
  
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: pan-y; 
}


.hinta-paaotsikko *,
.hinta-paaotsikkopelle *,
#palvelut.hinta-osio .hinta-paaotsikko *,
#palvelut.hinta-osio .hinta-paaotsikkopelle * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: pan-y;
}


.hinta-paaotsikko:not(#minun-otsikko) {
  margin-left: 12vw;
}


#minun-otsikko {
  margin-left: 2vw;
}


.hinta-slide-left,
.hinta-slide-right {
  --paint: 0%;
  color: transparent;
  background: linear-gradient(90deg, #1d2d44 var(--paint), #f0ebdb var(--paint));
  background-clip: text;
  -webkit-background-clip: text;
  transition: transform 0.6s ease-out, background 0.6s ease-out;
  will-change: transform;
}

.hinta-laatikko {
  
  
  
  
  
  width: 35vw;
  height: 60vh;
  z-index: 50 !important;
  border-radius: 16px;
  background-color: #648ef123;
  padding: 2rem;
  box-sizing: border-box;
  color: #f0ebdb;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  overflow: visible;
  pointer-events: none;
  flex: 1;
  max-width: 35vw;
  margin-right: 8vw;
  min-width: 0;
  position: relative; 
}



.ylavasen-teksti:not(.hinta-osio .hinta-laatikko .ylavasen-teksti) {
  position: absolute;
  top: 2rem;
  left: 3rem;
  font-size: 2rem;
  font-weight: 600;
  color: #f0ebdb;
  user-select: none;
  pointer-events: none;
  white-space: nowrap;
  z-index: 20;
  text-align: left;
  transform: none;
  width: auto;
}

.ylavasen-teksti{

  font-size: 2.4rem;
  
}


@media (max-width: 900px) {
  .hinta-osio {
    flex-direction: column;
    height: auto;
    height: 50svh;
    padding: 8svh 6vw;
    pointer-events: auto;
    align-items: center;
    justify-content: center;
    gap: 2.5rem;
  } 

  .hinta-paaotsikko {
    
    flex: unset;
    margin: 0 0 1rem 0;
    margin-left: 0rem;
    font-size: clamp(6.2rem, 9vw, 7.2rem);
    line-height: 1.05;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
  }

  .hinta-paaotsikkopelle {
    
    flex: unset;
    margin: 0 0 1rem 0;
    margin-left: 0rem;
    font-size: clamp(6.2rem, 9vw, 7.2rem);
    line-height: 1.05;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;

  }

  .hinta-slide-left,
  .hinta-slide-right {
    background-clip: text;
    -webkit-background-clip: text;
  }

  .hinta-laatikko {
    flex: unset;
    max-width: 100%;
    width: 100%;
    height: clamp(340px, 48vh, 520px);
    margin: 0;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    pointer-events: auto;
    position: relative;
  }

  
  .hinta-laatikko > div {
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    
  }
    

  
  .ylavasen-teksti {
    top: 0.75rem;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 2rem);
    font-size: clamp(1.1rem, 3.8vw, 1.4rem);
    text-align: center;
    white-space: normal;
  }

  
  .tripla-osio,
  .macbook-section,
  .hinta-paaotsikko,
  .hinta-laatikko {
    display: none !important;
  }
}


@media (max-width: 900px){
  
  .hinta-paaotsikko,
  .hinta-paaotsikko:not(#minun-otsikko),
  #minun-otsikko,
  .hinta-paaotsikkopelle{
    margin-left: 0 !important;
    margin-right: 0 !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }
  
  .hinta-paaotsikko > .slide-left,
  .hinta-paaotsikko > .slide-right,
  .hinta-paaotsikkopelle > .slide-left,
  .hinta-paaotsikkopelle > .slide-right{
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media (max-width: 900px) {
  .hinta-osio .hinta-laatikko .ylavasen-teksti {
    right: 100%;               
    left: auto; 
    transform: translateX(50%);
    width: calc(100% - 2rem);
    text-align: center;
  }
}


@media (max-width: 900px) {
  .hinta-paaotsikko {
    background: #000 !important;
    padding: 0.6rem 0.8rem !important;
    border-radius: 8px !important;
  }
}

@media (max-width: 480px) {
  .hinta-osio { padding: 7svh 5vw; }

  .hinta-paaotsikko {
    font-size: clamp(4.1rem, 10vw, 4.6rem);
    line-height: 1.08;
    margin-bottom: 0.75rem;
    text-align: center;
    justify-content: center;
    align-items: center;
  }

  .hinta-laatikko {
    height: clamp(300px, 52svh, 460px);
    border-radius: 14px;
    text-align: center;
    justify-content: center;
    align-items: center;
  }

  .ylavasen-teksti {
    top: 0.6rem;
    font-size: clamp(2rem, 4.2vw, 2rem);
  }
}


.hinta-osio .hinta-laatikko { position: relative; }
.hinta-osio .hinta-laatikko .ylavasen-teksti {
  position: absolute !important;
  top: 0.9rem !important;
  left: 1.6rem !important;     
  right: auto !important;      
  transform: none !important;  
  text-align: left !important;
  max-width: calc(100% - 3.2rem) !important; 
  white-space: normal !important;
  z-index: 12 !important;      
}


@media (max-width: 900px) {
  .hinta-osio .hinta-laatikko .ylavasen-teksti {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: calc(100% - 2rem) !important;
    text-align: center !important;
  }
}

.section-100vh{
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  color:#f0ebdb99;font-size:2rem;
}








@media (max-width: 480px) {
  .hinta-osio { padding: 7svh 5vw; }

  .hinta-paaotsikko {
    font-size: clamp(3.8rem, 9.5vw, 4.4rem);
    line-height: 1.06;
    margin-bottom: 0.75rem;
    text-align: center;
    justify-content: center;
    align-items: center;
  }

  .hinta-paaotsikkopelle {
    font-size: clamp(3.8rem, 9.5vw, 4.4rem);
    line-height: 1.06;
    margin-bottom: 0.75rem;
    text-align: center;
    justify-content: center;
    align-items: center;
  }

  
  .hinta-laatikko {
    height: clamp(360px, 60svh, 560px);
    border-radius: 14px;
    text-align: center;
    justify-content: center;
    align-items: center;
    padding-top: 3.2rem; 
  }

  .ylavasen-teksti {
    top: 0.6rem;
    font-size: clamp(1.2rem, 4.2vw, 1.6rem);
  }
}




#palvelut.hinta-osio .hinta-paaotsikko{
  gap: .08em;                
  line-height: .96;          
  letter-spacing: .01em;     
}
#palvelut.hinta-osio .hinta-paaotsikko > .slide-left,
#palvelut.hinta-osio .hinta-paaotsikko > .slide-right{
  margin: 0; padding: 0;     
}

#palvelut.hinta-osio .hinta-paaotsikko::after{
  content: ""; display:block; width:min(140px,22vw); height:3px; margin:.35rem 0 0;
  background: linear-gradient(90deg, #748cab 0%, transparent 100%);
}


#palvelut.hinta-osio .hinta-laatikko{
  padding-top: 3.2rem;       
  border: 1px solid rgba(116,140,171,.28); 
  box-shadow: 0 10px 28px rgba(0,0,0,.22); 
}
#palvelut.hinta-osio .hinta-laatikko .ylavasen-teksti{
  line-height: 1.15;         
  text-wrap: balance;        
}

#palvelut.hinta-osio .hinta-laatikko .mv-host{ z-index: 10; }
#palvelut.hinta-osio .hinta-laatikko .ylavasen-teksti{ z-index: 12; }


body.light-mode #palvelut.hinta-osio .hinta-paaotsikko::after{
  background: linear-gradient(90deg, #3e5c76 0%, transparent 100%);
}
body.light-mode #palvelut.hinta-osio .hinta-laatikko{ border-color: rgba(62,92,118,.30); box-shadow: 0 8px 20px rgba(13,19,33,.12); }
body.light-mode #palvelut.hinta-osio .hinta-laatikko .ylavasen-teksti{ color:#0d1321; }


@media (max-width: 900px){
  #palvelut.hinta-osio .hinta-paaotsikko{ gap: .12rem; line-height: 1.02; }
  #palvelut.hinta-osio .hinta-laatikko{ padding-top: 2.6rem; }
}


@media (max-width: 480px){
  #palvelut.hinta-osio .hinta-paaotsikko{ gap: .08rem; line-height: 1.04; }
  #palvelut.hinta-osio .hinta-laatikko{ padding-top: 2.2rem; }
}
/* Hintasektion hero (Ja mitkä on hintani?) päälle overlayn */
#palvelut.hinta-osio {
  position: relative;
  z-index: 1200 !important;
}
#palvelut.hinta-osio .hinta-paaotsikko,
#palvelut.hinta-osio .hinta-laatikko {
  position: relative;
  z-index: 1201 !important;
}

/* Mobiilissa: pakota "Ja mitkä on hintani?" näkyviin aina */
@media (max-width: 900px) {
  #palvelut.hinta-osio .hinta-paaotsikko .slide-left,
  #palvelut.hinta-osio .hinta-paaotsikko .slide-right {

  }

  /* Varmistetaan myös laatikon näkyvyys */
  #palvelut.hinta-osio .hinta-laatikko {
    opacity: 1 !important;
  }
}

@media (max-width: 900px) {
  #palvelut.hinta-osio .hinta-paaotsikko {
    margin-top: 0svh !important;
  }

  #palvelut.hinta-osio {
    padding-top: 0svh !important;
    margin-bottom: -8rem !important;
  }
}


@media (max-width: 900px) {
  #palvelut .hinta-paaotsikko,
  #palvelut .hinta-paaotsikkopelle,
  .hinta-paaotsikko,
  .hinta-paaotsikkopelle {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    overflow: hidden !important;
    max-height: none !important;
    height: auto !important;
    pointer-events: none !important;
    touch-action: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -webkit-touch-callout: none !important;
    -webkit-overflow-scrolling: auto !important;
    will-change: auto !important;
    z-index: 0 !important;
  }

  
  .hinta-paaotsikko *,
  .hinta-paaotsikkopelle * {
    pointer-events: none !important;
    user-select: none !important;
    touch-action: none !important;
  }
}








 

.tripla-osio{
  position:relative;
  overflow-x:hidden;        
  overflow-y:visible;       
  display:flex;flex-direction:column;
  justify-content:center;align-items:center;
  gap:3vh;padding:0 10vw 10vh;min-height:100vh;
  pointer-events: none !important;
}
.tripla-rivi{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.4vw;
  align-items: stretch;
}
.slide-wrapper{overflow:visible;position:relative;min-width:0;width:100%}


  .tripla-boksi{
    width:100%;
    height:auto;              
    min-height:480px;         
  border-radius: 0.3em;
  box-shadow:0 10px 28px rgba(0,0,0,.28);
  position:relative;z-index:801;
  display:flex;flex-direction:column;
  justify-content:flex-start;align-items:flex-start;
  padding:1.15rem 1.4rem;   
  gap:.9rem;                
  font-size:1.5rem;font-weight:bold;color:#f0ebdb;
  opacity:0;                 
  will-change:transform,opacity;
  background-color: #648ef11c;
}

 .slide-wrapper .tripla-boksi{ width:100%; }

/* --- Patch: Mobile pricing visibility control --- */
@media (max-width: 900px){
  /* Piilota desktop-hinnasto mobiilissa */
  #hinnasto .tripla-rivi,
  #hinnasto .pitka-boksi {
    display: none !important;
  }

  /* Mobile-pricing näkyviin */
  #pricing-mobile {
    display: block;
    margin-top: 3svh;
  }

  /* Piilota kaikki feature-listat oletuksena */
  #pricing-mobile .pm-features {
    display: none;
  }

  /* Näytä vain aktiivisen paketin feature-lista data-planin mukaan */
  #pricing-mobile[data-plan="mini"]   .pm-features[data-plan="mini"],
  #pricing-mobile[data-plan="laaja"]  .pm-features[data-plan="laaja"],
  #pricing-mobile[data-plan="custom"] .pm-features[data-plan="custom"]{
    display: flex;
    flex-direction: column;
    gap: .4rem;
  }
}

@media (min-width: 901px){
  /* Desktopilla näytetään vain vanha hinnasto, ei mobile-pricingiä */
  #pricing-mobile {
    display: none !important;
  }
}

@media (max-width: 1138px) {
  .tripla-osio .hinta-summa {
    font-size: 1.7rem; 
  }
}


@media (max-width: 993px) {
  .tripla-osio .hinta-summa {
    font-size: 1.5rem; 
  }
}

@media (max-width: 1200px) and (min-width: 901px){
  .tripla-rivi{ gap: 2vw; }
}


.pitka-boksi{
  width:80vw;
  height:15vh;
  border-radius:12px;
  box-shadow:0 10px 28px rgba(0,0,0,.28);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  padding-left:4vw;
  gap:.6rem;font-size:2rem;
  font-weight:bold;color:#f0ebdb;
  z-index:801;
  background-color: #648ef11c;
}
.pitka-otsikko{font-size:2rem;font-weight:700}
.pitka-boksi .pitka-hinta{font-size:1.2rem;font-weight:600;color:#f0ebdbb1}


.boksi-header{
  flex:0 0 7%;display:flex;align-items:center;width:100%;
  font-size:1.5rem;font-weight:700;color:#f0ebdb;margin-top:.3rem;
}
.boksi-desc{
  flex: 0 0 11%;            
  font-size: .85rem;
  line-height: 1.12;        
  width: 100%;
  color: #f0ebdbb1;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.boksi-viiva{width:95%;border-bottom:.24vh dashed #748cab;margin-top:0rem}


.boksi-hinta{
  flex:0 0 36%;             
  width:100%;
  display:flex;flex-direction:column;align-items:flex-start;gap:.5rem;padding-top:.6rem;
}
.hinta-summa{font-size:2rem;font-weight:700;color:#f0ebdb}


.hinta-btn {
  --btn-line: 1.4em;
  pointer-events: auto;
  --pad-v: 10px;

  padding:10px 28px;
  min-height: calc(var(--btn-line) + 2 * var(--pad-v));

  position: relative;
  font-size: 1.4rem;
  background: none;
  color: #f0ebdb;
  border: 2px solid #748cab;
  border-radius: 999px;
  cursor: pointer;
  line-height: 1.4;
  overflow: hidden;
  transition: background 0.3s, color 0.3s;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 1vh;
  margin-bottom: 1vh;
}

.hinta-btn-text-wrapper {
  display: inline-block;
  position: relative;
  height: var(--btn-line);
  overflow: hidden;
}
.hinta-btn-text { display: flex; flex-wrap: nowrap; line-height: var(--btn-line); }
.hinta-btn-text.alt { position: absolute; top: var(--btn-line); left: 0; }

.letter { display: inline-block; transition: transform 0.4s ease, opacity 0.4s ease; }
.hinta-btn:hover .letter.top { transform: translateY(calc(-1 * var(--btn-line))); }
.hinta-btn:hover .letter.alt { transform: translateY(calc(-1 * var(--btn-line))); }




body.light-mode .static-middle-box {
  background-color: #f0ebdb;
  color: #0d1321;
}


body.light-mode .comment-name,
body.light-mode .comment-text {
  background-color: #f0ebdb33;
  color: #0d1321;
  border: 1px solid #748cab55;
}
body.light-mode .comment-label { color: #0d1321; }

body.light-mode .hinta-paaotsikko { color: #0d1321; }
body.light-mode .hinta-slide-left,
body.light-mode .hinta-slide-right {
  background: linear-gradient(90deg, #f0ebdb var(--paint), #0d1321 var(--paint));
}
body.light-mode .hinta-laatikko { background-color: #f0ebdb22; color: #0d1321; }
body.light-mode .ylavasen-teksti { color: #0d1321; }


body.light-mode .tripla-boksi,
body.light-mode .pitka-boksi {
  background-color: #f0ebdb22;
  color: #0d1321;
}
body.light-mode .pitka-boksi .pitka-hinta { color: #0d132199; }
body.light-mode .boksi-header { color: #0d1321; }
body.light-mode .boksi-desc { color: #0d132199; }
body.light-mode .boksi-viiva { border-bottom-color: #748cab55; }
body.light-mode .boksi-hinta,
body.light-mode .hinta-summa { color: #0d1321; }


body.light-mode .hinta-btn {
  color: #0d1321;
  border-color: #748cab;
  background: none;
}
body.light-mode .hinta-btn-text,
body.light-mode .hinta-btn-text.alt { color: #0d1321; }

.hinta-btn-icon {
  height: 1.2em;
  width: auto;
  display: inline-block;
  filter: brightness(0) saturate(100%) invert(94%) sepia(13%) saturate(172%) hue-rotate(2deg) brightness(102%) contrast(97%);
  transition: filter 0.3s, transform 0.3s;
  transform: rotate(-45deg);
}
.hinta-btn:hover .hinta-btn-icon { transform: rotate(-45deg); }


.boksi-features{
  list-style:none;margin:.3rem 0 0 0;padding:0 0 0 .8rem;
  display:flex;flex-direction:column;gap:.35rem;font-size:1.05rem;line-height:1.55;color:#748cab;
}

.boksi-features li::before{
  content: ""; display:inline-block; width:1.3rem; height:1.3rem; margin-right:0.35rem;
  background-size:contain; background-repeat:no-repeat; background-position:center;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23748cab'%3E%3Cpath d='M10.5858 13.4142L7.75735 10.5858L6.34314 12L10.5858 16.2427L17.6568 9.1716L16.2426 7.75739L10.5858 13.4142Z'/%3E%3C/svg%3E");
}
.boksi-features li[data-ico="bolt"]::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23748cab' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='13 2 3 14 10 14 9 22 21 10 14 10 15 2'/%3E%3C/svg%3E"); }
.boksi-features li[data-ico="cam"]::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23748cab' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='18' height='14' rx='2'/%3E%3Cpath d='M7 7V4h4l2 3'/%3E%3C/svg%3E"); }
.boksi-features li[data-ico="spark"]::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23748cab' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83'/%3E%3C/svg%3E"); }
.boksi-features li[data-ico="clone"]::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23748cab' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='13' height='13' rx='2'/%3E%3Crect x='2' y='2' width='13' height='13' rx='2'/%3E%3C/svg%3E"); }
.boksi-features li[data-ico="users"]::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23748cab' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E"); }
.boksi-features li[data-ico="dl"]::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23748cab' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E"); }


body.light-mode .boksi-features li[data-ico]::before{ background-image:none; }
body.light-mode .boksi-features li[data-ico="bolt"]::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d1321' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='13 2 3 14 10 14 9 22 21 10 14 10 15 2'/%3E%3C/svg%3E"); }
body.light-mode .boksi-features li[data-ico="cam"]::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d1321' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='18' height='14' rx='2'/%3E%3Cpath d='M7 7V4h4l2 3'/%3E%3C/svg%3E"); }
body.light-mode .boksi-features li[data-ico="spark"]::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d1321' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83'/%3E%3C/svg%3E"); }
body.light-mode .boksi-features li[data-ico="clone"]::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d1321' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='13' height='13' rx='2'/%3E%3Crect x='2' y='2' width='13' height='13' rx='2'/%3E%3C/svg%3E"); }
body.light-mode .boksi-features li[data-ico="users"]::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d1321' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E"); }
body.light-mode .boksi-features li[data-ico="dl"]::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d1321' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E"); }

.btn-row{display:flex;gap:0;width:100%}
.btn-row .hinta-btn:first-child{border-radius:24px 0 0 24px}
.btn-row .hinta-btn:last-child{
  border-radius:0 24px 24px 0;margin-left:-2px;
}


.slide-in-right{transform:translateX(120%);opacity:0;
  transition:transform .6s ease-out,opacity .6s ease-out}
.slide-in-right.visible{transform:translateX(0);opacity:1}

@media (max-width: 900px) {
  
  .tripla-osio { 
    padding: 0; 
    gap: 0; 
    pointer-events: none; 
  }

  
  .tripla-rivi { 
    display: grid;
    grid-template-columns: 1fr; 
    gap: 3svh; 
    align-items: stretch; 
  }

  
  .slide-wrapper { width: 100%; }
  .tripla-boksi {
    width: 100%;
    height: auto;          
    min-height: 260px;     
    padding: 1.1rem 1.2rem;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0,0,0,.22);
  }

  
  .boksi-header { font-size: 1.35rem; }
  .boksi-desc   { font-size: 0.95rem; line-height: 1.35; margin-top: .2rem; }
  .boksi-viiva  { width: 100%; }

  
  .boksi-hinta { gap: .6rem; padding-top: .8rem; }
  .hinta-summa { font-size: 1.8rem; }
  .boksi-features { font-size: 1rem; line-height: 1.5; }

  
  .btn-row { flex-direction: column; gap: .6rem; }
  .btn-row .hinta-btn:first-child,
  .btn-row .hinta-btn:last-child { border-radius: 999px; margin-left: 0; }
  .hinta-btn { width: 100%; font-size: 1.1rem; padding: 10px 18px; }

  
  .pitka-boksi {
    width: 100%;
    height: auto;
    min-height: 120px;
    padding: 1rem 1.2rem;
    border-radius: 12px;
    align-items: flex-start; 
    gap: .4rem;
  }
  .pitka-otsikko { font-size: 1.4rem; }
  .pitka-boksi .pitka-hinta { font-size: 1.05rem; }
}


@media (max-width: 480px) {
  .tripla-boksi { min-height: 230px; padding: 1rem 1rem; }
  .boksi-header { font-size: 1.25rem; }
  .boksi-desc   { font-size: 0.9rem; }
  .hinta-summa  { font-size: 1.6rem; }
  .pitka-otsikko { font-size: 1.25rem; }
  .pitka-boksi .pitka-hinta { font-size: 0.98rem; }
}



@media (max-width: 900px){
  
  #hinnasto .tripla-rivi,
  #hinnasto .pitka-boksi,
  #hinnasto #plan-details-mobile { display: none !important; }
  #pricing-mobile[data-plan="mini"]   .pm-features[data-plan="mini"],
#pricing-mobile[data-plan="laaja"]  .pm-features[data-plan="laaja"],
#pricing-mobile[data-plan="custom"] .pm-features[data-plan="custom"]{ display:flex; }

  #pricing-mobile { display: block; }
  
  .tripla-osio{
    min-height: 0 !important;   
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 0 !important;
    display: block !important;
    
  }
}
@media (min-width: 901px){
  #pricing-mobile { display: none !important; }
}

@media (max-width: 900px){
  #pricing-mobile{ margin-top: 12px; }
  #pricing-mobile *{ box-sizing: border-box; }
}


.pricing-mobile{ 
  position:relative; z-index:0; margin-top:.8rem; padding:0 18px 28px;
  background:#0d132100; color:#eaeaea;
}

.pricing-mobile{ pointer-events:auto; }

.pm-accordion-panel[hidden]{ display:none !important; }
.pricing-mobile .pm-savings{ text-align:center; opacity:.8; margin:10px 0 18px; font-size:.95rem; }

.pm-cards{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:18px; }


.pm-card{ 
  all: unset; box-sizing: border-box; appearance:none; -webkit-appearance:none; cursor:pointer; 
  display:block; position:relative; text-align:left; padding:16px; border-radius:14px; 
  background:#1d2d44; border:1px solid rgba(255,255,255,.10);
}
body.light-mode .pm-card{ background:#ffffff; border-color:rgba(13,19,33,.15); }

.pm-card .pm-card-title{ font-weight:800; font-size:1.25rem; color:#748cab; line-height:1.1; }
.pm-card .pm-card-title.accent{ color:#3e5c76; }
.pm-card .pm-card-title.team{ color:#f0ebdb; }
.pm-card .pm-card-price{ margin-top:6px; font-weight:600; opacity:.9; }
.pm-card .pm-card-sub{ font-size:.9rem; opacity:.7; margin-top:2px; }
.pm-card .pm-radio{ position:absolute; right:14px; top:14px; width:28px; height:28px; border-radius:50%; border:2px solid rgba(255,255,255,.25); display:inline-block; }

.pm-selected{ border-color:#3e5c76; box-shadow:0 0 0 2px #3e5c76 inset; }
.pm-selected .pm-radio{ background: radial-gradient(circle at 50% 50%, #f0ebdb 40%, transparent 42%); border-color:#f0ebdb; }

.pm-addons{ margin:18px 0 12px; }
.pm-accordion{ 
  all: unset; box-sizing:border-box; appearance:none; -webkit-appearance:none; width:100%; 
  display:flex; align-items:center; justify-content:space-between; gap:10px; 
  background:#1d2d44; border:1px solid rgba(255,255,255,.10); border-radius:12px; 
  padding:14px 16px; cursor:pointer; color:#eaeaea;
}
body.light-mode .pm-accordion{ background:#fafafa; border-color:rgba(13,19,33,.12); }
.pm-accordion span{ font-weight:700; }
.pm-accordion .pm-accordion-value{ font-weight:500; opacity:.8; }
.pm-caret{ width:20px; height:20px; stroke: currentColor; fill:none; opacity:.7; }
.pricing-mobile .pm-caret{ color:#748cab; } 
.pm-accordion[aria-expanded="true"] .pm-caret{ transform: rotate(180deg); }

.pm-accordion-panel{ 
  border:1px solid rgba(255,255,255,.08); border-top:none; border-radius:0 0 12px 12px; 
  padding:10px 16px; background:#0d1321; 
}
body.light-mode .pm-accordion-panel{ background:#fff; border-color:rgba(13,19,33,.12); }

.pm-addons-list{ list-style:none; padding-left:0; display:flex; flex-direction:column; gap:6px; }
.pm-addons-list li{
  position: relative;
  padding: 4px 0;            
  padding-left: 0;
  display: flex;
  align-items: center;
  column-gap: 10px;          
  color:#eaeaea;             
}
.pm-addons-list li::before{ content:""; width:22px; height:22px; flex:0 0 22px; background-repeat:no-repeat; background-position:center; background-size:contain; display:block; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23748cab'%3E%3Cpath d='M10.5858 13.4142L7.75735 10.5858L6.34314 12L10.5858 16.2427L17.6568 9.1716L16.2426 7.75739L10.5858 13.4142Z'/%3E%3C/svg%3E"); }
.pm-addons-list li[data-ico="globe"]::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23748cab' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20'/%3E%3Cpath d='M12 2c2.5 2.7 4 6.3 4 10s-1.5 7.3-4 10c-2.5-2.7-4-6.3-4-10s1.5-7.3 4-10z'/%3E%3C/svg%3E"); }
.pm-addons-list li[data-ico="shield"]::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23748cab' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2l7 4v6c0 5-3.5 9-7 10-3.5-1-7-5-7-10V6l7-4z'/%3E%3C/svg%3E"); }
.pm-addons-list li[data-ico="edit"]::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23748cab' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.121 2.121 0 113 3L7 19l-4 1 1-4 12.5-12.5z'/%3E%3C/svg%3E"); }
.pm-addons-list li[data-ico="cloud"]::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23748cab' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 17.5a4.5 4.5 0 00-1-8.9 6 6 0 00-11.3-1.7A5 5 0 006 17.5h14z'/%3E%3C/svg%3E"); }
.pm-addons-list li[data-ico="wrench"]::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23748cab' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a4 4 0 105.0 5l-7.9 7.9a3 3 0 11-4.2-4.2l7.9-7.9z'/%3E%3C/svg%3E"); }


body.light-mode .pm-addons-list li::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230d1321'%3E%3Cpath d='M10.5858 13.4142L7.75735 10.5858L6.34314 12L10.5858 16.2427L17.6568 9.1716L16.2426 7.75739L10.5858 13.4142Z'/%3E%3C/svg%3E"); }
body.light-mode .pm-addons-list li[data-ico="globe"]::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d1321' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20'/%3E%3Cpath d='M12 2c2.5 2.7 4 6.3 4 10s-1.5 7.3-4 10c-2.5-2.7-4-6.3-4-10s1.5-7.3 4-10z'/%3E%3C/svg%3E"); }
body.light-mode .pm-addons-list li[data-ico="shield"]::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d1321' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2l7 4v6c0 5-3.5 9-7 10-3.5-1-7-5-7-10V6l7-4z'/%3E%3C/svg%3E"); }
body.light-mode .pm-addons-list li[data-ico="edit"]::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d1321' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.121 2.121 0 113 3L7 19l-4 1 1-4 12.5-12.5z'/%3E%3C/svg%3E"); }
body.light-mode .pm-addons-list li[data-ico="cloud"]::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d1321' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 17.5a4.5 4.5 0 00-1-8.9 6 6 0 00-11.3-1.7A5 5 0 006 17.5h14z'/%3E%3C/svg%3E"); }


.pm-yl{ border-radius:12px; }
.pm-yl summary{ list-style:none; }                     
.pm-yl summary::-webkit-details-marker{ display:none; }
.pm-yl[open] .pm-caret{ transform: rotate(180deg); }


.pm-yl .pm-accordion{ border-bottom-left-radius:12px; border-bottom-right-radius:12px; }
.pm-yl[open] .pm-accordion{ border-bottom-left-radius:0; border-bottom-right-radius:0; }
.pm-yl[open] .pm-accordion + .pm-accordion-panel{ border-top:none; }

.pm-addons-static{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:#1d2d44; border:1px solid rgba(255,255,255,.10); border-radius:12px;
  padding:14px 16px; cursor:default;
}
body.light-mode .pm-addons-static{ background:#fafafa; border-color: rgba(13,19,33,.12); }

.pm-features{ list-style:none; margin:20px 0 14px; padding:0 6px; display:none; flex-direction:column; gap:20px; }

#pricing-mobile[data-plan="mini"]  .pm-features[data-plan="mini"],
#pricing-mobile[data-plan="laaja"] .pm-features[data-plan="laaja"],
#pricing-mobile[data-plan="custom"] .pm-features[data-plan="custom"]{
  display:flex;
}
.pm-features li{ display:flex; align-items:center; gap:14px; font-size:1.05rem; line-height:1.35; }
.pm-features .pm-ico{ width:22px; height:22px; opacity:.9; flex:0 0 22px; }


.pm-footnote{ opacity:.6; font-size:.9rem; margin:8px 4px 14px; }
.pm-cta{ 
  all: unset; box-sizing:border-box; display:block; width:100%; border-radius:12px; 
  background:#3e5c76; color:#f0ebdb; font-weight:800; font-size:1.25rem; 
  padding:18px; text-align:center; cursor:pointer; margin-top:8px; 
}
.pm-cta:hover{ filter:brightness(.92); }
.pm-cta:active{ transform: translateY(1px); filter:brightness(.86); }


body.light-mode .pricing-mobile{ color:#0d1321; }


body.light-mode .pm-card{
  background:#ffffff;
  border-color:rgba(13,19,33,.15);
}
body.light-mode .pm-card .pm-card-price{ color:#0d1321; opacity:.9; }
body.light-mode .pm-card .pm-card-sub{ color:rgba(13,19,33,.7); opacity:1; }
body.light-mode .pm-radio{ border-color:rgba(13,19,33,.35); }
body.light-mode .pm-selected{
  border-color:#3e5c76;
  box-shadow:0 0 0 2px #3e5c76 inset;
}


body.light-mode .pm-accordion{
  background:#fafafa;
  border-color:rgba(13,19,33,.12);
}
body.light-mode .pm-accordion-panel{
  background:#ffffff;
  border-color:rgba(13,19,33,.12);
}
body.light-mode .pm-yl{ color:#0d1321; }
body.light-mode .pm-caret{ opacity:.7; }
body.light-mode .pm-addons-list li{ color:#0d1321; }


body.light-mode .pm-savings{ color:#0d1321; opacity:.7; }


body.light-mode .pm-cta{ background:#3e5c76; color:#f0ebdb; }
body.light-mode .pm-card:hover{ border-color: rgba(13,19,33,.35); }


.pm-subtext {
  text-align: center;
  color: var(--teksti-vari, #eaeaea);
  font-size: clamp(22px, 5.8vw, 28px); 
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: .2px;
  margin: 1.8rem 0 4.6rem; 
  opacity: 0.95;
}
body.light-mode .pm-subtext { color:#0d1321; }








body.light-mode .hinta-btn-icon {
  filter: brightness(0) saturate(100%) invert(17%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}


body.light-mode .boksi-features {
  color: #0d1321;
}

body.light-mode .boksi-features li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230d1321'%3E%3Cpath d='M10.5858 13.4142L7.75735 10.5858L6.34314 12L10.5858 16.2427L17.6568 9.1716L16.2426 7.75739L10.5858 13.4142Z'/%3E%3C/svg%3E");
}


#pricing-mobile {
  position: relative;
  z-index: 1200 !important;
}


body.light-mode .slide-in-right {
  opacity: 0;
}


body.light-mode .kvTopBlack {
  background: #f0ebdb; 
}

body.light-mode .kvBottomRounded {
  background-color: #0d1321; 
}












@media (prefers-reduced-motion: reduce) {
  .hero-text h1, .hero-text h2, .hero-text p {
    transition: none !important;
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
  }
} 



.hero-btn-static,
.hero-btn-static:link,
.hero-btn-static:visited {
  text-decoration: none !important; 
  color: inherit;                   
}
.hero-btn-static .btn-text-wrapper-static,
.hero-btn-static .btn-text-static { text-decoration: none !important; }

.kylki-valikko .valikko-kohta,
.kylki-valikko .valikko-kohta:link,
.kylki-valikko .valikko-kohta:visited {
  text-decoration: none;            
  color: inherit;
}
.kylki-valikko .valikko-kohta:hover { text-decoration: none; }


.kylki-valikko .valikko-kohta:focus-visible,
.hero-btn-static:focus-visible {
  outline: 2px dashed currentColor; 
  outline-offset: 4px;
  text-decoration: none !important;
}

.hero-btn-static:hover .btn-text-static,
.hero-btn-static:focus .btn-text-static {
  color: #000 !important; 
  text-decoration: none !important;
}

.hero-btn-static:hover,
.hero-btn-static:focus {
  border-color: #748cab;
  background-color: transparent;
}




@media (max-width: 900px) {
  
  #macbook3d2 {
    display: block;
    margin-top: 6svh;           
    transform: scale(0.98) rotate(-1.5deg); 
    transform-origin: center center;
  }
}










.hero,
.sivu,
.kvStickyArea,
.kvStickyArea .kuutiopelle,
.kvStickyArea .kuutiopelle3,
.kvStickyArea .kuutiopelle3-inner {
  overflow-x: clip;             
}


img, video model-viewer {
  max-width: 100vw;
}


@media (min-width: 901px){
  .hinta-osio .hinta-laatikko{
    position: relative;
    perspective: 1400px;               
    overflow: visible;                  
  }
  
  .hinta-osio .hinta-laatikko::after{
    content: ""; position: absolute; left: 8%; right: 8%; bottom: -18px; height: 32px;
    background: radial-gradient(60% 100% at 50% 100%, rgba(0,0,0,.35), rgba(0,0,0,0));
    filter: blur(6px); pointer-events: none; z-index: 0;
  }
  
  .hinta-osio .hinta-laatikko::before{
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events:none;
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 28%);
    mix-blend-mode: overlay; z-index: 1;
  }
  
  .hinta-osio .hinta-laatikko model-viewer{
    transform: translateZ(0) rotateX(3deg) rotateY(-5deg);
    transition: transform .6s cubic-bezier(.22,.61,.36,1);
    will-change: transform;
    position: relative; z-index: 2; 
  }
  .hinta-osio .hinta-laatikko:hover model-viewer{
    transform: translateZ(26px) rotateX(6deg) rotateY(-8deg);
  }
}


@media (max-width: 900px){
  
  .hinta-osio .hinta-laatikko{ position: relative; overflow: visible; }
  .hinta-osio .hinta-laatikko::after{
    content: ""; position: absolute; left: 10%; right: 10%; bottom: -14px; height: 26px;
    background: radial-gradient(60% 100% at 50% 100%, rgba(0,0,0,.28), rgba(0,0,0,0));
    filter: blur(5px); pointer-events: none; z-index: 0;
  }
  
  .hinta-osio .hinta-laatikko::before{
    box-shadow: 0 16px 40px rgba(0,0,0,.28);    
    border-radius: 14px;                        
  }
  
  .hinta-osio .hinta-laatikko .mobile-glossy{ display:none; }
}


@media (min-width: 901px){
  body.light-mode .hinta-osio .hinta-laatikko::after{ background: radial-gradient(60% 100% at 50% 100%, rgba(13,19,33,.18), rgba(13,19,33,0)); }
}
@media (max-width: 900px){
  body.light-mode .hinta-osio .hinta-laatikko::after{ background: radial-gradient(60% 100% at 50% 100%, rgba(13,19,33,.14), rgba(13,19,33,0)); }
}




@media (max-width: 480px){
  :root{ --space:4vw; --radius:14px; }

  
  body.mobile-theme{ font-size: 17px; line-height: 1.45; }

  
  .corner-image img{ width:140px !important; height:auto !important; }
  .lang-toggle-circle{ width:38px; height:38px; }

  
  .hero{ height:92svh; padding: 8svh 6vw 6svh; }
  .hero-text{ max-width: 92vw; margin: 0 auto; }
  .hero-text h1{ font-size: clamp(2rem, 11vw, 2.8rem); margin-bottom: .25rem; }
  .hero-text p{ font-size: clamp(1rem, 4.2vw, 1.06rem); color:#d9e2f1; }
  body.light-mode .hero-text p{ color:#0d1321; opacity:.9; }
  .hero-buttons-right{ position: static; margin-top: 1rem; display:flex; justify-content:center; }
  .hero-btn-static{ padding:.9rem 1.2rem; border-radius:999px; font-weight:700; }

  
  .chatbot-scroll-btn, .contact-scroll-btn{ bottom: 5svh; }

  
  .proj-grid, .services-grid, .testi-grid{ grid-template-columns: repeat(12,1fr); gap:.9rem; }
  .proj-card, .service-card, .testi-grid .review-card.small{ grid-column: span 12; border-radius: var(--radius); }

  
  .kylkipaneeli .valikko-kohta{ padding: -4rem -4rem; font-size:1.05rem; }

  
  #lineBox, .intro-panel{ display:none !important; }
}


@media (max-width: 768px){
  .kylkipaneeli .valikko-kohta{ padding:.8rem 1rem; }
}

@supports (content-visibility: auto) {
  
  .sivu { contain-intrinsic-block-size: 100vh; }
}


@media (prefers-reduced-motion: reduce) {
  html, .paasivu { scroll-behavior: auto !important; }

  
  *, *::before, *::after { animation: none !important; transition: none !important; }

  
  .intro-panel { transform: none !important; }
  .line-box { transition: none !important; transform: none !important; }
  .bar { animation: none !important; }

  .hero-text h1,
  .hero-text h2,
  .hero-text p { opacity: 1 !important; transform: none !important; filter: none !important; }

  
  .chatbot-scroll-btn,
  .contact-scroll-btn { transform: none !important; }
}





@media (max-width: 900px){
  .kuutiopelle3{ display:none !important; }
}

:root { --safe-bottom: env(safe-area-inset-bottom, 0px); }



 body {
  font-family: 'Verdante', sans-serif;
}


html:focus-within { scroll-behavior: smooth; }


@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}


html { overscroll-behavior: none; }

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body, html {
  height: 100%;
  width: 100%;
  }
 
html, body {
  width: 100%;
  max-width: 100%;
        
}
 
html, body {
  background: #000 !important;
  background-color: #000 !important;
}


.kvStickyArea,
.kvFlexRow {
  background: transparent !important;
}

button:focus,
.footer-link:focus,
.somet-circle:focus {
  outline: none !important;
}


.sivu{
  position: relative;
  width: 100%;
  min-height: 100vh;
  background: inherit;

  
  display: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  
  content-visibility: auto;
  contain-intrinsic-size: 1000px;


  transition: opacity .4s ease;
}


.sivu.active{
  display: block;             
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 0;
}


#paasivu.sivu{
  display: block;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}


#yhteydenotto.sivu{ contain-intrinsic-size: 1600px; }
#projektit.sivu   { contain-intrinsic-size: 2400px; }


footer.alapalkki#alapalkki2{
  position: relative;
  z-index: 3;
}



*:focus { outline: none; }


*:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 6px;
}


@media (hover: hover) {
  *:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
  }
}


button,
[role="button"],
a,
input,
textarea,
select {
  -webkit-tap-highlight-color: transparent;
}


:where(button,
       [role="button"],
       a,
       input[type="button"],
       input[type="submit"],
       .chatbot-scroll-btn,
       .contact-scroll-btn) {
  box-shadow: none !important;
}

html, body { min-height: 100svh; background:#0d1321; }
body.light-mode { background:#ffffff; }
@supports (height: 100dvh){ html, body { min-height: 100dvh; } }





/* --- Jättirivin kuvien muoto: laatikko, ei muna --- */
.jatti-laatikko,
.jatti-laatikko img{
  border-radius: 16px !important;
  clip-path: none !important;
}