/* ==========================================================================
   PullTrack — tyylit
   Moderni CSS: @layer, natiivi nesting, OKLCH, light-dark(), @property,
   scroll-driven animations, container queries, :has(), popover, @starting-style
   ========================================================================== */

@layer reset, tokens, base, layout, components, sections, motion;

/* ---------- Fontit ---------- */
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-var.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-var-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/jbmono-var.woff2") format("woff2");
  font-weight: 100 800;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("fonts/instrument-serif-italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

/* ---------- Animoitavat custom propertyt ---------- */
@property --angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
@property --mx { syntax: "<length-percentage>"; inherits: true; initial-value: 50%; }
@property --my { syntax: "<length-percentage>"; inherits: true; initial-value: -30%; }

/* ==========================================================================
   RESET
   ========================================================================== */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: none; text-size-adjust: none; }
  img, svg, video, canvas { display: block; max-width: 100%; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { cursor: pointer; background: none; border: 0; }
  ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
  p, h1, h2, h3, h4 { overflow-wrap: break-word; }
}

/* ==========================================================================
   TOKENS
   ========================================================================== */
@layer tokens {
  :root {
    color-scheme: dark;
    interpolate-size: allow-keywords;

    /* Brändivärit */
    --volt:   oklch(0.9 0.19 124);
    --aqua:   oklch(0.84 0.13 190);
    --violet: oklch(0.68 0.19 292);
    --rose:   oklch(0.72 0.17 15);

    /* Pinnat ja teksti – vaihtuvat teeman mukaan */
    --bg:        light-dark(oklch(0.985 0.004 265), oklch(0.15 0.016 268));
    --bg-2:      light-dark(oklch(0.965 0.006 265), oklch(0.18 0.018 268));
    --surface:   light-dark(oklch(1 0 0 / 0.75), oklch(0.22 0.02 268 / 0.55));
    --surface-2: light-dark(oklch(0.95 0.008 265), oklch(0.25 0.022 268 / 0.7));
    --line:      light-dark(oklch(0.2 0.03 268 / 0.1), oklch(1 0 0 / 0.08));
    --line-2:    light-dark(oklch(0.2 0.03 268 / 0.16), oklch(1 0 0 / 0.14));
    --text:      light-dark(oklch(0.2 0.025 268), oklch(0.97 0.005 268));
    --muted:     light-dark(oklch(0.46 0.025 268), oklch(0.74 0.02 268));
    --faint:     light-dark(oklch(0.52 0.02 268), oklch(0.64 0.02 268));
    --accent:    light-dark(oklch(0.52 0.16 145), var(--volt));
    --accent-2:  light-dark(oklch(0.5 0.2 292), var(--violet));
    --ok:        light-dark(oklch(0.58 0.15 150), oklch(0.82 0.17 150));
    --warn:      light-dark(oklch(0.66 0.15 70), oklch(0.84 0.14 80));
    --bad:       light-dark(oklch(0.52 0.19 25), oklch(0.72 0.17 20));
    --aqua-text: light-dark(oklch(0.5 0.1 200), var(--aqua));
    --violet-text: light-dark(oklch(0.48 0.2 292), var(--violet));

    --btn-bg:    light-dark(oklch(0.2 0.025 268), var(--volt));
    --btn-fg:    light-dark(oklch(0.99 0 0), oklch(0.16 0.02 268));

    --grad: linear-gradient(100deg, var(--volt), var(--aqua) 45%, var(--violet));
    --grad-text: var(--grad);

    --shadow-lg: 0 1px 0 oklch(1 0 0 / 0.06) inset, 0 30px 80px -20px oklch(0 0 0 / 0.6);
    --grain: 0.04;
    --canvas-o: 1;
    --glow-o: 1;

    /* Typografia */
    --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
    --font-serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;

    --step--1: clamp(0.82rem, 0.8rem + 0.1vw, 0.88rem);
    --step-0:  clamp(1rem, 0.96rem + 0.18vw, 1.1rem);
    --step-1:  clamp(1.15rem, 1.08rem + 0.35vw, 1.35rem);
    --step-2:  clamp(1.4rem, 1.25rem + 0.7vw, 1.85rem);
    --step-3:  clamp(2rem, 1.6rem + 2vw, 3.4rem);
    --step-4:  clamp(2.7rem, 1.8rem + 4.6vw, 6.2rem);

    /* Mittasuhteet */
    --r-sm: 10px;
    --r-md: 16px;
    --r-lg: 24px;
    --r-xl: 32px;
    --container: 1240px;
    --gutter: clamp(1.25rem, 4vw, 2.5rem);
    --section: clamp(4.5rem, 9vw, 8rem);
    --header-h: 72px;

    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: linear(0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.723 12.9%, 0.938 16.7%, 1.017 19.4%, 1.067, 1.099 24.3%, 1.108 26%, 1.1, 1.077 30.6%, 1.008 38.7%, 0.984 42.5%, 0.976 47.1%, 0.986 55.3%, 1.002 64.7%, 1.001 81.6%, 1);
  }

  :root[data-theme="light"] {
    color-scheme: light;
    --grad-text: linear-gradient(100deg, oklch(0.55 0.17 140), oklch(0.55 0.13 200) 45%, oklch(0.5 0.2 292));
    --shadow-lg: 0 1px 1px oklch(0.2 0.03 268 / 0.04), 0 12px 32px -8px oklch(0.2 0.03 268 / 0.14), 0 40px 80px -24px oklch(0.2 0.03 268 / 0.18);
    --grain: 0.025;
    --canvas-o: 0.8;
    --glow-o: 0.55;
  }
}

/* ==========================================================================
   BASE
   ========================================================================== */
@layer base {
  html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 1rem);
    background: var(--bg);
    hanging-punctuation: first last;
  }

  body {
    font-family: var(--font-sans);
    font-size: var(--step-0);
    line-height: 1.6;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: clip;
    min-height: 100dvh;
  }

  h1, h2, h3, h4 {
    line-height: 1.08;
    letter-spacing: -0.03em;
    font-weight: 620;
    text-wrap: balance;
  }
  p { text-wrap: pretty; }

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

  ::selection { background: color-mix(in oklch, var(--accent) 40%, transparent); color: var(--text); }

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

  .i {
    width: 1.15em;
    height: 1.15em;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .skip-link {
    position: fixed;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 1000;
    padding: 0.6rem 1rem;
    border-radius: var(--r-sm);
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-weight: 600;
    translate: 0 -200%;
    transition: translate 0.25s var(--ease-out);
    &:focus-visible { translate: 0 0; }
  }

  /* Hienovarainen filmirae koko sivulle */
  body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 999;
    pointer-events: none;
    opacity: var(--grain);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
}

/* ==========================================================================
   LAYOUT
   ========================================================================== */
@layer layout {
  .container {
    width: min(100% - 2 * var(--gutter), var(--container));
    margin-inline: auto;
  }

  .section {
    position: relative;
    padding-block: var(--section);
  }

  .section-head {
    max-width: 46rem;
    margin-bottom: clamp(2.5rem, 6vw, 4.5rem);

    &.center {
      margin-inline: auto;
      text-align: center;
    }
  }

  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1.25rem;
    font-family: var(--font-mono);
    font-size: var(--step--1);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);

    & span {
      display: inline-grid;
      place-items: center;
      padding: 0.15rem 0.5rem;
      border: 1px solid var(--line-2);
      border-radius: 999px;
      color: var(--accent);
      font-size: 0.75rem;
    }
  }

  .section-title {
    font-size: var(--step-3);
    margin-bottom: 1.25rem;
  }

  .section-lead {
    font-size: var(--step-1);
    color: var(--muted);
    line-height: 1.55;
    max-width: 40rem;
    .center & { margin-inline: auto; }
  }

  .serif-accent {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
    letter-spacing: -0.01em;
    padding-right: 0.06em;
    background: var(--grad-text);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
  }

  .nowrap { white-space: nowrap; }

  .text-link {
    color: var(--accent);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    &:hover { text-decoration-thickness: 2px; }
  }
}

/* ==========================================================================
   COMPONENTS
   ========================================================================== */
@layer components {
  /* ---------- Painikkeet ---------- */
  .btn {
    --pad-y: 0.8rem;
    --pad-x: 1.35rem;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: var(--pad-y) var(--pad-x);
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.97rem;
    letter-spacing: -0.01em;
    line-height: 1.2;
    white-space: nowrap;
    transition: background-color 0.25s, color 0.25s, border-color 0.25s, box-shadow 0.35s var(--ease-out), translate 0.35s var(--ease-out);

    & .i { transition: translate 0.35s var(--ease-out); }
    &:hover .i { translate: 3px 0; }
  }
  .btn-sm { --pad-y: 0.55rem; --pad-x: 1rem; font-size: 0.9rem; }
  .btn-lg { --pad-y: 1rem; --pad-x: 1.7rem; font-size: 1.02rem; }
  .btn-block { width: 100%; }

  .btn-primary {
    background: var(--btn-bg);
    color: var(--btn-fg);
    box-shadow: 0 0 0 0 color-mix(in oklch, var(--accent) 0%, transparent), 0 8px 24px -10px color-mix(in oklch, var(--accent) 60%, transparent);

    &:hover {
      box-shadow: 0 0 0 6px color-mix(in oklch, var(--accent) 18%, transparent), 0 14px 34px -10px color-mix(in oklch, var(--accent) 70%, transparent);
    }
  }

  .btn-ghost {
    border: 1px solid var(--line-2);
    background: color-mix(in oklch, var(--surface) 60%, transparent);
    backdrop-filter: blur(8px);
    &:hover { border-color: color-mix(in oklch, var(--accent) 55%, transparent); background: var(--surface-2); }
  }

  .icon-btn {
    display: inline-grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 999px;
    border: 1px solid var(--line-2);
    color: var(--text);
    transition: border-color 0.2s, background-color 0.2s, rotate 0.5s var(--ease-out);
    &:hover { border-color: color-mix(in oklch, var(--accent) 55%, transparent); background: var(--surface-2); }
  }

  /* ---------- Tagit ---------- */
  .tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;

    & li {
      padding: 0.22rem 0.6rem;
      font-family: var(--font-mono);
      font-size: 0.72rem;
      color: var(--muted);
      border: 1px solid var(--line);
      border-radius: 999px;
      background: color-mix(in oklch, var(--bg) 40%, transparent);
    }
  }

  /* ---------- Kortit + spotlight ---------- */
  .card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: var(--r-lg);
    border: 1px solid var(--line);
    background:
      linear-gradient(180deg, color-mix(in oklch, var(--surface) 100%, transparent), color-mix(in oklch, var(--surface) 55%, transparent));
    box-shadow: 0 1px 0 light-dark(oklch(1 0 0 / 0.8), oklch(1 0 0 / 0.05)) inset;
    transition: border-color 0.3s, translate 0.5s var(--ease-out);

    /* reunan valokehä */
    &::before {
      content: "";
      position: absolute;
      inset: -1px;
      z-index: 2;
      padding: 1px;
      border-radius: inherit;
      background: radial-gradient(260px circle at var(--mx) var(--my), color-mix(in oklch, var(--accent) 85%, transparent), transparent 70%);
      mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      mask-composite: exclude;
      opacity: 0;
      transition: opacity 0.4s;
      pointer-events: none;
    }
    /* sisäinen hehku */
    &::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background: radial-gradient(520px circle at var(--mx) var(--my), color-mix(in oklch, var(--accent) 9%, transparent), transparent 60%);
      opacity: 0;
      transition: opacity 0.4s;
      pointer-events: none;
    }
    &:hover::before, &:hover::after { opacity: 1; }
  }

  .glass {
    background: light-dark(oklch(1 0 0 / 0.72), oklch(0.2 0.02 268 / 0.62));
    border: 1px solid var(--line-2);
    backdrop-filter: blur(18px) saturate(1.5);
    -webkit-backdrop-filter: blur(18px) saturate(1.5);
    box-shadow: var(--shadow-lg);
  }

  .dots {
    display: inline-flex;
    gap: 6px;
    & i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-2); }
    & i:nth-child(1) { background: oklch(0.7 0.17 25); }
    & i:nth-child(2) { background: oklch(0.82 0.15 85); }
    & i:nth-child(3) { background: oklch(0.78 0.16 150); }
  }

  .avatar {
    display: inline-grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    flex: none;
    border-radius: 50%;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
    color: oklch(0.16 0.02 268);
    background: var(--grad);
    box-shadow: 0 0 0 3px var(--bg), 0 0 0 4px var(--line-2);

    &.lg { width: 3.5rem; height: 3.5rem; font-size: 1.05rem; }
  }

  /* ---------- Toast ---------- */
  .toast {
    position: fixed;
    left: 50%;
    bottom: max(1.5rem, env(safe-area-inset-bottom));
    z-index: 200;
    translate: -50% 150%;
    padding: 0.75rem 1.15rem;
    border-radius: 999px;
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-weight: 600;
    font-size: 0.92rem;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    transition: translate 0.5s var(--ease-spring), opacity 0.3s;
    pointer-events: none;

    &.show { translate: -50% 0; opacity: 1; }
  }

  /* ---------- Skrollausindikaattori ---------- */
  .scroll-progress {
    position: fixed;
    inset: 0 0 auto;
    z-index: 101;
    height: 2px;
    background: var(--grad);
    transform-origin: 0 50%;
    scale: 0 1;
    display: none;
  }
  @supports (animation-timeline: scroll()) {
    .scroll-progress {
      display: block;
      animation: progress linear both;
      animation-timeline: scroll(root block);
    }
  }
  @keyframes progress { to { scale: 1 1; } }
}

/* ==========================================================================
   SECTIONS
   ========================================================================== */
@layer sections {
  /* ---------- Header ---------- */
  .site-header {
    position: fixed;
    inset: 0 0 auto;
    z-index: 100;
    height: var(--header-h);
    display: flex;
    align-items: center;
    transition: background-color 0.4s, border-color 0.4s, backdrop-filter 0.4s, height 0.4s var(--ease-out);
    border-bottom: 1px solid transparent;

    &.scrolled {
      --header-h: 62px;
      background: color-mix(in oklch, var(--bg) 72%, transparent);
      backdrop-filter: blur(16px) saturate(1.6);
      -webkit-backdrop-filter: blur(16px) saturate(1.6);
      border-bottom-color: var(--line);
    }
  }

  .nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
  }

  .brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 700;
    font-size: 1.12rem;
    letter-spacing: -0.03em;
  }
  .brand-mark {
    width: 32px;
    height: 32px;
    transition: rotate 0.7s var(--ease-spring);
    .brand:hover & { rotate: -8deg; }
  }

  .nav-links {
    display: flex;
    gap: 0.25rem;
    padding: 0.3rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: color-mix(in oklch, var(--surface) 50%, transparent);
    backdrop-filter: blur(10px);

    & a {
      position: relative;
      display: block;
      padding: 0.42rem 0.95rem;
      border-radius: 999px;
      font-size: 0.92rem;
      font-weight: 500;
      color: var(--muted);
      transition: color 0.2s, background-color 0.2s;

      &:hover { color: var(--text); }
      &.active { color: var(--text); background: var(--surface-2); box-shadow: 0 0 0 1px var(--line) inset; }
    }
  }

  .nav-actions { display: flex; align-items: center; gap: 0.6rem; }

  .theme-toggle {
    & .i-sun { display: none; }
    [data-theme="light"] & .i-sun { display: block; }
    [data-theme="light"] & .i-moon { display: none; }
    &:active { rotate: 25deg; }
  }

  .menu-btn { display: none; }

  @media (width < 940px) {
    .nav-links { display: none; }
    .menu-btn { display: inline-grid; }
  }
  @media (width < 520px) {
    .nav-cta { display: none; }
  }

  /* ---------- Mobiilivalikko (popover) ---------- */
  .mobile-menu {
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding: 1rem var(--gutter) 2rem;
    border: 0;
    color: var(--text);
    background: color-mix(in oklch, var(--bg) 92%, transparent);
    backdrop-filter: blur(20px);
    opacity: 0;
    translate: 0 -12px;
    transition: opacity 0.35s, translate 0.45s var(--ease-out), display 0.45s allow-discrete, overlay 0.45s allow-discrete;

    &:popover-open {
      display: flex;
      flex-direction: column;
      opacity: 1;
      translate: 0 0;
      @starting-style { opacity: 0; translate: 0 -12px; }
    }

    & ul { margin-top: 2.5rem; display: grid; gap: 0.25rem; }
    & ul a {
      display: block;
      padding: 0.6rem 0;
      font-size: clamp(2rem, 9vw, 2.8rem);
      font-weight: 620;
      letter-spacing: -0.035em;
      border-bottom: 1px solid var(--line);
    }
    & ul a:hover { color: var(--accent); }
  }
  html:has(.mobile-menu:popover-open) { overflow: hidden; }
  .mobile-menu-head { display: flex; justify-content: space-between; align-items: center; height: calc(var(--header-h) - 1rem); }
  .mobile-menu-mail { margin-top: auto; font-family: var(--font-mono); color: var(--accent); }

  /* ---------- Hero ---------- */
  .hero {
    position: relative;
    min-height: 100svh;
    display: grid;
    align-items: center;
    padding-block: calc(var(--header-h) + 3rem) 6rem;
    overflow: clip;
    isolation: isolate;
  }

  .hero-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    opacity: 0;
    transition: opacity 1.6s ease;
    &.ready { opacity: var(--canvas-o); }
  }

  .hero-glow {
    position: absolute;
    inset: -20% -10% auto;
    height: 120%;
    z-index: -2;
    background:
      radial-gradient(40% 50% at 78% 30%, color-mix(in oklch, var(--violet) 30%, transparent), transparent 70%),
      radial-gradient(35% 45% at 18% 20%, color-mix(in oklch, var(--aqua) 18%, transparent), transparent 70%),
      radial-gradient(30% 40% at 60% 85%, color-mix(in oklch, var(--volt) 14%, transparent), transparent 70%);
    filter: blur(20px);
    opacity: var(--glow-o);
  }

  .hero-grid {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
      linear-gradient(var(--line) 1px, transparent 1px),
      linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size: 64px 64px;
    mask: radial-gradient(ellipse 70% 60% at 50% 40%, #000 20%, transparent 75%);
    opacity: 0.55;
  }

  .hero-inner {
    display: grid;
    grid-template-columns: 1.08fr 0.92fr;
    align-items: center;
    gap: clamp(2rem, 5vw, 4.5rem);
  }

  .status-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.42rem 0.9rem 0.42rem 0.7rem;
    margin-bottom: 1.75rem;
    border: 1px solid var(--line-2);
    border-radius: 999px;
    font-size: 0.86rem;
    font-weight: 500;
    color: var(--muted);
    background: color-mix(in oklch, var(--surface) 70%, transparent);
    backdrop-filter: blur(10px);
    animation: rise 0.9s var(--ease-out) 0.1s both;
  }
  .pulse {
    position: relative;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ok);
    &::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background: inherit;
      animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
    }
  }

  .hero-title {
    font-size: var(--step-4);
    line-height: 0.98;
    letter-spacing: -0.048em;
    font-weight: 640;
    margin-bottom: 1.75rem;

    & .line { display: block; overflow: clip; padding-bottom: 0.08em; margin-bottom: -0.08em; }
    & .line > span { display: inline-block; animation: line-up 1.1s var(--ease-out) both; }
    & .line:nth-child(2) > span { animation-delay: 0.12s; }
    & .serif-accent { font-size: 1.08em; letter-spacing: -0.02em; }
  }

  .hero-lead {
    font-size: var(--step-1);
    color: var(--muted);
    max-width: 34rem;
    margin-bottom: 2.25rem;
    animation: rise 1s var(--ease-out) 0.3s both;
    & strong { color: var(--text); font-weight: 560; }
  }

  .hero-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-bottom: 2.75rem;
    animation: rise 1s var(--ease-out) 0.42s both;
  }

  .hero-meta {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    font-size: 0.9rem;
    line-height: 1.35;
    color: var(--muted);
    animation: rise 1s var(--ease-out) 0.55s both;
    & strong { color: var(--text); font-weight: 600; }
    & a:hover { color: var(--accent); }
  }

  /* Hero-visual: terminaali + kelluvat kortit */
  .hero-visual {
    position: relative;
    perspective: 1400px;
    animation: rise 1.2s var(--ease-out) 0.35s both;
  }

  .terminal {
    border-radius: var(--r-lg);
    overflow: hidden;
    transform: rotateY(-9deg) rotateX(5deg);
    transform-style: preserve-3d;
    transition: transform 1s var(--ease-out);
    .hero-visual:hover & { transform: rotateY(-3deg) rotateX(2deg); }
  }

  .terminal-bar {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.8rem 1rem;
    border-bottom: 1px solid var(--line);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--faint);
  }
  .terminal-title { flex: 1; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .branch-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    border: 1px solid var(--line-2);
    color: var(--accent);
    & .i { width: 0.9rem; height: 0.9rem; }
  }

  .terminal-body {
    height: 19.5rem;
    padding: 1.25rem 1.35rem;
    font-family: var(--font-mono);
    font-size: clamp(0.76rem, 0.7rem + 0.2vw, 0.86rem);
    line-height: 1.75;
    color: var(--muted);
    white-space: pre-wrap;
    overflow: hidden;

    & code { font-family: inherit; }
    & .t-prompt { color: var(--accent); }
    & .t-path { color: var(--aqua-text); }
    & .t-ok { color: var(--ok); }
    & .t-dim { color: var(--faint); }
    & .t-cmd { color: var(--text); }
    & .t-hl { color: var(--violet-text); }
  }
  .caret {
    display: inline-block;
    width: 0.55em;
    height: 1.1em;
    vertical-align: text-bottom;
    background: var(--accent);
    animation: blink 1.05s steps(1) infinite;
  }

  .float-card {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.75rem 0.95rem;
    border-radius: var(--r-md);
    font-size: 0.82rem;
    line-height: 1.3;
    white-space: nowrap;
    animation: float 7s ease-in-out infinite;

    & b { display: block; font-weight: 600; }
    & small { display: block; color: var(--muted); font-size: 0.74rem; }
  }
  .fc-icon {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 10px;
    &.ok { background: color-mix(in oklch, var(--ok) 18%, transparent); color: var(--ok); }
  }
  .fc-1 { top: -2.4rem; left: -1.75rem; animation-delay: -1s; }
  .fc-2 {
    top: 46%;
    right: -2.25rem;
    animation-delay: -3s;
    font-family: var(--font-mono);
    & .fc-label { color: var(--muted); }
    & .fc-num { color: var(--ok); }
  }
  .fc-bar {
    width: 72px;
    height: 6px;
    border-radius: 6px;
    background: var(--line-2);
    overflow: hidden;
    & i { display: block; height: 100%; width: 100%; background: var(--ok); border-radius: inherit; animation: fill 3.2s var(--ease-out) infinite; transform-origin: left; }
  }
  .fc-3 {
    bottom: -2.25rem;
    left: 2.5rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.45rem;
    animation-delay: -5s;
  }
  .fc-commits {
    display: grid;
    grid-template-columns: repeat(14, 10px);
    gap: 3px;
    & i { height: 10px; border-radius: 3px; background: color-mix(in oklch, var(--accent) 22%, transparent); }
    & i:nth-child(3n) { background: color-mix(in oklch, var(--accent) 55%, transparent); }
    & i:nth-child(4n+1) { background: var(--accent); }
    & i:nth-child(7) { background: color-mix(in oklch, var(--accent) 12%, transparent); }
  }

  .scroll-cue {
    position: absolute;
    left: 50%;
    bottom: 1.75rem;
    translate: -50% 0;
    width: 26px;
    height: 42px;
    border: 1.5px solid var(--line-2);
    border-radius: 999px;
    & span {
      position: absolute;
      left: 50%;
      top: 8px;
      width: 3px;
      height: 8px;
      margin-left: -1.5px;
      border-radius: 3px;
      background: var(--accent);
      animation: scroll-cue 2s var(--ease-out) infinite;
    }
  }

  @media (width < 1060px) {
    .hero-inner { grid-template-columns: 1fr; }
    .hero-visual { max-width: 560px; margin-inline: auto; width: 100%; margin-top: 3.5rem; }
    .scroll-cue { display: none; }
  }
  @media (width < 640px) {
    .terminal { transform: none; }
    .terminal-body { height: 17rem; }
    .fc-2 { right: -0.5rem; top: auto; bottom: -1.75rem; }
    .fc-1 { left: -0.25rem; }
    .fc-3 { display: none; }
  }

  /* ---------- Teknologianauha ---------- */
  .stack-strip {
    padding-block: 2.25rem;
    border-block: 1px solid var(--line);
    background: color-mix(in oklch, var(--bg-2) 70%, transparent);
    display: grid;
    gap: 1rem;
  }
  .stack-label {
    text-align: center;
    font-size: 0.82rem;
    font-family: var(--font-mono);
    color: var(--faint);
    letter-spacing: 0.04em;
  }
  .marquee {
    display: flex;
    overflow: hidden;
    mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    &:hover .marquee-track { animation-play-state: paused; }
  }
  .marquee-track {
    display: flex;
    flex: none;
    gap: 3rem;
    padding-right: 3rem;
    animation: marquee 42s linear infinite;

    & li {
      font-size: clamp(1.1rem, 0.95rem + 0.7vw, 1.5rem);
      font-weight: 600;
      letter-spacing: -0.025em;
      color: var(--faint);
      white-space: nowrap;
      transition: color 0.2s;
      &:hover { color: var(--text); }
    }
  }

  /* ---------- Palvelut (bento) ---------- */
  .bento {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1rem;
  }
  .service {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    padding: clamp(1.4rem, 2.5vw, 2rem);
  }
  .s-web     { grid-column: span 4; }
  .s-ai      { grid-column: span 2; }
  .s-api     { grid-column: span 2; }
  .s-iot     { grid-column: span 2; }
  .s-ops     { grid-column: span 2; }
  .s-consult { grid-column: span 6; }

  @media (width < 1000px) {
    .bento { grid-template-columns: repeat(2, 1fr); }
    .s-web, .s-consult { grid-column: span 2; }
    .s-ai, .s-api, .s-iot, .s-ops { grid-column: span 1; }
  }
  @media (width < 680px) {
    .bento { grid-template-columns: 1fr; }
    .bento > * { grid-column: auto !important; }
  }

  .card-copy {
    display: grid;
    gap: 0.85rem;
    align-content: start;
    & h3 { font-size: var(--step-2); }
    & p { color: var(--muted); font-size: 0.98rem; }
  }
  .card-icon {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    margin-bottom: 0.35rem;
    border-radius: 14px;
    color: var(--accent);
    border: 1px solid var(--line-2);
    background: linear-gradient(140deg, color-mix(in oklch, var(--accent) 16%, transparent), transparent 70%);
    & .i { width: 1.35rem; height: 1.35rem; }
  }

  .service-inner {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
  }
  /* Leveä kortti → copy + visual vierekkäin (container query) */
  @container (min-width: 620px) {
    .service-inner {
      display: grid;
      grid-template-columns: 0.9fr 1.1fr;
      align-items: center;
      gap: 2.5rem;
    }
    .service-inner .mock-browser { margin-top: 0; }
  }

  /* Mock: selain */
  .mock-browser {
    margin-top: auto;
    border-radius: var(--r-md);
    border: 1px solid var(--line-2);
    background: var(--bg-2);
    overflow: hidden;
    box-shadow: 0 20px 50px -24px oklch(0 0 0 / 0.5);
    font-size: 0.72rem;
  }
  .mb-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid var(--line);
    & .dots i { width: 8px; height: 8px; }
  }
  .mb-url {
    flex: 1;
    padding: 0.2rem 0.6rem;
    border-radius: 6px;
    background: var(--surface-2);
    font-family: var(--font-mono);
    color: var(--faint);
    font-size: 0.68rem;
  }
  .mb-body { display: grid; grid-template-columns: 40px 1fr; }
  .mb-side {
    display: grid;
    align-content: start;
    gap: 8px;
    padding: 12px 10px;
    border-right: 1px solid var(--line);
    & i { height: 20px; border-radius: 6px; background: var(--surface-2); }
    & i.on { background: color-mix(in oklch, var(--accent) 45%, transparent); }
  }
  .mb-main { padding: 0.9rem; display: grid; gap: 0.9rem; }
  .mb-kpis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    & > div { padding: 0.55rem 0.65rem; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); }
    & small { display: block; color: var(--faint); font-size: 0.64rem; }
    & b { display: block; font-size: 1.05rem; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
    & .up { font-size: 0.62rem; color: var(--ok); font-family: var(--font-mono); }
  }
  .mb-chart {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 120px;
    padding-top: 0.5rem;
    & i {
      flex: 1;
      height: var(--h);
      border-radius: 5px 5px 2px 2px;
      background: linear-gradient(180deg, var(--accent), color-mix(in oklch, var(--aqua) 40%, transparent));
      transform-origin: bottom;
      opacity: 0.9;
    }
    & i:last-child { background: var(--grad); opacity: 1; }
    .in & i { animation: bar-grow 1.2s var(--ease-out) both; animation-delay: calc(sibling-index() * 55ms); }
  }

  /* Mock: integraatiokaavio */
  .mock-flow {
    margin-top: auto;
    width: 100%;
    height: auto;
    overflow: visible;
    & .flow-line {
      fill: none;
      stroke: color-mix(in oklch, var(--accent) 65%, transparent);
      stroke-width: 1.4;
      stroke-dasharray: 3 6;
      animation: dash 1.4s linear infinite;
    }
    & .flow-node rect { fill: var(--surface-2); stroke: var(--line-2); }
    & .flow-hub circle { fill: color-mix(in oklch, var(--accent) 18%, var(--bg-2)); stroke: var(--accent); stroke-width: 1.4; }
    & text {
      fill: var(--text);
      font-family: var(--font-mono);
      font-size: 9.5px;
      text-anchor: middle;
    }
    & .flow-hub text { fill: var(--accent); font-weight: 700; font-size: 10px; }
    & .flow-hub { animation: hub 2.8s ease-in-out infinite; transform-origin: 160px 60px; transform-box: view-box; }
  }

  /* Mock: chat */
  .mock-chat {
    margin-top: auto;
    display: grid;
    gap: 0.6rem;
    font-size: 0.82rem;
    & .msg { max-width: 92%; padding: 0.6rem 0.85rem; border-radius: 14px; line-height: 1.45; }
    & .me { justify-self: end; background: var(--surface-2); border-bottom-right-radius: 4px; }
    & .bot {
      justify-self: start;
      display: grid;
      border: 1px solid color-mix(in oklch, var(--accent) 35%, transparent);
      background: color-mix(in oklch, var(--accent) 9%, transparent);
      border-bottom-left-radius: 4px;
      & > * { grid-area: 1 / 1; }
      & b { color: var(--accent); }
    }
    & .typing { display: flex; gap: 4px; align-items: center; opacity: 0; }
    & .typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: typing 1s ease-in-out infinite; }
    & .typing i:nth-child(2) { animation-delay: 0.15s; }
    & .typing i:nth-child(3) { animation-delay: 0.3s; }

    .in & .typing { animation: typing-show 1.8s steps(1) both; }
    .in & .reply { animation: rise 0.6s var(--ease-out) 1.8s both; }
  }

  /* Mock: IoT */
  .mock-iot {
    margin-top: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    & .sensor {
      position: relative;
      grid-column: span 2;
      padding: 0.75rem 0.85rem;
      border-radius: 14px;
      border: 1px solid var(--line);
      background: var(--surface-2);
      & small { display: block; color: var(--faint); font-size: 0.7rem; }
      & b { display: block; font-size: 1.35rem; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
      & b.ok { color: var(--ok); font-size: 1rem; }
      & svg { width: 100%; height: 34px; margin-top: 0.3rem; overflow: visible; }
      & path { fill: none; stroke: var(--aqua-text); stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
    }
    & .sensor.small { grid-column: span 1; & b { font-size: 1rem; } }
    & .live { position: absolute; top: 0.85rem; right: 0.85rem; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 var(--ok); animation: live 2s infinite; }
    .in & svg { animation: draw 2s var(--ease-out) both; }
  }

  /* Mock: kontit */
  .mock-ops {
    margin-top: auto;
    display: grid;
    gap: 0.4rem;
    font-size: 0.78rem;
    & li {
      display: grid;
      grid-template-columns: auto 1fr auto auto;
      align-items: center;
      gap: 0.6rem;
      padding: 0.5rem 0.75rem;
      border-radius: 10px;
      border: 1px solid var(--line);
      background: var(--surface-2);
    }
    & code { font-family: var(--font-mono); color: var(--text); }
    & span { color: var(--muted); font-size: 0.72rem; }
    & em { font-style: normal; font-family: var(--font-mono); color: var(--faint); font-size: 0.7rem; }
    & .st { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 10px var(--ok); }
    & .st.warn { background: var(--warn); box-shadow: 0 0 10px var(--warn); }
    .in & li { animation: rise 0.6s var(--ease-out) both; animation-delay: calc(sibling-index() * 90ms); }
  }

  /* Mock: diff */
  .mock-diff {
    margin: 0;
    padding: 1rem 0;
    border-radius: var(--r-md);
    border: 1px solid var(--line-2);
    background: var(--bg-2);
    font-family: var(--font-mono);
    font-size: clamp(0.68rem, 0.62rem + 0.25vw, 0.8rem);
    line-height: 1.85;
    overflow-x: auto;
    & span { display: block; padding-inline: 1rem; white-space: pre; }
    & .del { background: color-mix(in oklch, var(--bad) 13%, transparent); color: color-mix(in oklch, var(--bad) 80%, var(--text)); }
    & .add { background: color-mix(in oklch, var(--ok) 12%, transparent); color: color-mix(in oklch, var(--ok) 75%, var(--text)); }
    & .cmt { color: var(--faint); font-style: italic; }
  }

  /* ---------- Kineettinen teksti ---------- */
  .kinetic {
    padding-block: clamp(2rem, 6vw, 5rem);
    overflow: clip;
    display: grid;
    gap: 0.5rem;
    user-select: none;
  }
  .kinetic-row {
    display: flex;
    align-items: center;
    gap: 0.35em;
    width: max-content;
    font-size: clamp(3rem, 1.5rem + 7vw, 8.5rem);
    font-weight: 680;
    letter-spacing: -0.05em;
    line-height: 1;
    white-space: nowrap;

    & i { font-style: normal; font-size: 0.45em; color: var(--accent); }
    &.outline {
      translate: -20% 0;
      color: transparent;
      -webkit-text-stroke: 1.2px var(--line-2);
      & i { -webkit-text-stroke: 0; color: var(--violet); }
    }
  }

  /* ---------- Miksi ---------- */
  .why-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: clamp(2rem, 6vw, 5rem);
    align-items: start;
    & .section-head { position: sticky; top: calc(var(--header-h) + 2rem); margin-bottom: 0; }
  }
  .why-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }
  .why-item {
    position: relative;
    padding: 1.6rem;
    border-radius: var(--r-lg);
    border: 1px solid var(--line);
    background: var(--surface);
    overflow: hidden;
    isolation: isolate;

    &::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background: radial-gradient(360px circle at var(--mx) var(--my), color-mix(in oklch, var(--accent) 10%, transparent), transparent 60%);
      opacity: 0;
      transition: opacity 0.4s;
    }
    &:hover::after { opacity: 1; }

    & h3 { font-size: var(--step-1); margin-block: 1.1rem 0.6rem; }
    & p { color: var(--muted); font-size: 0.96rem; }
    &:nth-child(even) { top: 2.5rem; }
  }
  .why-ico {
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 12px;
    background: var(--grad);
    color: oklch(0.16 0.02 268);
    & .i { stroke-width: 2; }
  }
  @media (width < 980px) {
    .why-grid { grid-template-columns: 1fr; }
    .why-grid .section-head { position: static; margin-bottom: 1rem; }
  }
  @media (width < 600px) {
    .why-list { grid-template-columns: 1fr; }
    .why-item:nth-child(even) { top: 0; }
  }

  /* ---------- Työt ---------- */
  .work-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }
  .work-card {
    display: flex;
    flex-direction: column;
    transform-style: preserve-3d;
    transition: border-color 0.3s, transform 0.6s var(--ease-out);
  }
  .work-visual {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 9.5;
    padding: clamp(1.25rem, 3vw, 2.25rem);
    overflow: hidden;
    border-bottom: 1px solid var(--line);
    background:
      radial-gradient(80% 90% at 50% 0%, color-mix(in oklch, var(--tint, var(--accent)) 22%, transparent), transparent 70%),
      var(--bg-2);

    & > * {
      width: min(100%, 400px);
      transition: translate 0.7s var(--ease-out), scale 0.7s var(--ease-out);
    }
    .work-card:hover & > * { translate: 0 -6px; scale: 1.025; }
  }
  /* Korostettu työ: SpoofVis (koko leveys) */
  .w-spoof {
    --tint: var(--violet);
    grid-column: 1 / -1;

    & .work-visual { aspect-ratio: auto; min-height: 20rem; }
    & .work-visual > .sv { width: min(100%, 680px); }
    & .work-copy { align-content: center; }
  }
  @media (width >= 980px) {
    .w-spoof {
      display: grid;
      grid-template-columns: 1.4fr 1fr;
      & .work-visual { border-bottom: 0; border-right: 1px solid var(--line); }
      & .work-copy { padding: clamp(2rem, 3.5vw, 3rem); }
    }
  }

  /* Visual: SpoofVis-kartta (tarkoituksella tumma kummassakin teemassa, kuten oikea sovellus) */
  .sv {
    border-radius: var(--r-md);
    border: 1px solid oklch(1 0 0 / 0.12);
    background: oklch(0.2 0.02 268);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    color: oklch(0.95 0.005 268);
  }
  .sv-bar {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.55rem 0.85rem;
    border-bottom: 1px solid oklch(1 0 0 / 0.08);
    background: oklch(0.17 0.02 268);
    font-size: 0.68rem;
    white-space: nowrap;
    overflow: hidden;

    & > b { font-size: 0.82rem; letter-spacing: -0.02em; & span { color: oklch(0.72 0.14 250); } }
  }
  .sv-conn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: oklch(0.78 0.02 268);
    & i { width: 6px; height: 6px; border-radius: 50%; background: oklch(0.8 0.17 150); animation: live-sv 2s infinite; }
  }
  .sv-stat { color: oklch(0.62 0.02 268); & b { color: oklch(0.95 0.005 268); font-variant-numeric: tabular-nums; } }
  .sv-alert {
    margin-left: auto;
    padding: 0.12rem 0.55rem;
    border-radius: 999px;
    font-weight: 700;
    color: oklch(0.98 0 0);
    background: oklch(0.55 0.2 25);
    animation: sv-alert 2.4s ease-in-out infinite;
  }
  @media (width < 560px) { .sv-bar .hide-sm { display: none; } }

  .sv-map { width: 100%; height: auto; aspect-ratio: 640 / 360; }
  .sv-sea { fill: oklch(0.21 0.025 280); }
  .sv-land { fill: oklch(0.255 0.012 268); stroke: oklch(1 0 0 / 0.07); }
  .sv-lake { fill: oklch(0.21 0.025 280); }
  .sv-city { fill: oklch(1 0 0 / 0.55); }
  .sv-city-label { fill: oklch(1 0 0 / 0.5); font: 500 8.5px var(--font-sans); }
  .sv-sea-label { fill: oklch(1 0 0 / 0.28); font: 600 9px var(--font-sans); letter-spacing: 0.25em; }
  .sv-hex {
    fill: oklch(0.55 0.22 292 / var(--o));
    stroke: oklch(0.72 0.18 292 / 0.55);
    stroke-width: 1;
  }
  .sv-sector { fill: oklch(0.75 0.17 55 / 0.18); stroke: oklch(0.78 0.16 55 / 0.8); stroke-width: 1; }
  .sv-sector.core { fill: oklch(0.75 0.17 55 / 0.35); animation: sv-glow 3s ease-in-out infinite; }
  .sv-sector.s2 { animation: sv-glow 3s ease-in-out infinite 1.5s; }
  .sv-bearing { fill: none; stroke: oklch(0.75 0.13 230 / 0.7); stroke-width: 1.2; stroke-dasharray: 5 5; animation: dash 1.6s linear infinite; }
  .sv-bearing.red { stroke: oklch(0.65 0.2 25 / 0.75); }
  .sv-origin { fill: oklch(0.98 0 0); stroke: oklch(0.75 0.17 55); stroke-width: 2; }
  .sv-ship { fill: oklch(0.93 0.03 260); stroke: oklch(0.65 0.12 255); stroke-width: 0.7; }
  .sv-ship.flag { fill: oklch(0.98 0 0); }
  .sv-ring {
    fill: none;
    stroke-width: 1.8;
    transform-box: fill-box;
    transform-origin: center;
    animation: sv-ring 2.6s ease-out infinite var(--d);
    &.o { stroke: oklch(0.8 0.16 65); }
    &.r { stroke: oklch(0.65 0.21 25); }
    &.b { stroke: oklch(0.72 0.13 235); }
  }

  .w-results { --tint: var(--volt); }
  .w-booking { --tint: var(--aqua); }
  .w-tickets { --tint: var(--violet); }
  .w-home    { --tint: var(--rose); }

  .work-copy {
    display: grid;
    gap: 0.7rem;
    padding: clamp(1.4rem, 2.5vw, 2rem);
    & h3 { font-size: var(--step-2); }
    & p { color: var(--muted); font-size: 0.97rem; }
    & .tags { margin-top: 0.35rem; }
  }
  .work-kicker {
    font-family: var(--font-mono);
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent) !important;
  }
  .work-link {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 0.5rem;
    font-weight: 600;
    color: var(--accent);
    & .i { transition: translate 0.35s var(--ease-out); }
    &:hover .i { translate: 4px 0; }
    &:hover { text-decoration: underline; text-underline-offset: 0.2em; }
  }
  @media (width < 820px) { .work-grid { grid-template-columns: 1fr; } }

  /* Visual: tulokset */
  .results {
    border-radius: var(--r-md);
    border: 1px solid var(--line-2);
    background: var(--surface);
    backdrop-filter: blur(8px);
    box-shadow: var(--shadow-lg);
    font-size: 0.8rem;
    overflow: hidden;

    & ol { list-style: none; padding: 0.35rem; display: grid; gap: 2px; }
    & li {
      display: grid;
      grid-template-columns: 1.6rem 1fr auto;
      align-items: center;
      gap: 0.6rem;
      padding: 0.5rem 0.65rem;
      border-radius: 9px;
      font-variant-numeric: tabular-nums;
      & span:first-child { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 7px; background: var(--surface-2); font-weight: 700; font-size: 0.72rem; }
      & b { font-family: var(--font-mono); }
    }
    & li:first-child span:first-child { background: var(--volt); color: oklch(0.16 0.02 268); }
    & li.new { animation: highlight 4s ease-in-out infinite; }
  }
  .results-head, .cal-head, .chart-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.75rem 0.9rem;
    border-bottom: 1px solid var(--line);
    font-size: 0.8rem;
    & span { font-size: 0.7rem; color: var(--faint); font-family: var(--font-mono); }
  }
  .live-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.12rem 0.5rem;
    border-radius: 999px;
    background: color-mix(in oklch, var(--bad) 18%, transparent);
    color: var(--bad) !important;
    font-weight: 700;
    letter-spacing: 0.06em;
    & i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: blink 1.2s steps(1) infinite; }
  }

  /* Visual: kalenteri */
  .cal {
    border-radius: var(--r-md);
    border: 1px solid var(--line-2);
    background: var(--surface);
    backdrop-filter: blur(8px);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
  }
  .cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    padding: 0.7rem;
    font-size: 0.68rem;
    font-variant-numeric: tabular-nums;

    & span {
      display: grid;
      place-items: center;
      aspect-ratio: 1.35;
      border-radius: 7px;
      color: var(--muted);
      background: var(--surface-2);
    }
    & .h { background: none; color: var(--faint); font-weight: 600; aspect-ratio: auto; padding-block: 0.15rem; }
    & .x { background: none; }
    & .b { background: color-mix(in oklch, var(--aqua) 30%, transparent); color: var(--text); }
    & .b2 { background: color-mix(in oklch, var(--violet) 32%, transparent); color: var(--text); }
    & .today { box-shadow: 0 0 0 1.5px var(--accent) inset; color: var(--text); font-weight: 700; }
  }

  /* Visual: lippu */
  .ticket {
    display: grid;
    grid-template-columns: 1fr auto;
    border-radius: var(--r-md);
    background: var(--surface);
    border: 1px solid var(--line-2);
    box-shadow: var(--shadow-lg);
    rotate: -3deg;
    overflow: hidden;
    mask:
      radial-gradient(circle 11px at calc(100% - 7.2rem) 0, transparent 98%, #000) top / 100% 51% no-repeat,
      radial-gradient(circle 11px at calc(100% - 7.2rem) 100%, transparent 98%, #000) bottom / 100% 51% no-repeat;
  }
  .ticket-main {
    display: grid;
    gap: 0.2rem;
    padding: 1.2rem 1.3rem;
    & small { font-family: var(--font-mono); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent); }
    & b { font-size: 1.4rem; letter-spacing: -0.03em; }
    & > span { color: var(--muted); font-size: 0.82rem; }
  }
  .ticket-row {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.4rem;
    & em { font-style: normal; font-size: 0.7rem; padding: 0.15rem 0.5rem; border-radius: 6px; background: var(--surface-2); color: var(--text); }
  }
  .ticket-stub {
    display: grid;
    place-items: center;
    width: 7.2rem;
    padding: 1rem;
    border-left: 2px dashed var(--line-2);
  }
  .qr {
    width: 4.6rem;
    aspect-ratio: 1;
    padding: 5px;
    border-radius: 8px;
    background: oklch(0.98 0 0);
    & svg { width: 100%; height: 100%; }
  }

  /* Visual: kaavio */
  .chart {
    color: var(--rose);
    border-radius: var(--r-md);
    border: 1px solid var(--line-2);
    background: var(--surface);
    backdrop-filter: blur(8px);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    & .chart-head b { color: var(--text); }
    & svg { width: 100%; height: 130px; }
    & .area { fill: url(#g-area); }
    & .line { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
    .in & svg { animation: draw 2.4s var(--ease-out) both; }
  }

  /* ---------- Prosessi ---------- */
  .process-grid {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: clamp(2rem, 6vw, 6rem);
    align-items: start;
  }
  .sticky-head {
    position: sticky;
    top: calc(var(--header-h) + 2rem);
    & .btn { margin-top: 2rem; }
  }
  .timeline {
    --rail: 2px;
    position: relative;
    display: grid;
    gap: 1rem;

    /* kisko */
    &::before, &::after {
      content: "";
      position: absolute;
      left: calc(1.7rem - var(--rail) / 2);
      top: 1.7rem;
      bottom: 1.7rem;
      width: var(--rail);
      border-radius: var(--rail);
      background: var(--line-2);
    }
    /* täyttyvä kisko (scroll-driven) */
    &::after {
      background: linear-gradient(180deg, var(--volt), var(--aqua), var(--violet));
      transform-origin: top;
      scale: 1 1;
    }
  }
  @supports (animation-timeline: view()) {
    .timeline::after {
      animation: rail linear both;
      animation-timeline: view();
      animation-range: entry 60% cover 75%;
    }
  }

  .step {
    position: relative;
    display: grid;
    grid-template-columns: 3.4rem 1fr;
    gap: 1.4rem;
    padding: 1.4rem 1.5rem 1.4rem 0;

    & h3 { font-size: var(--step-2); margin-bottom: 0.5rem; padding-top: 0.6rem; }
    & p { color: var(--muted); margin-bottom: 0.9rem; }
  }
  .step-num {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 3.4rem;
    height: 3.4rem;
    border-radius: 50%;
    border: 1px solid var(--line-2);
    background: var(--bg);
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--accent);
    box-shadow: 0 0 0 6px var(--bg);
  }
  @supports (animation-timeline: view()) {
    .step-num {
      animation: num-lit linear both;
      animation-timeline: view();
      animation-range: entry 100% cover 45%;
    }
  }
  .step-out {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-family: var(--font-mono);
    color: var(--accent);
    border: 1px solid color-mix(in oklch, var(--accent) 30%, transparent);
    background: color-mix(in oklch, var(--accent) 7%, transparent);
    &::before { content: "✓"; }
  }
  @media (width < 900px) {
    .process-grid { grid-template-columns: 1fr; }
    .sticky-head { position: static; margin-bottom: 1rem; }
  }

  /* ---------- Yhteistyömallit ---------- */
  .model-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    align-items: stretch;
  }
  .model {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: clamp(1.6rem, 3vw, 2.3rem);

    & h3 { font-size: var(--step-2); }
    & ul { display: grid; gap: 0.75rem; margin-block: 1rem 2rem; }
    & li { display: flex; gap: 0.65rem; align-items: flex-start; font-size: 0.97rem; }
    & li .i { color: var(--accent); margin-top: 0.2rem; stroke-width: 2.4; }
    & .btn { margin-top: auto; }
  }
  .model-sub { color: var(--muted); }

  /* korostettu malli: pyörivä gradienttireunus (@property --angle) */
  .model.featured {
    border-color: transparent;
    background:
      linear-gradient(var(--bg-2), var(--bg-2)) padding-box,
      conic-gradient(from var(--angle), var(--volt), var(--aqua), var(--violet), var(--volt)) border-box;
    border: 1.5px solid transparent;
    animation: spin-angle 6s linear infinite;
    box-shadow: 0 30px 80px -30px color-mix(in oklch, var(--violet) 50%, transparent);
    transform: scale(1.03);
  }
  .model-badge {
    align-self: flex-start;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 700;
    color: oklch(0.16 0.02 268);
    background: var(--grad);
  }
  @media (width < 960px) {
    .model-grid { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
    .model.featured { transform: none; }
  }

  /* ---------- UKK ---------- */
  .faq-grid {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: clamp(2rem, 6vw, 6rem);
    align-items: start;
  }
  .faq-list {
    display: grid;
    border-top: 1px solid var(--line);
  }
  .faq-list details {
    border-bottom: 1px solid var(--line);

    &::details-content {
      block-size: 0;
      overflow: clip;
      transition: block-size 0.45s var(--ease-out), content-visibility 0.45s allow-discrete;
    }
    &[open]::details-content { block-size: auto; }
  }
  .faq-list summary {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.4rem 0;
    font-size: var(--step-1);
    font-weight: 560;
    letter-spacing: -0.02em;
    cursor: pointer;
    list-style: none;
    transition: color 0.2s;

    &::-webkit-details-marker { display: none; }
    &:hover { color: var(--accent); }

    &::after {
      content: "";
      flex: none;
      width: 2rem;
      height: 2rem;
      border-radius: 50%;
      border: 1px solid var(--line-2);
      background:
        linear-gradient(currentColor, currentColor) center / 11px 1.6px no-repeat,
        linear-gradient(currentColor, currentColor) center / 1.6px 11px no-repeat;
      transition: rotate 0.45s var(--ease-out), background-color 0.3s;
    }
    details[open] > &::after { rotate: 135deg; background-color: color-mix(in oklch, var(--accent) 14%, transparent); }
  }
  .faq-body p { padding-bottom: 1.5rem; color: var(--muted); max-width: 44rem; }
  @media (width < 900px) { .faq-grid { grid-template-columns: 1fr; } }

  /* ---------- Yhteys ---------- */
  .contact-card {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 4.5rem);
    padding: clamp(1.75rem, 5vw, 4rem);
    border-radius: var(--r-xl);
    border: 1.5px solid transparent;
    background:
      radial-gradient(70% 90% at 0% 0%, color-mix(in oklch, var(--violet) 16%, transparent), transparent 60%) padding-box,
      radial-gradient(60% 80% at 100% 100%, color-mix(in oklch, var(--volt) 10%, transparent), transparent 60%) padding-box,
      linear-gradient(var(--bg-2), var(--bg-2)) padding-box,
      conic-gradient(from var(--angle), var(--line-2) 0%, var(--volt) 10%, var(--aqua) 18%, var(--line-2) 30%, var(--line-2) 50%, var(--violet) 62%, var(--line-2) 75%) border-box;
    animation: spin-angle 9s linear infinite;
    box-shadow: var(--shadow-lg);

    & .section-title { font-size: clamp(2.1rem, 1.4rem + 3vw, 3.8rem); }
  }
  .contact-person {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-block: 2.25rem 1.5rem;
    & b { display: block; font-size: 1.1rem; }
    & div span { color: var(--muted); font-size: 0.92rem; }
  }
  .mail-row { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
  .mail-big {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: clamp(1.15rem, 0.9rem + 1.2vw, 1.75rem);
    font-weight: 620;
    letter-spacing: -0.03em;
    background: var(--grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    & .i { color: var(--accent); stroke: var(--accent); }
    &:hover { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 0.2em; }
  }

  .contact-form { display: grid; gap: 1rem; align-content: start; }
  .chips {
    border: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.5rem;

    & legend { margin-bottom: 0.8rem; font-weight: 600; font-size: 0.95rem; }
    & label { position: relative; cursor: pointer; }
    & input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
    & span {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      padding: 0.45rem 0.9rem;
      border-radius: 999px;
      border: 1px solid var(--line-2);
      font-size: 0.88rem;
      color: var(--muted);
      transition: all 0.25s var(--ease-out);
    }
    & label:hover span { border-color: color-mix(in oklch, var(--accent) 50%, transparent); color: var(--text); }
    & label:has(:checked) span {
      border-color: var(--accent);
      color: var(--text);
      background: color-mix(in oklch, var(--accent) 15%, transparent);
      &::before { content: "✓"; color: var(--accent); font-weight: 700; }
    }
    & label:has(:focus-visible) span { outline: 2px solid var(--accent); outline-offset: 2px; }
  }

  .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
  .field {
    position: relative;

    & input, & textarea {
      width: 100%;
      padding: 1.45rem 1rem 0.55rem;
      border-radius: 14px;
      border: 1px solid var(--line-2);
      background: color-mix(in oklch, var(--bg) 55%, transparent);
      outline: none;
      transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
      resize: vertical;
    }
    & textarea { min-height: 8rem; }
    & label {
      position: absolute;
      left: 1rem;
      top: 1rem;
      color: var(--faint);
      pointer-events: none;
      transform-origin: left top;
      transition: translate 0.25s var(--ease-out), scale 0.25s var(--ease-out), color 0.2s;
      & small { font-size: 0.8em; }
    }
    & :is(input, textarea):focus { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in oklch, var(--accent) 16%, transparent); background: var(--bg); }
    & :is(input, textarea):is(:focus, :not(:placeholder-shown)) + label { translate: 0 -0.6rem; scale: 0.78; color: var(--muted); }
    & :is(input, textarea):user-invalid { border-color: var(--bad); }
  }
  .form-note { font-size: 0.8rem; color: var(--faint); text-align: center; }
  .hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
  .contact-form { position: relative; &[hidden] { display: none; } }
  .contact-form [data-submit]:disabled { opacity: 0.7; cursor: progress; }
  .form-fallback-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }

  .form-success {
    display: grid;
    align-content: center;
    justify-items: start;
    gap: 1rem;
    padding: clamp(1.5rem, 3vw, 2.5rem);
    border-radius: var(--r-lg);
    border: 1px solid color-mix(in oklch, var(--ok) 40%, transparent);
    background: color-mix(in oklch, var(--ok) 8%, transparent);
    outline: none;
    animation: rise 0.6s var(--ease-out) both;
    &[hidden] { display: none; }
    & h3 { font-size: var(--step-2); }
    & p { color: var(--muted); }
  }
  .form-success-icon {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    color: oklch(0.16 0.02 268);
    background: var(--ok);
    & .i { width: 1.5rem; height: 1.5rem; stroke-width: 2.6; }
  }

  .form-fallback {
    display: grid;
    justify-items: center;
    gap: 0.75rem;
    padding: 1rem;
    border-radius: 14px;
    border: 1px dashed var(--line-2);
    text-align: center;
    font-size: 0.9rem;
    color: var(--muted);
    &[hidden] { display: none; }
  }
  .form-error { font-size: 0.86rem; color: var(--bad); text-align: center; &:empty { display: none; } }

  @media (width < 900px) { .contact-card { grid-template-columns: 1fr; } }
  @media (width < 520px) { .field-row { grid-template-columns: 1fr; } }

  /* ---------- Footer ---------- */
  .site-footer {
    padding-block: 4.5rem 2rem;
    border-top: 1px solid var(--line);
    background: linear-gradient(180deg, transparent, var(--bg-2));
    overflow: clip;
  }
  .footer-top {
    display: flex;
    justify-content: space-between;
    gap: 3rem;
    flex-wrap: wrap;
  }
  .footer-brand p { margin-top: 0.85rem; color: var(--muted); max-width: 18rem; }
  .footer-nav {
    display: flex;
    gap: clamp(2rem, 6vw, 5rem);
    flex-wrap: wrap;
    & h3 { font-size: 0.8rem; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--faint); font-weight: 500; margin-bottom: 1rem; }
    & ul { display: grid; gap: 0.55rem; font-size: 0.95rem; color: var(--muted); }
    & a:hover { color: var(--text); }
  }
  .footer-word {
    margin-block: clamp(2.5rem, 6vw, 4rem) 1.5rem;
    font-size: clamp(4.5rem, 19vw, 17rem);
    font-weight: 750;
    letter-spacing: -0.065em;
    line-height: 0.8;
    text-align: center;
    background: linear-gradient(180deg, var(--line-2), transparent 92%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    user-select: none;
  }
  .footer-bottom {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding-top: 1.5rem;
    border-top: 1px solid var(--line);
    font-size: 0.86rem;
    color: var(--faint);
    & a:hover { color: var(--accent); }
  }
}

/* ==========================================================================
   MOTION
   ========================================================================== */
@layer motion {
  /* Paljastus skrollatessa: natiivi scroll-driven animaatio, IO-varmistus vanhemmille selaimille */
  @supports (animation-timeline: view()) {
    .reveal {
      animation: reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 70%;
    }
    .kinetic-row {
      animation: kinetic-x linear both;
      animation-timeline: view();
      animation-range: cover;
    }
    .kinetic-row.outline { animation-name: kinetic-x-rev; }
    .model.featured.reveal, .contact-card.reveal {
      animation: reveal linear both, spin-angle 6s linear infinite;
      animation-timeline: view(), auto;
      animation-range: entry 0% entry 70%, normal;
    }
    .contact-card.reveal { animation-duration: auto, 9s; }
  }
  @supports not (animation-timeline: view()) {
    .js .reveal {
      opacity: 0;
      translate: 0 32px;
      transition: opacity 0.9s var(--ease-out), translate 0.9s var(--ease-out);
      &.in { opacity: 1; translate: 0 0; }
    }
  }

  /* View Transition teemanvaihtoon (ympyräpaljastus) */
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }

  @keyframes reveal { from { opacity: 0; translate: 0 48px; scale: 0.98; } to { opacity: 1; translate: 0 0; scale: 1; } }
  @keyframes kinetic-x { from { translate: 5% 0; } to { translate: -30% 0; } }
  @keyframes kinetic-x-rev { from { translate: -40% 0; } to { translate: 0% 0; } }
  @keyframes rail { from { scale: 1 0; } to { scale: 1 1; } }
  @keyframes num-lit {
    from { color: var(--faint); border-color: var(--line-2); background: var(--bg); }
    to { color: oklch(0.16 0.02 268); border-color: transparent; background: var(--accent); }
  }
  @keyframes rise { from { opacity: 0; translate: 0 22px; } to { opacity: 1; translate: 0 0; } }
  @keyframes line-up { from { translate: 0 105%; } to { translate: 0 0; } }
  @keyframes ping { 75%, 100% { scale: 2.6; opacity: 0; } }
  @keyframes blink { 50% { opacity: 0; } }
  @keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }
  @keyframes fill { 0% { scale: 0 1; } 60%, 100% { scale: 1 1; } }
  @keyframes marquee { to { translate: -100% 0; } }
  @keyframes scroll-cue { 0% { translate: 0 0; opacity: 0; } 30% { opacity: 1; } 100% { translate: 0 14px; opacity: 0; } }
  @keyframes bar-grow { from { scale: 1 0; } to { scale: 1 1; } }
  @keyframes dash { to { stroke-dashoffset: -18; } }
  @keyframes hub { 0%, 100% { scale: 1; } 50% { scale: 1.08; } }
  @keyframes typing { 0%, 100% { translate: 0 0; opacity: 0.4; } 50% { translate: 0 -3px; opacity: 1; } }
  @keyframes typing-show { 0% { opacity: 1; } 100% { opacity: 0; } }
  @keyframes live { 0% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--ok) 60%, transparent); } 100% { box-shadow: 0 0 0 10px transparent; } }
  @keyframes draw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
  @keyframes highlight { 0%, 60%, 100% { background: transparent; } 70%, 85% { background: color-mix(in oklch, var(--volt) 16%, transparent); } }
  @keyframes spin-angle { to { --angle: 360deg; } }
  @keyframes sv-ring { 0% { scale: 1; opacity: 1; } 70% { scale: 1.9; opacity: 0; } 71%, 100% { scale: 1; opacity: 1; } }
  @keyframes sv-glow { 0%, 100% { opacity: 0.75; } 50% { opacity: 1; } }
  @keyframes sv-alert { 0%, 100% { box-shadow: 0 0 0 0 oklch(0.55 0.2 25 / 0.6); } 60% { box-shadow: 0 0 0 6px transparent; } }
  @keyframes live-sv { 0% { box-shadow: 0 0 0 0 oklch(0.8 0.17 150 / 0.6); } 100% { box-shadow: 0 0 0 7px transparent; } }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
    .reveal, .kinetic-row, .timeline::after, .step-num { animation: none !important; opacity: 1 !important; translate: none !important; }
    .kinetic-row.outline { translate: -20% 0 !important; }
    .marquee-track { animation: none !important; }
    .marquee { overflow-x: auto; }
  }
}

/* ---------- Tietosuojaseloste (tietosuoja.html) ---------- */
@layer sections {
  .legal {
    padding-top: calc(var(--header-h) + clamp(2rem, 6vw, 4rem));

    & .section-head { margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }
    & .legal-meta { margin-top: 1rem; font-family: var(--font-mono); font-size: var(--step--1); color: var(--faint); }

    & .legal-body {
      max-width: 72ch;
      display: grid;
      gap: 0.9rem;
      color: var(--muted);
    }
    & h2 { margin-top: 1.6rem; font-size: var(--step-1); color: var(--text); }
    & h3 { font-size: 1.05rem; color: var(--text); }
    & strong { color: var(--text); font-weight: 600; }
    & ul { display: grid; gap: 0.5rem; padding-left: 1.2rem; list-style: disc; }
    & li::marker { color: var(--accent); }
    & code { font-family: var(--font-mono); font-size: 0.9em; color: var(--text); }

    & .legal-optout {
      display: grid;
      gap: 0.75rem;
      margin-top: 0.5rem;
      padding: clamp(1.1rem, 3vw, 1.5rem);
      border: 1px solid var(--line-2);
      border-radius: var(--r-md);
      background: var(--surface);
    }
    & .legal-status { color: var(--text); font-weight: 500; }
    & .legal-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
    & .legal-actions [hidden] { display: none; }
  }
}