@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:400 800;font-display:swap;src:url(../fonts/hanken-grotesk-latin-ext.woff2) format("woff2");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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:400 800;font-display:swap;src:url(../fonts/hanken-grotesk-latin.woff2) format("woff2");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:"Schibsted Grotesk";font-style:normal;font-weight:500 900;font-display:swap;src:url(../fonts/schibsted-grotesk-latin-ext.woff2) format("woff2");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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Schibsted Grotesk";font-style:normal;font-weight:500 900;font-display:swap;src:url(../fonts/schibsted-grotesk-latin.woff2) format("woff2");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}
/* ============================================================
   TAKO WEBDESIGN — DESIGN TOKENS
   Fonts: Schibsted Grotesk (headings) · Hanken Grotesk (UI/body)
   Base grid: 4px · Root font size: 16px
   ============================================================ */

:root {
  /* --- Accent (Sininen, default) --- */
  --acc: #2f6df6;
  --acc-dark: #1f56d6;
  --acc-soft: #eaf1ff;
  --acc-light: #5b8cff;

  /* --- Ink & neutrals --- */
  --footer-black: #080b12;
  --ink: #0e1320;
  --text-primary: #0f141c;
  --surface-dark: #161d2e;
  --text-strong: #3a4452;
  --text-body: #4d5867;
  --text-muted: #5a6675;
  --text-subtle: #64707f;
  --text-subtle-dark: #8a93a3;
  --text-eyebrow: #9aa3b1;

  /* --- Surfaces --- */
  --surface: #ffffff;
  --surface-tint: #fbfcfe;
  --surface-wash: #f7f9fc;
  --surface-fill: #f3f5f9;

  /* --- Borders --- */
  --border-section: #eef0f4;
  --border-card: #e8ebf1;
  --border-control: #dfe3ea;
  --border-on-dark: #232c41;

  /* --- Feedback --- */
  --success: #46d39a;
  --success-bg: #e7f7ee;
  --star: #ffd166;
  --danger: #b3261e;
  --danger-bg: #fdecec;

  /* --- Typography --- */
  --font-display: 'Schibsted Grotesk', system-ui, -apple-system, sans-serif;
  --font-body: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;

  /* Fluid type — viewport 360px to 1200px, root 16px */
  --fs-h1: clamp(2rem, 1.9048vw + 1.5714rem, 3rem);           /* 32 -> 48 */
  --fs-h2: clamp(1.625rem, 1.1905vw + 1.3571rem, 2.25rem);    /* 26 -> 36 */
  --fs-h3: clamp(1.375rem, 0.7143vw + 1.2143rem, 1.75rem);    /* 22 -> 28 */
  --fs-h4: clamp(1.125rem, 0.4762vw + 1.0179rem, 1.375rem);   /* 18 -> 22 */
  --fs-h5: clamp(1rem, 0.2381vw + 0.9464rem, 1.125rem);       /* 16 -> 18 */
  --fs-h6: clamp(0.9375rem, 0.119vw + 0.9107rem, 1rem);       /* 15 -> 16 */
  --fs-lead: clamp(1rem, 0.2381vw + 0.9464rem, 1.125rem);     /* 16 -> 18 */
  --fs-body: clamp(0.9375rem, 0.119vw + 0.9107rem, 1rem);     /* 15 -> 16 */
  --fs-small: clamp(0.8125rem, 0.119vw + 0.7857rem, 0.875rem);/* 13 -> 14 */
  --fs-eyebrow: clamp(0.75rem, 0.119vw + 0.7232rem, 0.8125rem);/* 12 -> 13 */
  --fs-price: clamp(2rem, 1.1905vw + 1.7321rem, 2.625rem);    /* 32 -> 42 */

  /* --- Spacing (4px grid) --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-22: 90px;

  /* --- Layout --- */
  --container: 1200px;
  --gutter: 24px;
  --section-y: clamp(56px, 7vw, 90px);

  /* --- Radii --- */
  --radius-sm: 8px;
  --radius-md: 11px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* --- Shadows --- */
  --shadow-card: 0 14px 30px -18px rgba(20, 30, 55, 0.30);
  --shadow-raised: 0 22px 44px -28px rgba(20, 30, 55, 0.28);
  --shadow-pop: 0 30px 60px -28px rgba(20, 30, 55, 0.34);
  --shadow-cta: 0 10px 24px rgba(47, 109, 246, 0.30);

  /* --- Motion --- */
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- Reset & base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color:var(--text-primary);
  background:var(--surface);
  -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; color:inherit; }
a:hover { color:var(--acc-dark); }
button { font-family: inherit; }
input, select, textarea { font-family: inherit; }
img { max-width:100%; display: block; }

details summary::-webkit-details-marker { display: none; }
details[open] .faq-plus { transform: rotate(45deg); }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Component states (inline styles need !important) ---------- */
.nav-link:hover { background:var(--surface-fill) !important; }
.btn-cta:hover { filter:brightness(1.05) !important; transform: translateY(-1px) !important; }
.field:focus { border-color:var(--acc) !important; box-shadow:0 0 0 3px rgba(var(--acc-rgb,47,109,246),calc(0.12*var(--sh-k,1))) !important; }
.btn-submit:hover { filter:brightness(1.06) !important; }

/* ---------- Derived / editable design variables (Ulkoasu-asetukset overrides these) ---------- */
:root {
  --acc-rgb: 47, 109, 246;
  --acc-light-rgb: 91, 140, 255;
  --r-k: 1;   /* corner rounding multiplier */
  --sh-k: 1;  /* shadow strength multiplier */
}

/* ---------- Header: sticky + mobile menu ---------- */
/* the wrapper div only carries a font-family; without its own box the header sticks for the whole page */
.tako-head { display: contents; }
.nav-toggle { display: none; }
@media (max-width: 960px) {
  .tako-bar { flex-wrap: wrap !important; gap: 12px 16px !important; padding: 12px 16px !important; }
  .tako-bar > a:first-child { flex: 1 1 auto !important; min-width: 0; }
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; padding: 0;
    border: 1.5px solid var(--border-control, #dfe3ea); border-radius: calc(10px*var(--r-k,1)); background: #fff;
    color: var(--text-primary, #0f141c); cursor: pointer;
  }
  .nav-toggle .nt-close, .tako-header.is-open .nav-toggle .nt-open { display: none; }
  .tako-header.is-open .nav-toggle .nt-close { display: block; }
  .tako-nav {
    display: none !important; flex: 1 0 100% !important; flex-direction: column !important; flex-wrap: nowrap !important;
    margin-left: 0 !important; gap: 2px !important; padding-top: 8px; border-top: 1px solid var(--border-section, #eef0f4);
  }
  .tako-nav a { padding: 13px 14px !important; font-size: 16px !important; }
  .tako-bar > .btn-cta { display: none !important; }
  .tako-header.is-open .tako-nav { display: flex !important; }
  .tako-header.is-open .tako-bar > .btn-cta { display: flex !important; flex: 1 0 100% !important; justify-content: center; padding: 14px 19px !important; }
}

/* top bar on phones: centred, balanced lines instead of a left-aligned wrap with an orphan word */
@media (max-width: 560px) {
  .tako-top { justify-content: center !important; text-align: center; gap: 4px 18px !important; padding: 9px 16px !important; font-size: 13px; }
  .tako-top > span { text-wrap: balance; justify-content: center; }
}

/* "Luottavat yritykset" strip: the label gets its own line above the company names on phones */
@media (max-width: 700px) {
  .tako-trust > span:first-child { flex: 0 0 100%; text-align: center; }
}

/* stats tiles: 2 x 2 on phones instead of four tall full-width cards */
@media (max-width: 640px) {
  .tako-stats { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .tako-stats > div { padding: 16px 16px 15px !important; }
  .tako-stats > div > div:first-child { font-size: 30px !important; letter-spacing: -1px !important; line-height: 1.1; }
  .tako-stats > div > div:last-child { font-size: 13.5px !important; margin-top: 4px !important; line-height: 1.35; }
}

/* text-only page heroes (Palvelut, Hinnasto, Referenssit, Yhteystiedot, Tarjouspyyntö): centred and balanced */
.tako-hero-simple { text-align: center; }
.tako-hero-simple > h1 { max-width: 900px !important; margin-left: auto !important; margin-right: auto !important; text-wrap: balance; }
.tako-hero-simple > p { margin-left: auto !important; margin-right: auto !important; max-width: 640px !important; text-wrap: pretty; }

/* Palvelut list cards on phones: icon, text, then a footer row with the price on the left and the arrow button on the right */
@media (max-width: 640px) {
  .tako-svc { gap: 14px !important; padding: 20px !important; align-items: flex-start !important; }
  .tako-svc > div:nth-child(2) { flex: 1 1 100% !important; }
  .tako-svc-price { flex: 1 0 100% !important; justify-content: space-between !important; gap: 12px !important; padding-top: 16px; border-top: 1px solid var(--border-section, #eef0f4); }
  .tako-svc-price > div:first-child { text-align: left !important; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
}

/* very small phones (320px): sections set min-width 300-380px on flex columns, which is wider than the screen with padding */
@media (max-width: 400px) {
  main [style*="min-width"] { min-width: 0 !important; }
}

/* ---------- Header dropdown (Palvelut) ---------- */
.tako-has-sub { position: relative; display: inline-flex; align-items: center; }
.tako-sub {
  position: absolute; top: calc(100% - 2px); left: 0; min-width: 280px; padding: 8px; display: none; flex-direction: column; gap: 2px; z-index: 60;
  background: #fff; border: 1px solid var(--border-card, #e8ebf1); border-radius: calc(14px*var(--r-k,1));
  box-shadow: 0 24px 50px -24px rgba(20,30,55,calc(.35*var(--sh-k,1)));
}
.tako-has-sub:hover > .tako-sub, .tako-has-sub:focus-within > .tako-sub { display: flex; }
.tako-sub a {
  padding: 10px 12px !important; border-radius: calc(9px*var(--r-k,1)); font-size: 15px !important; font-weight: 600 !important;
  color: var(--text-primary, #0f141c) !important; text-decoration: none; white-space: nowrap; background: transparent !important;
}
.tako-sub a:hover, .tako-sub a:focus-visible { background: var(--surface-wash, #f7f9fc) !important; color: var(--acc-dark, #1f56d6) !important; }
.tako-sub a.is-active { color: var(--acc-dark, #1f56d6) !important; }
@media (max-width: 960px) {
  .tako-has-sub { display: block; }
  .tako-sub { position: static; display: flex; min-width: 0; padding: 0 0 4px 16px; border: 0; box-shadow: none; background: transparent; }
  .tako-sub a { white-space: normal; font-size: 15px !important; padding: 10px 14px !important; }
}

/* ---------- Pricing (Hinnasto, home) ---------- */
section[id] { scroll-margin-top: 96px; }
.tako-pgrid { grid-template-columns: minmax(0, 1fr) !important; }
@media (min-width: 640px) { .tako-pgrid-2, .tako-pgrid-3, .tako-pgrid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (min-width: 1000px) { .tako-pgrid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
@media (min-width: 1100px) { .tako-pgrid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } }
.tako-price-card { min-width: 0; }
.tako-price-card .tako-vat { overflow-wrap: anywhere; }
.tako-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.tako-cmp-wrap { overflow-x: auto; background: #fff; border: 1px solid var(--border-card, #e8ebf1); border-radius: calc(18px*var(--r-k,1)); }
.tako-cmp { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.45; }
.tako-cmp th, .tako-cmp td { padding: 14px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid #eef1f6; }
.tako-cmp thead th { font-family: var(--font-display); font-size: 16px; color: var(--ink, #0e1320); background: var(--surface-wash, #f7f9fc); }
.tako-cmp tbody th { width: 24%; font-weight: 700; color: var(--text-primary, #0f141c); }
.tako-cmp tbody td { color: var(--text-strong, #3a4452); }
.tako-cmp tbody tr:last-child > * { border-bottom: 0; }
@media (max-width: 760px) {
  .tako-cmp-wrap { overflow: visible; }
  .tako-cmp, .tako-cmp tbody, .tako-cmp tr, .tako-cmp th, .tako-cmp td { display: block; }
  .tako-cmp thead { display: none; }
  .tako-cmp tr { padding: 12px 0; border-bottom: 1px solid #eef1f6; }
  .tako-cmp tbody tr:last-child { border-bottom: 0; }
  .tako-cmp tbody th { width: auto; border: 0; padding: 2px 16px 8px; font-size: 16px; color: var(--ink, #0e1320); }
  .tako-cmp td { border: 0; padding: 5px 16px; display: flex; gap: 14px; justify-content: space-between; }
  .tako-cmp td::before { content: attr(data-label); flex: 0 0 38%; font-weight: 700; color: var(--text-primary, #0f141c); }
  .tako-cmp td > * { flex: 1; }
}
@media (max-width: 640px) {
  .tako-addon { padding: 16px 18px !important; }
  .tako-addon > div:last-child { text-align: left !important; flex: 1 0 100%; }
}

/* ---------- Quote form: grouped select, extra fields, consent ---------- */
.tako-fieldrow { display: flex; gap: 13px; flex-wrap: wrap; }
.tako-fieldrow > div { flex: 1 1 200px; min-width: 0; }
.tako-hint { font-size: 12.5px; color: var(--text-subtle, #64707f); margin-top: 5px; line-height: 1.4; }
.tako-check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.45; color: var(--text-strong, #3a4452); }
.tako-check input { margin-top: 3px; width: 18px; height: 18px; flex: none; accent-color: var(--acc, #2f6df6); }
.quote-form [aria-invalid="true"] { border-color: var(--danger, #b3261e) !important; }
.quote-form .tako-ferr { color: var(--danger, #b3261e); font-size: 13px; font-weight: 600; margin-top: 5px; }

/* ---------- Accessibility ---------- */
.skip-link {
  position: absolute; left: -9999px; top: 8px; z-index: 100;
  background: var(--ink, #0e1320); color: #fff; padding: 10px 16px; border-radius: 8px; font-weight: 600;
}
.skip-link:focus { left: 12px; }

/* ---------- Editor content (generic pages and posts) ---------- */
.tako-content { color: var(--text-body, #4d5867); font-size: 17px; line-height: 1.7; }
.tako-content > * { margin-top: 0; margin-bottom: 1.1em; }
.tako-content h2, .tako-content h3, .tako-content h4 { font-family: var(--font-display); color: var(--ink, #0e1320); line-height: 1.15; letter-spacing: -.5px; margin-top: 1.8em; }
.tako-content h2 { font-size: var(--fs-h3); }
.tako-content h3 { font-size: var(--fs-h4); }
.tako-content a { color: var(--acc-dark, #1f56d6); text-decoration: underline; }
.tako-content ul, .tako-content ol { padding-left: 1.3em; }
.tako-content img { max-width: 100%; height: auto; border-radius: calc(12px*var(--r-k,1)); }
.tako-content blockquote { margin-left: 0; padding-left: 18px; border-left: 3px solid var(--acc, #2f6df6); color: var(--text-strong, #3a4452); }
.tako-content table { width: 100%; border-collapse: collapse; font-size: 16px; }
.tako-content th, .tako-content td { border-bottom: 1px solid var(--border-card, #e8ebf1); padding: 10px 8px; text-align: left; vertical-align: top; }
.tako-content th { color: var(--ink, #0e1320); font-weight: 700; }
.tako-content h2 { font-size: clamp(24px, 2.6vw, 32px); letter-spacing: -.7px; }
.tako-content h2:first-child { margin-top: 0; }
.tako-content strong { color: var(--text-primary, #0f141c); }
.tako-content li { margin-bottom: .4em; }
.tako-content .tako-facts, .tako-content .tako-note {
  background: var(--surface-wash, #f7f9fc); border: 1px solid var(--border-card, #e8ebf1); border-radius: calc(16px*var(--r-k,1));
  padding: 20px 22px; margin: 1.6em 0; font-size: 16px; line-height: 1.6;
}
.tako-content .tako-facts p, .tako-content .tako-note p { margin: 0 0 .5em; }
.tako-content .tako-facts p:last-child, .tako-content .tako-note p:last-child { margin-bottom: 0; }
.tako-content .tako-faq h3 { margin-bottom: .3em; }
.tako-content .tako-faq p { margin: 0 0 1.2em; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Component states ---------- */
.xh1:hover {
  transform: translateY(-2px) !important;
  filter:brightness(1.05) !important;
}
.xh2:hover {
  border-color:var(--text-primary,#0f141c) !important;
}
.xh3:hover {
  border-color:var(--acc,#2f6df6) !important;
  transform: translateY(-3px) !important;
}
.xh4:hover {
  gap: 13px !important;
}
.xh5:hover {
  border-color:var(--acc,#2f6df6) !important;
}
.xh6:hover {
  transform: translateY(-4px) !important;
  box-shadow:0 24px 44px -26px rgba(20,30,55,calc(.3*var(--sh-k,1))) !important;
}
.xh7:hover {
  filter:brightness(1.06) !important;
}
.xh8:hover {
  border-color:var(--acc,#2f6df6) !important;
  box-shadow:0 22px 44px -28px rgba(20,30,55,calc(.28*var(--sh-k,1))) !important;
}
.xh9:hover {
  transform: translateY(-2px) !important;
  filter:brightness(1.05) !important;
  color:#fff !important;
}
.xh10:hover {
  text-decoration: underline !important;
}
.xh11:hover {
  border-color:var(--acc,#2f6df6) !important;
  transform: translateY(-3px) !important;
}
.xh12:hover {
  background:var(--acc,#2f6df6) !important;
  color:#fff !important;
}
.xh13:hover {
  color:#fff !important;
}
.xh14:hover {
  color:var(--acc,#5b8cff) !important;
}

/* ==========================================================================
   Motion, glow and depth (appended last). Everything here is decoration:
   transform / opacity / box-shadow only, no layout changes, and switched off by
   prefers-reduced-motion (global.css) or Sivuston asetukset -> Ulkoasu -> Animaatiot.
   Glow strength follows the shadow-strength setting (--sh-k).
   ========================================================================== */

@keyframes tako-float-a { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(-48px, 34px, 0) scale(1.1); } }
@keyframes tako-float-b { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(54px, -30px, 0) scale(1.12); } }
@keyframes tako-rise { from { transform: translateY(16px); } to { transform: none; } }
/* transform-only (composited) so Lighthouse has nothing to flag */
@keyframes tako-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03); } }
@keyframes tako-fade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ---------- Hero backgrounds: two slow, soft accent glows behind the content ---------- */
.tako-hero { position: relative; overflow: hidden; isolation: isolate; }
.tako-hero::before, .tako-hero::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; z-index: -1; will-change: transform; }
.tako-hero::before {
  width: 560px; height: 560px; top: -230px; right: -140px;
  background: radial-gradient(circle, rgba(var(--acc-rgb, 47, 109, 246), calc(.20*var(--sh-k, 1))), transparent 70%);
  animation: tako-float-a 15s ease-in-out infinite;
}
.tako-hero::after {
  width: 460px; height: 460px; bottom: -240px; left: -140px;
  background: radial-gradient(circle, rgba(var(--acc-light-rgb, 91, 140, 255), calc(.16*var(--sh-k, 1))), transparent 70%);
  animation: tako-float-b 19s ease-in-out infinite;
}
/* centred page heroes rise in (transform only, so the first paint is never delayed) */
.tako-hero-simple > * { animation: tako-rise .8s cubic-bezier(.2, .7, .2, 1) both; }
.tako-hero-simple > :nth-child(2) { animation-delay: .06s; }
.tako-hero-simple > :nth-child(3) { animation-delay: .12s; }

/* ---------- Dark sections: accent glows ---------- */
main section[style*="--ink"] { position: relative; overflow: hidden; isolation: isolate; }
main section[style*="--ink"]::before, main section[style*="--ink"]::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; z-index: -1; will-change: transform; }
main section[style*="--ink"]::before {
  width: 640px; height: 640px; top: -280px; left: -180px;
  background: radial-gradient(circle, rgba(var(--acc-rgb, 47, 109, 246), calc(.24*var(--sh-k, 1))), transparent 68%);
  animation: tako-float-a 17s ease-in-out infinite;
}
main section[style*="--ink"]::after {
  width: 520px; height: 520px; bottom: -260px; right: -140px;
  background: radial-gradient(circle, rgba(var(--acc-light-rgb, 91, 140, 255), calc(.18*var(--sh-k, 1))), transparent 68%);
  animation: tako-float-b 21s ease-in-out infinite;
}

/* ---------- Header: soft shadow once the page is scrolled ---------- */
.tako-header { transition: box-shadow .3s ease, background-color .3s ease; }
.tako-header.is-scrolled { box-shadow: 0 12px 34px -16px rgba(14, 19, 32, calc(.30*var(--sh-k, 1))); }

/* ---------- Scroll reveal (script adds data-rv, then .is-in; content is visible without script) ---------- */
[data-rv] {
  opacity: 0; transform: translateY(24px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1) !important;
  transition-delay: var(--rv-d, 0ms) !important;
}
[data-rv]:not(.rv-ready) { transition: none !important; }   /* no fade-out flicker for blocks already in view */
[data-rv].is-in { opacity: 1; transform: none; }

/* ---------- Buttons: glow + shine sweep ---------- */
.btn-cta, .xh1, .xh7, .btn-submit { position: relative; overflow: hidden; }
.btn-cta::after, .xh1::after, .xh7::after, .btn-submit::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .38) 50%, transparent 65%);
  transform: translateX(-130%);
}
.btn-cta:hover::after, .xh1:hover::after, .xh7:hover::after, .btn-submit:hover::after { transform: translateX(130%); transition: transform .8s ease; }
.tako-hero .xh1 { animation: tako-breathe 3.6s ease-in-out infinite; }
main .xh1:hover, main .xh7:hover, .btn-submit:hover, .btn-cta:hover {
  box-shadow: 0 16px 44px rgba(var(--acc-rgb, 47, 109, 246), calc(.55*var(--sh-k, 1))) !important;
}

/* ---------- Cards: lift + accent glow, icons tilt ---------- */
main .xh3, main .xh6, main .xh8, main .xh11 { transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s ease, border-color .3s ease !important; }
main .xh3:hover, main .xh6:hover, main .xh8:hover, main .xh11:hover {
  box-shadow: 0 24px 54px -24px rgba(var(--acc-rgb, 47, 109, 246), calc(.50*var(--sh-k, 1))), 0 0 0 1px rgba(var(--acc-rgb, 47, 109, 246), .32) !important;
}
main .xh3 > div:first-child, main .xh8 > div:first-child, main .xh11 > div:first-child { transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); }
main .xh3:hover > div:first-child, main .xh8:hover > div:first-child, main .xh11:hover > div:first-child { transform: translateY(-3px) scale(1.1) rotate(-5deg); }

/* highlighted price card (has the "Suosituin" badge) glows */
main div:has(> span[style*="top:-13px"]) {
  box-shadow: 0 30px 64px -30px rgba(var(--acc-rgb, 47, 109, 246), calc(.60*var(--sh-k, 1))), 0 0 0 1px rgba(var(--acc-rgb, 47, 109, 246), .45) !important;
}

/* stat tiles and feature cards: gentle hover lift */
.tako-stats > div { transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s ease; }
.tako-stats > div:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -22px rgba(var(--acc-rgb, 47, 109, 246), calc(.45*var(--sh-k, 1))); }

/* floating hero chips keep the design's own float; give the score card a slow drift too */
.tako-hero [style*="position:absolute"][style*="box-shadow"]:not([style*="animation"]) { animation: tako-float-b 9s ease-in-out infinite; }

/* ---------- FAQ ---------- */
details[open] > p { animation: tako-fade .3s ease both; }
details > summary { transition: color .2s ease; }
details > summary:hover { color: var(--acc-dark, #1f56d6) !important; }
details { transition: box-shadow .3s ease, border-color .3s ease; }
details[open] { box-shadow: 0 18px 40px -26px rgba(var(--acc-rgb, 47, 109, 246), calc(.40*var(--sh-k, 1))); border-color: rgba(var(--acc-rgb, 47, 109, 246), .35) !important; }

/* ---------- Form fields ---------- */
.field { transition: border-color .2s ease, box-shadow .2s ease; }

/* ---------- Off switch (Sivuston asetukset -> Ulkoasu -> Animaatiot) ---------- */
.tako-still *, .tako-still *::before, .tako-still *::after { animation: none !important; transition: none !important; }
.tako-still [data-rv] { opacity: 1 !important; transform: none !important; }