/* ==========================================================================
   Otack Hub — static CSS
   Ported from shop.otack.com.ua design system (tokens.css + app.css
   @layer components). Tailwind utility classes used in shop markup are
   NOT ported — this file is a self-contained plain-CSS stylesheet.
   ========================================================================== */

/* ── Tokens ────────────────────────────────────────────────────────────── */
:root {
  --bg: #F7F7F7; --surface: #FFFFFF;
  --ink: #14201B; --body: #3E4A44; --muted: #5F6962;
  --line: rgba(20, 32, 27, .10);
  --accent: #18191B; --accent-hover: #2C2E33; --on-accent: #FFFFFF;
  --g-50: #EAF5EF; --g-100: #D6EDE3; --g-600: #0E7A53; --g-700: #0B6648; --g-800: #08503A;
  --success: #16A34A; --danger: #C2371E;
  --tint-cloud: #FBFDFE; --tint-mint: #EAF5EF; --tint-amber: #EFF7FC; --tint-sky: #E8F1F8;
  --footer-bg: #0E0E0E;
  --radius-btn: 12px; --radius-media: 16px; --radius-card: 22px;
  --shadow-sm: 0 8px 24px -12px rgba(20, 32, 27, .18);
  --shadow: 0 24px 60px -28px rgba(20, 32, 27, .28);
  /* Fallback before JS measures the real box (see initHeaderHeight in main.js);
     kept close to the actual rendered height so there's no flash of gap/overlap. */
  --header-h: 92px;
  --font-display: 'Manrope', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-hand: 'Marck Script', cursive;
}

/* ── @font-face ────────────────────────────────────────────────────────── */
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 700; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  src: url('/assets/fonts/manrope-cyrillic-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 700; 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;
  src: url('/assets/fonts/manrope-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 800; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  src: url('/assets/fonts/manrope-cyrillic-800-normal.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 800; 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;
  src: url('/assets/fonts/manrope-latin-800-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  src: url('/assets/fonts/inter-cyrillic-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; 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;
  src: url('/assets/fonts/inter-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  src: url('/assets/fonts/inter-cyrillic-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; 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;
  src: url('/assets/fonts/inter-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  src: url('/assets/fonts/inter-cyrillic-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; 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;
  src: url('/assets/fonts/inter-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Marck Script'; font-style: normal; font-weight: 400; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  src: url('/assets/fonts/marck-script-cyrillic-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Marck Script'; font-style: normal; font-weight: 400; 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;
  src: url('/assets/fonts/marck-script-latin-400-normal.woff2') format('woff2'); }

/* ── Base reset ────────────────────────────────────────────────────────── */
html { scroll-behavior: smooth; overscroll-behavior: none; }
body { font-family: var(--font-body); color: var(--body); background: var(--bg); margin: 0; font-size: 1.125rem; line-height: 1.55; -webkit-font-smoothing: antialiased; overscroll-behavior: none; }
h1, h2, h3 { font-family: var(--font-display); color: var(--ink); font-weight: 800; line-height: 1.08; margin: 0 0 .5em; }
h1 { font-size: clamp(2.25rem, 4vw + 1rem, 3.5rem); letter-spacing: -0.03em; }
h2 { font-size: clamp(1.75rem, 3vw + 0.5rem, 2.5rem); letter-spacing: -0.02em; }
h3 { font-size: 1.5rem; letter-spacing: -0.01em; font-weight: 700; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.main-content { min-height: 60vh; }
:focus-visible { outline: 3px solid var(--g-600); outline-offset: 2px; border-radius: 2px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ── Components (ported from shop app.css @layer components) ───────────── */

/* Handwritten accent (Marck Script) */
.hand-note { font-family: var(--font-hand); font-weight: 400; line-height: 1.3; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.8rem 1.4rem; font-weight: 700; font-size: 0.95rem; border-radius: var(--radius-btn); border: 1.5px solid transparent; transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease; cursor: pointer; text-decoration: none; }
.btn-primary { background: var(--accent); color: var(--on-accent); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--accent-hover); transform: translateY(-1px); }
.btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--line); box-shadow: var(--shadow-sm); }
.btn-ghost:hover { transform: translateY(-1px); border-color: var(--accent); color: var(--accent); }
.btn-on-dark { background: #fff; color: var(--g-800); box-shadow: var(--shadow-sm); }
.btn-on-dark:hover { transform: translateY(-1px); background: var(--g-50); }

/* Cards */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); padding: 1.5rem; }

/* Pill (microcopy / trust badge) */
.pill { display: inline-flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; font-weight: 600; font-size: 0.9rem; color: var(--ink); box-shadow: var(--shadow-sm); }
.pill .pdot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); flex: none; }

/* Reveal-on-scroll */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 500ms ease, transform 500ms ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* Legal / long-form typography */
.prose-legal h2 { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; line-height: 1.2; letter-spacing: -0.02em; color: var(--ink); margin-top: 2.5rem; margin-bottom: 0.75rem; }
.prose-legal h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; line-height: 1.25; color: var(--ink); margin-top: 2rem; margin-bottom: 0.5rem; }
.prose-legal p { line-height: 1.7; margin-bottom: 1rem; color: var(--body); }
.prose-legal ul, .prose-legal ol { padding-left: 1.4rem; margin-bottom: 1rem; }
.prose-legal ul { list-style: disc; }
.prose-legal ol { list-style: decimal; }
.prose-legal li { margin: 0.4rem 0; line-height: 1.6; color: var(--body); }
.prose-legal a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.prose-legal a:hover { color: var(--ink); }
.prose-legal strong { font-weight: 700; color: var(--ink); }
.prose-legal code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em; background: var(--g-50); padding: 0.1em 0.4em; border-radius: 3px; }

/* ── Site chrome (authored for otack-hub — not present in shop as classes) ── */

/* Header: transparent at top (blends into hero below), gains a white bg + soft shadow once scrolled */
.site-header { position: sticky; top: 0; z-index: 50; background: transparent; border-bottom: none; box-shadow: none; transition: background .25s ease, box-shadow .25s ease; }
.site-header.scrolled { background: #FFFFFF; box-shadow: 0 6px 20px -14px rgba(20, 32, 27, .25); }
.site-header .container-page { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: 1rem; }
.site-header__logo { display: flex; align-items: center; gap: 0.6rem; color: var(--ink); }
.site-header__logo img { border-radius: 6px; }
.site-header__logo-text { display: flex; flex-direction: column; gap: 1px; }
.site-header__logo-title { font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; line-height: 1.1; color: var(--ink); }
.site-header__logo-tagline { font-family: var(--font-body); font-style: normal; font-weight: 500; font-size: 0.72rem; line-height: 1.15; color: var(--muted); }
.site-header__nav { display: flex; align-items: center; gap: 1.75rem; }
.site-header__nav ul { display: flex; align-items: center; gap: 1.75rem; list-style: none; margin: 0; padding: 0; }
.site-header__nav li { display: flex; align-items: center; }
.site-header__nav a { color: var(--body); font-weight: 600; font-size: 0.95rem; transition: color 160ms ease; }
.site-header__nav a:hover { color: var(--ink); }
.site-header__actions { display: flex; align-items: center; gap: 0.75rem; }

/* Header CTA: icon + label, compact on mobile */
.site-header__cta { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.site-header__cta::before { content: ""; width: 18px; height: 18px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.78 18.65l.28-4.23 7.68-6.92c.34-.31-.07-.46-.52-.19L7.74 13.3 3.64 12c-.88-.25-.89-.86.2-1.3l15.97-6.16c.73-.33 1.43.18 1.15 1.3l-2.72 12.81c-.19.91-.74 1.13-1.5.71L12.6 16.3l-1.99 1.93c-.23.23-.42.42-.83.42z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.78 18.65l.28-4.23 7.68-6.92c.34-.31-.07-.46-.52-.19L7.74 13.3 3.64 12c-.88-.25-.89-.86.2-1.3l15.97-6.16c.73-.33 1.43.18 1.15 1.3l-2.72 12.81c-.19.91-.74 1.13-1.5.71L12.6 16.3l-1.99 1.93c-.23.23-.42.42-.83.42z'/%3E%3C/svg%3E") center/contain no-repeat; }
@media (max-width: 640px) {
  .site-header__cta { font-size: 0; }
  .site-header__cta::after { content: "Замовити"; font-size: 0.95rem; font-weight: inherit; }
}

/* Header burger (mobile nav toggle) */
.nav-toggle { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: var(--radius-btn); background: var(--surface); cursor: pointer; padding: 0; flex: none; }
.nav-toggle__line { display: block; width: 18px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform 200ms ease, opacity 200ms ease; }
.nav-toggle[aria-expanded="true"] .nav-toggle__line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__line:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile nav panel (toggled via .open by JS — see main.js) */
.mobile-nav { display: none; border-top: 1px solid var(--line); background: var(--surface); }
.mobile-nav.open { display: block; }
.mobile-nav__menu { padding-block: 0.5rem 1rem; display: flex; flex-direction: column; }
.mobile-nav__menu ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.mobile-nav__menu a { padding: 0.65rem 0; font-weight: 600; color: var(--body); display: block; }
.mobile-nav__menu a:hover { color: var(--ink); }

@media (max-width: 767px) {
  .site-header__nav { display: none; }
  .nav-toggle { display: inline-flex; }
}

/* Footer: dark, light text */
.site-footer { background: var(--footer-bg); color: rgba(255, 255, 255, .72); padding-block: 4rem 2rem; }
.site-footer a { color: rgba(255, 255, 255, .72); transition: color 160ms ease; }
.site-footer a:hover { color: #fff; }
.site-footer h4 { font-family: var(--font-display); color: #fff; font-size: 1rem; font-weight: 700; margin: 0 0 1rem; }
.site-footer__grid { display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .site-footer__grid { grid-template-columns: repeat(3, 1fr); } }
.site-footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.site-footer__col a { font-size: 0.9rem; }
.site-footer__bottom { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, .12); font-size: 0.85rem; display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; }
.site-footer__bottom p { margin: 0; }
.site-footer__madewith { color: rgba(255, 255, 255, .55); font-weight: 600; }

/* Requisites bar: narrow strip, muted text, on --bg */
.requisites-bar { background: var(--bg); border-top: 1px solid var(--line); padding-block: 0.75rem; }
.requisites-bar .container-page { display: flex; flex-wrap: wrap; justify-content: center; text-align: center; gap: 0.5rem 1.5rem; }
.requisites-bar, .requisites-bar a { color: var(--muted); font-size: 0.8rem; line-height: 1.5; }
.requisites-bar a { text-decoration: underline; text-underline-offset: 2px; }
.requisites-bar a:hover { color: var(--ink); }

/* Product card: card variant with hover-lift */
.product-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); overflow: hidden; display: flex; flex-direction: column; transition: transform 200ms ease, box-shadow 200ms ease; }
.product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.product-card__media { border-radius: 0; overflow: hidden; background: var(--tint-cloud); aspect-ratio: 4 / 3; }
.product-card__media img { width: 100%; height: 100%; object-fit: cover; }
.product-card__body { padding: 1.25rem 1.5rem 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.product-card__title { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; color: var(--ink); }
.product-card__price { font-weight: 700; color: var(--ink); margin-top: auto; }

/* Cookie banner: CMS renders its own markup/inline styles (#nwl-cookie-banner);
   this is a light polish hook only, not a layout definition. */
#nwl-cookie-banner { font-family: var(--font-body); }

/* ── Home page sections (hero/products/tech/pricing/cta — views/core/pages/home.html) ── */

/* Hero: white-to-blue wash + faint dot-pattern, so the sticky header above blends in with no hard edge.
   The header sits in normal flow above .hero (position: sticky, not removed from the flow), so its
   own box reserves --header-h of space at the very top of the page. To make the hero's background
   reach y=0 (i.e. also cover the area behind the transparent header, not just below it), the section
   is pulled up by exactly that height (negative margin) and the same amount is added back as
   padding so the visible title/copy still clears the header — net vertical position of every
   section below is unchanged, only the background paints further up. */
.hero { text-align: center; position: relative; overflow: hidden; background: linear-gradient(180deg, #FFFFFF 0%, #F4F8FC 30%, #EFF7FC 100%); }
.section.hero { margin-top: calc(-1 * var(--header-h)); padding-top: calc(var(--header-h) + 100px); }
.hero::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at 1px 1px, rgba(20, 32, 27, .08) 1px, transparent 0); background-size: 22px 22px; -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .55), transparent 72%); mask-image: linear-gradient(180deg, rgba(0, 0, 0, .55), transparent 72%); pointer-events: none; }
/* NOTE: a live SVG feTurbulence noise overlay was removed here — it rasterized
   on the main thread over the hero (the LCP area) and added ~1s of LCP render
   delay on throttled mobile. The dot-pattern above carries the texture. */
.hero .container-page { max-width: 760px; position: relative; z-index: 1; }
.hero-actions { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 2rem; flex-wrap: wrap; }
.hero-stats { margin-top: 2rem; color: var(--muted); font-weight: 600; font-size: 0.95rem; }
.products h2, .cta h2, .tech h2, .pricing h2 { text-align: center; }
/* Top color === hero's bottom (#EFF7FC / --tint-amber) so the hero→products join
   is a seamless gradient continuation, not a color step (the old feTurbulence
   noise used to blur this seam; matching the stops fixes it for free). */
.products { background: linear-gradient(180deg, var(--tint-amber) 0%, var(--tint-cloud) 100%); padding-bottom: 2.5rem; }
.products h2 { margin-bottom: 2.75rem; }
.cta { text-align: center; background: linear-gradient(180deg, var(--tint-sky) 0%, var(--bg) 100%); }
.cta .container-page { max-width: 640px; }
.product-card { padding: 1.75rem; gap: 0.75rem; text-align: left; transition: transform 200ms ease, box-shadow 200ms ease, background 200ms ease; }
.product-card h3 { margin-bottom: 0; }
.product-card .pill { align-self: flex-start; margin-top: auto; }

/* Product brand colors — terracotta (pages.in.ua), teal (education), black/neutral (shop).
   Card fill stays flat white (var(--surface)); identity comes from the animated conic-gradient
   ring (a glowing brand-colored segment sweeping around the border) + the pill. */
.product-card.variant--pages { --card-brand: #C2410C; --card-brand-soft: rgba(194, 65, 12, .18); }
.product-card.variant--pages .pill { background: #C2410C; color: #fff; border-color: transparent; }
.product-card.variant--education { --card-brand: #0F766E; --card-brand-soft: rgba(15, 118, 110, .18); }
.product-card.variant--education .pill { background: #0F766E; color: #fff; border-color: transparent; }
.product-card.variant--shop { --card-brand: #18191B; --card-brand-soft: rgba(24, 25, 27, .18); }
.product-card.variant--shop .pill { background: #18191B; color: #fff; border-color: transparent; }

/* Animated conic-gradient border ring. Implemented as a double background layer
   (flat white padding-box + spinning conic-gradient border-box) behind a 2px
   transparent border, rather than an inset ::before ring — .product-card has
   overflow:hidden (for media clipping) and no isolated stacking context, so a
   negative-inset pseudo-element would either get clipped or fight z-index with
   ancestor stacking contexts. The border-box technique needs neither. @property
   gives --otk-angle a real <angle> type so the browser interpolates it smoothly
   (plain custom properties animate as a discrete jump otherwise). */
@property --otk-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

.product-card.variant--pages,
.product-card.variant--education,
.product-card.variant--shop {
  border: 2px solid transparent;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    conic-gradient(from var(--otk-angle), var(--card-brand-soft) 0%, var(--card-brand) 22%, var(--card-brand-soft) 45%, var(--card-brand-soft) 100%) border-box;
}

/* The ring spin only runs while the card is on screen (JS toggles .otk-inview via
   IntersectionObserver — see main.js). Default paused so below-the-fold cards do
   no continuous main-thread paint during initial load — keeps Lighthouse TBT low
   and avoids the non-composited-animation cost on a page-load trace. */
.product-card.variant--pages {
  animation: otk-border-spin 4s linear infinite 0s;
  animation-play-state: paused;
}

.product-card.variant--education {
  animation: otk-border-spin 4s linear infinite -1.3s;
  animation-play-state: paused;
}

.product-card.variant--shop {
  animation: otk-border-spin 4s linear infinite -2.6s;
  animation-play-state: paused;
}

.product-card.otk-inview { animation-play-state: running; }

/* Bonus: speed up the sweep on hover — skipped entirely when reduced motion is
   preferred so it can never fight the animation:none rule above. */
@media (prefers-reduced-motion: no-preference) {
  .product-card.variant--pages:hover,
  .product-card.variant--education:hover,
  .product-card.variant--shop:hover {
    animation-duration: 2s;
  }
}

@keyframes otk-border-spin {
  to { --otk-angle: 360deg; }
}

/* This override MUST come after the unconditional ring rule above in source
   order: both match at equal specificity (0,2,0 per selector) whenever reduced
   motion is active, and same-specificity ties are broken by source order, not
   by which one sits inside the @media block. Placed earlier, this would lose
   to the always-applicable rule above. Stop the spin outright rather than just
   shortening it to 0.001ms (the global reduced-motion rule above already does
   that) — the ring freezes at angle 0deg, still a full, static brand-color ring. */
@media (prefers-reduced-motion: reduce) {
  .product-card.variant--pages,
  .product-card.variant--education,
  .product-card.variant--shop { animation: none; }
}

/* Payment strip: card-payment method row — reused under products and under pricing */
.payment-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.75rem 1.5rem; margin-top: 2.75rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.payment-strip__method { display: flex; align-items: center; gap: 0.5rem; }
.payment-strip__method strong { color: var(--ink); font-weight: 700; }
.payment-strip__card-icon { font-size: 18px; color: var(--ink); }
.payment-icon { font-size: 30px; line-height: 1; color: var(--muted); opacity: .8; transition: color 160ms ease, opacity 160ms ease; }
.payment-icon:hover { color: var(--ink); opacity: 1; }
.payment-strip__note { color: var(--muted); font-size: 0.9rem; }

/* Tech-stack cloud */
.tech { background: linear-gradient(180deg, var(--tint-cloud) 0%, var(--tint-mint) 100%); text-align: center; }
.tech-note { color: var(--muted); font-size: 1.05rem; margin-bottom: 2rem; }
.tech-cloud { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.6rem 0.75rem; max-width: 920px; margin-inline: auto; }
.tech-pill { font-size: 0.9rem; }

/* Pricing cards */
.pricing { background: linear-gradient(180deg, var(--tint-mint) 0%, var(--tint-sky) 100%); }
.pricing h2 { margin-bottom: 2.75rem; }
.grid-pricing { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .grid-pricing { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grid-pricing { grid-template-columns: repeat(4, 1fr); } }
.pricing-card { display: flex; flex-direction: column; gap: 0.6rem; position: relative; }
.pricing-card h3 { min-height: 3.35rem; }
.pricing-card__price { margin: 0.25rem 0 0; }
.pricing-card__desc { flex: 1; font-size: 0.95rem; }
.pricing-card.featured { border: 2px solid var(--accent); box-shadow: var(--shadow); }
.pricing-card.featured::before { content: "ХІТ"; position: absolute; top: -0.75rem; left: 1.5rem; background: var(--danger); color: #fff; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; border-radius: 999px; padding: 0.35rem 0.9rem; box-shadow: 0 6px 16px -6px rgba(194, 55, 30, .55); }
.price-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--g-50); color: var(--g-700); border-radius: 999px; padding: 0.4rem 0.9rem; font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; }
.price-was { display: none; color: var(--muted); text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: var(--danger); font-weight: 600; font-size: 0.95rem; margin-right: 0.5rem; }
.pricing-card.featured .price-was { display: inline-flex; }

/* ── Utilities ─────────────────────────────────────────────────────────── */
.container-page { max-width: 1180px; margin-inline: auto; padding-inline: 1.25rem; }
.section { padding-block: 5rem; }
@media (max-width: 767px) { .section { padding-block: 3rem; } }
.grid-products { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .grid-products { grid-template-columns: repeat(3, 1fr); } }

/* ── Legal pages (offer/privacy/cookies — views/core/pages/{offer,privacy,cookies}.html) ──
   Badge + big title + lead + "last updated" line, narrow reading column, ported
   from shop.otack.com.ua's legal-content.php hero-style header. */
.legal-wrap { max-width: none; margin-inline: auto; }
.legal-badge {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .4rem .75rem;
  border-radius: 6px;
  margin-bottom: 1.25rem;
}
.legal h1 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: .75rem; }
.legal-lead { font-size: 1.0625rem; line-height: 1.6; color: var(--body); margin: 0 0 .5rem; }
.legal-updated { font-size: .85rem; color: var(--muted); margin: 0 0 2.5rem; }