/* V166: image-led art direction and requested presentation changes. */
body.futgrid-landing {
  --fg-scene: url('/assets/backgrounds-v166/arena.webp');
  --fg-panorama: url('/assets/backgrounds-v166/panorama.webp');
  --fg-finale: url('/assets/backgrounds-v166/celebration.webp');
  background: #050c19;
  isolation: isolate;
}
body.futgrid-landing[data-landing-theme="tactics"] { --fg-scene: url('/assets/backgrounds-v166/tactics.webp'); }
body.futgrid-landing[data-landing-theme="3d"] { --fg-scene: url('/assets/backgrounds-v166/action.webp'); }
.futgrid-landing::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(180deg,#040b1894,#040b1866 55%,#040b189e),var(--fg-panorama);
  background-position: center; background-size: cover; background-repeat: no-repeat;
}
.futgrid-landing .hero {
  background-image: linear-gradient(90deg,#030b18dc 0%,#030b18b8 38%,#030b1866 68%,#030b1840),linear-gradient(0deg,#050c19 0%,#050c1900 30%),var(--fg-scene);
  background-position: center,center,center;
  background-size: cover; background-repeat: no-repeat;
  padding-top: 28px;
}
.futgrid-landing .hero:before { opacity: .18; }
.futgrid-landing .hero:after { display: none; }
.futgrid-landing .hero h1 { text-shadow: 0 3px 24px #0208126b; }
.futgrid-landing .hero .lead { color: #d0dbea; text-shadow: 0 2px 12px #020713; }
.futgrid-landing .hero .eyebrow { background: #071326b0; border-color: #7ecdf044; }
.futgrid-landing .breadcrumbs { color: #c8d6e9; margin-bottom: 35px; }
.futgrid-landing .section { background: #060f20c9; }
.futgrid-landing .section.alt { background: linear-gradient(105deg,#081427ed,#081427af); }
.futgrid-landing .section.showcase { background: linear-gradient(180deg,#050c19e0,#050c19a8 45%,#050c19df); }
.futgrid-landing .section:has(.steps-grid) { background: linear-gradient(100deg,#071022d9,#0710228c); }
.futgrid-landing .section:not(.showcase)>.wrap { border-top-color: #86baf42b; }
.futgrid-landing .feature-card,.futgrid-landing .related-card { background-color: #0a1629eb; }
.futgrid-landing .prose-card p,.futgrid-landing .section-intro { color: #c1cee1; }

/* Compact header controls with language-code tiles and a clear app CTA. */
.futgrid-landing .site-header { border-color: #71b3ec37; background: #071122e8; }
.futgrid-landing .header-tools { gap: 12px; }
.futgrid-landing .language-menu summary {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 9px 12px; border: 1px solid #6aa3dc4f;
  border-radius: 10px; background: linear-gradient(145deg,#172b45,#0b172b);
  font-size: 11px; font-weight: 750; line-height: 1;
  transition: border-color .2s,background .2s,box-shadow .2s;
}
.futgrid-landing .language-menu summary:before {
  content: ''; width: 14px; height: 14px; border: 1px solid #84d6f4; border-radius: 50%;
  background: linear-gradient(90deg,transparent 43%,#84d6f480 46%,#84d6f480 54%,transparent 57%),linear-gradient(transparent 45%,#84d6f480 48%,#84d6f480 52%,transparent 55%);
}
.futgrid-landing .language-menu summary:after { content: ''; width: 5px; height: 5px; border-right: 1.5px solid #91bce4; border-bottom: 1.5px solid #91bce4; transform: rotate(45deg) translateY(-2px); margin-left: 2px; }
.futgrid-landing .language-menu[open] summary { border-color: #41c7f494; box-shadow: 0 0 0 3px #41c7f40b; }
.futgrid-landing .language-menu nav { width: 222px; padding: 9px; border-radius: 14px; background: #09172bf7; border-color: #5c93d558; box-shadow: 0 20px 55px #0009; }
.futgrid-landing .header-languages a { gap: 11px; min-height: 45px; font-size: 12px; padding: 7px 9px; }
.futgrid-landing .header-languages a:before { content: attr(hreflang); display: grid; place-items: center; width: 29px; height: 27px; flex: 0 0 auto; border: 1px solid #7192c442; border-radius: 6px; background: #24385661; color: #d9e8fb; font: 700 10px/1 ui-monospace,monospace; text-transform: uppercase; }
.futgrid-landing .header-languages a[aria-current]:after { content: '✓'; margin-left: auto; font-size: 13px; color: #6cd8ff; }
.futgrid-landing .header-cta {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
  padding: 11px 17px; border: 1px solid #72d7fb87; border-radius: 10px;
  background: linear-gradient(120deg,#234466,#172b48 70%,#493056);
  color: #effaff; font-size: 11px; box-shadow: inset 0 1px 0 #c4eeff21,0 4px 20px #009af51a;
  transition: background .25s,box-shadow .25s,border-color .25s,transform .25s;
}
.futgrid-landing .header-cta:hover { border-color: #9fe8ff; box-shadow: 0 5px 25px #1494ff30; transform: translateY(-1px); }

/* All product media fit their own aspect ratio. Images are static, without links. */
.futgrid-landing .image-frame { display: block; width: 100%; overflow: hidden; border-radius: 8px; }
.futgrid-landing .image-frame img { display: block; width: 100%; height: auto; max-height: none; }
.futgrid-landing .hero-visual { transform: none; }
.futgrid-landing .hero-visual .video-shell { aspect-ratio: auto; display: block; border: 0; border-radius: 8px; }
.futgrid-landing .hero-visual :is(img,video) { display: block; width: 100%; height: auto; max-height: none; }
.futgrid-landing .media-card .media-stage { display: block; aspect-ratio: auto; min-height: 0; height: auto; background: transparent; border: 0; }
.futgrid-landing .media-card .media-stage :is(img,video,.image-frame) { display: block; width: 100%; height: auto; max-height: none; border-radius: 7px; }
.futgrid-landing .media-card .media-stage video { aspect-ratio: 16/9; }
.futgrid-landing .media-card { padding: 8px 8px 0; }
.futgrid-landing .media-card figcaption { min-height: 64px; padding-block: 17px; }
.futgrid-landing video { pointer-events: none; }

/* Three short signals on one line, including on phones. */
.futgrid-landing .hero-signals { display: flex; align-items: center; flex-wrap: nowrap; gap: 25px; margin-top: 28px; padding: 16px 0; background: #050e1b24; }
.futgrid-landing .hero-signals>span { display: inline-flex; flex-direction: row; align-items: center; gap: 7px; white-space: nowrap; font-size: 11px; color: #c3d2e5; }
.futgrid-landing .hero-signals b { display: inline; width: auto; height: auto; border: 0; border-radius: 0; font: 500 10px/1 ui-monospace,monospace; color: #69d5fa; }
.futgrid-landing .hero-signals .signal-brand { font-size: 9px; letter-spacing: .09em; }

/* One numeral per step: remove the inherited decorative zero. */
.futgrid-landing .step-number:before { content: none; display: none; }
.futgrid-landing .step-number { display: grid; place-items: center; width: 48px; height: 48px; margin: 0 0 28px; border: 1px solid #69cefa65; border-radius: 12px; background: linear-gradient(145deg,#19405e,#10263d); color: #d0f4ff; font: 650 22px/1 ui-sans-serif,system-ui,sans-serif; letter-spacing: 0; box-shadow: inset 0 1px 0 #b2eaff17; }
.futgrid-landing .step:nth-child(2) .step-number { background: linear-gradient(145deg,#273a66,#152441); border-color: #8d9cf665; }
.futgrid-landing .step:nth-child(3) .step-number { background: linear-gradient(145deg,#452b52,#231e38); border-color: #e888bd65; }

/* A photographic finale, retaining the exact CTA and copy. */
.futgrid-landing .final-cta { padding-block: 48px 75px; background: linear-gradient(180deg,#050c19a8,#050c19ef); }
.futgrid-landing .cta-panel { padding: 72px; border-color: #7aafe861; background-image: linear-gradient(90deg,#041022ee 0%,#041022cd 32%,#07132488 61%,#07132416 100%),var(--fg-finale); background-size: cover; background-position: center,center 58%; background-repeat: no-repeat; box-shadow: 0 30px 60px -30px #000b,inset 0 1px 0 #b1e9ff26; }
.futgrid-landing .cta-panel:before { inset: 0; width: auto; height: 2px; border: 0; background: linear-gradient(90deg,transparent,#41c7f4,#fa3a89,transparent); transform: none; opacity: .9; }
.futgrid-landing .cta-panel:after { display: none; }
.futgrid-landing .cta-panel h2 { max-width: 760px; text-shadow: 0 3px 25px #020710b0; }
.futgrid-landing .cta-panel p { color: #d0dced; text-shadow: 0 2px 15px #030815; }
.futgrid-landing .cta-panel .eyebrow { color: #dbeaff; }
.futgrid-landing .language-strip,.futgrid-landing footer { background: #071120f5; }
@media(max-width:1000px) {
  .futgrid-landing .hero-signals .signal-brand { display: none; }
}
@media(max-width:800px) {
  body.futgrid-landing { --fg-scene: url('/assets/backgrounds-v166/arena-mobile.webp'); --fg-panorama: url('/assets/backgrounds-v166/panorama-mobile.webp'); --fg-finale: url('/assets/backgrounds-v166/celebration-mobile.webp'); }
  body.futgrid-landing[data-landing-theme="tactics"] { --fg-scene: url('/assets/backgrounds-v166/tactics-mobile.webp'); }
  body.futgrid-landing[data-landing-theme="3d"] { --fg-scene: url('/assets/backgrounds-v166/action-mobile.webp'); }
  .futgrid-landing::before { display: none; }
  .futgrid-landing .hero { background-image: linear-gradient(180deg,#030b18c7 0%,#030b187f 50%,#050c19 100%),var(--fg-scene); background-position: center,center top; background-size: cover,auto 950px; }
  .futgrid-landing .section { background-image: linear-gradient(#060f20e8,#060f20e8),var(--fg-panorama); background-size: cover; }
  .futgrid-landing .section.alt { background-image: linear-gradient(110deg,#081427ea,#081427c2),var(--fg-panorama); }
  .futgrid-landing .section.showcase { background-image: linear-gradient(#050c19bb,#050c19db),var(--fg-panorama); }
  .futgrid-landing .section:has(.steps-grid) { background-image: linear-gradient(#071022cc,#071022c9),var(--fg-panorama); }
  .futgrid-landing .header-tools { gap: 8px; }
  .futgrid-landing .language-menu summary { padding: 9px; gap: 6px; }
  .futgrid-landing .header-cta { padding: 9px 12px; font-size: 10px; }
  .futgrid-landing .hero-signals { justify-content: flex-start; margin-top: 25px; padding-block: 15px; gap: 22px; }
  .futgrid-landing .cta-panel { padding: 48px 36px; }
}
@media(max-width:520px) {
  .futgrid-landing .header-inner { width: calc(100% - 20px); }
  .futgrid-landing .brand { gap: 7px; }
  .futgrid-landing .brand img { width: 32px; height: 32px; }
  .futgrid-landing .brand strong { font-size: 16px; }
  .futgrid-landing .header-tools { gap: 6px; }
  .futgrid-landing .language-menu summary { min-width: 44px; min-height: 40px; padding: 8px 7px; font-size: 10px; gap: 4px; }
  .futgrid-landing .language-menu summary:before { display: none; }
  .futgrid-landing .language-menu nav { right: -65px; width: 205px; }
  .futgrid-landing .header-cta { display: inline-flex; min-height: 40px; max-width: 105px; padding: 7px 8px; font-size: 9px; line-height: 1.35; white-space: normal; text-align: center; }
  .futgrid-landing .hero { background-position: center,58% top; background-size: cover,auto 850px; }
  .futgrid-landing .hero-signals { justify-content: space-between; gap: 7px; padding-block: 13px; margin-top: 22px; }
  .futgrid-landing .hero-signals>span { flex-direction: row; gap: 5px; font-size: clamp(9px,2.6vw,11px); line-height: 1.4; }
  .futgrid-landing .hero-signals b { font-size: 8px; width: auto; height: auto; }
  .futgrid-landing .hero-signals .signal-brand { display: none; }
  .futgrid-landing .media-card figcaption { padding: 16px 10px; }
  .futgrid-landing .step { padding: 25px 22px 25px 80px; }
  .futgrid-landing .step-number { position: absolute; top: 25px; left: 22px; width: 40px; height: 40px; margin: 0; font-size: 19px; border-radius: 10px; }
  .futgrid-landing .cta-panel { padding: 38px 25px; background-image: linear-gradient(90deg,#041022d9,#041022a8),var(--fg-finale); background-position: center,62% center; }
  .futgrid-landing .final-cta { padding-block: 26px 48px; }
}
@media(prefers-reduced-motion:reduce) {
  .futgrid-landing::before { position: absolute; height: 100vh; }
  .futgrid-landing .header-cta:hover { transform: none; }
}