/*
  Profitway design tokens - GENEROWANE z source/tokens/, nie edytuj tego pliku.

  To repozytorium jest zrodlem prawdy dla calej identyfikacji. Zmiana wartosci
  zaczyna sie w source/tokens/*.json, nie w zadnym projekcie, ktory z niej korzysta.

  Uzycie w aplikacji (kolejnosc ma znaczenie):
    @import "tailwindcss";
    @import "@profitwaypl/design/tokens.css";
    @import "@profitwaypl/design/keyframes.css";

  BREAKPOINTY - WAZNE
  Makiety sa pisane desktop-first z `max-width`, Tailwind jest mobile-first,
  wiec kazdy breakpoint ponizej to wartosc z makiety + 1px.
  Mapowanie: sm 561 | md 821 | lg 961 | xl 1151 | 2xl 1601
*/

@theme {
  /* ---------- Colors: surfaces ---------- */
  /* Page background - the brand Dark Gray #0E0E0E. The sticky header paints it at 82%. */
  --color-bg: #0e0e0e;
  /* Alternating band background (Section tone "alt"), one step above the page black; also the camera notch of the hero showreel laptop. */
  --color-bg-alt: #111111;
  /* Deepest black: footer, video and device frames, the dark logo tile, terminal-like insets. */
  --color-bg-deep: #0b0b0b;
  /* Default card on the page background - cards, form cards, FAQ items, cookie banner; shadcn --card. */
  --color-surface: #161616;
  /* Quieter panel fill: popup shell, contact dock, sidebar tiles; shadcn --muted. */
  --color-surface-2: #141414;
  /* Raised fill: login input, hovered cards, the dark marketing button. */
  --color-surface-3: #191919;
  /* Warm-tinted tile - case study rows, process and diagnosis panels (with --color-line-warm). */
  --color-surface-warm: #141210;
  /* Highlighted row/tile inside a popup: hovered choice buttons, the free
     onboarding slot, the "Profitway" comparison column (Popup.dc.html). */
  --color-surface-warm-highlight: #161210;
  /* Hover fill of the dark marketing button - a warmer step than --color-surface-3. */
  --color-surface-warm-2: #1d1410;
  /* Services "Nie wiesz, od czego zacząć" panel gradient start (Strona-Glowna.dc.html #uslugi). */
  --color-surface-warm-3: #1a1310;
  /* Partnerships in-house tools tile gradient start (Strona-Glowna.dc.html "Certyfikaty" section). */
  --color-surface-warm-4: #201410;
  /* Case study award tile: `linear-gradient(165deg,#1c1613,#131313 62%)`
     (Strona-Glowna.dc.html, #case). */
  --color-surface-award: #1c1613;
  /* End stop of the case study award tile gradient that starts at --color-surface-award. */
  --color-surface-award-end: #131313;
  /* Mega menu panel and the Kontakt hero card; shadcn --popover. */
  --color-surface-mega: #121212;
  /* Chip / icon-tile fill, also the mega menu icon box background. */
  --color-surface-4: #1c1c1c;
  /* Row hover fill: mega menu items and mobile sheet links (Naglowek.dc.html). */
  --color-surface-hover: #1b1b1b;
  /* Mobile navigation sheet background (Naglowek.dc.html). */
  --color-surface-sheet: #101010;
  /* Hero social-proof card fill - the mockup paints it at 60% (rgba(32,32,32,.6)). */
  --color-surface-glass: #202020;
  /* Laptop lid/body of the hero showreel mockup (Strona-Glowna.dc.html #top). */
  --color-mock-shell: #0c0c0c;
  /* Webcam dot on that lid (Strona-Glowna.dc.html #top). */
  --color-mock-camera: #2f2f2f;
  /* Testimonial bento card avatar fallback fill (Strona-Glowna.dc.html #opinie, `[data-op-card]`). */
  --color-surface-avatar: #1d1d1d;
  /* Testimonial phone mockup: bezel gradient dark stop and screen fill (#opinie, `[data-op-tilt]`). */
  --color-surface-phone: #0a0a0a;
  /* Screen fill inside the testimonial phone mockup (#opinie). */
  --color-surface-screen: #0d0d0d;
  /* /opinie sidebar rating tile gradient (Opinie.dc.html, `[data-op-side]` first tile). */
  --color-surface-rating: #1b1512;
  /* End stop of the /opinie rating tile gradient that starts at --color-surface-rating. */
  --color-surface-rating-end: #131313;
  /* Lead popup card gradient start - `linear-gradient(168deg,#191412,#141414 46%)` (Popup.dc.html `[data-pw-card]`). */
  --color-surface-popup: #191412;
  /* Inset panel inside the popup card - the leak counter box (Popup.dc.html). */
  --color-surface-inset: #0f0f0f;
  /* Hovered option row in the floating contact dock (Strona-Glowna.dc.html `[data-dock-opt]:hover`). */
  --color-surface-dock-hover: #1f1a17;
  /* Popup backdrop tint, painted at 74% over the page (Popup.dc.html). */
  --color-scrim: #080808;

  /* ---------- Colors: lines ---------- */
  /* Default hairline: card borders, dividers, table rules; shadcn --border. */
  --color-line: #242424;
  /* Quieter divider inside cards and in the footer - one step below --color-line. */
  --color-line-soft: #1c1c1c;
  /* Stronger outline: chips, device frames, the dark marketing button. */
  --color-line-strong: #2a2a2a;
  /* Header and footer rules, the language switcher and popup inset rows. */
  --color-line-nav: #232323;
  /* Form field border - inputs, selects, mobile sheet controls; shadcn --input. */
  --color-line-input: #2c2c2c;
  /* Outline button border (hero "ZOBACZ USŁUGI" and friends). */
  --color-line-btn: #3a3a3a;
  /* Mega menu panel border (Naglowek.dc.html). */
  --color-line-mega: #262626;
  /* Warm hairline - services panel border (#uslugi, mockup #2a221c) and the case
     study rows (#case, mockup #2a2119); unified on one value, delta is sub-visible. */
  --color-line-warm: #2a221c;
  /* Warm hairlines on the case study award tile (Strona-Glowna.dc.html, #case). */
  --color-line-award: #2e2620;
  /* Testimonial bento card footer divider (#opinie, `[data-op-card]`). */
  --color-line-hairline: #212121;
  /* Testimonial phone mockup bezel border (#opinie, `[data-op-tilt]`). */
  --color-line-phone: #313131;
  /* Testimonial phone mockup story header bottom border (#opinie, `[data-story-bars]`). */
  --color-line-story: #1e1e1e;
  /* /opinie sidebar rating tile border (Opinie.dc.html, `[data-op-side]` first tile). */
  --color-line-rating: #2c2420;
  /* Warm hairline around the lead popup card (Popup.dc.html `[data-pw-card]`). */
  --color-line-popup: #2c2620;
  /* Contact dock panel and option rows, and the popup budget slider track
     (Strona-Glowna.dc.html `[data-dock-panel]`, Popup.dc.html `input[type=range]`). */
  --color-line-dock: #2b2b2b;
  /* Popup close button and phone field, dock "ONLINE TERAZ" badge (Popup.dc.html, Strona-Glowna.dc.html). */
  --color-line-control: #2e2e2e;

  /* ---------- Colors: brand + status ---------- */
  /* Profitway Orange #FF5900: CTA, active state, one highlight per view, bullets.
     An accent, never a background plane. */
  --color-accent: #ff5900;
  /* Hover step of the accent - primary button and orange links. An implementation shade, not a brand colour. */
  --color-accent-hover: #ff7a33;
  /* Pressed / darker accent - promo bar hover (Naglowek.dc.html). */
  --color-accent-dark: #e85100;
  /* Lighter orange for small labels and pills on dark surfaces; middle stop of the AI heading gradient. */
  --color-accent-light: #ff8a3d;
  /* Status: available, online, consent granted - dots and pill borders. */
  --color-success: #22c55e;
  /* Success text on dark surfaces - thank-you states, terminal OK lines, success pills. */
  --color-success-light: #4ade80;
  /* Errors: form validation and wrong answers in the quiz popups; shadcn --destructive. */
  --color-danger: #ff6a5e;
  /* Status: limited availability (the availability pill). */
  --color-warn: #f59e0b;
  /* Middle stop of the rocket CTA flame gradient. */
  --color-flame-mid: #ffd23f;

  /* Secondary text is expressed as white/45, white/55, white/65 - no extra tokens. */

  /* ---------- Colors: AI console ---------- */
  /* Cool, violet-tinted palette of the AI band and its terminal card
     (Strona-Glowna.dc.html, section [data-screen-label="AI"]). It is the only
     place in the design that leaves the neutral #0e0e0e/#242424 family. */
  --color-ai-band: #0b090c;
  /* Middle stop of the AI band background gradient that starts at --color-ai-band. */
  --color-ai-band-mid: #130b11;
  /* Last stop of the AI heading gradient (#fff 42% -> #ff8a3d 72% -> here). */
  --color-accent-pink: #ff2f7a;
  /* AI terminal card body. */
  --color-terminal: #0c0b10;
  /* AI terminal title bar. */
  --color-terminal-bar: #131118;
  /* Chips inside the AI section - model and prompt pills. */
  --color-terminal-chip: #141216;
  /* AI terminal card border. */
  --color-terminal-edge: #2a2434;
  /* Dividers and chip borders inside the AI terminal. */
  --color-terminal-line: #262030;
  /* `sudo` easter-egg warning - brighter than the amber --color-warn. */
  --color-terminal-warn: #ffc21e;

  /* ---------- Typography scale ---------- */
  --text-h1: 72px;
  --text-h1--line-height: 1.08;
  --text-h1--letter-spacing: -0.02em;
  --text-h1--font-weight: 600;

  --text-h1-md: 44px;
  --text-h1-md--line-height: 1.1;
  --text-h1-md--letter-spacing: -0.02em;
  --text-h1-md--font-weight: 600;

  --text-h1-sm: 36px;
  --text-h1-sm--line-height: 1.1;
  --text-h1-sm--letter-spacing: -0.02em;
  --text-h1-sm--font-weight: 600;

  /* Kontakt hero H1, desktop (Kontakt.dc.html `[data-kt-hero] h1`). */
  --text-h1-kontakt: 58px;
  --text-h1-kontakt--line-height: 68px;
  --text-h1-kontakt--letter-spacing: -0.02em;
  --text-h1-kontakt--font-weight: 600;

  /* Kontakt hero H1, mobile (`@media(max-width:960px)` override). */
  --text-h1-kontakt-sm: 44px;
  --text-h1-kontakt-sm--line-height: 54px;
  --text-h1-kontakt-sm--letter-spacing: -0.02em;
  --text-h1-kontakt-sm--font-weight: 600;

  --text-h2: 50px;
  --text-h2--line-height: 62px;
  --text-h2--letter-spacing: -0.015em;
  --text-h2--font-weight: 600;

  --text-h2-md: 36px;
  --text-h2-md--line-height: 1.14;
  --text-h2-md--letter-spacing: -0.015em;
  --text-h2-md--font-weight: 600;

  --text-h2-sm: 30px;
  --text-h2-sm--line-height: 1.14;
  --text-h2-sm--letter-spacing: -0.015em;
  --text-h2-sm--font-weight: 600;

  /* Desktop-only smaller h2 - Partnerships two-col heading (Strona-Glowna.dc.html
     "Certyfikaty" section). Shares text-h2-sm/-md at the mobile/tablet tiers. */
  --text-h2-compact: 44px;
  --text-h2-compact--line-height: 54px;
  --text-h2-compact--letter-spacing: -0.015em;
  --text-h2-compact--font-weight: 600;

  /* Sub-page desktop h2 (Wspolpraca.dc.html: Przewaga/Case studies/Uslugi/
     Branze/CTA/FAQ all repeat 48/58, vs the homepage's 50/62). Same technique
     as text-h2-compact - shares text-h2-sm/-md at the mobile/tablet tiers. */
  --text-h2-page: 48px;
  --text-h2-page--line-height: 58px;
  --text-h2-page--letter-spacing: -0.015em;
  --text-h2-page--font-weight: 600;

  /* "Odwiedź nas" section heading (Kontakt.dc.html) - single size, no
     responsive override in the mockup. */
  --text-h2-visit: 46px;
  --text-h2-visit--line-height: 56px;
  --text-h2-visit--letter-spacing: -0.015em;
  --text-h2-visit--font-weight: 600;

  --text-h3: 30px;
  --text-h3--line-height: 38px;
  --text-h3--letter-spacing: -0.01em;
  --text-h3--font-weight: 600;

  /* Stats counter number (Strona-Glowna.dc.html #stats). */
  --text-stat: 48px;
  --text-stat--line-height: 1;
  --text-stat--font-weight: 600;

  /* Collaboration step h4 (Strona-Glowna.dc.html #wspolpraca). */
  --text-step-title: 24px;
  --text-step-title--line-height: 32px;
  --text-step-title--font-weight: 600;

  /* Collaboration step paragraph (Strona-Glowna.dc.html #wspolpraca). */
  --text-step-body: 18px;
  --text-step-body--line-height: 28px;

  /* Contact/quick/callback form card heading and their thank-you states (mockup h4, 28/36). */
  --text-title: 28px;
  --text-title--line-height: 36px;
  --text-title--font-weight: 600;

  --text-card: 21px;
  --text-card--line-height: 28px;
  --text-card--font-weight: 600;

  /* Testimonial slider headline (Strona-Glowna.dc.html #opinie, `{{ curQuote }}`).
     Renamed from --text-quote to avoid clashing with the case study pull quote below. */
  --text-quote-slider: 24px;
  --text-quote-slider--line-height: 33px;
  --text-quote-slider--font-weight: 600;

  /* FAQ summary / small card title. */
  --text-title-sm: 18px;
  --text-title-sm--line-height: 26px;
  --text-title-sm--font-weight: 600;

  --text-lead: 22px;
  --text-lead--line-height: 32px;

  /* Pull quote - case study testimonials (Strona-Glowna.dc.html #case, 23/35 light). */
  --text-quote: 23px;
  --text-quote--line-height: 35px;

  --text-body-lg: 19px;
  --text-body-lg--line-height: 29px;

  --text-body: 16px;
  --text-body--line-height: 25px;

  --text-body-sm: 15px;
  --text-body-sm--line-height: 23px;

  /* Attribution line under a name - 15/21 in every mockup that has one. */
  --text-meta: 15px;
  --text-meta--line-height: 21px;

  /* Compact list row title - award rows and their siblings (15/20 semibold). */
  --text-row: 15px;
  --text-row--line-height: 20px;
  --text-row--font-weight: 600;

  /* Promo bar and footer legal bar. */
  --text-body-xs: 14px;
  --text-body-xs--line-height: 22px;

  --text-micro: 13px;
  --text-micro--line-height: 19px;

  /* Tight 13px caption - award row issuer and the other 13/18 captions. */
  --text-micro-tight: 13px;
  --text-micro-tight--line-height: 18px;

  --text-nano: 12px;
  --text-nano--line-height: 17px;

  --text-pico: 11px;
  --text-pico--line-height: 15px;

  --text-btn: 16px;
  --text-btn--line-height: 1.2;
  --text-btn--letter-spacing: 0.06em;
  --text-btn--font-weight: 600;

  --text-btn-sm: 14px;
  --text-btn-sm--line-height: 1.2;
  --text-btn-sm--letter-spacing: 0.08em;
  --text-btn-sm--font-weight: 600;

  --text-eyebrow: 13px;
  --text-eyebrow--line-height: 1.2;
  --text-eyebrow--letter-spacing: 0.16em;
  --text-eyebrow--font-weight: 600;

  /* Cinema-bar labels inside the hero showreel mockup (Strona-Glowna.dc.html #top). */
  --text-spec: 9px;
  --text-spec--line-height: 12px;
  --text-spec--letter-spacing: 0.18em;
  --text-spec--font-weight: 600;

  /* AI console block (Strona-Glowna.dc.html, section [data-screen-label="AI"]):
     column heading 40/50, lead 18/28, checklist 17, console log 14/21, metric
     value 24, banner wordmark 21 and strapline 10, keyboard-hint bar 10.5. */
  --text-h3-lg: 40px;
  --text-h3-lg--line-height: 50px;
  --text-h3-lg--font-weight: 600;

  --text-body-md: 18px;
  --text-body-md--line-height: 28px;

  --text-feature: 17px;

  --text-console: 14px;
  --text-console--line-height: 21px;

  /* Lead popup (Popup.dc.html): the card headline is 27/35 and the thank-you
     headline 26 - one token covers both, the 1px delta is sub-visible. */
  --text-popup-title: 27px;
  --text-popup-title--line-height: 35px;
  --text-popup-title--font-weight: 600;

  /* The big "wyciek budżetu" figure and its <=560px step (Popup.dc.html `[data-leak-main]`). */
  --text-leak: 46px;
  --text-leak--line-height: 1;
  --text-leak--font-weight: 700;

  --text-leak-sm: 38px;
  --text-leak-sm--line-height: 1;
  --text-leak-sm--font-weight: 700;

  --text-metric: 24px;
  --text-console-brand: 21px;
  --text-console-bar: 10.5px;
  --text-console-xs: 10px;

  /* ---------- Layout ---------- */
  /* Mockups use content-box: 1320px CONTENT + 2x48px padding = 1416px outer.
     Tailwind is border-box, so max-w-site must be the outer width for
     `max-w-site px-gutter` to yield exactly 1320px of content. */
  --container-site: 1416px;
  /* Horizontal page padding from lg up (Container: px-gutter-sm lg:px-gutter). */
  --spacing-gutter: 48px;
  /* Horizontal page padding below lg; also the edge inset of card sliders. */
  --spacing-gutter-sm: 24px;
  /* Vertical padding of a large section from lg up (Section size lg). */
  --spacing-section: 128px;
  /* Vertical padding of a medium section from lg up (Section size md). */
  --spacing-section-sm: 104px;
  /* Section padding between sm and lg for both sizes; below sm sections use 56px. */
  --spacing-section-xs: 80px;

  /* ---------- Radii ---------- */
  /* Default card - Card, form cards, service tiles. */
  --radius-card: 14px;
  /* Large feature cards: AI terminal, partnerships tile, showreel lid, dock panel. */
  --radius-card-lg: 16px;
  /* Small cards and inset panels: FAQ items, comparison boxes, case study rows. */
  --radius-card-sm: 12px;
  /* Square icon tile - award rows, model chips (10px, the most common tile radius in the mockups). */
  --radius-tile: 10px;
  /* Contact form card (Strona-Glowna.dc.html #kontakt) - smaller radius than the card family above. */
  --radius-card-xs: 6px;
  /* Dominant CTA/outline button radius in the mockups is 2px; 3px appears on mega-menu/secondary CTAs. */
  --radius-btn: 2px;
  /* Mega menu CTA and secondary buttons. */
  --radius-btn-lg: 3px;
  /* Softer corner for controls that are not CTAs: login inputs, mobile sheet rows, showreel screen. */
  --radius-btn-soft: 8px;
  /* Pills, chips, tags and the language switcher - fully rounded. */
  --radius-pill: 100px;
  /* Text input/select/textarea radius shared by the contact/quick forms (Strona-Glowna.dc.html). */
  --radius-field: 4px;
  /* Compact field radius - Kontakt.dc.html callback widget (phone/day/hour/submit). */
  --radius-field-sm: 6px;
  /* Lead popup card (Popup.dc.html `[data-pw-card]`). */
  --radius-modal: 18px;
  /* Popup CTA / close button and the dock option icon tiles (9px). */
  --radius-control: 9px;

  /* ---------- Gradients ---------- */
  /* Ambient glow behind the hero showreel (Strona-Glowna.dc.html #top). */
  --background-image-hero-glow:
    radial-gradient(ellipse 55% 55% at 74% 48%, rgb(255 89 0 / 0.16), transparent 62%),
    radial-gradient(ellipse 40% 35% at 12% 92%, rgb(255 89 0 / 0.05), transparent 70%);
  /* Corner vignette laid over the showreel footage (Strona-Glowna.dc.html #top). */
  --background-image-screen-vignette: linear-gradient(200deg, transparent 60%, rgb(14 14 14 / 0.45));
  /* Brushed aluminium deck under the laptop lid (Strona-Glowna.dc.html #top). */
  --background-image-mock-deck: linear-gradient(180deg, #414141, #1a1a1a);
  /* Diagonal foil over the "Zdrapka" popup variant (Popup.dc.html `[data-scr-cover]`). */
  --background-image-scratch-cover: repeating-linear-gradient(
    45deg,
    #242424 0 14px,
    #1d1d1d 14px 28px
  );
  /* Lead popup card fill (Popup.dc.html `[data-pw-card]`). */
  --background-image-popup-card: linear-gradient(
    168deg,
    var(--color-surface-popup) 0%,
    var(--color-surface-2) 46%
  );

  /* ---------- Shadows ---------- */
  /* Primary CTA glow (marketing Button, variant primary). */
  --shadow-cta: 0 8px 30px rgb(255 89 0 / 0.3);
  /* Hovered primary CTA - the mockup deepens and drops the glow (Strona-Glowna.dc.html #top). */
  --shadow-cta-lift: 0 14px 40px rgb(255 89 0 / 0.45);
  /* Recording dot in the showreel cinema bars (Strona-Glowna.dc.html #top). */
  --shadow-dot: 0 0 9px var(--color-accent);
  /* Laptop deck drop shadow, softer than --shadow-mock above it (Strona-Glowna.dc.html #top). */
  --shadow-mock-deck: 0 26px 55px rgb(0 0 0 / 0.55);
  /* Highlighted card - the active portfolio slide and the partnerships feature tile. */
  --shadow-premium: 0 24px 70px rgb(255 89 0 / 0.12);
  /* Dialogs and the cookie banner; the app layer Dialog uses it too. */
  --shadow-modal: 0 40px 120px rgb(0 0 0 / 0.75);
  /* Device mockups - the showreel laptop and the device showcase. */
  --shadow-mock: 0 50px 110px rgb(0 0 0 / 0.65);
  /* Mega menu panel. */
  --shadow-mega: 0 34px 80px rgb(0 0 0 / 0.55);
  /* AI terminal card (Strona-Glowna.dc.html [data-ai-terminal] wrapper). */
  --shadow-console: 0 30px 80px rgb(0 0 0 / 0.6);
  /* Testimonial phone mockup bezel shadow (#opinie, `[data-op-tilt]`). */
  --shadow-phone: 0 44px 90px rgb(0 0 0 / 0.65);
  /* Lead popup CTA - deeper than --shadow-cta (Popup.dc.html "ZATRZYMAJ LICZNIK"). */
  --shadow-cta-lg: 0 10px 34px rgb(255 89 0 / 0.35);
  /* Lead popup card - modal drop shadow plus a warm halo (Popup.dc.html `[data-pw-card]`). */
  --shadow-popup:
    0 40px 120px rgb(0 0 0 / 0.75),
    0 0 60px rgb(255 89 0 / 0.1);
  /* Corner bar variant of the lead popup (Popup.dc.html `[data-pw-toast]`). */
  --shadow-popup-toast:
    0 24px 70px rgb(0 0 0 / 0.6),
    0 0 40px rgb(255 89 0 / 0.08);
  /* Floating contact dock panel (Strona-Glowna.dc.html `[data-dock-panel]`). */
  --shadow-dock: 0 26px 60px rgb(0 0 0 / 0.7);
  /* "ONLINE TERAZ" pill clipped to the dock toggle (Strona-Glowna.dc.html `[data-dock-badge]`). */
  --shadow-badge: 0 8px 22px rgb(0 0 0 / 0.55);

  /* ---------- Drop shadows ---------- */
  /* Custom cursor overlays - the text I-beam and the 3D grab hand need to stay
     legible on any background (Strona-Glowna.dc.html `_initCursor`). */
  --drop-shadow-cursor-beam: 0 0 3px rgb(0 0 0 / 0.95), 0 1px 7px rgb(255 89 0 / 0.55);
  /* Custom cursor grab hand - same job as --drop-shadow-cursor-beam above. */
  --drop-shadow-cursor-hand: 0 1px 2px rgb(0 0 0 / 0.75), 0 2px 8px rgb(255 89 0 / 0.45);

  /* ---------- Breakpoints (see header comment) ---------- */
  /* Mockup 560 + 1. Phones end here. */
  --breakpoint-sm: 561px;
  /* Mockup 820 + 1. Tablet portrait. */
  --breakpoint-md: 821px;
  /* Mockup 960 + 1. The desktop layout starts; a mockup's max-width: 960px block becomes the base style. */
  --breakpoint-lg: 961px;
  /* Mockup 1150 + 1. Wide desktop. */
  --breakpoint-xl: 1151px;
  /* Widened from the mockup's 1501 (=1500+1): default-scaled MacBooks report
     1512px and must get the compact treatment, not the full-desktop one. */
  --breakpoint-2xl: 1601px;

  /* ---------- Animations ---------- */
  --animate-marquee: marquee 46s linear infinite;
  --animate-marquee-reverse: marquee-reverse 46s linear infinite;
  --animate-fade-up: fade-up 0.7s ease both;
  --animate-pulse-accent: pulse-accent 2.8s ease-out infinite;
  --animate-pulse-green: pulse-green 2s ease-out infinite;
  --animate-pulse-slot: pulse-slot 2s ease-out infinite;
  --animate-step-pulse: step-pulse 2s ease-out infinite;
  --animate-float: float 6s ease-in-out infinite;
  /* Hero scroll cue - same `float` keyframes, but the mockup runs it at 2.4s. */
  --animate-float-cue: float 2.4s ease-in-out infinite;
  --animate-aurora: aurora 22s ease-in-out infinite;
  --animate-grid-scroll: grid-scroll 3.5s linear infinite;
  --animate-glow: glow 1.6s ease-in-out infinite;
  --animate-blink: blink 1.05s steps(1) infinite;
  --animate-blink-dot: blink-dot 1.1s steps(1) infinite;
  --animate-sheen: sheen 1s ease;
  --animate-launch: launch 0.9s cubic-bezier(0.5, 0, 0.25, 1);
  --animate-flame: flame 0.28s ease-in-out infinite;
  --animate-comet: comet 12s linear infinite;
  --animate-rise: rise 0.22s ease both;
  --animate-pop-in: pop-in 0.38s cubic-bezier(0.16, 1, 0.3, 1) both;
  --animate-back-in: back-in 0.3s ease both;
  --animate-story-fill: story-fill 5s linear forwards;
  --animate-radar: radar 2.4s ease-out infinite;
  --animate-leak-drip: leak-drip 1.6s linear infinite;
  /* Second, offset drip in the popup leak box (Popup.dc.html). */
  --animate-leak-drip-slow: leak-drip 2.3s linear 0.5s infinite;
  --animate-pop-rocket: pop-rocket 1.4s ease-in 0.2s both;
  --animate-scale-beat: scale-beat 1.6s ease-in-out infinite;
  /* /strony-internetowe: panel swaps and the autoplay timer. */
  --animate-panel-wipe: panel-wipe 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
  --animate-panel-row: panel-row 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
  --animate-frame-in: frame-in 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@theme inline {
  /* Headings, buttons, eyebrows. --font-metropolis and --font-figtree come from the app:
     next/font in Next apps, @profitwaypl/design/fonts.css everywhere else. The fallback
     stack is the brandbook's system face (section 2.3). */
  --font-display: var(--font-metropolis), var(--font-figtree), "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* Body copy and sub-headings, Figtree 300 by default. Same brandbook fallback stack. */
  --font-sans: var(--font-figtree), "Helvetica Neue", Helvetica, Arial, sans-serif;
}