/* IBM Plex fonts self-hosted, SIL Open Font License 1.1 (see /assets/fonts/OFL-LICENSE.txt) */
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/IBMPlexSans-Regular.woff2") format("woff2");}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:500;font-display:swap;src:url("/assets/fonts/IBMPlexSans-Medium.woff2") format("woff2");}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;font-display:swap;src:url("/assets/fonts/IBMPlexSans-SemiBold.woff2") format("woff2");}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:700;font-display:swap;src:url("/assets/fonts/IBMPlexSans-Bold.woff2") format("woff2");}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/IBMPlexMono-Regular.woff2") format("woff2");}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("/assets/fonts/IBMPlexMono-Medium.woff2") format("woff2");}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap;src:url("/assets/fonts/IBMPlexMono-SemiBold.woff2") format("woff2");}
html{scroll-padding-top:70px}
body{margin:0;font-size:15px;-webkit-font-smoothing:antialiased}
img{max-width:100%}
.wordmark{color:var(--ink);text-decoration:none}
.mt10{margin-top:10px}
.products{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.product{background:var(--surface);border:1px solid var(--accent);border-radius:var(--radius);padding:26px 22px;display:flex;flex-direction:column;gap:12px;box-shadow:var(--shadow)}
.product h3{font-size:1.15rem}
.product .price{font-family:"IBM Plex Mono",monospace;color:var(--accent-strong);font-size:.95rem}
.product ul{margin:0;padding-left:1.1em;color:var(--ink-soft);font-size:.92rem;display:flex;flex-direction:column;gap:6px}
.case a{font-family:"IBM Plex Mono",monospace;font-size:.78rem;display:inline-block;margin-top:10px}
footer .legal{display:flex;flex-direction:column;gap:4px}
footer a{color:var(--ink-soft)}
.skip{position:absolute;left:-9999px}.skip:focus{left:12px;top:12px;z-index:50;background:var(--surface);padding:8px}
  :root{
    --bg:#F5F6F4; --surface:#FFFFFF; --surface-2:#EDEFEE;
    --ink:#101820; --ink-soft:#4B5F63; --ink-faint:#7C8B8E;
    --accent:#0E7C86; --accent-strong:#075E66; --accent-ink:#FFFFFF;
    --line:#DBE1DF; --shadow: 0 1px 2px rgba(16,24,32,.04), 0 8px 24px rgba(16,24,32,.06);
    --radius: 2px;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#0A1119; --surface:#111B27; --surface-2:#16212F;
      --ink:#E7ECEF; --ink-soft:#9FB0B8; --ink-faint:#6B7C86;
      --accent:#37D0DC; --accent-strong:#7BE7EF; --accent-ink:#06232A;
      --line:#22303C; --shadow: 0 1px 2px rgba(0,0,0,.3), 0 12px 32px rgba(0,0,0,.35);
    }
  }
  :root[data-theme="dark"]{
    --bg:#0A1119; --surface:#111B27; --surface-2:#16212F;
    --ink:#E7ECEF; --ink-soft:#9FB0B8; --ink-faint:#6B7C86;
    --accent:#37D0DC; --accent-strong:#7BE7EF; --accent-ink:#06232A;
    --line:#22303C; --shadow: 0 1px 2px rgba(0,0,0,.3), 0 12px 32px rgba(0,0,0,.35);
  }

  * { box-sizing: border-box; }
  body{
    background:var(--bg); color:var(--ink);
    font-family:"IBM Plex Sans", -apple-system, sans-serif;
    line-height:1.55; padding-inline:20px;
  }
  a { color: var(--accent-strong); }
  .eyebrow{
    font-family:"IBM Plex Mono", monospace; font-size:.72rem; letter-spacing:.14em;
    text-transform:uppercase; color:var(--accent-strong); display:flex; align-items:center; gap:.6em;
  }
  .eyebrow::before{ content:""; width:22px; height:1px; background:var(--accent-strong); display:inline-block; }
  .wrap{ max-width:1080px; margin-inline:auto; }
  h1,h2,h3{ font-family:"IBM Plex Sans", sans-serif; font-weight:600; letter-spacing:-.01em; text-wrap:balance; margin:0; }
  p{ margin:0; color:var(--ink-soft); max-width:62ch; }
  section{ padding-block: clamp(48px,7vw,88px); border-bottom:1px solid var(--line); }
  section:last-of-type{ border-bottom:none; }

  /* ---- nav ---- */
  header.site{
    position:sticky; top:env(safe-area-inset-top,0px); z-index:20;
    background:color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: blur(8px); border-bottom:1px solid var(--line);
  }
  .navrow{ max-width:1080px; margin-inline:auto; display:flex; align-items:center; justify-content:space-between; padding-block:14px; gap:16px; flex-wrap:wrap; }
  .wordmark{ font-family:"IBM Plex Mono", monospace; font-weight:600; font-size:.95rem; letter-spacing:.03em; display:flex; align-items:center; gap:.55em; }
  .wordmark .dot{ width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
  nav.links{ display:flex; gap:22px; font-size:.86rem; flex-wrap:wrap; }
  nav.links a{ color:var(--ink-soft); text-decoration:none; }
  nav.links a:hover{ color:var(--ink); }

  /* ---- hero ---- */
  .hero{ padding-top:clamp(56px,9vw,110px); position:relative; overflow:hidden; }
  .hero h1{ font-size:clamp(2rem,4.4vw,3.4rem); line-height:1.05; margin-top:18px; max-width:15ch; }
  .hero p.lede{ font-size:1.08rem; margin-top:20px; max-width:52ch; }
  .signal{ margin-top:44px; height:96px; }
  .signal svg{ width:100%; height:100%; display:block; }
  .signal path{ fill:none; stroke:var(--accent); stroke-width:1.6; stroke-linecap:round; }
  .signal .trace2{ stroke:var(--ink-faint); opacity:.5; }
  .signal path{ stroke-dasharray: 1400; stroke-dashoffset:1400; animation: draw 3.2s ease-out forwards; }
  .signal .trace2{ animation-delay:.25s; }
  @keyframes draw{ to{ stroke-dashoffset:0; } }
  @media (prefers-reduced-motion: reduce){ .signal path{ animation:none; stroke-dashoffset:0; } }

  .cta-row{ display:flex; gap:14px; margin-top:32px; flex-wrap:wrap; }
  .btn{ font-family:"IBM Plex Mono",monospace; font-size:.82rem; letter-spacing:.04em; text-decoration:none;
    padding:.85em 1.3em; border-radius:var(--radius); display:inline-flex; align-items:center; gap:.5em; }
  .btn.primary{ background:var(--ink); color:var(--bg); }
    .btn.ghost{ border:1px solid var(--line); color:var(--ink); }

  /* ---- section heads ---- */
  .head{ display:flex; flex-direction:column; gap:10px; margin-bottom:36px; }
  .head h2{ font-size:clamp(1.5rem,2.6vw,2rem); }

  /* ---- pricing ladder ---- */
  .tiers{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:18px; }
  .tier{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:26px 22px; display:flex; flex-direction:column; gap:14px; box-shadow:var(--shadow); }
  .tier .num{ font-family:"IBM Plex Mono",monospace; font-size:.75rem; color:var(--ink-faint); }
  .tier h3{ font-size:1.1rem; }
  .tier .price{ font-family:"IBM Plex Mono",monospace; font-size:1.3rem; color:var(--accent-strong); font-variant-numeric:tabular-nums; }
  .tier ul{ margin:0; padding-left:1.1em; color:var(--ink-soft); font-size:.92rem; display:flex; flex-direction:column; gap:6px; }
  .tier.featured{ border-color:var(--accent); position:relative; }
  .tier.featured::before{ content:"Yleisin valinta"; position:absolute; top:-11px; left:20px; background:var(--accent); color:var(--accent-ink);
    font-family:"IBM Plex Mono",monospace; font-size:.66rem; letter-spacing:.06em; padding:3px 9px; border-radius:2px; text-transform:uppercase; }

  /* ---- method ---- */
  .method-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:28px; }
  .method-item .k{ font-family:"IBM Plex Mono",monospace; color:var(--accent-strong); font-size:.78rem; letter-spacing:.05em; }
  .method-item h3{ font-size:1.02rem; margin-top:8px; margin-bottom:8px; }
  .method-item p{ font-size:.92rem; }

  /* ---- cases ---- */
  .cases{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; }
  .case{ background:var(--surface-2); border-radius:var(--radius); padding:22px; border:1px solid var(--line); }
  .case .tag{ font-family:"IBM Plex Mono",monospace; font-size:.7rem; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.05em; }
  .case h3{ font-size:1rem; margin-top:10px; }
  .case p{ font-size:.88rem; margin-top:8px; }

  /* ---- audience ---- */
  .audience{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:2px; background:var(--line); border:1px solid var(--line); }
  .audience div{ background:var(--surface); padding:20px; }
  .audience .n{ font-family:"IBM Plex Mono",monospace; font-size:.72rem; color:var(--ink-faint); }
  .audience strong{ display:block; margin-top:6px; font-size:.98rem; }

  /* ---- about ---- */
  .about{ display:grid; grid-template-columns: 1.1fr 1.4fr; gap:40px; align-items:start; }
  @media (max-width:720px){ .about{ grid-template-columns:1fr; } }
  .about .cred{ list-style:none; margin:18px 0 0; padding:0; display:flex; flex-direction:column; gap:10px; font-size:.9rem; color:var(--ink-soft); }
  .about .cred li{ padding-left:1.2em; position:relative; }
  .about .cred li::before{ content:"—"; position:absolute; left:0; color:var(--ink-faint); }

  /* ---- contact ---- */
  .contact-box{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(24px,4vw,44px); display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; align-items:center; }
  .contact-box .big{ font-size:1.3rem; font-weight:600; max-width:20ch; }
  .meta{ font-family:"IBM Plex Mono",monospace; font-size:.78rem; color:var(--ink-faint); display:flex; flex-direction:column; gap:4px; }

  footer{ padding-block:28px; }
  footer .wrap{ display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-family:"IBM Plex Mono",monospace; font-size:.72rem; color:var(--ink-faint); }

/* v4: language switch, VAT note, EN badge */
.lang{ font-size:.86rem; color:var(--ink-faint); white-space:nowrap; }
.lang strong{ color:var(--ink); font-weight:600; }
.vatnote{ margin-top:14px; font-size:.82rem; color:var(--ink-faint); }
.tier a{ margin-top:auto; font-size:.9rem; }
html[lang="en"] .tier.featured::before{ content:"Most popular"; }