:root {
  --green: #0b5d45;
  --forest: #12372d;
  --gold: #d39a16;
  --gold-dark: #956508;
  --cream: #fff9f0;
  --paper: #fff;
  --ink: #17231f;
  --muted: #5c6c64;
  --line: #e6e7dc;
  --shadow: 0 8px 26px #543e0e09;
  --radius: 20px;
  --max: 1320px;
  font-family:
    "Segoe UI",
    system-ui,
    -apple-system,
    Roboto,
    Arial,
    sans-serif;
  color: var(--ink);
  background: #fffcf7;
  font-synthesis: none;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 112px;
}
body {
  margin: 0;
  background:
    radial-gradient(ellipse at 95% 12%, #f9e7bb35, transparent 34%), #fffcf7;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img {
  display: block;
  max-width: 100%;
  height: auto;
}
a {
  color: var(--green);
  text-decoration: none;
}
a:hover {
  color: var(--gold-dark);
}
button,
input,
select,
textarea {
  font: inherit;
}
button,
a,
input,
summary {
  -webkit-tap-highlight-color: transparent;
}
button {
  cursor: pointer;
}
button:disabled {
  cursor: default;
}
button,
a {
  touch-action: manipulation;
}
h1,
h2,
h3,
p {
  margin: 0;
}
h1,
h2,
h3 {
  color: var(--forest);
  line-height: 1.12;
  letter-spacing: -0.035em;
}
h1 {
  font-size: clamp(2.55rem, 4.4vw, 4.2rem);
  font-weight: 780;
}
h2 {
  font-size: clamp(1.65rem, 2.6vw, 2.35rem);
  font-weight: 750;
}
h3 {
  font-size: 1.15rem;
  letter-spacing: -0.025em;
}
p {
  color: var(--muted);
}
:focus-visible {
  outline: 3px solid var(--gold-dark);
  outline-offset: 5px;
}
::selection {
  background: #f6dea2;
  color: var(--forest);
}
[hidden] {
  display: none !important;
}
.container {
  width: min(var(--max), calc(100% - 80px));
  margin-inline: auto;
}
.icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  vertical-align: middle;
}
.fine {
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--muted);
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 99;
  background: var(--forest);
  color: white;
  padding: 12px 20px;
  transform: translateY(-160%);
}
.skip:focus {
  transform: none;
}
main:focus {
  outline: none;
}
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  padding: 14px 0 0;
}
.nav-shell {
  width: min(1400px, calc(100% - 56px));
  min-height: 78px;
  margin: auto;
  padding: 12px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  background: #fffffff5;
  border: 1px solid #f3e9d8;
  border-radius: 22px;
  box-shadow: var(--shadow);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  color: var(--forest);
}
.brand img {
  width: 38px;
  height: 48px;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.brand strong {
  font-size: 1.75rem;
  letter-spacing: 0.13em;
  font-weight: 740;
  line-height: 1.05;
}
.brand small {
  display: block;
  color: var(--gold-dark);
  font-size: 0.73rem;
  letter-spacing: 0.28em;
  font-weight: 650;
  line-height: 1.5;
}
nav#primary-nav {
  display: flex;
  align-items: center;
  gap: 32px;
}
#primary-nav > a:not(.button) {
  padding: 12px 0;
  position: relative;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
}
#primary-nav > a[aria-current="page"] {
  color: var(--green);
}
#primary-nav > a[aria-current="page"]:after {
  content: "";
  height: 2px;
  background: var(--gold);
  position: absolute;
  bottom: 6px;
  left: 0;
  right: 0;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 48px;
  padding: 11px 23px;
  color: white;
  background: var(--green);
  border: 1px solid var(--green);
  border-radius: 11px;
  font-size: 0.9rem;
  font-weight: 650;
  line-height: 1.4;
  transition:
    transform 0.18s,
    background 0.18s,
    box-shadow 0.18s;
}
.button:hover {
  background: var(--forest);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px #0b5d451c;
}
.button.outline {
  background: transparent;
  color: var(--green);
  border-color: #53786a;
}
.button.outline:hover {
  background: #eff5ee;
}
.button.gold {
  background: var(--gold);
  border-color: var(--gold);
  color: #213025;
}
.button.gold:hover {
  background: #edb734;
}
.button.light {
  border-color: #93b2a5;
  color: white;
}
.button.light:hover {
  background: #ffffff15;
}
.nav-cta {
  margin-left: 38px;
  min-height: 42px;
}
.menu-toggle {
  display: none;
}
.actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
}
.eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 750;
  font-size: 0.73rem;
  letter-spacing: 0.1em;
  color: var(--green);
  text-transform: uppercase;
}
.eyebrow .icon {
  color: var(--gold);
  width: 18px;
}
.lead {
  font-size: 1.07rem;
  line-height: 1.75;
  max-width: 590px;
}
.home-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: center;
  min-height: 510px;
  padding: 50px 20px 30px;
}
.hero-copy {
  position: relative;
  z-index: 2;
}
.hero-copy h1 {
  margin: 20px 0;
  font-size: clamp(2.6rem, 4vw, 3.8rem);
}
.hero-copy h1 span {
  color: var(--gold-dark);
}
.hero-copy .lead {
  max-width: 500px;
}
.hero-copy .actions {
  margin-top: 27px;
}
.hero-footnote {
  margin-top: 24px;
  font-size: 0.8rem;
}
.status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 0.77rem;
  font-weight: 600;
}
.status i {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #c39539;
}
.hero-art {
  height: 435px;
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-orbit {
  position: absolute;
  width: 98%;
  aspect-ratio: 1.25;
  border-radius: 50%;
  background: radial-gradient(ellipse, #f5df9b66, transparent 72%);
  border-bottom: 1px solid #e7c77a;
  transform: rotate(-14deg);
  z-index: -1;
}
.hero-screen {
  position: absolute;
  overflow: hidden;
  border: 6px solid var(--forest);
  border-radius: 23px;
  background: #193d30;
  box-shadow: 0 18px 30px #12372d26;
  width: 170px;
  aspect-ratio: 9/16;
}
.hero-screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.screen-main {
  width: 202px;
  z-index: 3;
  transform: rotate(5deg);
  left: calc(50% - 95px);
  top: 12px;
}
.screen-left {
  transform: rotate(-12deg);
  left: 5%;
  top: 80px;
  width: 148px;
}
.screen-right {
  transform: rotate(14deg);
  right: 2%;
  top: 77px;
  width: 168px;
}
.hero-note {
  position: absolute;
  bottom: 1px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 10px 17px;
  border: 1px solid #eee3c8;
  border-radius: 99px;
  background: #fffdf9;
  color: var(--forest);
  font-size: 0.76rem;
  font-weight: 600;
  z-index: 4;
  box-shadow: var(--shadow);
}
.hero-note .icon {
  width: 16px;
  margin-left: 7px;
  color: var(--gold-dark);
}
.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}
.section-heading .eyebrow {
  margin-bottom: 0;
}
.section-heading h2 {
  margin-top: 9px;
}
.section-heading p:not(.eyebrow) {
  margin-top: 12px;
}
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  font-size: 0.87rem;
  font-weight: 700;
}
.text-link:hover .icon {
  transform: translateX(3px);
}
.text-link .icon {
  transition: transform 0.18s;
}
.featured {
  padding-top: 15px;
}
.game-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.game-card {
  display: grid;
  grid-template-columns: 45% 55%;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 17px;
  overflow: hidden;
  box-shadow: var(--shadow);
  transition:
    transform 0.2s,
    box-shadow 0.2s;
  min-width: 0;
}
.game-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px #183a2811;
}
.game-art {
  position: relative;
  background: #edf4e4;
  overflow: hidden;
  min-height: 260px;
  display: flex;
  align-items: center;
}
.game-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 37%;
}
.game-art.logo-art {
  background: radial-gradient(circle, #fff8d6, #e3ecd1);
  padding: 10px;
}
.game-art.logo-art img {
  height: auto;
  object-fit: contain;
}
.art-label {
  position: absolute;
  bottom: 8px;
  left: 7px;
  right: 7px;
  border-radius: 5px;
  background: #10382de6;
  color: white;
  text-align: center;
  font-size: 0.57rem;
  padding: 3px 2px;
  letter-spacing: 0.02em;
}
.game-copy {
  padding: 20px 17px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}
.tag {
  font-size: 0.62rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  color: #825b0b;
  text-transform: uppercase;
  background: #fff0cd;
  padding: 3px 7px;
  border-radius: 5px;
  display: inline-flex;
}
.game-copy h3 {
  font-size: 1.15rem;
  line-height: 1.25;
  margin: 10px 0;
}
.game-copy h3 a {
  color: var(--forest);
}
.game-copy p {
  font-size: 0.82rem;
  line-height: 1.65;
  margin-bottom: 12px;
}
.game-copy .status {
  margin-top: auto;
  white-space: normal;
}
.game-copy .text-link {
  margin-top: 5px;
  font-size: 0.8rem;
}
.studio-preview {
  display: grid;
  grid-template-columns: 1fr 1.7fr;
  gap: 44px;
  padding: 52px 8px 38px;
  align-items: center;
}
.studio-preview h2 {
  margin: 12px 0 14px;
}
.studio-preview > div > p:not(.eyebrow) {
  font-size: 0.93rem;
}
.preview-values {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.preview-values article {
  padding: 24px 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 17px;
}
.icon-disc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #f1f2e7;
  color: var(--green);
  margin-bottom: 18px;
}
.icon-disc .icon {
  width: 26px;
  height: 26px;
}
.preview-values h3 {
  font-size: 1rem;
  margin-bottom: 9px;
}
.preview-values p {
  font-size: 0.79rem;
}
.cta-band {
  margin: 36px 0 50px;
  display: flex;
  gap: 25px;
  align-items: center;
  background: linear-gradient(120deg, #0c4938, #0c392d);
  color: white;
  padding: 28px 34px;
  border-radius: 16px;
  position: relative;
  overflow: hidden;
}
.cta-band h2 {
  color: white;
  font-size: 1.4rem;
  letter-spacing: -0.02em;
}
.cta-band p {
  color: #d5e3da;
  font-size: 0.87rem;
  margin-top: 7px;
}
.cta-band .actions {
  margin-left: auto;
  flex-shrink: 0;
  gap: 12px;
}
.cta-mark {
  width: 72px;
  flex-shrink: 0;
  padding: 9px;
  background: white;
  border-radius: 12px;
}
.cta-mark img {
  object-fit: contain;
  height: 58px;
  width: 100%;
}
.site-footer {
  background: #102f26;
  color: #e5eee8;
  padding: 45px 0 0;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.3fr;
  gap: 42px;
}
.site-footer .brand {
  color: white;
}
.site-footer .brand img {
  mix-blend-mode: normal;
  background: white;
  border-radius: 8px;
  padding: 4px;
}
.site-footer .brand small {
  color: #eabb55;
}
.site-footer p,
.site-footer .fine {
  color: #c0d2c7;
}
.footer-brand p {
  font-size: 0.91rem;
  margin: 18px 0 10px;
}
.site-footer h2 {
  color: #ecf2ed;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 13px;
}
.site-footer .contact-heading {
  margin-top: 19px;
  margin-bottom: 7px;
}
.site-footer a:not(.brand) {
  display: block;
  color: #cddbd2;
  font-size: 0.83rem;
  margin: 8px 0;
  padding: 3px 0;
  min-height: 28px;
}
.site-footer a:hover {
  color: #f3c159;
}
.site-footer .email {
  overflow-wrap: anywhere;
}
.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  flex-wrap: wrap;
  border-top: 1px solid #ffffff17;
  margin-top: 36px;
  padding-block: 19px;
  font-size: 0.72rem;
  color: #c0d2c7;
}
.page-intro {
  padding: 60px 22px 40px;
  display: flex;
  justify-content: space-between;
  gap: 30px;
  align-items: center;
}
.page-intro h1 {
  margin: 14px 0 17px;
}
.page-intro .lead {
  max-width: 700px;
}
.intro-motif {
  width: 160px;
  height: 160px;
  opacity: 0.18;
  transform: rotate(8deg);
  flex-shrink: 0;
  overflow: hidden;
}
.intro-motif img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.catalog-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin: 10px 0 16px;
  align-items: center;
}
.filter-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.filter {
  background: #fff;
  color: var(--green);
  border: 1px solid #cfdbd1;
  border-radius: 99px;
  padding: 10px 22px;
  min-height: 44px;
  font-size: 0.85rem;
  font-weight: 650;
}
.filter[aria-pressed="true"] {
  background: var(--green);
  color: white;
  border-color: var(--green);
}
.search-box {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: white;
  padding: 0 16px;
  min-width: 260px;
}
.search-box input {
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 13px 0;
  outline-offset: 1px;
  font-size: 0.9rem;
}
.catalog-grid {
  margin-top: 20px;
}
.catalog-grid .game-card {
  grid-template-columns: 1fr;
}
.catalog-grid .game-art {
  height: 310px;
  min-height: 0;
}
.catalog-grid .game-art img {
  object-fit: contain;
  background: #e9efdd;
}
.catalog-grid .game-art.logo-art img {
  background: transparent;
  height: 100%;
  padding: 25px;
}
.catalog-grid .game-copy {
  padding: 24px;
}
.catalog-grid .game-copy h3 {
  font-size: 1.4rem;
}
.empty-state {
  text-align: center;
  padding: 60px;
}
.empty-state p {
  margin: 15px 0;
}
.breadcrumbs {
  margin: 28px 0 6px;
}
.breadcrumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  padding: 0;
  font-size: 0.78rem;
}
.breadcrumbs li {
  display: flex;
  gap: 9px;
  align-items: center;
}
.breadcrumbs li + li:before {
  content: "›";
  color: #7c8a7f;
}
.breadcrumbs [aria-current] {
  color: var(--gold-dark);
}
.detail-hero {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 60px;
  align-items: center;
  padding: 25px 22px 44px;
}
.detail-copy h1 {
  margin: 17px 0;
  font-size: clamp(2.5rem, 3.8vw, 3.7rem);
}
.detail-copy .tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.detail-copy .lead {
  font-size: 1rem;
}
.detail-copy .actions {
  margin-top: 25px;
}
.availability {
  background: #f0f4e9;
  border: 1px solid #e1e6d5;
  border-radius: 12px;
  margin-top: 23px;
  padding: 13px 17px;
  font-size: 0.85rem;
  color: var(--forest);
}
.detail-visual {
  min-height: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: radial-gradient(ellipse, #f3dfaa, #f9f4e8);
  border-radius: 24px;
  padding: 22px;
  position: relative;
}
.detail-visual.forest {
  background: radial-gradient(ellipse, #d5e9bc, #f0f3e5);
}
.detail-visual.warehouse {
  background: radial-gradient(ellipse, #d4e8e9, #f3efdc);
}
.detail-visual img {
  max-height: 390px;
  width: auto;
  border-radius: 13px;
  box-shadow: 0 12px 25px #103c2926;
}
.detail-visual .media-badge {
  position: absolute;
  bottom: 12px;
  right: 12px;
  padding: 4px 9px;
  border-radius: 6px;
  font-size: 0.67rem;
  background: #fffffff0;
  color: var(--forest);
}
.gallery-shell {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  padding: 22px;
}
.gallery-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 17px;
  gap: 10px;
}
.gallery-head h2 {
  font-size: 1.25rem;
}
.gallery-controls {
  display: flex;
  gap: 8px;
}
.icon-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-width: 44px;
  min-height: 44px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--green);
}
.gallery-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 12px;
  scrollbar-color: #adbdac #f7f5ef;
}
.gallery-item {
  margin: 0;
  flex: 0 0 170px;
  scroll-snap-align: start;
}
.gallery-item a {
  display: block;
  border-radius: 12px;
  overflow: hidden;
  background: #f3f4ed;
}
.gallery-item img {
  width: 100%;
  height: 302px;
  object-fit: contain;
}
.gallery-item figcaption {
  font-size: 0.76rem;
  margin-top: 9px;
  font-weight: 600;
  color: var(--forest);
}
.media-note {
  font-size: 0.77rem;
  margin-top: 14px;
  max-width: 960px;
}
.detail-panels {
  display: grid;
  grid-template-columns: 1.35fr 0.8fr;
  gap: 22px;
  margin-top: 26px;
}
.panel {
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: white;
  box-shadow: var(--shadow);
}
.panel h2 {
  font-size: 1.3rem;
  margin-bottom: 20px;
}
.feature-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 18px;
}
.feature-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.feature-list .icon {
  margin-top: 3px;
  color: var(--green);
  width: 18px;
}
.feature-list strong {
  font-size: 0.9rem;
  color: var(--forest);
}
.feature-list p {
  font-size: 0.85rem;
  margin-top: 3px;
}
dl {
  margin: 0;
}
dl > div {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 10px 0;
  border-bottom: 1px solid #f0f0e8;
  font-size: 0.84rem;
}
dt {
  color: var(--muted);
}
dd {
  margin: 0;
  font-weight: 600;
  text-align: right;
}
.related {
  margin-top: 44px;
}
.values-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.value-card {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: white;
  padding: 25px;
}
.value-card h3 {
  margin-bottom: 12px;
}
.value-card p {
  font-size: 0.87rem;
}
.about-hero {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 45px;
  align-items: center;
  padding: 60px 22px 45px;
}
.about-hero h1 {
  margin: 18px 0;
}
.about-hero h1 span {
  color: var(--gold-dark);
}
.about-hero p + p {
  margin-top: 15px;
}
.about-hero .actions {
  margin-top: 25px;
}
.about-media {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  gap: 13px;
  background: #f1eddb;
  padding: 30px;
  border-radius: 24px;
  min-height: 340px;
}
.about-media img {
  border-radius: 12px;
  box-shadow: 0 8px 18px #12372d20;
}
.about-media img:nth-child(2) {
  transform: translateY(-20px);
}
.process {
  margin: 36px 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 30px;
}
.process span {
  color: var(--gold-dark);
  font-size: 0.8rem;
  font-weight: 800;
}
.process h3 {
  margin: 8px 0;
}
.process p {
  font-size: 0.84rem;
}
.support-search {
  margin: 0 0 28px;
  max-width: 850px;
}
.support-layout {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 25px;
}
.support-links {
  padding: 0;
  list-style: none;
  margin: 0;
}
.support-links a {
  display: flex;
  align-items: center;
  gap: 17px;
  padding: 20px;
  background: #fff;
  border: 1px solid var(--line);
  min-height: 78px;
}
.support-links li:first-child a {
  border-radius: 16px 16px 0 0;
}
.support-links li:last-child a {
  border-radius: 0 0 16px 16px;
}
.support-links .icon:last-child {
  margin-left: auto;
}
.support-links a:hover {
  background: #f2f5ec;
}
.support-help {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  background: linear-gradient(125deg, #eff5eb, #fffaf1);
  padding: 36px;
  border: 1px solid var(--line);
  border-radius: 18px;
}
.support-help h2 {
  margin: 12px 0;
}
.support-help p {
  margin-bottom: 20px;
}
.faq-section {
  margin: 35px 0 45px;
  max-width: 1000px;
}
.faq-section h2 {
  margin-bottom: 18px;
}
.faq-section details {
  border: 1px solid var(--line);
  border-bottom: 0;
  background: #fff;
}
.faq-section details:first-of-type {
  border-radius: 14px 14px 0 0;
}
.faq-section details:last-of-type {
  border-bottom: 1px solid var(--line);
  border-radius: 0 0 14px 14px;
}
.faq-section summary {
  cursor: pointer;
  min-height: 56px;
  padding: 17px 23px;
  color: var(--forest);
  font-size: 0.92rem;
  font-weight: 650;
  list-style-position: inside;
}
.faq-section details[open] summary {
  color: var(--green);
  background: #f3f6ee;
}
.faq-section details p {
  padding: 16px 23px 22px;
  font-size: 0.92rem;
}
.game-support-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 28px 0;
}
.game-support-grid h3 {
  margin-bottom: 13px;
}
.game-support-grid p {
  font-size: 0.86rem;
}
.contact-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 25px;
  margin-bottom: 32px;
}
.contact-item {
  display: flex;
  gap: 17px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.contact-item:last-child {
  border: 0;
}
.contact-item h3 {
  margin-bottom: 7px;
}
.contact-item p {
  font-size: 0.88rem;
}
.contact-item a {
  overflow-wrap: anywhere;
  font-weight: 650;
}
.contact-item .icon-disc {
  flex-shrink: 0;
  margin: 0;
}
.contact-form h2 {
  margin-bottom: 8px;
}
.contact-form > p {
  font-size: 0.88rem;
  margin-bottom: 22px;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 17px;
}
.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.form-field.full {
  grid-column: 1/-1;
}
.form-field label {
  font-size: 0.82rem;
  font-weight: 650;
  color: var(--forest);
}
.form-field input,
.form-field select,
.form-field textarea {
  border: 1px solid #cfd8cc;
  border-radius: 8px;
  padding: 11px 12px;
  width: 100%;
  min-width: 0;
  background: white;
  color: var(--ink);
  font-size: 1rem;
}
.form-field textarea {
  min-height: 150px;
  resize: vertical;
}
.contact-form .button[type="submit"] {
  width: 100%;
  margin: 19px 0 10px;
}
.draft-ready {
  padding: 16px;
  border: 1px solid #c7d9bb;
  background: #eff5e9;
  margin-top: 16px;
  border-radius: 10px;
}
.draft-ready p {
  font-size: 0.88rem;
  margin-bottom: 12px;
}
.legal-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 40px;
  margin-bottom: 50px;
  align-items: start;
}
.legal-nav {
  position: sticky;
  top: 120px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 16px;
  padding: 20px;
}
.legal-nav h2 {
  font-size: 0.73rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 15px;
}
.legal-nav a {
  display: block;
  padding: 10px;
  font-size: 0.85rem;
  border-radius: 7px;
  min-height: 44px;
}
.legal-nav a:hover {
  background: #f8efdc;
}
.legal-body {
  max-width: 900px;
}
.legal-body section {
  margin-bottom: 30px;
}
.legal-body h2 {
  font-size: 1.35rem;
  margin-bottom: 15px;
}
.legal-body p,
.legal-body li {
  font-size: 0.94rem;
  line-height: 1.8;
}
.legal-body p + p {
  margin-top: 12px;
}
.legal-body ul,
.legal-body ol {
  padding-left: 24px;
  color: var(--muted);
}
.legal-body a {
  text-decoration: underline;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}
.notice {
  padding: 19px 23px;
  background: #fff2d5;
  border: 1px solid #edce89;
  border-radius: 13px;
  margin-bottom: 28px;
  color: #594219;
  font-size: 0.88rem;
}
.notice strong {
  display: block;
  margin-bottom: 5px;
}
.notice p {
  color: inherit;
  font-size: inherit;
}
.privacy-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 20px 0 36px;
}
.privacy-cards h2 {
  font-size: 1.2rem;
}
.privacy-cards p {
  font-size: 0.86rem;
}
.legal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin: 32px 0;
}
.legal-grid p {
  font-size: 0.92rem;
}
.legal-grid .icon-disc {
  margin-bottom: 12px;
}
.not-found {
  text-align: center;
  padding: 90px 10px;
}
.not-found .eyebrow,
.not-found .actions {
  justify-content: center;
}
.not-found h1 {
  margin: 20px 0;
}
.not-found p {
  margin-bottom: 27px;
}
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translate(-50%, 20px);
  background: var(--forest);
  color: white;
  border: 1px solid #9ab0a3;
  box-shadow: var(--shadow);
  border-radius: 10px;
  padding: 14px 22px;
  max-width: calc(100% - 30px);
  font-size: 0.85rem;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.2s,
    transform 0.2s;
  z-index: 100;
}
.toast.visible {
  opacity: 1;
  transform: translate(-50%, 0);
}
dialog {
  border: 0;
  border-radius: 18px;
  background: #fffdf7;
  padding: 20px;
  width: min(640px, calc(100% - 24px));
  max-height: 95vh;
  color: var(--forest);
}
dialog::backdrop {
  background: #071f19d9;
}
.dialog-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 14px;
}
dialog img {
  margin: auto;
  max-height: 74vh;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}
.dialog-top h2 {
  font-size: 1rem;
}
@media (min-width: 1600px) {
  .home-hero {
    min-height: 550px;
  }
  .hero-art {
    transform: scale(1.08);
  }
}
@media (max-width: 1150px) {
  .container {
    width: calc(100% - 48px);
  }
  .nav-shell {
    padding-inline: 22px;
    gap: 20px;
  }
  nav#primary-nav {
    gap: 23px;
  }
  .nav-cta {
    margin-left: 10px;
  }
  .brand strong {
    font-size: 1.5rem;
  }
  .home-hero {
    padding-inline: 0;
    gap: 10px;
  }
  .hero-art {
    transform: scale(0.88);
    margin-inline: -20px;
  }
  .game-card {
    grid-template-columns: 40% 60%;
  }
  .game-copy {
    padding: 16px 12px;
  }
  .game-copy h3 {
    font-size: 1rem;
  }
  .game-art {
    min-height: 290px;
  }
  .studio-preview {
    grid-template-columns: 1fr 1.5fr;
    gap: 26px;
  }
  .preview-values {
    gap: 10px;
  }
  .preview-values article {
    padding: 20px 13px;
  }
  .cta-mark {
    display: none;
  }
  .cta-band {
    padding: 26px;
    gap: 20px;
  }
  .cta-band .actions {
    gap: 8px;
  }
  .cta-band .button {
    padding-inline: 16px;
  }
  .detail-hero {
    gap: 32px;
  }
  .footer-grid {
    gap: 25px;
  }
  .values-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 850px) {
  .site-header {
    padding-top: 8px;
  }
  .nav-shell {
    width: calc(100% - 28px);
    min-height: 70px;
    padding: 10px 18px;
    border-radius: 16px;
    position: relative;
  }
  .brand img {
    width: 32px;
    height: 40px;
  }
  .brand strong {
    font-size: 1.4rem;
  }
  .brand small {
    font-size: 0.59rem;
  }
  .menu-toggle {
    display: flex;
    gap: 8px;
    align-items: center;
    min-height: 44px;
    min-width: 44px;
    background: transparent;
    color: var(--green);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 7px 12px;
    font-size: 0.8rem;
  }
  nav#primary-nav {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: #fffdf9;
    border: 1px solid var(--line);
    padding: 16px 24px;
    border-radius: 16px;
    box-shadow: 0 15px 30px #17362720;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  nav#primary-nav.open {
    display: flex;
  }
  #primary-nav > a:not(.button) {
    padding: 13px 0;
  }
  #primary-nav > a[aria-current="page"]:after {
    right: auto;
    width: 28px;
  }
  .nav-cta {
    margin: 12px 0 0;
  }
  .home-hero {
    grid-template-columns: 1fr 1fr;
    min-height: 430px;
    padding-top: 30px;
  }
  .hero-copy h1 {
    font-size: 2.6rem;
  }
  .hero-copy .lead {
    font-size: 0.98rem;
  }
  .hero-art {
    transform: scale(0.77);
    margin-inline: -40px;
  }
  .screen-left {
    left: 0;
  }
  .screen-right {
    right: -10px;
  }
  .hero-copy .actions {
    gap: 10px;
  }
  .hero-copy .button {
    padding: 11px 14px;
    font-size: 0.8rem;
  }
  .game-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .featured .game-grid .game-card:last-child {
    grid-column: 1/-1;
    grid-template-columns: 30% 70%;
    min-height: 210px;
  }
  .featured .game-grid .game-card:last-child .game-art {
    min-height: 210px;
  }
  .featured .game-grid .game-card:last-child .game-copy {
    padding: 25px;
  }
  .studio-preview {
    grid-template-columns: 1fr;
  }
  .preview-values {
    gap: 16px;
  }
  .cta-band {
    flex-wrap: wrap;
  }
  .cta-band .actions {
    margin-left: 0;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
  .catalog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .catalog-toolbar {
    align-items: stretch;
    flex-direction: column;
  }
  .search-box {
    min-width: 0;
  }
  .page-intro {
    padding: 40px 0 30px;
  }
  .page-intro h1 {
    font-size: 3rem;
  }
  .intro-motif {
    width: 100px;
    height: 130px;
  }
  .detail-hero {
    padding: 20px 0 35px;
    gap: 25px;
  }
  .detail-hero h1 {
    font-size: 2.6rem;
  }
  .detail-visual {
    min-height: 360px;
  }
  .detail-visual img {
    max-height: 330px;
  }
  .detail-panels {
    grid-template-columns: 1.2fr 1fr;
  }
  .about-hero {
    padding: 40px 0;
    gap: 24px;
  }
  .about-media {
    padding: 18px;
    min-height: 270px;
    gap: 8px;
  }
  .process {
    grid-template-columns: repeat(2, 1fr);
  }
  .support-layout {
    grid-template-columns: 1fr 1.3fr;
  }
  .support-help {
    padding: 26px;
  }
  .contact-grid {
    grid-template-columns: 1fr 1.15fr;
    gap: 18px;
  }
  .panel {
    padding: 23px;
  }
  .form-grid {
    grid-template-columns: 1fr;
  }
  .legal-layout {
    grid-template-columns: 190px 1fr;
    gap: 25px;
  }
  .privacy-cards,
  .game-support-grid {
    grid-template-columns: 1fr;
  }
  .privacy-cards .panel {
    display: block;
  }
  .contact-item {
    gap: 12px;
  }
  .contact-item .icon-disc {
    width: 38px;
    height: 38px;
  }
  .contact-item .icon-disc .icon {
    width: 20px;
  }
}
@media (max-width: 600px) {
  .container {
    width: calc(100% - 32px);
  }
  .home-hero {
    grid-template-columns: 1fr;
    padding: 36px 4px 18px;
    gap: 0;
  }
  .hero-copy h1 {
    font-size: clamp(2.4rem, 9vw, 3.4rem);
    margin: 17px 0;
  }
  .hero-copy .lead {
    font-size: 1rem;
    line-height: 1.7;
  }
  .hero-copy .actions {
    margin-top: 23px;
  }
  .hero-copy .button {
    font-size: 0.85rem;
    padding: 12px 18px;
  }
  .hero-footnote {
    margin-top: 18px;
  }
  .hero-art {
    height: 355px;
    transform: none;
    margin: 20px 0 0;
  }
  .hero-screen {
    border-width: 4px;
    border-radius: 17px;
  }
  .screen-main {
    width: 162px;
    left: calc(50% - 77px);
    top: 4px;
  }
  .screen-left {
    width: 122px;
    left: 4%;
    top: 61px;
  }
  .screen-right {
    width: 127px;
    right: 2%;
    top: 64px;
  }
  .hero-note {
    font-size: 0.67rem;
    bottom: 15px;
    padding: 8px 13px;
  }
  .eyebrow {
    font-size: 0.64rem;
    letter-spacing: 0.08em;
  }
  .section-heading {
    gap: 8px;
    margin-bottom: 15px;
  }
  .section-heading .text-link {
    font-size: 0.75rem;
  }
  .section-heading .text-link .icon {
    width: 15px;
  }
  .game-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .game-card,
  .featured .game-grid .game-card:last-child {
    grid-template-columns: 41% 59%;
    grid-column: auto;
  }
  .game-art,
  .featured .game-grid .game-card:last-child .game-art {
    min-height: 252px;
  }
  .game-copy,
  .featured .game-grid .game-card:last-child .game-copy {
    padding: 19px 16px;
  }
  .game-copy h3 {
    font-size: 1.13rem;
  }
  .game-copy p {
    font-size: 0.82rem;
  }
  .studio-preview {
    padding: 36px 0 16px;
    gap: 25px;
  }
  .studio-preview h2 {
    font-size: 2rem;
  }
  .preview-values {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .preview-values article {
    display: grid;
    grid-template-columns: 48px 1fr;
    column-gap: 13px;
    padding: 17px;
  }
  .preview-values .icon-disc {
    grid-row: span 2;
    width: 44px;
    height: 44px;
    margin: 0;
  }
  .preview-values h3 {
    align-self: end;
    margin-bottom: 4px;
  }
  .preview-values p {
    font-size: 0.83rem;
  }
  .cta-band {
    margin: 28px 0 32px;
    padding: 25px 22px;
    border-radius: 14px;
  }
  .cta-band h2 {
    font-size: 1.45rem;
  }
  .cta-band p {
    font-size: 0.86rem;
  }
  .cta-band .actions {
    width: 100%;
    flex-wrap: wrap;
  }
  .cta-band .button {
    flex: 1;
    font-size: 0.8rem;
    padding: 11px 12px;
    white-space: nowrap;
  }
  .site-footer {
    padding-top: 33px;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 29px 15px;
  }
  .footer-brand {
    grid-column: 1/-1;
  }
  .footer-grid > div:last-child {
    grid-column: 1/-1;
  }
  .site-footer .email {
    font-size: 0.95rem;
  }
  .site-footer a:not(.brand) {
    min-height: 36px;
    margin: 3px 0;
    padding-block: 6px;
  }
  .footer-bottom {
    margin-top: 26px;
    font-size: 0.68rem;
  }
  .page-intro {
    padding-top: 36px;
    gap: 0;
  }
  .page-intro h1 {
    font-size: 2.6rem;
  }
  .page-intro .lead {
    font-size: 1rem;
  }
  .intro-motif {
    display: none;
  }
  .filter-row {
    gap: 7px;
  }
  .filter {
    padding: 10px 15px;
    font-size: 0.8rem;
  }
  .catalog-grid {
    grid-template-columns: 1fr;
  }
  .catalog-grid .game-card {
    grid-template-columns: 1fr;
  }
  .catalog-grid .game-art {
    height: 320px;
  }
  .catalog-grid .game-copy {
    padding: 23px;
  }
  .breadcrumbs {
    margin-top: 21px;
  }
  .breadcrumbs ol {
    font-size: 0.72rem;
  }
  .detail-hero {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .detail-copy h1 {
    font-size: 2.65rem;
    margin-top: 13px;
  }
  .detail-visual {
    min-height: 390px;
  }
  .detail-visual img {
    max-height: 360px;
  }
  .detail-panels {
    grid-template-columns: 1fr;
  }
  .gallery-shell {
    padding: 18px 14px;
  }
  .gallery-item {
    flex-basis: 145px;
  }
  .gallery-item img {
    height: 258px;
  }
  .gallery-controls {
    gap: 5px;
  }
  .gallery-head h2 {
    font-size: 1.15rem;
  }
  .media-note {
    font-size: 0.75rem;
  }
  .related {
    margin-top: 30px;
  }
  .panel {
    padding: 23px 20px;
  }
  .about-hero {
    grid-template-columns: 1fr;
    padding-top: 36px;
  }
  .about-hero h1 {
    font-size: 2.65rem;
  }
  .about-media {
    min-height: 290px;
    padding: 26px 20px;
    margin-top: 10px;
  }
  .values-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .value-card {
    padding: 19px 15px;
  }
  .value-card h3 {
    font-size: 1rem;
  }
  .value-card p {
    font-size: 0.8rem;
  }
  .value-card .icon-disc {
    width: 43px;
    height: 43px;
    margin-bottom: 15px;
  }
  .process {
    gap: 22px;
    padding: 23px;
    grid-template-columns: 1fr;
  }
  .support-layout {
    grid-template-columns: 1fr;
  }
  .support-help {
    padding: 26px;
  }
  .support-links a {
    padding: 17px;
  }
  .faq-section summary {
    padding: 17px;
    font-size: 0.87rem;
  }
  .faq-section details p {
    padding: 14px 17px 20px;
  }
  .contact-grid {
    grid-template-columns: 1fr;
  }
  .form-grid {
    grid-template-columns: 1fr;
  }
  .legal-layout {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .legal-nav {
    position: static;
    padding: 17px;
  }
  .legal-nav a {
    display: inline-flex;
    padding: 9px;
    font-size: 0.8rem;
    min-height: 44px;
    margin-right: 3px;
  }
  .legal-nav h2 {
    margin-bottom: 9px;
  }
  .legal-body h2 {
    font-size: 1.3rem;
  }
  .legal-body p,
  .legal-body li {
    font-size: 0.93rem;
  }
  .legal-grid {
    grid-template-columns: 1fr;
  }
  .notice {
    padding: 18px;
    font-size: 0.83rem;
  }
  .not-found {
    padding: 65px 0;
  }
  .not-found h1 {
    font-size: 2.6rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
.hero-art {
  overflow: clip;
}
.gallery-item {
  flex: 1 0 160px;
}
.gallery-item img {
  height: 310px;
}
.icon-button:disabled {
  opacity: 0.45;
}
.featured .game-art,
.related .game-art {
  height: 285px;
  min-height: 285px;
}
.game-art.logo-art .art-label {
  font-size: 0.6rem;
}
@media (max-width: 850px) {
  html:not(.js) .nav-shell {
    flex-wrap: wrap;
  }
  html:not(.js) nav#primary-nav {
    display: flex;
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 0;
    border: 0;
    box-shadow: none;
    gap: 14px;
  }
  html:not(.js) .menu-toggle {
    display: none;
  }
  html:not(.js) .nav-cta {
    margin: 0;
  }
}
@media (max-width: 600px) {
  .featured .game-art,
  .related .game-art {
    height: 255px;
    min-height: 255px;
  }
  .gallery-item {
    flex: 0 0 145px;
  }
  .gallery-item img {
    height: 258px;
  }
}
@media print {
  .site-header,
  .site-footer,
  .cta-band,
  .legal-nav,
  .toast {
    display: none;
  }
  .container {
    width: 100%;
  }
  .legal-layout {
    display: block;
  }
  body {
    background: white;
  }
}

/* Premium depth system: CSS-only progressive enhancement, no rendering library. */
:root {
  --surface: #fffefa;
  --surface-warm: #fff8ea;
  --deep-shadow: 0 24px 54px #14382b17, 0 5px 14px #8d62120c;
  --card-shadow: 0 14px 30px #14382b12, 0 2px 6px #14382b08;
  --edge-light: inset 0 1px #ffffffcc;
  --ease-premium: cubic-bezier(0.2, 0.78, 0.18, 1);
}
body {
  background:
    radial-gradient(80rem 42rem at 100% -10%, #f9e1a957, transparent 51%),
    radial-gradient(50rem 38rem at -12% 33%, #dcefe05c, transparent 61%),
    #fffcf7;
  overflow-x: clip;
}
body::before,
body::after {
  content: "";
  position: fixed;
  z-index: -1;
  width: min(36vw, 470px);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.46;
}
body::before {
  top: 15vh;
  right: -19vw;
  background: radial-gradient(circle, #f5d78877 0 1%, #f5d78822 36%, transparent 68%);
}
body::after {
  bottom: 4vh;
  left: -23vw;
  background: radial-gradient(circle, #b4d4bb45 0 2%, #b4d4bb10 48%, transparent 69%);
}
.site-header {
  padding-top: 18px;
}
.nav-shell {
  background: linear-gradient(135deg, #fffffff8, #fffaf0ed);
  border-color: #ffffff;
  box-shadow: 0 18px 46px #14382b12, 0 2px 5px #8d62120a, var(--edge-light);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.brand {
  transition: transform 0.32s var(--ease-premium);
}
.brand:hover {
  transform: translateY(-1px);
}
#primary-nav > a:not(.button) {
  transition: color 0.2s ease, transform 0.2s var(--ease-premium);
}
#primary-nav > a:not(.button):hover {
  color: var(--green);
  transform: translateY(-1px);
}
#primary-nav > a[aria-current="page"]:after {
  height: 3px;
  border-radius: 99px;
  box-shadow: 0 2px 8px #d39a166e;
}
.button {
  position: relative;
  overflow: hidden;
  border-radius: 13px;
  box-shadow: 0 6px 0 #083e2f, 0 11px 22px #0b5d4522;
  transition: transform 0.25s var(--ease-premium), box-shadow 0.25s var(--ease-premium), background 0.2s;
}
.button::before {
  content: "";
  position: absolute;
  inset: 1px 1px auto;
  height: 45%;
  border-radius: 11px 11px 45% 45%;
  background: linear-gradient(#ffffff29, transparent);
  pointer-events: none;
}
.button:hover {
  transform: translateY(-3px);
  box-shadow: 0 9px 0 #083e2f, 0 17px 28px #0b5d4529;
}
.button:active {
  transform: translateY(3px);
  box-shadow: 0 2px 0 #083e2f, 0 5px 12px #0b5d451a;
}
.button.outline {
  background: #ffffffb8;
  box-shadow: 0 4px 0 #c8d6cf, 0 9px 17px #14382b0c;
}
.button.outline:hover {
  box-shadow: 0 7px 0 #c8d6cf, 0 14px 21px #14382b12;
}
.button.gold {
  box-shadow: 0 6px 0 #a86e03, 0 12px 23px #d39a1644;
}
.button.gold:hover {
  box-shadow: 0 9px 0 #a86e03, 0 17px 27px #d39a1650;
}
.hero-copy {
  padding-block: 24px;
}
.hero-copy h1 {
  text-wrap: balance;
}

/* =========================================================
   HOME HERO — PREMIUM 3D SCENE
   ========================================================= */
.hero-art {
  position: relative;
  height: 468px;
  perspective: 1300px;
  perspective-origin: 50% 46%;
  transform-style: preserve-3d;
  isolation: isolate;
  --scene-rx: 0deg;
  --scene-ry: 0deg;
}
.hero-art::before {
  content: "";
  position: absolute;
  inset: 10% 3% 5%;
  z-index: -3;
  border: 1px solid #ffffffc7;
  border-radius: 44% 56% 50% 50% / 46% 43% 57% 54%;
  background:
    radial-gradient(circle at 69% 25%, #ffffffb8 0, transparent 29%),
    linear-gradient(145deg, #fff6d8b5, #e4efdca1);
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 30px 55px #0d3d2b12;
  transform: translateZ(-75px) rotateZ(-6deg);
  pointer-events: none;
}
.hero-stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
  transform:
    rotateX(var(--scene-rx))
    rotateY(var(--scene-ry));
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
  pointer-events: none;
}
.hero-orbit {
  position: absolute;
  width: 92%;
  aspect-ratio: 1.3;
  border: 1px solid #dcb85e8c;
  border-radius: 50%;
  background:
    radial-gradient(
      ellipse,
      #f4dc927d,
      #f2dea126 45%,
      transparent 69%
    );
  box-shadow: inset 0 1px 0 #ffffffa6;
  transform:
    translate3d(
      var(--depth-x, 0px),
      var(--depth-y, 0px),
      -35px
    )
    rotateX(54deg)
    rotateZ(-13deg);
  z-index: -1;
  transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}
.hero-ambient {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.ambient-one {
  width: 54px;
  height: 54px;
  top: 7%;
  right: 11%;
  background:
    radial-gradient(
      circle at 29% 26%,
      #fffdf0 0,
      #f8e3a9 18%,
      #dba72c 68%,
      #9d6808 100%
    );
  box-shadow:
    inset -8px -9px 15px #9b680d22,
    inset 5px 5px 11px #ffffff90,
    0 15px 28px #9e690e30;
  transform: translateZ(35px);
  animation: ambient-float 6s ease-in-out infinite;
}
.ambient-two {
  width: 29px;
  height: 29px;
  left: 14%;
  bottom: 23%;
  background:
    radial-gradient(
      circle at 30% 26%,
      #dff0e3,
      #79ad89 62%,
      #4b7e5c
    );
  box-shadow:
    inset 3px 3px 7px #ffffff7d,
    0 12px 22px #0b5d4528;
  transform: translateZ(12px);
  animation: ambient-float 7s -2s ease-in-out infinite reverse;
}
.hero-screen {
  transform-style: preserve-3d;
  backface-visibility: hidden;
  border-color: #0a3e30;
  background: #173d31;
  box-shadow:
    0 28px 43px #0b392b31,
    0 8px 17px #0b392b25,
    inset 0 1px 0 #ffffff7d;
  transition:
    transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.34s ease;
  will-change: transform;
}
.hero-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      118deg,
      #ffffff38 0%,
      #ffffff12 18%,
      transparent 34%,
      transparent 68%,
      #00000013 100%
    );
  pointer-events: none;
}
.screen-left {
  transform:
    translate3d(
      var(--depth-x, 0px),
      var(--depth-y, 0px),
      18px
    )
    rotateY(17deg)
    rotateX(1deg)
    rotateZ(-11deg);
}
.screen-right {
  transform:
    translate3d(
      var(--depth-x, 0px),
      var(--depth-y, 0px),
      22px
    )
    rotateY(-17deg)
    rotateX(1deg)
    rotateZ(13deg);
}
.screen-main {
  transform:
    translate3d(
      var(--depth-x, 0px),
      var(--depth-y, 0px),
      92px
    )
    rotateX(1deg)
    rotateY(-3deg)
    rotateZ(4deg);
  box-shadow:
    0 34px 52px #0b392b3d,
    0 10px 20px #0b392b2c,
    inset 0 1px 0 #ffffff85;
}
.hero-chip {
  position: absolute;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 13px;
  border: 1px solid #ffffffd9;
  border-radius: 999px;
  background: linear-gradient(145deg, #fffffff7, #fffaf0e8);
  color: var(--forest);
  box-shadow:
    0 14px 27px #14382b18,
    inset 0 1px 0 #ffffff;
  font-size: 0.7rem;
  font-weight: 750;
  letter-spacing: 0.015em;
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}
.hero-chip .icon {
  width: 15px;
  height: 15px;
  color: var(--gold-dark);
}
.hero-chip-top {
  top: 10%;
  left: 7%;
  transform:
    translate3d(
      var(--depth-x, 0px),
      var(--depth-y, 0px),
      118px
    )
    rotateZ(-5deg);
}
.hero-chip-bottom {
  right: -1%;
  bottom: 17%;
  transform:
    translate3d(
      var(--depth-x, 0px),
      var(--depth-y, 0px),
      72px
    )
    rotateZ(4deg);
}
.hero-note {
  border-color: #ffffff;
  background: #fffdf9f2;
  box-shadow:
    0 15px 29px #14382b18,
    inset 0 1px 0 #ffffff;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transform:
    translate3d(
      calc(-50% + var(--depth-x, 0px)),
      var(--depth-y, 0px),
      120px
    );
  transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.hero-particles {
  transform:
    translate3d(
      var(--depth-x, 0px),
      var(--depth-y, 0px),
      105px
    );
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.depth-card,
.depth-frame {
  transform-style: preserve-3d;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
}
.game-card {
  border-color: #ffffffe0;
  background: linear-gradient(130deg, #fffffff7, #fffdfa);
  box-shadow: var(--card-shadow), var(--edge-light);
  transition: transform 0.32s var(--ease-premium), box-shadow 0.32s var(--ease-premium), border-color 0.32s;
}
.game-card:hover {
  box-shadow: var(--deep-shadow), var(--edge-light);
}
.game-art {
  background: linear-gradient(135deg, #e8f0d9, #f7f1de);
  transform: translateZ(15px);
}
.game-art img {
  transition: transform 0.45s var(--ease-premium), filter 0.45s ease;
}
.game-card:hover .game-art img {
  transform: scale(1.045);
  filter: saturate(1.05) contrast(1.015);
}
.game-copy {
  position: relative;
  z-index: 1;
  transform: translateZ(28px);
}
.game-copy::before {
  content: "";
  position: absolute;
  inset: 10px 9px 9px 0;
  z-index: -1;
  border-radius: 14px 0 0 14px;
  background: linear-gradient(145deg, #ffffff99, transparent);
  pointer-events: none;
}
.tag {
  border: 1px solid #fff7;
  box-shadow: inset 0 1px #fff9;
}
.studio-preview,
.cta-band {
  position: relative;
}
.studio-preview::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 36%;
  height: 58%;
  border-radius: 44% 56% 49% 51%;
  background: radial-gradient(circle, #e5cf8a2b, transparent 68%);
  pointer-events: none;
  z-index: -1;
}
.preview-values article,
.value-card,
.panel,
.gallery-shell,
.process,
.legal-nav,
.support-help {
  border-color: #ffffff;
  box-shadow: var(--card-shadow), var(--edge-light);
}
.preview-values article,
.value-card {
  transition: transform 0.28s var(--ease-premium), box-shadow 0.28s var(--ease-premium);
}
.preview-values article:hover,
.value-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--deep-shadow), var(--edge-light);
}
.cta-band {
  border: 1px solid #ffffff24;
  border-radius: 22px;
  box-shadow: 0 20px 38px #0b392b20, inset 0 1px #ffffff2e;
  background:
    radial-gradient(55% 180% at 2% 10%, #2e8c6d76, transparent 62%),
    linear-gradient(120deg, #0c4938, #082f25);
}
.cta-band::before,
.cta-band::after {
  content: "";
  position: absolute;
  border: 1px solid #e7bf5c36;
  border-radius: 50%;
  pointer-events: none;
}
.cta-band::before {
  width: 230px;
  height: 230px;
  right: -75px;
  top: -150px;
}
.cta-band::after {
  width: 140px;
  height: 140px;
  left: -52px;
  bottom: -86px;
}
.page-intro {
  min-height: 270px;
  position: relative;
}
.page-intro::before {
  content: "";
  position: absolute;
  right: 1%;
  top: 15%;
  width: 280px;
  height: 180px;
  border-radius: 55% 45% 62% 38%;
  background: radial-gradient(circle at 46% 43%, #f6d9856a, #f6d98513 49%, transparent 70%);
  pointer-events: none;
}
.intro-motif {
  position: relative;
  z-index: 1;
  opacity: 0.34;
  transform: rotate(8deg) translateZ(0);
}
.detail-visual,
.about-media {
  border: 1px solid #ffffff;
  box-shadow: var(--deep-shadow), var(--edge-light);
  overflow: hidden;
}
.detail-visual::before,
.about-media::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(124deg, #ffffff55, transparent 28%, transparent 70%, #14382b0b);
}
.detail-visual img,
.about-media img {
  position: relative;
  z-index: 1;
}
.detail-visual img {
  transform: translateZ(20px);
}
.about-media {
  position: relative;
  perspective: 1000px;
  transform: perspective(1000px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transition: transform 0.35s var(--ease-premium), box-shadow 0.35s var(--ease-premium);
}
.about-media img:nth-child(1) {
  transform: translateZ(20px) rotateY(8deg);
}
.about-media img:nth-child(2) {
  transform: translateY(-20px) translateZ(55px);
}
.about-media img:nth-child(3) {
  transform: translateZ(24px) rotateY(-8deg);
}
.business-information {
  padding-block: 18px 42px;
}
.business-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
}
.business-details > div {
  min-height: 92px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px 22px;
  border: 1px solid #ffffff;
  border-radius: 17px;
  background: linear-gradient(135deg, #fffefa, #fff8ec);
  box-shadow: var(--card-shadow), var(--edge-light);
}
.business-details dt {
  color: var(--gold-dark);
  font-size: 0.7rem;
  font-weight: 760;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}
.business-details dd {
  margin-top: 5px;
  color: var(--forest);
  font-size: 0.98rem;
  font-weight: 690;
  text-align: left;
  overflow-wrap: anywhere;
}
.contact-options {
  background: linear-gradient(145deg, #fffefa, #fdf6e9);
}
.whatsapp-contact {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 13px;
  margin: 14px 0;
  padding: 15px 14px;
  border: 1px solid #b8e3ca;
  border-radius: 15px;
  background: linear-gradient(135deg, #effbf2, #dcf5e4);
  color: #155c36;
  box-shadow: inset 0 1px #fff, 0 8px 18px #1d7f4512;
  transition: transform 0.25s var(--ease-premium), box-shadow 0.25s var(--ease-premium), background 0.25s;
}
.whatsapp-contact:hover {
  color: #104c2c;
  background: linear-gradient(135deg, #e2f7e8, #cff0db);
  transform: translateY(-2px);
  box-shadow: inset 0 1px #fff, 0 13px 24px #1d7f4520;
}
.whatsapp-contact .icon-disc {
  width: 46px;
  height: 46px;
  margin: 0;
  color: white;
  background: #218a4d;
  box-shadow: 0 5px 0 #176f3c, 0 9px 15px #1d7f4524;
}
.whatsapp-contact strong,
.whatsapp-contact small {
  display: block;
}
.whatsapp-contact strong {
  font-size: 0.96rem;
}
.whatsapp-contact small {
  color: #367554;
  margin-top: 2px;
  font-size: 0.75rem;
  line-height: 1.4;
}
.contact-call {
  min-height: 42px;
  margin-top: 4px;
  padding: 9px 14px;
  font-size: 0.82rem;
}
.form-field input,
.form-field select,
.form-field textarea {
  border-color: #c7d7cd;
  background: #fffefa;
  box-shadow: inset 0 1px 2px #14382b08;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: #438a6d;
  background: #fff;
  box-shadow: 0 0 0 4px #0b5d4511, inset 0 1px 2px #14382b08;
}
.legal-layout {
  padding-bottom: 14px;
}
.legal-body section {
  border-left: 2px solid #e3d3a6;
  padding-left: 25px;
}
.legal-body section:hover {
  border-color: #b88924;
}
.legal-nav {
  background: #fffefa;
}
.site-footer {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(44rem 23rem at 4% 0%, #17624b69, transparent 65%),
    linear-gradient(130deg, #0d3429, #082a21);
}
.site-footer::before,
.site-footer::after {
  content: "";
  position: absolute;
  border: 1px solid #e6bb5630;
  border-radius: 50%;
  pointer-events: none;
}
.site-footer::before {
  width: 330px;
  height: 330px;
  left: -180px;
  bottom: -190px;
}
.site-footer::after {
  width: 240px;
  height: 240px;
  right: -115px;
  top: -135px;
}
.footer-grid,
.footer-bottom {
  position: relative;
  z-index: 1;
}
.whatsapp-float {
  position: fixed;
  z-index: 19;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 54px;
  padding: 0 16px;
  border: 1px solid #ffffffb5;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, #1d8047, #167241);
  box-shadow: 0 9px 0 #105332, 0 17px 29px #0c372b35, inset 0 1px #ffffff55;
  font-size: 0.82rem;
  font-weight: 760;
  transition: transform 0.28s var(--ease-premium), box-shadow 0.28s var(--ease-premium), padding 0.28s var(--ease-premium), opacity 0.28s ease;
  animation: float-in 0.7s 0.5s both var(--ease-premium);
}
.whatsapp-float:hover {
  color: #fff;
  transform: translateY(-4px);
  box-shadow: 0 12px 0 #105332, 0 23px 34px #0c372b3b, inset 0 1px #ffffff55;
}
.whatsapp-float .icon {
  width: 22px;
  height: 22px;
}
@keyframes ambient-float {
  50% {
    translate: 0 -11px;
    rotate: 7deg;
  }
}
@keyframes float-in {
  from { opacity: 0; transform: translate3d(0, 16px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@media (hover: hover) and (pointer: fine) {
  .depth-card {
    transform: perspective(1200px) translate3d(0, 0, 0) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
    will-change: transform;
  }
  .depth-card:hover {
    transform: perspective(1200px) translate3d(0, -7px, 18px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  }
  .hero-art:hover .screen-main {
    box-shadow: 0 34px 50px #0b392b48, 0 10px 18px #0b392b2b, inset 0 1px #ffffff77;
  }
  .about-media:hover {
    box-shadow: 0 28px 50px #14382b1b, 0 7px 17px #8d621211, inset 0 1px #fff;
  }
}
@media (max-width: 850px) {
  .site-header { padding-top: 10px; }
  .nav-shell { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
  .hero-art { perspective: 900px; }
  .business-details { grid-template-columns: 1fr; }
  .whatsapp-float { padding: 0; width: 54px; justify-content: center; }
  .whatsapp-float span { display: none; }
}
@media (max-width: 600px) {
  body::before, body::after { display: none; }
  .hero-art { height: 365px; }
  .hero-art::before { inset: 9% 2% 6%; }
  .hero-stage { transform: none; }
  .hero-chip { display: none; }
  .hero-orbit {
    width: 94%;
    transform: translate3d(0, 0, -22px) rotateX(54deg) rotateZ(-13deg);
  }
  .hero-particles { transform: translate3d(0, 0, 50px); }
  .screen-left { transform: translate3d(0, 0, 18px) rotateZ(-12deg) rotateY(5deg); }
  .screen-right { transform: translate3d(0, 0, 21px) rotateZ(14deg) rotateY(-5deg); }
  .screen-main { transform: translate3d(0, 0, 42px) rotateZ(5deg); }
  .hero-note { transform: translate3d(-50%, 0, 60px); }
  .about-media img:nth-child(1), .about-media img:nth-child(3) { transform: none; }
  .about-media img:nth-child(2) { transform: translateY(-14px); }
  .business-details > div { min-height: 0; padding: 17px; }
  .business-details dd { font-size: 0.9rem; }
  .legal-body section { padding-left: 17px; }
  .whatsapp-contact { gap: 10px; padding: 13px 11px; }
  .whatsapp-contact small { font-size: 0.7rem; }
  .whatsapp-float { right: max(14px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  .whatsapp-float { animation: none; }
  .hero-stage,
  .hero-screen,
  .hero-chip,
  .hero-note,
  .hero-particles {
    transition: none !important;
  }
  .ambient-one,
  .ambient-two,
  .hero-particles i {
    animation: none !important;
  }
}
@media print {
  .whatsapp-float { display: none; }
}

/* Small, spatial accents for the studio pages. Decorative layers never receive input. */
.hero-particles {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  overflow: hidden;
}
.hero-particles i {
  position: absolute;
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: #d6a92f;
  box-shadow: 0 0 13px #e1b74788;
  opacity: 0.72;
  animation: particle-drift 6s ease-in-out infinite alternate;
}
.hero-particles i:nth-child(1) { left: 7%; top: 15%; width: 5px; height: 5px; animation-delay: -2s; }
.hero-particles i:nth-child(2) { left: 19%; top: 62%; border-radius: 50%; background: #70ad85; animation-delay: -4s; }
.hero-particles i:nth-child(3) { right: 17%; top: 12%; transform: rotate(28deg); animation-delay: -1s; }
.hero-particles i:nth-child(4) { right: 6%; top: 50%; width: 4px; height: 4px; background: #fff9db; animation-delay: -3s; }
.hero-particles i:nth-child(5) { left: 37%; bottom: 12%; width: 5px; height: 5px; border-radius: 50%; background: #7dae91; animation-delay: -5s; }
.hero-particles i:nth-child(6) { right: 27%; bottom: 13%; width: 5px; height: 5px; animation-delay: -2.8s; }
@keyframes particle-drift {
  from { opacity: 0.32; translate: 0 4px; }
  to { opacity: 0.82; translate: 6px -10px; }
}
.hero-copy h1 span,
.about-hero h1 span {
  color: var(--gold-dark);
  background: linear-gradient(105deg, #9a650a 10%, #e1ae3d 42%, #96630c 70%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: headline-light 8s ease-in-out infinite;
}
@keyframes headline-light {
  0%, 30%, 100% { background-position: 100% center; }
  62% { background-position: 0 center; }
}
.game-card {
  position: relative;
  isolation: isolate;
}
.game-card::after {
  content: "";
  position: absolute;
  z-index: 3;
  top: 0;
  left: -48%;
  width: 45%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #e9ba4d, #fff1b2, transparent);
  box-shadow: 0 2px 9px #d59b31aa;
  opacity: 0;
  pointer-events: none;
}
.game-card:hover::after,
.game-card:focus-within::after {
  opacity: 1;
  animation: card-trace 1.1s ease-out both;
}
@keyframes card-trace {
  from { left: -48%; }
  to { left: 103%; }
}
.contact-options,
.contact-form {
  position: relative;
  background: linear-gradient(145deg, #fffefa, #fffaf2);
  border-color: #fff;
  box-shadow: 0 19px 38px #12372d13, 0 3px 8px #a77b270d, inset 0 1px #fff;
  transition: transform 0.35s var(--ease-premium), box-shadow 0.35s var(--ease-premium);
}
.contact-form {
  background: linear-gradient(145deg, #fff, #fffdfa);
}
.contact-options [data-copy-email] {
  min-width: 0;
  min-height: 39px;
  width: auto;
  padding: 7px 13px;
  margin-top: 4px;
  gap: 7px;
  border-radius: 999px;
  border-color: #c9d9cd;
  background: #f7fbf5;
  font-size: 0.82rem;
  white-space: nowrap;
  transition: transform 0.2s var(--ease-premium), background 0.2s, box-shadow 0.2s;
}
.contact-options [data-copy-email]:hover {
  transform: translateY(-2px);
  background: #eaf5e9;
  box-shadow: 0 6px 14px #12372d14;
}
.draft-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.draft-actions .button {
  min-height: 44px;
  padding: 9px 15px;
  font-size: 0.82rem;
}
.draft-help {
  margin: 15px 0 0 !important;
  max-width: 60ch;
}
@media (hover: hover) and (pointer: fine) {
  .contact-options:hover,
  .contact-form:hover {
    transform: perspective(1100px) translateY(-4px) rotateX(0.5deg);
    box-shadow: 0 25px 49px #12372d1a, 0 5px 12px #a77b2710, inset 0 1px #fff;
  }
}
@media (max-width: 600px) {
  .hero-particles { opacity: 0.55; }
  .draft-actions .button { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-copy h1 span,
  .about-hero h1 span { animation: none; }
  .game-card:hover::after,
  .game-card:focus-within::after { animation: none; left: 0; width: 100%; }
}

/* =========================================================
   HOME HERO V4 — VISUAL DEFECT FIX PASS
   Refines hierarchy, spacing, contrast and 3D composition
   while preserving the existing interactive JS contract.
   ========================================================= */

.home-hero[data-hero-interactive] {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(330px, 0.96fr);
  align-items: center;
  gap: 42px;
  isolation: isolate;
  overflow: hidden;
  min-height: 520px;
  margin: 38px 0 30px;
  padding: 52px 40px 34px;
  border: 1px solid #ffffffd8;
  border-radius: 30px;
  background:
    radial-gradient(circle at 84% 18%, #e6be4d24 0 8%, transparent 30%),
    radial-gradient(circle at 12% 88%, #0b5d4516 0 8%, transparent 34%),
    radial-gradient(circle at 54% 46%, #ffffffc7 0 16%, transparent 52%),
    linear-gradient(138deg, #fffdf8 0%, #f8f2e4 52%, #eff5ee 100%);
  box-shadow:
    0 24px 54px #12372d12,
    0 6px 18px #8c64100e,
    inset 0 1px 0 #ffffff;
  perspective: 1700px;
  transform-style: preserve-3d;

  --copy-x: 0px;
  --copy-y: 0px;
  --copy-rx: 0deg;
  --copy-ry: 0deg;
  --field-x: 0px;
  --field-y: 0px;
  --hud-x: 0px;
  --hud-y: 0px;
  --hud-x-reverse: 0px;
  --hud-y-reverse: 0px;
  --hero-scroll: 0px;
}

.home-hero[data-hero-interactive]::before,
.home-hero[data-hero-interactive]::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

.home-hero[data-hero-interactive]::before {
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(
      90deg,
      #ffffff9c,
      transparent 22%,
      transparent 78%,
      #ffffff66
    ),
    linear-gradient(
      180deg,
      #ffffff70 0,
      transparent 24%,
      transparent 76%,
      #0b5d4508 100%
    );
  box-shadow: inset 0 0 0 1px #ffffff45;
}

.home-hero[data-hero-interactive]::after {
  width: 42%;
  height: 2px;
  top: 0;
  left: 29%;
  background:
    linear-gradient(
      90deg,
      transparent,
      #d7a43bb5,
      #fff1c4,
      #d7a43bb5,
      transparent
    );
  box-shadow: 0 2px 10px #d5a33248;
  opacity: 0.72;
}

/* --- Gaming background -------------------------------------------------- */

.hero-gamefield {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

.hero-grid {
  position: absolute;
  left: -15%;
  right: -15%;
  bottom: -38%;
  height: 72%;
  opacity: 0.4;
  background-image:
    linear-gradient(#1a6c5142 1px, transparent 1px),
    linear-gradient(90deg, #1a6c5142 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to top, #000 34%, transparent 94%);
  -webkit-mask-image: linear-gradient(to top, #000 34%, transparent 94%);
  transform:
    translate3d(
      var(--field-x),
      calc(var(--field-y) + var(--hero-scroll)),
      0
    )
    perspective(540px)
    rotateX(63deg)
    scale(1.16);
  transform-origin: center bottom;
  animation: hero-grid-drift 12s linear infinite;
  will-change: transform, background-position;
}

.hero-scanline {
  position: absolute;
  left: 5%;
  right: 5%;
  top: -5%;
  height: 16%;
  opacity: 0.17;
  background:
    linear-gradient(
      180deg,
      transparent,
      #d6aa3a72,
      transparent
    );
  filter: blur(1px);
  animation: hero-scan 7.2s ease-in-out infinite;
}

.hero-hud {
  position: absolute;
  width: 108px;
  height: 70px;
  opacity: 0.39;
  filter: drop-shadow(0 5px 10px #0b5d4512);
  transform: translate3d(var(--hud-x), var(--hud-y), 0);
}

.hero-hud::before,
.hero-hud::after {
  content: "";
  position: absolute;
  inset: 0;
  border-color: #b78a2466;
  border-style: solid;
  border-width: 0;
}

.hero-hud-a {
  left: 3.2%;
  top: 7%;
}

.hero-hud-a::before {
  border-left-width: 1px;
  border-top-width: 1px;
  border-radius: 10px 0 0 0;
}

.hero-hud-a::after {
  width: 7px;
  height: 7px;
  top: -3px;
  left: -3px;
  border: 1px solid #0b5d4573;
  border-radius: 50%;
  background: #fff7db;
  box-shadow: 0 0 10px #c89c3266;
}

.hero-hud-b {
  right: 3.2%;
  bottom: 7%;
  transform:
    translate3d(
      var(--hud-x-reverse),
      var(--hud-y-reverse),
      0
    )
    rotate(180deg);
}

.hero-hud-b::before {
  border-left-width: 1px;
  border-top-width: 1px;
  border-radius: 10px 0 0 0;
}

.hero-hud-b::after {
  width: 26px;
  height: 1px;
  top: 11px;
  left: 12px;
  background: linear-gradient(90deg, #0b5d455f, transparent);
}

.hero-field-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(16px);
  opacity: 0.46;
  transform: translate3d(var(--field-x), var(--field-y), 0);
}

.hero-field-glow-one {
  width: 300px;
  height: 300px;
  right: 7%;
  top: 9%;
  background: radial-gradient(circle, #e4b8493b, transparent 67%);
}

.hero-field-glow-two {
  width: 250px;
  height: 250px;
  left: -4%;
  bottom: -12%;
  background: radial-gradient(circle, #2a7b5e26, transparent 68%);
  transform:
    translate3d(
      var(--hud-x-reverse),
      var(--hud-y-reverse),
      0
    );
}

.hero-field-particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.hero-field-particles i {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #c89c32;
  box-shadow: 0 0 9px #c89c3260;
  opacity: 0.44;
  animation: hero-field-particle 7s ease-in-out infinite alternate;
}

.hero-field-particles i:nth-child(1) { left: 7%; top: 18%; animation-delay: -1s; }
.hero-field-particles i:nth-child(2) { left: 18%; top: 74%; width: 3px; height: 3px; background: #4c9476; animation-delay: -3s; }
.hero-field-particles i:nth-child(3) { left: 31%; top: 12%; width: 2px; height: 2px; animation-delay: -5s; }
.hero-field-particles i:nth-child(4) { left: 43%; top: 82%; background: #4c9476; animation-delay: -2s; }
.hero-field-particles i:nth-child(5) { left: 56%; top: 18%; width: 3px; height: 3px; animation-delay: -6s; }
.hero-field-particles i:nth-child(6) { left: 66%; top: 72%; width: 5px; height: 5px; animation-delay: -4s; }
.hero-field-particles i:nth-child(7) { left: 73%; top: 10%; background: #5b9a7f; animation-delay: -1.5s; }
.hero-field-particles i:nth-child(8) { left: 82%; top: 61%; width: 3px; height: 3px; animation-delay: -5.5s; }
.hero-field-particles i:nth-child(9) { left: 90%; top: 27%; animation-delay: -2.5s; }
.hero-field-particles i:nth-child(10) { left: 11%; top: 48%; width: 2px; height: 2px; animation-delay: -6.5s; }
.hero-field-particles i:nth-child(11) { left: 49%; top: 49%; width: 2px; height: 2px; background: #4c9476; animation-delay: -3.5s; }
.hero-field-particles i:nth-child(12) { left: 87%; top: 84%; width: 5px; height: 5px; animation-delay: -4.5s; }

.hero-click-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero-click-burst {
  position: absolute;
  width: 18px;
  height: 18px;
  border: 1px solid #b48720d9;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.2);
  opacity: 0.95;
  box-shadow:
    0 0 0 0 #d4aa4150,
    0 0 16px #d5aa3a55;
  animation:
    hero-click-burst
    620ms
    cubic-bezier(0.2, 0.8, 0.2, 1)
    forwards;
}

.hero-click-burst::before,
.hero-click-burst::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: #0b5d4578;
  transform: translate(-50%, -50%);
}

.hero-click-burst::before {
  width: 54px;
  height: 1px;
}

.hero-click-burst::after {
  width: 1px;
  height: 54px;
}

/* --- Copy hierarchy ----------------------------------------------------- */

.home-hero[data-hero-interactive] > .hero-copy,
.home-hero[data-hero-interactive] > .hero-art {
  position: relative;
  z-index: 2;
}

.home-hero[data-hero-interactive] .hero-copy {
  padding: 10px 0 4px;
  max-width: 560px;
  transform-style: preserve-3d;
  transform:
    translate3d(
      var(--copy-x),
      calc(var(--copy-y) + var(--hero-scroll)),
      34px
    )
    rotateX(var(--copy-rx))
    rotateY(var(--copy-ry));
  transition:
    transform
    0.28s
    cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.home-hero[data-hero-interactive] .hero-copy .eyebrow {
  width: fit-content;
  padding: 8px 12px;
  border: 1px solid #ffffffc9;
  border-radius: 999px;
  background: #fffdf8b8;
  box-shadow:
    0 8px 18px #12372d0b,
    inset 0 1px #fff;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transform: translateZ(14px);
}

.home-hero[data-hero-interactive] .hero-copy h1 {
  position: relative;
  margin: 20px 0 15px;
  max-width: 620px;
  font-size: clamp(2.55rem, 3.9vw, 3.9rem);
  line-height: 1.015;
  letter-spacing: -0.052em;
  text-wrap: balance;
  transform: translateZ(36px);
  text-shadow:
    0 2px 0 #ffffffb2,
    0 10px 22px #12372d0e;
  animation:
    hero-title-arrive
    760ms
    80ms
    both
    cubic-bezier(0.2, 0.9, 0.2, 1);
}

.home-hero[data-hero-interactive] .hero-copy h1 span {
  position: relative;
  display: inline-block;

  font-weight: 780;

  color: #956508;

  background:
    linear-gradient(
      110deg,
      #744807 0%,
      #96610c 20%,
      #b8801e 42%,
      #b37c14 52%,
      #b77815 68%,
      #895509 84%,
      #704306 100%
    );

  background-size: 220% 100%;

  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;

  filter:
    drop-shadow(
      0 2px 1px
      #5738061c
    )
    drop-shadow(
      0 8px 13px
      #7a500c14
    );

  text-shadow: none;

  animation:
    hero-headline-shine
    9s
    ease-in-out
    infinite;
}

.home-hero[data-hero-interactive] .hero-copy h1 span::after {
  content: "";

  position: absolute;

  left: 1%;
  bottom: -7px;

  width: 69%;
  height: 2px;

  border-radius: 999px;

  background:
    linear-gradient(
      90deg,
      #a86f11 0%,
      #d5a037 55%,
      #0b5d4538 82%,
      transparent 100%
    );

  opacity: 0.78;

  box-shadow:
    0 2px 7px
    #b17b171e;

  transform-origin: left;

  animation:
    hero-title-underline
    900ms
    360ms
    both
    cubic-bezier(
      0.2,
      0.9,
      0.2,
      1
    );
}

.home-hero[data-hero-interactive] .hero-copy .lead {
  max-width: 525px;
  color: #52655c;
  font-size: 1rem;
  line-height: 1.7;
  hyphens: none;
  word-break: normal;
  overflow-wrap: normal;
  text-wrap: pretty;
  transform: translateZ(20px);
  animation:
    hero-copy-arrive
    720ms
    170ms
    both
    cubic-bezier(0.2, 0.9, 0.2, 1);
}

.home-hero[data-hero-interactive] .hero-copy .actions {
  margin-top: 24px;
  transform: translateZ(28px);
  animation:
    hero-copy-arrive
    720ms
    240ms
    both
    cubic-bezier(0.2, 0.9, 0.2, 1);
}

.home-hero[data-hero-interactive] .button {
  position: relative;
  overflow: hidden;
  min-height: 50px;
  padding: 12px 20px;
  border-radius: 13px;
  transform-style: preserve-3d;
  box-shadow:
    0 4px 0 #073d2e,
    0 12px 18px #0b5d4518,
    inset 0 1px 0 #ffffff45;
  transition:
    transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.22s ease,
    background 0.22s ease;
}

.home-hero[data-hero-interactive] .button::after {
  content: "";
  position: absolute;
  top: -70%;
  left: -28%;
  width: 24%;
  height: 240%;
  background: linear-gradient(90deg, transparent, #ffffff80, transparent);
  transform: rotate(18deg) translateX(-180%);
  transition:
    transform
    0.55s
    cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.home-hero[data-hero-interactive] .button:hover {
  transform: translate3d(0, -3px, 10px);
  box-shadow:
    0 6px 0 #073d2e,
    0 16px 23px #0b5d4520,
    inset 0 1px 0 #ffffff54;
}

.home-hero[data-hero-interactive] .button:hover::after {
  transform: rotate(18deg) translateX(620%);
}

.home-hero[data-hero-interactive] .button:active {
  transform: translate3d(0, 1px, 1px);
  box-shadow:
    0 2px 0 #073d2e,
    0 7px 12px #0b5d4517;
}

.home-hero[data-hero-interactive] .button.outline {
  color: #0b5d45;
  border-color: #a6bbb0;
  background:
    linear-gradient(
      145deg,
      #fffffff2,
      #eff6f0d8
    );
  box-shadow:
    0 4px 0 #c7d6ce,
    0 12px 18px #12372d10,
    inset 0 1px 0 #ffffff;
}

.home-hero[data-hero-interactive] .button.outline:hover {
  background:
    linear-gradient(
      145deg,
      #ffffff,
      #e9f3eb
    );
  box-shadow:
    0 6px 0 #bdd0c5,
    0 16px 23px #12372d16,
    inset 0 1px 0 #ffffff;
}

.home-hero[data-hero-interactive] .hero-footnote {
  width: fit-content;
  margin-top: 21px;
  padding: 7px 11px;
  border: 1px solid #ffffffbd;
  border-radius: 999px;
  background: #fffdf894;
  box-shadow:
    inset 0 1px #fff,
    0 8px 16px #12372d0a;
  transform: translateZ(12px);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

.home-hero[data-hero-interactive] .hero-footnote .status i {
  width: 7px;
  height: 7px;
  background: #c7962f;
  box-shadow: 0 0 0 0 #c7962f66;
  animation: hero-status-pulse 2.3s ease-out infinite;
}

/* --- 3D art stage ------------------------------------------------------- */

.home-hero[data-hero-interactive] .hero-art {
  height: 432px;
  margin: 0;
  overflow: visible;
  perspective: 1400px;
  perspective-origin: 50% 44%;
  transform:
    translate3d(-8px, var(--hero-scroll), 0)
    scale(0.95);
  transform-style: preserve-3d;
  isolation: isolate;
}

.home-hero[data-hero-interactive] .hero-art::before {
  content: "";
  position: absolute;
  inset: 11% 4% 7%;
  z-index: -2;
  border: 1px solid #ffffffbd;
  border-radius: 42% 58% 52% 48% / 45% 43% 57% 55%;
  background:
    radial-gradient(circle at 69% 24%, #ffffffc3 0, transparent 28%),
    radial-gradient(circle at 35% 73%, #0b5d4514 0, transparent 38%),
    linear-gradient(145deg, #fff6d9b8, #e8f1e39e);
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 28px 50px #0d3d2b12;
  transform: translateZ(-82px) rotateZ(-5deg);
}

.home-hero[data-hero-interactive] .hero-stage {
  position: absolute;
  inset: 0;
  transform:
    rotateX(var(--scene-rx))
    rotateY(var(--scene-ry));
  transform-style: preserve-3d;
  transition:
    transform
    0.26s
    cubic-bezier(0.22, 1, 0.36, 1);
}

.home-hero[data-hero-interactive] .hero-stage::after {
  content: "";
  position: absolute;
  left: 15%;
  right: 14%;
  bottom: 10%;
  height: 56px;
  border-radius: 50%;
  background:
    radial-gradient(
      ellipse,
      #0d3c2d2f 0,
      #0d3c2d12 42%,
      transparent 74%
    );
  filter: blur(10px);
  transform: translateZ(-30px) rotateX(72deg);
  pointer-events: none;
}

.home-hero[data-hero-interactive] .hero-orbit {
  position: absolute;
  left: 5%;
  right: 3%;
  top: 12%;
  bottom: 10%;
  width: auto;
  aspect-ratio: auto;
  border: 1px solid #d7ad4675;
  border-radius: 50%;
  background:
    radial-gradient(
      ellipse,
      #f4dc9274,
      #f2dea120 44%,
      transparent 69%
    ),
    repeating-radial-gradient(
      circle at 50% 50%,
      transparent 0 39px,
      #0b5d450f 40px 41px
    );
  transform:
    translate3d(
      var(--depth-x, 0px),
      var(--depth-y, 0px),
      -44px
    )
    rotateX(57deg)
    rotateZ(-11deg);
  box-shadow:
    inset 0 1px 0 #ffffffb0,
    0 0 24px #d5aa3a12;
  z-index: 0;
}

.home-hero[data-hero-interactive] .hero-screen {
  position: absolute;
  width: auto;
  aspect-ratio: 9 / 16;
  border: 6px solid #093a2d;
  border-radius: 24px;
  background: #143b2f;
  overflow: hidden;
  box-shadow:
    0 26px 42px #0b392b2d,
    0 10px 18px #0b392b22,
    inset 0 1px 0 #ffffff80,
    inset 0 -1px 0 #00000020;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition:
    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.28s ease,
    filter 0.28s ease;
  will-change: transform;
}

.home-hero[data-hero-interactive] .hero-screen::before {
  content: "";
  position: absolute;
  z-index: 3;
  left: -22%;
  top: -18%;
  width: 72%;
  height: 48%;
  border-radius: 50%;
  background: radial-gradient(ellipse, #ffffff50, transparent 68%);
  transform: rotate(-22deg);
  filter: blur(2px);
  pointer-events: none;
}

.home-hero[data-hero-interactive] .hero-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  background:
    linear-gradient(
      118deg,
      #ffffff34 0%,
      #ffffff11 18%,
      transparent 34%,
      transparent 68%,
      #00000014 100%
    );
  pointer-events: none;
}

.home-hero[data-hero-interactive] .hero-screen img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transform: scale(1.008);
  transition:
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.35s ease;
}

.home-hero[data-hero-interactive] .screen-left {
  left: 8%;
  top: 18%;
  width: 142px;
  z-index: 2;
  filter: saturate(0.97) brightness(0.99);
  transform:
    translate3d(
      var(--depth-x, 0px),
      var(--depth-y, 0px),
      16px
    )
    rotateY(12deg)
    rotateX(2deg)
    rotateZ(-8deg);
  animation: hero-card-float-left 6.8s ease-in-out infinite;
}

.home-hero[data-hero-interactive] .screen-main {
  left: 31%;
  top: 5%;
  width: 196px;
  z-index: 5;
  transform:
    translate3d(
      var(--depth-x, 0px),
      var(--depth-y, 0px),
      88px
    )
    rotateX(1deg)
    rotateY(-2deg)
    rotateZ(2deg);
  box-shadow:
    0 36px 58px #0b392b36,
    0 12px 22px #0b392b28,
    0 0 0 1px #ffffff1a,
    inset 0 1px 0 #ffffff88;
  animation: hero-card-float-main 6.1s -0.7s ease-in-out infinite;
}

.home-hero[data-hero-interactive] .screen-main img {
  filter: saturate(1.03) contrast(1.01);
}

.home-hero[data-hero-interactive] .screen-right {
  right: 7%;
  top: 20%;
  width: 142px;
  z-index: 2;
  filter: saturate(0.98) brightness(1);
  transform:
    translate3d(
      var(--depth-x, 0px),
      var(--depth-y, 0px),
      20px
    )
    rotateY(-12deg)
    rotateX(2deg)
    rotateZ(8deg);
  animation: hero-card-float-right 7.2s -1.3s ease-in-out infinite;
}

.home-hero[data-hero-interactive] .hero-ambient {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.home-hero[data-hero-interactive] .ambient-one {
  width: 30px;
  height: 30px;
  top: 9%;
  right: 5%;
  background:
    radial-gradient(
      circle at 29% 26%,
      #fffdf0 0,
      #f8e3a9 18%,
      #dba72c 68%,
      #9d6808 100%
    );
  box-shadow:
    inset -6px -7px 12px #9b680d22,
    inset 4px 4px 9px #ffffff8a,
    0 10px 18px #9e690e20;
  opacity: 0.68;
  transform: translateZ(24px);
  animation: hero-ambient-float 6s ease-in-out infinite;
}

.home-hero[data-hero-interactive] .ambient-two {
  width: 18px;
  height: 18px;
  left: 17%;
  bottom: 18%;
  background:
    radial-gradient(circle at 30% 26%, #dff0e3, #79ad89 62%, #4b7e5c);
  box-shadow:
    inset 3px 3px 7px #ffffff7d,
    0 10px 18px #0b5d4520;
  opacity: 0.72;
  transform: translateZ(12px);
  animation: hero-ambient-float 7s -2s ease-in-out infinite reverse;
}

/* --- Floating labels --------------------------------------------------- */

.home-hero[data-hero-interactive] .hero-chip {
  position: absolute;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px;
  border: 1px solid #ffffffea;
  border-radius: 999px;
  background: linear-gradient(145deg, #fffffff9, #fff8eae7);
  color: var(--forest);
  box-shadow:
    0 14px 24px #14382b17,
    0 4px 8px #b187230d,
    inset 0 1px 0 #ffffff;
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.015em;
  white-space: nowrap;
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  transition:
    transform
    0.34s
    cubic-bezier(0.22, 1, 0.36, 1);
}

.home-hero[data-hero-interactive] .hero-chip .icon {
  width: 14px;
  height: 14px;
  color: var(--gold-dark);
}

.home-hero[data-hero-interactive] .hero-chip-top {
  top: 10%;
  left: 12%;
  transform:
    translate3d(
      var(--depth-x, 0px),
      var(--depth-y, 0px),
      110px
    )
    rotateZ(-3deg);
}

.home-hero[data-hero-interactive] .hero-chip-bottom {
  right: 7%;
  bottom: 17%;
  transform:
    translate3d(
      var(--depth-x, 0px),
      var(--depth-y, 0px),
      68px
    )
    rotateZ(2deg);
}

.home-hero[data-hero-interactive] .hero-note {
  position: absolute;
  left: 56%;
  bottom: 8px;
  z-index: 7;
  max-width: 260px;
  white-space: nowrap;
  padding: 8px 14px;
  border: 1px solid #ffffff;
  border-radius: 999px;
  background: #fffdf9e8;
  color: var(--forest);
  font-size: 0.7rem;
  font-weight: 650;
  box-shadow:
    0 12px 22px #14382b14,
    inset 0 1px 0 #ffffff;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transform:
    translate3d(
      calc(-50% + var(--depth-x, 0px)),
      var(--depth-y, 0px),
      106px
    );
  transition:
    transform
    0.34s
    cubic-bezier(0.22, 1, 0.36, 1);
}

.home-hero[data-hero-interactive] .hero-note .icon {
  width: 15px;
  margin-left: 7px;
  color: var(--gold-dark);
}

.home-hero[data-hero-interactive] .hero-particles {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  overflow: visible;
  transform:
    translate3d(
      var(--depth-x, 0px),
      var(--depth-y, 0px),
      98px
    );
  transition:
    transform
    0.4s
    cubic-bezier(0.22, 1, 0.36, 1);
}

.home-hero[data-hero-interactive] .hero-particles i {
  position: absolute;
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #d2a03a;
  box-shadow: 0 0 10px #d2a03a4d;
  opacity: 0.5;
  animation: hero-field-particle 6.5s ease-in-out infinite alternate;
}

.home-hero[data-hero-interactive] .hero-particles i:nth-child(1) { left: 12%; top: 26%; }
.home-hero[data-hero-interactive] .hero-particles i:nth-child(2) { left: 22%; top: 74%; background: #70ad85; }
.home-hero[data-hero-interactive] .hero-particles i:nth-child(3) { left: 40%; top: 19%; }
.home-hero[data-hero-interactive] .hero-particles i:nth-child(4) { left: 61%; top: 79%; background: #fff2c7; }
.home-hero[data-hero-interactive] .hero-particles i:nth-child(5) { left: 78%; top: 23%; background: #7dae91; }
.home-hero[data-hero-interactive] .hero-particles i:nth-child(6) { left: 87%; top: 62%; }

@media (hover: hover) and (pointer: fine) {
  .home-hero[data-hero-interactive] .hero-art:hover .screen-main {
    box-shadow:
      0 39px 62px #0b392b3c,
      0 12px 24px #0b392b2a,
      0 0 0 1px #ffffff20,
      inset 0 1px 0 #ffffff90;
  }
}

/* --- Motion ------------------------------------------------------------ */

@keyframes hero-title-arrive {
  from {
    opacity: 0;
    transform: translate3d(0, 18px, 36px) rotateX(-7deg);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 36px) rotateX(0);
  }
}

@keyframes hero-copy-arrive {
  from {
    opacity: 0;
    translate: 0 12px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

@keyframes hero-title-underline {
  from {
    opacity: 0;
    scale: 0 1;
  }
  to {
    opacity: 0.7;
    scale: 1 1;
  }
}

@keyframes hero-headline-shine {
  0%,
  28%,
  100% {
    background-position: 100% center;
  }
  58% {
    background-position: 0 center;
  }
}

@keyframes hero-grid-drift {
  from {
    background-position: 0 0, 0 0;
  }
  to {
    background-position: 0 42px, 42px 0;
  }
}

@keyframes hero-scan {
  0%,
  8% {
    transform: translateY(-130%);
    opacity: 0;
  }
  20% {
    opacity: 0.18;
  }
  72% {
    opacity: 0.08;
  }
  100% {
    transform: translateY(820%);
    opacity: 0;
  }
}

@keyframes hero-field-particle {
  from {
    translate: -2px 5px;
    opacity: 0.25;
  }
  to {
    translate: 7px -11px;
    opacity: 0.7;
  }
}

@keyframes hero-click-burst {
  0% {
    opacity: 0.9;
    transform: translate(-50%, -50%) scale(0.18);
    box-shadow: 0 0 0 0 #d4aa4140;
  }
  62% {
    opacity: 0.52;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(4.4);
    box-shadow: 0 0 0 16px transparent;
  }
}

@keyframes hero-status-pulse {
  0% {
    box-shadow: 0 0 0 0 #c7962f66;
  }
  70% {
    box-shadow: 0 0 0 8px transparent;
  }
  100% {
    box-shadow: 0 0 0 0 transparent;
  }
}

@keyframes hero-card-float-left {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: -2px -4px;
  }
}

@keyframes hero-card-float-right {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 2px -5px;
  }
}

@keyframes hero-card-float-main {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -6px;
  }
}

@keyframes hero-ambient-float {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -6px;
  }
}

/* --- Responsive -------------------------------------------------------- */

@media (min-width: 1600px) {
  .home-hero[data-hero-interactive] {
    min-height: 540px;
  }

  .home-hero[data-hero-interactive] .hero-art {
    transform:
      translate3d(-8px, var(--hero-scroll), 0)
      scale(1.02);
  }
}

@media (max-width: 1150px) {
  .home-hero[data-hero-interactive] {
    grid-template-columns: minmax(0, 1fr) minmax(315px, 0.96fr);
    gap: 26px;
    padding-inline: 28px;
  }

  .home-hero[data-hero-interactive] .hero-copy h1 {
    font-size: clamp(2.4rem, 4vw, 3.55rem);
  }

  .home-hero[data-hero-interactive] .hero-art {
    transform:
      translate3d(-6px, var(--hero-scroll), 0)
      scale(0.88);
    margin-inline: -18px;
  }

  .home-hero[data-hero-interactive] .screen-left {
    left: 7%;
  }

  .home-hero[data-hero-interactive] .screen-main {
    left: 30%;
  }

  .home-hero[data-hero-interactive] .screen-right {
    right: 5%;
  }
}

@media (max-width: 850px) {
  .home-hero[data-hero-interactive] {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.9fr);
    min-height: 490px;
    gap: 8px;
    padding: 38px 22px 27px;
    border-radius: 26px;
  }

  .home-hero[data-hero-interactive] .hero-copy h1 {
    font-size: clamp(2.15rem, 5vw, 2.8rem);
  }

  .home-hero[data-hero-interactive] .hero-copy .lead {
    font-size: 0.94rem;
    line-height: 1.65;
  }

  .home-hero[data-hero-interactive] .hero-copy .actions {
    gap: 10px;
  }

  .home-hero[data-hero-interactive] .hero-copy .button {
    padding-inline: 14px;
    font-size: 0.8rem;
  }

  .home-hero[data-hero-interactive] .hero-art {
    height: 398px;
    transform:
      translate3d(-6px, var(--hero-scroll), 0)
      scale(0.76);
    margin-inline: -44px;
  }

  .home-hero[data-hero-interactive] .screen-left {
    left: 7%;
    top: 19%;
  }

  .home-hero[data-hero-interactive] .screen-main {
    left: 30%;
    width: 192px;
  }

  .home-hero[data-hero-interactive] .screen-right {
    right: 5%;
    top: 21%;
  }

  .hero-hud {
    opacity: 0.27;
  }

  .home-hero[data-hero-interactive] .hero-note {
    bottom: 7px;
    font-size: 0.66rem;
  }
}

@media (max-width: 600px) {
  .home-hero[data-hero-interactive] {
    grid-template-columns: 1fr;
    min-height: 0;
    margin: 18px 0 24px;
    padding: 30px 18px 22px;
    gap: 8px;
    border-radius: 24px;
    overflow: hidden;
  }

  .home-hero[data-hero-interactive] .hero-copy {
    max-width: none;
    padding: 0;
    transform: none !important;
  }

  .home-hero[data-hero-interactive] .hero-copy h1 {
    margin: 18px 0 14px;
    font-size: clamp(2.2rem, 9.5vw, 3rem);
    line-height: 1.03;
  }

  .home-hero[data-hero-interactive] .hero-copy .lead {
    max-width: none;
    font-size: 0.96rem;
    line-height: 1.66;
  }

  .home-hero[data-hero-interactive] .hero-copy .actions {
    gap: 10px;
  }

  .home-hero[data-hero-interactive] .button {
    min-height: 48px;
    padding: 11px 16px;
  }

  .home-hero[data-hero-interactive] .hero-footnote {
    max-width: 100%;
    margin-top: 18px;
  }

  .home-hero[data-hero-interactive] .hero-footnote .status {
    white-space: normal;
  }

  .home-hero[data-hero-interactive] .hero-art {
    height: 332px;
    margin: 12px 0 0;
    overflow: hidden;
    transform: none;
    perspective: 940px;
  }

  .home-hero[data-hero-interactive] .hero-art::before {
    inset: 10% 0 6%;
  }

  .home-hero[data-hero-interactive] .hero-stage {
    transform: none !important;
  }

  .home-hero[data-hero-interactive] .hero-chip,
  .home-hero[data-hero-interactive] .hero-note {
    display: none;
  }

  .home-hero[data-hero-interactive] .hero-orbit {
    left: 3%;
    right: 3%;
    top: 14%;
    bottom: 14%;
    transform:
      translate3d(0, 0, -28px)
      rotateX(56deg)
      rotateZ(-10deg);
  }

  .home-hero[data-hero-interactive] .screen-left {
    left: 9%;
    top: 23%;
    width: 116px;
    transform:
      translate3d(0, 0, 16px)
      rotateZ(-7deg)
      rotateY(4deg);
  }

  .home-hero[data-hero-interactive] .screen-main {
    left: 50%;
    top: 8%;
    width: 164px;
    transform:
      translate3d(-50%, 0, 56px)
      rotateZ(2deg);
  }

  .home-hero[data-hero-interactive] .screen-right {
    right: 9%;
    top: 24%;
    width: 116px;
    transform:
      translate3d(0, 0, 18px)
      rotateZ(7deg)
      rotateY(-4deg);
  }

  .home-hero[data-hero-interactive] .hero-particles {
    opacity: 0.44;
    transform: translate3d(0, 0, 48px);
  }

  .hero-grid {
    bottom: -30%;
    opacity: 0.24;
  }

  .hero-scanline,
  .hero-hud-b,
  .hero-field-particles i:nth-child(n + 8) {
    display: none;
  }

  .hero-hud-a {
    opacity: 0.2;
  }

  .home-hero[data-hero-interactive] .ambient-one {
    width: 23px;
    height: 23px;
    right: 6%;
    top: 8%;
  }
}

/* --- Accessibility ----------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .home-hero[data-hero-interactive],
  .home-hero[data-hero-interactive] *,
  .home-hero[data-hero-interactive] *::before,
  .home-hero[data-hero-interactive] *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .home-hero[data-hero-interactive] .hero-copy,
  .home-hero[data-hero-interactive] .hero-art,
  .home-hero[data-hero-interactive] .hero-stage {
    transform: none !important;
  }

  .home-hero[data-hero-interactive] .screen-left {
    transform:
      translate3d(0, 0, 14px)
      rotateZ(-7deg)
      rotateY(5deg) !important;
  }

  .home-hero[data-hero-interactive] .screen-right {
    transform:
      translate3d(0, 0, 16px)
      rotateZ(7deg)
      rotateY(-5deg) !important;
  }

  .home-hero[data-hero-interactive] .screen-main {
    transform:
      translate3d(0, 0, 54px)
      rotateZ(2deg) !important;
  }

  .hero-click-burst {
    display: none !important;
  }
}

/* =========================================================
   BRAAQ GAMING FOOTER V4 — FINAL MICRO-POLISH PASS
   CSS-only. No JS, no canvas/WebGL, no external assets.
   Desktop-only particle motion; touch/mobile stays static.
   ========================================================= */

.site-footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 46px 0 0;
  border-top: 1px solid #d5aa4136;
  background:
    repeating-linear-gradient(
      180deg,
      #ffffff03 0,
      #ffffff03 1px,
      transparent 1px,
      transparent 7px
    ),
    radial-gradient(42rem 24rem at -8% 4%, #2372552d 0%, transparent 67%),
    radial-gradient(30rem 20rem at 106% 6%, #d09a240c 0%, transparent 72%),
    linear-gradient(135deg, #0e392d 0%, #0a3026 50%, #07271f 100%);
  color: #edf5ef;
  box-shadow:
    inset 0 1px 0 #ffffff0d,
    0 -10px 24px #12372d07;
}

/* Static orbit geometry: intentionally faint and non-animated. */
.site-footer::before,
.site-footer::after {
  content: "";
  position: absolute;
  z-index: 0;
  border: 1px solid #ddb34b11;
  border-radius: 50%;
  pointer-events: none;
}

.site-footer::before {
  width: 292px;
  height: 292px;
  left: -188px;
  bottom: -204px;
  box-shadow:
    0 0 0 42px #d9ae450e,
    0 0 0 84px #d9ae4505;
}

.site-footer::after {
  width: 206px;
  height: 206px;
  right: -126px;
  top: -120px;
  border-color: #ddb34b0e;
  box-shadow:
    0 0 0 38px #d9ae450b,
    0 0 0 76px #d9ae4504;
}

.footer-grid,
.footer-bottom {
  position: relative;
  z-index: 1;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.45fr 0.92fr 1.08fr 1.22fr;
  gap: clamp(30px, 3.8vw, 54px);
  align-items: start;
  counter-reset: braaq-footer-group;
}

/* One pseudo-element renders a sparse particle field. */
.footer-grid::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -24px -10px -14px;
  pointer-events: none;
  opacity: 0.2;
  background:
    radial-gradient(circle at 8% 18%, #e5b54a 0 1.2px, transparent 1.9px),
    radial-gradient(circle at 24% 72%, #6fa98c 0 1.2px, transparent 1.9px),
    radial-gradient(circle at 43% 28%, #e5b54a 0 1px, transparent 1.6px),
    radial-gradient(circle at 64% 75%, #ffffff 0 1px, transparent 1.6px),
    radial-gradient(circle at 82% 31%, #6fa98c 0 1.2px, transparent 1.9px),
    radial-gradient(circle at 94% 68%, #e5b54a 0 1.2px, transparent 1.9px);
  transform: translate3d(0, 0, 0);
}

/* Small HUD bracket — static and cheap. */
.footer-grid::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: -16px;
  right: 0;
  width: 52px;
  height: 24px;
  border-top: 1px solid #d7aa3d2f;
  border-right: 1px solid #d7aa3d2f;
  border-radius: 0 8px 0 0;
  pointer-events: none;
}

@keyframes braaq-footer-particles {
  from {
    opacity: 0.16;
    transform: translate3d(-2px, 4px, 0);
  }

  to {
    opacity: 0.28;
    transform: translate3d(3px, -4px, 0);
  }
}

.footer-grid > div {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.footer-grid > div:not(.footer-brand) {
  padding-left: 18px;
}

/* Faded separators read as HUD rails rather than hard dividers. */
.footer-grid > div:not(.footer-brand)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 1px;
  height: min(176px, 86%);
  background: linear-gradient(
    180deg,
    #ffffff12,
    #ffffff06 72%,
    transparent
  );
  pointer-events: none;
}

.footer-brand {
  max-width: 320px;
}

.site-footer .brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #ffffff;
  transition:
    transform 0.18s ease,
    opacity 0.18s ease;
}

.site-footer .brand:hover {
  color: #ffffff;
  transform: translateY(-1px);
}

.site-footer .brand img {
  width: 40px;
  height: 50px;
  padding: 4px;
  border: 1px solid #ffffff98;
  border-radius: 10px;
  background: #fffdf8;
  box-shadow:
    0 7px 14px #02150f1d,
    inset 0 1px 0 #ffffff;
  mix-blend-mode: normal;
}

.site-footer .brand strong {
  color: #ffffff;
  letter-spacing: 0.14em;
  text-shadow: 0 4px 10px #020e0a24;
}

.site-footer .brand small {
  color: #e5b247;
}

.footer-brand p {
  max-width: 29ch;
  margin: 20px 0 13px;
  color: #c9d9d1;
  font-size: 0.9rem;
  line-height: 1.72;
}

.site-footer .fine {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  padding: 6px 10px;
  border: 1px solid #ffffff0e;
  border-radius: 999px;
  background: #ffffff06;
  color: #afc0b7;
  font-size: 0.7rem;
  line-height: 1.35;
  letter-spacing: 0.025em;
}

.site-footer .fine::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
  background: #d3a139;
  box-shadow: 0 0 0 3px #d3a1390c;
}

/* Numbered groups provide gaming/HUD identity without changing markup. */
.footer-grid > div:not(.footer-brand) > h2:first-child {
  counter-increment: braaq-footer-group;
}

.footer-grid > div:not(.footer-brand) > h2:first-child::before {
  content: "0" counter(braaq-footer-group) " / ";
  color: #d6a43b;
  font-size: 0.56rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.site-footer h2 {
  position: relative;
  width: fit-content;
  margin: 1px 0 15px;
  padding-bottom: 9px;
  color: #f7faf8;
  font-size: 0.76rem;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: 0.085em;
  text-transform: uppercase;
}

.site-footer h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 24px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, #d8a532, #d8a5322c);
}

.site-footer .contact-heading {
  margin-top: 22px;
  margin-bottom: 10px;
}

/* Contact stays natural; no extra technical "LINK /" prefix. */
.site-footer .contact-heading::before {
  content: none;
}

.site-footer a:not(.brand) {
  position: relative;
  display: flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  min-height: 35px;
  margin: 1px 0;
  padding: 5px 4px 5px 14px;
  color: #cad9d1;
  font-size: 0.83rem;
  line-height: 1.45;
  transition:
    color 0.18s ease,
    transform 0.18s ease;
}

.site-footer a:not(.brand)::before {
  content: "";
  position: absolute;
  left: 0;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #d2a03a;
  opacity: 0.28;
  transform: scale(0.82);
  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
}

.site-footer a:not(.brand)::after {
  content: "›";
  margin-left: 7px;
  color: #d8a532;
  font-size: 0.82rem;
  opacity: 0;
  transform: translateX(-4px);
  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
}

.site-footer a:not(.brand):hover {
  color: #f0c45c;
  transform: translateX(3px);
}

.site-footer a:not(.brand):hover::before {
  opacity: 0.88;
  transform: scale(1);
}

.site-footer a:not(.brand):hover::after {
  opacity: 0.72;
  transform: translateX(0);
}

.site-footer a:not(.brand):focus-visible {
  color: #f0c45c;
  outline-color: #e1b247;
}

.site-footer .email {
  min-height: 40px;
  margin-top: 2px;
  padding: 8px 12px 8px 26px;
  border: 1px solid #ffffff12;
  border-radius: 10px;
  background:
    linear-gradient(90deg, #d8a5320e 0 2px, transparent 2px),
    #ffffff06;
  color: #e7efe9;
  overflow-wrap: anywhere;
  transition:
    border-color 0.18s ease,
    background-color 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease;
}

.site-footer .email::before {
  left: 13px;
  opacity: 0.7;
}

.site-footer .email::after {
  display: none;
}

.site-footer .email:hover {
  border-color: #d7aa3d2f;
  background-color: #ffffff0a;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 36px;
  padding-block: 18px 20px;
  border-top: 1px solid #ffffff10;
  color: #aec0b7;
  font-size: 0.71rem;
  line-height: 1.5;
}

.footer-bottom::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 80px;
  height: 1px;
  background: linear-gradient(90deg, #d6a43bba, transparent);
}

.footer-bottom::after {
  content: "BRAAQ // GAME STUDIO";
  position: absolute;
  top: -8px;
  left: 98px;
  padding: 0 7px;
  background: #0a3026;
  color: #9bb0a5;
  font-size: 0.53rem;
  font-weight: 750;
  letter-spacing: 0.12em;
  line-height: 1;
}

.footer-bottom span:last-child {
  position: relative;
  padding-left: 13px;
  color: #c0d1c8;
}

.footer-bottom span:last-child::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #d6a43b99;
  transform: translateY(-50%);
}

/* =========================================================
   CTA → FOOTER MICRO-POLISH
   ========================================================= */

.cta-band {
  margin-bottom: 20px;
  border-color: #ffffff20;
  background:
    linear-gradient(#ffffff04 1px, transparent 1px),
    linear-gradient(90deg, #ffffff04 1px, transparent 1px),
    radial-gradient(55% 180% at 2% 10%, #2e8c6d70, transparent 62%),
    linear-gradient(120deg, #0c4938, #082f25);
  background-size:
    42px 42px,
    42px 42px,
    auto,
    auto;
}

.cta-band .button.outline.light {
  color: #fbfdfb;
  border-color: #e2eee69c;
  background: #ffffff12;
  box-shadow:
    0 3px 0 #061d171a,
    inset 0 1px 0 #ffffff1e;
}

.cta-band .button.outline.light:hover {
  color: #ffffff;
  border-color: #ffffffb0;
  background: #ffffff1a;
  box-shadow:
    0 4px 0 #061d1715,
    0 9px 17px #03130f16,
    inset 0 1px 0 #ffffff24;
}

.cta-band .button.gold {
  background: linear-gradient(180deg, #e3aa25, #cf9416);
  border-color: #d39a16;
  color: #173126;
  box-shadow:
    0 4px 0 #a56f0c,
    0 10px 18px #0417111b,
    inset 0 1px 0 #fff2b450;
}

.cta-band .button.gold:hover {
  background: linear-gradient(180deg, #edb638, #dca21f);
}

/* =========================================================
   MOTION POLICY
   ========================================================= */

/* Only desktop/fine-pointer devices animate the sparse particle field. */
@media (hover: hover) and (pointer: fine) {
  .footer-grid::before {
    animation: braaq-footer-particles 14s ease-in-out infinite alternate;
  }
}

/* =========================================================
   RESPONSIVE FOOTER
   ========================================================= */

@media (max-width: 850px) {
  .site-footer {
    padding-top: 40px;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px 26px;
  }

  .footer-grid::before {
    opacity: 0.14;
    animation: none !important;
  }

  .footer-grid::after {
    right: 4px;
  }

  .footer-brand {
    grid-column: 1 / -1;
    max-width: 520px;
  }

  .footer-grid > div:not(.footer-brand) {
    padding-left: 14px;
  }

  .footer-grid > div:last-child {
    grid-column: auto;
  }

  .footer-bottom {
    margin-top: 29px;
  }

  .cta-band {
    margin-bottom: 18px;
  }
}

@media (max-width: 600px) {
  .site-footer {
    padding-top: 34px;
  }

  .site-footer::before {
    width: 220px;
    height: 220px;
    left: -155px;
    bottom: -150px;
    box-shadow:
      0 0 0 32px #d9ae450b,
      0 0 0 64px #d9ae4504;
  }

  .site-footer::after {
    width: 150px;
    height: 150px;
    right: -102px;
    top: -94px;
    box-shadow:
      0 0 0 27px #d9ae450b,
      0 0 0 54px #d9ae4504;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 25px;
  }

  .footer-grid::before {
    inset: -16px 0;
    opacity: 0.1;
    animation: none !important;
  }

  .footer-grid::after {
    display: none;
  }

  .footer-brand,
  .footer-grid > div:last-child {
    grid-column: auto;
  }

  .footer-grid > div:not(.footer-brand) {
    padding-left: 0;
  }

  .footer-grid > div:not(.footer-brand)::before {
    display: none;
  }

  .site-footer h2 {
    margin-bottom: 10px;
  }

  .site-footer a:not(.brand) {
    min-height: 40px;
    margin: 0;
    padding-block: 7px;
  }

  .site-footer a:not(.brand)::after {
    display: none;
  }

  .site-footer .email {
    min-height: 42px;
    padding: 9px 12px 9px 26px;
  }

  .footer-bottom {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
    margin-top: 24px;
    padding-block: 18px 19px;
  }

  .footer-bottom::after {
    display: none;
  }

  .footer-bottom span:last-child {
    padding-left: 12px;
  }

  .cta-band {
    margin-bottom: 16px;
    background-size:
      54px 54px,
      54px 54px,
      auto,
      auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .footer-grid::before {
    animation: none !important;
    transform: none !important;
    opacity: 0.15;
  }

  .site-footer .brand,
  .site-footer a:not(.brand),
  .site-footer a:not(.brand)::before,
  .site-footer a:not(.brand)::after,
  .site-footer .email,
  .cta-band .button {
    transition: none !important;
  }
}

/* =========================================================
   BRAAQ GAMES CATALOG V2.3 — FINAL 3D MICRO-POLISH
   FINAL LOCK CANDIDATE
   Scoped to /games/ catalog only.
   CSS-only. Uses the existing data-tilt JS system.
   No new JS, no WebGL/canvas, no external assets,
   no continuous card animation.
   ========================================================= */

section[aria-label="Game catalog"] {
  position: relative;
  isolation: isolate;
  padding: 4px 0 8px;
}

section[aria-label="Game catalog"]::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 68px;
  width: min(1040px, 94vw);
  height: 500px;
  transform: translateX(-50%);
  pointer-events: none;
  background:
    radial-gradient(circle at 16% 24%, #d5a43b0d 0 4%, transparent 26%),
    radial-gradient(circle at 84% 76%, #17624b0c 0 4%, transparent 30%);
}

/* ---------- catalog toolbar ---------- */

.catalog-toolbar {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  margin: 8px 0 12px;
  padding: 13px 14px;
  border: 1px solid #e2e7df;
  border-radius: 18px;
  background:
    linear-gradient(#12372d04 1px, transparent 1px),
    linear-gradient(90deg, #12372d04 1px, transparent 1px),
    linear-gradient(145deg, #fffffff8, #fbf8f0f1);
  background-size:
    28px 28px,
    28px 28px,
    auto;
  box-shadow:
    0 11px 25px #12372d08,
    inset 0 1px 0 #ffffff;
}

.catalog-toolbar::before,
.catalog-toolbar::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.catalog-toolbar::before {
  top: -1px;
  left: 18px;
  width: 72px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, #d49d22, #d49d2224);
}

.catalog-toolbar::after {
  right: 12px;
  bottom: 9px;
  width: 21px;
  height: 10px;
  border-right: 1px solid #d5a43b35;
  border-bottom: 1px solid #d5a43b35;
  border-radius: 0 0 5px 0;
}

.filter-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.filter {
  position: relative;
  min-height: 42px;
  padding: 9px 17px;
  border: 1px solid #d4ddd6;
  border-radius: 999px;
  background: #fffefb;
  color: #315b4c;
  font-size: 0.8rem;
  font-weight: 720;
  letter-spacing: 0.01em;
  box-shadow:
    0 3px 7px #12372d06,
    inset 0 1px 0 #ffffff;
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease;
}

.filter:hover {
  transform: translateY(-1px);
  border-color: #a8bcb1;
  background: #f6faf6;
}

.filter[aria-pressed="true"] {
  border-color: #0b5d45;
  background: linear-gradient(180deg, #166e54, #0b5d45);
  color: #ffffff;
  box-shadow:
    0 3px 0 #073f2f,
    0 7px 13px #0b5d4512,
    inset 0 1px 0 #ffffff22;
}

.filter[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 5px;
  width: 18px;
  height: 1px;
  border-radius: 999px;
  background: #e6b64b;
  transform: translateX(-50%);
  opacity: 0.8;
}

.search-box {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: min(300px, 100%);
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid #d6dfd8;
  border-radius: 13px;
  background: linear-gradient(145deg, #ffffff, #fbfdf9);
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 4px 11px #12372d06;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
}

.search-box:focus-within {
  border-color: #67907f;
  background: #ffffff;
  box-shadow:
    0 0 0 3px #0b5d450d,
    0 5px 13px #12372d08,
    inset 0 1px 0 #ffffff;
}

.search-box .icon {
  width: 18px;
  height: 18px;
  color: #6b887b;
}

.search-box input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  padding: 11px 0;
  color: var(--ink);
  font-size: 0.88rem;
}

.search-box input::placeholder {
  color: #819087;
}

/* ---------- result count ---------- */

#game-count {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin: 0 0 16px 2px;
  padding: 6px 10px;
  border: 1px solid #e3e6db;
  border-radius: 999px;
  background: #fffdf8;
  color: #65766e;
  box-shadow: 0 4px 10px #12372d05;
}

#game-count::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
  background: #c9972d;
  box-shadow: 0 0 0 3px #c9972d0e;
}

/* ---------- catalog grid ---------- */

.catalog-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 22px;
  margin-top: 0;
  align-items: stretch;
  justify-items: center;
  perspective: 1500px;
  perspective-origin: 50% 36%;
}

/* Filtered/search single-result state stays compact and centered. */
.catalog-grid .game-card:only-child {
  max-width: 390px;
}

/* ---------- final 3D shell ---------- */

.catalog-grid .game-card {
  --catalog-lift: 0px;
  --catalog-rest-rx: -0.45deg;
  --catalog-rest-ry: 0.55deg;

  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 410px;
  min-width: 0;
  overflow: hidden;
  border: 1px solid #e3e8df;
  border-radius: 22px;
  background: linear-gradient(150deg, #ffffff 0%, #fffdf8 58%, #f8fbf6 100%);
  box-shadow:
    0 15px 32px #12372d0f,
    0 4px 9px #7a551108,
    inset 0 1px 0 #ffffff;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transform:
    perspective(1150px)
    rotateX(calc(var(--tilt-x, 0deg) + var(--catalog-rest-rx)))
    rotateY(calc(var(--tilt-y, 0deg) + var(--catalog-rest-ry)))
    translate3d(0, var(--catalog-lift), 0);
  transition:
    transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}

.catalog-grid .game-card:nth-child(2) {
  --catalog-rest-rx: -0.5deg;
  --catalog-rest-ry: -0.12deg;
}

.catalog-grid .game-card:nth-child(3) {
  --catalog-rest-rx: -0.42deg;
  --catalog-rest-ry: -0.52deg;
}

.catalog-grid .game-card::before,
.catalog-grid .game-card::after {
  content: "";
  position: absolute;
  z-index: 7;
  pointer-events: none;
}

.catalog-grid .game-card::before {
  top: 13px;
  right: 13px;
  width: 23px;
  height: 23px;
  border-top: 1px solid #d2a13b55;
  border-right: 1px solid #d2a13b55;
  border-radius: 0 6px 0 0;
  transform: translateZ(42px);
}

.catalog-grid .game-card::after {
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(
    180deg,
    transparent 8%,
    #d4a23a50 30%,
    #0b5d4526 70%,
    transparent 94%
  );
  opacity: 0.7;
  transform: translateZ(2px);
}

.catalog-grid .game-card:hover,
.catalog-grid .game-card:focus-within {
  --catalog-lift: -4px;
  border-color: #cfdad3;
  box-shadow:
    0 23px 42px #12372d16,
    0 6px 14px #7a55110a,
    inset 0 1px 0 #ffffff;
}

/* ---------- artwork stage ---------- */

.catalog-grid .game-art {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 292px;
  min-height: 0;
  overflow: hidden;
  border-bottom: 1px solid #e5e9df;
  background:
    radial-gradient(circle at 50% 25%, #fff6d7 0 9%, transparent 42%),
    linear-gradient(145deg, #e8f1dd, #f5efdc);
  transform: translateZ(17px);
  transform-style: preserve-3d;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.catalog-grid .game-card:hover .game-art,
.catalog-grid .game-card:focus-within .game-art {
  transform: translateZ(21px);
}

.catalog-grid .game-art::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(#12372d06 1px, transparent 1px),
    linear-gradient(90deg, #12372d06 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: linear-gradient(to bottom, #000 0%, transparent 80%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 80%);
  opacity: 0.23;
  transform: translateZ(2px);
}

/* Softer, wider contact shadow: visible but not heavy. */
.catalog-grid .game-art::after {
  content: "";
  position: absolute;
  z-index: 2;
  left: 17%;
  right: 17%;
  bottom: 8px;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(
    ellipse,
    #12372d23 0%,
    #12372d12 42%,
    transparent 74%
  );
  transform: translateZ(4px);
  pointer-events: none;
}

/* ---------- portrait screenshot / refined device treatment ---------- */

.catalog-grid .game-art:not(.logo-art) img {
  position: relative;
  z-index: 4;
  width: auto;
  height: 88%;
  max-width: 82%;
  object-fit: contain;
  padding: 0;
  border: 4px solid #123e31;
  border-radius: 17px;
  background: #123e31;
  box-shadow:
    0 16px 24px #12372d20,
    0 6px 10px #12372d16,
    inset 0 1px 0 #ffffff24,
    0 0 0 1px #ffffff2d;
  transform: translateZ(31px) scale(0.965);
  transition:
    transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.34s ease,
    box-shadow 0.34s ease;
}

.catalog-grid .game-card:hover .game-art:not(.logo-art) img,
.catalog-grid .game-card:focus-within .game-art:not(.logo-art) img {
  transform: translateZ(37px) scale(0.982);
  filter: saturate(1.03) contrast(1.01);
  box-shadow:
    0 20px 29px #12372d24,
    0 7px 12px #12372d18,
    inset 0 1px 0 #ffffff2a,
    0 0 0 1px #ffffff32;
}

/* ---------- logo-only art / Fruity Crates ---------- */

.catalog-grid .game-art.logo-art {
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 44%, #fff9df 0 17%, transparent 46%),
    radial-gradient(circle at 18% 18%, #d9ae3d14 0 3%, transparent 18%),
    radial-gradient(circle at 83% 74%, #2b765813 0 3%, transparent 21%),
    linear-gradient(145deg, #eef4df, #f8efdc);
}

.catalog-grid .game-art.logo-art::before {
  background:
    radial-gradient(circle at 18% 24%, #d5a43b32 0 2px, transparent 3px),
    radial-gradient(circle at 80% 30%, #0b5d4528 0 2px, transparent 3px),
    radial-gradient(circle at 73% 77%, #d5a43b28 0 2px, transparent 3px),
    linear-gradient(#12372d05 1px, transparent 1px),
    linear-gradient(90deg, #12372d05 1px, transparent 1px);
  background-size:
    auto,
    auto,
    auto,
    40px 40px,
    40px 40px;
  opacity: 0.36;
}

.catalog-grid .game-art.logo-art::after {
  left: 20%;
  right: 20%;
  bottom: 15px;
  height: 28px;
  background: radial-gradient(
    ellipse,
    #805d1519 0%,
    #12372d0f 50%,
    transparent 76%
  );
}

.catalog-grid .game-art.logo-art img {
  position: relative;
  z-index: 4;
  width: 79%;
  height: 79%;
  padding: 16px;
  object-fit: contain;
  filter:
    drop-shadow(0 15px 16px #805c1718)
    drop-shadow(0 6px 8px #12372d0f)
    saturate(1.02);
  transform: translateZ(32px) translateY(2px) scale(0.925) rotateX(-0.55deg);
  transition:
    transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.34s ease;
}

.catalog-grid .game-card:hover .game-art.logo-art img,
.catalog-grid .game-card:focus-within .game-art.logo-art img {
  transform: translateZ(38px) translateY(0) scale(0.95) rotateX(-0.25deg);
  filter:
    drop-shadow(0 18px 18px #805c171b)
    drop-shadow(0 7px 9px #12372d11)
    saturate(1.035);
}

/* ---------- artwork label ---------- */

.catalog-grid .art-label {
  z-index: 6;
  left: 12px;
  right: auto;
  bottom: 11px;
  width: auto;
  max-width: calc(100% - 24px);
  padding: 5px 8px;
  border: 1px solid #ffffff32;
  border-radius: 999px;
  background: #10382de4;
  color: #ffffff;
  font-size: 0.55rem;
  font-weight: 760;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow:
    0 5px 10px #0b30251c,
    inset 0 1px 0 #ffffff12;
  backdrop-filter: none;
  transform: translateZ(40px);
}

/* ---------- information panel ---------- */

.catalog-grid .game-copy {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  padding: 21px 21px 20px;
  transform: translateZ(31px);
  transform-style: preserve-3d;
  transition:
    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.28s ease;
}

.catalog-grid .game-card:hover .game-copy,
.catalog-grid .game-card:focus-within .game-copy {
  transform: translateZ(35px);
}

.catalog-grid .game-copy::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(180deg, #ffffffea, #fffdf8f7);
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 -4px 10px #12372d05;
  pointer-events: none;
}

.catalog-grid .tag {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 8px;
  border: 1px solid #eeddaea8;
  border-radius: 999px;
  background: #fff2cf;
  color: #805a0a;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  box-shadow:
    inset 0 1px 0 #ffffffa3,
    0 2px 6px #8b641109;
  transform: translateZ(35px);
}

.catalog-grid .game-copy h3 {
  margin: 11px 0 8px;
  font-size: clamp(1.2rem, 1.55vw, 1.42rem);
  line-height: 1.17;
  letter-spacing: -0.034em;
  transform: translateZ(38px);
}

.catalog-grid .game-copy h3 a {
  color: #173c30;
}

.catalog-grid .game-copy h3 a:hover {
  color: #0b5d45;
}

.catalog-grid .game-copy p {
  margin-bottom: 14px;
  color: #64736c;
  font-size: 0.81rem;
  line-height: 1.62;
  transform: translateZ(34px);
}

.catalog-grid .game-copy .status {
  margin-top: auto;
  margin-bottom: 9px;
  padding: 5px 8px;
  border: 1px solid #dfe7df;
  border-radius: 999px;
  background: #f8fbf7;
  color: #5d7167;
  font-size: 0.68rem;
  font-weight: 700;
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 2px 6px #12372d05;
  transform: translateZ(36px);
}

.catalog-grid .game-copy .status i {
  width: 6px;
  height: 6px;
  background: #c79731;
  box-shadow: 0 0 0 3px #c797310b;
}

/* Strongest content depth, with restrained hover pop. */
.catalog-grid .game-copy .text-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 39px;
  margin-top: 0;
  padding: 7px 12px;
  border: 1px solid #cadbd1;
  border-radius: 10px;
  background: linear-gradient(180deg, #fbfefb, #f3f9f4);
  color: #0b5d45;
  font-size: 0.76rem;
  font-weight: 800;
  box-shadow:
    0 4px 8px #12372d07,
    inset 0 1px 0 #ffffff;
  transform: translateZ(42px);
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease;
}

.catalog-grid .game-copy .text-link:hover {
  border-color: #a9c3b6;
  background: #edf6ef;
  color: #084d39;
  transform: translateZ(45px) translateX(2px);
  box-shadow:
    0 6px 12px #12372d0a,
    inset 0 1px 0 #ffffff;
}

.catalog-grid .game-copy .text-link .icon {
  width: 15px;
  height: 15px;
}

/* ---------- empty state ---------- */

section[aria-label="Game catalog"] .empty-state {
  margin: 24px 0 8px;
  padding: 44px 24px;
  border: 1px solid #e1e6de;
  border-radius: 20px;
  background: linear-gradient(145deg, #ffffff, #fbf8f0);
  box-shadow:
    0 12px 26px #12372d09,
    inset 0 1px 0 #ffffff;
}

section[aria-label="Game catalog"] .empty-state h2 {
  font-size: 1.42rem;
}

section[aria-label="Game catalog"] .empty-state p {
  margin: 10px 0 18px;
}

/* ---------- motion / input policy ---------- */

@media (hover: hover) and (pointer: fine) {
  .catalog-grid .game-card {
    will-change: transform;
  }
}

@media (max-width: 1000px) {
  .catalog-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
  }

  .catalog-grid .game-card {
    max-width: 430px;
  }

  .catalog-grid .game-card:only-child {
    max-width: 390px;
  }

  .catalog-grid .game-art {
    height: 282px;
  }

  .catalog-grid .game-art:not(.logo-art) img {
    height: 86%;
  }
}

@media (max-width: 850px) {
  .catalog-toolbar {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
  }

  .search-box {
    width: 100%;
    min-width: 0;
  }

  .catalog-grid {
    gap: 18px;
  }

  .catalog-grid .game-art {
    height: 276px;
  }

  .catalog-grid .game-copy {
    transform: translateZ(18px);
  }

  .catalog-grid .game-card:hover .game-copy,
  .catalog-grid .game-card:focus-within .game-copy {
    transform: translateZ(20px);
  }

  .catalog-grid .game-copy .text-link {
    transform: translateZ(23px);
  }

  .catalog-grid .game-copy .text-link:hover {
    transform: translateZ(25px) translateX(2px);
  }
}

@media (max-width: 600px) {
  section[aria-label="Game catalog"] {
    padding-top: 2px;
  }

  .catalog-toolbar {
    margin-top: 4px;
    padding: 12px;
    border-radius: 16px;
    background-size:
      34px 34px,
      34px 34px,
      auto;
  }

  .filter-row {
    gap: 7px;
  }

  .filter {
    min-height: 40px;
    padding: 8px 14px;
    font-size: 0.76rem;
  }

  #game-count {
    margin-bottom: 14px;
  }

  .catalog-grid {
    grid-template-columns: 1fr;
    gap: 17px;
    perspective: none;
  }

  .catalog-grid .game-card,
  .catalog-grid .game-card:only-child {
    max-width: 100%;
    border-radius: 19px;
    transform: none;
  }

  .catalog-grid .game-card:hover,
  .catalog-grid .game-card:focus-within {
    transform: translateY(-2px);
  }

  .catalog-grid .game-art {
    height: 284px;
    transform: none;
  }

  .catalog-grid .game-card:hover .game-art,
  .catalog-grid .game-card:focus-within .game-art {
    transform: none;
  }

  .catalog-grid .game-art:not(.logo-art) img {
    height: 86%;
    max-width: 80%;
    border-width: 4px;
    border-radius: 16px;
    transform: scale(0.965);
  }

  .catalog-grid .game-card:hover .game-art:not(.logo-art) img,
  .catalog-grid .game-card:focus-within .game-art:not(.logo-art) img {
    transform: scale(0.982);
  }

  .catalog-grid .game-art.logo-art img {
    width: 78%;
    height: 78%;
    transform: translateY(2px) scale(0.925);
  }

  .catalog-grid .game-card:hover .game-art.logo-art img,
  .catalog-grid .game-card:focus-within .game-art.logo-art img {
    transform: scale(0.95);
  }

  .catalog-grid .game-copy {
    padding: 19px 18px 18px;
    transform: none;
  }

  .catalog-grid .game-card:hover .game-copy,
  .catalog-grid .game-card:focus-within .game-copy {
    transform: none;
  }

  .catalog-grid .tag,
  .catalog-grid .game-copy h3,
  .catalog-grid .game-copy p,
  .catalog-grid .game-copy .status,
  .catalog-grid .game-copy .text-link,
  .catalog-grid .art-label {
    transform: none;
  }

  .catalog-grid .game-copy .text-link:hover {
    transform: translateX(2px);
  }

  .catalog-grid .game-copy h3 {
    font-size: 1.25rem;
  }
}

/* Touch can retain :hover after a tap; keep lift reserved for focus there. */
@media (hover: none), (pointer: coarse) {
  .catalog-grid .game-card:hover:not(:focus-within) {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .filter,
  .search-box,
  .catalog-grid .game-card,
  .catalog-grid .game-art,
  .catalog-grid .game-art img,
  .catalog-grid .game-copy,
  .catalog-grid .game-copy .text-link {
    transition: none !important;
  }

  .catalog-grid .game-card,
  .catalog-grid .game-card:hover,
  .catalog-grid .game-card:focus-within {
    transform: none !important;
  }

  .catalog-grid .game-art,
  .catalog-grid .game-art.logo-art,
  .catalog-grid .game-copy,
  .catalog-grid .tag,
  .catalog-grid .game-copy h3,
  .catalog-grid .game-copy p,
  .catalog-grid .game-copy .status,
  .catalog-grid .game-copy .text-link,
  .catalog-grid .art-label {
    transform: none !important;
  }

  .catalog-grid .game-art:not(.logo-art) img,
  .catalog-grid .game-card:hover .game-art:not(.logo-art) img,
  .catalog-grid .game-card:focus-within .game-art:not(.logo-art) img {
    transform: scale(0.965) !important;
    filter: none !important;
  }

  .catalog-grid .game-art.logo-art img,
  .catalog-grid .game-card:hover .game-art.logo-art img,
  .catalog-grid .game-card:focus-within .game-art.logo-art img {
    transform: translateY(2px) scale(0.925) !important;
  }
}

/* =========================================================
   BRAAQ PREMIUM SITE SYSTEM V1 — CROSS-PAGE UNIFICATION
   Append-only layer; preserves locked Hero / Footer / Games V2.3.
   CSS-only enhancements except optional 9-node ambient layer
   and a filtered-game display state in existing vanilla JS.
   ========================================================= */

:root {
  --braaq-surface: #fffefa;
  --braaq-edge: #e1e8df;
  --braaq-elevation: 0 12px 28px #12372d10, 0 2px 7px #92651a0a, inset 0 1px 0 #ffffff;
  --braaq-elevation-hover: 0 22px 40px #12372d17, 0 6px 12px #92651a0c, inset 0 1px 0 #ffffff;
  --braaq-gold-edge: #d3a23b;
  --braaq-speed: 230ms;
  --braaq-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Site-wide falling sparks: contained behind all interactive content.
   The wrapper responds once per pointer animation frame; the nine dots
   are compositor-driven and never receive mouse/touch events. */
.site-ambient {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  contain: layout style paint;
  opacity: 0.82;
}
.site-ambient[hidden] { display: none !important; }
.site-ambient i {
  position: absolute;
  left: var(--spark-left, 50%);
  top: -14px;
  width: var(--spark-size, 3px);
  height: var(--spark-size, 3px);
  border-radius: 50%;
  background: var(--spark-color, #bf9235);
  box-shadow: 0 0 6px #bd933222;
  opacity: 0;
  animation: braaq-site-fall var(--spark-duration, 19s) linear infinite;
  animation-delay: var(--spark-delay, -5s);
}
.site-ambient i:nth-child(1) { --spark-left: 6%; --spark-size: 3px; --spark-duration: 23s; --spark-delay: -12s; }
.site-ambient i:nth-child(2) { --spark-left: 17%; --spark-size: 2px; --spark-color: #5b9475; --spark-duration: 27s; --spark-delay: -22s; }
.site-ambient i:nth-child(3) { --spark-left: 29%; --spark-size: 3px; --spark-duration: 20s; --spark-delay: -7s; }
.site-ambient i:nth-child(4) { --spark-left: 43%; --spark-size: 2px; --spark-color: #5c9577; --spark-duration: 29s; --spark-delay: -19s; }
.site-ambient i:nth-child(5) { --spark-left: 54%; --spark-size: 2px; --spark-duration: 25s; --spark-delay: -3s; }
.site-ambient i:nth-child(6) { --spark-left: 67%; --spark-size: 3px; --spark-color: #659a7c; --spark-duration: 22s; --spark-delay: -17s; }
.site-ambient i:nth-child(7) { --spark-left: 76%; --spark-size: 3px; --spark-duration: 30s; --spark-delay: -27s; }
.site-ambient i:nth-child(8) { --spark-left: 89%; --spark-size: 2px; --spark-color: #53886f; --spark-duration: 26s; --spark-delay: -9s; }
.site-ambient i:nth-child(9) { --spark-left: 96%; --spark-size: 3px; --spark-duration: 24s; --spark-delay: -16s; }
@keyframes braaq-site-fall {
  0% { transform: translate3d(0, -12vh, 0); opacity: 0; }
  12% { opacity: .48; }
  84% { opacity: .42; }
  100% { transform: translate3d(12px, 112vh, 0); opacity: 0; }
}
/* Separate stacking context: particles stay behind nav, cards, text, inputs and dialogs. */
main { position: relative; z-index: 1; }
.site-header { z-index: 20; }
.site-footer { z-index: 1; }

/* Navigation: shared identity, tactile focus, lightweight underline reveal. */
.nav-shell {
  position: relative;
  border-color: #ffffffde;
  box-shadow: 0 17px 39px #14382b12, 0 3px 8px #825e1210, inset 0 1px 0 #ffffff;
}
.nav-shell::before {
  content: "";
  position: absolute;
  top: 0;
  left: 18%;
  right: 18%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #d9af5368, transparent);
  pointer-events: none;
}
.site-header .brand { transition: transform var(--braaq-speed) var(--braaq-ease); }
.site-header .brand img { transition: transform var(--braaq-speed) var(--braaq-ease), filter var(--braaq-speed) ease; }
.site-header .brand:hover { transform: translateY(-1px); }
.site-header .brand:hover img { transform: rotate(-4deg) scale(1.045); filter: drop-shadow(0 4px 5px #a875211e); }
#primary-nav > a:not(.button) { transition: color var(--braaq-speed) ease, transform var(--braaq-speed) var(--braaq-ease); }
#primary-nav > a:not(.button)::before {
  content: "";
  position: absolute;
  bottom: 6px;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 20px;
  background: linear-gradient(90deg, #c28c1c, #e2b74c);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--braaq-speed) var(--braaq-ease);
  pointer-events: none;
}
#primary-nav > a:not(.button):not([aria-current="page"]):hover::before,
#primary-nav > a:not(.button):not([aria-current="page"]):focus-visible::before { transform: scaleX(1); }
#primary-nav > a[aria-current="page"]::after { box-shadow: 0 2px 7px #d39a1636; }
.menu-toggle { transition: border-color var(--braaq-speed), background var(--braaq-speed), transform var(--braaq-speed); }
.menu-toggle:hover, .menu-toggle[aria-expanded="true"] { border-color: #a9c4b5; background: #eff7f0; }
.menu-toggle[aria-expanded="true"] .icon { transform: rotate(90deg); }
.menu-toggle .icon { transition: transform var(--braaq-speed) var(--braaq-ease); }

/* Shared 3D/tactile CTA family. No idle looping and no mandatory JS. */
.button {
  border-radius: 13px;
  min-height: 44px;
  font-weight: 740;
  letter-spacing: -0.008em;
  box-shadow: 0 4px 0 #07402f, 0 10px 19px #12372d1c, inset 0 1px 0 #ffffff2c;
  transition: transform var(--braaq-speed) var(--braaq-ease),
    box-shadow var(--braaq-speed) ease, background-color var(--braaq-speed) ease,
    border-color var(--braaq-speed) ease, color var(--braaq-speed) ease;
}
.button::after {
  content: "";
  position: absolute;
  top: -65%;
  left: -30%;
  width: 24%;
  height: 230%;
  background: linear-gradient(90deg, transparent, #ffffff80, transparent);
  transform: rotate(18deg) translateX(-220%);
  transition: transform 550ms var(--braaq-ease);
  pointer-events: none;
}
.button:hover { transform: translateY(-3px); box-shadow: 0 6px 0 #07402f, 0 15px 25px #12372d26, inset 0 1px 0 #ffffff32; }
.button:hover::after { transform: rotate(18deg) translateX(690%); }
.button:active { transform: translateY(1px); box-shadow: 0 2px 0 #07402f, 0 6px 12px #12372d18; }
.button:disabled, .button[aria-disabled="true"] { opacity: .62; transform: none !important; box-shadow: none !important; }
.button .icon, .text-link .icon { transition: transform var(--braaq-speed) var(--braaq-ease); }
.button:hover .icon, .text-link:hover .icon { transform: translateX(3px); }
.button.outline { box-shadow: 0 3px 0 #c5d6cb, 0 10px 17px #12372d0e, inset 0 1px 0 #ffffff; }
.button.outline:hover { box-shadow: 0 5px 0 #c1d2c7, 0 13px 21px #12372d14; }
.button.gold { box-shadow: 0 4px 0 #a57010, 0 10px 17px #98691226, inset 0 1px 0 #fff6d570; }
.button.gold:hover { box-shadow: 0 6px 0 #a57010, 0 14px 23px #9869122b; }
.button.outline.light { color: #f9fcfa; }
.nav-cta { box-shadow: 0 4px 0 #06402f, 0 11px 20px #103b2e1c; }

/* CTA panel: inherits locked green/gold art, adds consistent interactive affordances. */
.cta-band .actions { position: relative; z-index: 2; }
.cta-band .button { position: relative; }
.cta-band .button.outline.light { background: #ffffff12; border-color: #e0ede5a8; }
.cta-band .button.outline.light:hover { background: #ffffff20; border-color: #ffffffc3; }
.cta-mark img { transition: transform 320ms var(--braaq-ease); }
.cta-band:hover .cta-mark img { transform: rotate(-4deg) scale(1.035); }

/* Section headings and Games/About/Support/Contact page intros are one design family. */
.page-intro {
  position: relative;
  gap: clamp(20px, 3.5vw, 45px);
  padding: clamp(40px, 4.5vw, 64px) 22px clamp(32px, 4vw, 48px);
}
.page-intro > div:first-child { min-width: 0; position: relative; z-index: 1; }
.page-intro h1 { position: relative; width: fit-content; max-width: 100%; margin-bottom: 18px; }
.page-intro h1::after {
  content: "";
  position: absolute;
  bottom: -9px;
  left: 0;
  width: min(118px, 55%);
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, #bb7e12, #e2b44b, transparent);
}
.page-intro .lead { max-width: 64ch; font-size: clamp(1rem, 1.15vw, 1.1rem); line-height: 1.72; color: #53675c; text-wrap: pretty; }
.page-intro .eyebrow { margin-bottom: 9px; }
.intro-motif {
  position: relative;
  width: clamp(142px, 16vw, 195px);
  height: clamp(142px, 16vw, 195px);
  opacity: 1;
  overflow: visible;
  border: 1px solid #ecdfc5;
  border-radius: 28px;
  background: radial-gradient(circle at 54% 38%, #ffffff 1%, #f7efd7 66%, #edf3e7 100%);
  box-shadow: var(--braaq-elevation);
  transform: perspective(850px) rotateY(-5deg) rotateZ(3deg);
  transition: transform 360ms var(--braaq-ease), box-shadow 360ms ease;
}
.intro-motif::before { content: ""; position: absolute; inset: 10px; border: 1px solid #bca16536; border-radius: 20px; pointer-events: none; }
.intro-motif::after { content: ""; position: absolute; left: 15px; top: 15px; width: 22px; height: 22px; border-top: 1px solid #d3a23b; border-left: 1px solid #d3a23b; border-radius: 5px 0 0 0; pointer-events: none; }
.intro-motif img { width: 100%; height: 100%; padding: 24px; object-fit: contain; opacity: .72; mix-blend-mode: normal; filter: drop-shadow(0 6px 8px #1d573319); }
.intro-motif:hover { transform: perspective(850px) rotateY(0deg) rotateZ(0deg) translateY(-3px); box-shadow: var(--braaq-elevation-hover); }
.section-heading { position: relative; }
.section-heading .eyebrow { letter-spacing: .12em; }
.section-heading .eyebrow::before { content: ""; display: inline-block; width: 5px; height: 5px; flex: 0 0 5px; border-radius: 50%; background: #d49c25; }
.section-heading .text-link, .studio-preview .text-link { font-weight: 750; }

/* Reusable card depth tokens. Layout semantics and existing grids are preserved. */
.preview-values article, .value-card, .panel, .gallery-shell,
.process, .support-help, .legal-nav, .business-details > div, .contact-options, .contact-form {
  border-color: var(--braaq-edge);
  box-shadow: var(--braaq-elevation);
  background-color: var(--braaq-surface);
  transition: transform var(--braaq-speed) var(--braaq-ease),
    border-color var(--braaq-speed) ease, box-shadow var(--braaq-speed) ease;
}
.preview-values article, .value-card {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(145deg, #ffffff, #fffcf6);
}
.preview-values article::before, .value-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  bottom: 18px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, #d6a23b, #5f9676, transparent);
  opacity: .65;
  pointer-events: none;
}
.preview-values article:hover, .value-card:hover {
  border-color: #cbdbd0;
  transform: perspective(1200px) translateY(-4px) rotateX(.65deg);
  box-shadow: var(--braaq-elevation-hover);
}
.preview-values .icon-disc, .value-card .icon-disc { box-shadow: 0 4px 12px #0b5d4511, inset 0 1px 0 #ffffff; }
.studio-preview > div:first-child { position: relative; }
.studio-preview h2 { letter-spacing: -.04em; text-wrap: balance; }
.studio-preview > div:first-child > p:not(.eyebrow) { max-width: 57ch; line-height: 1.76; }
.studio-preview .text-link { margin-top: 17px; }

/* Featured cards share the catalog's tactile language without changing card layout. */
.featured .game-card {
  --featured-lift: 0px;
  border-radius: 20px;
  border-color: #e3e8df;
  box-shadow: var(--braaq-elevation);
  transform: perspective(1200px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(var(--featured-lift));
  transform-style: preserve-3d;
  transition: transform 300ms var(--braaq-ease), border-color 250ms, box-shadow 250ms;
}
.featured .game-card:hover, .featured .game-card:focus-within { --featured-lift: -4px; border-color: #cbdbd0; box-shadow: var(--braaq-elevation-hover); }
.featured .game-card .game-art { transform: translateZ(14px); }
.featured .game-card .game-copy { transform: translateZ(24px); }
.featured .game-card .game-copy .text-link { font-weight: 780; }

/* About: elevate visual collage and process values without heavy animation. */
.about-hero { gap: clamp(24px, 4vw, 55px); }
.about-hero .lead { max-width: 60ch; line-height: 1.72; }
.about-media {
  position: relative;
  isolation: isolate;
  background: radial-gradient(circle at 50% 28%, #fff5d5, #edf3e7 72%);
  border: 1px solid var(--braaq-edge);
  box-shadow: var(--braaq-elevation);
  perspective: 1100px;
}
.about-media::before { content: ""; position: absolute; inset: 13px; border: 1px solid #d8bd7836; border-radius: 18px; pointer-events: none; }
.about-media img { position: relative; z-index: 1; box-shadow: 0 14px 26px #12372d1b; transition: transform 320ms var(--braaq-ease), box-shadow 320ms ease; }
.about-media img:nth-child(1) { transform: translateZ(8px) rotate(-3deg); }
.about-media img:nth-child(2) { transform: translate3d(0, -15px, 24px); }
.about-media img:nth-child(3) { transform: translateZ(8px) rotate(3deg); }
.about-media:hover img:nth-child(1) { transform: translateZ(13px) rotate(-4deg); }
.about-media:hover img:nth-child(2) { transform: translate3d(0, -20px, 29px); }
.about-media:hover img:nth-child(3) { transform: translateZ(13px) rotate(4deg); }
.process { border-radius: 22px; background: linear-gradient(145deg, #ffffff, #fffaf0); }
.process > * { position: relative; min-width: 0; padding-left: 15px; border-left: 2px solid #d3a23b58; }
.process h3 { margin: 9px 0 7px; }

/* Support: accessible search/FAQ, familiar card feel. */
.support-search, .search-box, .form-field input, .form-field select,
.form-field textarea, #faq-search {
  border-radius: 12px;
  border-color: #cfded3;
  box-shadow: inset 0 1px 0 #ffffff, 0 3px 9px #12372d06;
  transition: border-color var(--braaq-speed) ease, box-shadow var(--braaq-speed) ease, background-color var(--braaq-speed) ease;
}
.search-box:focus-within, .support-search:focus-within,
.form-field input:focus-visible, .form-field select:focus-visible,
.form-field textarea:focus-visible, #faq-search:focus-visible {
  border-color: #438467;
  box-shadow: 0 0 0 3px #0b5d4518, 0 5px 12px #12372d0a;
}
.support-links a { border-color: #e1e8df; transition: background var(--braaq-speed) ease, color var(--braaq-speed) ease, transform var(--braaq-speed) var(--braaq-ease); }
.support-links a:hover { background: #f2f8f2; color: #0a5c43; transform: translateX(3px); }
.support-links a .icon:last-child { transition: transform var(--braaq-speed) var(--braaq-ease); }
.support-links a:hover .icon:last-child { transform: translateX(4px); }
.support-help { border-radius: 20px; background: linear-gradient(130deg, #f0f7ef, #fff8e9); }
.faq-section details { border-color: #e1e8df; transition: border-color var(--braaq-speed) ease, background-color var(--braaq-speed) ease; }
.faq-section details:hover { border-color: #bdd4c3; }
.faq-section details[open] { background: #fffefa; }
.faq-section summary { transition: background-color var(--braaq-speed), color var(--braaq-speed); }
.faq-section details summary:hover { background: #f4f8f3; }
.faq-section details[open] summary { background: #f0f6ee; }

/* Contact: forms remain physically still while typing; links remain tactile. */
.contact-options, .contact-form { transform: none !important; }
.contact-options:hover, .contact-form:hover { transform: none !important; box-shadow: var(--braaq-elevation); }
.contact-item { border-color: #e3e9e1; border-radius: 12px; padding: 16px 12px; transition: background-color var(--braaq-speed) ease; }
.contact-item:hover { background: #f5faf5; }
.contact-item .icon-disc { box-shadow: 0 4px 9px #0b5d4512; }
.contact-options [data-copy-email] { border-radius: 10px; }
.form-field input, .form-field select, .form-field textarea { background: #fffefa; }
.form-field input:hover, .form-field select:hover, .form-field textarea:hover { border-color: #a8c0b2; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: #438467; background: #fff; }

/* Micro-interaction polish for small controls and gallery. */
.icon-button, .gallery-controls button {
  transition: transform var(--braaq-speed) var(--braaq-ease),
    background-color var(--braaq-speed), border-color var(--braaq-speed), box-shadow var(--braaq-speed);
}
.icon-button:hover, .gallery-controls button:hover { transform: translateY(-2px); box-shadow: 0 5px 12px #12372d15; }
.text-link { text-underline-offset: 4px; }
.text-link:focus-visible, .filter:focus-visible, .button:focus-visible { outline: 3px solid #b7801e; outline-offset: 3px; }

/* One-time lightweight entrances; never delay content or run a scroll loop. */
@keyframes braaq-enter { from { opacity: .4; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .page-intro > div:first-child, .section-heading { animation: braaq-enter 560ms var(--braaq-ease) both; }
}

/* Filter UX fix: [hidden] does not make a card :only-child. */
.catalog-grid.is-single-result { grid-template-columns: minmax(0, 1fr); }
.catalog-grid.is-single-result .game-card:not([hidden]) { width: min(100%, 390px); max-width: 390px; }

/* Responsive and motion/speed protections. */
@media (max-width: 850px) {
  .page-intro { padding-top: 40px; padding-bottom: 33px; }
  .intro-motif { width: 126px; height: 126px; }
  .intro-motif img { padding: 15px; }
  .process > * { padding-left: 11px; }
}
@media (max-width: 600px), (hover: none), (pointer: coarse) {
  .site-ambient { display: none !important; }
  .page-intro { padding-top: 33px; }
  .intro-motif { display: none; }
  .featured .game-card { transform: none; }
  .featured .game-card:hover, .featured .game-card:focus-within { transform: none; }
  .preview-values article:hover, .value-card:hover { transform: none; }
  .about-media img:nth-child(1) { transform: rotate(-2deg); }
  .about-media img:nth-child(2) { transform: translateY(-8px); }
  .about-media img:nth-child(3) { transform: rotate(2deg); }
  .site-header .brand:hover, .site-header .brand:hover img { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .site-ambient { display: none !important; }
  .page-intro > div:first-child, .section-heading { animation: none !important; }
  .button, .button::after, .button .icon, .text-link .icon,
  .preview-values article, .value-card, .featured .game-card, .about-media img,
  .intro-motif, .site-header .brand, .site-header .brand img,
  #primary-nav > a:not(.button), #primary-nav > a:not(.button)::before,
  .support-links a, .icon-button, .gallery-controls button {
    animation: none !important;
    transition: none !important;
  }
  .featured .game-card, .featured .game-card:hover, .featured .game-card:focus-within,
  .preview-values article:hover, .value-card:hover, .intro-motif:hover {
    transform: none !important;
  }
}

/* =========================================================
   BRAAQ SITE-WIDE PREMIUM V1.1 — LOGO RESTORE + FINAL POLISH
   Final visual refinement after cross-page unification.
   Restores the page-intro BRAAQ motif to the earlier watermark
   treatment while retaining the stronger type, controls, cards,
   particles and responsive behavior added by Premium V1.
   ========================================================= */

/* ---------- Page intro: restore the earlier BRAAQ watermark ---------- */

.page-intro {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.page-intro::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: 2%;
  top: 13%;
  width: min(360px, 34vw);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(
    circle,
    #e5b54a0d 0%,
    #e5b54a06 36%,
    transparent 70%
  );
}

.intro-motif {
  position: relative;
  width: clamp(150px, 18vw, 210px);
  height: clamp(150px, 18vw, 210px);
  flex: 0 0 auto;
  overflow: visible;
  opacity: 0.22;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: rotate(7deg) translate3d(0, 0, 0);
  transform-origin: 50% 50%;
  transition:
    opacity 280ms var(--braaq-ease),
    transform 340ms var(--braaq-ease);
}

.intro-motif::before,
.intro-motif::after {
  content: none;
}

.intro-motif img {
  width: 100%;
  height: 100%;
  padding: 0;
  object-fit: contain;
  opacity: 1;
  mix-blend-mode: multiply;
  filter:
    saturate(0.92)
    contrast(0.98)
    drop-shadow(0 8px 12px #1d57330c);
}

@media (hover: hover) and (pointer: fine) {
  .intro-motif:hover {
    opacity: 0.29;
    transform: rotate(5deg) translate3d(0, -3px, 0) scale(1.018);
    box-shadow: none;
  }
}

/* ---------- Intro type hierarchy ---------- */

.page-intro > div:first-child {
  max-width: min(760px, 72%);
}

.page-intro .eyebrow {
  color: #14644d;
  font-weight: 800;
  letter-spacing: 0.115em;
}

.page-intro h1 {
  letter-spacing: -0.047em;
  text-wrap: balance;
  text-shadow: 0 8px 18px #14382b0a;
}

.page-intro h1::after {
  width: min(112px, 52%);
  height: 3px;
  box-shadow: 0 3px 8px #c18a1d1b;
}

.page-intro .lead {
  max-width: 63ch;
  color: #53675c;
  text-wrap: pretty;
}

/* ---------- Navigation final polish ---------- */

.nav-shell {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

#primary-nav > a:not(.button) {
  border-radius: 9px;
}

#primary-nav > a:not(.button):hover {
  color: #0b5d45;
  transform: translateY(-1px);
}

.nav-cta {
  overflow: hidden;
}

.nav-cta:hover {
  transform: translateY(-2px);
}

/* ---------- Shared button refinement ---------- */

.button {
  overflow: hidden;
  isolation: isolate;
}

.button::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    #ffffff16,
    transparent 45%
  );
}

.button:hover {
  transform: translateY(-2px);
}

.button:active {
  transform: translateY(1px) scale(0.995);
}

.button.outline {
  background:
    linear-gradient(180deg, #ffffff, #f7fbf8);
}

.button.outline:hover {
  background:
    linear-gradient(180deg, #ffffff, #eef7f0);
}

.button.gold {
  background:
    linear-gradient(180deg, #e6ad2f, #cf9416);
}

.button.gold:hover {
  background:
    linear-gradient(180deg, #efba42, #dca11e);
}

/* ---------- Search / filter family ---------- */

.catalog-toolbar,
.support-search,
.search-box {
  position: relative;
}

.catalog-toolbar {
  border-color: #dde5dd;
  box-shadow:
    0 13px 30px #12372d0b,
    0 2px 6px #8d631408,
    inset 0 1px 0 #ffffff;
}

.catalog-toolbar::before {
  width: 82px;
  opacity: 0.92;
}

.filter {
  box-shadow:
    0 2px 6px #12372d05,
    inset 0 1px 0 #ffffff;
}

.filter:hover {
  transform: translateY(-2px);
  box-shadow:
    0 5px 10px #12372d0b,
    inset 0 1px 0 #ffffff;
}

.filter[aria-pressed="true"] {
  transform: translateY(-1px);
}

.search-box,
.support-search {
  background:
    linear-gradient(180deg, #ffffff, #fbfdf9);
}

.search-box:focus-within,
.support-search:focus-within {
  box-shadow:
    0 0 0 3px #0b5d4516,
    0 8px 18px #12372d0b,
    inset 0 1px 0 #ffffff;
}

/* ---------- Shared cards: consistent premium depth ---------- */

.preview-values article,
.value-card,
.panel,
.gallery-shell,
.process,
.support-help,
.legal-nav,
.business-details > div {
  border-color: #dfe7df;
  box-shadow:
    0 12px 28px #12372d0e,
    0 2px 7px #92651a08,
    inset 0 1px 0 #ffffff;
}

.preview-values article,
.value-card {
  background:
    radial-gradient(circle at 90% 8%, #e4b3440b, transparent 26%),
    linear-gradient(145deg, #ffffff, #fffcf6);
}

.preview-values article:hover,
.value-card:hover {
  transform:
    perspective(1200px)
    translateY(-4px)
    rotateX(0.55deg)
    rotateY(-0.35deg);
}

.preview-values article h3,
.value-card h3 {
  letter-spacing: -0.025em;
}

/* ---------- Home studio-preview cohesion ---------- */

.studio-preview {
  position: relative;
  isolation: isolate;
}

.studio-preview::before {
  content: "";
  position: absolute;
  right: 4%;
  bottom: 8%;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(
    circle,
    #d8aa3b0c,
    transparent 69%
  );
  z-index: -1;
}

.studio-preview .text-link:hover {
  color: #0a5d44;
}

/* ---------- Support and contact final consistency ---------- */

.support-help {
  background:
    radial-gradient(circle at 88% 12%, #e5b64a0d, transparent 30%),
    linear-gradient(130deg, #f0f7ef, #fff8e9);
}

.support-links a {
  border-radius: 11px;
}

.support-links a:hover {
  box-shadow:
    0 6px 13px #12372d0a,
    inset 0 1px 0 #ffffff;
}

.contact-item {
  background:
    linear-gradient(180deg, #fffefa, #fbfdf9);
}

.contact-item:hover {
  border-color: #cbdcd1;
  box-shadow:
    0 6px 14px #12372d09,
    inset 0 1px 0 #ffffff;
}

.form-field input,
.form-field select,
.form-field textarea {
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 3px 8px #12372d05;
}

/* ---------- CTA handoff ---------- */

.cta-band {
  box-shadow:
    0 15px 31px #12372d12,
    inset 0 1px 0 #ffffff15;
}

.cta-band .actions {
  gap: 10px;
}

/* ---------- Ambient particles: present but subordinate ---------- */

.site-ambient {
  opacity: 0.68;
}

.site-ambient i {
  box-shadow: 0 0 5px #bd93321a;
}

@keyframes braaq-site-fall {
  0% {
    transform: translate3d(0, -12vh, 0);
    opacity: 0;
  }

  14% {
    opacity: 0.38;
  }

  84% {
    opacity: 0.32;
  }

  100% {
    transform: translate3d(10px, 112vh, 0);
    opacity: 0;
  }
}

/* ---------- Responsive safeguards ---------- */

@media (max-width: 850px) {
  .page-intro > div:first-child {
    max-width: min(660px, 78%);
  }

  .intro-motif {
    width: 142px;
    height: 142px;
    opacity: 0.19;
  }

  .page-intro::after {
    width: 250px;
    right: -4%;
  }
}

@media (max-width: 600px), (hover: none), (pointer: coarse) {
  .page-intro > div:first-child {
    max-width: 100%;
  }

  .page-intro::after {
    display: none;
  }

  .intro-motif {
    display: none;
  }

  .button:hover,
  .filter:hover,
  #primary-nav > a:not(.button):hover {
    transform: none;
  }

  .nav-shell {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .intro-motif,
  .button,
  .filter,
  #primary-nav > a:not(.button) {
    transition: none !important;
  }

  .intro-motif:hover,
  .button:hover,
  .button:active,
  .filter:hover,
  .filter[aria-pressed="true"],
  #primary-nav > a:not(.button):hover {
    transform: none !important;
  }
}

/* ===========================================================
   BRAAQ CONTACT — LOVE HEARTS V1.1 FINAL MICRO-POLISH
   Hearts originate closer to LOVE, use a tighter spread,
   smaller scale and softer fade for a more premium result.
   =========================================================== */

.page-intro .contact-love-word {
  position: relative;
  display: inline-block;
  isolation: isolate;
  white-space: nowrap;
  color: #0d5d46;
  font-weight: 850;
  letter-spacing: 0.1em;
}

.page-intro .contact-love-hearts {
  position: absolute;
  left: 50%;
  top: 7px;
  width: 34px;
  height: 32px;
  transform: translateX(-48%);
  pointer-events: none;
  overflow: visible;
  z-index: 1;
}

.page-intro .contact-love-hearts i {
  --drift: 0px;
  position: absolute;
  top: 4px;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: #df6b8c;
  box-shadow: 0 1px 3px #df6b8c1c;
  opacity: 0;
  transform: translate3d(0, 4px, 0) rotate(45deg) scale(.42);
  animation: braaq-contact-heart-rise 4.15s ease-out infinite;
}

.page-intro .contact-love-hearts i::before,
.page-intro .contact-love-hearts i::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: inherit;
}

.page-intro .contact-love-hearts i::before {
  left: -50%;
  top: 0;
}

.page-intro .contact-love-hearts i::after {
  left: 0;
  top: -50%;
}

.page-intro .contact-love-hearts i:nth-child(1) {
  --drift: -7px;
  left: 18%;
  animation-delay: 0s;
}

.page-intro .contact-love-hearts i:nth-child(2) {
  --drift: 4px;
  left: 42%;
  width: 5px;
  height: 5px;
  background: #dca05b;
  animation-delay: 1s;
}

.page-intro .contact-love-hearts i:nth-child(3) {
  --drift: 7px;
  left: 63%;
  width: 7px;
  height: 7px;
  background: #ec85a3;
  animation-delay: 2.05s;
}

.page-intro .contact-love-hearts i:nth-child(4) {
  --drift: -3px;
  left: 80%;
  width: 5px;
  height: 5px;
  background: #d97695;
  animation-delay: 3.05s;
}

@keyframes braaq-contact-heart-rise {
  0%,
  10% {
    opacity: 0;
    transform: translate3d(0, 4px, 0) rotate(45deg) scale(.42);
  }

  24% {
    opacity: .78;
  }

  62% {
    opacity: .5;
  }

  100% {
    opacity: 0;
    transform: translate3d(var(--drift), -22px, 0) rotate(45deg) scale(.82);
  }
}

/* Fewer animated elements on phones and tablets. */
@media (hover: none), (pointer: coarse) {
  .page-intro .contact-love-hearts {
    top: 8px;
    width: 30px;
  }

  .page-intro .contact-love-hearts i:nth-child(n + 3) {
    display: none;
  }

  .page-intro .contact-love-hearts i {
    animation-duration: 5.6s;
  }
}

/* Respect accessibility preferences: one stationary heart only. */
@media (prefers-reduced-motion: reduce) {
  .page-intro .contact-love-hearts i {
    animation: none !important;
    opacity: 0 !important;
  }

  .page-intro .contact-love-hearts i:first-child {
    opacity: .48 !important;
    transform: translate3d(-1px, -6px, 0) rotate(45deg) scale(.62);
  }
}

/* =========================================================
   BRAAQ SITE-WIDE ICONS V1 — PREMIUM 3D + MOTION POLISH
   Lightweight CSS-only treatment for the existing inline SVGs.
   No new JS, no external libraries, no continuous animation.
   Motion is interaction-driven and reduced on touch devices.
   ========================================================= */

/* ---------- shared SVG depth ---------- */

.icon {
  overflow: visible;
  transform-box: fill-box;
  transform-origin: 50% 50%;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  filter:
    drop-shadow(0 1px 0 #ffffff54)
    drop-shadow(0 2px 2px #0b392d20);
  transition:
    transform 220ms cubic-bezier(.22, 1, .36, 1),
    filter 220ms ease,
    opacity 220ms ease;
}

/* Slightly stronger icon depth inside interactive controls. */
.button .icon,
.text-link .icon,
.icon-button .icon,
.gallery-controls .icon,
.menu-toggle .icon,
.whatsapp-float .icon,
.support-links .icon,
.search-box .icon,
.support-search .icon {
  filter:
    drop-shadow(0 1px 0 #ffffff66)
    drop-shadow(0 2px 2px #0a352a2b)
    drop-shadow(0 4px 5px #12372d0f);
}

/* ---------- 3D circular icon badges ---------- */

.icon-disc {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transform-style: preserve-3d;
  background:
    radial-gradient(circle at 34% 22%, #ffffff 0 11%, transparent 38%),
    linear-gradient(145deg, #f8fbf4, #e7eee1);
  border: 1px solid #dce6dc;
  box-shadow:
    0 5px 0 #d3dfd5,
    0 10px 19px #12372d14,
    inset 0 1px 0 #ffffff,
    inset 0 -1px 0 #cedace;
  transition:
    transform 260ms cubic-bezier(.22, 1, .36, 1),
    box-shadow 260ms ease,
    border-color 260ms ease,
    background 260ms ease;
}

.icon-disc::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 9%;
  top: 8%;
  width: 60%;
  height: 38%;
  border-radius: 999px;
  pointer-events: none;
  background: linear-gradient(180deg, #ffffffb8, #ffffff00);
  transform: rotate(-13deg);
  opacity: .7;
}

.icon-disc .icon {
  position: relative;
  z-index: 1;
  transform: translateZ(8px);
  filter:
    drop-shadow(0 1px 0 #ffffffc2)
    drop-shadow(0 3px 2px #0c46352b);
}

@media (hover: hover) and (pointer: fine) {
  .preview-values article:hover .icon-disc,
  .value-card:hover .icon-disc,
  .contact-item:hover .icon-disc,
  .support-help:hover .icon-disc,
  .business-details > div:hover .icon-disc {
    transform:
      perspective(500px)
      translateY(-3px)
      rotateX(5deg)
      rotateY(-5deg);
    border-color: #bfd3c6;
    background:
      radial-gradient(circle at 34% 22%, #ffffff 0 12%, transparent 38%),
      linear-gradient(145deg, #fbfdf8, #e3eee5);
    box-shadow:
      0 7px 0 #cbd9cf,
      0 14px 23px #12372d18,
      inset 0 1px 0 #ffffff,
      inset 0 -1px 0 #cbd9ce;
  }

  .preview-values article:hover .icon-disc .icon,
  .value-card:hover .icon-disc .icon,
  .contact-item:hover .icon-disc .icon,
  .support-help:hover .icon-disc .icon,
  .business-details > div:hover .icon-disc .icon {
    transform: translateZ(12px) scale(1.06) rotate(-3deg);
    filter:
      drop-shadow(0 1px 0 #ffffffd4)
      drop-shadow(0 4px 3px #0c463530);
  }
}

/* ---------- button icons ---------- */

.button .icon {
  position: relative;
  transform: translate3d(0, 0, 0);
}

@media (hover: hover) and (pointer: fine) {
  .button:hover .icon {
    transform: translate3d(3px, -1px, 0) scale(1.06);
    filter:
      drop-shadow(0 1px 0 #ffffff75)
      drop-shadow(0 4px 3px #072f252d);
  }

  .button:active .icon {
    transform: translate3d(1px, 1px, 0) scale(.98);
  }

  /* Mail CTAs: tiny lift/flap gesture instead of an arrow nudge. */
  .nav-cta:hover .icon,
  .cta-band .button.outline.light:hover .icon {
    animation: braaq-icon-mail 520ms cubic-bezier(.22, 1, .36, 1) both;
  }

  /* Arrow-style text links remain directional. */
  .text-link:hover .icon,
  .support-links a:hover .icon:last-child {
    transform: translate3d(5px, -1px, 0) scale(1.05);
  }
}

/* ---------- search icons ---------- */

.search-box .icon,
.support-search .icon {
  color: #648578;
  transform: translateZ(0);
}

.search-box:focus-within .icon,
.support-search:focus-within .icon {
  color: #0b654b;
  transform: rotate(-8deg) scale(1.08);
  filter:
    drop-shadow(0 1px 0 #ffffff)
    drop-shadow(0 3px 4px #0b5d4529);
}

/* ---------- menu icon ---------- */

@media (hover: hover) and (pointer: fine) {
  .menu-toggle:hover .icon {
    transform: translateY(-1px) rotate(6deg) scale(1.05);
  }

  .menu-toggle[aria-expanded="true"] .icon {
    transform: rotate(90deg) scale(1.04);
  }
}

/* ---------- eyebrow / spark / star icons ---------- */

.eyebrow .icon,
.hero-chip .icon,
.hero-note .icon {
  color: #c78e1d;
  filter:
    drop-shadow(0 1px 0 #fff7da)
    drop-shadow(0 3px 3px #9e6a151c);
}

@media (hover: hover) and (pointer: fine) {
  .eyebrow:hover .icon,
  .hero-chip:hover .icon,
  .hero-note:hover .icon {
    animation: braaq-icon-twinkle 620ms cubic-bezier(.22, 1, .36, 1) both;
  }
}

/* ---------- WhatsApp / chat ---------- */

.whatsapp-float .icon {
  transform-origin: 50% 56%;
}

@media (hover: hover) and (pointer: fine) {
  .whatsapp-float:hover .icon,
  .whatsapp-float:focus-visible .icon {
    animation: braaq-icon-chat 620ms cubic-bezier(.22, 1, .36, 1) both;
  }
}

/* ---------- utility / copy / share / gallery ---------- */

@media (hover: hover) and (pointer: fine) {
  .icon-button:hover .icon,
  .gallery-controls button:hover .icon,
  [data-copy-email]:hover .icon,
  [data-share]:hover .icon {
    transform:
      perspective(420px)
      translateY(-2px)
      rotateY(-8deg)
      scale(1.07);
    filter:
      drop-shadow(0 1px 0 #ffffffa8)
      drop-shadow(0 4px 4px #12372d25);
  }

  .icon-button:active .icon,
  .gallery-controls button:active .icon,
  [data-copy-email]:active .icon,
  [data-share]:active .icon {
    transform: translateY(1px) scale(.97);
  }
}

/* ---------- small status/control icons ---------- */

.contact-item .button .icon,
.support-help .button .icon,
.business-details .button .icon {
  filter:
    drop-shadow(0 1px 0 #ffffff70)
    drop-shadow(0 3px 3px #0b463522);
}

.footer-grid .brand img,
.cta-mark img,
.intro-motif img {
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

/* ---------- focus treatment ---------- */

.button:focus-visible .icon,
.text-link:focus-visible .icon,
.menu-toggle:focus-visible .icon,
.whatsapp-float:focus-visible .icon,
.icon-button:focus-visible .icon,
.gallery-controls button:focus-visible .icon,
.search-box:focus-within .icon,
.support-search:focus-within .icon {
  filter:
    drop-shadow(0 1px 0 #ffffff)
    drop-shadow(0 0 5px #d39a164f)
    drop-shadow(0 3px 3px #12372d20);
}

/* ---------- icon animation keyframes ---------- */

@keyframes braaq-icon-mail {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }

  38% {
    transform: translate3d(0, -3px, 0) rotate(-5deg) scale(1.08);
  }

  68% {
    transform: translate3d(1px, -1px, 0) rotate(3deg) scale(1.04);
  }

  100% {
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1.03);
  }
}

@keyframes braaq-icon-twinkle {
  0% {
    transform: rotate(0deg) scale(1);
    filter:
      drop-shadow(0 1px 0 #fff7da)
      drop-shadow(0 3px 3px #9e6a151c);
  }

  42% {
    transform: rotate(12deg) scale(1.18);
    filter:
      drop-shadow(0 1px 0 #ffffff)
      drop-shadow(0 0 6px #e4b13a60)
      drop-shadow(0 4px 4px #9e6a1522);
  }

  72% {
    transform: rotate(-5deg) scale(1.08);
  }

  100% {
    transform: rotate(0deg) scale(1);
  }
}

@keyframes braaq-icon-chat {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }

  35% {
    transform: translate3d(0, -2px, 0) scale(1.12) rotate(-4deg);
  }

  62% {
    transform: translate3d(0, 0, 0) scale(.98) rotate(3deg);
  }

  100% {
    transform: translate3d(0, 0, 0) scale(1.04);
  }
}

/* ---------- touch/mobile safety ---------- */

@media (max-width: 600px), (hover: none), (pointer: coarse) {
  .icon {
    filter:
      drop-shadow(0 1px 0 #ffffff45)
      drop-shadow(0 2px 2px #12372d16);
  }

  .icon-disc {
    transform: none;
    box-shadow:
      0 3px 0 #d3dfd5,
      0 7px 13px #12372d0f,
      inset 0 1px 0 #ffffff;
  }

  .icon-disc .icon,
  .button .icon,
  .text-link .icon,
  .menu-toggle .icon,
  .whatsapp-float .icon,
  .icon-button .icon,
  .gallery-controls .icon {
    animation: none !important;
    transform: none;
  }

  .search-box:focus-within .icon,
  .support-search:focus-within .icon {
    transform: scale(1.04);
  }
}

/* ---------- reduced-motion safety ---------- */

@media (prefers-reduced-motion: reduce) {
  .icon,
  .icon-disc,
  .icon-disc .icon,
  .button .icon,
  .text-link .icon,
  .menu-toggle .icon,
  .whatsapp-float .icon,
  .icon-button .icon,
  .gallery-controls .icon,
  .eyebrow .icon,
  .hero-chip .icon,
  .hero-note .icon,
  .search-box .icon,
  .support-search .icon {
    animation: none !important;
    transition: none !important;
  }

  .icon-disc,
  .icon-disc:hover,
  .icon-disc .icon,
  .button:hover .icon,
  .button:active .icon,
  .text-link:hover .icon,
  .menu-toggle:hover .icon,
  .menu-toggle[aria-expanded="true"] .icon,
  .whatsapp-float:hover .icon,
  .icon-button:hover .icon,
  .gallery-controls button:hover .icon,
  [data-copy-email]:hover .icon,
  [data-share]:hover .icon,
  .search-box:focus-within .icon,
  .support-search:focus-within .icon {
    transform: none !important;
  }
}

/* =========================================================
   BRAAQ SITE-WIDE ICONS V1.2 — FINAL ALIGNMENT & SHADOW POLISH
   Final icon balance + premium desktop custom dropdown.
   Desktop/fine-pointer gets the enhanced select UI.
   Touch/mobile keeps the native platform picker.
   ========================================================= */

/* ---------- Icon pedestal refinement ---------- */

.icon-disc {
  box-shadow:
    0 2px 0 #d7e1d9,
    0 7px 14px #12372d0d,
    inset 0 1px 0 #ffffff,
    inset 0 -1px 0 #d4ded6;
}

.icon-disc .icon {
  filter:
    drop-shadow(0 1px 0 #ffffffa0)
    drop-shadow(0 2px 2px #0c463517);
}

.contact-item .icon-disc,
.preview-values .icon-disc,
.value-card .icon-disc {
  box-shadow:
    0 2px 0 #d6e0d8,
    0 7px 13px #12372d0d,
    inset 0 1px 0 #ffffff,
    inset 0 -1px 0 #d4ded6;
}

@media (hover: hover) and (pointer: fine) {
  .preview-values article:hover .icon-disc,
  .value-card:hover .icon-disc,
  .contact-item:hover .icon-disc,
  .support-help:hover .icon-disc,
  .business-details > div:hover .icon-disc {
    transform:
      perspective(520px)
      translateY(-2px)
      rotateX(4deg)
      rotateY(-4deg);
    box-shadow:
      0 4px 0 #cedad1,
      0 10px 18px #12372d12,
      inset 0 1px 0 #ffffff,
      inset 0 -1px 0 #cedad1;
  }

  .preview-values article:hover .icon-disc .icon,
  .value-card:hover .icon-disc .icon,
  .contact-item:hover .icon-disc .icon,
  .support-help:hover .icon-disc .icon,
  .business-details > div:hover .icon-disc .icon {
    transform: translateZ(9px) scale(1.045) rotate(-2deg);
    filter:
      drop-shadow(0 1px 0 #ffffffc4)
      drop-shadow(0 3px 2px #0c463522);
  }
}

/* ---------- WhatsApp visual balance ---------- */

.whatsapp-contact .icon-disc {
  background: linear-gradient(145deg, #31945b, #237848);
  border-color: #61ad7b;
  box-shadow:
    0 2px 0 #1f6b41,
    0 7px 12px #1d7f4516,
    inset 0 1px 0 #ffffff3d;
}

.whatsapp-contact .icon-disc .icon {
  filter:
    drop-shadow(0 1px 0 #ffffff55)
    drop-shadow(0 2px 2px #0b4c2d26);
}

@media (hover: hover) and (pointer: fine) {
  .whatsapp-contact:hover .icon-disc {
    transform:
      perspective(500px)
      translateY(-2px)
      rotateX(4deg)
      rotateY(-4deg);
    background: linear-gradient(145deg, #38a364, #267d4c);
    box-shadow:
      0 3px 0 #1d673d,
      0 9px 16px #1d7f451a,
      inset 0 1px 0 #ffffff45;
  }
}

/* ---------- Arrow spacing / icon weight ---------- */

.text-link,
.game-copy .text-link {
  gap: 7px;
}

.text-link .icon,
.game-copy .text-link .icon {
  filter:
    drop-shadow(0 1px 0 #ffffff62)
    drop-shadow(0 2px 2px #12372d18);
}

/* ---------- Navbar mail icon ---------- */

.nav-cta .icon {
  filter:
    drop-shadow(0 1px 0 #ffffff80)
    drop-shadow(0 2px 2px #062f252d)
    drop-shadow(0 4px 5px #062f2510);
}

/* ---------- Form field baseline ---------- */

.form-field select {
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease;
}

/* =========================================================
   BRAAQ CUSTOM SELECT
   Progressive desktop enhancement. The real <select> remains
   in the DOM and owns the submitted value.
   ========================================================= */

.braaq-select {
  position: relative;
  width: 100%;
  z-index: 1;
}

.braaq-select[data-open="true"] {
  z-index: 80;
}

.braaq-select-native {
  position: absolute !important;
  left: 1px;
  top: 1px;
  width: 1px !important;
  height: 1px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  clip-path: inset(50%);
}

.braaq-select-trigger {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  height: 50px;
  min-height: 50px;
  padding: 10px 10px 10px 16px;
  border: 1px solid #cbd9d1;
  border-radius: 13px;
  background:
    radial-gradient(circle at 18% 0%, #ffffff 0 18%, transparent 52%),
    linear-gradient(180deg, #ffffff, #f8fbf8);
  color: #26372f;
  text-align: left;
  box-shadow:
    0 2px 0 #e1e7e2,
    0 6px 12px #12372d07,
    inset 0 1px 0 #ffffff;
  cursor: pointer;
  transform: translateZ(0);
  transition:
    transform 190ms cubic-bezier(.22, 1, .36, 1),
    border-color 190ms ease,
    box-shadow 190ms ease,
    background 190ms ease;
}

.braaq-select-trigger::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 12px;
  right: 54px;
  top: 1px;
  height: 42%;
  border-radius: 12px 12px 50% 50%;
  pointer-events: none;
  background: linear-gradient(180deg, #ffffff8c, transparent);
}

.braaq-select-value {
  min-width: 0;
  overflow: hidden;
  color: #25362e;
  font-weight: 520;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.braaq-select-chevron {
  position: relative;
  flex: 0 0 auto;
  width: 29px;
  height: 29px;
  border: 1px solid #d1ddd5;
  border-radius: 9px;
  background:
    radial-gradient(circle at 32% 22%, #ffffff 0 12%, transparent 42%),
    linear-gradient(145deg, #fbfdf9, #eaf1eb);
  box-shadow:
    0 2px 0 #d5dfd7,
    0 5px 9px #12372d0c,
    inset 0 1px 0 #ffffff;
  transition:
    transform 220ms cubic-bezier(.22, 1, .36, 1),
    box-shadow 220ms ease,
    border-color 220ms ease;
}

.braaq-select-chevron::before,
.braaq-select-chevron::after {
  content: "";
  position: absolute;
  top: 13px;
  width: 7px;
  height: 2px;
  border-radius: 999px;
  background: #145e49;
  box-shadow: 0 1px 0 #ffffff;
  transition: transform 220ms cubic-bezier(.22, 1, .36, 1);
}

.braaq-select-chevron::before {
  left: 8px;
  transform: rotate(42deg);
}

.braaq-select-chevron::after {
  right: 8px;
  transform: rotate(-42deg);
}

.braaq-select[data-open="true"] .braaq-select-trigger {
  border-color: #43806c;
  background:
    radial-gradient(circle at 18% 0%, #ffffff 0 18%, transparent 52%),
    linear-gradient(180deg, #ffffff, #f3f9f4);
  box-shadow:
    0 0 0 3px #0b5d4510,
    0 2px 0 #dbe4dd,
    0 8px 17px #12372d0b,
    inset 0 1px 0 #ffffff;
  transform: translateY(-1px);
}

.braaq-select[data-open="true"] .braaq-select-chevron {
  border-color: #b9cec1;
  transform: translateY(-1px) rotateX(8deg);
  box-shadow:
    0 3px 0 #cedbd1,
    0 7px 11px #12372d10,
    inset 0 1px 0 #ffffff;
}

.braaq-select[data-open="true"] .braaq-select-chevron::before {
  transform: rotate(-42deg);
}

.braaq-select[data-open="true"] .braaq-select-chevron::after {
  transform: rotate(42deg);
}

@media (hover: hover) and (pointer: fine) {
  .braaq-select-trigger:hover {
    border-color: #aec5b8;
    background:
      radial-gradient(circle at 18% 0%, #ffffff 0 18%, transparent 52%),
      linear-gradient(180deg, #ffffff, #f3f8f4);
    transform: translateY(-1px);
    box-shadow:
      0 3px 0 #dce5de,
      0 8px 15px #12372d0a,
      inset 0 1px 0 #ffffff;
  }

  .braaq-select-trigger:hover .braaq-select-chevron {
    transform: translateY(-1px);
  }
}

.braaq-select-trigger:focus-visible {
  outline: 3px solid #956508;
  outline-offset: 4px;
}

/* ---------- dropdown panel ---------- */

.braaq-select-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 9px);
  z-index: 90;
  max-height: min(318px, 48vh);
  overflow: auto;
  padding: 7px;
  border: 1px solid #d9e3dc;
  border-radius: 15px;
  background:
    radial-gradient(circle at 92% 5%, #f3dfad20, transparent 28%),
    linear-gradient(180deg, #fffefa, #fbfcf8);
  box-shadow:
    0 14px 29px #12372d14,
    0 4px 9px #7c571208,
    inset 0 1px 0 #ffffff;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform:
    perspective(700px)
    translateY(-7px)
    rotateX(-4deg)
    scale(.985);
  transform-origin: 50% 0;
  transition:
    opacity 170ms ease,
    visibility 170ms ease,
    transform 210ms cubic-bezier(.22, 1, .36, 1);
  scrollbar-width: thin;
  scrollbar-color: #abc2b5 transparent;
}

.braaq-select[data-open="true"] .braaq-select-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform:
    perspective(700px)
    translateY(0)
    rotateX(0)
    scale(1);
}

.braaq-select-option {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 43px;
  margin: 0;
  padding: 9px 38px 9px 34px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #26372f;
  text-align: left;
  font-size: 0.91rem;
  font-weight: 540;
  line-height: 1.38;
  text-wrap: pretty;
  cursor: pointer;
  transition:
    transform 160ms cubic-bezier(.22, 1, .36, 1),
    background 160ms ease,
    color 160ms ease,
    box-shadow 160ms ease;
}

.braaq-select-option::before {
  content: "";
  position: absolute;
  left: 14px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #d3a13a;
  box-shadow: 0 0 0 3px #d3a13a10;
  opacity: .65;
}

.braaq-select-option::after {
  content: "✓";
  position: absolute;
  right: 13px;
  top: 50%;
  color: #ffffff;
  font-size: .76rem;
  font-weight: 900;
  opacity: 0;
  transform: translateY(-50%) scale(.7);
  transition:
    opacity 160ms ease,
    transform 160ms cubic-bezier(.22, 1, .36, 1);
}

.braaq-select-option:hover,
.braaq-select-option:focus-visible {
  outline: 0;
  background: #edf6ef;
  color: #0b5d45;
  transform: translateX(2px);
}

.braaq-select-option[aria-selected="true"] {
  min-height: 45px;
  background:
    linear-gradient(180deg, #177054, #0b5d45);
  color: #ffffff;
  box-shadow:
    0 2px 0 #074633,
    0 6px 10px #0b5d4515,
    inset 0 1px 0 #ffffff22;
}

.braaq-select-option[aria-selected="true"]::before {
  background: #e6b349;
  box-shadow:
    0 0 0 3px #e6b3491a,
    0 0 8px #e6b34924;
  opacity: 1;
}

.braaq-select-option[aria-selected="true"]::after {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

.braaq-select-option[aria-selected="true"]:hover,
.braaq-select-option[aria-selected="true"]:focus-visible {
  background:
    linear-gradient(180deg, #1b795b, #0d634a);
  color: #ffffff;
}

/* ---------- disabled custom select ---------- */

.braaq-select-trigger:disabled {
  cursor: default;
  opacity: .58;
  transform: none !important;
  box-shadow:
    0 2px 0 #e2e7e3,
    inset 0 1px 0 #ffffff;
}

/* ---------- Contact form select alignment lock ---------- */

#contact-form .form-field .braaq-select,
#contact-form .form-field .braaq-select-trigger {
  width: 100%;
}

#contact-form .braaq-select-trigger {
  height: 50px;
  min-height: 50px;
}

#contact-form .braaq-select-value {
  display: block;
  line-height: 1.35;
}

/* ---------- touch/mobile: keep native select ---------- */

@media (max-width: 700px), (hover: none), (pointer: coarse) {
  .braaq-select {
    display: contents;
  }

  .braaq-select-native {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    min-height: 48px !important;
    margin: initial !important;
    padding: initial !important;
    border: initial !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    clip-path: none;
  }

  .braaq-select-trigger,
  .braaq-select-menu {
    display: none !important;
  }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .braaq-select-trigger,
  .braaq-select-chevron,
  .braaq-select-chevron::before,
  .braaq-select-chevron::after,
  .braaq-select-menu,
  .braaq-select-option {
    transition: none !important;
  }

  .braaq-select-trigger:hover,
  .braaq-select[data-open="true"] .braaq-select-trigger,
  .braaq-select[data-open="true"] .braaq-select-chevron,
  .braaq-select-option:hover,
  .braaq-select-option:focus-visible {
    transform: none !important;
  }
}

/* =========================================================
   BRAAQ GAME DETAIL PAGES V2 — PREMIUM PRODUCT SHOWCASE
   Visual foundation for all individual game pages.
   Reuses authentic game media and existing markup.
   Lightweight CSS + one rAF pointer interaction in site.js.
   ========================================================= */

/* ---------- page rhythm ---------- */

.breadcrumbs {
  position: relative;
  z-index: 3;
  margin: 24px 0 10px;
}

.breadcrumbs ol {
  gap: 8px;
  width: fit-content;
  padding: 7px 11px;
  border: 1px solid #e4e8df;
  border-radius: 999px;
  background: #fffdf9d9;
  box-shadow:
    0 5px 12px #12372d07,
    inset 0 1px 0 #ffffff;
}

.breadcrumbs a {
  color: #587066;
  transition:
    color 180ms ease,
    transform 180ms ease;
}

.breadcrumbs a:hover {
  color: #0b5d45;
}

.breadcrumbs [aria-current] {
  color: #8b6416;
  font-weight: 760;
}

/* ---------- premium game hero ---------- */

.detail-hero {
  --detail-rx: 0deg;
  --detail-ry: 0deg;
  --detail-x: 0px;
  --detail-y: 0px;

  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1.03fr) minmax(360px, .97fr);
  gap: clamp(34px, 5vw, 68px);
  align-items: center;
  min-height: 520px;
  margin-top: 8px;
  padding: clamp(32px, 4.2vw, 56px);
  overflow: hidden;
  border: 1px solid #e2e7df;
  border-radius: 30px;
  background:
    radial-gradient(circle at 82% 18%, #e7b94a12 0 5%, transparent 28%),
    radial-gradient(circle at 12% 85%, #0b5d450a 0 4%, transparent 30%),
    linear-gradient(#14372c04 1px, transparent 1px),
    linear-gradient(90deg, #14372c04 1px, transparent 1px),
    linear-gradient(135deg, #fffefa, #fbf9f1 58%, #f4f8f1);
  background-size:
    auto,
    auto,
    42px 42px,
    42px 42px,
    auto;
  box-shadow:
    0 20px 45px #12372d0f,
    0 4px 12px #8c61120a,
    inset 0 1px 0 #ffffff;
  perspective: 1450px;
}

.detail-hero::before,
.detail-hero::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.detail-hero::before {
  z-index: -1;
  right: -90px;
  top: -110px;
  width: 330px;
  height: 330px;
  border: 1px solid #d4a44024;
  border-radius: 50%;
  box-shadow:
    0 0 0 34px #d4a44008,
    0 0 0 70px #0b5d4504;
}

.detail-hero::after {
  z-index: 1;
  left: 24px;
  bottom: 22px;
  width: 62px;
  height: 28px;
  border-left: 1px solid #d0a13c52;
  border-bottom: 1px solid #d0a13c52;
  border-radius: 0 0 0 8px;
}

.detail-copy {
  position: relative;
  z-index: 3;
  transform:
    translate3d(
      calc(var(--detail-x) * -.22),
      calc(var(--detail-y) * -.18),
      28px
    );
  transform-style: preserve-3d;
  transition: transform 320ms cubic-bezier(.22, 1, .36, 1);
}

.detail-copy .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-bottom: 4px;
  padding: 8px 12px;
  border: 1px solid #e6dfce;
  border-radius: 999px;
  background: #fffefaeb;
  color: #17604b;
  box-shadow:
    0 6px 15px #12372d08,
    inset 0 1px 0 #ffffff;
}

.detail-copy h1 {
  position: relative;
  width: fit-content;
  max-width: 13ch;
  margin: 18px 0 17px;
  font-size: clamp(2.75rem, 5vw, 4.75rem);
  line-height: .98;
  letter-spacing: -0.055em;
  text-wrap: balance;
  color: #143a2f;
  text-shadow: 0 12px 24px #12372d0b;
}

.detail-copy h1::after {
  content: "";
  display: block;
  width: min(118px, 42%);
  height: 3px;
  margin-top: 13px;
  border-radius: 999px;
  background: linear-gradient(90deg, #c98f1b, #e0b24c, transparent);
  box-shadow: 0 3px 8px #c9921f1b;
}

.detail-copy .tags {
  gap: 7px;
  margin-bottom: 19px;
}

.detail-copy .tag {
  min-height: 27px;
  padding: 5px 9px;
  border: 1px solid #e9dab0;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff7df, #ffefc9);
  color: #7d5910;
  font-size: .63rem;
  font-weight: 820;
  letter-spacing: .045em;
  text-transform: uppercase;
  box-shadow:
    0 3px 7px #845b1007,
    inset 0 1px 0 #ffffff;
}

.detail-copy .lead {
  max-width: 62ch;
  margin-top: 0;
  color: #596d62;
  font-size: clamp(.98rem, 1.15vw, 1.08rem);
  line-height: 1.72;
  text-wrap: pretty;
}

.availability {
  position: relative;
  max-width: 620px;
  margin-top: 22px;
  padding: 14px 16px 14px 44px;
  border: 1px solid #d9e5da;
  border-radius: 14px;
  background:
    radial-gradient(circle at 10% 0%, #ffffff, transparent 40%),
    linear-gradient(135deg, #f4faf3, #eef5ea);
  color: #53685d;
  box-shadow:
    0 7px 16px #12372d08,
    inset 0 1px 0 #ffffff;
}

.availability::before {
  content: "";
  position: absolute;
  left: 17px;
  top: 18px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #d2a034;
  box-shadow:
    0 0 0 4px #d2a03412,
    0 3px 6px #986e1618;
}

.availability strong {
  color: #174837;
}

.detail-copy .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 11px;
  margin-top: 25px;
}

/* ---------- authentic media / device stage ---------- */

.detail-visual {
  --detail-media-z: 44px;

  position: relative;
  isolation: isolate;
  min-height: 430px;
  padding: clamp(24px, 3.5vw, 38px);
  overflow: hidden;
  border: 1px solid #ffffff;
  border-radius: 28px;
  background:
    radial-gradient(circle at 50% 32%, #fff7d9 0 12%, transparent 44%),
    linear-gradient(145deg, #ecf2df, #f6eedb);
  box-shadow:
    0 27px 48px #12372d18,
    0 7px 15px #7954100a,
    inset 0 1px 0 #ffffff;
  transform:
    perspective(1150px)
    rotateX(var(--detail-rx))
    rotateY(var(--detail-ry))
    translate3d(
      calc(var(--detail-x) * .34),
      calc(var(--detail-y) * .26),
      0
    );
  transform-style: preserve-3d;
  transition:
    transform 340ms cubic-bezier(.22, 1, .36, 1),
    box-shadow 340ms ease;
}

.detail-visual::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(#12372d06 1px, transparent 1px),
    linear-gradient(90deg, #12372d06 1px, transparent 1px),
    linear-gradient(125deg, #ffffff72, transparent 31%, transparent 72%, #12372d0b);
  background-size:
    38px 38px,
    38px 38px,
    auto;
  opacity: .42;
}

.detail-visual::after {
  content: "";
  position: absolute;
  z-index: 2;
  left: 17%;
  right: 17%;
  bottom: 22px;
  height: 31px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(
    ellipse,
    #12372d24 0%,
    #12372d10 46%,
    transparent 74%
  );
  transform: translateZ(8px);
}

.detail-visual.warehouse {
  background:
    radial-gradient(circle at 50% 28%, #e7f5f5 0 11%, transparent 43%),
    radial-gradient(circle at 80% 72%, #e8ad3715, transparent 27%),
    linear-gradient(145deg, #dcebed, #f5eedb);
}

.detail-visual.forest {
  background:
    radial-gradient(circle at 50% 27%, #edf8cf 0 12%, transparent 44%),
    radial-gradient(circle at 81% 76%, #53a97410, transparent 28%),
    linear-gradient(145deg, #dbecc7, #f0f4e5);
}

.detail-visual.orchard {
  background:
    radial-gradient(circle at 50% 30%, #fff3c9 0 12%, transparent 44%),
    radial-gradient(circle at 78% 70%, #e78c3115, transparent 26%),
    linear-gradient(145deg, #eef3dc, #faead3);
}

.detail-visual img {
  position: relative;
  z-index: 4;
  width: auto;
  max-width: min(78%, 290px);
  max-height: 390px;
  object-fit: contain;
  padding: 0;
  border: 4px solid #123f32;
  border-radius: 20px;
  background: #123f32;
  box-shadow:
    0 22px 34px #12372d26,
    0 7px 13px #12372d17,
    inset 0 1px 0 #ffffff26,
    0 0 0 1px #ffffff2d;
  transform:
    translate3d(
      calc(var(--detail-x) * .22),
      calc(var(--detail-y) * .18),
      var(--detail-media-z)
    )
    scale(.975);
  transition:
    transform 340ms cubic-bezier(.22, 1, .36, 1),
    filter 340ms ease,
    box-shadow 340ms ease;
}

.detail-visual:hover {
  box-shadow:
    0 31px 54px #12372d1b,
    0 8px 17px #7954100b,
    inset 0 1px 0 #ffffff;
}

.detail-visual:hover img {
  transform:
    translate3d(
      calc(var(--detail-x) * .25),
      calc(var(--detail-y) * .2 - 3px),
      50px
    )
    scale(.99);
  filter: saturate(1.025) contrast(1.008);
}

.detail-visual .media-badge {
  z-index: 7;
  left: 17px;
  right: auto;
  bottom: 16px;
  padding: 6px 10px;
  border: 1px solid #ffffff2c;
  border-radius: 999px;
  background: #103a2fe8;
  color: #ffffff;
  font-size: .59rem;
  font-weight: 780;
  letter-spacing: .045em;
  text-transform: uppercase;
  box-shadow:
    0 6px 12px #0a2d241b,
    inset 0 1px 0 #ffffff18;
  transform: translateZ(58px);
}

/* ---------- gallery ---------- */

.gallery-shell {
  position: relative;
  isolation: isolate;
  margin-top: 28px;
  padding: 26px;
  overflow: hidden;
  border: 1px solid #dfe6df;
  border-radius: 24px;
  background:
    linear-gradient(#12372d04 1px, transparent 1px),
    linear-gradient(90deg, #12372d04 1px, transparent 1px),
    linear-gradient(145deg, #ffffff, #fffdf8);
  background-size:
    36px 36px,
    36px 36px,
    auto;
  box-shadow:
    0 16px 34px #12372d0f,
    0 3px 8px #7c55100a,
    inset 0 1px 0 #ffffff;
}

.gallery-shell::before {
  content: "";
  position: absolute;
  left: 22px;
  top: 0;
  width: 88px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, #d29b28, #d29b2820);
}

.gallery-head {
  margin-bottom: 18px;
}

.gallery-head h2 {
  color: #173d31;
  font-size: clamp(1.28rem, 1.8vw, 1.55rem);
  letter-spacing: -0.028em;
}

.gallery-controls .icon-button {
  border-color: #d6e1d9;
  background: linear-gradient(145deg, #ffffff, #eff6f0);
  box-shadow:
    0 3px 0 #d7e1d9,
    0 7px 13px #12372d0c,
    inset 0 1px 0 #ffffff;
  font-weight: 800;
  transition:
    transform 190ms cubic-bezier(.22, 1, .36, 1),
    box-shadow 190ms ease,
    border-color 190ms ease;
}

.gallery-controls .icon-button:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: #b9cfc1;
  box-shadow:
    0 4px 0 #cedbd1,
    0 10px 17px #12372d10,
    inset 0 1px 0 #ffffff;
}

.gallery-controls .icon-button:active:not(:disabled) {
  transform: translateY(1px);
}

.gallery-track {
  gap: 17px;
  padding: 4px 2px 15px;
  scrollbar-width: thin;
  scrollbar-color: #9fb9aa #f5f6f1;
}

.gallery-item {
  flex: 0 0 178px;
  padding: 9px;
  border: 1px solid #e2e8e1;
  border-radius: 16px;
  background: linear-gradient(145deg, #fffefa, #f8fbf5);
  box-shadow:
    0 8px 17px #12372d0b,
    inset 0 1px 0 #ffffff;
  transition:
    transform 220ms cubic-bezier(.22, 1, .36, 1),
    box-shadow 220ms ease,
    border-color 220ms ease;
}

.gallery-item a {
  position: relative;
  border-radius: 12px;
  background:
    radial-gradient(circle at 50% 22%, #fff9e5, transparent 43%),
    #eef2e7;
}

.gallery-item img {
  height: 292px;
  border-radius: 10px;
  transition:
    transform 240ms cubic-bezier(.22, 1, .36, 1),
    filter 240ms ease;
}

.gallery-item figcaption {
  min-height: 33px;
  margin: 10px 3px 1px;
  color: #315548;
  line-height: 1.35;
}

@media (hover: hover) and (pointer: fine) {
  .gallery-item:hover {
    transform:
      perspective(800px)
      translateY(-5px)
      rotateX(1.8deg)
      rotateY(-1deg);
    border-color: #cedbd2;
    box-shadow:
      0 14px 25px #12372d11,
      inset 0 1px 0 #ffffff;
  }

  .gallery-item:hover img {
    transform: scale(1.025);
    filter: saturate(1.025);
  }
}

.media-note {
  margin: 15px 2px 0;
  padding: 10px 12px;
  border-left: 2px solid #d0a03b;
  border-radius: 0 10px 10px 0;
  background: #fff9eb;
  color: #6b7168;
  line-height: 1.55;
}

/* ---------- feature + facts panels ---------- */

.detail-panels {
  grid-template-columns: minmax(0, 1.3fr) minmax(300px, .7fr);
  gap: 22px;
  margin-top: 26px;
}

.detail-panels > .panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-color: #dee6df;
  border-radius: 22px;
  background:
    radial-gradient(circle at 94% 5%, #e4b4420b, transparent 25%),
    linear-gradient(145deg, #ffffff, #fffdf8);
  box-shadow:
    0 14px 30px #12372d0e,
    0 3px 8px #865c1108,
    inset 0 1px 0 #ffffff;
}

.detail-panels > .panel::before {
  content: "";
  position: absolute;
  left: 24px;
  top: 0;
  width: 58px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, #d29a26, transparent);
}

.detail-panels .panel h2 {
  margin-bottom: 19px;
  color: #173d31;
  letter-spacing: -0.03em;
}

.feature-list {
  counter-reset: detail-feature;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.feature-list li {
  counter-increment: detail-feature;
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  min-height: 116px;
  padding: 15px;
  overflow: hidden;
  border: 1px solid #e2e8e1;
  border-radius: 14px;
  background:
    radial-gradient(circle at 90% 10%, #e0ad390b, transparent 30%),
    linear-gradient(145deg, #fffefa, #f8fbf6);
  box-shadow:
    0 6px 13px #12372d08,
    inset 0 1px 0 #ffffff;
  transition:
    transform 210ms cubic-bezier(.22, 1, .36, 1),
    border-color 210ms ease,
    box-shadow 210ms ease;
}

.feature-list li::after {
  content: "0" counter(detail-feature);
  position: absolute;
  right: 11px;
  top: 8px;
  color: #d4a03924;
  font-size: 1.2rem;
  font-weight: 900;
  letter-spacing: -.05em;
}

.feature-list .icon {
  width: 31px;
  height: 31px;
  margin-top: 0;
  padding: 7px;
  border: 1px solid #d9e5dc;
  border-radius: 10px;
  background: linear-gradient(145deg, #f9fcf7, #eaf2eb);
  box-shadow:
    0 2px 0 #d5e0d7,
    0 5px 9px #12372d0a;
}

.feature-list strong {
  display: block;
  padding-right: 22px;
  color: #174637;
  font-size: .88rem;
}

.feature-list p {
  margin-top: 5px;
  color: #69776f;
  line-height: 1.55;
}

@media (hover: hover) and (pointer: fine) {
  .feature-list li:hover {
    transform: translateY(-3px);
    border-color: #cad9d0;
    box-shadow:
      0 10px 18px #12372d0d,
      inset 0 1px 0 #ffffff;
  }
}

.detail-panels dl {
  display: grid;
  gap: 7px;
  margin-bottom: 18px;
}

.detail-panels dl > div {
  padding: 10px 11px;
  border: 1px solid #edf0eb;
  border-radius: 10px;
  background: #fbfdf9;
}

.detail-panels dt {
  color: #607168;
  font-size: .74rem;
}

.detail-panels dd {
  color: #294c40;
  font-size: .79rem;
}

.detail-panels .text-link {
  margin-top: 3px;
}

/* ---------- related games ---------- */

.related {
  position: relative;
  margin-top: 50px;
  padding-top: 4px;
}

.related::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -20px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #dce3dc, transparent);
}

.related .section-heading {
  margin-bottom: 18px;
}

/* ---------- gallery dialog ---------- */

#gallery-dialog {
  max-width: min(900px, 92vw);
  max-height: 90vh;
  padding: 15px;
  border: 1px solid #ffffff;
  border-radius: 22px;
  background: #fffdf8;
  box-shadow: 0 28px 70px #071e1850;
}

#gallery-dialog::backdrop {
  background: #071e18b8;
  backdrop-filter: blur(5px);
}

#gallery-dialog .dialog-top {
  padding: 2px 2px 11px;
}

#gallery-dialog img {
  display: block;
  max-width: 100%;
  max-height: 74vh;
  margin-inline: auto;
  border-radius: 15px;
  box-shadow: 0 12px 28px #12372d20;
}

/* ---------- responsive ---------- */

@media (max-width: 1000px) {
  .detail-hero {
    grid-template-columns: minmax(0, 1fr) minmax(310px, .82fr);
    gap: 30px;
    padding: 36px;
  }

  .detail-copy h1 {
    font-size: clamp(2.55rem, 5vw, 3.8rem);
  }

  .detail-visual {
    min-height: 400px;
  }

  .feature-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 850px) {
  .detail-hero {
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 30px;
  }

  .detail-copy {
    transform: none;
  }

  .detail-visual {
    width: min(100%, 540px);
    margin-inline: auto;
    min-height: 390px;
  }

  .detail-panels {
    grid-template-columns: 1fr;
  }

  .feature-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .breadcrumbs ol {
    max-width: 100%;
    border-radius: 12px;
  }

  .detail-hero {
    gap: 24px;
    margin-top: 4px;
    padding: 22px 18px 24px;
    border-radius: 22px;
    background-size:
      auto,
      auto,
      54px 54px,
      54px 54px,
      auto;
  }

  .detail-hero::before {
    width: 230px;
    height: 230px;
    right: -105px;
    top: -100px;
  }

  .detail-copy h1 {
    max-width: 100%;
    font-size: clamp(2.35rem, 12vw, 3.15rem);
  }

  .detail-copy .eyebrow {
    padding: 7px 10px;
  }

  .detail-copy .actions {
    align-items: stretch;
    flex-direction: column;
  }

  .detail-copy .actions .button {
    width: 100%;
  }

  .availability {
    padding-left: 42px;
  }

  .detail-visual {
    min-height: 350px;
    padding: 22px 16px;
    border-radius: 21px;
    transform: none !important;
  }

  .detail-visual img,
  .detail-visual:hover img {
    max-width: min(82%, 245px);
    max-height: 325px;
    transform: scale(.97);
  }

  .gallery-shell {
    padding: 18px 14px;
    border-radius: 19px;
  }

  .gallery-item {
    flex-basis: 150px;
    padding: 7px;
  }

  .gallery-item img {
    height: 255px;
  }

  .feature-list {
    grid-template-columns: 1fr;
  }

  .feature-list li {
    min-height: 0;
  }

  .detail-panels > .panel {
    padding: 21px 18px;
  }
}

@media (hover: none), (pointer: coarse) {
  .detail-copy,
  .detail-visual,
  .detail-visual:hover,
  .detail-visual img,
  .detail-visual:hover img {
    transform: none;
  }

  .detail-visual img,
  .detail-visual:hover img {
    transform: scale(.975);
  }

  .gallery-item:hover,
  .feature-list li:hover {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .detail-copy,
  .detail-visual,
  .detail-visual img,
  .gallery-item,
  .gallery-item img,
  .feature-list li,
  .gallery-controls .icon-button {
    transition: none !important;
  }

  .detail-copy,
  .detail-visual,
  .detail-visual:hover,
  .detail-visual img,
  .detail-visual:hover img,
  .gallery-item:hover,
  .feature-list li:hover {
    transform: none !important;
  }

  .detail-visual img,
  .detail-visual:hover img {
    transform: scale(.975) !important;
    filter: none !important;
  }
}

/* =========================================================
   BRAAQ GAME DETAIL PAGES V2.1 — HOW IT PLAYS + COMPRESSION
   Adds a compact gameplay-flow section, removes panel stretch,
   refines action rows, and softens sticky navigation on detail
   pages without changing the server-rendered page templates.
   ========================================================= */

/* ---------- detail-page vertical rhythm ---------- */

body:has(.detail-hero) .site-header {
  filter: drop-shadow(0 9px 18px #12372d0a);
}

body:has(.detail-hero) .nav-shell {
  box-shadow:
    0 8px 22px #12372d0b,
    0 2px 6px #8b62100a,
    inset 0 1px 0 #ffffff;
}

body:has(.detail-hero) main {
  padding-bottom: 0;
}

.detail-hero + .game-play-flow {
  margin-top: 26px;
}

.game-play-flow + .gallery-shell {
  margin-top: 26px;
}

/* ---------- HOW IT PLAYS ---------- */

.game-play-flow {
  --flow-accent: #0b654b;
  --flow-accent-soft: #e9f4ed;
  --flow-gold: #d4a039;

  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 27px 28px 30px;
  border: 1px solid #dfe7df;
  border-radius: 24px;
  background:
    radial-gradient(circle at 91% 10%, #e0ad3911 0 3%, transparent 28%),
    linear-gradient(#12372d05 1px, transparent 1px),
    linear-gradient(90deg, #12372d05 1px, transparent 1px),
    linear-gradient(145deg, #fffefa, #fbfdf8);
  background-size:
    auto,
    40px 40px,
    40px 40px,
    auto;
  box-shadow:
    0 15px 32px #12372d0d,
    0 3px 8px #8b611008,
    inset 0 1px 0 #ffffff;
}

.game-play-flow.warehouse {
  --flow-accent: #1c6f75;
  --flow-accent-soft: #e8f4f3;
}

.game-play-flow.forest {
  --flow-accent: #24734c;
  --flow-accent-soft: #eaf5e9;
}

.game-play-flow.orchard {
  --flow-accent: #8a6720;
  --flow-accent-soft: #fbf1d9;
}

.game-play-flow::before {
  content: "";
  position: absolute;
  left: 26px;
  top: 0;
  width: 92px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--flow-gold), transparent);
}

.game-play-flow::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -46px;
  bottom: -78px;
  width: 220px;
  height: 220px;
  border: 1px solid #d2a03918;
  border-radius: 50%;
  box-shadow:
    0 0 0 28px #d2a03906,
    0 0 0 58px #0b5d4503;
  pointer-events: none;
}

.game-play-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
}

.game-play-head > div:first-child {
  max-width: 660px;
}

.game-play-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 7px;
  color: #8b6417;
  font-size: .69rem;
  font-weight: 840;
  letter-spacing: .105em;
  text-transform: uppercase;
}

.game-play-kicker::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--flow-gold);
  box-shadow:
    0 0 0 4px #d4a03910,
    0 3px 7px #8c621315;
}

.game-play-head h2 {
  margin: 0;
  color: #173e32;
  font-size: clamp(1.55rem, 2.2vw, 2rem);
  line-height: 1.06;
  letter-spacing: -0.04em;
}

.game-play-head p {
  margin: 8px 0 0;
  color: #687970;
  line-height: 1.58;
  text-wrap: pretty;
}

.game-play-badge {
  flex: 0 0 auto;
  padding: 7px 10px;
  border: 1px solid #dde6df;
  border-radius: 999px;
  background: #fffefa;
  color: #597166;
  font-size: .7rem;
  font-weight: 760;
  box-shadow:
    0 4px 10px #12372d08,
    inset 0 1px 0 #ffffff;
}

.game-play-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 13px;
}

.game-play-steps::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 7%;
  right: 7%;
  top: 29px;
  height: 2px;
  border-radius: 999px;
  background:
    linear-gradient(
      90deg,
      transparent,
      #d6dfd9 8%,
      #d6dfd9 92%,
      transparent
    );
}

.play-step {
  position: relative;
  z-index: 1;
  min-width: 0;
  min-height: 164px;
  padding: 51px 15px 15px;
  overflow: hidden;
  border: 1px solid #e0e7e1;
  border-radius: 16px;
  background:
    radial-gradient(circle at 90% 5%, #e0ad390b, transparent 28%),
    linear-gradient(145deg, #ffffff, #f9fbf7);
  box-shadow:
    0 7px 15px #12372d09,
    inset 0 1px 0 #ffffff;
  transition:
    transform 220ms cubic-bezier(.22, 1, .36, 1),
    border-color 220ms ease,
    box-shadow 220ms ease;
}

.play-step::after {
  content: "";
  position: absolute;
  right: -22px;
  bottom: -25px;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--flow-accent-soft), transparent 68%);
  opacity: .8;
  pointer-events: none;
}

.play-step-index {
  position: absolute;
  left: 15px;
  top: 12px;
  display: grid;
  place-items: center;
  width: 35px;
  height: 35px;
  border: 1px solid #d4e0d7;
  border-radius: 11px;
  background:
    radial-gradient(circle at 30% 22%, #ffffff 0 12%, transparent 40%),
    linear-gradient(145deg, #f9fcf7, var(--flow-accent-soft));
  color: var(--flow-accent);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .025em;
  box-shadow:
    0 3px 0 #d4dfd6,
    0 7px 13px #12372d0d,
    inset 0 1px 0 #ffffff;
}

.play-step h3 {
  position: relative;
  z-index: 1;
  margin: 0;
  color: #194536;
  font-size: .9rem;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.play-step p {
  position: relative;
  z-index: 1;
  margin: 7px 0 0;
  color: #6b7a72;
  font-size: .78rem;
  line-height: 1.53;
  text-wrap: pretty;
}

@media (hover: hover) and (pointer: fine) {
  .play-step:hover {
    transform:
      perspective(700px)
      translateY(-4px)
      rotateX(1deg);
    border-color: #cbdad0;
    box-shadow:
      0 12px 21px #12372d0e,
      inset 0 1px 0 #ffffff;
  }

  .play-step:hover .play-step-index {
    transform: translateY(-2px) rotate(-3deg);
  }

  .play-step-index {
    transition: transform 220ms cubic-bezier(.22, 1, .36, 1);
  }
}

/* ---------- remove the large empty panel stretch ---------- */

.detail-panels {
  align-items: start;
}

.detail-panels > .panel {
  height: auto;
  align-self: start;
}

.detail-panels > .panel:first-child {
  min-height: 0;
}

.detail-panels > .panel:nth-child(2) {
  min-height: 0;
}

.feature-list {
  align-items: stretch;
}

.feature-list li {
  min-height: 112px;
}

/* ---------- tighter feature presentation ---------- */

.detail-panels > .panel:first-child {
  padding-bottom: 22px;
}

.detail-panels > .panel:first-child .feature-list {
  gap: 10px;
}

.feature-list li {
  padding: 13px 14px;
  grid-template-columns: 32px minmax(0, 1fr);
}

.feature-list .icon {
  width: 29px;
  height: 29px;
  padding: 6px;
}

.feature-list strong {
  font-size: .86rem;
}

.feature-list p {
  font-size: .76rem;
  line-height: 1.48;
}

/* ---------- facts panel as a compact information card ---------- */

.detail-panels > .panel:nth-child(2) {
  padding-bottom: 20px;
}

.detail-panels > .panel:nth-child(2) dl {
  margin-bottom: 14px;
}

.detail-panels > .panel:nth-child(2) dl > div {
  min-height: 42px;
  padding: 9px 11px;
}

.detail-panels > .panel:nth-child(2) br {
  display: none;
}

.detail-panels > .panel:nth-child(2) > .text-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  width: 100%;
  min-height: 43px;
  margin: 8px 0 0;
  padding: 9px 11px;
  border: 1px solid #e1e8e2;
  border-radius: 11px;
  background: linear-gradient(145deg, #fffefa, #f6faf6);
  color: #145d47;
  box-shadow:
    0 4px 9px #12372d08,
    inset 0 1px 0 #ffffff;
  transition:
    transform 190ms cubic-bezier(.22, 1, .36, 1),
    border-color 190ms ease,
    box-shadow 190ms ease,
    background 190ms ease;
}

.detail-panels > .panel:nth-child(2) > .text-link .icon {
  flex: 0 0 auto;
}

@media (hover: hover) and (pointer: fine) {
  .detail-panels > .panel:nth-child(2) > .text-link:hover {
    transform: translateY(-2px);
    border-color: #cbdad0;
    background: linear-gradient(145deg, #ffffff, #eff7f0);
    box-shadow:
      0 7px 13px #12372d0c,
      inset 0 1px 0 #ffffff;
  }
}

/* ---------- gallery handoff ---------- */

.gallery-shell {
  scroll-margin-top: 112px;
}

/* ---------- responsive flow ---------- */

@media (max-width: 1000px) {
  .game-play-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .game-play-steps::before {
    display: none;
  }

  .play-step {
    min-height: 150px;
  }
}

@media (max-width: 700px) {
  .game-play-flow {
    padding: 22px 17px 20px;
    border-radius: 20px;
  }

  .game-play-head {
    align-items: start;
    flex-direction: column;
    gap: 11px;
    margin-bottom: 17px;
  }

  .game-play-badge {
    align-self: flex-start;
  }

  .game-play-steps {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .play-step {
    min-height: 0;
    padding: 14px 14px 14px 58px;
  }

  .play-step-index {
    left: 13px;
    top: 13px;
  }

  .feature-list li {
    min-height: 0;
  }

  body:has(.detail-hero) .nav-shell {
    box-shadow:
      0 7px 18px #12372d09,
      inset 0 1px 0 #ffffff;
  }
}

@media (hover: none), (pointer: coarse) {
  .play-step:hover,
  .play-step:hover .play-step-index,
  .detail-panels > .panel:nth-child(2) > .text-link:hover {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .play-step,
  .play-step-index,
  .detail-panels > .panel:nth-child(2) > .text-link {
    transition: none !important;
  }

  .play-step:hover,
  .play-step:hover .play-step-index,
  .detail-panels > .panel:nth-child(2) > .text-link:hover {
    transform: none !important;
  }
}

/* =========================================================
   BRAAQ GAME DETAIL PAGES V2.2 — FINAL VISUAL BALANCE
   Finalizes section rhythm, related-game presentation,
   gallery handoff, CTA continuity and responsive balance.
   CSS-only refinement; no new runtime behavior.
   ========================================================= */

/* ---------- tighter overall detail-page rhythm ---------- */

body:has(.detail-hero) .container {
  --detail-section-gap: clamp(24px, 3.2vw, 38px);
}

body:has(.detail-hero) .detail-hero {
  margin-bottom: 0;
}

body:has(.detail-hero) .game-play-flow,
body:has(.detail-hero) .gallery-shell,
body:has(.detail-hero) .detail-panels,
body:has(.detail-hero) .related {
  scroll-margin-top: 116px;
}

/* ---------- hero final balance ---------- */

.detail-hero {
  box-shadow:
    0 18px 40px #12372d0d,
    0 4px 10px #8c611209,
    inset 0 1px 0 #ffffff;
}

.detail-copy .lead {
  max-width: 58ch;
}

.detail-copy .actions .button {
  min-height: 46px;
}

.detail-visual {
  box-shadow:
    0 23px 42px #12372d16,
    0 6px 13px #79541009,
    inset 0 1px 0 #ffffff;
}

.detail-visual img {
  box-shadow:
    0 19px 30px #12372d22,
    0 6px 11px #12372d14,
    inset 0 1px 0 #ffffff24,
    0 0 0 1px #ffffff2a;
}

/* ---------- HOW IT PLAYS final balance ---------- */

.game-play-flow {
  margin-top: var(--detail-section-gap);
  box-shadow:
    0 13px 28px #12372d0c,
    0 3px 7px #8b611007,
    inset 0 1px 0 #ffffff;
}

.game-play-head {
  margin-bottom: 19px;
}

.game-play-head p {
  max-width: 64ch;
}

.play-step {
  min-height: 156px;
  box-shadow:
    0 6px 13px #12372d08,
    inset 0 1px 0 #ffffff;
}

@media (hover: hover) and (pointer: fine) {
  .play-step:hover {
    transform:
      perspective(720px)
      translateY(-3px)
      rotateX(.8deg);
    box-shadow:
      0 10px 18px #12372d0d,
      inset 0 1px 0 #ffffff;
  }
}

/* ---------- gallery final balance ---------- */

.gallery-shell {
  margin-top: var(--detail-section-gap);
  box-shadow:
    0 14px 30px #12372d0d,
    0 3px 7px #7c551009,
    inset 0 1px 0 #ffffff;
}

.gallery-head {
  align-items: center;
}

.gallery-head h2 {
  position: relative;
  width: fit-content;
}

.gallery-head h2::after {
  content: "";
  display: block;
  width: 44px;
  height: 2px;
  margin-top: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, #d3a039, transparent);
}

.gallery-track {
  scroll-padding-inline: 2px;
}

.gallery-item {
  box-shadow:
    0 7px 15px #12372d0a,
    inset 0 1px 0 #ffffff;
}

.gallery-item figcaption {
  font-size: .74rem;
  font-weight: 700;
}

.media-note {
  font-size: .75rem;
}

/* ---------- feature/facts handoff ---------- */

.detail-panels {
  margin-top: var(--detail-section-gap);
  gap: 20px;
}

.detail-panels > .panel {
  box-shadow:
    0 12px 26px #12372d0c,
    0 3px 7px #865c1107,
    inset 0 1px 0 #ffffff;
}

.detail-panels > .panel:first-child,
.detail-panels > .panel:nth-child(2) {
  align-self: start;
}

.feature-list li {
  border-color: #e1e7e1;
}

.detail-panels dl > div {
  transition:
    transform 170ms cubic-bezier(.22, 1, .36, 1),
    border-color 170ms ease,
    background 170ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .detail-panels dl > div:hover {
    transform: translateX(2px);
    border-color: #d4dfd7;
    background: #f8fbf8;
  }
}

/* =========================================================
   RELATED GAMES — PREMIUM END-CAP
   ========================================================= */

.related {
  position: relative;
  isolation: isolate;
  margin-top: clamp(34px, 5vw, 56px);
  padding: 28px;
  overflow: hidden;
  border: 1px solid #dfe7df;
  border-radius: 25px;
  background:
    radial-gradient(circle at 92% 8%, #e0ad3910, transparent 26%),
    radial-gradient(circle at 5% 92%, #0b5d4508, transparent 28%),
    linear-gradient(#12372d05 1px, transparent 1px),
    linear-gradient(90deg, #12372d05 1px, transparent 1px),
    linear-gradient(145deg, #fffefa, #f9fcf7);
  background-size:
    auto,
    auto,
    42px 42px,
    42px 42px,
    auto;
  box-shadow:
    0 16px 34px #12372d0e,
    0 3px 8px #80581208,
    inset 0 1px 0 #ffffff;
}

.related::before {
  content: "";
  position: absolute;
  left: 28px;
  top: 0;
  width: 94px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, #d3a039, transparent);
}

.related::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -74px;
  bottom: -104px;
  width: 230px;
  height: 230px;
  border: 1px solid #d3a03916;
  border-radius: 50%;
  box-shadow:
    0 0 0 34px #d3a03905,
    0 0 0 68px #0b5d4503;
  pointer-events: none;
}

.related .section-heading {
  align-items: end;
  margin-bottom: 20px;
}

.related .section-heading h2,
.related .section-heading .eyebrow {
  color: #174236;
}

.related .section-heading .text-link {
  flex: 0 0 auto;
}

.related .game-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.related .game-card {
  min-height: 100%;
  border-color: #dce5de;
  box-shadow:
    0 9px 19px #12372d0c,
    inset 0 1px 0 #ffffff;
}

.related .game-art {
  min-height: 300px;
}

.related .game-art img {
  max-height: 280px;
}

.related .game-copy {
  padding-top: 18px;
  padding-bottom: 18px;
}

.related .game-copy h3 {
  font-size: clamp(1.03rem, 1.35vw, 1.2rem);
}

.related .game-copy p {
  max-width: 48ch;
}

@media (hover: hover) and (pointer: fine) {
  .related .game-card:hover {
    border-color: #c9d8cf;
    box-shadow:
      0 15px 27px #12372d12,
      inset 0 1px 0 #ffffff;
  }
}

/* ---------- CTA after detail content ---------- */

body:has(.detail-hero) .cta-band {
  margin-top: clamp(30px, 4vw, 46px);
  border-color: #ffffff20;
  box-shadow:
    0 14px 30px #12372d12,
    inset 0 1px 0 #ffffff15;
}

body:has(.detail-hero) .cta-band::before {
  opacity: .72;
}

/* ---------- dialog final polish ---------- */

#gallery-dialog {
  box-shadow:
    0 24px 64px #071e1848,
    inset 0 1px 0 #ffffff;
}

#gallery-dialog .dialog-top strong {
  color: #173f32;
}

#gallery-caption {
  color: #5d7167;
}

/* ---------- responsive final balance ---------- */

@media (max-width: 900px) {
  .related {
    padding: 23px;
  }

  .related .game-art {
    min-height: 275px;
  }

  .related .game-art img {
    max-height: 255px;
  }
}

@media (max-width: 700px) {
  body:has(.detail-hero) .container {
    --detail-section-gap: 20px;
  }

  .game-play-flow,
  .gallery-shell,
  .detail-panels {
    margin-top: var(--detail-section-gap);
  }

  .related {
    margin-top: 28px;
    padding: 18px 14px;
    border-radius: 20px;
  }

  .related .section-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .related .game-grid {
    grid-template-columns: 1fr;
    gap: 13px;
  }

  .related .game-art {
    min-height: 260px;
  }

  .related .game-art img {
    max-height: 240px;
  }

  body:has(.detail-hero) .cta-band {
    margin-top: 26px;
  }
}

@media (hover: none), (pointer: coarse) {
  .detail-panels dl > div:hover,
  .related .game-card:hover {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .detail-panels dl > div {
    transition: none !important;
  }

  .detail-panels dl > div:hover {
    transform: none !important;
  }
}

/* =========================================================
   BRAAQ ABOUT PAGE V2 — STUDIO IDENTITY + PROCESS SHOWCASE
   Premium studio hero, authentic game-art collage, values,
   connected process timeline, and responsive low-cost depth.
   ========================================================= */

/* ---------- About page rhythm ---------- */

body:has(.about-hero) .site-header {
  filter: drop-shadow(0 9px 18px #12372d09);
}

body:has(.about-hero) .nav-shell {
  box-shadow:
    0 8px 22px #12372d0b,
    0 2px 6px #8b621009,
    inset 0 1px 0 #ffffff;
}

body:has(.about-hero) main > .container {
  --about-section-gap: clamp(34px, 5vw, 58px);
}

body:has(.about-hero) main > .container > section:not(.about-hero):not(.cta-band) {
  margin-top: var(--about-section-gap);
}

/* ---------- premium About hero ---------- */

.about-hero {
  --about-rx: 0deg;
  --about-ry: 0deg;
  --about-x: 0px;
  --about-y: 0px;

  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(370px, .98fr);
  gap: clamp(38px, 5vw, 70px);
  align-items: center;
  min-height: 520px;
  margin-top: 22px;
  padding: clamp(38px, 5vw, 62px);
  overflow: hidden;
  border: 1px solid #e2e7df;
  border-radius: 30px;
  background:
    radial-gradient(circle at 84% 17%, #e6b64a13 0 5%, transparent 29%),
    radial-gradient(circle at 11% 88%, #0b5d4509 0 4%, transparent 30%),
    linear-gradient(#12372d04 1px, transparent 1px),
    linear-gradient(90deg, #12372d04 1px, transparent 1px),
    linear-gradient(135deg, #fffefa, #fbf9f2 58%, #f4f8f1);
  background-size:
    auto,
    auto,
    42px 42px,
    42px 42px,
    auto;
  box-shadow:
    0 19px 42px #12372d0e,
    0 4px 11px #8b611209,
    inset 0 1px 0 #ffffff;
  perspective: 1450px;
}

.about-hero::before,
.about-hero::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.about-hero::before {
  z-index: -1;
  right: -90px;
  top: -115px;
  width: 350px;
  height: 350px;
  border: 1px solid #d4a44020;
  border-radius: 50%;
  box-shadow:
    0 0 0 38px #d4a44007,
    0 0 0 78px #0b5d4503;
}

.about-hero::after {
  z-index: 1;
  left: 27px;
  bottom: 25px;
  width: 64px;
  height: 29px;
  border-left: 1px solid #d0a13c4f;
  border-bottom: 1px solid #d0a13c4f;
  border-radius: 0 0 0 8px;
}

.about-hero > div:first-child {
  position: relative;
  z-index: 3;
  max-width: 680px;
  transform:
    translate3d(
      calc(var(--about-x) * -.18),
      calc(var(--about-y) * -.15),
      24px
    );
  transform-style: preserve-3d;
  transition: transform 320ms cubic-bezier(.22, 1, .36, 1);
}

.about-hero .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-bottom: 4px;
  padding: 8px 12px;
  border: 1px solid #e6dfce;
  border-radius: 999px;
  background: #fffefaeb;
  color: #17604b;
  box-shadow:
    0 6px 15px #12372d08,
    inset 0 1px 0 #ffffff;
}

.about-hero h1 {
  position: relative;
  width: fit-content;
  max-width: 12ch;
  margin: 18px 0 17px;
  color: #143a2f;
  font-size: clamp(2.8rem, 5vw, 4.8rem);
  line-height: .98;
  letter-spacing: -0.057em;
  text-wrap: balance;
  text-shadow: 0 12px 24px #12372d0a;
}

.about-hero h1 span {
  color: #a57215;
  background: linear-gradient(180deg, #b37c14, #8c6416);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.about-hero h1::after {
  content: "";
  display: block;
  width: min(118px, 43%);
  height: 3px;
  margin-top: 13px;
  border-radius: 999px;
  background: linear-gradient(90deg, #c99020, #e2b550, transparent);
  box-shadow: 0 3px 8px #c9921f1a;
}

.about-hero .lead {
  max-width: 55ch;
  color: #3f5c50;
  font-size: clamp(1.04rem, 1.3vw, 1.16rem);
  line-height: 1.65;
  text-wrap: balance;
}

.about-hero p + p {
  max-width: 64ch;
  margin-top: 15px;
  color: #66776e;
  line-height: 1.72;
  text-wrap: pretty;
}

.about-hero .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 11px;
  margin-top: 27px;
}

.about-hero .actions .button {
  min-height: 47px;
}

/* ---------- authentic game-art collage ---------- */

.about-media {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: 13px;
  min-height: 390px;
  padding: clamp(28px, 3.5vw, 40px);
  overflow: hidden;
  border: 1px solid #ffffff;
  border-radius: 28px;
  background:
    radial-gradient(circle at 50% 32%, #fff6d5 0 12%, transparent 44%),
    radial-gradient(circle at 84% 82%, #0b5d4508, transparent 30%),
    linear-gradient(145deg, #e9f0dc, #f5edd8);
  box-shadow:
    0 25px 46px #12372d17,
    0 7px 15px #79541009,
    inset 0 1px 0 #ffffff;
  transform:
    perspective(1150px)
    rotateX(var(--about-rx))
    rotateY(var(--about-ry))
    translate3d(
      calc(var(--about-x) * .32),
      calc(var(--about-y) * .24),
      0
    );
  transform-style: preserve-3d;
  transition:
    transform 340ms cubic-bezier(.22, 1, .36, 1),
    box-shadow 340ms ease;
}

.about-media::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(#12372d05 1px, transparent 1px),
    linear-gradient(90deg, #12372d05 1px, transparent 1px),
    linear-gradient(125deg, #ffffff68, transparent 30%, transparent 74%, #12372d08);
  background-size:
    36px 36px,
    36px 36px,
    auto;
  opacity: .44;
}

.about-media::after {
  content: "";
  position: absolute;
  z-index: 2;
  left: 14%;
  right: 14%;
  bottom: 24px;
  height: 30px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(
    ellipse,
    #12372d22 0%,
    #12372d0f 48%,
    transparent 75%
  );
  transform: translateZ(8px);
}

.about-media img {
  position: relative;
  z-index: 4;
  width: 100%;
  max-width: 160px;
  max-height: 310px;
  justify-self: center;
  object-fit: cover;
  border: 3px solid #123f32;
  border-radius: 18px;
  background: #123f32;
  box-shadow:
    0 18px 28px #12372d22,
    0 6px 11px #12372d14,
    inset 0 1px 0 #ffffff20;
  transition:
    transform 340ms cubic-bezier(.22, 1, .36, 1),
    filter 260ms ease,
    box-shadow 260ms ease;
}

.about-media img:nth-child(1) {
  transform:
    translate3d(
      calc(var(--about-x) * -.30),
      calc(var(--about-y) * -.18 + 15px),
      25px
    )
    rotate(-6deg)
    scale(.93);
}

.about-media img:nth-child(2) {
  z-index: 5;
  transform:
    translate3d(
      calc(var(--about-x) * .18),
      calc(var(--about-y) * .14 - 22px),
      52px
    )
    scale(1.06);
}

.about-media img:nth-child(3) {
  transform:
    translate3d(
      calc(var(--about-x) * .34),
      calc(var(--about-y) * -.12 + 17px),
      28px
    )
    rotate(6deg)
    scale(.93);
}

@media (hover: hover) and (pointer: fine) {
  .about-media:hover {
    box-shadow:
      0 29px 52px #12372d19,
      0 8px 17px #7954100a,
      inset 0 1px 0 #ffffff;
  }

  .about-media:hover img:nth-child(1) {
    transform:
      translate3d(
        calc(var(--about-x) * -.34 - 2px),
        calc(var(--about-y) * -.20 + 11px),
        30px
      )
      rotate(-7deg)
      scale(.945);
  }

  .about-media:hover img:nth-child(2) {
    transform:
      translate3d(
        calc(var(--about-x) * .21),
        calc(var(--about-y) * .16 - 27px),
        58px
      )
      scale(1.075);
  }

  .about-media:hover img:nth-child(3) {
    transform:
      translate3d(
        calc(var(--about-x) * .37 + 2px),
        calc(var(--about-y) * -.14 + 13px),
        32px
      )
      rotate(7deg)
      scale(.945);
  }
}

/* ---------- section headings ---------- */

body:has(.about-hero) .section-heading {
  align-items: end;
  margin-bottom: 19px;
}

body:has(.about-hero) .section-heading .eyebrow {
  color: #17604b;
  letter-spacing: .11em;
}

body:has(.about-hero) .section-heading h2 {
  color: #173e32;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

/* ---------- values ---------- */

body:has(.about-hero) .values-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

body:has(.about-hero) .value-card {
  position: relative;
  isolation: isolate;
  min-height: 210px;
  padding: 24px 20px 21px;
  overflow: hidden;
  border: 1px solid #dfe7df;
  border-radius: 18px;
  background:
    radial-gradient(circle at 90% 8%, #e4b3440b, transparent 27%),
    linear-gradient(145deg, #ffffff, #fffcf7);
  box-shadow:
    0 10px 22px #12372d0d,
    inset 0 1px 0 #ffffff;
  transition:
    transform 220ms cubic-bezier(.22, 1, .36, 1),
    border-color 220ms ease,
    box-shadow 220ms ease;
}

body:has(.about-hero) .value-card::after {
  content: "";
  position: absolute;
  right: -24px;
  bottom: -30px;
  width: 85px;
  height: 85px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, #d9ac3f10, transparent 69%);
}

body:has(.about-hero) .value-card .icon-disc {
  margin-bottom: 16px;
}

body:has(.about-hero) .value-card h3 {
  margin-bottom: 8px;
  color: #194536;
  font-size: 1rem;
  letter-spacing: -0.025em;
}

body:has(.about-hero) .value-card p {
  color: #6a7971;
  font-size: .79rem;
  line-height: 1.55;
}

@media (hover: hover) and (pointer: fine) {
  body:has(.about-hero) .value-card:hover {
    transform:
      perspective(800px)
      translateY(-4px)
      rotateX(.8deg);
    border-color: #cbd9d0;
    box-shadow:
      0 14px 25px #12372d11,
      inset 0 1px 0 #ffffff;
  }
}

/* ---------- connected process timeline ---------- */

body:has(.about-hero) .process {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding: 28px;
  overflow: hidden;
  border: 1px solid #dfe7df;
  border-radius: 24px;
  background:
    radial-gradient(circle at 92% 8%, #e0ad3910, transparent 27%),
    linear-gradient(#12372d04 1px, transparent 1px),
    linear-gradient(90deg, #12372d04 1px, transparent 1px),
    linear-gradient(145deg, #fffefa, #fafcf8);
  background-size:
    auto,
    40px 40px,
    40px 40px,
    auto;
  box-shadow:
    0 14px 30px #12372d0d,
    0 3px 7px #845b1007,
    inset 0 1px 0 #ffffff;
}

body:has(.about-hero) .process::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 9%;
  right: 9%;
  top: 50px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    transparent,
    #d4dfd7 8%,
    #d4dfd7 92%,
    transparent
  );
}

body:has(.about-hero) .process::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -70px;
  bottom: -105px;
  width: 225px;
  height: 225px;
  border: 1px solid #d3a03916;
  border-radius: 50%;
  box-shadow:
    0 0 0 32px #d3a03905,
    0 0 0 65px #0b5d4503;
}

body:has(.about-hero) .process article {
  position: relative;
  z-index: 1;
  min-height: 174px;
  padding: 51px 16px 16px;
  overflow: hidden;
  border: 1px solid #e1e8e2;
  border-radius: 16px;
  background:
    radial-gradient(circle at 89% 9%, #dca8380b, transparent 29%),
    linear-gradient(145deg, #ffffff, #f9fbf7);
  box-shadow:
    0 7px 15px #12372d09,
    inset 0 1px 0 #ffffff;
  transition:
    transform 220ms cubic-bezier(.22, 1, .36, 1),
    border-color 220ms ease,
    box-shadow 220ms ease;
}

body:has(.about-hero) .process article > span {
  position: absolute;
  left: 15px;
  top: 12px;
  display: grid;
  place-items: center;
  width: 35px;
  height: 35px;
  border: 1px solid #d5e1d8;
  border-radius: 11px;
  background:
    radial-gradient(circle at 31% 22%, #ffffff 0 12%, transparent 41%),
    linear-gradient(145deg, #f9fcf7, #e9f3eb);
  color: #17604b;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .025em;
  box-shadow:
    0 3px 0 #d4dfd6,
    0 7px 13px #12372d0c,
    inset 0 1px 0 #ffffff;
  transition: transform 220ms cubic-bezier(.22, 1, .36, 1);
}

body:has(.about-hero) .process article h3 {
  margin: 0;
  color: #194536;
  font-size: .92rem;
  line-height: 1.3;
  letter-spacing: -0.022em;
}

body:has(.about-hero) .process article p {
  margin-top: 7px;
  color: #6b7a72;
  font-size: .77rem;
  line-height: 1.54;
  text-wrap: pretty;
}

@media (hover: hover) and (pointer: fine) {
  body:has(.about-hero) .process article:hover {
    transform:
      perspective(700px)
      translateY(-4px)
      rotateX(.8deg);
    border-color: #cad9cf;
    box-shadow:
      0 12px 21px #12372d0e,
      inset 0 1px 0 #ffffff;
  }

  body:has(.about-hero) .process article:hover > span {
    transform: translateY(-2px) rotate(-3deg);
  }
}

/* ---------- About CTA ---------- */

body:has(.about-hero) .cta-band {
  margin-top: clamp(34px, 5vw, 54px);
  box-shadow:
    0 15px 31px #12372d12,
    inset 0 1px 0 #ffffff15;
}

/* ---------- responsive ---------- */

@media (max-width: 1050px) {
  .about-hero {
    grid-template-columns: minmax(0, 1fr) minmax(320px, .84fr);
    gap: 32px;
    padding: 40px;
  }

  .about-hero h1 {
    font-size: clamp(2.55rem, 5vw, 3.85rem);
  }

  .about-media {
    min-height: 355px;
    padding: 30px 24px;
  }

  body:has(.about-hero) .values-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body:has(.about-hero) .process {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body:has(.about-hero) .process::before {
    display: none;
  }
}

@media (max-width: 850px) {
  .about-hero {
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 32px;
  }

  .about-hero > div:first-child {
    transform: none;
  }

  .about-media {
    width: min(100%, 590px);
    min-height: 355px;
    margin-inline: auto;
  }
}

@media (max-width: 600px) {
  body:has(.about-hero) main > .container {
    --about-section-gap: 28px;
  }

  .about-hero {
    margin-top: 10px;
    padding: 23px 18px 25px;
    gap: 25px;
    border-radius: 22px;
  }

  .about-hero::before {
    width: 235px;
    height: 235px;
    right: -108px;
    top: -105px;
  }

  .about-hero h1 {
    max-width: 100%;
    font-size: clamp(2.35rem, 12vw, 3.15rem);
  }

  .about-hero .actions {
    align-items: stretch;
    flex-direction: column;
  }

  .about-hero .actions .button {
    width: 100%;
  }

  .about-media {
    min-height: 290px;
    padding: 23px 15px;
    border-radius: 21px;
    transform: none !important;
  }

  .about-media img {
    max-width: 118px;
    max-height: 235px;
    border-width: 2px;
    border-radius: 14px;
  }

  .about-media img:nth-child(1) {
    transform: translateY(10px) rotate(-5deg) scale(.92);
  }

  .about-media img:nth-child(2) {
    transform: translateY(-13px) scale(1.03);
  }

  .about-media img:nth-child(3) {
    transform: translateY(11px) rotate(5deg) scale(.92);
  }

  body:has(.about-hero) .values-grid {
    grid-template-columns: 1fr;
    gap: 11px;
  }

  body:has(.about-hero) .value-card {
    min-height: 0;
    padding: 19px 16px;
  }

  body:has(.about-hero) .process {
    grid-template-columns: 1fr;
    gap: 9px;
    padding: 18px 14px;
    border-radius: 20px;
  }

  body:has(.about-hero) .process article {
    min-height: 0;
    padding: 14px 14px 14px 59px;
  }

  body:has(.about-hero) .process article > span {
    left: 13px;
    top: 13px;
  }

  body:has(.about-hero) .cta-band {
    margin-top: 28px;
  }
}

@media (hover: none), (pointer: coarse) {
  .about-hero > div:first-child,
  .about-media,
  .about-media:hover {
    transform: none;
  }

  body:has(.about-hero) .value-card:hover,
  body:has(.about-hero) .process article:hover,
  body:has(.about-hero) .process article:hover > span {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-hero > div:first-child,
  .about-media,
  .about-media img,
  body:has(.about-hero) .value-card,
  body:has(.about-hero) .process article,
  body:has(.about-hero) .process article > span {
    transition: none !important;
  }

  .about-hero > div:first-child,
  .about-media,
  .about-media:hover,
  body:has(.about-hero) .value-card:hover,
  body:has(.about-hero) .process article:hover,
  body:has(.about-hero) .process article:hover > span {
    transform: none !important;
  }

  .about-media img:nth-child(1) {
    transform: translateY(12px) rotate(-5deg) scale(.93) !important;
  }

  .about-media img:nth-child(2) {
    transform: translateY(-18px) scale(1.05) !important;
  }

  .about-media img:nth-child(3) {
    transform: translateY(12px) rotate(5deg) scale(.93) !important;
  }
}

/* =========================================================
   BRAAQ ABOUT PAGE V2.1 — COMPACT + FINAL POLISH
   Final density pass for About hero, Values, Process and
   Business Information. No new layout architecture or JS.
   ========================================================= */

/* ---------- tighter section rhythm ---------- */

body:has(.about-hero) main > .container {
  --about-section-gap: clamp(28px, 4vw, 44px);
}

body:has(.about-hero) main > .container > section:not(.about-hero):not(.cta-band) {
  margin-top: var(--about-section-gap);
}

body:has(.about-hero) .section-heading {
  margin-bottom: 15px;
}

body:has(.about-hero) .section-heading h2 {
  line-height: 1.06;
}

/* ---------- About hero micro-polish ---------- */

.about-hero {
  min-height: 500px;
  gap: clamp(34px, 4.5vw, 60px);
  padding: clamp(36px, 4.6vw, 56px);
  box-shadow:
    0 17px 37px #12372d0c,
    0 4px 10px #8b611208,
    inset 0 1px 0 #ffffff;
}

.about-hero h1 {
  line-height: .94;
}

.about-hero .lead {
  max-width: 50ch;
  line-height: 1.58;
}

.about-hero p + p {
  max-width: 58ch;
  line-height: 1.64;
}

.about-media {
  min-height: 380px;
  padding: clamp(25px, 3.2vw, 36px);
  box-shadow:
    0 21px 39px #12372d14,
    0 6px 13px #79541008,
    inset 0 1px 0 #ffffff;
}

.about-media img {
  max-width: 166px;
  max-height: 320px;
  box-shadow:
    0 16px 25px #12372d1f,
    0 5px 10px #12372d12,
    inset 0 1px 0 #ffffff20;
}

.about-media img:nth-child(1) {
  transform:
    translate3d(
      calc(var(--about-x) * -.30),
      calc(var(--about-y) * -.18 + 13px),
      25px
    )
    rotate(-6deg)
    scale(.95);
}

.about-media img:nth-child(2) {
  transform:
    translate3d(
      calc(var(--about-x) * .18),
      calc(var(--about-y) * .14 - 22px),
      52px
    )
    scale(1.10);
}

.about-media img:nth-child(3) {
  transform:
    translate3d(
      calc(var(--about-x) * .34),
      calc(var(--about-y) * -.12 + 15px),
      28px
    )
    rotate(6deg)
    scale(.95);
}

@media (hover: hover) and (pointer: fine) {
  .about-media:hover {
    box-shadow:
      0 25px 45px #12372d16,
      0 7px 14px #79541009,
      inset 0 1px 0 #ffffff;
  }

  .about-media:hover img:nth-child(1) {
    transform:
      translate3d(
        calc(var(--about-x) * -.34 - 2px),
        calc(var(--about-y) * -.20 + 10px),
        30px
      )
      rotate(-7deg)
      scale(.96);
  }

  .about-media:hover img:nth-child(2) {
    transform:
      translate3d(
        calc(var(--about-x) * .21),
        calc(var(--about-y) * .16 - 25px),
        58px
      )
      scale(1.115);
  }

  .about-media:hover img:nth-child(3) {
    transform:
      translate3d(
        calc(var(--about-x) * .37 + 2px),
        calc(var(--about-y) * -.14 + 12px),
        32px
      )
      rotate(7deg)
      scale(.96);
  }
}

/* ---------- Values: compact premium cards ---------- */

body:has(.about-hero) .values-grid {
  gap: 13px;
}

body:has(.about-hero) .value-card {
  min-height: 148px;
  padding: 18px 18px 17px;
  border-radius: 16px;
  box-shadow:
    0 8px 18px #12372d0b,
    inset 0 1px 0 #ffffff;
}

body:has(.about-hero) .value-card .icon-disc {
  width: 47px;
  height: 47px;
  margin-bottom: 11px;
}

body:has(.about-hero) .value-card h3 {
  margin-bottom: 5px;
  font-size: .95rem;
}

body:has(.about-hero) .value-card p {
  max-width: 31ch;
  font-size: .75rem;
  line-height: 1.46;
}

@media (hover: hover) and (pointer: fine) {
  body:has(.about-hero) .value-card:hover {
    transform:
      perspective(800px)
      translateY(-3px)
      rotateX(.65deg);
    box-shadow:
      0 12px 21px #12372d0f,
      inset 0 1px 0 #ffffff;
  }
}

/* ---------- Process: compact connected timeline ---------- */

body:has(.about-hero) .process {
  gap: 11px;
  padding: 22px;
  border-radius: 22px;
  box-shadow:
    0 12px 26px #12372d0c,
    0 3px 7px #845b1006,
    inset 0 1px 0 #ffffff;
}

body:has(.about-hero) .process::before {
  left: 8%;
  right: 8%;
  top: 43px;
}

body:has(.about-hero) .process article {
  min-height: 118px;
  padding: 45px 14px 13px;
  border-radius: 14px;
  box-shadow:
    0 6px 13px #12372d08,
    inset 0 1px 0 #ffffff;
}

body:has(.about-hero) .process article > span {
  left: 13px;
  top: 10px;
  width: 31px;
  height: 31px;
  border-radius: 10px;
  box-shadow:
    0 2px 0 #d5dfd7,
    0 5px 9px #12372d0a,
    inset 0 1px 0 #ffffff;
}

body:has(.about-hero) .process article h3 {
  font-size: .86rem;
}

body:has(.about-hero) .process article p {
  margin-top: 5px;
  font-size: .72rem;
  line-height: 1.44;
}

@media (hover: hover) and (pointer: fine) {
  body:has(.about-hero) .process article:hover {
    transform:
      perspective(700px)
      translateY(-3px)
      rotateX(.65deg);
    box-shadow:
      0 10px 17px #12372d0c,
      inset 0 1px 0 #ffffff;
  }

  body:has(.about-hero) .process article:hover > span {
    transform: translateY(-1px) rotate(-2deg);
  }
}

/* ---------- Business Information: compact factual cards ---------- */

body:has(.about-hero) .business-details {
  gap: 12px 14px;
}

body:has(.about-hero) .business-details > div {
  min-height: 78px;
  padding: 14px 18px;
  border-color: #e2e7df;
  border-radius: 15px;
  background:
    radial-gradient(circle at 94% 8%, #e0ad3908, transparent 26%),
    linear-gradient(145deg, #fffefa, #fff9ee);
  box-shadow:
    0 7px 15px #12372d09,
    inset 0 1px 0 #ffffff;
  transition:
    transform 190ms cubic-bezier(.22, 1, .36, 1),
    border-color 190ms ease,
    box-shadow 190ms ease;
}

body:has(.about-hero) .business-details dt {
  margin: 0;
  color: #996b16;
  font-size: .64rem;
  font-weight: 820;
  letter-spacing: .09em;
}

body:has(.about-hero) .business-details dd {
  margin-top: 5px;
  color: #173f32;
  font-size: .91rem;
  font-weight: 710;
  line-height: 1.42;
}

@media (hover: hover) and (pointer: fine) {
  body:has(.about-hero) .business-details > div:hover {
    transform: translateY(-2px);
    border-color: #d1ddd5;
    box-shadow:
      0 10px 18px #12372d0c,
      inset 0 1px 0 #ffffff;
  }
}

/* ---------- About CTA final rhythm ---------- */

body:has(.about-hero) .cta-band {
  margin-top: clamp(28px, 4vw, 42px);
}

/* ---------- responsive compactness ---------- */

@media (max-width: 1050px) {
  .about-hero {
    min-height: 0;
  }

  body:has(.about-hero) .value-card {
    min-height: 140px;
  }

  body:has(.about-hero) .process article {
    min-height: 108px;
  }
}

@media (max-width: 850px) {
  .about-hero {
    padding: 31px;
  }

  .about-media {
    min-height: 340px;
  }

  body:has(.about-hero) .values-grid {
    gap: 11px;
  }

  body:has(.about-hero) .business-details > div {
    min-height: 74px;
  }
}

@media (max-width: 600px) {
  body:has(.about-hero) main > .container {
    --about-section-gap: 24px;
  }

  .about-hero {
    padding: 22px 18px 23px;
  }

  .about-hero .lead,
  .about-hero p + p {
    max-width: 100%;
  }

  .about-media {
    min-height: 275px;
    padding: 20px 13px;
  }

  .about-media img {
    max-width: 112px;
    max-height: 225px;
  }

  .about-media img:nth-child(1) {
    transform: translateY(8px) rotate(-5deg) scale(.93);
  }

  .about-media img:nth-child(2) {
    transform: translateY(-12px) scale(1.055);
  }

  .about-media img:nth-child(3) {
    transform: translateY(9px) rotate(5deg) scale(.93);
  }

  body:has(.about-hero) .value-card {
    min-height: 0;
    padding: 16px 15px;
  }

  body:has(.about-hero) .value-card .icon-disc {
    width: 44px;
    height: 44px;
    margin-bottom: 9px;
  }

  body:has(.about-hero) .process {
    padding: 15px 12px;
  }

  body:has(.about-hero) .process article {
    min-height: 0;
    padding: 12px 12px 12px 54px;
  }

  body:has(.about-hero) .process article > span {
    left: 11px;
    top: 11px;
  }

  body:has(.about-hero) .business-details {
    gap: 9px;
  }

  body:has(.about-hero) .business-details > div {
    min-height: 0;
    padding: 13px 15px;
  }

  body:has(.about-hero) .business-details dd {
    font-size: .86rem;
  }

  body:has(.about-hero) .cta-band {
    margin-top: 24px;
  }
}

@media (hover: none), (pointer: coarse) {
  body:has(.about-hero) .value-card:hover,
  body:has(.about-hero) .process article:hover,
  body:has(.about-hero) .business-details > div:hover {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  body:has(.about-hero) .value-card,
  body:has(.about-hero) .process article,
  body:has(.about-hero) .process article > span,
  body:has(.about-hero) .business-details > div {
    transition: none !important;
  }

  body:has(.about-hero) .value-card:hover,
  body:has(.about-hero) .process article:hover,
  body:has(.about-hero) .process article:hover > span,
  body:has(.about-hero) .business-details > div:hover {
    transform: none !important;
  }
}

/* =========================================================
   BRAAQ SUPPORT PAGE V2 — HELP CENTER SHOWCASE
   Stronger support intro, premium search, quick actions,
   game-specific help cards and refined searchable FAQ.
   ========================================================= */

/* ---------- Support page rhythm ---------- */

body:has(#faq-search) .site-header {
  filter: drop-shadow(0 9px 18px #12372d08);
}

body:has(#faq-search) .nav-shell {
  box-shadow:
    0 8px 22px #12372d0a,
    0 2px 6px #8b621008,
    inset 0 1px 0 #ffffff;
}

body:has(#faq-search) main > .container {
  --support-gap: clamp(26px, 4vw, 44px);
}

/* ---------- Intro / hero ---------- */

body:has(#faq-search) .page-intro {
  position: relative;
  isolation: isolate;
  min-height: 310px;
  margin-top: 22px;
  padding: clamp(34px, 4.7vw, 54px);
  overflow: hidden;
  border: 1px solid #e2e7df;
  border-radius: 28px;
  background:
    radial-gradient(circle at 86% 18%, #e6b64a12 0 5%, transparent 28%),
    radial-gradient(circle at 10% 88%, #0b5d4508 0 4%, transparent 29%),
    linear-gradient(#12372d04 1px, transparent 1px),
    linear-gradient(90deg, #12372d04 1px, transparent 1px),
    linear-gradient(135deg, #fffefa, #fbf9f2 58%, #f4f8f1);
  background-size:
    auto,
    auto,
    42px 42px,
    42px 42px,
    auto;
  box-shadow:
    0 18px 39px #12372d0d,
    0 4px 10px #8b611208,
    inset 0 1px 0 #ffffff;
}

body:has(#faq-search) .page-intro::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: -90px;
  top: -105px;
  width: 330px;
  height: 330px;
  border: 1px solid #d4a44020;
  border-radius: 50%;
  box-shadow:
    0 0 0 36px #d4a44007,
    0 0 0 74px #0b5d4503;
  pointer-events: none;
}

body:has(#faq-search) .page-intro::after {
  content: "";
  position: absolute;
  left: 28px;
  bottom: 24px;
  width: 64px;
  height: 28px;
  border-left: 1px solid #d0a13c4f;
  border-bottom: 1px solid #d0a13c4f;
  border-radius: 0 0 0 8px;
  pointer-events: none;
}

body:has(#faq-search) .page-intro > div:first-child {
  max-width: min(720px, 72%);
}

body:has(#faq-search) .page-intro .eyebrow {
  display: inline-flex;
  width: fit-content;
  padding: 8px 12px;
  border: 1px solid #e6dfce;
  border-radius: 999px;
  background: #fffefaeb;
  box-shadow:
    0 6px 15px #12372d08,
    inset 0 1px 0 #ffffff;
}

body:has(#faq-search) .page-intro h1 {
  margin-top: 16px;
  color: #143a2f;
  font-size: clamp(2.7rem, 5vw, 4.5rem);
  line-height: .98;
  letter-spacing: -0.055em;
  text-shadow: 0 12px 24px #12372d0a;
}

body:has(#faq-search) .page-intro h1::after {
  width: min(110px, 44%);
}

body:has(#faq-search) .page-intro .lead {
  max-width: 58ch;
  color: #596d62;
  font-size: clamp(1rem, 1.25vw, 1.1rem);
  line-height: 1.68;
}

body:has(#faq-search) .intro-motif {
  opacity: .18;
}

/* ---------- premium FAQ search ---------- */

body:has(#faq-search) .support-search {
  position: relative;
  z-index: 4;
  max-width: none;
  margin: -24px 28px 25px;
  min-height: 60px;
  border: 1px solid #d7e1da;
  border-radius: 17px;
  background:
    radial-gradient(circle at 16% 0%, #ffffff 0 12%, transparent 40%),
    linear-gradient(180deg, #ffffff, #f9fbf8);
  box-shadow:
    0 4px 0 #dde5df,
    0 13px 25px #12372d0e,
    inset 0 1px 0 #ffffff;
  transition:
    transform 190ms cubic-bezier(.22, 1, .36, 1),
    border-color 190ms ease,
    box-shadow 190ms ease;
}

body:has(#faq-search) .support-search:focus-within {
  transform: translateY(-1px);
  border-color: #7ea18e;
  box-shadow:
    0 0 0 3px #0b5d4510,
    0 4px 0 #d8e2da,
    0 15px 27px #12372d11,
    inset 0 1px 0 #ffffff;
}

body:has(#faq-search) .support-search .icon {
  color: #2b735e;
}

body:has(#faq-search) #faq-search {
  min-height: 58px;
  border: 0;
  background: transparent;
  box-shadow: none;
  font-size: .96rem;
}

body:has(#faq-search) #faq-search:focus-visible {
  outline: 0;
  box-shadow: none;
}

/* ---------- Quick Actions injected by JS ---------- */

.support-quick {
  margin: 0 0 var(--support-gap);
}

.support-v2-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}

.support-v2-heading > div {
  max-width: 650px;
}

.support-v2-kicker {
  margin: 0 0 5px;
  color: #8f6517;
  font-size: .68rem;
  font-weight: 840;
  letter-spacing: .105em;
  text-transform: uppercase;
}

.support-v2-heading h2 {
  margin: 0;
  color: #173e32;
  font-size: clamp(1.4rem, 2vw, 1.8rem);
  letter-spacing: -0.04em;
}

.support-v2-heading p {
  margin: 6px 0 0;
  color: #6a7a71;
  line-height: 1.55;
}

.support-quick-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.support-quick-card {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 20px;
  gap: 11px;
  align-items: center;
  min-height: 96px;
  padding: 15px;
  overflow: hidden;
  border: 1px solid #dfe7df;
  border-radius: 16px;
  background:
    radial-gradient(circle at 92% 8%, #e0ad390a, transparent 28%),
    linear-gradient(145deg, #ffffff, #f9fbf7);
  color: #194536;
  box-shadow:
    0 7px 15px #12372d09,
    inset 0 1px 0 #ffffff;
  text-decoration: none;
  transition:
    transform 210ms cubic-bezier(.22, 1, .36, 1),
    border-color 210ms ease,
    box-shadow 210ms ease,
    background 210ms ease;
}

.support-quick-card::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -24px;
  bottom: -28px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle, #d7a63a12, transparent 69%);
}

.support-quick-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid #d6e2d9;
  border-radius: 13px;
  background:
    radial-gradient(circle at 31% 22%, #ffffff 0 12%, transparent 41%),
    linear-gradient(145deg, #f9fcf7, #e8f2ea);
  color: #14634b;
  box-shadow:
    0 3px 0 #d5dfd7,
    0 7px 12px #12372d0b,
    inset 0 1px 0 #ffffff;
}

.support-quick-icon svg {
  width: 19px;
  height: 19px;
}

.support-quick-copy strong {
  display: block;
  color: #194536;
  font-size: .86rem;
  line-height: 1.3;
}

.support-quick-copy span {
  display: block;
  margin-top: 3px;
  color: #607168;
  font-size: .7rem;
  line-height: 1.4;
}

.support-quick-arrow {
  color: #236a53;
  font-size: 1.08rem;
  font-weight: 900;
  transition: transform 190ms cubic-bezier(.22, 1, .36, 1);
}

@media (hover: hover) and (pointer: fine) {
  .support-quick-card:hover {
    transform:
      perspective(700px)
      translateY(-3px)
      rotateX(.7deg);
    border-color: #c8d8ce;
    background:
      radial-gradient(circle at 92% 8%, #e0ad390d, transparent 28%),
      linear-gradient(145deg, #ffffff, #f2f8f3);
    box-shadow:
      0 11px 20px #12372d0e,
      inset 0 1px 0 #ffffff;
  }

  .support-quick-card:hover .support-quick-arrow {
    transform: translateX(3px);
  }
}

/* ---------- existing topic/help layout ---------- */

body:has(#faq-search) .support-layout {
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 18px;
  align-items: stretch;
  margin-top: 0;
}

body:has(#faq-search) .support-links {
  display: grid;
  gap: 8px;
}

body:has(#faq-search) .support-links a {
  min-height: 68px;
  padding: 15px 17px;
  border: 1px solid #dfe7df;
  border-radius: 13px !important;
  background:
    linear-gradient(145deg, #fffefa, #f9fbf7);
  box-shadow:
    0 5px 11px #12372d07,
    inset 0 1px 0 #ffffff;
}

body:has(#faq-search) .support-links a .icon:first-child {
  width: 20px;
  height: 20px;
  color: #176049;
}

@media (hover: hover) and (pointer: fine) {
  body:has(#faq-search) .support-links a:hover {
    transform: translateX(3px) translateY(-1px);
    border-color: #cad9d0;
    background: #f3f8f3;
    box-shadow:
      0 8px 14px #12372d0a,
      inset 0 1px 0 #ffffff;
  }
}

body:has(#faq-search) .support-help {
  position: relative;
  isolation: isolate;
  min-height: 100%;
  padding: clamp(27px, 3.5vw, 38px);
  overflow: hidden;
  border: 1px solid #dbe5dd;
  border-radius: 19px;
  background:
    radial-gradient(circle at 90% 14%, #e3b34315, transparent 30%),
    linear-gradient(130deg, #eef7ef, #fff8e8);
  box-shadow:
    0 11px 24px #12372d0c,
    inset 0 1px 0 #ffffff;
}

body:has(#faq-search) .support-help::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -55px;
  bottom: -65px;
  width: 170px;
  height: 170px;
  border: 1px solid #d4a0391c;
  border-radius: 50%;
  box-shadow:
    0 0 0 25px #d4a03906,
    0 0 0 52px #0b5d4503;
}

body:has(#faq-search) .support-help .icon-disc {
  margin-bottom: 6px;
}

body:has(#faq-search) .support-help h2 {
  margin: 10px 0 8px;
  color: #173e32;
  letter-spacing: -0.035em;
}

body:has(#faq-search) .support-help p {
  max-width: 48ch;
  color: #687970;
  line-height: 1.6;
}

/* ---------- game-specific support cards ---------- */

.support-games {
  margin-top: var(--support-gap);
}

.support-games-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 13px;
}

.support-game-card {
  position: relative;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 22px;
  gap: 12px;
  align-items: center;
  min-height: 98px;
  padding: 13px;
  border: 1px solid #dfe7df;
  border-radius: 16px;
  background:
    linear-gradient(145deg, #fffefa, #f8fbf6);
  color: #194536;
  box-shadow:
    0 7px 15px #12372d08,
    inset 0 1px 0 #ffffff;
  text-decoration: none;
  transition:
    transform 210ms cubic-bezier(.22, 1, .36, 1),
    border-color 210ms ease,
    box-shadow 210ms ease;
}

.support-game-thumb {
  display: grid;
  place-items: center;
  width: 64px;
  height: 72px;
  overflow: hidden;
  border: 2px solid #18483a;
  border-radius: 12px;
  background: #edf2e6;
  box-shadow:
    0 6px 11px #12372d14,
    inset 0 1px 0 #ffffff20;
}

.support-game-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.support-game-copy strong {
  display: block;
  color: #194536;
  font-size: .86rem;
  line-height: 1.3;
}

.support-game-copy span {
  display: block;
  margin-top: 4px;
  color: #738078;
  font-size: .7rem;
  line-height: 1.4;
}

.support-game-arrow {
  color: #236a53;
  font-weight: 900;
  transition: transform 190ms cubic-bezier(.22, 1, .36, 1);
}

@media (hover: hover) and (pointer: fine) {
  .support-game-card:hover {
    transform:
      perspective(700px)
      translateY(-3px)
      rotateX(.6deg);
    border-color: #c9d8cf;
    box-shadow:
      0 11px 20px #12372d0d,
      inset 0 1px 0 #ffffff;
  }

  .support-game-card:hover .support-game-arrow {
    transform: translateX(3px);
  }
}

/* ---------- FAQ final treatment ---------- */

body:has(#faq-search) .faq-section {
  max-width: none;
  margin: var(--support-gap) 0 42px;
  padding: 26px;
  border: 1px solid #dfe7df;
  border-radius: 22px;
  background:
    radial-gradient(circle at 94% 5%, #e2b1420b, transparent 25%),
    linear-gradient(145deg, #ffffff, #fffdf8);
  box-shadow:
    0 13px 28px #12372d0c,
    inset 0 1px 0 #ffffff;
}

body:has(#faq-search) .faq-section h2 {
  margin: 0 0 16px;
  color: #173e32;
  letter-spacing: -0.035em;
}

body:has(#faq-search) .faq-section details {
  margin-bottom: 8px;
  overflow: hidden;
  border: 1px solid #e0e7e1 !important;
  border-radius: 13px !important;
  background: #fffefa;
  box-shadow:
    0 4px 9px #12372d06,
    inset 0 1px 0 #ffffff;
}

body:has(#faq-search) .faq-section details:last-of-type {
  margin-bottom: 0;
}

body:has(#faq-search) .faq-section summary {
  min-height: 58px;
  padding: 16px 48px 16px 18px;
  color: #1a4939;
  font-weight: 720;
}

body:has(#faq-search) .faq-section summary::after {
  right: 18px;
  color: #176049;
}

body:has(#faq-search) .faq-section details[open] {
  border-color: #cbdad0 !important;
  background: #fffefa;
  box-shadow:
    0 7px 14px #12372d09,
    inset 0 1px 0 #ffffff;
}

body:has(#faq-search) .faq-section details[open] summary {
  background: linear-gradient(90deg, #eef7ef, #fff9ec);
}

body:has(#faq-search) .faq-section details > p,
body:has(#faq-search) .faq-section details > div {
  color: #687970;
  line-height: 1.65;
}

/* ---------- CTA ---------- */

body:has(#faq-search) .cta-band {
  margin-top: 30px;
}

/* ---------- responsive ---------- */

@media (max-width: 1000px) {
  .support-quick-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .support-games-grid {
    grid-template-columns: 1fr;
  }

  .support-game-card {
    grid-template-columns: 58px minmax(0, 1fr) 22px;
  }

  .support-game-thumb {
    width: 58px;
    height: 66px;
  }
}

@media (max-width: 800px) {
  body:has(#faq-search) .page-intro > div:first-child {
    max-width: 100%;
  }

  body:has(#faq-search) .intro-motif {
    display: none;
  }

  body:has(#faq-search) .support-search {
    margin-inline: 16px;
  }

  body:has(#faq-search) .support-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  body:has(#faq-search) main > .container {
    --support-gap: 22px;
  }

  body:has(#faq-search) .page-intro {
    min-height: 0;
    margin-top: 10px;
    padding: 24px 18px 29px;
    border-radius: 21px;
  }

  body:has(#faq-search) .page-intro h1 {
    font-size: clamp(2.35rem, 12vw, 3.1rem);
  }

  body:has(#faq-search) .support-search {
    min-height: 54px;
    margin: -18px 10px 20px;
    border-radius: 14px;
  }

  body:has(#faq-search) #faq-search {
    min-height: 52px;
  }

  .support-v2-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  .support-quick-grid {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .support-quick-card {
    min-height: 84px;
    padding: 12px;
  }

  body:has(#faq-search) .support-links a {
    min-height: 62px;
    padding: 13px 15px;
  }

  body:has(#faq-search) .support-help {
    padding: 23px 18px;
  }

  .support-game-card {
    min-height: 88px;
    padding: 11px;
  }

  body:has(#faq-search) .faq-section {
    margin-bottom: 28px;
    padding: 18px 13px;
    border-radius: 19px;
  }

  body:has(#faq-search) .faq-section summary {
    padding: 14px 43px 14px 14px;
  }
}

@media (hover: none), (pointer: coarse) {
  .support-quick-card:hover,
  .support-game-card:hover,
  body:has(#faq-search) .support-links a:hover {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .support-quick-card,
  .support-quick-arrow,
  .support-game-card,
  .support-game-arrow,
  body:has(#faq-search) .support-links a,
  body:has(#faq-search) .support-search {
    transition: none !important;
  }

  .support-quick-card:hover,
  .support-game-card:hover,
  body:has(#faq-search) .support-links a:hover,
  body:has(#faq-search) .support-search:focus-within {
    transform: none !important;
  }
}

/* =========================================================
   BRAAQ SUPPORT PAGE V2.1 — FINAL DENSITY + FAQ POLISH
   Removes the duplicate game-support presentation, compacts
   Quick Actions, upgrades the original game cards, balances
   Topics/Help, and finishes FAQ interaction styling.
   ========================================================= */

/* ---------- anchor / sticky-header safety ---------- */

html:has(#faq-search) {
  scroll-padding-top: 126px;
}

body:has(#faq-search) .support-layout,
body:has(#faq-search) .game-support-grid,
body:has(#faq-search) .faq-section,
body:has(#faq-search) .support-quick {
  scroll-margin-top: 126px;
}

/* ---------- search-to-content rhythm ---------- */

body:has(#faq-search) .support-search {
  margin-bottom: 21px;
}

.support-quick {
  margin-bottom: 25px;
}

.support-v2-heading {
  margin-bottom: 12px;
}

.support-v2-heading p {
  margin-top: 4px;
  font-size: .82rem;
}

/* ---------- Quick Actions: denser, calmer ---------- */

.support-quick-grid {
  gap: 10px;
}

.support-quick-card {
  grid-template-columns: 38px minmax(0, 1fr) 17px;
  gap: 9px;
  min-height: 82px;
  padding: 12px 13px;
  border-radius: 14px;
  box-shadow:
    0 6px 13px #12372d08,
    inset 0 1px 0 #ffffff;
}

.support-quick-icon {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  box-shadow:
    0 2px 0 #d7e1d9,
    0 5px 9px #12372d09,
    inset 0 1px 0 #ffffff;
}

.support-quick-icon svg {
  width: 17px;
  height: 17px;
}

.support-quick-copy strong {
  font-size: .79rem;
}

.support-quick-copy span {
  margin-top: 2px;
  font-size: .65rem;
  line-height: 1.35;
}

.support-quick-arrow {
  font-size: .96rem;
}

@media (hover: hover) and (pointer: fine) {
  .support-quick-card:hover {
    transform:
      perspective(700px)
      translateY(-2px)
      rotateX(.5deg);
    box-shadow:
      0 9px 17px #12372d0c,
      inset 0 1px 0 #ffffff;
  }
}

/* ---------- Topics + Help balance ---------- */

body:has(#faq-search) .support-layout {
  grid-template-columns:
    minmax(0, .92fr)
    minmax(0, 1.08fr);
  gap: 17px;
  align-items: stretch;
}

body:has(#faq-search) .support-links {
  gap: 7px;
}

body:has(#faq-search) .support-links a {
  min-height: 61px;
  padding: 13px 15px;
  border-radius: 12px !important;
  box-shadow:
    0 4px 9px #12372d06,
    inset 0 1px 0 #ffffff;
}

body:has(#faq-search) .support-links a .icon:first-child {
  width: 18px;
  height: 18px;
}

body:has(#faq-search) .support-help {
  min-height: 100%;
  padding: clamp(24px, 3vw, 32px);
}

body:has(#faq-search) .support-help h2 {
  margin: 8px 0 7px;
}

body:has(#faq-search) .support-help p {
  margin-bottom: 15px;
  line-height: 1.55;
}

body:has(#faq-search) .support-help .button {
  min-height: 45px;
}

/* =========================================================
   ORIGINAL GAME SUPPORT GRID — PREMIUM V2.1
   The server-rendered cards are kept; the duplicate injected
   "Choose your game" section is no longer generated.
   ========================================================= */

body:has(#faq-search) .game-support-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 13px;
  margin: 28px 0 0;
}

body:has(#faq-search) .game-support-grid > * {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  grid-template-rows: auto auto 1fr;
  column-gap: 14px;
  align-items: start;
  min-width: 0;
  min-height: 156px;
  padding: 15px;
  overflow: hidden;
  border: 1px solid #dfe7df;
  border-radius: 17px;
  background:
    radial-gradient(
      circle at 93% 8%,
      #e0ad3909,
      transparent 28%
    ),
    linear-gradient(
      145deg,
      #ffffff,
      #fafcf8
    );
  box-shadow:
    0 8px 17px #12372d09,
    inset 0 1px 0 #ffffff;
  transition:
    transform 210ms cubic-bezier(.22, 1, .36, 1),
    border-color 210ms ease,
    box-shadow 210ms ease;
}

body:has(#faq-search) .game-support-grid > *::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -32px;
  bottom: -38px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      #d9aa3c0d,
      transparent 68%
    );
}

.support-original-thumb {
  grid-column: 1;
  grid-row: 1 / 4;
  display: grid;
  place-items: center;
  width: 72px;
  height: 88px;
  overflow: hidden;
  border: 2px solid #194638;
  border-radius: 13px;
  background:
    linear-gradient(
      145deg,
      #edf3e5,
      #f7efdd
    );
  box-shadow:
    0 7px 13px #12372d15,
    inset 0 1px 0 #ffffff1f;
}

.support-original-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body:has(#faq-search) .game-support-grid h3 {
  grid-column: 2;
  margin: 3px 0 4px;
  color: #194536;
  font-size: .95rem;
  line-height: 1.3;
}

body:has(#faq-search) .game-support-grid p {
  grid-column: 2;
  margin: 0;
  color: #6d7c74;
  font-size: .73rem;
  line-height: 1.48;
}

body:has(#faq-search) .game-support-grid .text-link {
  grid-column: 2;
  align-self: end;
  width: fit-content;
  margin-top: 10px;
  font-size: .75rem;
}

@media (hover: hover) and (pointer: fine) {
  body:has(#faq-search) .game-support-grid > *:hover {
    transform:
      perspective(760px)
      translateY(-3px)
      rotateX(.55deg);
    border-color: #c9d8cf;
    box-shadow:
      0 12px 21px #12372d0d,
      inset 0 1px 0 #ffffff;
  }

  body:has(#faq-search) .game-support-grid > *:hover
  .support-original-thumb {
    transform:
      translateY(-1px)
      rotate(-1deg);
  }
}

.support-original-thumb {
  transition:
    transform 210ms cubic-bezier(.22, 1, .36, 1);
}

/* Hide any stale duplicate block if an older cached JS bundle
   briefly survives a hard refresh during local development. */
body:has(#faq-search) .support-games {
  display: none !important;
}

/* ---------- FAQ density + custom disclosure control ---------- */

body:has(#faq-search) .faq-section {
  margin-top: 30px;
  margin-bottom: 38px;
  padding: 22px;
  border-radius: 20px;
  box-shadow:
    0 11px 24px #12372d0b,
    inset 0 1px 0 #ffffff;
}

body:has(#faq-search) .faq-section h2 {
  position: relative;
  width: fit-content;
  margin-bottom: 14px;
}

body:has(#faq-search) .faq-section h2::after {
  content: "";
  display: block;
  width: 46px;
  height: 2px;
  margin-top: 7px;
  border-radius: 999px;
  background:
    linear-gradient(
      90deg,
      #d3a039,
      transparent
    );
}

body:has(#faq-search) .faq-section details {
  margin-bottom: 7px;
  border-radius: 12px !important;
  box-shadow:
    0 3px 7px #12372d05,
    inset 0 1px 0 #ffffff;
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease;
}

body:has(#faq-search) .faq-section summary {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 53px;
  padding: 13px 52px 13px 16px;
  list-style: none;
  font-size: .84rem;
  line-height: 1.35;
  transition:
    color 180ms ease,
    background 180ms ease;
}

body:has(#faq-search)
.faq-section
summary::-webkit-details-marker {
  display: none;
}

body:has(#faq-search) .faq-section summary::marker {
  content: "";
}

body:has(#faq-search) .faq-section summary::after {
  content: "+";
  position: absolute;
  right: 14px;
  top: 50%;
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border: 1px solid #d6e1d9;
  border-radius: 9px;
  background:
    radial-gradient(
      circle at 30% 20%,
      #ffffff,
      transparent 42%
    ),
    linear-gradient(
      145deg,
      #f9fcf7,
      #eaf2eb
    );
  color: #176049;
  font-size: 1rem;
  font-weight: 760;
  line-height: 1;
  box-shadow:
    0 2px 0 #d6e0d8,
    0 5px 9px #12372d08,
    inset 0 1px 0 #ffffff;
  transform:
    translateY(-50%)
    rotate(0deg);
  transition:
    transform 190ms cubic-bezier(.22, 1, .36, 1),
    background 190ms ease,
    box-shadow 190ms ease;
}

body:has(#faq-search)
.faq-section
details[open]
summary::after {
  background:
    linear-gradient(
      145deg,
      #edf7ef,
      #e1efe4
    );
  box-shadow:
    0 2px 0 #cad9cf,
    0 6px 10px #12372d0a,
    inset 0 1px 0 #ffffff;
  transform:
    translateY(-50%)
    rotate(45deg);
}

body:has(#faq-search) .faq-section details[open] {
  border-color: #c9d9cf !important;
  box-shadow:
    0 6px 12px #12372d08,
    inset 0 1px 0 #ffffff;
}

body:has(#faq-search)
.faq-section
details[open]
summary {
  background:
    linear-gradient(
      90deg,
      #eef7ef,
      #fff9ed
    );
  color: #105c44;
}

body:has(#faq-search)
.faq-section
details[open]
> p,
body:has(#faq-search)
.faq-section
details[open]
> div {
  animation:
    braaq-faq-answer-in
    220ms
    cubic-bezier(.22, 1, .36, 1)
    both;
}

body:has(#faq-search) .faq-section details > p {
  padding: 13px 16px 16px;
  font-size: .8rem;
  line-height: 1.58;
}

@keyframes braaq-faq-answer-in {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (hover: hover) and (pointer: fine) {
  body:has(#faq-search)
  .faq-section
  summary:hover {
    background: #f5f9f5;
  }

  body:has(#faq-search)
  .faq-section
  summary:hover::after {
    transform:
      translateY(-50%)
      translateY(-1px)
      rotate(0deg);
  }

  body:has(#faq-search)
  .faq-section
  details[open]
  summary:hover::after {
    transform:
      translateY(-50%)
      translateY(-1px)
      rotate(45deg);
  }
}

/* ---------- responsive ---------- */

@media (max-width: 1000px) {
  body:has(#faq-search) .game-support-grid {
    grid-template-columns: 1fr;
  }

  body:has(#faq-search) .game-support-grid > * {
    min-height: 128px;
  }
}

@media (max-width: 800px) {
  body:has(#faq-search) .support-layout {
    grid-template-columns: 1fr;
  }

  body:has(#faq-search) .support-help {
    min-height: 0;
  }
}

@media (max-width: 600px) {
  html:has(#faq-search) {
    scroll-padding-top: 108px;
  }

  body:has(#faq-search) .support-layout,
  body:has(#faq-search) .game-support-grid,
  body:has(#faq-search) .faq-section,
  body:has(#faq-search) .support-quick {
    scroll-margin-top: 108px;
  }

  .support-quick {
    margin-bottom: 20px;
  }

  .support-quick-card {
    min-height: 76px;
  }

  body:has(#faq-search) .game-support-grid {
    gap: 9px;
    margin-top: 22px;
  }

  body:has(#faq-search) .game-support-grid > * {
    grid-template-columns: 58px minmax(0, 1fr);
    min-height: 108px;
    padding: 12px;
  }

  .support-original-thumb {
    width: 58px;
    height: 70px;
    border-radius: 11px;
  }

  body:has(#faq-search) .faq-section {
    margin-top: 23px;
    margin-bottom: 27px;
    padding: 16px 11px;
  }

  body:has(#faq-search) .faq-section summary {
    min-height: 50px;
    padding:
      12px
      47px
      12px
      13px;
    font-size: .8rem;
  }

  body:has(#faq-search)
  .faq-section
  summary::after {
    right: 11px;
    width: 25px;
    height: 25px;
  }
}

@media (hover: none), (pointer: coarse) {
  body:has(#faq-search)
  .game-support-grid
  > *:hover,
  body:has(#faq-search)
  .game-support-grid
  > *:hover
  .support-original-thumb {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .support-original-thumb,
  body:has(#faq-search) .game-support-grid > *,
  body:has(#faq-search) .faq-section details,
  body:has(#faq-search) .faq-section summary,
  body:has(#faq-search) .faq-section summary::after {
    transition: none !important;
  }

  body:has(#faq-search)
  .faq-section
  details[open]
  > p,
  body:has(#faq-search)
  .faq-section
  details[open]
  > div {
    animation: none !important;
  }

  body:has(#faq-search)
  .game-support-grid
  > *:hover,
  body:has(#faq-search)
  .game-support-grid
  > *:hover
  .support-original-thumb {
    transform: none !important;
  }
}

/* =========================================================
   BRAAQ HOME V3 — FINAL COHESION + PREMIUM MICRO-POLISH
   Final Home-only refinement. Preserves the existing 3D Hero
   interaction, particles and content while synchronizing the
   page with Games, About and Support visual quality.
   ========================================================= */

/* ---------- Home page rhythm ---------- */

body:has(.home-hero[data-hero-interactive]) main > .container {
  --home-gap: clamp(28px, 4vw, 44px);
}

body:has(.home-hero[data-hero-interactive]) .site-header {
  filter: drop-shadow(0 9px 18px #12372d08);
}

body:has(.home-hero[data-hero-interactive]) .nav-shell {
  box-shadow:
    0 8px 22px #12372d0a,
    0 2px 6px #8b621008,
    inset 0 1px 0 #ffffff;
}

/* ---------- Hero: final balance only ---------- */

.home-hero[data-hero-interactive] {
  min-height: 500px;
  margin: 28px 0 0;
  padding: 48px 40px 36px;
  gap: 38px;
  border-color: #ffffffd2;
  box-shadow:
    0 20px 46px #12372d10,
    0 5px 14px #8c64100c,
    inset 0 1px 0 #ffffff;
}

.home-hero[data-hero-interactive]::after {
  opacity: .62;
}

.home-hero[data-hero-interactive] .hero-copy {
  max-width: 545px;
}

.home-hero[data-hero-interactive] .hero-copy .eyebrow {
  padding: 7px 11px;
  box-shadow:
    0 7px 15px #12372d09,
    inset 0 1px 0 #ffffff;
}

.home-hero[data-hero-interactive] .hero-copy h1 {
  margin: 18px 0 14px;
  font-size: clamp(2.5rem, 3.75vw, 3.72rem);
  line-height: .995;
  letter-spacing: -0.05em;
  text-shadow:
    0 2px 0 #ffffffa8,
    0 9px 20px #12372d0c;
}

.home-hero[data-hero-interactive] .hero-copy h1 span {
  background-size: 260% 100%;
  filter:
    drop-shadow(0 2px 1px #57380618)
    drop-shadow(0 7px 11px #7a500c11);
}

.home-hero[data-hero-interactive] .hero-copy .lead {
  max-width: 500px;
  color: #56685f;
  line-height: 1.66;
}

.home-hero[data-hero-interactive] .hero-copy .actions {
  gap: 10px;
  margin-top: 22px;
}

.home-hero[data-hero-interactive] .button {
  min-height: 49px;
  padding-inline: 19px;
  border-radius: 12px;
}

.home-hero[data-hero-interactive] .hero-footnote {
  margin-top: 18px;
  padding: 6px 10px;
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 7px 14px #12372d08;
}

.home-hero[data-hero-interactive] .hero-art {
  height: 425px;
  transform:
    translate3d(-5px, var(--hero-scroll), 0)
    scale(.975);
}

.home-hero[data-hero-interactive] .hero-stage {
  transform:
    rotateX(var(--scene-rx))
    rotateY(var(--scene-ry))
    translate3d(0, 0, 0);
}

.home-hero[data-hero-interactive] .screen-main {
  filter: saturate(1.015) contrast(1.008);
}

.home-hero[data-hero-interactive] .screen-left,
.home-hero[data-hero-interactive] .screen-right {
  opacity: .96;
}

.home-hero[data-hero-interactive] .hero-chip,
.home-hero[data-hero-interactive] .hero-note {
  box-shadow:
    0 8px 17px #12372d0d,
    inset 0 1px 0 #ffffff;
}

/* Keep Home particles visible but subordinate. */
body:has(.home-hero[data-hero-interactive]) .site-ambient {
  opacity: .74;
}

body:has(.home-hero[data-hero-interactive]) .site-ambient i {
  box-shadow: 0 0 5px #bd93321b;
}

.home-hero[data-hero-interactive] .hero-field-particles i {
  opacity: .39;
}

.home-hero[data-hero-interactive] .hero-scanline {
  opacity: .13;
}

/* ---------- Featured Games: premium showcase panel ---------- */

.featured {
  position: relative;
  isolation: isolate;
  margin-top: var(--home-gap);
  padding: 25px 26px 27px;
  overflow: hidden;
  border: 1px solid #dfe7df;
  border-radius: 24px;
  background:
    radial-gradient(circle at 92% 8%, #e0ad390d, transparent 27%),
    radial-gradient(circle at 6% 92%, #0b5d4506, transparent 28%),
    linear-gradient(#12372d05 1px, transparent 1px),
    linear-gradient(90deg, #12372d05 1px, transparent 1px),
    linear-gradient(145deg, #fffefa, #fafcf8);
  background-size:
    auto,
    auto,
    42px 42px,
    42px 42px,
    auto;
  box-shadow:
    0 14px 30px #12372d0c,
    0 3px 7px #865c1107,
    inset 0 1px 0 #ffffff;
}

.featured::before {
  content: "";
  position: absolute;
  left: 26px;
  top: 0;
  width: 92px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, #d3a039, transparent);
}

.featured::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -72px;
  bottom: -96px;
  width: 210px;
  height: 210px;
  border: 1px solid #d3a03914;
  border-radius: 50%;
  box-shadow:
    0 0 0 31px #d3a03905,
    0 0 0 62px #0b5d4503;
  pointer-events: none;
}

.featured .section-heading {
  align-items: center;
  margin-bottom: 18px;
}

.featured .section-heading .eyebrow {
  margin: 0;
  color: #17604b;
}

.featured .section-heading .text-link {
  min-height: 39px;
  padding: 7px 10px;
  border: 1px solid #e0e7e1;
  border-radius: 10px;
  background: #fffefa;
  box-shadow:
    0 4px 9px #12372d07,
    inset 0 1px 0 #ffffff;
}

.featured .game-grid {
  gap: 17px;
}

.featured .game-card {
  border-radius: 18px;
  border-color: #dce5de;
  box-shadow:
    0 8px 18px #12372d0b,
    inset 0 1px 0 #ffffff;
}

.featured .game-art {
  min-height: 250px;
}

.featured .game-copy {
  padding: 18px 16px;
}

.featured .game-copy h3 {
  margin: 9px 0 7px;
  font-size: 1.08rem;
}

.featured .game-copy p {
  margin-bottom: 10px;
  color: #687970;
  line-height: 1.55;
}

.featured .art-label {
  left: 9px;
  right: auto;
  bottom: 9px;
  width: fit-content;
  max-width: calc(100% - 18px);
  padding: 5px 8px;
  border: 1px solid #ffffff28;
  border-radius: 999px;
  background: #10382de8;
  box-shadow:
    0 5px 10px #12372d15,
    inset 0 1px 0 #ffffff17;
}

@media (hover: hover) and (pointer: fine) {
  .featured .section-heading .text-link:hover {
    transform: translateY(-2px);
    border-color: #cad9d0;
    background: #f4f9f4;
    box-shadow:
      0 7px 13px #12372d0a,
      inset 0 1px 0 #ffffff;
  }

  .featured .game-card:hover,
  .featured .game-card:focus-within {
    --featured-lift: -3px;
    border-color: #c8d8ce;
    box-shadow:
      0 13px 24px #12372d10,
      inset 0 1px 0 #ffffff;
  }
}

/* ---------- Studio preview: cohesion with About V2 ---------- */

.studio-preview {
  position: relative;
  isolation: isolate;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.58fr);
  gap: 32px;
  align-items: center;
  margin-top: var(--home-gap);
  padding: 31px 30px;
  overflow: hidden;
  border: 1px solid #dfe7df;
  border-radius: 23px;
  background:
    radial-gradient(circle at 92% 9%, #e0ad390c, transparent 27%),
    linear-gradient(#12372d03 1px, transparent 1px),
    linear-gradient(90deg, #12372d03 1px, transparent 1px),
    linear-gradient(145deg, #fffefa, #fafcf8);
  background-size:
    auto,
    42px 42px,
    42px 42px,
    auto;
  box-shadow:
    0 13px 28px #12372d0c,
    0 3px 7px #865c1106,
    inset 0 1px 0 #ffffff;
}

.studio-preview::before {
  right: -30px;
  bottom: -58px;
  width: 185px;
  height: 185px;
  border: 1px solid #d3a03912;
  background: transparent;
  box-shadow:
    0 0 0 28px #d3a03904,
    0 0 0 56px #0b5d4503;
}

.studio-preview::after {
  content: "";
  position: absolute;
  left: 29px;
  top: 0;
  width: 78px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, #d3a039, transparent);
}

.studio-preview > div:first-child {
  padding: 4px 0;
}

.studio-preview > div:first-child .eyebrow {
  color: #17604b;
  letter-spacing: .1em;
}

.studio-preview h2 {
  margin: 10px 0 12px;
  color: #173e32;
  font-size: clamp(1.8rem, 2.6vw, 2.35rem);
  line-height: 1.03;
}

.studio-preview > div:first-child > p:not(.eyebrow) {
  max-width: 49ch;
  color: #687970;
  font-size: .86rem;
  line-height: 1.64;
}

.studio-preview .text-link {
  margin-top: 14px;
}

.preview-values {
  gap: 11px;
}

.preview-values article {
  min-height: 158px;
  padding: 18px 16px 16px;
  border-radius: 15px;
  box-shadow:
    0 7px 15px #12372d09,
    inset 0 1px 0 #ffffff;
}

.preview-values article::before {
  top: 15px;
  bottom: 15px;
}

.preview-values .icon-disc {
  width: 46px;
  height: 46px;
  margin-bottom: 11px;
}

.preview-values .icon-disc .icon {
  width: 22px;
  height: 22px;
}

.preview-values h3 {
  margin-bottom: 5px;
  color: #194536;
  font-size: .91rem;
}

.preview-values p {
  color: #6c7b73;
  font-size: .73rem;
  line-height: 1.47;
}

@media (hover: hover) and (pointer: fine) {
  .preview-values article:hover {
    transform:
      perspective(850px)
      translateY(-3px)
      rotateX(.55deg);
    border-color: #cad9d0;
    box-shadow:
      0 11px 19px #12372d0d,
      inset 0 1px 0 #ffffff;
  }
}

/* ---------- Home CTA/footer handoff ---------- */

body:has(.home-hero[data-hero-interactive]) .cta-band {
  margin-top: var(--home-gap);
  margin-bottom: 30px;
  box-shadow:
    0 14px 29px #12372d11,
    inset 0 1px 0 #ffffff14;
}

body:has(.home-hero[data-hero-interactive]) .cta-band h2 {
  letter-spacing: -.035em;
}

body:has(.home-hero[data-hero-interactive]) .site-footer {
  margin-top: 0;
}

/* ---------- Responsive final balance ---------- */

@media (max-width: 1050px) {
  .home-hero[data-hero-interactive] {
    gap: 28px;
    padding-inline: 34px;
  }

  .home-hero[data-hero-interactive] .hero-art {
    transform:
      translate3d(-2px, var(--hero-scroll), 0)
      scale(.93);
  }

  .featured {
    padding-inline: 21px;
  }

  .studio-preview {
    grid-template-columns: 1fr 1.5fr;
    gap: 24px;
    padding: 27px 24px;
  }
}

@media (max-width: 850px) {
  body:has(.home-hero[data-hero-interactive]) main > .container {
    --home-gap: 24px;
  }

  .home-hero[data-hero-interactive] {
    min-height: 0;
    padding: 38px 30px 30px;
  }

  .featured .game-grid {
    gap: 14px;
  }

  .studio-preview {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .studio-preview > div:first-child > p:not(.eyebrow) {
    max-width: 60ch;
  }
}

@media (max-width: 700px) {
  .featured {
    padding: 20px 14px 18px;
    border-radius: 20px;
  }

  .featured .section-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 9px;
  }

  .featured .section-heading .text-link {
    align-self: flex-start;
  }

  .featured .game-grid {
    grid-template-columns: 1fr;
  }

  .featured .game-card {
    min-height: 0;
  }

  .featured .game-art {
    min-height: 245px;
  }

  .studio-preview {
    padding: 22px 16px;
    border-radius: 20px;
  }

  .preview-values {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .preview-values article {
    min-height: 0;
    padding: 16px 15px;
  }
}

@media (max-width: 600px) {
  body:has(.home-hero[data-hero-interactive]) main > .container {
    --home-gap: 20px;
  }

  .home-hero[data-hero-interactive] {
    margin-top: 10px;
    padding: 24px 18px 23px;
    gap: 22px;
    border-radius: 22px;
  }

  .home-hero[data-hero-interactive] .hero-copy h1 {
    font-size: clamp(2.25rem, 11vw, 3rem);
  }

  .home-hero[data-hero-interactive] .hero-copy .actions {
    align-items: stretch;
    flex-direction: column;
  }

  .home-hero[data-hero-interactive] .hero-copy .actions .button {
    width: 100%;
  }

  .home-hero[data-hero-interactive] .hero-footnote {
    max-width: 100%;
  }

  .home-hero[data-hero-interactive] .hero-art {
    height: 340px;
    transform: none !important;
  }

  .home-hero[data-hero-interactive] .hero-stage {
    transform: none !important;
  }

  .featured {
    margin-top: var(--home-gap);
  }

  .featured .game-art {
    min-height: 230px;
  }

  .studio-preview {
    margin-top: var(--home-gap);
  }

  body:has(.home-hero[data-hero-interactive]) .cta-band {
    margin-top: var(--home-gap);
    margin-bottom: 24px;
  }
}

/* ---------- Touch / reduced-motion safety ---------- */

@media (hover: none), (pointer: coarse) {
  .featured .game-card:hover,
  .featured .game-card:focus-within,
  .preview-values article:hover {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .featured .section-heading .text-link,
  .featured .game-card,
  .preview-values article {
    transition: none !important;
  }

  .featured .section-heading .text-link:hover,
  .featured .game-card:hover,
  .featured .game-card:focus-within,
  .preview-values article:hover {
    transform: none !important;
  }
}

/* =========================================================
   BRAAQ HOME V3.1 — FINAL BALANCE + FEATURED CONSISTENCY
   Final Home lock pass: equalized featured media, improved
   logo framing, aligned copy baselines, refined hero support
   layers, and a lightweight compact sticky-nav state.
   ========================================================= */

/* ---------- sticky navbar: compact only after scrolling ---------- */

body:has(.home-hero[data-hero-interactive])
.site-header.home-nav-compact {
  padding-top: 8px;
}

body:has(.home-hero[data-hero-interactive])
.site-header.home-nav-compact
.nav-shell {
  min-height: 68px;
  padding: 8px 28px;
  border-radius: 19px;
  background: #fffffff2;
  box-shadow:
    0 7px 18px #12372d0b,
    0 2px 5px #8b621008,
    inset 0 1px 0 #ffffff;
}

body:has(.home-hero[data-hero-interactive])
.site-header.home-nav-compact
.brand {
  transform: scale(.965);
  transform-origin: left center;
}

body:has(.home-hero[data-hero-interactive])
.site-header.home-nav-compact
.nav-cta {
  min-height: 44px;
}

body:has(.home-hero[data-hero-interactive])
.site-header,
body:has(.home-hero[data-hero-interactive])
.nav-shell,
body:has(.home-hero[data-hero-interactive])
.site-header .brand,
body:has(.home-hero[data-hero-interactive])
.nav-cta {
  transition:
    padding 220ms cubic-bezier(.22, 1, .36, 1),
    min-height 220ms cubic-bezier(.22, 1, .36, 1),
    border-radius 220ms ease,
    box-shadow 220ms ease,
    background 220ms ease,
    transform 220ms cubic-bezier(.22, 1, .36, 1);
}

/* ---------- Hero support screens / labels ---------- */

.home-hero[data-hero-interactive] .screen-left {
  left: 5.5%;
  top: 19%;
  width: 146px;
  opacity: .985;
}

.home-hero[data-hero-interactive] .screen-right {
  right: 4.5%;
  top: 20%;
  width: 146px;
  opacity: .985;
}

.home-hero[data-hero-interactive] .screen-left,
.home-hero[data-hero-interactive] .screen-right {
  box-shadow:
    0 22px 35px #12372d20,
    0 7px 13px #12372d14,
    inset 0 1px 0 #ffffff75;
}

.home-hero[data-hero-interactive] .screen-main {
  width: 198px;
  box-shadow:
    0 32px 52px #0b392b31,
    0 10px 19px #0b392b24,
    0 0 0 1px #ffffff18,
    inset 0 1px 0 #ffffff85;
}

.home-hero[data-hero-interactive] .hero-chip-top {
  left: 10%;
}

.home-hero[data-hero-interactive] .hero-chip-bottom {
  right: 1%;
  bottom: 13%;
  z-index: 9;
}

.home-hero[data-hero-interactive] .hero-note {
  left: 58%;
  bottom: 10px;
  z-index: 9;
}

.home-hero[data-hero-interactive] .hero-chip-bottom,
.home-hero[data-hero-interactive] .hero-note {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* ---------- Featured Games: equal card geometry ---------- */

.featured .game-grid {
  align-items: stretch;
}

.featured .game-card {
  grid-template-columns: 43% 57%;
  min-height: 286px;
  height: 100%;
  overflow: hidden;
}

.featured .game-art {
  min-height: 286px;
  height: 100%;
  justify-content: center;
  align-items: center;
  isolation: isolate;
}

.featured .game-art:not(.logo-art) img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 38%;
}

.featured .game-art.logo-art {
  padding: 18px 14px;
  background:
    radial-gradient(
      circle at 50% 46%,
      #fff9dd 0 18%,
      #eef2da 48%,
      #e7edd9 100%
    );
}

.featured .game-art.logo-art::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: 82%;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      #ffffff8c 0 18%,
      #e5b44812 50%,
      transparent 72%
    );
  box-shadow:
    0 0 0 1px #d9b75510,
    0 16px 28px #92702208;
}

.featured .game-art.logo-art::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 18%;
  right: 18%;
  bottom: 34px;
  height: 17px;
  border-radius: 50%;
  background:
    radial-gradient(
      ellipse,
      #12372d1a,
      #12372d09 46%,
      transparent 72%
    );
}

.featured .game-art.logo-art img {
  position: relative;
  z-index: 1;
  width: min(94%, 178px);
  height: auto;
  max-height: 178px;
  object-fit: contain;
  filter:
    drop-shadow(0 10px 13px #7f58131a)
    saturate(1.025);
  transform: translateY(-2px) scale(1.035);
}

.featured .game-copy {
  min-height: 286px;
  padding: 18px 16px 16px;
}

.featured .game-copy .tag {
  flex: 0 0 auto;
}

.featured .game-copy h3 {
  display: flex;
  align-items: flex-start;
  min-height: 2.65em;
  margin: 9px 0 6px;
  line-height: 1.28;
}

.featured .game-copy p {
  min-height: 4.65em;
  margin-bottom: 9px;
  line-height: 1.55;
}

.featured .game-copy .status {
  margin-top: auto;
}

.featured .game-copy .text-link {
  margin-top: 8px;
}

.featured .art-label {
  z-index: 3;
  min-height: 25px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: normal;
}

/* ---------- Featured hover remains restrained ---------- */

@media (hover: hover) and (pointer: fine) {
  .featured .game-art.logo-art img {
    transition:
      transform 260ms cubic-bezier(.22, 1, .36, 1),
      filter 260ms ease;
  }

  .featured .game-card:hover .game-art.logo-art img,
  .featured .game-card:focus-within .game-art.logo-art img {
    transform:
      translateY(-5px)
      scale(1.065);
    filter:
      drop-shadow(0 13px 16px #7f581320)
      saturate(1.045);
  }
}

/* ---------- Featured -> About transition ---------- */

.studio-preview {
  margin-top:
    calc(
      var(--home-gap) + 8px
    );
}

.studio-preview::after {
  width: 92px;
}

.featured + .studio-preview {
  position: relative;
}

.featured + .studio-preview::before {
  opacity: .92;
}

/* ---------- CTA final alignment ---------- */

body:has(.home-hero[data-hero-interactive])
.cta-band {
  min-height: 108px;
}

body:has(.home-hero[data-hero-interactive])
.cta-band
.actions {
  align-items: center;
}

/* ---------- tablet ---------- */

@media (max-width: 1050px) {
  .home-hero[data-hero-interactive] .screen-left {
    left: 6%;
    width: 139px;
  }

  .home-hero[data-hero-interactive] .screen-right {
    right: 5%;
    width: 139px;
  }

  .home-hero[data-hero-interactive] .screen-main {
    width: 190px;
  }

  .featured .game-card {
    grid-template-columns: 42% 58%;
    min-height: 278px;
  }

  .featured .game-art,
  .featured .game-copy {
    min-height: 278px;
  }

  .featured .game-art.logo-art img {
    width: min(94%, 166px);
    max-height: 166px;
  }
}

/* ---------- smaller tablet / stacked cards ---------- */

@media (max-width: 850px) {
  body:has(.home-hero[data-hero-interactive])
  .site-header.home-nav-compact {
    padding-top: 7px;
  }

  body:has(.home-hero[data-hero-interactive])
  .site-header.home-nav-compact
  .nav-shell {
    min-height: 66px;
    padding-block: 8px;
  }
}

@media (max-width: 700px) {
  .featured .game-card {
    grid-template-columns: 42% 58%;
    min-height: 260px;
  }

  .featured .game-art,
  .featured .game-copy {
    min-height: 260px;
  }

  .featured .game-copy h3 {
    min-height: 0;
  }

  .featured .game-copy p {
    min-height: 0;
  }

  .featured .game-art.logo-art img {
    width: min(92%, 158px);
    max-height: 158px;
  }
}

/* ---------- mobile ---------- */

@media (max-width: 600px) {
  body:has(.home-hero[data-hero-interactive])
  .site-header.home-nav-compact {
    padding-top: 5px;
  }

  body:has(.home-hero[data-hero-interactive])
  .site-header.home-nav-compact
  .nav-shell {
    min-height: 62px;
    padding:
      7px
      14px;
    border-radius: 16px;
  }

  body:has(.home-hero[data-hero-interactive])
  .site-header.home-nav-compact
  .brand {
    transform: none;
  }

  .home-hero[data-hero-interactive] .screen-left {
    left: 7%;
    width: 118px;
  }

  .home-hero[data-hero-interactive] .screen-right {
    right: 5%;
    width: 118px;
  }

  .home-hero[data-hero-interactive] .screen-main {
    width: 166px;
  }

  .home-hero[data-hero-interactive] .hero-chip-bottom {
    right: 0;
    bottom: 14%;
  }

  .home-hero[data-hero-interactive] .hero-note {
    left: 56%;
  }

  .featured .game-card {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .featured .game-art {
    min-height: 250px;
    height: 250px;
  }

  .featured .game-copy {
    min-height: 0;
    padding: 17px 15px 16px;
  }

  .featured .game-copy h3,
  .featured .game-copy p {
    min-height: 0;
  }

  .featured .game-art.logo-art img {
    width: min(82%, 190px);
    max-height: 180px;
  }

  .studio-preview {
    margin-top:
      calc(
        var(--home-gap) + 4px
      );
  }

  body:has(.home-hero[data-hero-interactive])
  .cta-band {
    min-height: 0;
  }
}

/* ---------- reduced-motion ---------- */

@media (prefers-reduced-motion: reduce) {
  body:has(.home-hero[data-hero-interactive])
  .site-header,
  body:has(.home-hero[data-hero-interactive])
  .nav-shell,
  body:has(.home-hero[data-hero-interactive])
  .site-header
  .brand,
  body:has(.home-hero[data-hero-interactive])
  .nav-cta,
  .featured .game-art.logo-art img {
    transition: none !important;
  }
}

/* =========================================================
   BRAAQ CONTACT PAGE V2 — FINAL VISUAL + FUNCTIONAL QA
   Final Contact-only pass: stronger contact-method hierarchy,
   cleaner form density, explicit field states, polished draft
   result, and custom-select consistency without backend changes.
   ========================================================= */

/* ---------- page rhythm / intro ---------- */

body:has(#contact-form) {
  --contact-gap: clamp(25px, 3.8vw, 40px);
}

body:has(#contact-form) .site-header {
  filter: drop-shadow(0 9px 18px #12372d08);
}

body:has(#contact-form) .nav-shell {
  box-shadow:
    0 8px 22px #12372d0a,
    0 2px 6px #8b621008,
    inset 0 1px 0 #ffffff;
}

body:has(#contact-form) .page-intro {
  position: relative;
  isolation: isolate;
  min-height: 286px;
  margin-top: 22px;
  padding: clamp(32px, 4.4vw, 50px);
  overflow: hidden;
  border: 1px solid #e2e7df;
  border-radius: 27px;
  background:
    radial-gradient(circle at 86% 17%, #e6b64a12 0 5%, transparent 28%),
    radial-gradient(circle at 10% 88%, #0b5d4508 0 4%, transparent 29%),
    linear-gradient(#12372d04 1px, transparent 1px),
    linear-gradient(90deg, #12372d04 1px, transparent 1px),
    linear-gradient(135deg, #fffefa, #fbf9f2 58%, #f4f8f1);
  background-size:
    auto,
    auto,
    42px 42px,
    42px 42px,
    auto;
  box-shadow:
    0 17px 37px #12372d0c,
    0 4px 10px #8b611208,
    inset 0 1px 0 #ffffff;
}

body:has(#contact-form) .page-intro::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: -92px;
  top: -112px;
  width: 335px;
  height: 335px;
  border: 1px solid #d4a44020;
  border-radius: 50%;
  box-shadow:
    0 0 0 36px #d4a44007,
    0 0 0 74px #0b5d4503;
  pointer-events: none;
}

body:has(#contact-form) .page-intro::after {
  content: "";
  position: absolute;
  left: 28px;
  bottom: 23px;
  width: 64px;
  height: 28px;
  border-left: 1px solid #d0a13c4f;
  border-bottom: 1px solid #d0a13c4f;
  border-radius: 0 0 0 8px;
  pointer-events: none;
}

body:has(#contact-form) .page-intro > div:first-child {
  max-width: min(720px, 73%);
}

body:has(#contact-form) .page-intro .eyebrow {
  display: inline-flex;
  width: fit-content;
  padding: 8px 12px;
  border: 1px solid #e6dfce;
  border-radius: 999px;
  background: #fffefaeb;
  box-shadow:
    0 6px 15px #12372d08,
    inset 0 1px 0 #ffffff;
}

body:has(#contact-form) .page-intro h1 {
  margin-top: 16px;
  color: #143a2f;
  font-size: clamp(2.7rem, 5vw, 4.45rem);
  line-height: .98;
  letter-spacing: -0.055em;
  text-shadow: 0 12px 24px #12372d0a;
}

body:has(#contact-form) .page-intro h1::after {
  width: min(106px, 42%);
}

body:has(#contact-form) .page-intro .lead {
  max-width: 58ch;
  color: #596d62;
  font-size: clamp(1rem, 1.25vw, 1.09rem);
  line-height: 1.66;
}

body:has(#contact-form) .intro-motif {
  opacity: .18;
}

/* ---------- main two-column contact area ---------- */

body:has(#contact-form) .contact-grid {
  grid-template-columns:
    minmax(0, .78fr)
    minmax(0, 1.22fr);
  gap: 20px;
  align-items: start;
  margin-top: var(--contact-gap);
  margin-bottom: var(--contact-gap);
}

body:has(#contact-form) .contact-grid > .panel {
  border: 1px solid #dfe7df;
  border-radius: 21px;
  box-shadow:
    0 13px 28px #12372d0c,
    0 3px 7px #865c1107,
    inset 0 1px 0 #ffffff;
}

body:has(#contact-form) .contact-grid > .panel:first-child,
body:has(#contact-form) .contact-options {
  padding: 17px;
  background:
    radial-gradient(circle at 94% 7%, #e0ad390a, transparent 28%),
    linear-gradient(145deg, #fffefa, #fafcf8);
}

/* ---------- contact-method cards ---------- */

body:has(#contact-form) .contact-item {
  position: relative;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 13px;
  align-items: start;
  min-height: 104px;
  margin: 0 0 9px;
  padding: 15px;
  /* Clip decoration without creating an inner focus-scroll container. */
  overflow: clip;
  border: 1px solid #e1e8e2;
  border-radius: 14px;
  background:
    radial-gradient(circle at 93% 9%, #e0ad3908, transparent 27%),
    linear-gradient(145deg, #ffffff, #fafcf8);
  box-shadow:
    0 5px 11px #12372d07,
    inset 0 1px 0 #ffffff;
  transition:
    transform 190ms cubic-bezier(.22, 1, .36, 1),
    border-color 190ms ease,
    box-shadow 190ms ease,
    background 190ms ease;
}

body:has(#contact-form) .contact-item:last-child {
  margin-bottom: 0;
  border: 1px solid #e1e8e2;
}

body:has(#contact-form) .contact-item::after {
  content: "";
  position: absolute;
  z-index: 0;
  right: -24px;
  bottom: -29px;
  width: 86px;
  height: 86px;
  border-radius: 50%;
  background: radial-gradient(circle, #d9aa3b0d, transparent 69%);
  pointer-events: none;
}

body:has(#contact-form) .contact-item > * {
  position: relative;
  z-index: 1;
}

body:has(#contact-form) .contact-item .icon-disc {
  width: 49px;
  height: 49px;
  margin: 0;
  border-radius: 14px;
  box-shadow:
    0 3px 0 #d7e1d9,
    0 7px 12px #12372d0c,
    inset 0 1px 0 #ffffff;
}

body:has(#contact-form) .contact-item h3 {
  margin: 2px 0 5px;
  color: #194536;
  font-size: .94rem;
  letter-spacing: -0.02em;
}

body:has(#contact-form) .contact-item p {
  max-width: 42ch;
  color: #6c7b73;
  font-size: .75rem;
  line-height: 1.5;
}

body:has(#contact-form) .contact-item a[href^="mailto:"],
body:has(#contact-form) .contact-item a[href^="tel:"] {
  color: #146149;
  font-size: .79rem;
  font-weight: 740;
}

body:has(#contact-form) .contact-options [data-copy-email],
body:has(#contact-form) .contact-grid > .panel:first-child [data-copy-email] {
  min-height: 37px;
  margin-top: 6px;
  padding: 6px 11px;
  border-radius: 10px;
  font-size: .75rem;
}

body:has(#contact-form) .whatsapp-contact {
  margin: 9px 0;
  padding: 13px;
  border-radius: 14px;
}

body:has(#contact-form) .contact-call {
  min-height: 40px;
}

@media (hover: hover) and (pointer: fine) {
  body:has(#contact-form) .contact-item:hover {
    transform:
      perspective(720px)
      translateY(-2px)
      rotateX(.45deg);
    border-color: #cbdad0;
    background:
      radial-gradient(circle at 93% 9%, #e0ad390b, transparent 27%),
      linear-gradient(145deg, #ffffff, #f4f9f4);
    box-shadow:
      0 9px 17px #12372d0b,
      inset 0 1px 0 #ffffff;
  }

  body:has(#contact-form) .contact-item:hover .icon-disc {
    transform: translateY(-1px) rotate(-2deg);
  }
}

/* ---------- form panel ---------- */

body:has(#contact-form) .contact-form {
  position: relative;
  isolation: isolate;
  overflow: visible;
  padding: clamp(25px, 3.3vw, 35px);
  background:
    radial-gradient(circle at 94% 7%, #e0ad3908, transparent 25%),
    linear-gradient(145deg, #ffffff, #fffdf9);
}

body:has(#contact-form) .contact-form::before {
  content: "";
  position: absolute;
  left: 26px;
  top: 0;
  width: 84px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, #d3a039, transparent);
}

body:has(#contact-form) .contact-form::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: 0;
  bottom: -68px;
  width: 175px;
  height: 175px;
  border: 1px solid #d3a03914;
  border-radius: 50%;
  box-shadow:
    0 0 0 26px #d3a03905,
    0 0 0 52px #0b5d4503;
  pointer-events: none;
}

body:has(#contact-form) .contact-form h2 {
  margin: 0 0 7px;
  color: #173e32;
  font-size: clamp(1.45rem, 2vw, 1.78rem);
  letter-spacing: -0.04em;
}

body:has(#contact-form) .contact-form > p {
  max-width: 62ch;
  margin-bottom: 20px;
  color: #687970;
  font-size: .8rem;
  line-height: 1.55;
}

/* ---------- field geometry ---------- */

body:has(#contact-form) .form-grid {
  gap: 14px 15px;
}

body:has(#contact-form) .form-field {
  gap: 6px;
}

body:has(#contact-form) .form-field label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  color: #234a3b;
  font-size: .75rem;
  font-weight: 730;
}

body:has(#contact-form) .form-field label .fine {
  color: #607168;
  font-size: .66rem;
  font-weight: 560;
}

.contact-required {
  flex: 0 0 auto;
  color: #956915;
  font-size: .61rem;
  font-weight: 800;
  letter-spacing: .055em;
  text-transform: uppercase;
}

body:has(#contact-form) .form-field input,
body:has(#contact-form) .form-field textarea {
  min-height: 49px;
  padding: 11px 13px;
  border: 1px solid #cbd9d1;
  border-radius: 12px;
  background:
    linear-gradient(180deg, #ffffff, #fbfdf9);
  color: #26372f;
  font-size: .91rem;
  box-shadow:
    0 2px 0 #e1e7e2,
    0 5px 11px #12372d06,
    inset 0 1px 0 #ffffff;
  transition:
    transform 180ms cubic-bezier(.22, 1, .36, 1),
    border-color 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease;
}

body:has(#contact-form) .form-field textarea {
  min-height: 154px;
  line-height: 1.55;
}

body:has(#contact-form) .form-field input:hover,
body:has(#contact-form) .form-field textarea:hover {
  border-color: #aec5b8;
}

body:has(#contact-form) .form-field input:focus,
body:has(#contact-form) .form-field textarea:focus {
  transform: translateY(-1px);
  border-color: #43806c;
  background: #ffffff;
  outline: 0;
  box-shadow:
    0 0 0 3px #0b5d4510,
    0 2px 0 #dbe4dd,
    0 8px 16px #12372d09,
    inset 0 1px 0 #ffffff;
}

body:has(#contact-form) .form-field input:user-invalid,
body:has(#contact-form) .form-field textarea:user-invalid {
  border-color: #b96a55;
  box-shadow:
    0 0 0 3px #b96a550d,
    0 5px 11px #6f2d1c07,
    inset 0 1px 0 #ffffff;
}

/* ---------- custom selects inside Contact ---------- */

body:has(#contact-form) #contact-form .braaq-select-trigger {
  min-height: 49px;
  height: 49px;
  border-radius: 12px;
  font-size: .9rem;
}

body:has(#contact-form) #contact-form .braaq-select-chevron {
  width: 28px;
  height: 28px;
}

body:has(#contact-form) #contact-form .braaq-select-menu {
  top: calc(100% + 7px);
  border-radius: 13px;
  box-shadow:
    0 13px 27px #12372d13,
    0 4px 9px #7c571207,
    inset 0 1px 0 #ffffff;
}

body:has(#contact-form) #contact-form .braaq-select-option {
  min-height: 40px;
  font-size: .84rem;
}

/* ---------- purpose guidance / counters ---------- */

.contact-purpose-hint {
  grid-column: 1 / -1;
  margin: -3px 0 1px;
  padding: 10px 12px;
  border: 1px solid #e4e8de;
  border-radius: 11px;
  background:
    linear-gradient(90deg, #f3f8f2, #fff9ed);
  color: #62746a;
  font-size: .7rem;
  line-height: 1.46;
  box-shadow:
    inset 0 1px 0 #ffffff;
}

.field-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  min-height: 18px;
  color: #607168;
  font-size: .65rem;
  line-height: 1.4;
}

.field-counter {
  flex: 0 0 auto;
  color: #60746a;
  font-variant-numeric: tabular-nums;
  font-weight: 650;
}

.field-counter[data-near-limit="true"] {
  color: #956915;
}

.field-counter[data-at-limit="true"] {
  color: #9b4c3b;
}

/* Preserve legacy message hint but let the new meta row own layout. */
body:has(#contact-form) #message-hint.field-meta-copy {
  margin: 0;
}

/* ---------- primary submit ---------- */

body:has(#contact-form) .contact-form .button[type="submit"] {
  min-height: 49px;
  margin: 18px 0 9px;
  border-radius: 12px;
  box-shadow:
    0 4px 0 #064632,
    0 10px 18px #0b5d4518,
    inset 0 1px 0 #ffffff28;
}

body:has(#contact-form)
.contact-form
.button[type="submit"]:active {
  transform: translateY(2px);
  box-shadow:
    0 2px 0 #064632,
    0 5px 10px #0b5d4514,
    inset 0 1px 0 #ffffff22;
}

body:has(#contact-form)
.contact-form
form
> .fine {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  color: #65766d;
  font-size: .68rem;
}

body:has(#contact-form)
.contact-form
form
> .fine
.icon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: #246b54;
}

/* ---------- draft-ready state ---------- */

body:has(#contact-form) .draft-ready {
  position: relative;
  margin-top: 15px;
  padding: 16px;
  overflow: hidden;
  border: 1px solid #bcd5c3;
  border-radius: 14px;
  background:
    radial-gradient(circle at 94% 9%, #e1b13f12, transparent 29%),
    linear-gradient(145deg, #eff8f0, #fff8e8);
  box-shadow:
    0 9px 18px #12372d0b,
    inset 0 1px 0 #ffffff;
}

body:has(#contact-form) .draft-ready::before {
  content: "✓";
  position: absolute;
  right: 14px;
  top: 12px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: #1a7657;
  color: #ffffff;
  font-size: .8rem;
  font-weight: 900;
  box-shadow:
    0 3px 0 #0d583f,
    0 7px 12px #0b5d4514;
}

body:has(#contact-form) .draft-ready p {
  max-width: calc(100% - 44px);
  margin-bottom: 11px;
  color: #345b4c;
  font-size: .75rem;
  line-height: 1.48;
}

body:has(#contact-form) .draft-actions {
  gap: 8px;
}

body:has(#contact-form) .draft-actions .button {
  min-height: 41px;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: .74rem;
}

body:has(#contact-form) .draft-help {
  max-width: 62ch;
  margin-top: 12px !important;
  color: #6f7d75 !important;
  font-size: .66rem !important;
  line-height: 1.46;
}

body:has(#contact-form) #manual-draft {
  width: 100%;
  margin-top: 8px;
  padding: 11px;
  border: 1px solid #cad8cf;
  border-radius: 10px;
  background: #ffffff;
  color: #314a40;
  font: inherit;
  font-size: .72rem;
  line-height: 1.5;
}

/* ---------- contact CTA handoff ---------- */

body:has(#contact-form) .cta-band {
  margin-top: 0;
  margin-bottom: 30px;
}

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  body:has(#contact-form) .contact-grid {
    grid-template-columns: 1fr;
  }

  body:has(#contact-form) .contact-grid > .panel:first-child,
  body:has(#contact-form) .contact-options {
    display: grid;
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
    gap: 9px;
  }

  body:has(#contact-form)
  .contact-grid
  > .panel:first-child
  > .contact-item,
  body:has(#contact-form)
  .contact-options
  > .contact-item {
    margin: 0;
  }

  body:has(#contact-form)
  .contact-grid
  > .panel:first-child
  > .sr-only,
  body:has(#contact-form)
  .contact-options
  > .sr-only {
    position: absolute;
  }

  body:has(#contact-form) .whatsapp-contact {
    margin: 0;
  }
}

@media (max-width: 700px) {
  body:has(#contact-form) .page-intro > div:first-child {
    max-width: 100%;
  }

  body:has(#contact-form) .intro-motif {
    display: none;
  }

  body:has(#contact-form) .form-grid {
    grid-template-columns: 1fr;
  }

  body:has(#contact-form) .form-field.full {
    grid-column: auto;
  }

  .contact-purpose-hint {
    grid-column: auto;
  }
}

@media (max-width: 600px) {
  body:has(#contact-form) {
    --contact-gap: 21px;
  }

  body:has(#contact-form) .page-intro {
    min-height: 0;
    margin-top: 10px;
    padding: 23px 18px 27px;
    border-radius: 21px;
  }

  body:has(#contact-form) .page-intro h1 {
    font-size: clamp(2.35rem, 12vw, 3.1rem);
  }

  body:has(#contact-form) .contact-grid {
    gap: 14px;
  }

  body:has(#contact-form) .contact-grid > .panel:first-child,
  body:has(#contact-form) .contact-options {
    grid-template-columns: 1fr;
    padding: 12px;
  }

  body:has(#contact-form) .contact-item {
    min-height: 0;
    padding: 13px;
  }

  body:has(#contact-form) .contact-form {
    padding: 21px 15px;
    border-radius: 19px;
  }

  body:has(#contact-form) .form-grid {
    gap: 12px;
  }

  body:has(#contact-form) .form-field input,
  body:has(#contact-form) .form-field textarea,
  body:has(#contact-form) #contact-form .braaq-select-trigger {
    min-height: 47px;
  }

  body:has(#contact-form) .form-field textarea {
    min-height: 140px;
  }

  body:has(#contact-form) .draft-actions .button {
    flex: 1 1 100%;
  }

  body:has(#contact-form) .cta-band {
    margin-bottom: 24px;
  }
}

/* ---------- touch / reduced motion ---------- */

@media (hover: none), (pointer: coarse) {
  body:has(#contact-form) .contact-item:hover,
  body:has(#contact-form) .contact-item:hover .icon-disc {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  body:has(#contact-form) .contact-item,
  body:has(#contact-form) .contact-item .icon-disc,
  body:has(#contact-form) .form-field input,
  body:has(#contact-form) .form-field textarea {
    transition: none !important;
  }

  body:has(#contact-form) .contact-item:hover,
  body:has(#contact-form) .contact-item:hover .icon-disc,
  body:has(#contact-form) .form-field input:focus,
  body:has(#contact-form) .form-field textarea:focus {
    transform: none !important;
  }
}

/* =========================================================
   BRAAQ CONTACT PAGE V2.1 — FINAL CONTRAST + MICRO-POLISH
   Final lock pass. Fixes the Call Us foreground specificity
   conflict and applies restrained accessibility/spacing polish.
   No Contact JavaScript behavior is changed in V2.1.
   ========================================================= */

/* ---------- Call Us: explicit high-contrast button ---------- */

body:has(#contact-form)
.contact-item
a.contact-call[href^="tel:"],
body:has(#contact-form)
.contact-item
a.contact-call[href^="tel:"]:visited {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: fit-content;
  min-width: 106px;
  min-height: 44px;
  margin-top: 7px;
  padding: 9px 14px;
  overflow: hidden;
  border: 1px solid #07523d;
  border-radius: 11px;
  background:
    linear-gradient(
      180deg,
      #176f55 0%,
      #0b5d45 62%,
      #07523d 100%
    );
  color: #fffdf7;
  font-size: .78rem;
  font-weight: 760;
  line-height: 1;
  text-decoration: none;
  text-shadow: 0 1px 1px #052d2180;
  box-shadow:
    0 4px 0 #064632,
    0 9px 16px #0b5d4519,
    inset 0 1px 0 #ffffff2e;
  transition:
    transform 180ms cubic-bezier(.22, 1, .36, 1),
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease,
    color 180ms ease;
}

body:has(#contact-form)
.contact-item
a.contact-call[href^="tel:"]
.icon {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  color: currentColor;
  stroke: currentColor;
  filter: drop-shadow(0 1px 1px #052d2152);
  transform: none;
}

body:has(#contact-form)
.contact-item
a.contact-call[href^="tel:"]
span {
  color: currentColor;
}

body:has(#contact-form)
.contact-item
a.contact-call[href^="tel:"]::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -45%;
  left: -34%;
  width: 30%;
  height: 190%;
  pointer-events: none;
  background:
    linear-gradient(
      100deg,
      transparent,
      #ffffff2d,
      transparent
    );
  transform: skewX(-18deg);
  transition:
    left 320ms cubic-bezier(.22, 1, .36, 1);
}

@media (hover: hover) and (pointer: fine) {
  body:has(#contact-form)
  .contact-item
  a.contact-call[href^="tel:"]:hover {
    transform: translateY(-2px);
    border-color: #086047;
    background:
      linear-gradient(
        180deg,
        #1b7a5d 0%,
        #0d694e 60%,
        #08543f 100%
      );
    color: #ffffff;
    box-shadow:
      0 5px 0 #064632,
      0 13px 21px #0b5d4520,
      inset 0 1px 0 #ffffff38;
  }

  body:has(#contact-form)
  .contact-item
  a.contact-call[href^="tel:"]:hover::after {
    left: 112%;
  }

  body:has(#contact-form)
  .contact-item
  a.contact-call[href^="tel:"]:hover
  .icon {
    transform: translateY(-1px) rotate(-3deg);
  }
}

body:has(#contact-form)
.contact-item
a.contact-call[href^="tel:"]:active {
  transform: translateY(1px);
  background:
    linear-gradient(
      180deg,
      #0d6149,
      #07523d
    );
  box-shadow:
    0 2px 0 #053c2d,
    0 5px 10px #0b5d4516,
    inset 0 1px 0 #ffffff22;
}

body:has(#contact-form)
.contact-item
a.contact-call[href^="tel:"]:focus-visible {
  outline: 3px solid #956508;
  outline-offset: 3px;
  color: #ffffff;
  box-shadow:
    0 4px 0 #064632,
    0 0 0 5px #fff9ed,
    0 12px 20px #0b5d451c,
    inset 0 1px 0 #ffffff30;
}

/* ---------- contact-card micro alignment ---------- */

body:has(#contact-form)
.contact-item:has(.contact-call) {
  min-height: 112px;
}

body:has(#contact-form)
.contact-item:has(.contact-call)
h3 {
  margin-top: 1px;
}

body:has(#contact-form)
.contact-item
.icon-disc {
  transition:
    transform 190ms cubic-bezier(.22, 1, .36, 1),
    box-shadow 190ms ease,
    background 190ms ease;
}

/* Copy-email button gets the same clear keyboard treatment. */

body:has(#contact-form)
[data-copy-email]:focus-visible {
  outline: 3px solid #956508;
  outline-offset: 3px;
  box-shadow:
    0 0 0 5px #fff9ed,
    0 7px 14px #12372d0c;
}

/* ---------- form-field final clarity ---------- */

body:has(#contact-form)
.form-field
label {
  min-height: 20px;
}

body:has(#contact-form)
.contact-required {
  padding-top: 1px;
}

body:has(#contact-form)
.contact-purpose-hint {
  border-color: #dfe5d9;
  color: #5f7067;
}

body:has(#contact-form)
.field-counter {
  min-width: 58px;
  text-align: right;
}

/* Stronger but still restrained invalid state. */

body:has(#contact-form)
.form-field
input:user-invalid:focus,
body:has(#contact-form)
.form-field
textarea:user-invalid:focus {
  border-color: #a85d49;
  box-shadow:
    0 0 0 3px #b96a5514,
    0 7px 14px #6f2d1c09,
    inset 0 1px 0 #ffffff;
}

/* ---------- draft-ready micro-polish ---------- */

body:has(#contact-form)
.draft-ready {
  border-color: #b6d1bd;
  box-shadow:
    0 10px 20px #12372d0c,
    inset 0 1px 0 #ffffff;
}

body:has(#contact-form)
.draft-ready::before {
  width: 29px;
  height: 29px;
  background:
    linear-gradient(
      180deg,
      #24815f,
      #176c50
    );
}

body:has(#contact-form)
.draft-actions
.button {
  min-height: 42px;
}

body:has(#contact-form)
.draft-actions
.button.outline {
  background: #fffefa;
}

/* ---------- small-screen touch polish ---------- */

@media (max-width: 600px) {
  body:has(#contact-form)
  .contact-item
  a.contact-call[href^="tel:"] {
    min-width: 112px;
    min-height: 46px;
  }

  body:has(#contact-form)
  .contact-item:has(.contact-call) {
    min-height: 0;
  }

  body:has(#contact-form)
  .field-meta {
    align-items: flex-start;
  }

  body:has(#contact-form)
  .field-counter {
    min-width: 54px;
  }
}

/* ---------- touch / reduced-motion safeguards ---------- */

@media (hover: none), (pointer: coarse) {
  body:has(#contact-form)
  .contact-item
  a.contact-call[href^="tel:"]:hover {
    transform: none;
  }

  body:has(#contact-form)
  .contact-item
  a.contact-call[href^="tel:"]:hover
  .icon {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  body:has(#contact-form)
  .contact-item
  a.contact-call[href^="tel:"],
  body:has(#contact-form)
  .contact-item
  a.contact-call[href^="tel:"]
  .icon,
  body:has(#contact-form)
  .contact-item
  a.contact-call[href^="tel:"]::after {
    transition: none !important;
  }

  body:has(#contact-form)
  .contact-item
  a.contact-call[href^="tel:"]:hover,
  body:has(#contact-form)
  .contact-item
  a.contact-call[href^="tel:"]:active,
  body:has(#contact-form)
  .contact-item
  a.contact-call[href^="tel:"]:hover
  .icon {
    transform: none !important;
  }
}

/* =========================================================
   BRAAQ CONTACT PAGE V2.2 — REQUIRED IDENTITY + MEDIA
   Required Name + Reply Email, optional WhatsApp contact,
   local image/video selection, attachment review, and a
   polished admin-facing email-template workflow.
   ========================================================= */

/* ---------- required identity row ---------- */

body:has(#contact-form)
#name,
body:has(#contact-form)
#email {
  background:
    linear-gradient(
      180deg,
      #ffffff,
      #fbfdf9
    );
}

body:has(#contact-form)
.form-field:has(#name),
body:has(#contact-form)
.form-field:has(#email) {
  position: relative;
}

body:has(#contact-form)
.form-field:has(#name)::after,
body:has(#contact-form)
.form-field:has(#email)::after {
  content: "";
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #d3a039;
  opacity: .68;
  pointer-events: none;
}

/* ---------- WhatsApp field ---------- */

.contact-whatsapp-field {
  grid-column: 1 / -1;
}

.contact-whatsapp-shell {
  position: relative;
}

.contact-whatsapp-shell::before {
  content: "WA";
  position: absolute;
  z-index: 2;
  left: 13px;
  top: 50%;
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border: 1px solid #bcd9c7;
  border-radius: 9px;
  background:
    linear-gradient(
      145deg,
      #e9f8ed,
      #dff1e4
    );
  color: #18744f;
  font-size: .56rem;
  font-weight: 900;
  letter-spacing: .02em;
  box-shadow:
    0 2px 0 #c6dccd,
    0 5px 9px #12372d08,
    inset 0 1px 0 #ffffff;
  transform: translateY(-50%);
  pointer-events: none;
}

body:has(#contact-form)
.contact-whatsapp-shell
#whatsapp {
  width: 100%;
  padding-left: 50px;
}

.contact-field-help {
  display: block;
  margin-top: 5px;
  color: #607168;
  font-size: .65rem;
  line-height: 1.45;
}

/* ---------- media attachment center ---------- */

.contact-attachments {
  grid-column: 1 / -1;
  position: relative;
  isolation: isolate;
  margin-top: 1px;
  padding: 15px;
  overflow: hidden;
  border: 1px solid #dce5dd;
  border-radius: 15px;
  background:
    radial-gradient(
      circle at 94% 8%,
      #e0ad3909,
      transparent 28%
    ),
    linear-gradient(
      145deg,
      #fbfdf9,
      #fffaf0
    );
  box-shadow:
    0 6px 13px #12372d07,
    inset 0 1px 0 #ffffff;
}

.contact-attachments::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -30px;
  bottom: -38px;
  width: 105px;
  height: 105px;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      #d8aa3b0d,
      transparent 69%
    );
}

.contact-attachment-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 11px;
}

.contact-attachment-heading > div {
  min-width: 0;
}

.contact-attachment-heading strong {
  display: block;
  color: #234a3b;
  font-size: .76rem;
}

.contact-attachment-heading span {
  display: block;
  margin-top: 3px;
  color: #607168;
  font-size: .65rem;
  line-height: 1.42;
}

.contact-attachment-limit {
  flex: 0 0 auto;
  padding: 5px 7px;
  border: 1px solid #e0e5da;
  border-radius: 999px;
  background: #fffefa;
  color: #8a6319 !important;
  font-size: .59rem !important;
  font-weight: 780;
  letter-spacing: .035em;
  white-space: nowrap;
}

.contact-attachment-pickers {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.contact-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.contact-file-picker {
  position: relative;
  display: grid;
  grid-template-columns: 39px minmax(0, 1fr) 18px;
  gap: 10px;
  align-items: center;
  min-height: 67px;
  padding: 10px 11px;
  border: 1px solid #dce5dd;
  border-radius: 12px;
  background:
    linear-gradient(
      145deg,
      #ffffff,
      #f6faf6
    );
  color: #194536;
  cursor: pointer;
  box-shadow:
    0 4px 9px #12372d06,
    inset 0 1px 0 #ffffff;
  transition:
    transform 180ms cubic-bezier(.22, 1, .36, 1),
    border-color 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease;
}

.contact-file-picker-icon {
  display: grid;
  place-items: center;
  width: 39px;
  height: 39px;
  border: 1px solid #d1e0d5;
  border-radius: 11px;
  background:
    radial-gradient(
      circle at 28% 20%,
      #ffffff,
      transparent 43%
    ),
    linear-gradient(
      145deg,
      #eef7ef,
      #e3efe5
    );
  color: #17644c;
  box-shadow:
    0 2px 0 #d2ded5,
    0 5px 9px #12372d08,
    inset 0 1px 0 #ffffff;
}

.contact-file-picker-icon svg {
  width: 18px;
  height: 18px;
}

.contact-file-picker-copy strong {
  display: block;
  color: #194536;
  font-size: .72rem;
}

.contact-file-picker-copy span {
  display: block;
  margin-top: 2px;
  color: #607168;
  font-size: .61rem;
  line-height: 1.35;
}

.contact-file-picker-arrow {
  color: #246a54;
  font-size: 1rem;
  font-weight: 850;
}

.contact-file-picker:focus-within {
  outline: 3px solid #0b5d45;
  outline-offset: 3px;
  border-color: #43806c;
  box-shadow:
    0 0 0 3px #0b5d4510,
    0 5px 10px #12372d08,
    inset 0 1px 0 #ffffff;
}

@media (hover: hover) and (pointer: fine) {
  .contact-file-picker:hover {
    transform: translateY(-2px);
    border-color: #c9d9cf;
    background:
      linear-gradient(
        145deg,
        #ffffff,
        #f0f7f1
      );
    box-shadow:
      0 8px 15px #12372d0a,
      inset 0 1px 0 #ffffff;
  }
}

/* ---------- selected attachment review ---------- */

.contact-attachment-list {
  display: grid;
  gap: 7px;
  margin-top: 10px;
}

.contact-attachment-list[hidden] {
  display: none;
}

.contact-attachment-item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 54px;
  padding: 7px 8px;
  border: 1px solid #e1e7e1;
  border-radius: 11px;
  background: #fffefa;
}

.contact-attachment-thumb {
  display: grid;
  place-items: center;
  width: 44px;
  height: 40px;
  overflow: hidden;
  border: 1px solid #d7e1d9;
  border-radius: 9px;
  background:
    linear-gradient(
      145deg,
      #edf6ef,
      #f5efdf
    );
  color: #176049;
}

.contact-attachment-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.contact-attachment-thumb svg {
  width: 18px;
  height: 18px;
}

.contact-attachment-copy {
  min-width: 0;
}

.contact-attachment-copy strong {
  display: block;
  overflow: hidden;
  color: #234a3b;
  font-size: .68rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contact-attachment-copy span {
  display: block;
  margin-top: 2px;
  color: #607168;
  font-size: .59rem;
}

.contact-attachment-remove {
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  padding: 0;
  border: 1px solid #dbe4dd;
  border-radius: 9px;
  background: #f7faf7;
  color: #286a55;
  cursor: pointer;
  box-shadow:
    0 2px 0 #dce4de,
    inset 0 1px 0 #ffffff;
}

.contact-attachment-remove:hover {
  background: #fff4ef;
  color: #9b4d3c;
}

.contact-attachment-summary {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid #e5e9e2;
  color: #607168;
  font-size: .61rem;
}

.contact-attachment-summary strong {
  color: #536b5f;
  font-weight: 720;
}

/* ---------- attachment privacy / delivery notice ---------- */

.contact-attachment-notice {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: -2px;
  padding: 9px 11px;
  border: 1px solid #e5dfcf;
  border-radius: 10px;
  background:
    linear-gradient(
      90deg,
      #fffaf0,
      #f6f9f2
    );
  color: #6f756c;
  font-size: .63rem;
  line-height: 1.46;
}

.contact-attachment-notice::before {
  content: "i";
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 1px solid #dec98f;
  border-radius: 50%;
  color: #956915;
  font-size: .61rem;
  font-weight: 850;
}

/* ---------- draft-ready attachment action ---------- */

#eml-draft[hidden] {
  display: none;
}

body:has(#contact-form)
#eml-draft {
  border-color: #c9a64e;
  background:
    linear-gradient(
      180deg,
      #fff9e8,
      #f6edcf
    );
  color: #674812;
}

body:has(#contact-form)
#eml-draft:hover {
  border-color: #b89030;
  background:
    linear-gradient(
      180deg,
      #fff6d8,
      #f1e2b4
    );
  color: #5b3d0d;
}

.draft-template-note {
  margin-top: 9px;
  padding: 9px 10px;
  border: 1px solid #dce5dc;
  border-radius: 10px;
  background: #ffffffa8;
  color: #66776e;
  font-size: .63rem;
  line-height: 1.46;
}

/* ---------- responsive ---------- */

@media (max-width: 700px) {
  .contact-whatsapp-field,
  .contact-attachments,
  .contact-attachment-notice {
    grid-column: auto;
  }

  .contact-attachment-pickers {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .contact-attachments {
    padding: 12px;
  }

  .contact-attachment-heading {
    flex-direction: column;
    gap: 6px;
  }

  .contact-attachment-limit {
    align-self: flex-start;
  }

  .contact-file-picker {
    min-height: 64px;
  }

  .contact-attachment-item {
    grid-template-columns: 40px minmax(0, 1fr) auto;
  }

  .contact-attachment-thumb {
    width: 40px;
    height: 38px;
  }

  .contact-attachment-summary {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }
}

@media (hover: none), (pointer: coarse) {
  .contact-file-picker:hover {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .contact-file-picker,
  .contact-attachment-remove {
    transition: none !important;
  }

  .contact-file-picker:hover {
    transform: none !important;
  }
}

/* =========================================================
   BRAAQ CONTACT PAGE V2.3 — FINAL LAYOUT + ATTACHMENT UX
   Final Contact lock pass.
   ========================================================= */

body:has(#contact-form)
.form-field:has(#purpose),
body:has(#contact-form)
.form-field:has(#game) {
  min-width: 0;
}

body:has(#contact-form)
.form-field:has(#purpose) .braaq-select,
body:has(#contact-form)
.form-field:has(#game) .braaq-select {
  width: 100%;
}

body:has(#contact-form)
.contact-purpose-hint {
  grid-column: 1 / -1;
  margin: -2px 0 1px;
  min-height: 39px;
  display: flex;
  align-items: center;
  padding: 9px 12px;
  border-color: #dfe5d9;
  border-radius: 11px;
  background:
    linear-gradient(90deg, #f3f8f2, #fff9ed);
  color: #607168;
  line-height: 1.45;
  box-shadow: inset 0 1px 0 #ffffff;
}

body:has(#contact-form)
#message-hint.field-meta-copy {
  max-width: 72ch;
  color: #607168;
}

body:has(#contact-form)
.contact-attachments[data-has-files="true"] {
  border-color: #bfd5c5;
  background:
    radial-gradient(circle at 94% 8%, #e0ad3910, transparent 28%),
    linear-gradient(145deg, #f5fbf5, #fff9ed);
  box-shadow:
    0 9px 18px #12372d0b,
    0 0 0 3px #0b5d4506,
    inset 0 1px 0 #ffffff;
}

body:has(#contact-form)
.contact-attachments[data-has-files="true"]
.contact-attachment-heading strong:first-child {
  color: #165f48;
}

body:has(#contact-form)
.contact-attachments[data-has-files="true"]
.contact-attachment-limit {
  border-color: #cbd8bd;
  background: #f4f8e9;
  color: #7d5a16 !important;
}

body:has(#contact-form)
.contact-file-picker[data-has-selection="true"] {
  border-color: #c3d8c9;
  background: linear-gradient(145deg, #f5fbf5, #edf7ef);
}

body:has(#contact-form)
.contact-file-picker[data-has-selection="true"]
.contact-file-picker-icon {
  border-color: #bdd5c4;
  background: linear-gradient(145deg, #e6f5e9, #dceee0);
  color: #126347;
}

body:has(#contact-form)
.contact-attachment-list {
  gap: 6px;
}

body:has(#contact-form)
.contact-attachment-item {
  min-height: 52px;
  padding: 6px 8px;
  border-color: #dce5de;
  background: linear-gradient(145deg, #ffffff, #fbfdf9);
  box-shadow:
    0 3px 7px #12372d05,
    inset 0 1px 0 #ffffff;
}

body:has(#contact-form)
.contact-attachment-remove {
  transition:
    transform 160ms cubic-bezier(.22, 1, .36, 1),
    border-color 160ms ease,
    background 160ms ease,
    color 160ms ease,
    box-shadow 160ms ease;
}

body:has(#contact-form)
.contact-attachment-remove:focus-visible {
  outline: 3px solid #956508;
  outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
  body:has(#contact-form)
  .contact-attachment-remove:hover {
    transform: translateY(-1px);
    border-color: #ddb9ad;
    background: #fff4ef;
    color: #994c3a;
    box-shadow:
      0 3px 0 #ead8d1,
      0 6px 10px #7a35240a;
  }
}

body:has(#contact-form)
.contact-attachment-notice {
  margin-top: 0;
  border-color: #e3dece;
  background: linear-gradient(90deg, #fffaf0, #f6f9f3);
}

body:has(#contact-form)
.draft-ready:has(#eml-draft:not([hidden])) {
  border-color: #b5cfbd;
  background:
    radial-gradient(circle at 94% 9%, #e1b13f14, transparent 29%),
    linear-gradient(145deg, #eef8ef, #fff7e6);
}

body:has(#contact-form)
.contact-form {
  padding-bottom: clamp(28px, 3.4vw, 38px);
}

/* Compact the floating WhatsApp CTA on shorter desktop/laptop viewports
   so it does not cover the lower-right area of the long Contact form. */
@media (min-width: 701px) and (max-height: 820px) {
  body:has(#contact-form)
  .whatsapp-float {
    width: 58px;
    min-width: 58px;
    height: 58px;
    min-height: 58px;
    padding: 0;
    border-radius: 50%;
    justify-content: center;
    gap: 0;
  }

  body:has(#contact-form)
  .whatsapp-float > span {
    display: none;
  }

  body:has(#contact-form)
  .whatsapp-float .icon {
    width: 21px;
    height: 21px;
    margin: 0;
  }
}

@media (max-width: 700px) {
  body:has(#contact-form)
  .contact-purpose-hint {
    grid-column: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  body:has(#contact-form)
  .contact-attachment-remove {
    transition: none !important;
  }

  body:has(#contact-form)
  .contact-attachment-remove:hover {
    transform: none !important;
  }
}

/* =========================================================
   BRAAQ CONTACT PAGE V2.4 — CLEAN ATTACHMENT DELIVERY FLOW
   Removes confusing technical warning copy from the main form.
   Makes the attachment path explicit and action-led.
   ========================================================= */

body:has(#contact-form)
.contact-attachment-notice {
  display: none !important;
}

body:has(#contact-form)
.contact-attachments[data-has-files="true"]
.contact-attachment-summary::before {
  content: "Files ready";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 21px;
  margin-right: 7px;
  padding: 3px 7px;
  border: 1px solid #c5d9cb;
  border-radius: 999px;
  background: #edf8ef;
  color: #176049;
  font-size: .56rem;
  font-weight: 800;
  letter-spacing: .045em;
  text-transform: uppercase;
}

body:has(#contact-form)
#contact-form
button[type="submit"][data-has-files="true"] {
  background:
    linear-gradient(180deg, #197457, #0b5d45);
  box-shadow:
    0 4px 0 #064632,
    0 11px 20px #0b5d451d,
    inset 0 1px 0 #ffffff2d;
}

body:has(#contact-form)
#eml-draft {
  border-color: #0b5d45;
  background:
    linear-gradient(180deg, #197457, #0b5d45);
  color: #fffdf7;
  box-shadow:
    0 3px 0 #064632,
    0 8px 14px #0b5d4518,
    inset 0 1px 0 #ffffff2a;
}

body:has(#contact-form)
#eml-draft:hover {
  border-color: #086047;
  background:
    linear-gradient(180deg, #1d7d5f, #0d674d);
  color: #ffffff;
}

body:has(#contact-form)
.draft-ready
.draft-file-guidance {
  margin-top: 10px;
  padding: 9px 10px;
  border: 1px solid #dfe5d9;
  border-radius: 10px;
  background:
    linear-gradient(90deg, #f2f8f2, #fff9ee);
  color: #607168;
  font-size: .64rem;
  line-height: 1.46;
}

body:has(#contact-form)
.draft-ready
.draft-file-guidance strong {
  color: #176049;
}

@media (max-width: 600px) {
  body:has(#contact-form)
  .contact-attachments[data-has-files="true"]
  .contact-attachment-summary::before {
    margin-right: 4px;
  }
}

/* =========================================================
   BRAAQ LEGAL PAGES V2 — FINAL CONSISTENCY PASS
   Privacy Center + game privacy + Terms + Data Requests + 404
   Presentation only: legal/privacy copy is intentionally unchanged.
   ========================================================= */

/* ---------- shared legal page atmosphere ---------- */

body:has(.legal-layout) main > .container {
  --legal-gap: clamp(24px, 3.6vw, 38px);
}

body:has(.legal-layout) .page-intro {
  position: relative;
  isolation: isolate;
  min-height: 278px;
  margin-top: 22px;
  padding: clamp(32px, 4.5vw, 50px);
  overflow: hidden;
  border: 1px solid #e0e7df;
  border-radius: 27px;
  background:
    radial-gradient(circle at 88% 14%, #e5b33c14 0 5%, transparent 29%),
    radial-gradient(circle at 9% 90%, #0b5d4507 0 4%, transparent 28%),
    linear-gradient(#12372d04 1px, transparent 1px),
    linear-gradient(90deg, #12372d04 1px, transparent 1px),
    linear-gradient(145deg, #fffefa, #fbfaf4 58%, #f4f8f1);
  background-size:
    auto,
    auto,
    42px 42px,
    42px 42px,
    auto;
  box-shadow:
    0 17px 36px #12372d0c,
    0 4px 9px #8b611207,
    inset 0 1px 0 #ffffff;
}

body:has(.legal-layout) .page-intro::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: -88px;
  top: -116px;
  width: 330px;
  height: 330px;
  border: 1px solid #d3a0391e;
  border-radius: 50%;
  box-shadow:
    0 0 0 36px #d3a03906,
    0 0 0 73px #0b5d4503;
  pointer-events: none;
}

body:has(.legal-layout) .page-intro::after {
  content: "";
  position: absolute;
  left: 28px;
  bottom: 23px;
  width: 66px;
  height: 28px;
  border-left: 1px solid #d3a03951;
  border-bottom: 1px solid #d3a03951;
  border-radius: 0 0 0 8px;
  pointer-events: none;
}

body:has(.legal-layout) .page-intro > div:first-child {
  max-width: min(760px, 74%);
}

body:has(.legal-layout) .page-intro .eyebrow {
  display: inline-flex;
  width: fit-content;
  padding: 8px 12px;
  border: 1px solid #e7dfcf;
  border-radius: 999px;
  background: #fffefaeb;
  box-shadow:
    0 6px 14px #12372d07,
    inset 0 1px 0 #ffffff;
}

body:has(.legal-layout) .page-intro h1 {
  margin-top: 16px;
  color: #143a2f;
  font-size: clamp(2.65rem, 5vw, 4.35rem);
  line-height: .99;
  letter-spacing: -0.055em;
  text-shadow: 0 11px 23px #12372d09;
}

body:has(.legal-layout) .page-intro .lead {
  max-width: 62ch;
  color: #5b6e63;
  font-size: clamp(.98rem, 1.25vw, 1.08rem);
  line-height: 1.66;
}

body:has(.legal-layout) .intro-motif {
  opacity: .17;
}

/* ---------- update/date line ---------- */

body:has(.legal-layout) .page-intro + .fine {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  margin: 15px 0 0 2px;
  padding: 6px 10px;
  border: 1px solid #e2e7df;
  border-radius: 999px;
  background: #fffefa;
  color: #687a70;
  box-shadow:
    0 4px 9px #12372d06,
    inset 0 1px 0 #ffffff;
}

body:has(.legal-layout) .page-intro + .fine::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #d3a039;
  box-shadow: 0 0 0 4px #d3a03910;
}

/* ---------- privacy game cards ---------- */

body:has(.legal-layout) .privacy-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: var(--legal-gap);
  margin-bottom: var(--legal-gap);
}

body:has(.legal-layout) .privacy-cards .panel {
  position: relative;
  isolation: isolate;
  min-width: 0;
  min-height: 210px;
  padding: 20px 18px 18px;
  overflow: hidden;
  border: 1px solid #dfe7df;
  border-radius: 18px;
  background:
    radial-gradient(circle at 92% 8%, #e0ad390b, transparent 29%),
    linear-gradient(145deg, #ffffff, #fafcf8);
  box-shadow:
    0 9px 19px #12372d0a,
    inset 0 1px 0 #ffffff;
  transition:
    transform 190ms cubic-bezier(.22, 1, .36, 1),
    border-color 190ms ease,
    box-shadow 190ms ease;
}

body:has(.legal-layout) .privacy-cards .panel::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 0;
  width: 58px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, #d3a039, transparent);
}

body:has(.legal-layout) .privacy-cards .panel::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -31px;
  bottom: -39px;
  width: 105px;
  height: 105px;
  border: 1px solid #d3a03912;
  border-radius: 50%;
  box-shadow: 0 0 0 21px #0b5d4503;
}

body:has(.legal-layout) .privacy-cards .icon-disc {
  width: 47px;
  height: 47px;
  margin-bottom: 13px;
}

body:has(.legal-layout) .privacy-cards h2 {
  margin: 0 0 8px;
  color: #194536;
  font-size: 1rem;
  letter-spacing: -0.025em;
}

body:has(.legal-layout) .privacy-cards p {
  margin: 0 0 13px;
  color: #697a70;
  font-size: .76rem;
  line-height: 1.56;
}

body:has(.legal-layout) .privacy-cards .text-link {
  margin-top: auto;
}

@media (hover: hover) and (pointer: fine) {
  body:has(.legal-layout) .privacy-cards .panel:hover,
  body:has(.legal-layout) .privacy-cards .panel:focus-within {
    transform:
      perspective(800px)
      translateY(-3px)
      rotateX(.4deg);
    border-color: #c8d8ce;
    box-shadow:
      0 13px 24px #12372d0e,
      inset 0 1px 0 #ffffff;
  }
}

/* ---------- audited / verification notice ---------- */

body:has(.legal-layout) .notice {
  position: relative;
  margin-top: var(--legal-gap);
  padding: 16px 18px 16px 53px;
  overflow: hidden;
  border: 1px solid #e1d3aa;
  border-radius: 15px;
  background:
    radial-gradient(circle at 95% 11%, #d3a03910, transparent 28%),
    linear-gradient(90deg, #fff8e8, #f7f8ed);
  color: #665f4b;
  box-shadow:
    0 8px 17px #8c64100a,
    inset 0 1px 0 #ffffff;
}

body:has(.legal-layout) .notice::before {
  content: "!";
  position: absolute;
  left: 16px;
  top: 16px;
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border: 1px solid #d8b65c;
  border-radius: 9px;
  background:
    linear-gradient(145deg, #fff9df, #f0dfaa);
  color: #8c6313;
  font-size: .72rem;
  font-weight: 900;
  box-shadow:
    0 2px 0 #dfcc91,
    inset 0 1px 0 #ffffff;
}

body:has(.legal-layout) .notice strong {
  display: block;
  margin-bottom: 4px;
  color: #765412;
  font-size: .78rem;
}

body:has(.legal-layout) .notice p {
  margin: 0;
  color: #716a57;
  font-size: .72rem;
  line-height: 1.55;
}

/* ---------- main legal layout ---------- */

body:has(.legal-layout) .legal-layout {
  display: grid;
  grid-template-columns:
    minmax(190px, 238px)
    minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  margin-top: var(--legal-gap);
  margin-bottom: 34px;
}

body:has(.legal-layout) .legal-nav {
  position: sticky;
  top: 112px;
  z-index: 5;
  display: grid;
  gap: 5px;
  max-height: calc(100vh - 134px);
  padding: 15px;
  overflow: auto;
  border: 1px solid #dfe7df;
  border-radius: 17px;
  background:
    radial-gradient(circle at 92% 7%, #e0ad390a, transparent 29%),
    #fffefaf2;
  box-shadow:
    0 10px 21px #12372d0b,
    inset 0 1px 0 #ffffff;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  scrollbar-width: thin;
  scrollbar-color: #c6d5cb transparent;
}

body:has(.legal-layout) .legal-nav h2 {
  position: relative;
  margin: 0 0 7px;
  padding: 0 0 9px 20px;
  border-bottom: 1px solid #e5eae5;
  color: #174334;
  font-size: .77rem;
  letter-spacing: .025em;
  text-transform: uppercase;
}

body:has(.legal-layout) .legal-nav h2::before {
  content: "";
  position: absolute;
  left: 1px;
  top: .28em;
  width: 10px;
  height: 10px;
  border: 2px solid #187058;
  border-radius: 50%;
  box-shadow:
    inset 0 0 0 2px #fffefa,
    0 0 0 3px #0b5d4508;
}

body:has(.legal-layout) .legal-nav a {
  position: relative;
  display: block;
  min-width: 0;
  padding: 8px 9px 8px 13px;
  border: 1px solid transparent;
  border-radius: 9px;
  color: #5d7065;
  font-size: .69rem;
  font-weight: 650;
  line-height: 1.35;
  text-decoration: none;
  transition:
    color 160ms ease,
    border-color 160ms ease,
    background 160ms ease,
    transform 160ms cubic-bezier(.22, 1, .36, 1);
}

body:has(.legal-layout) .legal-nav a::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 50%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #d3a039;
  transform: translateY(-50%);
  opacity: .72;
}

body:has(.legal-layout) .legal-nav a:hover,
body:has(.legal-layout) .legal-nav a:focus-visible {
  color: #176049;
  border-color: #dce5de;
  background: #f5f9f4;
}

body:has(.legal-layout) .legal-nav a.is-active,
body:has(.legal-layout) .legal-nav a[aria-current="location"] {
  color: #ffffff;
  border-color: #0d684f;
  background:
    linear-gradient(180deg, #1b7559, #0b5d45);
  box-shadow:
    0 3px 0 #064632,
    0 7px 12px #0b5d4512,
    inset 0 1px 0 #ffffff20;
}

body:has(.legal-layout) .legal-nav a.is-active::before,
body:has(.legal-layout) .legal-nav a[aria-current="location"]::before {
  background: #f3c253;
}

/* ---------- legal content cards ---------- */

body:has(.legal-layout) .legal-body {
  display: grid;
  gap: 12px;
  min-width: 0;
}

body:has(.legal-layout) .legal-body > section {
  position: relative;
  min-width: 0;
  padding: 22px 23px 21px;
  scroll-margin-top: 122px;
  overflow: hidden;
  border: 1px solid #dfe7df;
  border-radius: 17px;
  background:
    radial-gradient(circle at 96% 8%, #e0ad3907, transparent 25%),
    linear-gradient(145deg, #ffffff, #fcfdf9);
  box-shadow:
    0 8px 18px #12372d08,
    inset 0 1px 0 #ffffff;
}

body:has(.legal-layout) .legal-body > section::before {
  content: "";
  position: absolute;
  left: 22px;
  top: 0;
  width: 68px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, #d3a039, transparent);
}

body:has(.legal-layout) .legal-body > section:target {
  border-color: #bcd1c3;
  box-shadow:
    0 0 0 3px #0b5d4507,
    0 10px 21px #12372d0b,
    inset 0 1px 0 #ffffff;
}

body:has(.legal-layout) .legal-body h2 {
  margin: 0 0 11px;
  color: #173f32;
  font-size: clamp(1.03rem, 1.45vw, 1.21rem);
  line-height: 1.25;
  letter-spacing: -0.025em;
}

body:has(.legal-layout) .legal-body p,
body:has(.legal-layout) .legal-body li {
  color: #61736a;
  font-size: .79rem;
  line-height: 1.72;
}

body:has(.legal-layout) .legal-body p {
  margin: 0 0 11px;
}

body:has(.legal-layout) .legal-body p:last-child {
  margin-bottom: 0;
}

body:has(.legal-layout) .legal-body ul,
body:has(.legal-layout) .legal-body ol {
  margin: 8px 0 13px;
  padding-left: 21px;
}

body:has(.legal-layout) .legal-body li + li {
  margin-top: 6px;
}

body:has(.legal-layout) .legal-body a:not(.button) {
  color: #116047;
  font-weight: 690;
  text-decoration-color: #d1a13985;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

body:has(.legal-layout) .legal-body a:not(.button):hover {
  color: #8f6210;
  text-decoration-color: #8f6210;
}

body:has(.legal-layout) .legal-body strong {
  color: #344f43;
}

body:has(.legal-layout) .legal-body .button {
  width: fit-content;
  min-height: 44px;
  margin: 7px 0 12px;
  border-radius: 11px;
}

/* ---------- long-policy readability ---------- */

body:has(.legal-layout)
.legal-body > section[id="verification"] {
  border-color: #dfd2ac;
  background:
    radial-gradient(circle at 95% 8%, #d3a03912, transparent 29%),
    linear-gradient(145deg, #fffdf7, #faf8ee);
}

body:has(.legal-layout)
.legal-body > section[id="verification"]::before {
  width: 92px;
  background: linear-gradient(90deg, #c78d18, #e8c66b, transparent);
}

body:has(.legal-layout)
.legal-body > section[id="request"] {
  border-color: #cbdccf;
  background:
    radial-gradient(circle at 95% 8%, #0b5d4508, transparent 26%),
    linear-gradient(145deg, #fbfefa, #f7fbf6);
}

/* ---------- focus visibility ---------- */

body:has(.legal-layout) .legal-nav a:focus-visible,
body:has(.legal-layout) .legal-body a:focus-visible,
body:has(.legal-layout) .privacy-cards a:focus-visible {
  outline: 3px solid #956508;
  outline-offset: 3px;
}

/* ---------- 404 final branded treatment ---------- */

body:has(.not-found) main {
  overflow: hidden;
}

.not-found {
  position: relative;
  isolation: isolate;
  display: grid;
  align-content: center;
  min-height: clamp(500px, 67vh, 680px);
  margin-top: 22px;
  margin-bottom: 36px;
  padding: clamp(38px, 6vw, 72px);
  overflow: hidden;
  border: 1px solid #dfe7df;
  border-radius: 29px;
  background:
    radial-gradient(circle at 83% 19%, #e0ad3915 0 6%, transparent 28%),
    radial-gradient(circle at 11% 88%, #0b5d4509 0 5%, transparent 29%),
    linear-gradient(#12372d04 1px, transparent 1px),
    linear-gradient(90deg, #12372d04 1px, transparent 1px),
    linear-gradient(145deg, #fffefa, #fbfaf4 58%, #f4f8f1);
  background-size:
    auto,
    auto,
    42px 42px,
    42px 42px,
    auto;
  box-shadow:
    0 20px 42px #12372d0d,
    0 5px 11px #8b611208,
    inset 0 1px 0 #ffffff;
}

.not-found::before {
  content: "404";
  position: absolute;
  z-index: -1;
  right: clamp(28px, 8vw, 98px);
  top: 50%;
  color: #0b5d4508;
  font-size: clamp(8rem, 22vw, 19rem);
  font-weight: 900;
  line-height: .75;
  letter-spacing: -.09em;
  transform: translateY(-50%);
  pointer-events: none;
}

.not-found::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: clamp(45px, 9vw, 120px);
  top: 50%;
  width: clamp(125px, 18vw, 225px);
  aspect-ratio: 44 / 54;
  background:
    url("/assets/brand/braaq-mark.webp")
    center / contain
    no-repeat;
  opacity: .14;
  filter: saturate(.8);
  transform:
    translateY(-50%)
    rotate(4deg);
  pointer-events: none;
}

.not-found .eyebrow {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 18px;
  padding: 8px 11px;
  border: 1px solid #e6dfce;
  border-radius: 999px;
  background: #fffefaee;
  color: #176049;
  box-shadow:
    0 6px 14px #12372d07,
    inset 0 1px 0 #ffffff;
}

.not-found h1 {
  max-width: 650px;
  margin: 0 0 15px;
  color: #143a2f;
  font-size: clamp(3rem, 6.1vw, 5.7rem);
  line-height: .92;
  letter-spacing: -0.065em;
  text-shadow: 0 12px 25px #12372d0b;
}

.not-found > p:not(.eyebrow) {
  max-width: 52ch;
  margin: 0;
  color: #607168;
  font-size: clamp(.98rem, 1.3vw, 1.08rem);
  line-height: 1.65;
}

.not-found .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 25px;
}

.not-found .actions .button {
  min-height: 48px;
  border-radius: 12px;
}

/* ---------- responsive legal layout ---------- */

@media (max-width: 980px) {
  body:has(.legal-layout) .legal-layout {
    grid-template-columns:
      minmax(175px, 210px)
      minmax(0, 1fr);
    gap: 14px;
  }

  body:has(.legal-layout) .legal-nav {
    top: 106px;
  }

  body:has(.legal-layout) .privacy-cards {
    gap: 11px;
  }
}

@media (max-width: 760px) {
  body:has(.legal-layout) .page-intro > div:first-child {
    max-width: 100%;
  }

  body:has(.legal-layout) .intro-motif {
    opacity: .09;
  }

  body:has(.legal-layout) .privacy-cards {
    grid-template-columns: 1fr;
  }

  body:has(.legal-layout) .privacy-cards .panel {
    min-height: 0;
  }

  body:has(.legal-layout) .legal-layout {
    display: block;
  }

  body:has(.legal-layout) .legal-nav {
    position: sticky;
    top: 78px;
    z-index: 8;
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    max-height: none;
    margin-bottom: 14px;
    padding: 9px;
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: 14px;
    scrollbar-width: none;
  }

  body:has(.legal-layout) .legal-nav::-webkit-scrollbar {
    display: none;
  }

  body:has(.legal-layout) .legal-nav h2 {
    flex: 0 0 auto;
    margin: 0 3px 0 0;
    padding: 7px 9px;
    border: 0;
    border-right: 1px solid #e5eae5;
    white-space: nowrap;
  }

  body:has(.legal-layout) .legal-nav h2::before {
    display: none;
  }

  body:has(.legal-layout) .legal-nav a {
    flex: 0 0 auto;
    max-width: 230px;
    padding: 7px 10px;
    white-space: nowrap;
  }

  body:has(.legal-layout) .legal-nav a::before {
    display: none;
  }

  body:has(.legal-layout) .legal-body > section {
    scroll-margin-top: 145px;
  }

  .not-found::before {
    right: -16px;
    opacity: .85;
  }

  .not-found::after {
    right: 24px;
    opacity: .09;
  }
}

@media (max-width: 600px) {
  body:has(.legal-layout) main > .container {
    --legal-gap: 20px;
  }

  body:has(.legal-layout) .page-intro {
    min-height: 0;
    margin-top: 10px;
    padding: 24px 18px 28px;
    border-radius: 21px;
  }

  body:has(.legal-layout) .page-intro h1 {
    font-size: clamp(2.35rem, 12vw, 3.2rem);
  }

  body:has(.legal-layout) .intro-motif {
    display: none;
  }

  body:has(.legal-layout) .notice {
    padding:
      47px
      13px
      13px;
  }

  body:has(.legal-layout) .notice::before {
    left: 13px;
    top: 12px;
  }

  body:has(.legal-layout) .legal-nav {
    top: 70px;
    margin-inline: -2px;
  }

  body:has(.legal-layout) .legal-body > section {
    padding: 18px 15px 17px;
    border-radius: 14px;
    scroll-margin-top: 136px;
  }

  body:has(.legal-layout) .legal-body > section::before {
    left: 15px;
  }

  body:has(.legal-layout) .legal-body p,
  body:has(.legal-layout) .legal-body li {
    font-size: .77rem;
    line-height: 1.68;
  }

  .not-found {
    min-height: 520px;
    margin-top: 10px;
    padding: 35px 20px;
    border-radius: 22px;
  }

  .not-found::before {
    top: 23%;
    right: -18px;
    font-size: 9.5rem;
  }

  .not-found::after {
    top: 27%;
    right: 19px;
    width: 105px;
  }

  .not-found h1 {
    max-width: 92%;
    font-size: clamp(2.65rem, 14vw, 3.7rem);
  }

  .not-found .actions {
    align-items: stretch;
    flex-direction: column;
  }

  .not-found .actions .button {
    width: 100%;
  }
}

@media (hover: none), (pointer: coarse) {
  body:has(.legal-layout) .privacy-cards .panel:hover,
  body:has(.legal-layout) .privacy-cards .panel:focus-within {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  body:has(.legal-layout) .privacy-cards .panel,
  body:has(.legal-layout) .legal-nav a {
    transition: none !important;
  }

  body:has(.legal-layout) .privacy-cards .panel:hover,
  body:has(.legal-layout) .privacy-cards .panel:focus-within {
    transform: none !important;
  }
}

/* Sticky-header containment: content cannot paint or receive clicks behind it.
 * Keep the approved floating shell and compact animation in a stable row.
 * One native scrollport owns main + footer; no wheel/touch interception.
 */
:root { --site-header-height: 96px; }
html:has(.site-scroll) { scroll-padding-top: 0; }
body:has(.site-scroll) {
  height: 100vh;
  height: 100dvh;
  display: grid;
  grid-template-rows: minmax(var(--site-header-height), auto) minmax(0, 1fr);
  overflow: hidden;
}
body:has(.site-scroll) > .site-header {
  min-height: var(--site-header-height);
  position: sticky;
  top: 0;
}
.site-scroll {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  scroll-behavior: smooth;
  scroll-padding-top: 12px;
  scroll-padding-bottom: 16px;
  scrollbar-gutter: stable;
}
.site-scroll :where(a, button, input, textarea, select, summary, [id]) {
  scroll-margin-top: 12px;
  scroll-margin-bottom: 12px;
}
body:has(#primary-nav.open) .floating-actions,
body:has(dialog[open]) .floating-actions {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: none;
}
body:has(.site-scroll) .legal-nav {
  top: 12px;
  max-height: calc(100vh - var(--site-header-height) - 24px);
  max-height: calc(100dvh - var(--site-header-height) - 24px);
}
body:has(.site-scroll) .legal-body > section { scroll-margin-top: 0; }
body:has(.site-scroll) #faq { scroll-margin-top: 0; }
@media (max-width: 850px) {
  :root { --site-header-height: 80px; }
  body:has(.site-scroll) #primary-nav {
    max-height: calc(100vh - var(--site-header-height) - 24px);
    max-height: calc(100dvh - var(--site-header-height) - 24px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  body:has(#primary-nav.open) .site-scroll { overflow-y: hidden; }
}
@media (max-width: 760px) {
  body:has(.site-scroll) .legal-nav { top: 0; }
  .site-scroll:has(.legal-layout) {
    scroll-padding-top: calc(var(--legal-nav-height, 64px) + 12px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .site-scroll { scroll-behavior: auto; }
}
@media print {
  body:has(.site-scroll) { display: block; height: auto; overflow: visible; }
  body:has(.site-scroll) > .site-header { position: static; }
  .site-scroll { overflow: visible; }
}

/* Stable viewport shortcuts. Only the footer's scrollable end has clearance;
   no lane is subtracted from the full-height content scrollport. */
:root { --floating-clearance: 0px; --floating-end-clearance: 132px; }
body:has(.floating-actions) .site-scroll {
  position: relative;
  margin-bottom: 0;
  scroll-padding-bottom: calc(var(--floating-end-clearance) + env(safe-area-inset-bottom, 0px));
}
body:has(.floating-actions) .site-scroll :where(a, button, input, textarea, select, summary) {
  scroll-margin-bottom: calc(var(--floating-end-clearance) + env(safe-area-inset-bottom, 0px));
}
body:has(.floating-actions) .footer-bottom {
  padding-bottom: calc(var(--floating-end-clearance) + env(safe-area-inset-bottom, 0px));
}
body:has(.floating-actions) .legal-nav {
  max-height: calc(100vh - var(--site-header-height) - var(--floating-clearance) - 24px);
  max-height: calc(100dvh - var(--site-header-height) - var(--floating-clearance) - 24px);
}
.floating-actions {
  position: fixed;
  z-index: 19;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  transition: opacity 180ms ease, transform 180ms ease, visibility 180ms;
}
.floating-actions[data-input-active] {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(6px);
}
.floating-actions > .whatsapp-float,
body:has(#contact-form) .floating-actions > .whatsapp-float {
  position: static;
  width: 48px;
  min-width: 48px;
  height: 48px;
  min-height: 48px;
  padding: 0;
  gap: 0;
  justify-content: center;
  animation: none;
  flex-shrink: 0;
}
.floating-actions > .whatsapp-float:hover { transform: none; }
.floating-actions > .whatsapp-float > span { display: none; }
.back-to-top {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid #d9dfd1;
  border-radius: 50%;
  color: #12372d;
  background: linear-gradient(135deg, #fffefa, #f4ead2);
  box-shadow: 0 4px 0 #d8dbc9, 0 8px 17px #12372d18, inset 0 1px #fff;
  flex-shrink: 0;
  transition: opacity 180ms ease, transform 180ms ease, visibility 180ms, box-shadow 180ms ease;
}
.back-to-top[hidden] {
  display: inline-flex !important;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
}
.back-to-top .icon { transform: rotate(-90deg); }
.back-to-top:hover { transform: translateY(-2px); }
.back-to-top:active { transform: translateY(1px); }
#scroll-top-sentinel {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
@media (min-width: 1600px) {
  :root { --floating-clearance: 0px; }
  body:has(.floating-actions) .site-scroll { margin-bottom: 0; }
}
/* Desktop content retains its full width and height; no right-side rail. */
@media (min-width: 851px) and (max-width: 1599px) {
  :root { --floating-clearance: 0px; }
  body:has(.floating-actions) .site-scroll {
    margin-bottom: 0;
    padding-inline-end: 0;
  }
}
@media (max-width: 850px) {
  .page-intro,
  body:has(#contact-form) .page-intro,
  body:has(#faq-search) .page-intro,
  body:has(.legal-layout) .page-intro {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .page-intro > .intro-motif,
  body:has(#contact-form) .page-intro > .intro-motif,
  body:has(#faq-search) .page-intro > .intro-motif,
  body:has(.legal-layout) .page-intro > .intro-motif {
    display: block;
    position: static;
    order: -1;
    align-self: flex-end;
    width: 36px;
    height: 44px;
    opacity: .32;
    margin: 0 0 4px;
    transform: none;
    pointer-events: none;
  }
  .cta-mark { display: block; width: 42px; padding: 4px; align-self: flex-start; }
  .cta-mark img { height: 40px; }
  .floating-actions { right: max(14px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); }
  :root { --floating-end-clearance: 128px; }
}
@media (prefers-reduced-motion: reduce) {
  .floating-actions, .back-to-top { transition: none; }
  .floating-actions[data-input-active], .back-to-top[hidden] { transform: none; }
  .back-to-top:hover, .back-to-top:active { transform: none; }
}
@media print {
  .floating-actions { display: none; }
  body:has(.floating-actions) .site-scroll { margin-bottom: 0; }
}