/* Tekoälyratkaisut pk-yrityksille.
   Sivukohtaiset osiot ja efektit. Perusrakenne tulee teeman omista
   komponenteista (sv-hero, zig, price-split, timeline), tässä on vain se
   mitä niiden päälle tarvitaan.

   Kaikki liike on transformia ja opacityä. Sumennetut hehkut ovat
   staattisia gradientteja, ei suodattimia, jotta vieritys pysyy sujuvana
   myös puhelimella. */

/* ---------- Hehkut ---------- */
/* Kaksi pehmeää valokehää, jotka antavat tummille osioille syvyyttä.
   pointer-events: none, jotta ne eivät koskaan syö klikkauksia. */
.tk-hehku {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.tk-hehku::before,
.tk-hehku::after {
  content: '';
  position: absolute;
  pointer-events: none;
  z-index: -1;
  border-radius: 50%;
}
.tk-hehku::before {
  width: 46vw; height: 46vw;
  max-width: 620px; max-height: 620px;
  top: -18%; right: -12%;
  background: radial-gradient(circle, rgba(184,155,110,.22) 0%, rgba(184,155,110,0) 68%);
}
.tk-hehku::after {
  width: 38vw; height: 38vw;
  max-width: 520px; max-height: 520px;
  bottom: -22%; left: -10%;
  background: radial-gradient(circle, rgba(143,184,154,.14) 0%, rgba(143,184,154,0) 70%);
}

/* ---------- Kolme aluetta: valintakortit ---------- */
.tk-alueet {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 38px;
}
.tk-alue {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 30px 28px 26px;
  border: 1px solid var(--border, rgba(0,62,51,.14));
  border-radius: var(--radius, 6px);
  background: var(--cream, #F7F2E8);
  overflow: hidden;
  transition: transform .45s cubic-bezier(.22,1,.36,1),
              box-shadow .45s var(--ease), border-color .45s var(--ease);
}
/* Kultainen kajastus nousee alareunasta osoittimen kohdalla. */
.tk-alue::before {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold, #B89B6E), var(--gold-soft, #D4BD93));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s cubic-bezier(.22,1,.36,1);
}
.tk-alue:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 48px rgba(0, 40, 33, .13);
  border-color: rgba(184, 155, 110, .5);
}
.tk-alue:hover::before { transform: scaleX(1); }

.tk-alue-num {
  font-family: 'Fraunces', serif;
  font-size: 2.6rem;
  line-height: 1;
  color: rgba(184, 155, 110, .42);
  margin-bottom: 14px;
}
.tk-alue h3 {
  margin: 0 0 10px;
  font-size: 1.22rem;
  text-transform: none;
  letter-spacing: -.01em;
}
.tk-alue p { margin: 0 0 16px; font-size: .96rem; line-height: 1.6; }
.tk-alue-meta {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--border, rgba(0,62,51,.12));
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.tk-alue-meta span {
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted, #5C6B66);
}
.tk-alue-meta strong {
  font-family: 'Fraunces', serif;
  font-size: 1.14rem;
  font-weight: 400;
  color: var(--green, #003E33);
}

/* ---------- Työkalukatalogi ---------- */
.tk-katalogi { margin-top: 34px; }
.tk-ryhma + .tk-ryhma { margin-top: 40px; }
.tk-ryhma-otsikko {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold, #B89B6E);
}
.tk-ryhma-otsikko::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(184,155,110,.45), transparent);
}

/* Flex eikä grid, jotta vajaa viimeinen rivi keskittyy. Gridissä
   ylijäävät kortit jäisivät vasempaan reunaan. Kolme saraketta:
   ryhmissä on kuusi korttia, joten rivit menevät tasan 3 + 3. */
.tk-kortit {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}
.tk-kortti {
  flex: 0 1 calc((100% - 2 * 16px) / 3);
  min-width: 250px;
}
.tk-kortti {
  position: relative;
  padding: 22px 22px 20px;
  border: 1px solid var(--border, rgba(0,62,51,.14));
  border-radius: var(--radius, 6px);
  background: #fff;
  transition: transform .35s cubic-bezier(.22,1,.36,1),
              box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.tk-kortti:hover {
  transform: translateY(-4px);
  border-color: rgba(184, 155, 110, .55);
  box-shadow: 0 16px 34px rgba(0, 40, 33, .10);
}
.tk-kortti h4 {
  margin: 0 0 8px;
  font-size: 1.02rem;
  text-transform: none;
  letter-spacing: -.005em;
  color: var(--green, #003E33);
}
.tk-kortti p { margin: 0; font-size: .9rem; line-height: 1.55; color: var(--muted, #5C6B66); }

/* ---------- Kustannuspaneeli ---------- */
.tk-kustannus {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 44px;
  align-items: center;
}
.tk-luvut {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 30px 32px;
  border-radius: var(--radius, 6px);
  background: rgba(0, 0, 0, .2);
  border: 1px solid rgba(247, 242, 232, .12);
}
.tk-luku-rivi {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(247, 242, 232, .1);
}
.tk-luku-rivi:last-child { border-bottom: 0; }
.tk-luku-rivi span { font-size: .93rem; color: rgba(247, 242, 232, .7); }
.tk-luku-rivi strong {
  font-family: 'Fraunces', serif;
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--cream, #F7F2E8);
  white-space: nowrap;
}
.tk-luku-rivi--summa strong { color: var(--gold-soft, #D4BD93); font-size: 1.9rem; }

/* ---------- Virheet ---------- */
/* Viisi virhettä kolmessa sarakkeessa: 3 + 2, ja kaksi viimeistä
   keskitettynä. */
.tk-virheet {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
  margin-top: 32px;
}
.tk-virhe {
  flex: 0 1 calc((100% - 2 * 18px) / 3);
  min-width: 280px;
}
.tk-virhe {
  position: relative;
  padding: 24px 24px 22px 58px;
  border-radius: var(--radius, 6px);
  background: var(--cream, #F7F2E8);
  border: 1px solid var(--border, rgba(0,62,51,.12));
}
.tk-virhe::before {
  content: '\00d7';
  position: absolute;
  top: 22px; left: 22px;
  width: 24px; height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(201, 138, 107, .16);
  color: #A85F3E;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
}
.tk-virhe h4 {
  margin: 0 0 6px;
  font-size: 1rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--green, #003E33);
}
.tk-virhe p { margin: 0; font-size: .92rem; line-height: 1.55; color: var(--muted, #5C6B66); }

/* ---------- Kenelle sopii ---------- */
.tk-sopiiko {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-top: 32px;
}
.tk-sarake {
  padding: 30px 30px 26px;
  border-radius: var(--radius, 6px);
  border: 1px solid var(--border, rgba(0,62,51,.14));
}
.tk-sarake--kylla { background: rgba(143, 184, 154, .1); border-color: rgba(143, 184, 154, .4); }
.tk-sarake--ei    { background: rgba(0, 62, 51, .04); }
.tk-sarake h3 {
  margin: 0 0 16px;
  font-size: 1.1rem;
  text-transform: none;
  letter-spacing: 0;
}
.tk-sarake ul { margin: 0; padding-left: 20px; }
.tk-sarake li { margin-bottom: 10px; font-size: .95rem; line-height: 1.55; }
.tk-sarake li::marker { color: var(--gold, #B89B6E); }

/* ---------- Widgetin kehys ---------- */
.tk-testi-kehys { max-width: 860px; margin: 0 auto; }

/* ---------- Liikkuva nauha ---------- */
.tk-nauha {
  padding: 26px 0;
  border-top: 1px solid var(--border, rgba(0,62,51,.12));
  border-bottom: 1px solid var(--border, rgba(0,62,51,.12));
  background: var(--cream-soft, #EFE8DA);
}
.tk-nauha .marquee-track { gap: 54px; }
.tk-nauha span {
  font-family: 'Fraunces', serif;
  font-size: 1.32rem;
  color: rgba(0, 62, 51, .42);
  white-space: nowrap;
}
.tk-nauha span::after {
  content: '\00b7';
  margin-left: 54px;
  color: var(--gold, #B89B6E);
}

@media (max-width: 900px) {
  .tk-alueet { grid-template-columns: 1fr; }
  .tk-kustannus { grid-template-columns: 1fr; gap: 26px; }
  .tk-sopiiko { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .tk-alue { padding: 24px 22px 22px; }
  .tk-luvut { padding: 24px 22px; }
  .tk-luku-rivi strong { font-size: 1.3rem; }
  .tk-luku-rivi--summa strong { font-size: 1.6rem; }
  .tk-nauha span { font-size: 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .tk-alue, .tk-kortti { transition: none; }
  .tk-alue:hover, .tk-kortti:hover { transform: none; }
  .tk-nauha .marquee-track { animation: none; }
}

/* Kelluva lappu istuu kortin oikean yläkulman päällä. Ilman tätä pitkä
   otsikko katoaisi sen alle. */
.puro-tekoaly-sivu .sv-visual-card .sv-visual-label {
  display: block;
  padding-right: 130px;
}
@media (max-width: 900px) {
  .puro-tekoaly-sivu .sv-visual-card .sv-visual-label { padding-right: 0; }
}

/* Teeman price-split on kahdelle kortille. Tällä sivulla niitä on kolme,
   joten kolmas rivittyisi yksin omalle rivilleen. */
.puro-tekoaly-sivu .price-split {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 1000px) {
  .puro-tekoaly-sivu .price-split { grid-template-columns: 1fr; }
}

/* ---------- UKK ---------- */
/* Teeman .faq-grid on kaksipalstainen tekstiasettelu, ei korttiruudukko.
   Kysymykset kuuluvat yhteen palstaan allekkain. */
.tk-ukk {
  max-width: 820px;
  margin: 0 auto;
}

/* ---------- Yleissääntö vajaille riveille ---------- */
/* justify-content ei riitä CSS-gridissä, jonka sarakkeet ovat fr-yksikköä:
   ne täyttävät koko leveyden, joten ylijäävä laatikko jää vasempaan
   reunaan. Siksi flex, jossa vajaa rivi keskittyy itsestään. */
.puro-tekoaly-sivu .benefit-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 22px;
}
.puro-tekoaly-sivu .benefit {
  flex: 0 1 calc((100% - 2 * 22px) / 3);
  min-width: 260px;
}
.puro-tekoaly-sivu .tk-alueet { justify-content: center; }