@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+Arabic:wght@400;500;600;700&display=swap");

:root {
  color-scheme: light;
  --paper: #eaf1f6;
  --surface: rgba(255, 255, 255, .32);
  --surface-strong: rgba(255, 255, 255, .48);
  --ink: #253441;
  --muted: #4c5d6b;
  --soft: #5e6e7c;
  --line: rgba(106, 123, 143, .17);
  --shadow: 0 22px 55px rgba(99, 123, 145, .16), inset 0 1px 0 rgba(255,255,255,.78);
  --max: 1260px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  min-width: 0;
  min-height: 100svh;
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(ellipse at 8% 11%, rgba(156, 203, 226, .64), transparent 39%),
    radial-gradient(ellipse at 88% 21%, rgba(206, 194, 229, .50), transparent 36%),
    radial-gradient(ellipse at 76% 84%, rgba(244, 207, 179, .42), transparent 41%),
    radial-gradient(ellipse at 18% 76%, rgba(185, 218, 208, .36), transparent 38%),
    linear-gradient(145deg, #fbfdff 0%, #e8eff5 48%, #f7f9fc 100%);
  background-attachment: fixed;
  font-family: "Inter", "Segoe UI", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(rgba(74, 100, 122, .15) .7px, transparent .8px);
  background-size: 17px 17px;
  opacity: .16;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.5), transparent 82%);
}
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
::selection { background: #d3dde7; color: var(--ink); }
:focus-visible { outline: 2px solid #718ca8; outline-offset: 4px; }
.container { width: min(calc(100% - 64px), var(--max)); margin-inline: auto; }
[dir="rtl"] body { font-family: "Noto Sans Arabic", "Segoe UI", Arial, sans-serif; }

#app { animation: page-in .56s cubic-bezier(.22,1,.36,1) both; transition: opacity .28s ease, transform .28s ease; }
body.page-leaving #app { opacity: 0; transform: translateY(-8px) scale(.994); }

.catalog-header { position: relative; z-index: 20; border-bottom: 1px solid rgba(255,255,255,.68); background: rgba(255,255,255,.28); box-shadow: 0 8px 30px rgba(115,139,159,.06); backdrop-filter: blur(30px) saturate(125%); -webkit-backdrop-filter: blur(30px) saturate(125%); }
.catalog-header-inner { min-height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.folio-label, .index-link { display: inline-flex; align-items: center; gap: 12px; color: #4c5e6d; font-size: .76rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.folio-symbol { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid #c5cfd8; border-radius: 50%; color: #94a5b6; font-size: 1.4rem; line-height: 1; letter-spacing: 0; }
.index-link { gap: 10px; letter-spacing: .035em; text-transform: none; font-size: .88rem; transition: color .25s ease; }
.index-link:hover { color: var(--ink); }
.back-arrow { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 50%; font-size: 1rem; letter-spacing: 0; background: rgba(255,255,255,.5); }
.language-switch { display: inline-flex; padding: 4px; gap: 2px; border: 1px solid rgba(255,255,255,.82); border-radius: 100px; background: rgba(255,255,255,.35); box-shadow: 0 6px 20px rgba(138,155,178,.1); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.language-switch button { min-width: 39px; min-height: 34px; padding: 0 7px; border: 0; border-radius: 100px; color: #576877; background: transparent; font-size: .76rem; font-weight: 700; letter-spacing: .03em; cursor: pointer; transition: color .2s ease, background .2s ease, box-shadow .2s ease; }
.language-switch button:hover { color: var(--ink); }
.language-switch button.selected { color: #354857; background: rgba(255,255,255,.82); box-shadow: 0 3px 12px rgba(118,137,160,.16); }

.catalog-cover { position: relative; isolation: isolate; overflow-x: clip; min-height: calc(100svh - 75px); }
.catalog-cover::before { content: ""; position: absolute; z-index: -1; inset: -5% -2% 0; pointer-events: none; background: radial-gradient(ellipse at 14% 34%, rgba(100, 171, 207, .36), transparent 31%), radial-gradient(ellipse at 54% 9%, rgba(172, 159, 215, .32), transparent 29%), radial-gradient(ellipse at 87% 56%, rgba(237, 185, 145, .28), transparent 31%), radial-gradient(ellipse at 28% 83%, rgba(131, 190, 172, .24), transparent 26%); filter: blur(30px); }
.cover-inner { display: flex; flex-direction: column; min-height: calc(100svh - 75px); padding-block: clamp(32px, 5.3vh, 62px) 24px; }
.cover-intro { display: flex; align-items: end; justify-content: space-between; gap: 28px; margin-bottom: clamp(26px, 4vh, 46px); }
.cover-kicker { display: inline-block; margin-bottom: 13px; color: #506271; font-size: .78rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.cover-intro h1 { margin: 0; font-size: clamp(3.5rem, 7.8vw, 7.1rem); font-weight: 600; letter-spacing: -.075em; line-height: 1.02; }
.cover-intro h1 em { color: #52697a; font-family: inherit; font-style: normal; font-weight: 400; letter-spacing: -.07em; }
[dir="rtl"] .cover-intro h1 em { font-family: inherit; font-style: normal; }
.cover-intro p { max-width: 230px; margin: 0 0 8px; color: var(--muted); font-size: .96rem; line-height: 1.4; text-align: end; }

.cover-options { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; flex: 1; min-height: 340px; max-height: 470px; }
.cover-option { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-width: 0; padding: 24px; overflow: hidden; isolation: isolate; border: 1px solid rgba(255,255,255,.84); border-radius: 28px; color: #142b3a; background: rgba(255,255,255,.34); box-shadow: 0 24px 58px rgba(73,100,126,.16), inset 0 1px 0 rgba(255,255,255,.96), inset 0 -1px 0 rgba(255,255,255,.45); backdrop-filter: blur(26px) saturate(140%); -webkit-backdrop-filter: blur(26px) saturate(140%); transition: transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s ease, border-color .5s ease; animation: card-in .78s cubic-bezier(.22,1,.36,1) both; }
.cover-option:nth-child(2) { animation-delay: .09s; }
.cover-option:nth-child(3) { animation-delay: .18s; }
.cover-image { position: absolute; z-index: -2; inset: 2px; overflow: hidden; border-radius: 25px; }
.cover-image img { width: 100%; height: 100%; object-fit: cover; opacity: .93; filter: saturate(1.04) contrast(1.08); transition: transform .85s cubic-bezier(.22,1,.36,1), opacity .5s ease, filter .5s ease; }
.cover-option::before { content: ""; position: absolute; z-index: -1; inset: 0; opacity: .94; transition: transform .8s cubic-bezier(.22,1,.36,1), opacity .5s ease; }
.cover-option::after { content: ""; position: absolute; inset: 1px; pointer-events: none; border-radius: 27px; background: linear-gradient(132deg, rgba(255,255,255,.38), transparent 29%, transparent 68%, rgba(255,255,255,.22)); mask-image: linear-gradient(145deg,#000,rgba(0,0,0,.3) 76%); opacity: .8; transition: opacity .45s ease, background-position .7s ease; }
.cover-option-games::before { background: linear-gradient(135deg, rgba(113,158,201,.21), transparent 58%), linear-gradient(180deg, rgba(246,249,252,.015), rgba(233,242,249,.16)); }
.cover-option-software::before { background: linear-gradient(135deg, rgba(112,177,177,.19), transparent 58%), linear-gradient(180deg, rgba(246,249,252,.015), rgba(233,243,244,.17)); }
.cover-option-creative::before { background: linear-gradient(135deg, rgba(217,164,127,.2), transparent 58%), linear-gradient(180deg, rgba(246,249,252,.015), rgba(249,238,229,.18)); }
.cover-option:hover, .cover-option:focus-visible { transform: translateY(-9px) scale(1.012); border-color: rgba(255,255,255,.98); box-shadow: 0 34px 76px rgba(63,91,118,.23), inset 0 0 0 1px rgba(255,255,255,.6), inset 0 1px 0 #fff; }
.cover-option:hover::before, .cover-option:focus-visible::before { transform: scale(1.1); opacity: 1; }
.cover-option:hover::after, .cover-option:focus-visible::after { opacity: 1; background: linear-gradient(118deg, rgba(255,255,255,.58), transparent 27%, transparent 59%, rgba(255,255,255,.32)); }
.cover-option:hover .cover-image img, .cover-option:focus-visible .cover-image img { transform: scale(1.065); opacity: 1; filter: saturate(1) contrast(1.04); }
.option-number { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; align-self: flex-start; width: fit-content; min-height: 34px; padding: 0 11px; border: 1px solid rgba(255,255,255,.84); border-radius: 100px; color: #263f50; background: rgba(255,255,255,.68); box-shadow: 0 5px 17px rgba(54,76,98,.1), inset 0 1px 0 #fff; font-size: .7rem; font-weight: 750; letter-spacing: .1em; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
[dir="rtl"] .option-number { align-self: flex-start; direction: ltr; }
.option-arrow { position: absolute; z-index: 1; inset-block-start: 20px; inset-inline-end: 20px; display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.94); border-radius: 50%; color: #294556; background: rgba(255,255,255,.72); box-shadow: 0 7px 20px rgba(54,76,98,.13), inset 0 1px 0 #fff; font-size: 1.12rem; line-height: 1; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); transition: transform .45s cubic-bezier(.22,1,.36,1), background .35s ease, box-shadow .35s ease; }
.cover-option:hover .option-arrow { transform: translate(3px,-3px) rotate(5deg); background: rgba(255,255,255,.93); box-shadow: 0 10px 24px rgba(54,76,98,.18); }
.option-copy { display: flex; flex-direction: column; gap: 6px; position: relative; z-index: 1; padding: 17px 19px 18px; border: 1px solid rgba(255,255,255,.8); border-radius: 20px; color: #152d3c; background: rgba(255,255,255,.57); box-shadow: 0 13px 32px rgba(55,80,104,.13), inset 0 1px 0 rgba(255,255,255,.92); backdrop-filter: blur(26px) saturate(145%); -webkit-backdrop-filter: blur(26px) saturate(145%); transition: background .35s ease, transform .45s cubic-bezier(.22,1,.36,1), box-shadow .35s ease; }
.cover-option:hover .option-copy { transform: translateY(-2px); }
.option-copy strong { color: #172e3d; font-size: clamp(2.2rem, 3.2vw, 3.5rem); line-height: 1.02; font-weight: 650; letter-spacing: -.06em; }
.option-copy small { max-width: 300px; color: #304858; font-size: .91rem; line-height: 1.45; font-weight: 550; }
.cover-bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: auto; padding-top: 24px; color: #596a78; font-size: .84rem; }
.cover-contact { display: inline-flex; align-items: center; gap: 26px; color: #405464; font-size: .89rem; font-weight: 650; border-bottom: 1px solid #9bafbf; padding-block: 7px; transition: color .2s ease, gap .3s ease; }
.cover-contact:hover { color: var(--ink); gap: 31px; }

@keyframes page-in { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0 0; } }
@keyframes card-in { from { opacity: 0; translate: 0 30px; } to { opacity: 1; translate: 0 0; } }

@media (max-width: 850px) {
  .cover-intro { align-items: start; flex-direction: column; gap: 12px; }
  .cover-intro p { text-align: start; max-width: none; }
  .cover-options { gap: 10px; }
  .cover-option { padding: 18px; }
  .option-copy strong { font-size: clamp(1.55rem, 3vw, 2.25rem); }
  .option-copy small { font-size: .89rem; }
}
@media (max-width: 650px) {
  .container { width: min(calc(100% - 34px), var(--max)); }
  .catalog-header-inner { min-height: 62px; }
  .folio-label { font-size: .63rem; letter-spacing: .09em; }
  .folio-symbol { width: 25px; height: 25px; font-size: 1.2rem; }
  .language-switch button { min-width: 36px; min-height: 31px; }
  .catalog-cover, .cover-inner { min-height: calc(100svh - 63px); }
  .cover-inner { padding-block: 22px 17px; }
  .cover-intro { margin-bottom: 22px; gap: 8px; }
  .cover-kicker { margin-bottom: 6px; font-size: .72rem; }
  .cover-intro h1 { font-size: clamp(2.75rem, 10.5vw, 4.15rem); }
  .cover-intro p { margin: 0; font-size: .94rem; }
  .cover-options { flex: 0 0 auto; grid-template-columns: 1fr; min-height: 0; max-height: none; gap: 11px; }
  .cover-option { min-height: clamp(140px, 17.5svh, 160px); padding: 13px 14px; border-radius: 24px; }
  .cover-option::after { border-radius: 23px; }
  .cover-image { inset: 2px; border-radius: 21px; }
  .cover-option-games::before { background: linear-gradient(135deg, rgba(113,158,201,.23), transparent 68%), linear-gradient(180deg, rgba(255,255,255,.02), rgba(233,242,249,.12)); }
  .cover-option-software::before { background: linear-gradient(135deg, rgba(112,177,177,.22), transparent 68%), linear-gradient(180deg, rgba(255,255,255,.02), rgba(233,243,244,.12)); }
  .cover-option-creative::before { background: linear-gradient(135deg, rgba(217,164,127,.24), transparent 68%), linear-gradient(180deg, rgba(255,255,255,.02), rgba(249,238,229,.12)); }
  .option-copy { gap: 4px; padding: 10px 14px 11px; border-radius: 16px; }
  .option-copy strong { font-size: clamp(1.7rem, 6.4vw, 2.2rem); }
  .option-copy small { max-width: none; font-size: .86rem; }
  .option-arrow { inset-block-start: 13px; inset-inline-end: 14px; width: 38px; height: 38px; font-size: 1rem; }
  .option-number { min-height: 31px; font-size: .69rem; }
  .cover-bottom { padding-top: 13px; font-size: .76rem; }
  .cover-contact { font-size: .8rem; gap: 12px; }
}
@media (max-width: 390px) {
  .cover-option { min-height: 136px; }
  .cover-intro h1 { font-size: 2.68rem; }
}
@media (max-width: 350px) {
  .catalog-header-inner { min-height: 54px; gap: 7px; }
  .folio-label { gap: 6px; font-size: .56rem; letter-spacing: .035em; white-space: nowrap; }
  .folio-symbol { width: 21px; height: 21px; font-size: 1rem; }
  .language-switch { padding: 2px; }
  .language-switch button { min-width: 31px; min-height: 29px; font-size: .65rem; }
  .cover-inner { padding-block: 17px 12px; }
  .cover-intro { margin-bottom: 14px; }
  .cover-intro h1 { font-size: 2.38rem; }
  .cover-intro p { font-size: .87rem; }
  .cover-option { min-height: 140px; padding: 12px; }
  .option-copy { padding: 9px 12px 10px; }
  .option-copy strong { font-size: 1.53rem; }
  .option-copy small { font-size: .78rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .catalog-header, .language-switch, .cover-option, .option-number, .option-arrow, .option-copy { background-color: rgba(248,251,253,.94); }
}

/* Catalogue chapters */
.eyebrow { display: inline-flex; align-items: center; gap: 12px; color: #526575; font-size: .78rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.eyebrow::before { content: ""; width: 22px; height: 1px; background: #9dacba; }
.hero { position: relative; overflow: hidden; isolation: isolate; }
.detail-hero { min-height: 470px; display: flex; align-items: center; border-bottom: 1px solid rgba(255,255,255,.78); background: linear-gradient(135deg, rgba(255,255,255,.42), rgba(237,245,251,.18)); box-shadow: inset 0 1px 0 rgba(255,255,255,.65); backdrop-filter: blur(24px) saturate(120%); -webkit-backdrop-filter: blur(24px) saturate(120%); }
.detail-hero::after { content: ""; position: absolute; z-index: -1; width: min(70vw, 700px); aspect-ratio: 1; inset-block-start: -40%; inset-inline-end: -8%; border-radius: 50%; background: radial-gradient(circle, rgba(207,219,231,.5), rgba(231,237,243,.15) 46%, transparent 68%); filter: blur(7px); pointer-events: none; }
.software-hero::after { inset-block-start: -25%; inset-inline-end: 4%; background: radial-gradient(circle, rgba(213,224,236,.62), rgba(233,239,245,.18) 48%, transparent 69%); }
.software-proof-section { position: relative; z-index: 2; margin-top: -18px; padding-bottom: 8px; }
.software-proof-band { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 28px; padding: clamp(23px, 3.8vw, 38px); border: 1px solid rgba(255,255,255,.94); border-radius: 24px; background: rgba(255,255,255,.52); box-shadow: 0 18px 48px rgba(112,132,151,.12), inset 0 1px 0 rgba(255,255,255,.9); backdrop-filter: blur(30px) saturate(125%); -webkit-backdrop-filter: blur(30px) saturate(125%); }
.software-proof-copy { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 5px 22px; min-width: 0; }
.software-proof-copy > .eyebrow { grid-column: 1 / -1; margin-bottom: 5px; }
.software-proof-number { color: #263b49; font-size: clamp(3.6rem, 7.5vw, 6rem); font-weight: 500; line-height: .92; letter-spacing: -.085em; }
.software-proof-copy h2 { margin: 0 0 7px; color: #293e4c; font-size: clamp(1.28rem, 2.2vw, 1.8rem); font-weight: 600; letter-spacing: -.045em; line-height: 1.15; }
.software-proof-copy p { max-width: 570px; margin: 0; color: #425766; font-size: .94rem; line-height: 1.6; }
.software-main-site { display: flex; flex-direction: column; justify-content: center; gap: 9px; min-width: 225px; min-height: 105px; padding-inline-start: 28px; border-inline-start: 1px solid rgba(98,120,138,.2); color: #304858; transition: color .2s ease, transform .25s ease; }
.software-main-site:hover { color: #142f43; transform: translateY(-2px); }
.software-main-site > span { color: #526879; font-size: .76rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; }
.software-main-site > strong { font-size: clamp(1.2rem, 2vw, 1.6rem); font-weight: 650; letter-spacing: -.04em; }
.software-main-site i { display: inline-block; margin-inline-start: 5px; font-size: .9em; font-style: normal; }
.creative-hero::after { inset-block-start: -47%; inset-inline-end: -5%; background: radial-gradient(circle, rgba(220,228,238,.66), rgba(234,239,244,.22) 50%, transparent 70%); }
.hero-content { position: relative; padding-block: 68px 73px; }
.hero h1 { max-width: 900px; margin: 21px 0 21px; font-size: clamp(4rem, 7.5vw, 7.4rem); font-weight: 600; letter-spacing: -.07em; line-height: 1.02; }
.hero h1 span, .hero h1 em { display: block; }
.hero h1 em { color: #647687; font-family: inherit; font-style: normal; font-weight: 400; letter-spacing: -.07em; }
[dir="rtl"] .hero h1 em { font-family: inherit; font-style: normal; }
.hero-intro { max-width: 640px; margin: 0; color: #475969; font-size: clamp(1rem, 1.4vw, 1.18rem); line-height: 1.68; }
.detail-proof { display: flex; align-items: center; gap: 13px; width: fit-content; margin-top: 28px; padding: 12px 18px; border: 1px solid rgba(255,255,255,.96); border-radius: 14px; background: rgba(255,255,255,.57); box-shadow: 0 8px 28px rgba(142,160,178,.08); }
.detail-proof strong { font-size: 1.6rem; font-weight: 560; line-height: 1; letter-spacing: -.06em; }
.detail-proof span { color: #536675; font-size: .74rem; font-weight: 700; letter-spacing: .08em; }
.hero-aside { display: inline-block; margin-top: 25px; color: #526575; font-size: .88rem; letter-spacing: .02em; }

.section { padding-block: 90px 98px; }
.section-alt { background: rgba(255,255,255,.2); border-block: 1px solid rgba(255,255,255,.72); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.section-heading { max-width: 810px; margin-bottom: 38px; }
.section-heading h2, .statement-inner h2, .catalog-end h2, .qr-panel h2, .browse-section h2 { margin: 15px 0 12px; font-size: clamp(2.25rem, 4.5vw, 4.5rem); font-weight: 600; line-height: 1.08; letter-spacing: -.06em; }
.section-heading p, .statement-inner p, .catalog-end p, .qr-panel p, .contact-info p { max-width: 680px; margin: 0; color: #4b5e6d; font-size: 1rem; line-height: 1.7; }
.games-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.game-card { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 242px; padding: 25px 28px; overflow: hidden; border: 1px solid rgba(255,255,255,.82); border-radius: 24px; background: rgba(255,255,255,.37); box-shadow: 0 18px 44px rgba(105,128,150,.12), inset 0 1px 0 rgba(255,255,255,.8); backdrop-filter: blur(28px) saturate(120%); -webkit-backdrop-filter: blur(28px) saturate(120%); transition: transform .35s ease, box-shadow .35s ease; }
.game-card::before { content: ""; position: absolute; width: 260px; height: 260px; inset-block-start: -100px; inset-inline-end: -80px; border-radius: 50%; background: radial-gradient(circle, rgba(214,224,233,.62), transparent 69%); pointer-events: none; }
.game-card:hover { transform: translateY(-4px); box-shadow: 0 24px 52px rgba(135,152,173,.14); }
.game-number { position: relative; color: #5c6e7d; font-size: .78rem; font-weight: 700; letter-spacing: .12em; }
.game-card-content { position: relative; max-width: 400px; }
.game-card h3, .capability-card h3, .service-card h3 { margin: 10px 0 7px; font-size: 1.48rem; font-weight: 600; line-height: 1.24; letter-spacing: -.04em; }
.game-card p, .capability-card p, .service-card p { margin: 0; color: #4b5c6a; font-size: .98rem; line-height: 1.62; }
.game-card-mark { position: absolute; inset-block-start: 22px; inset-inline-end: 24px; color: #a7b4c1; font-size: 1.1rem; }
.pill { display: inline-flex; padding: 5px 9px; width: fit-content; border: 1px solid #cddae4; border-radius: 30px; color: #526677; background: rgba(255,255,255,.78); font-size: .73rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.capability-grid, .service-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.capability-card, .service-card { min-width: 0; min-height: 215px; padding: 27px; border: 1px solid rgba(255,255,255,.82); border-radius: 22px; background: rgba(255,255,255,.36); box-shadow: 0 16px 40px rgba(105,128,150,.11), inset 0 1px 0 rgba(255,255,255,.78); backdrop-filter: blur(28px) saturate(120%); -webkit-backdrop-filter: blur(28px) saturate(120%); transition: transform .34s ease, box-shadow .34s ease; }
.capability-card:hover, .service-card:hover { transform: translateY(-4px); box-shadow: 0 22px 48px rgba(137,154,173,.12); }
.service-card { min-height: 242px; display: flex; flex-direction: column; }
.service-number { margin-bottom: auto; color: #5a6d7c; font-size: .78rem; font-weight: 700; letter-spacing: .12em; }
.service-card h3 { margin-top: 35px; }
.statement-section { padding-block: 72px; border-block: 1px solid rgba(255,255,255,.75); background: rgba(255,255,255,.18); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); }
.statement-inner { max-width: 850px; }
.statement-inner p { max-width: 650px; }

.catalog-end { padding-block: 68px; }
.catalog-end-inner { display: flex; align-items: end; justify-content: space-between; gap: 30px; padding: 40px 44px; border: 1px solid rgba(255,255,255,.82); border-radius: 28px; background: rgba(255,255,255,.35); box-shadow: var(--shadow); backdrop-filter: blur(30px) saturate(120%); -webkit-backdrop-filter: blur(30px) saturate(120%); }
.catalog-end h2 { max-width: 750px; margin-bottom: 0; font-size: clamp(2rem, 4vw, 3.5rem); }
.catalog-end p { margin-top: 12px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 13px; min-height: 48px; padding: 11px 20px; border: 1px solid transparent; border-radius: 100px; background: transparent; color: #536474; font-size: .88rem; font-weight: 700; white-space: nowrap; cursor: pointer; transition: transform .3s ease, background .3s ease, box-shadow .3s ease; }
.button:hover { transform: translateY(-3px); }
.button-primary { background: #e7edf3; border-color: #d7e1e9; box-shadow: 0 8px 20px rgba(131,150,169,.13); }
.button-primary:hover { background: #dae4ed; box-shadow: 0 12px 25px rgba(131,150,169,.18); }
.button-ghost { border-color: #d9e3eb; background: rgba(255,255,255,.6); }
.button-ghost:hover { background: #fff; }
.arrow { display: inline-block; font-size: 1.08rem; line-height: 1; transition: transform .3s ease; }
.button:hover .arrow, .browse-links a:hover .arrow { transform: translate(3px,-3px); }

.catalog-footer { border-top: 1px solid rgba(255,255,255,.9); }
.catalog-footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 22px; min-height: 80px; color: #5b6d7b; font-size: .81rem; }
.catalog-footer-inner a { color: #455968; white-space: nowrap; }
.catalog-footer-inner a:hover { color: var(--ink); }

.hero-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 27px; }
.share-feedback { min-height: 23px; margin-top: 8px; color: #4c5e6c; font-size: .88rem; }
.contact-section { padding-block: 80px; }
.contact-layout { display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1fr); align-items: start; gap: 56px; }
.qr-panel { display: flex; flex-direction: column; align-items: start; min-height: 520px; padding: 33px; border: 1px solid rgba(255,255,255,.82); border-radius: 26px; background: rgba(255,255,255,.36); box-shadow: var(--shadow); backdrop-filter: blur(30px) saturate(120%); -webkit-backdrop-filter: blur(30px) saturate(120%); }
.qr-panel h2 { font-size: clamp(2rem, 3.5vw, 3.1rem); }
.qr-panel img { width: min(72%, 275px); margin: auto; padding: 15px; border: 1px solid #e4eaf0; border-radius: 16px; background: #fff; }
.qr-panel small { color: #536676; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; }
.contact-info .section-heading { margin-bottom: 28px; }
.contact-info h2 { font-size: clamp(2rem, 3.4vw, 3.4rem); }
.contact-slots { border-top: 1px solid #dfe6ec; }
.contact-slot { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 15px; min-height: 80px; border-bottom: 1px solid #dfe6ec; }
.contact-slot span { color: #5c6e7d; font-size: .77rem; font-weight: 700; }
.contact-slot strong { font-size: 1.07rem; font-weight: 600; }
.contact-slot small { color: #566979; font-size: .86rem; }
.browse-section { padding-block: 68px; border-top: 1px solid rgba(255,255,255,.78); background: rgba(255,255,255,.18); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.browse-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 25px; }
.browse-links a { display: inline-flex; align-items: center; gap: 18px; padding: 13px 18px; border: 1px solid rgba(255,255,255,.95); border-radius: 100px; background: rgba(255,255,255,.66); color: #62717f; font-size: .86rem; font-weight: 680; }

.motion-ready .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1); }
.motion-ready .reveal.visible { opacity: 1; transform: translateY(0); }

@media (max-width: 850px) {
  .capability-grid, .service-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .contact-layout { gap: 26px; }
  .catalog-footer-inner { flex-wrap: wrap; padding-block: 24px; }
}
@media (max-width: 650px) {
  .option-glyph { font-size: 7.7rem; inset-inline-end: 58px; inset-block-start: -40px; }
  .detail-hero { min-height: 0; }
  .hero-content { padding-block: 56px 59px; }
  .hero h1 { font-size: clamp(3.1rem, 12.6vw, 5rem); margin-block: 18px; }
  .hero-intro { font-size: 1rem; }
  .section { padding-block: 62px 68px; }
  .section-heading { margin-bottom: 25px; }
  .section-heading h2, .statement-inner h2, .catalog-end h2, .browse-section h2 { font-size: clamp(2.1rem, 8.2vw, 3.2rem); }
  .games-grid, .capability-grid, .service-grid { grid-template-columns: 1fr; gap: 11px; }
  .game-card { min-height: 215px; padding: 22px; }
  .capability-card { min-height: 0; }
  .service-card { min-height: 190px; }
  .statement-section { padding-block: 55px; }
  .catalog-end { padding-block: 48px; }
  .catalog-end-inner { align-items: start; flex-direction: column; padding: 29px 25px; gap: 22px; border-radius: 22px; }
  .catalog-footer-inner { align-items: start; flex-direction: column; gap: 7px; }
  .contact-layout { grid-template-columns: 1fr; gap: 55px; }
  .qr-panel { min-height: 490px; padding: 25px; }
  .contact-section { padding-block: 58px; }
  .contact-slot { grid-template-columns: 28px 1fr auto; gap: 9px; }
  .browse-section { padding-block: 50px; }
}
@media (max-width: 350px) {
  .catalog-cover, .cover-inner { min-height: calc(100svh - 55px); }
  .option-glyph { font-size: 6.6rem; }
}

/* Games chapter: light, tactile investor catalogue */
.games-chapter .games-hero { min-height: 0; }
.games-chapter .games-hero .hero-content { padding-block: clamp(52px, 7vw, 94px) clamp(48px, 6vw, 82px); }
.games-chapter .games-hero h1 { max-width: 1050px; font-size: clamp(3.2rem, 7vw, 7.2rem); }
.games-chapter .hero-intro { max-width: 720px; }
.game-proof-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: min(100%, 850px); margin-top: 38px; overflow: hidden; border: 1px solid rgba(255,255,255,.9); border-radius: 22px; background: rgba(255,255,255,.43); box-shadow: var(--shadow); backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px); }
.game-proof-strip div { display: flex; flex-direction: column; justify-content: center; gap: 4px; min-height: 122px; padding: 23px 25px; }
.game-proof-strip div + div { border-inline-start: 1px solid rgba(113,135,152,.18); }
.game-proof-strip strong { width: fit-content; color: #263846; font-size: clamp(2rem, 3.6vw, 3rem); font-weight: 600; line-height: 1; letter-spacing: -.065em; }
.game-proof-strip .proof-revenue { font-size: clamp(1.65rem, 3.1vw, 2.55rem); }
.game-proof-strip span { color: #4e6271; font-size: .69rem; font-weight: 700; letter-spacing: .075em; text-transform: uppercase; }
.proof-disclaimer, .art-credit { max-width: 850px; color: #3c5261; font-size: .85rem; line-height: 1.62; }
.proof-disclaimer { margin: 14px 0 0; color: #304757; font-size: .92rem; font-weight: 550; }
.art-credit { color: #405665; font-weight: 600; }
.portfolio-games-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.portfolio-game { min-width: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.86); border-radius: 24px; background: rgba(255,255,255,.42); box-shadow: 0 20px 48px rgba(106,129,148,.13), inset 0 1px 0 rgba(255,255,255,.8); backdrop-filter: blur(28px) saturate(120%); -webkit-backdrop-filter: blur(28px) saturate(120%); transition: transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s ease; }
.portfolio-game:hover { transform: translateY(-6px); box-shadow: 0 28px 60px rgba(106,129,148,.19); }
.portfolio-game-art { position: relative; overflow: hidden; aspect-ratio: 616 / 353; background: #121923; }
.portfolio-game-art img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.22,1,.36,1); }
.portfolio-game:hover .portfolio-game-art img { transform: scale(1.045); }
.game-art-index { position: absolute; inset-block-start: 17px; inset-inline-start: 18px; padding: 7px 10px; border: 1px solid rgba(255,255,255,.36); border-radius: 50px; color: #fff; background: rgba(14,24,31,.52); font-size: .69rem; font-weight: 700; letter-spacing: .08em; backdrop-filter: blur(10px); }
.portfolio-game-body { padding: 26px 27px 22px; }
.game-eyebrow { font-size: .66rem; letter-spacing: .1em; }
.game-eyebrow::before { width: 15px; }
.portfolio-game h3 { margin: 12px 0 8px; font-size: clamp(1.5rem, 2.3vw, 2.1rem); line-height: 1.1; letter-spacing: -.05em; font-weight: 600; }
.portfolio-game-body > p { min-height: 3.2em; margin: 0; color: #405462; font-size: .94rem; line-height: 1.62; }
.portfolio-game-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 25px; padding-top: 16px; border-top: 1px solid rgba(102,124,141,.17); }
.portfolio-game-foot small { color: #587080; font-size: .72rem; }
.portfolio-game-foot a { display: inline-flex; align-items: center; gap: 9px; color: #30495a; font-size: .85rem; font-weight: 700; white-space: nowrap; border-bottom: 1px solid #9eb0bf; padding-bottom: 3px; }
.portfolio-game-foot a:hover { color: #102b40; border-color: #30495a; }
.art-credit { margin: 20px 0 0; }
.thesis-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.thesis-card { display: flex; flex-direction: column; min-width: 0; padding: 28px; border: 1px solid rgba(255,255,255,.9); border-radius: 22px; background: rgba(255,255,255,.49); box-shadow: 0 16px 38px rgba(106,129,148,.09), inset 0 1px 0 rgba(255,255,255,.82); backdrop-filter: blur(26px); -webkit-backdrop-filter: blur(26px); }
.thesis-index { color: #697e8e; font-size: .75rem; font-weight: 700; letter-spacing: .12em; }
.thesis-card h3 { margin: 17px 0 10px; color: #253a48; font-size: clamp(1.22rem, 2vw, 1.55rem); font-weight: 600; line-height: 1.2; letter-spacing: -.035em; }
.thesis-card p { margin: 0; color: #3e5361; font-size: .94rem; line-height: 1.72; }
.thesis-card a { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin-top: auto; padding-top: 19px; color: #31566b; font-size: .8rem; font-weight: 700; }
.thesis-card a:hover { text-decoration: underline; text-underline-offset: 4px; }
.thesis-close { margin: 18px 0 0; padding: 22px 25px; border-inline-start: 3px solid #8299aa; border-radius: 0 15px 15px 0; color: #334a59; background: rgba(255,255,255,.4); font-size: .98rem; font-weight: 500; line-height: 1.7; }
[dir="rtl"] .thesis-close { border-radius: 15px 0 0 15px; }
.multiplayer-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); align-items: center; gap: clamp(28px, 7vw, 100px); }
.multiplayer-layout h2 { max-width: 720px; margin: 15px 0 15px; font-size: clamp(2.3rem, 5vw, 5rem); font-weight: 600; line-height: 1.06; letter-spacing: -.065em; }
.multiplayer-layout > div > p { max-width: 680px; margin: 0; color: #455969; line-height: 1.7; }
.target-panel { padding: 30px; border: 1px solid rgba(255,255,255,.87); border-radius: 24px; background: rgba(255,255,255,.47); box-shadow: var(--shadow); backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px); }
.target-panel span { display: block; color: #536a79; font-size: .73rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.target-panel strong { display: block; width: fit-content; margin: 20px 0; color: #263c4c; font-size: clamp(2.5rem, 5vw, 4.5rem); line-height: .98; letter-spacing: -.065em; font-weight: 600; white-space: nowrap; }
.target-panel p { margin: 0; padding-top: 18px; border-top: 1px solid rgba(100,122,140,.22); color: #344b5a; font-size: .9rem; line-height: 1.65; }
.market-grid, .reason-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.market-card, .reason-card { display: flex; flex-direction: column; min-width: 0; min-height: 268px; padding: 27px; border: 1px solid rgba(255,255,255,.84); border-radius: 22px; background: rgba(255,255,255,.39); box-shadow: 0 16px 38px rgba(106,129,148,.1), inset 0 1px 0 rgba(255,255,255,.8); backdrop-filter: blur(26px); -webkit-backdrop-filter: blur(26px); }
.market-card strong { width: fit-content; color: #2b4352; font-size: clamp(1.45rem, 2.15vw, 1.95rem); font-weight: 600; letter-spacing: -.055em; line-height: 1.12; white-space: nowrap; }
.market-card h3, .reason-card h3 { margin: 20px 0 7px; font-size: 1.18rem; font-weight: 600; letter-spacing: -.035em; }
.market-card p, .reason-card p { margin: 0; color: #425766; font-size: .88rem; line-height: 1.58; }
.market-card a { margin-top: auto; padding-top: 20px; color: #3d5b6c; font-size: .79rem; font-weight: 700; }
.market-card a:hover { text-decoration: underline; text-underline-offset: 4px; }
.reason-card { min-height: 214px; }
.reason-card > span { color: #587081; font-size: .72rem; font-weight: 700; letter-spacing: .1em; }
.reason-card h3 { margin-top: auto; }
[dir="rtl"] .game-art-index { direction: ltr; }
@media (max-width: 850px) {
  .market-grid, .reason-grid { grid-template-columns: 1fr; }
  .thesis-grid { grid-template-columns: 1fr; }
  .market-card, .reason-card { min-height: 0; }
  .multiplayer-layout { grid-template-columns: 1fr; gap: 30px; }
  .software-proof-band { grid-template-columns: 1fr; gap: 19px; }
  .software-main-site { min-width: 0; min-height: 0; padding: 17px 0 0; border-top: 1px solid rgba(98,120,138,.2); border-inline-start: 0; }
}
@media (max-width: 650px) {
  .games-chapter .games-hero h1 { font-size: clamp(2.8rem, 11vw, 4.7rem); }
  .game-proof-strip { margin-top: 28px; border-radius: 17px; }
  .game-proof-strip div { min-height: 108px; padding: 14px 10px; }
  .game-proof-strip strong { font-size: clamp(1.65rem, 7vw, 2.4rem); }
  .game-proof-strip .proof-revenue { font-size: clamp(1rem, 4.8vw, 1.55rem); letter-spacing: -.07em; }
  .game-proof-strip span { font-size: .59rem; letter-spacing: .02em; line-height: 1.35; }
  .portfolio-games-grid { grid-template-columns: 1fr; gap: 15px; }
  .portfolio-game-body { padding: 23px 21px 20px; }
  .portfolio-game-body > p { min-height: 0; }
  .market-card, .reason-card, .target-panel { padding: 23px; }
  .target-panel strong { font-size: clamp(1.95rem, 8.4vw, 2.75rem); }
  .market-card strong { font-size: clamp(1.5rem, 6.4vw, 1.9rem); }
  .thesis-card { padding: 23px 21px; }
  .thesis-close { padding: 19px 20px; }
  .software-proof-section { margin-top: -10px; }
  .software-proof-band { gap: 17px; padding: 22px; border-radius: 20px; }
  .software-proof-copy { grid-template-columns: auto minmax(0, 1fr); gap: 6px 15px; }
  .software-proof-number { font-size: clamp(3.25rem, 16vw, 4.6rem); }
  .software-proof-copy h2 { font-size: 1.2rem; }
  .software-proof-copy p { font-size: .87rem; }
  .software-main-site > strong { font-size: 1.35rem; }
}

/* Home cover: dark, floating glass catalogue inspired by the supplied mobile reference */
body[data-page="home"] {
  color-scheme: dark;
  color: #eef4f5;
  --ink: #eef4f5;
  --muted: #b4c1c6;
  --soft: #92a3aa;
  --line: rgba(224, 241, 242, .13);
  --shadow: 0 24px 70px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(244,255,255,.12);
  background:
    radial-gradient(ellipse at 52% 4%, rgba(31, 87, 80, .65), transparent 32%),
    radial-gradient(ellipse at 98% 28%, rgba(33, 65, 75, .48), transparent 33%),
    radial-gradient(ellipse at 12% 55%, rgba(21, 68, 63, .34), transparent 36%),
    radial-gradient(ellipse at 79% 92%, rgba(40, 50, 64, .52), transparent 42%),
    linear-gradient(157deg, #070b10 0%, #111b1e 43%, #111617 68%, #080b0f 100%);
  background-attachment: fixed;
}
body[data-page="home"]::before {
  background-image: radial-gradient(rgba(204, 231, 226, .24) .7px, transparent .9px);
  background-size: 23px 23px;
  opacity: .15;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.58), transparent 83%);
}
body[data-page="home"] .catalog-header {
  border-color: rgba(236, 249, 250, .11);
  background: rgba(7, 12, 15, .48);
  box-shadow: 0 12px 38px rgba(0,0,0,.18), inset 0 -1px 0 rgba(255,255,255,.025);
  backdrop-filter: blur(28px) saturate(135%);
  -webkit-backdrop-filter: blur(28px) saturate(135%);
}
body[data-page="home"] .folio-label { color: #b9c7cb; }
body[data-page="home"] .folio-symbol { border-color: rgba(218,239,238,.22); color: #b0c8c5; }
body[data-page="home"] .language-switch { border-color: rgba(229,245,244,.13); background: rgba(229,245,244,.055); box-shadow: 0 9px 28px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.06); }
body[data-page="home"] .language-switch button { color: #aebdc2; }
body[data-page="home"] .language-switch button:hover { color: #fff; }
body[data-page="home"] .language-switch button.selected { color: #f3f8f8; background: rgba(225,244,242,.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 3px 12px rgba(0,0,0,.18); }
body[data-page="home"] .catalog-cover { min-height: calc(100svh - 75px); background: transparent; }
body[data-page="home"] .catalog-cover::before {
  background:
    radial-gradient(ellipse at 11% 25%, rgba(42, 126, 120, .42), transparent 32%),
    radial-gradient(ellipse at 52% 3%, rgba(79, 119, 154, .30), transparent 31%),
    radial-gradient(ellipse at 94% 48%, rgba(123, 102, 150, .23), transparent 34%),
    radial-gradient(ellipse at 37% 71%, rgba(24, 100, 86, .3), transparent 39%),
    radial-gradient(ellipse at 88% 83%, rgba(35, 75, 85, .25), transparent 35%),
    radial-gradient(ellipse at 42% 98%, rgba(47, 111, 94, .23), transparent 30%);
  filter: blur(44px);
  opacity: .85;
}
body[data-page="home"] .cover-inner { min-height: calc(100svh - 75px); padding-block: clamp(38px, 7vh, 76px) 26px; }
body[data-page="home"] .cover-intro { align-items: flex-start; flex-direction: column; gap: 10px; margin-bottom: clamp(24px, 4vh, 38px); }
body[data-page="home"] .cover-kicker { margin-bottom: 12px; color: #a6c9c5; font-size: .7rem; letter-spacing: .19em; }
body[data-page="home"] .cover-intro h1 { color: #f2f6f7; font-size: clamp(3rem, 6.7vw, 5.5rem); letter-spacing: -.065em; line-height: 1.02; }
body[data-page="home"] .cover-intro h1 em { color: #a9b8bd; }
body[data-page="home"] .cover-intro p { max-width: none; margin: 0; color: #a8b7bd; font-size: .95rem; text-align: start; }
body[data-page="home"] .cover-options { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 17px; flex: 0 0 auto; min-height: 0; max-height: none; }
body[data-page="home"] .cover-option {
  --cover-thumb: 88px;
  position: relative;
  display: grid;
  grid-template-columns: var(--cover-thumb) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  align-items: center;
  align-content: center;
  gap: 5px 15px;
  min-height: 188px;
  padding: 19px;
  border: 1px solid rgba(232, 248, 247, .17);
  border-radius: 23px;
  color: #f2f6f6;
  background: linear-gradient(145deg, rgba(230,247,245,.105), rgba(174,202,202,.045) 58%, rgba(230,247,245,.075));
  box-shadow: 0 20px 52px rgba(0,0,0,.31), inset 0 1px 0 rgba(255,255,255,.15), inset 0 -1px 0 rgba(255,255,255,.035);
  backdrop-filter: blur(26px) saturate(145%);
  -webkit-backdrop-filter: blur(26px) saturate(145%);
  transition: transform .44s cubic-bezier(.22,1,.36,1), border-color .4s ease, background .4s ease, box-shadow .4s ease;
}
body[data-page="home"] .cover-option:nth-child(2) { animation-delay: .09s; }
body[data-page="home"] .cover-option:nth-child(3) { animation-delay: .18s; }
body[data-page="home"] .cover-option::before { inset: 0; opacity: 1; background: radial-gradient(ellipse at 0% 0%, rgba(94,167,157,.13), transparent 58%); transition: opacity .4s ease, transform .6s ease; }
body[data-page="home"] .cover-option-games::before { background: radial-gradient(ellipse at 7% 6%, rgba(84,143,193,.23), transparent 68%); }
body[data-page="home"] .cover-option-software::before { background: radial-gradient(ellipse at 7% 6%, rgba(91,174,158,.2), transparent 68%); }
body[data-page="home"] .cover-option-creative::before { background: radial-gradient(ellipse at 7% 6%, rgba(193,144,109,.2), transparent 68%); }
body[data-page="home"] .cover-option::after { inset: 1px; border: 1px solid rgba(234,248,247,.075); border-radius: 22px; background: linear-gradient(132deg, rgba(255,255,255,.08), transparent 30%, transparent 72%, rgba(255,255,255,.035)); opacity: 1; }
body[data-page="home"] .cover-option:hover,
body[data-page="home"] .cover-option:focus-visible { transform: translateY(-5px); border-color: rgba(212,244,239,.33); background: linear-gradient(145deg, rgba(230,247,245,.145), rgba(174,202,202,.075) 58%, rgba(230,247,245,.11)); box-shadow: 0 28px 66px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.21); }
body[data-page="home"] .cover-image { position: relative; inset: auto; z-index: 1; grid-column: 1; grid-row: 1 / 3; width: var(--cover-thumb); height: 112px; overflow: hidden; border: 1px solid rgba(232,248,247,.16); border-radius: 15px; box-shadow: 0 11px 28px rgba(0,0,0,.3); }
body[data-page="home"] .cover-image::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(145deg, rgba(255,255,255,.09), transparent 48%, rgba(0,0,0,.2)); pointer-events: none; }
body[data-page="home"] .cover-image img { width: 100%; height: 100%; object-fit: cover; opacity: .92; filter: saturate(.82) contrast(1.06); transition: transform .6s cubic-bezier(.22,1,.36,1), filter .4s ease; }
body[data-page="home"] .cover-option:hover .cover-image img,
body[data-page="home"] .cover-option:focus-visible .cover-image img { transform: scale(1.055); filter: saturate(1) contrast(1.08); }
body[data-page="home"] .option-number { position: static; z-index: 1; grid-column: 2; grid-row: 1; justify-self: start; align-self: end; width: auto; min-height: 0; margin: 0 0 2px; padding: 0; border: 0; border-radius: 0; color: #9fb5b7; background: transparent; box-shadow: none; font-size: .61rem; font-weight: 650; letter-spacing: .15em; backdrop-filter: none; -webkit-backdrop-filter: none; }
body[data-page="home"] .option-arrow { position: absolute; z-index: 2; inset-block-start: 14px; inset-inline-end: 14px; display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid rgba(232,248,247,.14); border-radius: 50%; color: #dfe9e9; background: rgba(224,243,240,.075); box-shadow: inset 0 1px 0 rgba(255,255,255,.1); font-size: .95rem; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); transition: transform .35s ease, background .35s ease, border-color .35s ease; }
body[data-page="home"] .cover-option:hover .option-arrow { transform: translate(2px,-2px); border-color: rgba(222,247,241,.34); background: rgba(224,243,240,.15); }
body[data-page="home"] .option-copy { grid-column: 2; grid-row: 2; align-self: start; display: flex; flex-direction: column; gap: 5px; min-width: 0; padding: 0; border: 0; border-radius: 0; color: #f1f5f5; background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; transition: none; }
body[data-page="home"] .option-copy strong { color: #f1f5f5; font-size: clamp(1.15rem, 1.75vw, 1.55rem); font-weight: 590; line-height: 1.12; letter-spacing: -.035em; }
body[data-page="home"] .option-copy small { max-width: 240px; color: #b7c6c9; font-size: .77rem; font-weight: 450; line-height: 1.45; }
body[data-page="home"] .cover-bottom { color: #8fa0a5; border-top: 1px solid rgba(225,242,241,.09); padding-top: 18px; font-size: .76rem; }
body[data-page="home"] .cover-contact { color: #d1dedd; border-color: rgba(224,242,240,.24); }
body[data-page="home"] .cover-contact:hover { color: #fff; }
body[data-page="home"] :focus-visible { outline-color: #a8dfd7; }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body[data-page="home"] .catalog-header,
  body[data-page="home"] .cover-option { background: rgba(14, 22, 25, .96); }
}

/* One continuous dark-glass language across every catalogue chapter */
:root {
  color-scheme: dark;
  --paper: #0d1316;
  --surface: rgba(221, 241, 239, .065);
  --surface-strong: rgba(221, 241, 239, .105);
  --ink: #edf3f4;
  --muted: #b5c2c6;
  --soft: #91a2a8;
  --line: rgba(223, 241, 239, .13);
  --shadow: 0 24px 68px rgba(0,0,0,.34), inset 0 1px 0 rgba(244,255,255,.11);
}
body {
  color: var(--ink);
  background:
    radial-gradient(ellipse at 52% 2%, rgba(31,87,80,.65), transparent 32%),
    radial-gradient(ellipse at 98% 26%, rgba(33,65,75,.48), transparent 33%),
    radial-gradient(ellipse at 12% 55%, rgba(21,68,63,.34), transparent 36%),
    radial-gradient(ellipse at 79% 92%, rgba(40,50,64,.52), transparent 42%),
    linear-gradient(157deg, #070b10 0%, #111b1e 43%, #111617 68%, #080b0f 100%);
  background-attachment: fixed;
}
body::before { background-image: radial-gradient(rgba(204,231,226,.2) .7px, transparent .9px); background-size: 23px 23px; opacity: .14; }
::selection { background: rgba(129,202,190,.45); color: #fff; }
:focus-visible { outline-color: #9ad8ce; }
.catalog-header { border-color: rgba(236,249,250,.11); background: rgba(7,12,15,.48); box-shadow: 0 12px 38px rgba(0,0,0,.18), inset 0 -1px 0 rgba(255,255,255,.025); backdrop-filter: blur(28px) saturate(135%); -webkit-backdrop-filter: blur(28px) saturate(135%); }
.folio-label, .index-link { color: #b9c7cb; }
.folio-symbol { border-color: rgba(218,239,238,.22); color: #b0c8c5; }
.index-link:hover { color: #fff; }
.back-arrow { border-color: rgba(224,242,240,.16); color: #dce8e8; background: rgba(224,243,240,.075); }
.language-switch { border-color: rgba(229,245,244,.13); background: rgba(229,245,244,.055); box-shadow: 0 9px 28px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.06); }
.language-switch button { color: #aebdc2; }
.language-switch button:hover { color: #fff; }
.language-switch button.selected { color: #f3f8f8; background: rgba(225,244,242,.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 3px 12px rgba(0,0,0,.18); }
.eyebrow { color: #a8c1c2; }
.eyebrow::before { background: rgba(157,198,195,.55); }
.detail-hero { border-color: rgba(225,242,241,.1); background: linear-gradient(135deg, rgba(218,241,238,.065), rgba(164,194,197,.025)); box-shadow: inset 0 1px 0 rgba(255,255,255,.07); }
.detail-hero::after { background: radial-gradient(circle, rgba(51,115,119,.34), rgba(56,89,105,.12) 48%, transparent 70%); }
.software-hero::after { background: radial-gradient(circle, rgba(59,133,124,.36), rgba(61,105,119,.1) 49%, transparent 70%); }
.creative-hero::after { background: radial-gradient(circle, rgba(136,99,76,.32), rgba(85,82,112,.12) 50%, transparent 70%); }
.hero h1 { color: #f1f5f5; }
.hero h1 em { color: #a9b8bd; }
.hero-intro { color: #bac7cb; }
.hero-aside { color: #a9b7bc; }
.section-alt, .statement-section, .browse-section { border-color: rgba(225,242,241,.09); background: rgba(214,238,236,.025); }
.section-heading p, .statement-inner p, .catalog-end p, .qr-panel p, .contact-info p { color: #b7c4c8; }
.game-card, .capability-card, .service-card, .portfolio-game, .thesis-card, .target-panel, .market-card, .reason-card, .detail-proof, .software-proof-band, .qr-panel, .catalog-end-inner {
  border-color: rgba(228,245,243,.14);
  background: linear-gradient(145deg, rgba(224,243,241,.085), rgba(174,202,202,.035) 60%, rgba(224,243,241,.055));
  box-shadow: 0 20px 54px rgba(0,0,0,.25), inset 0 1px 0 rgba(244,255,255,.11);
  backdrop-filter: blur(26px) saturate(135%);
  -webkit-backdrop-filter: blur(26px) saturate(135%);
}
.game-card:hover, .capability-card:hover, .service-card:hover, .portfolio-game:hover { box-shadow: 0 27px 66px rgba(0,0,0,.34), inset 0 1px 0 rgba(244,255,255,.15); }
.game-card::before { background: radial-gradient(circle, rgba(58,128,122,.22), transparent 70%); }
.game-number, .service-number, .thesis-index, .reason-card > span, .game-proof-strip span { color: #9fb5b9; }
.game-card h3, .capability-card h3, .service-card h3, .thesis-card h3, .market-card h3, .reason-card h3 { color: #eaf1f2; }
.game-card p, .capability-card p, .service-card p, .portfolio-game-body > p, .thesis-card p, .market-card p, .reason-card p, .target-panel p, .multiplayer-layout > div > p { color: #b8c6c9; }
.game-card-mark { color: #9cb0b4; }
.pill { border-color: rgba(224,242,240,.17); color: #c2d1d2; background: rgba(220,241,238,.075); }
.detail-proof { color: #edf4f4; }
.detail-proof span, .software-main-site > span { color: #aabbbf; }
.game-proof-strip { border-color: rgba(228,245,243,.14); background: rgba(214,238,236,.055); box-shadow: var(--shadow); }
.game-proof-strip div + div { border-color: rgba(225,242,241,.12); }
.game-proof-strip strong, .software-proof-number, .software-proof-copy h2, .target-panel strong, .market-card strong { color: #eef4f4; }
.proof-disclaimer, .art-credit { color: #b7c5c8; }
.portfolio-game-body { color: #edf3f4; }
.portfolio-game-foot { border-color: rgba(225,242,241,.12); }
.portfolio-game-foot small { color: #9eafb3; }
.portfolio-game-foot a, .thesis-card a, .market-card a { color: #b9d9d5; border-color: rgba(185,217,213,.4); }
.portfolio-game-foot a:hover, .thesis-card a:hover, .market-card a:hover { color: #f2fbfa; border-color: #e0f3f0; }
.thesis-close { border-inline-start-color: #6fa59f; color: #d3dfdf; background: rgba(218,241,238,.055); }
.target-panel span { color: #a8b9bd; }
.target-panel p { border-color: rgba(225,242,241,.13); }
.software-proof-copy p { color: #b7c5c8; }
.software-main-site { color: #d8e5e5; border-color: rgba(225,242,241,.14); }
.software-main-site:hover { color: #fff; }
.service-card:hover, .capability-card:hover { transform: translateY(-4px); }
.catalog-end { color: #edf3f4; }
.catalog-end h2 { color: #f1f5f5; }
.button { color: #d5e1e2; }
.button-primary, .button-ghost { border-color: rgba(225,242,241,.18); color: #edf5f4; background: rgba(221,241,238,.11); box-shadow: 0 9px 24px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.1); }
.button-primary:hover, .button-ghost:hover { background: rgba(221,241,238,.18); box-shadow: 0 13px 30px rgba(0,0,0,.27), inset 0 1px 0 rgba(255,255,255,.15); }
.catalog-footer { border-color: rgba(225,242,241,.1); }
.catalog-footer-inner { color: #9eafb3; }
.catalog-footer-inner a { color: #cedbdc; }
.catalog-footer-inner a:hover { color: #fff; }
.share-feedback { color: #afc0c3; }
.qr-panel img { border-color: rgba(255,255,255,.15); background: #f7fafb; }
.qr-panel small { color: #afc0c3; }
.contact-slots { border-color: rgba(225,242,241,.12); }
.contact-slot { border-color: rgba(225,242,241,.12); }
.contact-slot span, .contact-slot small { color: #aabcc0; }
.contact-slot strong { color: #edf3f4; }
.browse-links a { border-color: rgba(228,245,243,.16); color: #cad8d9; background: rgba(220,241,238,.065); }
.browse-links a:hover { background: rgba(220,241,238,.12); }

/* Keep the three destinations visible together: a vertical, non-scrolling home menu */
body[data-page="home"] .cover-inner { width: min(calc(100% - 64px), 860px); margin-inline: auto; }
body[data-page="home"] .cover-options { display: grid; grid-template-columns: minmax(0,1fr); gap: 12px; flex: 0 0 auto; width: 100%; min-height: 0; max-height: none; margin: 0; padding: 0; overflow: visible; }
body[data-page="home"] .cover-option { --cover-thumb: 82px; flex: initial; width: 100%; max-width: none; min-height: 142px; padding: 15px; }
body[data-page="home"] .cover-image { height: 106px; }
body[data-page="home"] .cover-bottom { margin-top: auto; }
@media (max-width: 650px) {
  body[data-page="home"] .cover-inner { width: min(calc(100% - 34px), 860px); }
  body[data-page="home"] .cover-options { grid-template-columns: minmax(0,1fr); gap: 11px; }
  body[data-page="home"] .cover-option { --cover-thumb: 70px; width: 100%; min-height: 130px; padding: 13px; }
  body[data-page="home"] .cover-image { height: 98px; }
  body[data-page="home"] .option-arrow { inset-block-start: 11px; inset-inline-end: 11px; width: 29px; height: 29px; }
  body[data-page="home"] .cover-bottom { margin-top: auto; }
}
@media (max-width: 390px) {
  body[data-page="home"] .cover-inner { width: min(calc(100% - 30px), 860px); padding-block: 22px 15px; }
  body[data-page="home"] .cover-option { --cover-thumb: 58px; min-height: 126px; gap: 4px 10px; padding: 11px; }
  body[data-page="home"] .cover-image { height: 88px; }
  body[data-page="home"] .option-copy strong { font-size: 1.18rem; }
  body[data-page="home"] .option-copy small { font-size: .72rem; }
}

/* Keep interactive states consistent with the dark glass palette. */
body[data-page="home"] .cover-option:hover .option-copy,
body[data-page="home"] .cover-option:focus-visible .option-copy {
  background: rgba(221,241,239,.035);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
}
.language-switch button:hover:not(.selected) { color: #f4fbfa; background: rgba(221,241,239,.095); }
.language-switch button:active { transform: scale(.96); }
.index-link .back-arrow { transition: transform .25s ease, border-color .25s ease, background-color .25s ease; }
.index-link:hover .back-arrow { transform: translateX(-2px); border-color: rgba(224,242,240,.3); background: rgba(224,243,240,.13); }
[dir="rtl"] .index-link:hover .back-arrow { transform: translateX(2px); }
.button:active, .browse-links a:active, .portfolio-game-foot a:active,
.thesis-card a:active, .market-card a:active, .index-link:active,
.cover-contact:active, .catalog-footer-inner a:active {
  transform: translateY(0) scale(.985);
}
body[data-page="home"] .cover-option:active { transform: translateY(-1px) scale(.995); }
.index-link { min-height: 44px; }
.back-arrow { width: 36px; height: 36px; }
.cover-contact { min-height: 44px; }
.portfolio-game-foot a, .thesis-card a, .market-card a,
.catalog-footer-inner a { display: inline-flex; align-items: center; min-height: 44px; }
.thesis-card a { padding-top: 12px; }
@media (max-width: 650px) {
  .language-switch button { min-width: 44px; min-height: 44px; }
}
@media (max-width: 350px) {
  .language-switch button { min-width: 38px; min-height: 38px; }
  .index-link { min-height: 44px; }
  .back-arrow { width: 34px; height: 34px; }
}
.motion-ready .service-card.reveal.visible:hover,
.motion-ready .capability-card.reveal.visible:hover { transform: translateY(-4px); }
.motion-ready .portfolio-game.reveal.visible:hover { transform: translateY(-6px); }