/* =============================================================================
   WEB LAB — styles.css
   Sisältö:
   00  Tokenit
   01  Reset & perusta
   02  Typografia
   03  Layout-apurit
   04  Painikkeet & linkit
   05  Reveal-animaatiot
   06  Header & navigaatio
   07  Hero + mockupit
   08  Marquee
   09  Lupaus & luvut
   10  Ongelma → ratkaisu (ennen/nyt)
   11  Palvelut
   12  Prosessi
   13  Referenssit
   14  Hinnasto
   15  Ylläpito
   16  FAQ
   17  CTA
   18  Yhteystiedot & lomake
   19  Footer
   20  Reduced motion & print
   ========================================================================== */

/* ---------------------------------------------------------------- 00 TOKENIT */
:root{
  /* Väripaletti — musta, valkoinen, harmaat + yksi hillitty aksentti */
  --bg:            #ffffff;
  --bg-soft:       #f5f5f3;
  --bg-softer:     #fafaf9;
  --ink:           #0b0b0c;
  --ink-2:         #56565b;   /* 7.3:1 valkoisella */
  --ink-3:         #8a8a90;   /* vain suurille/koristeellisille */
  --line:          #e6e5e2;
  --line-strong:   #d3d2ce;
  --accent:        #0f3d33;   /* syvä petroli — vain yksityiskohdissa */
  --mark-cut:      #ffffff;

  /* Typografia */
  --font-display: "Inter Tight", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body:    "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Spacing */
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --wrap:   1320px;
  --section-y: clamp(5.5rem, 11vw, 10.5rem);

  /* Muut */
  --radius:   10px;
  --radius-s: 6px;
  --header-h: 68px;
  --shadow-sm: 0 1px 2px rgba(11,11,12,.05);
  --shadow:    0 1px 2px rgba(11,11,12,.04), 0 14px 34px -18px rgba(11,11,12,.22);
  --shadow-lg: 0 2px 4px rgba(11,11,12,.04), 0 32px 70px -30px rgba(11,11,12,.30);
  --ease:      cubic-bezier(.22,.61,.36,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
  --t-fast: 160ms;
  --t:      260ms;
}

@media (min-width: 1024px){ :root{ --header-h: 80px; } }

/* ------------------------------------------------------ 01 RESET & PERUSTA */
*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:1.0625rem;
  line-height:1.65;
  font-feature-settings:"cv11","ss01";
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.is-locked{ overflow:hidden; }

img,svg{ display:block; max-width:100%; }
button,input,textarea,select{ font:inherit; color:inherit; }
ul,ol,dl,dd{ margin:0; padding:0; list-style:none; }
p{ margin:0; }
figure{ margin:0; }

a{ color:inherit; text-decoration:none; }

section[id], [id]{ scroll-margin-top: calc(var(--header-h) + 24px); }

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:2px;
}

.skip{
  position:fixed; top:0; left:0; z-index:200;
  transform:translateY(-120%);
  background:var(--ink); color:#fff;
  padding:.85rem 1.35rem; font-size:.9375rem; font-weight:500;
  transition:transform var(--t-fast) var(--ease);
}
.skip:focus{ transform:translateY(0); }

::selection{ background:var(--ink); color:#fff; }

/* --------------------------------------------------------- 02 TYPOGRAFIA */
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  margin:0;
  letter-spacing:-.03em;
  line-height:1.06;
  text-wrap:balance;
}

.h-lg{ font-size:clamp(2.125rem, 5.2vw, 4.25rem); }
.h-md{ font-size:clamp(1.75rem, 3.6vw, 3rem); letter-spacing:-.025em; }

.lead{
  font-size:clamp(1.0625rem, 1.35vw, 1.25rem);
  color:var(--ink-2);
  max-width:52ch;
  line-height:1.6;
  text-wrap:pretty;
}
.lead--narrow{ max-width:46ch; }

.eyebrow{
  display:flex; align-items:flex-start; gap:.6rem;
  font-size:.75rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-2);
}
.eyebrow--light{ color:rgba(255,255,255,.72); }
.eyebrow__num{
  font-family:var(--font-display);
  color:var(--ink); font-size:.75rem;
  padding-right:.6rem; margin-right:.1rem;
  border-right:1px solid var(--line-strong);
}
.eyebrow--light .eyebrow__num{ color:#fff; border-color:rgba(255,255,255,.28); }
.eyebrow__dot{
  width:6px; height:6px; background:var(--accent); flex:none;
  margin-top:.45em;   /* linjaan ensimmäisen tekstirivin kanssa */
}
.eyebrow--light .eyebrow__dot{ background:#fff; }

em{ font-style:normal; color:var(--ink-2); }

.tag{
  display:inline-block;
  font-size:.6875rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  padding:.28rem .5rem;
  border:1px solid var(--line-strong);
  color:var(--ink-2);
}

/* ----------------------------------------------------- 03 LAYOUT-APURIT */
.wrap{
  width:min(100% - (var(--gutter) * 2), var(--wrap));
  margin-inline:auto;
}

/* ------------------------------------------------- 04 PAINIKKEET & LINKIT */
.btn{
  --btn-bg:transparent; --btn-fg:var(--ink); --btn-bd:var(--ink);
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  min-height:48px;
  padding:.85rem 1.4rem;
  background:var(--btn-bg); color:var(--btn-fg);
  border:1px solid var(--btn-bd);
  font-family:var(--font-display);
  font-size:.9375rem; font-weight:600; letter-spacing:-.005em;
  cursor:pointer;
  transition:background var(--t) var(--ease), color var(--t) var(--ease),
             border-color var(--t) var(--ease), transform var(--t) var(--ease-out);
}
.btn__arrow{ width:16px; height:16px; flex:none; transition:transform var(--t) var(--ease-out); }
.btn:hover .btn__arrow{ transform:translateX(4px); }

.btn--solid{ --btn-bg:var(--ink); --btn-fg:#fff; --btn-bd:var(--ink); }
.btn--solid:hover{ --btn-bg:#26262a; --btn-bd:#26262a; }

.btn--light{ --btn-bg:#fff; --btn-fg:var(--ink); --btn-bd:#fff; }
.btn--light:hover{ --btn-bg:#ececeb; --btn-bd:#ececeb; }

.btn--outline{ --btn-bg:transparent; --btn-fg:var(--ink); --btn-bd:var(--line-strong); }
.btn--outline:hover{ --btn-bd:var(--ink); --btn-bg:var(--bg-soft); }

.btn--ghost{ --btn-bd:transparent; padding-inline:.6rem; }
.btn--ghost::after{
  content:""; position:absolute; left:.6rem; right:.6rem; bottom:.75rem;
  height:1px; background:currentColor;
  transform:scaleX(1); transform-origin:right;
  transition:transform var(--t) var(--ease);
}
.btn--ghost:hover::after{ transform:scaleX(0); transform-origin:left; }

.btn--ghost-light{ --btn-fg:#fff; --btn-bd:rgba(255,255,255,.3); }
.btn--ghost-light:hover{ --btn-bd:#fff; --btn-bg:rgba(255,255,255,.08); }

.btn--sm{ min-height:40px; padding:.5rem 1rem; font-size:.875rem; }
.btn--lg{ min-height:56px; padding:1rem 1.75rem; font-size:1rem; }
.btn--block{ display:flex; width:100%; }

.link-arrow{
  display:inline-flex; align-items:center; gap:.45rem;
  font-weight:500; font-size:.9375rem;
  padding-bottom:2px;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:100% 1px; background-position:0 100%; background-repeat:no-repeat;
  transition:background-size var(--t) var(--ease);
}
.link-arrow svg{ width:15px; height:15px; transition:transform var(--t) var(--ease-out); }
.link-arrow:hover{ background-size:0% 1px; }
.link-arrow:hover svg{ transform:translateX(4px); }

/* -------------------------------------------------- 05 REVEAL-ANIMAATIOT */
.js [data-reveal],
.js [data-reveal-group] > *{
  opacity:0;
  transform:translate3d(0,20px,0);
  transition:opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.js [data-reveal].is-in,
.js [data-reveal-group].is-in > *{
  opacity:1; transform:none;
}
.js [data-reveal-group].is-in > *{
  transition-delay:calc(var(--i, 0) * 70ms);
}

/* ------------------------------------------------ 06 HEADER & NAVIGAATIO */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  background:transparent;
  transition:background var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.site-header::before{
  content:""; position:absolute; inset:0;
  background:rgba(255,255,255,.78);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
  opacity:0; transition:opacity var(--t) var(--ease);
  transform:translateZ(0);   /* vakaa komposiittikerros sumennukselle */
}
.site-header.is-stuck::before{ opacity:1; }

/* Ikkunan koon muuttuessa sumennus pois: raskain uudelleenpiirrettävä
   kerros, joka voi jättää vanhan ruudun näkyviin resize-tilanteessa. */
body.is-resizing .site-header::before{
  -webkit-backdrop-filter:none; backdrop-filter:none;
  background:rgba(255,255,255,.94);
}

.site-header__inner{
  position:relative;
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  height:var(--header-h);
  transition:height var(--t) var(--ease);
}
.site-header.is-stuck .site-header__inner{ height:calc(var(--header-h) - 10px); }

.site-header__progress{
  position:absolute; left:0; bottom:0; height:2px; width:100%;
  background:var(--ink); transform:scaleX(var(--p,0)); transform-origin:left;
  opacity:0; transition:opacity var(--t) var(--ease);
}
.site-header.is-stuck .site-header__progress{ opacity:1; }

.logo{
  display:inline-flex; align-items:center; gap:.6rem;
  color:var(--ink);
  font-family:var(--font-display); font-weight:700;
  font-size:1rem; letter-spacing:.02em; text-transform:uppercase;
}
.logo__mark{ width:26px; height:26px; flex:none; }
.logo__word{ white-space:nowrap; }

.nav{ display:none; }
@media (min-width: 1024px){
  .nav{ display:flex; align-items:center; gap:2.25rem; }
  .nav__list{ display:flex; align-items:center; gap:1.75rem; }
  .nav__list a{
    position:relative;
    font-size:.9375rem; font-weight:500; color:var(--ink-2);
    padding-block:.4rem;
    transition:color var(--t-fast) var(--ease);
  }
  .nav__list a::after{
    content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
    background:var(--ink);
    transform:scaleX(0); transform-origin:right;
    transition:transform var(--t) var(--ease);
  }
  .nav__list a:hover{ color:var(--ink); }
  .nav__list a:hover::after,
  .nav__list a.is-active::after{ transform:scaleX(1); transform-origin:left; }
  .nav__list a.is-active{ color:var(--ink); }
}

.burger{
  position:relative; width:44px; height:44px; margin-right:-10px;
  display:grid; place-content:center; gap:6px;
  background:none; border:0; cursor:pointer;
}
@media (min-width:1024px){ .burger{ display:none; } }
.burger__line{
  display:block; width:22px; height:1.5px; background:var(--ink);
  transition:transform var(--t) var(--ease), opacity var(--t-fast) var(--ease);
}
.burger[aria-expanded="true"] .burger__line:first-child{ transform:translateY(3.75px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__line:last-child{ transform:translateY(-3.75px) rotate(-45deg); }

.mobile-menu{
  position:fixed; inset:0; z-index:99;
  background:var(--bg);
  padding:calc(var(--header-h) + 2.5rem) var(--gutter) calc(env(safe-area-inset-bottom) + 2rem);
  display:flex; flex-direction:column; justify-content:space-between;
  animation:menuIn .35s var(--ease-out) both;
}
.mobile-menu[hidden]{ display:none; }
@keyframes menuIn{ from{ opacity:0; transform:translateY(-8px);} to{ opacity:1; transform:none;} }

.mobile-menu__list li{ border-bottom:1px solid var(--line); }
.mobile-menu__list a{
  display:flex; align-items:baseline; gap:1rem;
  padding:1.1rem 0;
  font-family:var(--font-display); font-size:1.75rem; font-weight:600; letter-spacing:-.03em;
}
.mobile-menu__num{
  font-size:.75rem; font-weight:500; letter-spacing:.1em; color:var(--ink-2);
}
.mobile-menu__foot{ padding-top:2rem; }
.mobile-menu__meta{
  margin-top:1.15rem; text-align:center; font-size:.9375rem; color:var(--ink-2);
  display:flex; gap:.6rem; justify-content:center;
}
.mobile-menu__meta a{ text-decoration:underline; text-underline-offset:3px; }

/* -------------------------------------------------- 07 HERO + MOCKUPIT */
.hero{
  position:relative;
  padding-top:calc(var(--header-h) + clamp(2.5rem, 7vw, 5rem));
  padding-bottom:clamp(3.5rem, 8vw, 6rem);
  overflow:hidden;
}
.hero::before{ /* hienovarainen ruudukko taustalla */
  content:""; position:absolute; inset:0; z-index:-1;
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size:clamp(60px,8vw,120px) clamp(60px,8vw,120px);
  -webkit-mask-image:radial-gradient(120% 90% at 70% 10%, #000 0%, transparent 72%);
  mask-image:radial-gradient(120% 90% at 70% 10%, #000 0%, transparent 72%);
  opacity:.55;
}
.hero__inner{ display:grid; gap:clamp(3rem,7vw,4.5rem); align-items:center; }
@media (min-width:1024px){
  .hero__inner{ grid-template-columns:minmax(0,1.02fr) minmax(0,1fr); gap:clamp(2rem,4vw,4rem); }
}

.hero__eyebrow{ margin-bottom:clamp(1.5rem,3vw,2.25rem); }

.hero__title{
  font-size:clamp(2.75rem, 8.6vw, 7rem);
  font-weight:700;
  line-height:.98;
  letter-spacing:-.045em;
  margin-bottom:clamp(1.5rem,3vw,2.25rem);
}
@media (min-width:1024px){ .hero__title{ font-size:clamp(3.5rem, 5.4vw, 6.25rem); } }
.hero__title .line{ display:block; overflow:hidden; padding-bottom:.06em; margin-bottom:-.06em; }
.hero__title .line__in{ display:block; }
.js .hero__title .line__in{ transform:translate3d(0,105%,0); }
.js .hero.is-ready .hero__title .line__in{
  transform:none;
  transition:transform .95s var(--ease-out);
}
.js .hero.is-ready .line:nth-child(2) .line__in{ transition-delay:.08s; }
.js .hero.is-ready .line:nth-child(3) .line__in{ transition-delay:.16s; }
.hero__title .line:last-child .line__in{ color:var(--ink-2); }

.hero__lead{
  font-size:clamp(1.0625rem, 1.45vw, 1.3125rem);
  color:var(--ink-2); max-width:46ch; line-height:1.6; text-wrap:pretty;
}
.js .hero__lead,
.js .hero__actions,
.js .hero__note,
.js .hero__visual{ opacity:0; transform:translate3d(0,16px,0); }
.js .hero.is-ready .hero__lead,
.js .hero.is-ready .hero__actions,
.js .hero.is-ready .hero__note,
.js .hero.is-ready .hero__visual{
  opacity:1; transform:none;
  transition:opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
.js .hero.is-ready .hero__lead{ transition-delay:.22s; }
.js .hero.is-ready .hero__actions{ transition-delay:.30s; }
.js .hero.is-ready .hero__note{ transition-delay:.36s; }
.js .hero.is-ready .hero__visual{ transition-delay:.20s; }

.hero__actions{
  display:flex; flex-wrap:wrap; gap:.75rem;
  margin-top:clamp(1.75rem,3vw,2.5rem);
}
.hero__note{
  margin-top:1.15rem;
  font-size:.875rem; color:var(--ink-2);
}

.hero__scroll{
  display:none;
}
@media (min-width:1024px){
  .hero__scroll{
    position:absolute; left:var(--gutter); bottom:1.75rem;
    display:inline-flex; align-items:center; gap:.6rem;
    font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2);
  }
  .hero__scroll svg{ width:11px; height:22px; animation:scrollHint 2.4s var(--ease) infinite; }
}
@keyframes scrollHint{
  0%,100%{ transform:translateY(0); opacity:.55; }
  50%{ transform:translateY(4px); opacity:1; }
}

/* --- Stage: selain + puhelin + chipit --- */
.stage{
  position:relative;
  padding-bottom:clamp(2rem,5vw,3.5rem);
  padding-left:clamp(0rem,3vw,2.5rem);
}

.browser{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
}
.browser--hero{ box-shadow:var(--shadow-lg); }
.browser__bar{
  display:flex; align-items:center; gap:.75rem;
  height:34px; padding-inline:.75rem;
  background:var(--bg-softer);
  border-bottom:1px solid var(--line);
}
.browser__dots{ display:flex; gap:5px; flex:none; }
.browser__dots i{ width:7px; height:7px; border-radius:50%; background:var(--line-strong); display:block; }
.browser__url{
  flex:1; text-align:center;
  font-size:.6875rem; color:var(--ink-3); letter-spacing:.01em;
  background:#fff; border:1px solid var(--line);
  border-radius:99px; padding:.15rem .75rem;
  max-width:220px; margin-inline:auto;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.browser__view{ aspect-ratio:4/3; background:#fff; overflow:hidden; }
@media (min-width:640px){ .browser__view{ aspect-ratio:16/11; } }

/* Abstrakti sivustonäkymä hero-mockupissa */
.mock{ position:relative; height:100%; padding:clamp(.9rem,2.2vw,1.4rem); display:flex; flex-direction:column; }
.mock__nav{ display:flex; align-items:center; gap:.6rem; margin-bottom:clamp(1.1rem,3vw,2rem); }
.mock__logo{ width:26px; height:9px; background:var(--ink); }
.mock__links{ display:flex; gap:.55rem; margin-left:auto; }
.mock__links i{ display:block; width:26px; height:5px; background:var(--line-strong); }
.mock__pill{ width:44px; height:16px; background:var(--ink); border-radius:99px; }
.mock__hero{ display:flex; flex-direction:column; gap:.5rem; }
.mock__h{ height:clamp(14px,2.6vw,20px); background:var(--ink); }
.mock__h--1{ width:78%; }
.mock__h--2{ width:52%; background:var(--ink-3); }
.mock__p{ height:6px; width:64%; background:var(--line-strong); margin-top:.35rem; }
.mock__p--short{ width:44%; }
.mock__cta{
  width:96px; height:26px; background:var(--ink); border-radius:2px; margin-top:.85rem;
  transition:transform var(--t) var(--ease);
}
.mock__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; margin-top:auto; }
.mock__grid span{ display:block; aspect-ratio:4/3; background:var(--bg-soft); border:1px solid var(--line); }

.mock__cursor{
  position:absolute; left:22%; top:62%;
  width:14px; height:18px;
  background:var(--ink);
  clip-path:polygon(0 0, 0 100%, 28% 76%, 46% 100%, 62% 90%, 44% 64%, 100% 58%);
  animation:cursorPath 9s var(--ease) infinite;
}
@keyframes cursorPath{
  0%{   transform:translate(60px,40px); opacity:0; }
  10%{  transform:translate(40px,20px); opacity:1; }
  32%{  transform:translate(6px,4px);   opacity:1; }
  38%{  transform:translate(4px,2px) scale(.86); }
  44%{  transform:translate(6px,4px) scale(1); }
  80%{  transform:translate(6px,4px);   opacity:1; }
  100%{ transform:translate(60px,40px); opacity:0; }
}

.phone{
  position:absolute; left:0; bottom:0;
  width:clamp(84px,11vw,124px);
  background:#fff; border:1px solid var(--line);
  border-radius:14px; padding:6px;
  box-shadow:var(--shadow-lg);
  animation:float 7s var(--ease) infinite;
}
.phone__screen{
  aspect-ratio:9/17.5; background:var(--bg-softer);
  border-radius:8px; padding:10px 8px;
  display:flex; flex-direction:column; gap:6px;
}
.phone__bar{ height:4px; width:60%; background:var(--ink); }
.phone__h{ height:8px; width:100%; background:var(--ink-3); margin-top:6px; }
.phone__h--2{ width:70%; }
.phone__block{ flex:1; background:var(--line); margin-top:4px; }
.phone__cta{ height:14px; background:var(--ink); border-radius:2px; }

.chip{
  position:absolute;
  display:inline-flex; align-items:center; gap:.45rem;
  background:#fff; border:1px solid var(--line);
  box-shadow:var(--shadow);
  padding:.5rem .75rem;
  font-size:.8125rem; font-weight:500; white-space:nowrap;
  border-radius:var(--radius-s);
}
.chip svg{ width:14px; height:14px; color:var(--accent); }
.chip--1{ right:-.5rem; top:16%; animation:float 6s var(--ease) infinite; }
.chip--2{ right:8%; bottom:.5rem; animation:float 6s var(--ease) .8s infinite; }
@media (max-width:520px){
  .chip--1{ right:-.25rem; top:8%; }
  .chip--2{ right:2%; bottom:0; }
}
.chip__pulse{
  width:8px; height:8px; border-radius:50%; background:var(--accent);
  position:relative;
}
.chip__pulse::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  border:1px solid var(--accent);
  animation:pulse 2.4s var(--ease) infinite;
}
@keyframes pulse{
  0%{ transform:scale(1); opacity:.8; }
  100%{ transform:scale(2.6); opacity:0; }
}
@keyframes float{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-7px); }
}

/* ------------------------------------------------------------ 08 MARQUEE */
.marquee{
  border-block:1px solid var(--line);
  padding-block:1.15rem;
  overflow:hidden;
  background:var(--bg);
}
.marquee__track{
  display:flex; width:max-content;
  animation:marquee 42s linear infinite;
}
.marquee__set{ display:flex; align-items:center; }
.marquee__set b{
  font-family:var(--font-display);
  font-size:clamp(.9375rem,1.6vw,1.125rem);
  font-weight:500; letter-spacing:-.01em;
  color:var(--ink-2);
  white-space:nowrap;
}
.marquee__set i{ display:block; width:5px; height:5px; background:var(--accent); margin-inline:clamp(1.25rem,3vw,2.5rem); flex:none; }
@keyframes marquee{ to{ transform:translate3d(-50%,0,0); } }
.marquee:hover .marquee__track{ animation-play-state:paused; }

/* ------------------------------------------------- 09 LUPAUS & LUVUT */
.promise{ padding-block:var(--section-y); }
.promise__inner{ display:grid; gap:clamp(2rem,4vw,3rem); }
@media (min-width:900px){
  .promise__inner{
    grid-template-columns:repeat(12,1fr);
    align-items:start;
  }
  .promise__inner > .eyebrow{ grid-column:1 / -1; }
  .promise__title{ grid-column:1 / 8; }
  .promise__side{ grid-column:9 / -1; padding-top:.6rem; }
  .stats{ grid-column:1 / -1; }
}
.promise__title{ max-width:22ch; }
.promise__side p{ color:var(--ink-2); font-size:.9375rem; margin-bottom:1.25rem; }
.trust{ display:grid; gap:.55rem; margin-bottom:1.25rem; }
.trust li{
  position:relative; padding-left:1.5rem;
  font-size:.9375rem; line-height:1.45;
}
.trust li::before{
  content:""; position:absolute; left:.1rem; top:.42em;
  width:9px; height:5px;
  border-left:1.5px solid var(--accent); border-bottom:1.5px solid var(--accent);
  transform:rotate(-45deg);
}

.stats{
  display:grid; gap:1px;
  background:var(--line);
  border-block:1px solid var(--line);
  margin-top:clamp(2rem,4vw,3.5rem);
  grid-template-columns:1fr;
}
@media (min-width:600px){ .stats{ grid-template-columns:1fr 1fr; } }
@media (min-width:1024px){ .stats{ grid-template-columns:repeat(4,1fr); } }
.stat{ background:var(--bg); padding:clamp(1.5rem,3vw,2.25rem) clamp(1.25rem,2vw,2rem); }
.stat__num{
  font-family:var(--font-display);
  font-size:clamp(2.25rem,4.5vw,3.5rem);
  font-weight:600; letter-spacing:-.045em; line-height:1;
  font-variant-numeric:tabular-nums;
  margin-bottom:.7rem;
}
.stat__unit{ font-size:.4em; color:var(--ink-3); letter-spacing:-.01em; }
.stat dd{ color:var(--ink-2); font-size:.9375rem; line-height:1.5; max-width:30ch; }

/* ------------------------------------- 10 ONGELMA → RATKAISU (ENNEN/NYT) */
.problem{ padding-block:var(--section-y); background:var(--bg-soft); }
.problem__head{ display:grid; gap:1.25rem; margin-bottom:clamp(2.5rem,5vw,4rem); }
@media (min-width:1024px){
  .problem__head{ grid-template-columns:repeat(12,1fr); align-items:end; }
  .problem__head .eyebrow{ grid-column:1 / -1; }
  .problem__head h2{ grid-column:1 / 7; }
  .problem__head .lead{ grid-column:8 / -1; padding-bottom:.4rem; }
}
.problem__head h2{ max-width:14ch; }

.compare{ margin-bottom:clamp(2.5rem,5vw,4rem); }
.compare__viewer{
  position:relative;
  border:1px solid var(--line-strong);
  border-radius:var(--radius);
  overflow:hidden;
  background:#fff;
  box-shadow:var(--shadow);
  aspect-ratio:4/3;
  --pos:52%;
  touch-action:pan-y;
}
@media (min-width:768px){ .compare__viewer{ aspect-ratio:21/9; } }
.ba__layer{ position:absolute; inset:0; }
.ba__layer--old{ clip-path:inset(0 calc(100% - var(--pos)) 0 0); z-index:2; }
.ba__divider{
  position:absolute; top:0; bottom:0; left:var(--pos); z-index:3;
  width:2px; background:var(--ink); transform:translateX(-1px);
  pointer-events:none;
}
.ba__divider::after{
  content:""; position:absolute; top:50%; left:50%;
  width:44px; height:44px; transform:translate(-50%,-50%);
  background:var(--ink); border-radius:50%;
  box-shadow:0 0 0 4px rgba(255,255,255,.85);
}
.ba__divider::before{
  content:""; position:absolute; top:50%; left:50%; z-index:1;
  width:16px; height:8px; transform:translate(-50%,-50%);
  background:
    linear-gradient(to right, #fff 0 2px, transparent 2px 6px, #fff 6px 8px) no-repeat left center/8px 8px,
    linear-gradient(to right, #fff 0 2px, transparent 2px 6px, #fff 6px 8px) no-repeat right center/8px 8px;
  clip-path:polygon(0 50%, 35% 0, 35% 100%, 65% 0, 65% 100%, 100% 50%);
}
.ba__badge{
  position:absolute; bottom:.75rem; z-index:4;
  font-size:.6875rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  padding:.3rem .55rem; background:rgba(255,255,255,.94); border:1px solid var(--line-strong);
  color:var(--ink);
}
.ba__badge--old{ left:.75rem; }
.ba__badge--new{ right:.75rem; }
.ba__range{
  position:absolute; inset:0; z-index:5;
  width:100%; height:100%; margin:0;
  opacity:0; cursor:ew-resize;
  -webkit-appearance:none; appearance:none; background:transparent;
}
.ba__range:focus-visible{ opacity:.001; outline:2px solid var(--accent); outline-offset:-2px; }

/* Uusi sivusto (pohjakerros) — pienoismalli oikeasta sivustosta */
.site{ height:100%; overflow:hidden; }
.site--new{ background:#fff; }

/* Kolme riviä: navi, hero (jäljelle jäävä tila) ja korttirivi.
   minmax(0,1fr) pitää huolen siitä, ettei kuvitus kasvata korkeutta. */
.nsite{
  height:100%; display:grid; grid-template-rows:auto minmax(0,1fr) auto;
  padding:clamp(.7rem,1.8vw,1.6rem);
  font-family:var(--font-body); color:var(--ink);
}

.nsite__nav{
  display:flex; align-items:center; gap:clamp(.5rem,1.5vw,1.5rem);
  padding-bottom:clamp(.5rem,1.2vw,1rem);
  border-bottom:1px solid var(--line);
}
.nsite__brand{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(.6rem,1.15vw,1.05rem); letter-spacing:-.02em;
  display:inline-flex; align-items:center; gap:.45em;
}
.nsite__brand i{
  font-style:normal; font-weight:600;
  font-size:.62em; letter-spacing:.16em;
  color:var(--accent);
  border-left:1px solid var(--line-strong); padding-left:.5em;
}
.nsite__links{ display:flex; gap:clamp(.45rem,1.1vw,1.1rem); margin-left:auto; }
.nsite__links span{ font-size:clamp(.45rem,.75vw,.8rem); color:var(--ink-2); }
.nsite__cta{
  background:var(--ink); color:#fff;
  font-size:clamp(.45rem,.72vw,.78rem); font-weight:600;
  padding:.35em .8em; white-space:nowrap;
}

.nsite__hero{
  display:grid; grid-template-columns:1.15fr .85fr;
  gap:clamp(.7rem,2vw,2rem); align-items:center;
  padding-block:clamp(.6rem,1.8vw,1.6rem);
  min-height:0; overflow:hidden;
}
.nsite__copy{ display:flex; flex-direction:column; align-items:flex-start; }
.nsite__eyebrow{
  font-size:clamp(.4rem,.68vw,.72rem); font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--accent);
}
.nsite__h{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(.95rem,3vw,2.75rem); line-height:1.02; letter-spacing:-.04em;
  margin-top:.45em; max-width:11ch;
}
.nsite__lead{
  font-size:clamp(.45rem,.85vw,.92rem); color:var(--ink-2);
  line-height:1.45; margin-top:.7em; max-width:30ch;
}
.nsite__btns{ display:flex; gap:.5em; margin-top:1em; }
.nsite__btn{
  background:var(--ink); color:#fff;
  font-size:clamp(.45rem,.75vw,.8rem); font-weight:600;
  padding:.5em 1em; white-space:nowrap;
}
.nsite__btn--ghost{ background:transparent; color:var(--ink); border:1px solid var(--line-strong); }

.nsite__visual{
  position:relative; height:100%; min-height:0;
  background:var(--bg-soft); overflow:hidden;
}
.nsite__photo{
  width:100%; height:100%; object-fit:cover; object-position:50% 55%; display:block;
}
.nsite__badge{
  position:absolute; left:-.5em; bottom:.8em;
  background:#fff; border:1px solid var(--line);
  box-shadow:var(--shadow-sm);
  font-size:clamp(.4rem,.7vw,.75rem); font-weight:600;
  padding:.4em .7em;
}

.nsite__cards{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(.35rem,.9vw,.9rem); margin-top:auto;
}
.nsite__card{
  display:block; border:1px solid var(--line); background:var(--bg-softer);
  padding:clamp(.4rem,.9vw,.9rem);
  font-size:clamp(.4rem,.68vw,.74rem); color:var(--ink-2); line-height:1.35;
}
.nsite__card b{
  display:block; color:var(--ink); font-weight:600;
  font-size:clamp(.45rem,.8vw,.85rem); margin-bottom:.35em;
}

/* Vanha sivusto (päällyskerros) */
.site--old{ background:#e9e9e4; }
.oldsite{
  height:100%; background:#fff;
  border:3px double #7a7a70;
  margin:6px;
  padding:clamp(.6rem,1.6vw,1.1rem);
  font-family:"Times New Roman", Times, serif;
  color:#101010;
  text-align:center;
  overflow:hidden;
}
.oldsite__title{
  font-size:clamp(1rem,2.4vw,1.6rem); font-weight:700; color:#00007a;
  text-decoration:underline; margin-bottom:.4rem;
}
.oldsite__nav{ font-size:clamp(.625rem,1.2vw,.8125rem); margin-bottom:.6rem; }
.oldsite__nav a{ color:#0000c4; text-decoration:underline; }
.oldsite__text{
  font-size:clamp(.5625rem,1.05vw,.75rem); line-height:1.35; text-align:left;
  margin-bottom:.5rem;
}
.oldsite__text--center{ text-align:center; }
.oldsite__hot{
  font-size:clamp(.5625rem,1.1vw,.8125rem); font-weight:700; color:#c00000;
  margin-bottom:.4rem;
}
.oldsite__table{
  width:100%; border-collapse:collapse; margin-bottom:.5rem;
  font-size:clamp(.5rem,1vw,.6875rem); text-align:left;
}
.oldsite__table td{
  border:1px solid #9a9a90; padding:.15em .35em;
  background:#f4f4ec;
}
.oldsite__table td:last-child{ text-align:right; white-space:nowrap; }
.oldsite__box{
  display:block; height:clamp(28px,6vw,54px); width:70%; margin:0 auto .5rem;
  background:repeating-linear-gradient(45deg,#d8d8d0 0 6px,#c9c9c0 6px 12px);
  border:1px solid #9a9a90;
}
.oldsite__counter{
  font-size:clamp(.5rem,1vw,.6875rem); color:#333;
  border:1px solid #999; display:inline-block; padding:.1rem .4rem; background:#f0f0e8;
}

.compare__hint{
  margin-top:.9rem; font-size:.875rem; color:var(--ink-2); text-align:center;
}

.problem__lists{ display:grid; gap:1px; background:var(--line-strong); border:1px solid var(--line-strong); }
@media (min-width:768px){ .problem__lists{ grid-template-columns:1fr 1fr; } }
.plist{ background:var(--bg-soft); padding:clamp(1.5rem,3vw,2.5rem); }
.plist--new{ background:var(--bg); }
.plist__title{
  font-size:1.0625rem; font-weight:600; letter-spacing:-.01em;
  padding-bottom:1rem; margin-bottom:1.25rem; border-bottom:1px solid var(--line-strong);
}
.plist li{
  position:relative; padding-left:1.75rem; padding-block:.5rem;
  color:var(--ink-2); font-size:.9375rem;
}
.plist li::before{
  content:""; position:absolute; left:0; top:1.05em;
  width:12px; height:1px; background:var(--ink-3);
}
.plist--new li{ color:var(--ink); }
.plist--new li::before{
  top:.85em; left:.1rem;
  width:10px; height:6px; background:none;
  border-left:1.5px solid var(--accent); border-bottom:1.5px solid var(--accent);
  transform:rotate(-45deg);
}

/* ---------------------------------------------------------- 11 PALVELUT */
.services{ padding-block:var(--section-y); }
.services__head{ display:grid; gap:1.25rem; margin-bottom:clamp(2.5rem,5vw,4rem); }
.services__head h2{ max-width:18ch; }

.svc{ border-top:1px solid var(--line); }
.svc__item{
  position:relative;
  display:grid; grid-template-columns:auto 1fr; gap:.35rem 1rem;
  align-items:baseline;
  padding:clamp(1.5rem,3vw,2.25rem) 0;
  border-bottom:1px solid var(--line);
  transition:padding-inline var(--t) var(--ease);
}
.svc__item::before{
  content:""; position:absolute; inset:0 -1.25rem;
  background:var(--bg-soft);
  opacity:0; transition:opacity var(--t) var(--ease);
  z-index:-1;
}
.svc__num{
  font-family:var(--font-display); font-size:.8125rem; font-weight:600;
  color:var(--ink-2); letter-spacing:.06em;
  font-variant-numeric:tabular-nums;
}
.svc__title{ font-size:clamp(1.25rem,2.4vw,1.75rem); letter-spacing:-.025em; }
.svc__text{ grid-column:2; color:var(--ink-2); font-size:.9375rem; max-width:58ch; margin-top:.5rem; }
.svc__arrow{
  display:none; width:20px; height:20px; color:var(--ink);
  transition:transform var(--t) var(--ease-out), opacity var(--t) var(--ease);
}
@media (min-width:900px){
  .svc__item{
    grid-template-columns:5.5rem minmax(12rem,20rem) 1fr 3rem;
    align-items:center; gap:1.5rem;
  }
  .svc__title{ grid-column:2; }
  .svc__text{ grid-column:3; margin-top:0; }
  .svc__arrow{ display:block; grid-column:4; justify-self:end; opacity:0; transform:translateX(-8px); }
  .svc__item:hover{ padding-inline:1.25rem; }
  .svc__item:hover::before{ opacity:1; }
  .svc__item:hover .svc__arrow{ opacity:1; transform:none; }
}

.services__cta{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:1.25rem; margin-top:clamp(2.5rem,4vw,3.5rem);
}
.services__cta p{ font-family:var(--font-display); font-size:clamp(1.125rem,2vw,1.5rem); letter-spacing:-.02em; }

/* ---------------------------------------------------------- 12 PROSESSI */
.process{ padding-block:var(--section-y); background:var(--ink); color:#fff; }
.process .eyebrow{ color:rgba(255,255,255,.66); }
.process .eyebrow__num{ color:#fff; border-color:rgba(255,255,255,.25); }
.process .lead{ color:rgba(255,255,255,.7); }
.process__head{ display:grid; gap:1.25rem; margin-bottom:clamp(3rem,6vw,5rem); }
@media (min-width:1024px){
  .process__head{ grid-template-columns:repeat(12,1fr); align-items:end; }
  .process__head .eyebrow{ grid-column:1 / -1; }
  .process__head h2{ grid-column:1 / 7; }
  .process__head .lead{ grid-column:8 / -1; padding-bottom:.4rem; }
}

.steps{ position:relative; display:grid; gap:2.5rem; }
@media (min-width:900px){ .steps{ grid-template-columns:repeat(4,1fr); gap:2rem; } }
.step{ position:relative; padding-left:3.25rem; }
@media (min-width:900px){ .step{ padding-left:0; padding-top:3.25rem; } }
.step__num{
  font-family:var(--font-display); font-size:.8125rem; font-weight:600;
  letter-spacing:.14em; color:rgba(255,255,255,.5);
  display:block; margin-bottom:.6rem;
}
.step__dot{
  position:absolute; left:0; top:.35rem;
  width:11px; height:11px; background:#fff;
  transform:scale(.001); transition:transform .5s var(--ease-out) calc(var(--i) * 110ms);
}
@media (min-width:900px){ .step__dot{ top:0; left:0; } }
.steps.is-in .step__dot{ transform:scale(1); }
.step__title{ font-size:clamp(1.25rem,2vw,1.625rem); margin-bottom:.7rem; }
.step__text{ color:rgba(255,255,255,.66); font-size:.9375rem; max-width:34ch; }

.steps__line{
  position:absolute; left:5px; top:.35rem; bottom:.35rem; width:1px;
  background:rgba(255,255,255,.2);
}
@media (min-width:900px){
  .steps__line{ left:0; right:0; top:5px; bottom:auto; width:auto; height:1px; }
}
.steps__line i{
  display:block; width:100%; height:100%; background:#fff;
  transform:scaleY(0); transform-origin:top;
  transition:transform 1.2s var(--ease-out);
}
@media (min-width:900px){
  .steps__line i{ transform:scaleX(0); transform-origin:left; }
}
.steps.is-in .steps__line i{ transform:scale(1); }

/* ------------------------------------------------------- 13 REFERENSSIT */
.work{ padding-block:var(--section-y); }
.work__head{ display:grid; gap:1.25rem; margin-bottom:clamp(2.5rem,5vw,4rem); }
@media (min-width:1024px){
  .work__head{ grid-template-columns:repeat(12,1fr); align-items:end; }
  .work__head .eyebrow{ grid-column:1 / -1; }
  .work__head h2{ grid-column:1 / 7; }
  .work__head .lead{ grid-column:8 / -1; padding-bottom:.4rem; }
}

.cases{ display:grid; gap:clamp(2rem,4vw,3rem); }
@media (min-width:760px){ .cases{ grid-template-columns:repeat(2,1fr); } }
.case__media{ overflow:hidden; margin-bottom:1.25rem; }
.case .browser{
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.case:hover .browser{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.case__meta{ display:flex; flex-direction:column; align-items:flex-start; gap:.5rem; }
.case__label{
  display:flex; align-items:center; gap:.6rem;
  font-size:.8125rem; color:var(--ink-2); letter-spacing:.01em;
}
.case__title{
  font-size:clamp(1.375rem,2.4vw,1.875rem);
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 1px; background-position:0 100%; background-repeat:no-repeat;
  transition:background-size var(--t) var(--ease);
  padding-bottom:2px;
}
.case:hover .case__title{ background-size:100% 1px; }
.case__text{ color:var(--ink-2); font-size:.9375rem; max-width:42ch; }

/* --- Demo-sivustot: kaksi eri ilmettä saman rakenteen päällä --- */
.demo{
  position:relative; height:100%; display:flex; flex-direction:column;
  padding:clamp(.85rem,1.9vw,1.35rem);
  isolation:isolate;
}
/* Valokuva demon taustalla. Jos tiedostoa ei ole, se poistetaan JS:llä
   ja alla oleva SVG-kuvitus jää näkyviin — ei rikkinäistä kuvaikonia. */
.demo__photo{
  position:absolute; inset:0; z-index:-2;
  width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .5s var(--ease-out);
}
.demo.has-photo .demo__photo{ opacity:1; }
.demo.has-photo .demo__art{ display:none; }
/* Tummennus, jotta teksti pysyy luettavana kuvan päällä */
.demo.has-photo::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg,
    rgba(6,14,11,.88) 0%, rgba(6,14,11,.66) 42%, rgba(6,14,11,.34) 100%);
}
.demo--solar.has-photo::before{
  background:linear-gradient(180deg,
    rgba(9,10,12,.9) 0%, rgba(9,10,12,.7) 42%, rgba(9,10,12,.38) 100%);
}
.demo__logo{
  font-family:var(--font-display); font-size:.6875rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase;
}
.demo__h{
  font-family:var(--font-display);
  font-size:clamp(1rem,2.3vw,1.5rem); font-weight:600;
  letter-spacing:-.035em; line-height:1.08;
  margin-top:clamp(.7rem,2vw,1.1rem);
}
.demo__btn{
  align-self:flex-start; margin-top:.85rem;
  font-size:.625rem; font-weight:600; letter-spacing:.02em;
  padding:.42rem .85rem; white-space:nowrap;
}
.demo__art{ width:100%; height:auto; display:block; margin-top:auto; }

/* 01 — majoitus: lämmin, tumma metsäsävy */
.demo--stay{ background:#12241f; color:#f0ece3; }
.demo--stay .demo__logo{ opacity:.7; }
.demo--stay .demo__btn{ border:1px solid rgba(240,236,227,.5); color:#f0ece3; }

/* 02 — aurinkoenergia: tumma tekninen ilme + yksi kirkas aksentti */
.demo--solar{ background:#16171a; color:#fff; }
.demo--solar .demo__logo{ color:#ffd60a; }
.demo--solar .demo__h{ font-weight:500; }
.demo--solar .demo__btn{ background:#ffd60a; color:#16171a; border-radius:99px; }
.demo__chips{ display:flex; flex-wrap:wrap; gap:.3rem; margin-top:.6rem; }
.demo__chips span{
  font-size:.5625rem; font-weight:600; letter-spacing:.04em;
  padding:.22rem .5rem; border-radius:99px;
  border:1px solid rgba(255,255,255,.22); color:rgba(255,255,255,.78);
}


/* ---------------------------------------------------------- 14 HINNASTO */
.pricing{ padding-block:var(--section-y); background:var(--bg-soft); }
.pricing__head{ display:grid; gap:1.25rem; margin-bottom:clamp(2.5rem,5vw,4rem); }
@media (min-width:1024px){
  .pricing__head{ grid-template-columns:repeat(12,1fr); align-items:end; }
  .pricing__head .eyebrow{ grid-column:1 / -1; }
  .pricing__head h2{ grid-column:1 / 7; }
  .pricing__head .lead{ grid-column:8 / -1; padding-bottom:.4rem; }
}

.plans{ display:grid; gap:1.25rem; align-items:start; }
@media (min-width:900px){ .plans{ grid-template-columns:repeat(3,1fr); gap:1rem; } }

.plan{
  position:relative;
  display:flex; flex-direction:column;
  background:var(--bg);
  border:1px solid var(--line-strong);
  padding:clamp(1.75rem,3vw,2.5rem);
  transition:transform var(--t) var(--ease-out), box-shadow var(--t) var(--ease-out), border-color var(--t) var(--ease);
}
@media (min-width:900px){
  .plan:hover{ transform:translateY(-5px); box-shadow:var(--shadow); border-color:var(--ink); }
}
.plan--featured{ border-color:var(--ink); border-width:1.5px; }
.plan--dark{ background:var(--ink); color:#fff; border-color:var(--ink); }

.plan__badge{
  position:absolute; top:-.75rem; left:clamp(1.75rem,3vw,2.5rem);
  background:var(--ink); color:#fff;
  font-size:.6875rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  padding:.35rem .7rem;
}
/* Tummalla kortilla merkki käännetään, jotta se erottuu taustastaan */
.plan--dark .plan__badge{
  background:#fff; color:var(--ink);
  box-shadow:0 0 0 1px var(--ink);
}
.plan__head{ padding-bottom:1.5rem; margin-bottom:1.5rem; border-bottom:1px solid var(--line); }
.plan--dark .plan__head{ border-color:rgba(255,255,255,.18); }
.plan__name{
  font-size:.875rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-2); margin-bottom:1.25rem;
}
.plan--dark .plan__name{ color:rgba(255,255,255,.68); }
.plan__price{
  font-family:var(--font-display);
  font-size:clamp(2.5rem,4.5vw,3.5rem); font-weight:600;
  letter-spacing:-.05em; line-height:1;
  font-variant-numeric:tabular-nums;
}
.plan__unit{ font-size:.8125rem; color:var(--ink-2); margin-top:.6rem; }
.plan--dark .plan__unit{ color:rgba(255,255,255,.62); }
.plan__desc{ font-size:.9375rem; color:var(--ink-2); margin-top:1.1rem; max-width:34ch; }
.plan--dark .plan__desc{ color:rgba(255,255,255,.75); }

.plan__list{ display:flex; flex-direction:column; gap:.7rem; margin-bottom:1.75rem; }
.plan__list li{
  position:relative; padding-left:1.55rem;
  font-size:.9375rem; line-height:1.45; color:var(--ink);
}
.plan--dark .plan__list li{ color:rgba(255,255,255,.9); }
.plan__list li::before{
  content:""; position:absolute; left:.15rem; top:.42em;
  width:9px; height:5px;
  border-left:1.5px solid var(--accent); border-bottom:1.5px solid var(--accent);
  transform:rotate(-45deg);
}
.plan--dark .plan__list li::before{ border-color:#fff; }
.plan__note{
  font-size:.8125rem; color:var(--ink-2); margin-top:-1rem; margin-bottom:1.75rem;
  padding-top:1rem; border-top:1px solid var(--line);
}
.plan .btn{ margin-top:auto; }

.pricing__foot{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.5rem;
  margin-top:clamp(2rem,4vw,3rem);
  padding:clamp(1.75rem,3vw,2.5rem);
  background:var(--bg); border:1px solid var(--line-strong);
}
.pricing__foot-title{ font-size:clamp(1.25rem,2.2vw,1.625rem); margin-bottom:.5rem; }
.pricing__foot p{ color:var(--ink-2); font-size:.9375rem; max-width:46ch; }

/* --------------------------------------------------------- 15 YLLÄPITO */
.host{ padding-block:var(--section-y); }
.host__inner{ display:grid; gap:clamp(2rem,4vw,4rem); align-items:center; }
@media (min-width:900px){
  .host__inner{ grid-template-columns:1fr minmax(320px,420px); }
}
.host__copy h2{ margin-block:1.25rem; max-width:16ch; }
.host__copy p{ color:var(--ink-2); max-width:48ch; }
.host__card{
  background:var(--bg-soft);
  border:1px solid var(--line-strong);
  padding:clamp(1.75rem,3vw,2.5rem);
}
.host__label{ font-size:.8125rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2); }
.host__price{
  font-family:var(--font-display); font-size:clamp(2.5rem,5vw,3.25rem);
  font-weight:600; letter-spacing:-.05em; line-height:1; margin-top:1rem;
  font-variant-numeric:tabular-nums;
}
.host__unit{ font-size:.34em; color:var(--ink-2); letter-spacing:-.01em; }
.host__vat{ font-size:.8125rem; color:var(--ink-2); margin-top:.5rem; }
/* Yksi palsta: rivit ovat aina samankorkuisia eikä sanoja katkota,
   ja lista noudattaa samaa rytmiä kuin hinnastokorttien listat. */
.host__list{
  display:grid; gap:.7rem;
  margin-block:1.75rem; padding-top:1.5rem; border-top:1px solid var(--line-strong);
}
.host__list li{
  position:relative; padding-left:1.4rem; font-size:.9375rem; line-height:1.4;
}
.host__list li::before{
  content:""; position:absolute; left:0; top:.42em;
  width:9px; height:5px;
  border-left:1.5px solid var(--accent); border-bottom:1.5px solid var(--accent);
  transform:rotate(-45deg);
}
.host__note{ font-size:.8125rem; color:var(--ink-2); margin-bottom:1.5rem; }

/* --------------------------------------------------------------- 16 FAQ */
.faq{ padding-block:var(--section-y); border-top:1px solid var(--line); }
.faq__inner{ display:grid; gap:clamp(2rem,4vw,3.5rem); }
@media (min-width:1024px){
  .faq__inner{ grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(3rem,6vw,6rem); align-items:start; }
  .faq__head{ position:sticky; top:calc(var(--header-h) + 3rem); }
}
.faq__head{ display:grid; gap:1.25rem; align-content:start; }
.faq__head h2{ max-width:16ch; }
.faq__aside{ font-size:.9375rem; color:var(--ink-2); }
.faq__phones{ display:flex; flex-direction:column; align-items:flex-start; gap:.35rem; margin-top:.75rem; }
.faq__phones .link-arrow{ color:var(--ink); font-weight:600; padding-block:.3rem; }

.acc__item{ border-bottom:1px solid var(--line); }
.acc__item:first-child{ border-top:1px solid var(--line); }
.acc__item h3{ margin:0; font-size:inherit; letter-spacing:normal; }
.acc__btn{
  width:100%; display:flex; align-items:flex-start; justify-content:space-between; gap:1.5rem;
  padding:1.35rem 0; min-height:56px;
  background:none; border:0; cursor:pointer; text-align:left;
  font-family:var(--font-display);
  font-size:clamp(1.0625rem,1.8vw,1.25rem); font-weight:500; letter-spacing:-.02em;
  color:var(--ink);
  transition:color var(--t-fast) var(--ease);
}
.acc__btn:hover{ color:var(--ink-2); }
.acc__icon{
  position:relative; flex:none; width:16px; height:16px; margin-top:.3rem;
}
.acc__icon::before,.acc__icon::after{
  content:""; position:absolute; left:50%; top:50%; background:currentColor;
  transform:translate(-50%,-50%);
  transition:transform var(--t) var(--ease), opacity var(--t) var(--ease);
}
.acc__icon::before{ width:14px; height:1.5px; }
.acc__icon::after{ width:1.5px; height:14px; }
.acc__btn[aria-expanded="true"] .acc__icon::after{ transform:translate(-50%,-50%) rotate(90deg); opacity:0; }

.acc__panel p{
  color:var(--ink-2); font-size:.9375rem; line-height:1.65;
  max-width:60ch; padding-bottom:1.5rem; padding-right:2rem;
}
.acc__panel a{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; }

/* Sulava korkeusanimaatio: 0fr → 1fr.
   Huom: myös sisällön padding pitää animoida nollaan, muuten grid-rata
   ei kutistu täysin. Visibility poistaa suljetun sisällön a11y-puusta. */
.js .acc__panel{
  display:grid; grid-template-rows:0fr; overflow:hidden;
  transition:grid-template-rows .4s var(--ease-out);
}
.js .acc__panel > *{
  min-height:0; overflow:hidden;
  padding-bottom:0;
  visibility:hidden;
  transition:padding-bottom .4s var(--ease-out), visibility 0s linear .4s;
}
.js .acc__panel.is-open{ grid-template-rows:1fr; }
.js .acc__panel.is-open > *{
  padding-bottom:1.5rem;
  visibility:visible;
  transition:padding-bottom .4s var(--ease-out), visibility 0s linear 0s;
}

/* --------------------------------------------------------------- 17 CTA */
.cta{
  padding-block:clamp(5rem,10vw,9rem);
  background:var(--ink); color:#fff;
  position:relative; overflow:hidden;
}
.cta::before{
  content:""; position:absolute; inset:-40% -10% auto auto;
  width:min(60vw,720px); aspect-ratio:1;
  border:1px solid rgba(255,255,255,.09);
  border-radius:50%;
}
.cta::after{
  content:""; position:absolute; inset:auto auto -45% -12%;
  width:min(50vw,600px); aspect-ratio:1;
  border:1px solid rgba(255,255,255,.07);
  border-radius:50%;
}
.cta__inner{ position:relative; text-align:center; display:grid; justify-items:center; gap:1.5rem; }
.cta__title{
  font-size:clamp(2.25rem,6.4vw,5rem);
  font-weight:600; letter-spacing:-.045em; line-height:1.02;
  max-width:16ch;
}
.cta__lead{ color:rgba(255,255,255,.72); max-width:50ch; font-size:clamp(1rem,1.3vw,1.1875rem); }
.cta__actions{ display:flex; flex-wrap:wrap; gap:.75rem; justify-content:center; margin-top:1rem; }
.cta__phones{
  display:flex; flex-wrap:wrap; gap:.35rem .75rem; justify-content:center; align-items:center;
  font-size:.9375rem; color:rgba(255,255,255,.62);
}
.cta__phones a{
  color:#fff; padding-block:.35rem;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:100% 1px; background-position:0 88%; background-repeat:no-repeat;
  transition:background-size var(--t) var(--ease);
}
.cta__phones a:hover{ background-size:0% 1px; }

/* ------------------------------------------- 18 YHTEYSTIEDOT & LOMAKE */
.contact{ padding-block:var(--section-y); }
.contact__inner{ display:grid; gap:clamp(2.5rem,5vw,4rem); }
@media (min-width:1024px){
  .contact__inner{ grid-template-columns:repeat(12,1fr); column-gap:clamp(2rem,5vw,5rem); }
  .contact__intro{ grid-column:1 / 6; }
  .contact__people{ grid-column:1 / 6; align-self:start; }
  .contact__form-wrap{ grid-column:7 / -1; grid-row:1 / span 2; }
}
.contact__intro{ display:grid; gap:1.25rem; align-content:start; }
.contact__intro h2{ max-width:15ch; }

.contact__people{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); }
@media (min-width:560px) and (max-width:1023px){ .contact__people{ grid-template-columns:1fr 1fr; } }
.person{ background:var(--bg); padding:clamp(1.25rem,2.5vw,1.75rem); }
.person__name{ font-family:var(--font-display); font-size:1.125rem; font-weight:600; letter-spacing:-.02em; }
.person__role{ font-size:.8125rem; color:var(--ink-2); margin-bottom:1rem; }
.person__link{
  display:block; padding:.3rem 0; font-size:.9375rem;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 1px; background-position:0 90%; background-repeat:no-repeat;
  transition:background-size var(--t) var(--ease);
  width:fit-content;
}
.person__link:hover{ background-size:100% 1px; }
.contact__facts{
  background:var(--bg); padding:clamp(1.25rem,2.5vw,1.75rem);
  display:flex; flex-wrap:wrap; gap:2rem;
}
@media (min-width:560px) and (max-width:1023px){ .contact__facts{ grid-column:1 / -1; } }
.contact__facts dt{ font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2); margin-bottom:.35rem; }
.contact__facts dd{ font-size:.9375rem; font-weight:500; }

.form{
  background:var(--bg-soft);
  border:1px solid var(--line-strong);
  padding:clamp(1.5rem,3.5vw,2.75rem);
  display:grid; gap:1.15rem;
}
.form__title{
  font-family:var(--font-display); font-size:.8125rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2);
  padding-bottom:1.15rem; border-bottom:1px solid var(--line-strong); margin-bottom:.35rem;
}
.field{ display:grid; gap:.4rem; }
.field-row{ display:grid; gap:1.15rem; }
@media (min-width:520px){ .field-row{ grid-template-columns:1fr 1fr; } }
.field label{ font-size:.875rem; font-weight:500; }
.req{ color:var(--accent); }
.field input,.field textarea{
  width:100%; min-height:50px;
  padding:.8rem .9rem;
  background:var(--bg);
  border:1px solid var(--line-strong);
  border-radius:2px;
  font-size:1rem;
  transition:border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.field textarea{ resize:vertical; min-height:120px; line-height:1.55; }
.field input:hover,.field textarea:hover{ border-color:var(--ink-3); }
.field input:focus,.field textarea:focus{
  outline:none; border-color:var(--ink);
  box-shadow:0 0 0 3px rgba(11,11,12,.08);
}
.field input:focus-visible,.field textarea:focus-visible{ outline:none; }
.field.has-error input,.field.has-error textarea{ border-color:#a4231d; }
.field__error{ font-size:.8125rem; color:#a4231d; min-height:0; }
.field__error:empty{ display:none; }
.field__help{ font-size:.8125rem; color:var(--ink-2); }

.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.form__submit{ margin-top:.5rem; position:relative; }
.form__submit[data-loading="true"] .form__submit-label,
.form__submit[data-loading="true"] .btn__arrow{ opacity:0; }
.spinner{
  position:absolute; left:50%; top:50%; width:18px; height:18px; margin:-9px 0 0 -9px;
  border:2px solid rgba(255,255,255,.3); border-top-color:#fff; border-radius:50%;
  opacity:0; animation:spin .7s linear infinite;
}
.form__submit[data-loading="true"] .spinner{ opacity:1; }
@keyframes spin{ to{ transform:rotate(360deg); } }

.form__status{ font-size:.9375rem; line-height:1.5; }
.form__status:empty{ display:none; }
.form__status[data-state="ok"]{ color:var(--accent); font-weight:500; }
.form__status[data-state="error"]{ color:#a4231d; }
.form__status a{ text-decoration:underline; text-underline-offset:3px; }
.form__legal{ font-size:.8125rem; color:var(--ink-2); }

/* ------------------------------------------------------------ 19 FOOTER */
.footer{ background:var(--ink); color:#fff; padding-block:clamp(3rem,6vw,5rem); }
.footer__inner{ display:grid; gap:2.5rem; }
@media (min-width:768px){
  .footer__inner{ grid-template-columns:1.4fr 1fr 1.4fr; column-gap:clamp(2rem,5vw,5rem); }
}
.logo--footer{ color:#fff; --mark-cut:var(--ink); }
.footer__tagline{ color:rgba(255,255,255,.62); font-size:.9375rem; margin-top:1rem; max-width:28ch; }
.footer__label{
  font-size:.75rem; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.5); margin-bottom:1.15rem;
}
.footer__nav ul{ display:grid; gap:.6rem; }
.footer__nav a{
  font-size:.9375rem; color:rgba(255,255,255,.82);
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 1px; background-position:0 100%; background-repeat:no-repeat;
  transition:background-size var(--t) var(--ease), color var(--t-fast) var(--ease);
  width:fit-content; padding-block:.3rem;
}
.footer__nav a:hover{ color:#fff; background-size:100% 1px; }
.footer__contact ul{ display:grid; gap:1.25rem; }
.footer__person{ display:block; font-weight:500; font-size:.9375rem; margin-bottom:.3rem; }
.footer__contact a{
  display:block; font-size:.9375rem; color:rgba(255,255,255,.7);
  padding-block:.3rem; width:fit-content;
  transition:color var(--t-fast) var(--ease);
}
.footer__contact a:hover{ color:#fff; text-decoration:underline; text-underline-offset:3px; }
.footer__place{ margin-top:1.25rem; font-size:.875rem; color:rgba(255,255,255,.5); }
.footer__bottom{
  grid-column:1 / -1;
  display:flex; flex-wrap:wrap; gap:.75rem 1.5rem; justify-content:space-between; align-items:center;
  margin-top:clamp(2rem,4vw,3.5rem); padding-top:1.5rem;
  border-top:1px solid rgba(255,255,255,.14);
  font-size:.8125rem; color:rgba(255,255,255,.5);
}
/* Käyttöehdot ja tietosuojaseloste — pienellä ja hillitysti */
.footer__legal{ display:flex; flex-wrap:wrap; gap:.35rem 1.25rem; }
.footer__legal a{
  font-size:.75rem; color:rgba(255,255,255,.45);
  padding-block:.4rem;
  transition:color var(--t-fast) var(--ease);
}
.footer__legal a:hover,
.footer__legal a[aria-current="page"]{ color:rgba(255,255,255,.85); text-decoration:underline; text-underline-offset:3px; }

/* ------------------------------------ 19b ERILLISET SIVUT (LEGAL-SIVUT) */
.site-header--static{
  position:static; background:var(--bg);
  border-bottom:1px solid var(--line);
}
.site-header--static::before{ display:none; }
.btn__arrow--back{ transition:transform var(--t) var(--ease-out); }
.btn:hover .btn__arrow--back{ transform:translateX(-4px); }

.legal{ padding-block:clamp(2.5rem,6vw,5.5rem); }
.legal__inner{ max-width:44rem; }
.legal h1{
  font-size:clamp(2rem,5.5vw,3.5rem); letter-spacing:-.04em;
  margin-top:1.25rem;
}
.legal__meta{
  font-size:.875rem; color:var(--ink-2);
  padding-bottom:1.75rem; margin-bottom:2.5rem;
  border-bottom:1px solid var(--line);
}
.legal section{ margin-bottom:clamp(2rem,4vw,2.75rem); }
.legal h2{
  font-size:clamp(1.125rem,2.2vw,1.5rem); letter-spacing:-.02em;
  margin-bottom:.85rem;
}
.legal p{ color:var(--ink-2); line-height:1.7; max-width:68ch; }
.legal p + p{ margin-top:.85rem; }
.legal ul{ display:grid; gap:.5rem; margin-block:.85rem; }
.legal li{
  position:relative; padding-left:1.4rem;
  color:var(--ink-2); line-height:1.6; max-width:68ch;
}
.legal li::before{
  content:""; position:absolute; left:.1rem; top:.8em;
  width:9px; height:1px; background:var(--ink-3);
}
.legal strong{ color:var(--ink); font-weight:600; }
.legal em{ color:var(--ink); font-style:normal; font-weight:500; }
.legal a{
  color:var(--ink); text-decoration:underline; text-underline-offset:3px;
  text-decoration-thickness:1px;
}
.legal__foot{
  margin-top:clamp(2rem,4vw,3rem); padding-top:1.5rem;
  border-top:1px solid var(--line);
  font-size:.9375rem;
}

/* ================================================================
   19c MOBIILI JA TABLETTI (max-width: 1023px)
   Vain kosketuskäyttöä varten — työpöytänäkymä (≥1024px) ei muutu.
   ================================================================ */
@media (max-width: 1023px){

  /* Kosketuskohteet vähintään 44 px korkeiksi */
  .logo{ min-height:44px; }
  .link-arrow,
  .person__link,
  .faq__phones .link-arrow,
  .cta__phones a,
  .mobile-menu__meta a{
    min-height:44px;
    display:inline-flex; align-items:center;
  }
  .footer__nav a,
  .footer__contact a,
  .footer__legal a{
    min-height:40px;
    display:inline-flex; align-items:center;
  }

  /* Pienet tunnisteet hitusen isommiksi puhelimessa */
  .tag,
  .plan__badge{ font-size:.75rem; }

  /* Lomakekentät: iOS ei saa zoomata, kosketusalue riittävä */
  .field input,
  .field textarea{ font-size:16px; min-height:52px; }
  .field textarea{ min-height:140px; }

  /* Turva-alueet (lovi, elepalkki) */
  .footer{ padding-bottom:max(clamp(3rem,6vw,5rem), calc(env(safe-area-inset-bottom) + 2rem)); }
  .wrap{ padding-inline:max(0px, env(safe-area-inset-left)) max(0px, env(safe-area-inset-right)); }

  /* Ennen/nyt-vertailu: pystyvieritys säilyy, vaakaveto ohjaa säädintä */
  .compare__viewer{ touch-action:pan-y; }
  .ba__divider::after{ width:48px; height:48px; }

  /* Hero-napit helposti osuttaviksi kapeimmilla näytöillä */
  @media (max-width: 400px){
    .hero__actions{ width:100%; }
    .hero__actions .btn--solid{ flex:1 1 100%; }
  }
}

/* --------------------------------------------- 20 REDUCED MOTION & PRINT */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .js [data-reveal],
  .js [data-reveal-group] > *,
  .js .hero__lead, .js .hero__actions, .js .hero__note, .js .hero__visual{
    opacity:1 !important; transform:none !important;
  }
  .js .hero__title .line__in{ transform:none !important; }
  .marquee__track{ animation:none; transform:none; }
  .mock__cursor,.phone,.chip--1,.chip--2,.chip__pulse::after,.hero__scroll svg{ animation:none; }
  .steps__line i,.step__dot{ transform:none !important; }
}

@media print{
  .site-header,.mobile-menu,.hero__visual,.marquee,.compare,.cta__actions,.form{ display:none; }
  body{ color:#000; }
  .process,.cta,.footer{ background:#fff; color:#000; }
}