/* ==========================================================================
   Yapay Zeka ile Oyun Rehberi: shared stylesheet (css/style.css)
   Turkish (tr) · LTR · mobile-first · breakpoints 360 / 768 / 1200
   Editorial warm cream + purple #6C5CE7 / amber #FFB84D / teal #00C2A8 / ink #1F2340

   MARKUP CONTRACT (every page)
   <html lang="tr" dir="ltr">   JS adds html.js (always) and html.js-reveal (opt-in scroll reveal)
   <body>                       JS toggles body.is-locked while the menu or lightbox is open
     <a class="skip-link" href="#main">İçeriğe geç</a>
     <header class="site-header" data-site-header>             (+ .is-scrolled)
       <div class="container site-header__inner">
         <a class="brand" href="index.php"><span class="brand__mark" aria-hidden="true"></span><span class="brand__name">Brand</span></a>
         <button class="nav-toggle" type="button" aria-expanded="false" aria-controls="site-nav" data-nav-toggle>
           <span class="nav-toggle__bar" aria-hidden="true"></span><span class="visually-hidden">Menü</span></button>
         <nav class="site-nav" id="site-nav" data-nav aria-label="Ana menü">   (+ .is-open; toggle gets aria-expanded="true" / .is-open)
           <ul class="site-nav__list"><li><a class="site-nav__link" href="index.php" aria-current="page">Ana Sayfa</a></li>…</ul>
     <div class="page-shell page-shell--rail">   (page-shell optional; --rail adds the sticky side rail at ≥1200px)
       <aside class="side-rail" aria-label="Sayfa içi"><p class="side-rail__title">…</p>
         <ul class="side-rail__list"><li><a class="side-rail__link is-active" href="#bolum">…</a></li></ul></aside>
       <main id="main" tabindex="-1"> … sections … </main>
     </div>
     <footer class="site-footer"><div class="container site-footer__inner">
       <a class="brand">…</a>
       <nav aria-label="Alt menü"><ul class="site-footer__list"><li><a class="site-footer__link" href="…">…</a></li></ul></nav>
       <p class="site-footer__legal">© … <a href="…">Gizlilik</a></p></div></footer>

   HERO (split-screen, stat-led)
   <section class="hero [hero--compact] [hero--solo]"><div class="container hero__grid">
     <div class="hero__copy">
       <p class="hero__stat"><span class="hero__stat-value">3 adım</span><span class="hero__stat-label">…</span></p>
       <h1 class="hero__title">…</h1><p class="hero__lead">…</p>
       <div class="hero__actions">
         <a class="cta-link" data-cta="primary" href="game.php">Örnek Oyunu İncele</a>
         <a class="btn btn--secondary" href="faq.php">Sık Sorulan Sorular</a></div></div>
     <div class="hero__visual"><figure class="hero__figure"><img class="hero__image" src="img/hero-graphic.jpg" alt="…" width="1024" height="1024">
       <span class="hero__badge">…</span></figure></div></div></section>
   hero--solo = no visual (single column); hero--compact = shorter padding.

   SECTIONS
   <section class="section [section--tint|section--layered|section--art]" id="…"><div class="container">
     <header class="section-head"><p class="eyebrow">…</p><h2 class="section-title">…</h2><p class="section-lead">…</p></header> …
   Steps:   <ol class="steps__list"><li class="step-card"><span class="step-card__num">1</span><h3 class="step-card__title">…</h3><p class="step-card__text">…</p></li>…</ol>
   Cards:   .card-grid > .card (.card__title, .card__text); bullets: ul.check-list
   Showcase row: .showcase [.showcase--reverse] > .showcase__media + .showcase__body
   Sample game: .game-frame > .game-frame__bar (.game-frame__dot ×3, .game-frame__title)
                + .game-stage[data-game-stage] (canvas.game-stage__canvas, .game-hud > .game-hud__item,
                  .game-overlay[data-game-overlay] with .btn) + .game-controls > .game-controls__btn[data-game-control]
                states: .game-stage.is-playing / .is-paused / .is-over; .game-controls__btn.is-pressed
   Prompts: ol.prompt-list > li.prompt-step (.is-active) > span.prompt-step__num + div
            (p.prompt-step__label, blockquote.prompt-bubble, p.prompt-step__result)
   FAQ:     .faq-list > .faq-item[data-faq-item] (.is-open) >
              h3.faq-item__heading > button.faq-item__question[aria-expanded][aria-controls][data-faq-trigger]
                 (text + span.faq-item__icon[aria-hidden])
              + div.faq-item__answer[id][role=region][data-faq-panel] > div.faq-item__answer-inner > p
            JS toggles .is-open on .faq-item and aria-expanded on the button (never the hidden attribute).
            Without html.js every answer stays visible.
   CTA band (colour moment): <section class="cta-band"><div class="container cta-band__inner">
     <div><h2 class="cta-band__title">…</h2><p class="cta-band__text">…</p></div>
     <div class="cta-band__actions"><a class="cta-link" data-cta="primary" href="game.php">Örnek Oyunu İncele</a>
       <a class="text-link" href="faq.php">…</a></div></div></section>
   Gallery: ul.gallery-grid > li > button.gallery-thumb[data-lightbox-src][data-lightbox-alt] > img
   Lightbox: div.lightbox[data-lightbox][role=dialog][aria-modal=true][hidden] (.is-open) >
             .lightbox__backdrop[data-lightbox-close] + figure.lightbox__figure (img.lightbox__img, figcaption.lightbox__caption)
             + button.lightbox__close / .lightbox__prev / .lightbox__next
   Contact: .contact-split > .contact-split__info (ul.contact-list > li.contact-list__item, p.trust-note)
            + .contact-split__form > form.form[data-form] > .field (label.field__label, .field__input, .field__hint, .field__error)
            + button.btn.btn--solid + p.form-status[role=status]
            field states: .field.is-invalid / .is-valid, [aria-invalid="true"]; form.is-submitting; .form-status.is-success / .is-error
   Documents: <article class="doc"> h1/h2/h3, p, ul/ol, blockquote, .doc__meta
   Buttons: .btn + .btn--secondary | .btn--solid | .btn--small. Primary CTA is ALWAYS the .cta-link text link
            with data-cta="primary"; its chevron is generated by CSS, never add an icon element.
   Reveal (opt-in): [data-reveal] (+ .is-visible) active only under html.js-reveal; optional --reveal-delay.
   ========================================================================== */

/* ---------- Design tokens ---------- */
:root {
  --c-primary: #6C5CE7;
  --c-primary-deep: #4A3CC4;
  --c-primary-soft: #ECE9FD;
  --c-amber: #FFB84D;
  --c-amber-deep: #9A5700;
  --c-amber-soft: #FFEBCB;
  --c-teal: #00C2A8;
  --c-teal-deep: #00796B;
  --c-teal-soft: #D9F7F2;
  --c-ink: #1F2340;
  --c-ink-soft: #4B4F6E;
  --c-bg: #FFF8EC;
  --c-paper: #F8F9FF;
  --c-surface: #FFFFFF;
  --c-line: rgba(31, 35, 64, .12);
  --c-line-strong: rgba(31, 35, 64, .3);
  --c-danger: #B3261E;
  --c-danger-soft: #FDE8E6;

  --font-body: var(--mrc-font-en, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
  --font-display: var(--mrc-font-en-display, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif);

  --fs-body: clamp(1rem, .96rem + .2vw, 1.0625rem);
  --fs-lead: clamp(1.0625rem, 1rem + .4vw, 1.3125rem);
  --fs-h1: clamp(2.125rem, 1.3rem + 3.6vw, 4.25rem);
  --fs-h2: clamp(1.75rem, 1.3rem + 2vw, 2.875rem);
  --fs-h3: clamp(1.25rem, 1.1rem + .6vw, 1.5rem);
  --fs-stat: clamp(3.75rem, 2rem + 8vw, 7.5rem);

  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 12px;

  --gutter: 1rem;
  --container: 72rem;
  --section-y: clamp(3.5rem, 8vw, 7rem);
  --header-h: 4rem;

  --shadow-sm: 0 1px 2px rgba(31, 35, 64, .06), 0 6px 16px -10px rgba(31, 35, 64, .18);
  --shadow-md: 0 2px 4px rgba(31, 35, 64, .06), 0 18px 32px -16px rgba(31, 35, 64, .28);
  --shadow-lg: 0 4px 8px rgba(31, 35, 64, .06), 0 32px 56px -24px rgba(31, 35, 64, .38);

  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur: .25s;
}
@media (min-width: 360px) { :root { --gutter: 1.25rem; } }
@media (min-width: 768px) { :root { --gutter: 2rem; --header-h: 4.5rem; } }
@media (min-width: 1200px) { :root { --gutter: 2.5rem; } }

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--c-ink);
  background: var(--c-bg);
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}
body.is-locked { overflow: hidden; }
[dir="rtl"] body { font-family: var(--mrc-font-fa, var(--font-body)); }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] .brand { font-family: var(--mrc-font-fa-display, var(--mrc-font-fa, var(--font-display))); }
[hidden] { display: none !important; }
.page-shell, body > main { flex: 1 0 auto; }
main { display: block; min-width: 0; }
main:focus { outline: none; }
img, svg, video, canvas { max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
p { margin: 0 0 1em; text-wrap: pretty; }
ul, ol { margin: 0 0 1em; padding-inline-start: 1.25rem; }
h1, h2, h3, h4 {
  margin: 0 0 .5em;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.015em;
  text-wrap: balance;
  color: var(--c-ink);
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.2; }
a { color: var(--c-primary-deep); text-underline-offset: .2em; }
a:hover { color: var(--c-ink); }
:focus-visible { outline: 3px solid var(--c-primary); outline-offset: 3px; border-radius: 4px; }
.cta-band :focus-visible, .game-frame :focus-visible, .lightbox :focus-visible { outline-color: var(--c-amber); }
::selection { background: var(--c-amber); color: var(--c-ink); }

.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.container--narrow { --container: 46rem; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; z-index: 200; inset-inline-start: 1rem; top: -4rem;
  padding: .75rem 1rem; background: var(--c-ink); color: #fff; border-radius: var(--r-md);
  text-decoration: none; font-weight: 700; transition: top .2s;
}
.skip-link:focus { top: 1rem; }
.text-center { text-align: center; }

/* ---------- Header / navigation ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 248, 236, .9);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur), box-shadow var(--dur);
}
.site-header.is-scrolled { border-bottom-color: var(--c-line); box-shadow: 0 10px 24px -18px rgba(31, 35, 64, .35); }
.site-header__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0 1rem; min-height: var(--header-h);
}
.brand {
  display: inline-flex; align-items: center; gap: .6rem; min-height: 3rem;
  font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; letter-spacing: -.01em;
  color: var(--c-ink); text-decoration: none;
}
.brand:hover { color: var(--c-ink); }
.brand__mark {
  flex: none; width: 1.75rem; height: 1.75rem;
  background: linear-gradient(135deg, var(--c-amber), #FF9A3C);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  transition: transform .4s var(--ease);
}
.brand:hover .brand__mark { transform: rotate(18deg) scale(1.1); }

.nav-toggle {
  display: none; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; padding: 0;
  background: var(--c-surface); color: var(--c-ink);
  border: 1px solid var(--c-line-strong); border-radius: var(--r-md);
  transition: border-color var(--dur), background var(--dur);
}
.js .nav-toggle { display: inline-flex; }
.nav-toggle:hover { border-color: var(--c-primary); }
.nav-toggle__bar, .nav-toggle__bar::before, .nav-toggle__bar::after {
  display: block; width: 20px; height: 2px; background: currentColor; border-radius: 2px;
}
.nav-toggle__bar { position: relative; transition: background .2s; }
.nav-toggle__bar::before, .nav-toggle__bar::after {
  content: ""; position: absolute; inset-inline-start: 0;
  transition: transform .3s var(--ease), top .3s var(--ease);
}
.nav-toggle__bar::before { top: -6px; }
.nav-toggle__bar::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar,
.nav-toggle.is-open .nav-toggle__bar { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::before,
.nav-toggle.is-open .nav-toggle__bar::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::after,
.nav-toggle.is-open .nav-toggle__bar::after { top: 0; transform: rotate(-45deg); }

.site-nav { flex-basis: 100%; }
.site-nav__list { display: flex; flex-wrap: wrap; gap: 0 1.25rem; margin: 0; padding: 0; list-style: none; }
.site-nav__link {
  display: flex; align-items: center; min-height: 3rem; padding: .5rem .1rem;
  font-weight: 600; color: var(--c-ink); text-decoration: none;
  background: linear-gradient(var(--c-primary), var(--c-primary)) 0 calc(100% - .5rem) / 0 2px no-repeat;
  transition: background-size .35s var(--ease), color var(--dur);
}
.site-nav__link:hover, .site-nav__link:focus-visible { color: var(--c-primary-deep); background-size: 100% 2px; }
.site-nav__link[aria-current="page"], .site-nav__link.is-active {
  color: var(--c-primary-deep);
  background-image: linear-gradient(var(--c-amber), var(--c-amber));
  background-size: 100% 4px;
}

@media (max-width: 767.98px) {
  .js .site-nav {
    position: absolute; inset-inline: 0; top: 100%;
    padding: .5rem var(--gutter) 1.25rem;
    background: var(--c-bg); border-bottom: 1px solid var(--c-line);
    box-shadow: 0 24px 32px -24px rgba(31, 35, 64, .4);
    visibility: hidden; opacity: 0; transform: translateY(-8px); pointer-events: none;
    transition: opacity var(--dur), transform var(--dur) var(--ease), visibility var(--dur);
  }
  .js .site-nav.is-open { visibility: visible; opacity: 1; transform: none; pointer-events: auto; }
  .js .site-nav__list { flex-direction: column; gap: 0; }
  .js .site-nav__link { width: fit-content; }
}
@media (min-width: 768px) {
  .js .nav-toggle { display: none; }
  .site-nav { flex-basis: auto; }
  .site-nav__list { gap: 0 2rem; }
}

/* ---------- Page shell + sticky side rail ---------- */
.side-rail { display: none; }
@media (min-width: 1200px) {
  .page-shell--rail { display: grid; grid-template-columns: 12.5rem minmax(0, 1fr); align-items: start; }
  .side-rail {
    display: block; position: sticky; top: calc(var(--header-h) + 2rem);
    margin: 2rem 1rem 0 var(--gutter); font-size: .9375rem;
  }
  .side-rail__title { margin: 0 0 .75rem; font-family: var(--font-display); font-size: 1.0625rem; font-weight: 700; color: var(--c-ink); }
  .side-rail__list { margin: 0; padding: 0; list-style: none; border-inline-start: 2px solid var(--c-line); }
  .side-rail__link {
    position: relative; display: block; padding: .55rem 0 .55rem 1rem;
    font-weight: 600; color: var(--c-ink-soft); text-decoration: none;
    transition: color var(--dur), padding var(--dur) var(--ease);
  }
  .side-rail__link::before {
    content: ""; position: absolute; inset-inline-start: -2px; top: .3rem; bottom: .3rem;
    width: 2px; background: transparent; border-radius: 2px; transition: background var(--dur), width var(--dur);
  }
  .side-rail__link:hover { color: var(--c-primary-deep); padding-inline-start: 1.25rem; }
  .side-rail__link.is-active, .side-rail__link[aria-current="true"] { color: var(--c-ink); }
  .side-rail__link.is-active::before, .side-rail__link[aria-current="true"]::before { width: 4px; background: var(--c-primary); }
  .side-rail__note { margin: 1.25rem 0 0; padding: .85rem 1rem; font-size: .875rem; color: var(--c-ink-soft); background: var(--c-amber-soft); border-radius: var(--r-md); }
  .page-shell--rail .hero::before {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6rem);
    mask-image: linear-gradient(90deg, transparent, #000 6rem);
  }
}

/* ---------- Shared type helpers ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: .65rem; margin: 0 0 1rem;
  font-size: .875rem; font-weight: 700; letter-spacing: .05em; color: var(--c-teal-deep);
}
.eyebrow::before { content: ""; width: 1.75rem; height: 3px; border-radius: 3px; background: var(--c-teal); }
.section-head { max-width: 42rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.section-title { margin-bottom: .4em; }
.section-lead { font-size: var(--fs-lead); color: var(--c-ink-soft); margin: 0; }
.chip {
  display: inline-flex; align-items: center; gap: .5rem; padding: .3rem .8rem;
  font-size: .875rem; font-weight: 700; color: var(--c-ink);
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-sm);
}
.chip::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--c-teal); }

/* ---------- Primary CTA: underline-grow text link + chevron + soft halo ---------- */
.cta-link, a[data-cta="primary"] {
  position: relative; display: inline-flex; align-items: center; gap: .7rem;
  min-height: 3rem; padding: .8rem .35rem .95rem .1rem;
  font-family: var(--font-body); font-size: 1.125rem; font-weight: 700; line-height: 1.3;
  color: var(--cta-ink, var(--c-ink)); text-decoration: none; border-radius: var(--r-md);
  background-image:
    linear-gradient(var(--cta-grow, var(--c-primary)), var(--cta-grow, var(--c-primary))),
    linear-gradient(var(--cta-rest, var(--c-amber)), var(--cta-rest, var(--c-amber))),
    linear-gradient(var(--cta-base, rgba(31, 35, 64, .22)), var(--cta-base, rgba(31, 35, 64, .22)));
  background-repeat: no-repeat;
  background-position: 0 calc(100% - .5rem);
  background-size: 0 4px, 2.75rem 4px, 100% 1px;
  transition: background-size .45s var(--ease), color var(--dur), transform var(--dur);
  animation: cta-halo 3.6s ease-out 1.2s 3;
}
.cta-link::after, a[data-cta="primary"]::after {
  content: ""; flex: none; width: .55em; height: .55em;
  border-top: 2.5px solid currentColor; border-right: 2.5px solid currentColor;
  transform: rotate(45deg); transition: transform .3s var(--ease);
}
.cta-link:hover, .cta-link:focus-visible, a[data-cta="primary"]:hover, a[data-cta="primary"]:focus-visible {
  color: var(--cta-hover, var(--c-primary-deep)); background-size: 100% 4px, 2.75rem 4px, 100% 1px; animation: none;
}
.cta-link:hover::after, .cta-link:focus-visible::after,
a[data-cta="primary"]:hover::after, a[data-cta="primary"]:focus-visible::after { transform: translateX(5px) rotate(45deg); }
.cta-link:active, a[data-cta="primary"]:active { transform: translateY(1px); }
[dir="rtl"] .cta-link::after, [dir="rtl"] a[data-cta="primary"]::after { transform: rotate(-135deg); }
[dir="rtl"] .cta-link:hover::after, [dir="rtl"] a[data-cta="primary"]:hover::after { transform: translateX(-5px) rotate(-135deg); }
.cta-band, .on-dark, .cta-link--light {
  --cta-ink: #fff; --cta-hover: var(--c-amber-soft); --cta-grow: var(--c-amber); --cta-rest: var(--c-amber);
  --cta-base: rgba(255, 255, 255, .35); --cta-halo-a: rgba(255, 184, 77, .4); --cta-halo-b: rgba(255, 184, 77, 0);
}
@keyframes cta-halo {
  0% { box-shadow: 0 0 0 0 var(--cta-halo-a, rgba(108, 92, 231, .28)); }
  70%, 100% { box-shadow: 0 0 0 .9rem var(--cta-halo-b, rgba(108, 92, 231, 0)); }
}

/* ---------- Secondary buttons and links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 3rem; padding: .7rem 1.35rem;
  font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none;
  border: 1.5px solid transparent; border-radius: var(--r-md);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur), background var(--dur), border-color var(--dur), color var(--dur);
}
.btn--secondary { color: var(--c-ink); background: rgba(255, 255, 255, .6); border-color: var(--c-line-strong); }
.btn--secondary:hover { color: var(--c-primary-deep); background: #fff; border-color: var(--c-primary); }
.btn--solid { color: #fff; background: var(--c-primary); }
.btn--solid:hover { color: #fff; background: var(--c-primary-deep); }
.btn--small { min-height: 2.75rem; padding: .5rem 1rem; font-size: .9375rem; }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; pointer-events: none; }
@media (hover: hover) {
  .btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
  .btn:active { transform: translateY(0); }
}
.text-link {
  display: inline-flex; align-items: center; min-height: 2.75rem;
  font-weight: 600; color: var(--c-primary-deep); text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - .55rem) / 100% 1px no-repeat;
  transition: background-size var(--dur), color var(--dur);
}
.text-link:hover { color: var(--c-ink); background-size: 100% 3px; }
.cta-band .text-link { color: var(--c-amber-soft); }
.cta-band .text-link:hover { color: #fff; }
.cta-band .btn--secondary { color: #fff; background: transparent; border-color: rgba(255, 255, 255, .45); }
.cta-band .btn--secondary:hover { color: var(--c-ink); background: var(--c-amber); border-color: var(--c-amber); }

/* ---------- Hero: split-screen, stat-led ---------- */
.hero {
  position: relative; isolation: isolate; overflow-x: clip;
  padding-block: clamp(2rem, 5vw, 4.5rem) clamp(3rem, 7vw, 6rem);
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2; opacity: .55;
  background: url("../img/bg-mobile.jpg") center / cover no-repeat;
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(55% 45% at 88% 18%, rgba(0, 194, 168, .14), transparent 70%),
    radial-gradient(45% 40% at 6% 85%, rgba(108, 92, 231, .1), transparent 70%),
    linear-gradient(180deg, rgba(255, 248, 236, .15) 0%, var(--c-bg) 100%);
}
@media (min-width: 768px) { .hero::before { background-image: url("../img/bg-desktop.jpg"); } }
.hero__grid { display: grid; gap: 2.75rem; align-items: center; }
.hero__copy, .hero__visual { min-width: 0; }
.hero__copy { max-width: 40rem; }
.hero__stat { display: flex; flex-direction: column; gap: .6rem; margin: 0 0 1.25rem; }
.hero__stat-value {
  align-self: flex-start; padding-inline: .05em;
  font-family: var(--font-display); font-size: var(--fs-stat); font-weight: 800;
  line-height: .95; letter-spacing: -.04em; color: var(--c-primary);
  background: linear-gradient(transparent 68%, rgba(255, 184, 77, .72) 68%, rgba(255, 184, 77, .72) 92%, transparent 92%);
}
.hero__stat-label { display: flex; align-items: center; gap: .65rem; font-size: .9375rem; font-weight: 700; letter-spacing: .03em; color: var(--c-amber-deep); }
.hero__stat-label::before { content: ""; width: 2rem; height: 3px; border-radius: 3px; background: var(--c-amber); }
.hero__title { max-width: 14em; margin-bottom: .45em; }
.hero__lead { max-width: 34rem; font-size: var(--fs-lead); color: var(--c-ink-soft); margin: 0; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.75rem; margin-top: 2rem; }

.hero__visual { justify-self: center; width: min(100%, 34rem); }
.hero__figure { position: relative; isolation: isolate; margin: 0; }
.hero__figure::before {
  content: ""; position: absolute; inset: 0; z-index: -1; transform: translate(.9rem, .9rem);
  background: var(--c-amber); border-radius: var(--r-lg);
}
.hero__image {
  display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  border: 3px solid #fff; border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
}
.hero__badge {
  position: absolute; inset-inline-start: .75rem; bottom: .75rem; z-index: 1;
  display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .85rem;
  font-size: .875rem; font-weight: 700; color: var(--c-ink);
  background: rgba(255, 255, 255, .94); border-radius: var(--r-sm); box-shadow: var(--shadow-md);
  animation: float 5s ease-in-out infinite;
}
.hero__badge::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: var(--c-teal); }
.hero--compact { padding-block: clamp(1.5rem, 4vw, 3rem) clamp(2.5rem, 5vw, 4rem); }
.hero--compact .hero__stat-value { font-size: clamp(3rem, 1.6rem + 6vw, 5.5rem); }
.hero--solo .hero__grid { grid-template-columns: 1fr; }
@media (min-width: 768px) {
  .hero__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 3rem; }
  .hero--solo .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .hero__figure::before { transform: translate(1.1rem, 1.1rem); }
}
@media (min-width: 1200px) { .hero__grid { gap: 4.5rem; } }

@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.hero__copy > * { animation: rise .7s var(--ease) both; }
.hero__copy > :nth-child(2) { animation-delay: .08s; }
.hero__copy > :nth-child(3) { animation-delay: .16s; }
.hero__copy > :nth-child(4) { animation-delay: .24s; }
.hero__visual { animation: rise .9s var(--ease) .2s both; }

/* ---------- Sections ---------- */
.section { position: relative; padding-block: var(--section-y); overflow-x: clip; }
.section--tint { background: var(--c-paper); }
.section--layered { isolation: isolate; }
.section--layered::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(40% 50% at 100% 0%, rgba(255, 184, 77, .22), transparent 70%),
    radial-gradient(40% 50% at 0% 100%, rgba(0, 194, 168, .12), transparent 70%);
}
.section--art { isolation: isolate; }
.section--art::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .35;
  background: url("../img/bg-mobile.jpg") center / cover no-repeat;
}
@media (min-width: 768px) { .section--art::before { background-image: url("../img/bg-desktop.jpg"); } }

/* ---------- Cards ---------- */
.card, .step-card, .prompt-step {
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur), border-color var(--dur);
}
.card { padding: 1.5rem; }
.card__title { margin-bottom: .4em; }
.card__text { margin: 0; color: var(--c-ink-soft); }
.card-grid { display: grid; gap: 1.25rem; }
@media (min-width: 768px) { .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; } }
@media (min-width: 1200px) { .card-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (hover: hover) {
  .card:hover, .step-card:hover, .prompt-step:hover {
    transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: rgba(108, 92, 231, .35);
  }
}
.check-list { margin: 0; padding: 0; list-style: none; display: grid; gap: .75rem; }
.check-list li { position: relative; padding-inline-start: 2rem; }
.check-list li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: .2em; width: 1.25rem; height: 1.25rem;
  background: var(--c-teal-soft); border-radius: var(--r-sm);
}
.check-list li::after {
  content: ""; position: absolute; inset-inline-start: .42rem; top: .45em; width: .35rem; height: .65rem;
  border: solid var(--c-teal-deep); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg);
}

/* ---------- Steps ---------- */
.steps__list { display: grid; gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.step-card {
  --step-accent: var(--c-primary);
  display: flex; flex-direction: column; gap: .6rem; padding: 1.75rem 1.5rem 2rem;
  border-top: 4px solid var(--step-accent);
}
.step-card:nth-child(2) { --step-accent: var(--c-amber); }
.step-card:nth-child(3) { --step-accent: var(--c-teal); }
.step-card__num {
  position: relative; align-self: flex-start; margin-bottom: 1rem;
  font-family: var(--font-display); font-size: clamp(3.5rem, 3rem + 3vw, 5rem); font-weight: 800; line-height: .9; color: var(--c-ink);
}
.step-card__num::after {
  content: ""; position: absolute; inset-inline-start: 0; bottom: -.75rem;
  width: 2.5rem; height: 6px; border-radius: 3px; background: var(--step-accent);
}
.step-card__title { margin: 0; }
.step-card__text { margin: 0; color: var(--c-ink-soft); }
@media (min-width: 768px) { .steps__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; } }
@media (min-width: 1200px) {
  .step-card:nth-child(2) { margin-top: 2.5rem; }
  .step-card { padding: 2rem 1.75rem 2.25rem; }
}

/* ---------- Showcase rows ---------- */
.showcase { display: grid; gap: 2rem; align-items: start; }
.showcase__media, .showcase__body { min-width: 0; }
.showcase__title { margin-bottom: .4em; }
.showcase__text { color: var(--c-ink-soft); }
@media (min-width: 768px) {
  .showcase { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem; }
  .showcase__media { position: sticky; top: calc(var(--header-h) + 1.5rem); }
  .showcase--reverse .showcase__media { order: 2; }
}
@media (min-width: 1200px) { .showcase { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 4rem; } }

/* ---------- Sample game ---------- */
.game-frame { overflow: hidden; background: var(--c-ink); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); }
.game-frame__bar { display: flex; align-items: center; gap: .4rem; padding: .65rem .9rem; background: #2B3058; color: rgba(255, 255, 255, .85); font-size: .8125rem; }
.game-frame__dot { width: .65rem; height: .65rem; border-radius: 50%; background: var(--c-amber); }
.game-frame__dot:nth-child(2) { background: var(--c-teal); }
.game-frame__dot:nth-child(3) { background: var(--c-primary); }
.game-frame__title { margin-inline-start: .5rem; font-weight: 600; }
.game-stage {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden; touch-action: none; user-select: none;
  background: radial-gradient(60% 50% at 80% 15%, rgba(255, 184, 77, .22), transparent 70%), linear-gradient(180deg, #2C2F6B, #1F2340);
}
.game-stage:focus-visible { outline: 3px solid var(--c-amber); outline-offset: -3px; border-radius: 0; }
.game-stage__canvas, .game-stage canvas { display: block; width: 100%; height: 100%; }
.game-hud { position: absolute; inset: .75rem .75rem auto; display: flex; justify-content: space-between; gap: .5rem; pointer-events: none; color: #fff; font-size: .9375rem; font-weight: 700; }
.game-hud__item { padding: .25rem .65rem; background: rgba(31, 35, 64, .65); border-radius: var(--r-sm); }
.game-overlay {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: .75rem;
  padding: 1rem; text-align: center; color: #fff; background: rgba(31, 35, 64, .74);
  transition: opacity var(--dur), visibility var(--dur);
}
.game-stage.is-playing .game-overlay { opacity: 0; visibility: hidden; pointer-events: none; }
.game-stage.is-paused .game-overlay, .game-stage.is-over .game-overlay { opacity: 1; visibility: visible; }
.game-controls { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; padding: .75rem; background: #2B3058; }
.game-controls__btn {
  min-width: 3.5rem; min-height: 3rem; padding: .5rem 1rem; font-weight: 700; color: #fff;
  background: rgba(255, 255, 255, .12); border: 0; border-radius: var(--r-md);
  transition: background var(--dur), color var(--dur), transform .15s;
}
.game-controls__btn:hover { background: rgba(255, 255, 255, .22); }
.game-controls__btn:active, .game-controls__btn.is-pressed { color: var(--c-ink); background: var(--c-amber); transform: scale(.96); }
.game-note { margin: .75rem 0 0; font-size: .875rem; color: var(--c-ink-soft); }

.prompt-list { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.prompt-step { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; padding: 1.25rem; }
.prompt-step.is-active { border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(108, 92, 231, .18), var(--shadow-sm); }
.prompt-step__num {
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem;
  font-family: var(--font-display); font-size: 1.25rem; font-weight: 800; color: var(--c-ink);
  background: var(--c-amber); border-radius: var(--r-md);
}
.prompt-step__label { margin: 0; font-size: .8125rem; font-weight: 700; letter-spacing: .04em; color: var(--c-primary-deep); }
.prompt-bubble { margin: .35rem 0 .75rem; padding: .8rem 1rem; color: var(--c-ink); background: var(--c-primary-soft); border-radius: var(--r-lg) var(--r-lg) var(--r-lg) 2px; }
.prompt-step__result { margin: 0; color: var(--c-ink-soft); }
.prompt-step__result strong { color: var(--c-teal-deep); }

/* ---------- CTA band (main colour moment) ---------- */
.cta-band { position: relative; isolation: isolate; overflow: clip; padding-block: clamp(3.5rem, 8vw, 6.5rem); color: #fff; background: var(--c-ink); }
.cta-band::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(55% 90% at 92% 0%, rgba(255, 184, 77, .38), transparent 65%),
    radial-gradient(60% 80% at 0% 100%, rgba(108, 92, 231, .8), transparent 70%),
    linear-gradient(135deg, #2A2470, #1F2340);
}
.cta-band::after {
  content: ""; position: absolute; z-index: -1; inset-inline-end: -3rem; top: -3rem;
  width: clamp(10rem, 30vw, 22rem); aspect-ratio: 1; background: rgba(255, 184, 77, .13);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.cta-band__inner { display: grid; gap: 1.75rem; align-items: center; }
.cta-band__title { max-width: 18em; color: #fff; }
.cta-band__text { max-width: 34rem; margin: 0; font-size: var(--fs-lead); color: rgba(255, 255, 255, .86); }
.cta-band__actions { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; }
@media (min-width: 768px) {
  .cta-band__inner { grid-template-columns: minmax(0, 1.4fr) auto; gap: 3rem; }
  .cta-band__actions { align-items: flex-start; }
}

/* ---------- FAQ accordion ---------- */
.faq-list { display: grid; gap: .75rem; max-width: 48rem; }
.faq-item { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg); transition: border-color var(--dur), box-shadow var(--dur); }
.faq-item:hover { border-color: var(--c-line-strong); }
.faq-item.is-open { border-color: var(--c-primary); box-shadow: var(--shadow-sm); }
.faq-item__heading { margin: 0; font-size: inherit; line-height: inherit; }
.faq-item__question {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  width: 100%; min-height: 3.5rem; padding: 1rem 1.25rem; text-align: start;
  font-family: var(--font-display); font-size: clamp(1.0625rem, 1rem + .4vw, 1.3125rem); font-weight: 700; line-height: 1.25;
  color: var(--c-ink); background: transparent; border: 0; border-radius: var(--r-lg);
}
.faq-item__icon { position: relative; flex: none; width: 1.75rem; height: 1.75rem; background: var(--c-amber-soft); border-radius: var(--r-sm); transition: background var(--dur), transform .3s var(--ease); }
.faq-item__icon::before, .faq-item__icon::after {
  content: ""; position: absolute; inset: 50% auto auto 50%; width: .8rem; height: 2px; background: var(--c-ink);
  border-radius: 2px; transform: translate(-50%, -50%); transition: transform .3s var(--ease);
}
.faq-item__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item.is-open .faq-item__icon, .faq-item__question[aria-expanded="true"] .faq-item__icon { background: var(--c-amber); }
.faq-item.is-open .faq-item__icon::after, .faq-item__question[aria-expanded="true"] .faq-item__icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq-item__answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s var(--ease); }
.faq-item.is-open .faq-item__answer { grid-template-rows: 1fr; }
.faq-item__answer-inner { min-height: 0; overflow: hidden; padding-inline: 1.25rem; color: var(--c-ink-soft); }
.faq-item__answer-inner > * { margin: 0; padding-bottom: 1.25rem; }
html:not(.js) .faq-item__answer { grid-template-rows: 1fr; }
html:not(.js) .faq-item__icon { display: none; }

/* ---------- Gallery + lightbox ---------- */
.gallery-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin: 0; padding: 0; list-style: none; }
.gallery-thumb {
  position: relative; display: block; width: 100%; aspect-ratio: 1 / 1; padding: 0; overflow: hidden;
  background: var(--c-amber-soft); border: 0; border-radius: var(--r-md); cursor: zoom-in;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur);
}
.gallery-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
@media (hover: hover) {
  .gallery-thumb:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
  .gallery-thumb:hover img { transform: scale(1.06); }
}
@media (min-width: 768px) { .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } }
@media (min-width: 1200px) { .gallery-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.lightbox {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 1rem;
  visibility: hidden; opacity: 0; transition: opacity var(--dur), visibility var(--dur);
}
.lightbox.is-open { visibility: visible; opacity: 1; }
.lightbox__backdrop { position: absolute; inset: 0; background: rgba(31, 35, 64, .88); }
.lightbox__figure { position: relative; z-index: 1; display: grid; gap: .75rem; max-width: min(100%, 52rem); margin: 0; transform: scale(.97); transition: transform .3s var(--ease); }
.lightbox.is-open .lightbox__figure { transform: none; }
.lightbox__img { display: block; max-width: 100%; max-height: 78vh; margin-inline: auto; object-fit: contain; border-radius: var(--r-md); }
.lightbox__caption { color: #fff; text-align: center; font-size: .9375rem; }
.lightbox__close, .lightbox__prev, .lightbox__next {
  position: absolute; z-index: 2; display: grid; place-items: center; width: 3rem; height: 3rem; padding: 0;
  font-size: 1.5rem; line-height: 1; color: #fff; background: rgba(255, 255, 255, .16);
  border: 0; border-radius: var(--r-md); transition: background var(--dur), color var(--dur);
}
.lightbox__close:hover, .lightbox__prev:hover, .lightbox__next:hover { color: var(--c-ink); background: var(--c-amber); }
.lightbox__close { top: 1rem; inset-inline-end: 1rem; }
.lightbox__prev { inset-inline-start: .75rem; top: 50%; transform: translateY(-50%); }
.lightbox__next { inset-inline-end: .75rem; top: 50%; transform: translateY(-50%); }

/* ---------- Contact split + forms ---------- */
.contact-split { display: grid; gap: 2rem; align-items: start; }
.contact-split__info, .contact-split__form { min-width: 0; }
.contact-list { display: grid; gap: .75rem; margin: 1.5rem 0; padding: 0; list-style: none; }
.contact-list__item { display: flex; align-items: flex-start; gap: .75rem; }
.trust-note { margin: 0; padding: 1rem 1.25rem; color: var(--c-ink); background: var(--c-teal-soft); border-inline-start: 4px solid var(--c-teal); border-radius: 4px var(--r-md) var(--r-md) 4px; }
.contact-split__form { padding: clamp(1.25rem, 3vw, 2rem); background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg); box-shadow: var(--shadow-md); }
@media (min-width: 768px) { .contact-split { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 3rem; } }

.form { display: grid; gap: 1.1rem; }
.field { display: grid; gap: .4rem; }
.field__label { font-size: .9375rem; font-weight: 700; }
.field__input {
  width: 100%; min-height: 3rem; padding: .7rem .9rem; color: var(--c-ink); background: #fff;
  border: 1.5px solid var(--c-line-strong); border-radius: var(--r-md); outline: 2px solid transparent;
  transition: border-color var(--dur), box-shadow var(--dur);
}
textarea.field__input { min-height: 8rem; resize: vertical; }
.field__input::placeholder { color: #6A6E8C; }
.field__input:hover { border-color: var(--c-ink-soft); }
.field__input:focus { border-color: var(--c-primary); box-shadow: 0 0 0 4px rgba(108, 92, 231, .22); }
.field__hint { margin: 0; font-size: .875rem; color: var(--c-ink-soft); }
.field__error { display: none; margin: 0; font-size: .875rem; font-weight: 600; color: var(--c-danger); }
.field.is-invalid .field__input, .field__input[aria-invalid="true"] { border-color: var(--c-danger); background: #FFFAF9; }
.field.is-invalid .field__error { display: block; }
.field.is-valid .field__input { border-color: var(--c-teal-deep); }
.field--check { grid-template-columns: auto 1fr; align-items: start; gap: .75rem; }
.field--check input { width: 1.4rem; height: 1.4rem; margin: .15rem 0 0; accent-color: var(--c-primary); }
.form.is-submitting .btn--solid { opacity: .7; pointer-events: none; }
.form-status { display: none; margin: 0; padding: .8rem 1rem; font-weight: 600; border-radius: var(--r-md); }
.form-status.is-success { display: block; color: #004D43; background: var(--c-teal-soft); }
.form-status.is-error { display: block; color: var(--c-danger); background: var(--c-danger-soft); }

/* ---------- Content documents (legal / long text) ---------- */
.doc { max-width: 44rem; margin-inline: auto; padding-block: clamp(2.5rem, 6vw, 5rem); }
.doc__meta { margin: 0 0 2rem; font-size: .9375rem; color: var(--c-ink-soft); }
.doc h2 { margin-top: 2.25em; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); }
.doc h3 { margin-top: 1.75em; }
.doc ul, .doc ol { padding-inline-start: 1.5rem; }
.doc li { margin-bottom: .4em; }
.doc blockquote { margin: 1.5rem 0; padding: 1rem 1.25rem; background: var(--c-amber-soft); border-inline-start: 4px solid var(--c-amber); border-radius: 4px var(--r-md) var(--r-md) 4px; }

/* ---------- Footer (single row) ---------- */
.site-footer { padding-block: 1.5rem; font-size: .9375rem; background: var(--c-bg); border-top: 1px solid var(--c-line); }
.site-footer__inner { display: flex; flex-direction: column; align-items: flex-start; gap: .75rem; }
.site-footer__list { display: flex; flex-wrap: wrap; gap: 0 1.25rem; margin: 0; padding: 0; list-style: none; }
.site-footer__link {
  display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 600; color: var(--c-ink-soft); text-decoration: none;
  background: linear-gradient(var(--c-primary), var(--c-primary)) 0 calc(100% - .55rem) / 0 2px no-repeat;
  transition: background-size .35s var(--ease), color var(--dur);
}
.site-footer__link:hover, .site-footer__link:focus-visible { color: var(--c-primary-deep); background-size: 100% 2px; }
.site-footer__legal { margin: 0; font-size: .875rem; color: var(--c-ink-soft); }
.site-footer__legal a { color: inherit; }
@media (min-width: 768px) {
  .site-footer__inner { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 2rem; }
}

/* ---------- Opt-in scroll reveal ---------- */
.js-reveal [data-reveal] {
  opacity: 0; transform: translateY(18px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  transition-delay: var(--reveal-delay, 0s);
}
.js-reveal [data-reveal].is-visible { opacity: 1; transform: none; }

/* ---------- Small-screen safety ---------- */
@media (max-width: 359.98px) {
  .hero__actions { flex-direction: column; align-items: flex-start; }
  .hero__actions .btn { width: 100%; }
  .prompt-step { grid-template-columns: 1fr; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
  .js-reveal [data-reveal] { opacity: 1; transform: none; }
  .card:hover, .step-card:hover, .prompt-step:hover, .btn:hover, .gallery-thumb:hover { transform: none; }
}