:root {
  color-scheme: light;
  --gold: #f4c34f;
  --gold-light: #fff0ad;
  --gold-deep: #a96312;
  --cream: #fff9e9;
  --paper: #fffdf7;
  --ink: #35151d;
  --wine: #c51e3b;
  --ruby: #ed3452;
  --blue: #1262a8;
  --green: #087b50;
  --fountain: url('./assets/fountain.png');
  --scenery: url('./assets/scenery.png');
}
* { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; }
body {
  min-width: 320px;
  margin: 0;
  color: var(--ink);
  font-family: Georgia, 'Times New Roman', serif;
  background-color: #ffe5a6;
  background-image: linear-gradient(125deg, #ffcf5480, #f33c4b54 40%, #ffe39358 72%, #b80b2966), var(--scenery);
  background-position: center top;
  background-size: cover;
  background-attachment: fixed;
}
body:before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 30;
  border: 5px solid #eeb949;
  outline: 1px solid #fff0ab;
  outline-offset: -9px;
  pointer-events: none;
}
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
a, button, select { touch-action: manipulation; }
button { cursor: pointer; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid #1177be;
  outline-offset: 3px;
}
header {
  position: relative;
  z-index: 2;
  max-width: 1680px;
  margin: 0 auto;
  padding: 10px clamp(10px, 2vw, 28px) 5px;
}
.nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 7px;
}
.nav a, .language select {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 11px;
  border: 2px solid #ffe48a;
  border-radius: 13px;
  color: #fff8d8;
  background: linear-gradient(180deg, #ff6270 0%, #da1837 42%, #a60929 100%);
  box-shadow: inset 0 2px 0 #fff7c780, inset 0 -3px 0 #70041d66, 0 4px 0 #8e351e, 0 7px 13px #84212b44;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.05;
  text-shadow: 0 1px 2px #721126;
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
.nav a:hover, .btn:hover, .tile:hover, .account-options a:hover { transform: translateY(-2px); filter: brightness(1.08); }
.nav a:active, .btn:active { transform: translateY(1px); }
.nav a.active { box-shadow: inset 0 2px 0 #fff9cd, 0 0 0 2px #edac32, 0 0 17px #ffdf59; }
.nav .glyph { width: 20px; height: 20px; }
.glyph { display: inline-block; width: 25px; height: 25px; flex: 0 0 auto; color: #ffdf7b; vertical-align: middle; }
.language { display: inline-flex; align-items: center; justify-content: center; }
.language-caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.language select {
  width: 61px;
  min-width: 61px;
  padding: 6px 8px;
  cursor: pointer;
  appearance: auto;
  font-family: system-ui, sans-serif;
  font-size: 20px;
  text-shadow: none;
}
.language option { color: #31131a; background: #fff8e7; font-size: 20px; }
.skip { position: absolute; left: 14px; top: -100px; z-index: 100; padding: 10px; background: white; }
.skip:focus { top: 10px; }
.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(165px, .82fr) minmax(0, 2.7fr) minmax(165px, .82fr);
  align-items: center;
  gap: clamp(8px, 1vw, 18px);
  max-width: 1680px;
  min-height: 320px;
  margin: 0 auto;
  padding: 18px clamp(15px, 2.4vw, 38px);
  overflow: hidden;
  border-block: 2px solid #e9b23f;
  background-image: linear-gradient(105deg, #fff9e7ee, #fff1c99c 47%, #fff9e8e8), var(--scenery);
  background-position: center, center 28%;
  background-size: cover;
  box-shadow: 0 7px 18px #9b481e26;
}
.logo-block { position: relative; z-index: 1; min-width: 0; text-align: center; font-size: 14px; font-weight: 700; line-height: 1.24; }
.logo-block img {
  display: block;
  width: clamp(88px, 10vw, 148px);
  height: clamp(88px, 10vw, 148px);
  margin: 3px auto 8px;
  object-fit: cover;
  border: 3px solid #f7cd66;
  border-radius: 50%;
  box-shadow: 0 0 0 3px #fff5d4, 0 7px 16px #86401955;
}
.logo-block p { margin: 6px 0; overflow-wrap: anywhere; }
.logo-meta { display: block; min-height: 30px; font-size: 12px; font-weight: 400; }
.logo-block > a:last-child { margin-top: 6px; }
.hero-main { position: relative; display: grid; grid-template-columns: minmax(180px, .95fr) minmax(0, 1.2fr); align-items: center; min-height: 275px; }
.fountain {
  width: 100%;
  height: 265px;
  background-image: var(--fountain);
  background-position: center;
  background-size: cover;
  border-radius: 18px;
  box-shadow: 0 8px 20px #71301422;
}
.fountain:after { content: none; }
.hero-copy { position: relative; z-index: 1; padding: 8px; text-align: center; }
.hero-copy h1 {
  margin: 0;
  color: #e8aa1e;
  background: linear-gradient(180deg, #fff4a8 0%, #f8cb45 42%, #c87910 78%, #fff0a3 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: clamp(47px, 6.3vw, 94px);
  font-weight: 900;
  letter-spacing: .035em;
  line-height: .98;
  text-shadow: 0 1px 0 #fff2a6, 0 3px 0 #a35413, 0 5px 0 #783013, 0 9px 12px #a3422488, 0 0 19px #ffdc59aa;
}
.hero-copy h1:before { content: none; }
.hero-copy h2 {
  max-width: 550px;
  margin: 10px auto 8px;
  color: #8e1726;
  font-size: clamp(17px, 2vw, 26px);
  line-height: 1.16;
  text-shadow: 0 1px #fff1c4, 0 2px #bb7c24;
}
.hero-copy p { max-width: 430px; margin: 8px auto 12px; font-size: clamp(13px, 1.4vw, 17px); line-height: 1.35; }
.btn {
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 6px 12px;
  border: 2px solid #ffe08a;
  border-radius: 999px;
  color: #fff7d6;
  background: linear-gradient(180deg, #ff6670 0%, #dc1434 48%, #a30727 100%);
  box-shadow: inset 0 2px 0 #fff6c980, 0 3px 0 #87251b, 0 5px 10px #9d233a44;
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  text-shadow: 0 1px 2px #691024;
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
.btn:after { content: '→'; font-size: 14px; }
.btn.wine, .wine .btn { background: linear-gradient(180deg, #ff6872, #df1839 48%, #a00729); }
.btn.blue, .blue .btn { background: linear-gradient(180deg, #70c4fa, #1681d2 45%, #07508f); }
.btn.green, .green .btn { background: linear-gradient(180deg, #73dda9, #13a66c 45%, #08724d); }
.btn.gold, .gold .btn { background: linear-gradient(180deg, #ffe794, #e7a72e 48%, #a55b12); color: #fffdf2; }
.wine { --tone: #bc1735; --light: #f04b62; }
.blue { --tone: #095399; --light: #2e99eb; }
.green { --tone: #08734d; --light: #30ba7f; }
.gold { --tone: #a96511; --light: #edb83b; }
.container { max-width: 1640px; margin: 0 auto; padding: 12px clamp(12px, 2.3vw, 34px) 24px; }
.primary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.tile {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 2px solid #ffe28c;
  border-radius: 15px;
  color: #fff9df;
  background: linear-gradient(145deg, var(--light), var(--tone) 55%, color-mix(in srgb, var(--tone), #710318 30%));
  box-shadow: inset 0 2px 0 #fff7cb77, 0 4px 0 #872e1d, 0 7px 13px #6c242b30;
  transition: transform .18s ease, filter .18s ease;
}
.tile > .glyph { width: 43px; height: 43px; padding: 7px; border: 2px solid #ffe590; border-radius: 50%; filter: drop-shadow(0 2px 2px #621326); }
.tile h3 { margin: 0 0 3px; font-size: clamp(15px, 1.55vw, 21px); line-height: 1.1; }
.tile p { margin: 0; font-size: 13px; line-height: 1.25; }
.features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 11px 0; }
.feature {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 155px;
  grid-template-columns: minmax(0, 1.3fr) minmax(90px, 1fr);
  align-items: center;
  gap: 7px;
  padding: 13px;
  overflow: hidden;
  border: 2px solid #e9b74c;
  border-radius: 14px;
  background: linear-gradient(120deg, #fffef8f5, #fff5d6d8);
  box-shadow: 0 5px 14px #83311f24;
}
.feature h3 { margin: 0 0 5px; color: #ad1b32; font-size: clamp(18px, 2vw, 25px); line-height: 1.08; text-shadow: 0 1px #fff, 0 2px #f4c862; }
.feature p { margin: 0 0 9px; font-size: 14px; line-height: 1.3; }
.feature .glyph { width: 100px; height: 100px; margin: auto; color: #d99b20; filter: drop-shadow(0 4px 5px #7a251c55); }
.reference-products, .art-globe, .art-charity { min-width: 0; width: 100%; min-height: 105px; height: 100%; background-repeat: no-repeat; }
.reference-products { background-image: var(--reference); background-size: 1580px 990px; background-position: -335px -443px; }
.art-globe { border-radius: 50%; background-image: var(--reference); background-size: 1580px 990px; background-position: -860px -440px; }
.art-charity { background-image: var(--reference); background-size: 1580px 990px; background-position: -1340px -440px; }
.section-title, .cards-panel h2, .account-panel h2 {
  color: #bd8120;
  text-shadow: 0 1px 0 #fff3b2, 0 2px 0 #b56118, 0 4px 0 #80231d, 0 6px 9px #75201955;
}
.section-title { margin: 15px 4px 9px; font-size: clamp(22px, 2.4vw, 31px); line-height: 1.15; }
.participation { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.group { min-width: 0; overflow: hidden; border: 2px solid #dcad47; border-radius: 12px; background: #fffdf5ec; box-shadow: 0 5px 14px #83311f20; }
.group-head { display: flex; min-height: 43px; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 12px; color: #fff6d1; background: linear-gradient(115deg, var(--light), var(--tone) 62%, color-mix(in srgb, var(--tone), #5a101c 20%)); }
.group-head h3 { margin: 0; color: #fff0a2; font-size: clamp(15px, 1.5vw, 19px); line-height: 1.05; text-shadow: 0 1px 0 #fff8d4, 0 2px 0 #ab641d, 0 4px 0 #6a1721, 0 6px 8px #300f18aa; }
.group-head a { flex: 0 0 auto; padding: 4px 7px; border: 1px solid #ffe9a8; border-radius: 999px; font-size: 11px; }
.role-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.role { display: flex; min-width: 0; min-height: 118px; flex-direction: column; align-items: center; gap: 6px; padding: 9px 5px 8px; border-right: 1px solid #e5d3a9; text-align: center; background: linear-gradient(145deg, #fffefb, color-mix(in srgb, var(--tone), white 96%)); }
.role:last-child { border-right: 0; }
.role .glyph { width: 32px; height: 32px; color: var(--tone); filter: drop-shadow(0 2px 1px #c38c3c77); }
.role h4 { display: grid; min-height: 37px; place-items: center; margin: 0; font-size: 13px; line-height: 1.15; }
.role h4 a:hover { text-decoration: underline; }
.role .btn { min-height: 26px; margin-top: auto; padding: 4px 7px; gap: 4px; font-size: 11px; }
.role .btn:after { font-size: 12px; }
.bottom-grid { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(275px, 1fr); align-items: stretch; gap: 12px; margin-top: 12px; }
.cards-panel, .account-panel { min-width: 0; padding: 13px; border: 2px solid #e6b542; border-radius: 16px; background: linear-gradient(145deg, #fffdf6f2, #fff1d6ec); box-shadow: 0 8px 20px #7b331c28; }
.cards-panel h2, .account-panel h2 { margin: 0 0 11px; font-size: clamp(21px, 2.1vw, 28px); line-height: 1.15; }
.cards { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 9px; align-items: stretch; }
.card {
  --card: #c11539;
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 205px;
  flex-direction: column;
  align-items: center;
  padding: 9px 7px 8px;
  overflow: hidden;
  border: 3px double #ffe08a;
  border-radius: 13px;
  color: #fff4cc;
  text-align: center;
  background: radial-gradient(ellipse at 30% 0%, #fff9d768, transparent 46%), linear-gradient(145deg, var(--card), color-mix(in srgb, var(--card), #5f0718 42%));
  box-shadow: inset 0 2px 0 #fff9cf82, inset 0 -12px 20px #57061555, 0 5px 0 #8d491b, 0 9px 15px #78311833;
  transition: transform .2s ease, box-shadow .2s ease;
}
.card:before { content: ''; position: absolute; inset: 5px; border: 1px solid #ffec9a88; border-radius: 8px; pointer-events: none; }
.card:after { content: ''; position: absolute; top: -58%; left: -33%; width: 45%; height: 180%; transform: rotate(27deg); background: linear-gradient(90deg, transparent, #fff8da24, transparent); pointer-events: none; }
.card:hover { transform: translateY(-4px) rotateX(2deg); box-shadow: inset 0 2px 0 #fff9cf, 0 7px 0 #88451b, 0 14px 23px #6a201d55; }
.card-2 { --card: #1165ba; }
.card-3 { --card: #d27c12; }
.card-4 { --card: #087b58; }
.card-5 { --card: #fff1ce; color: #55291e; }
.card-5 .card-index, .card-5 b, .card-5 h3 { color: #7b291f; text-shadow: 0 1px #fff, 0 2px #edc56d; }
.card-6 { --card: #9b2d45; }
.card-index { position: relative; z-index: 1; margin-bottom: 5px; color: #fff0aa; font: 700 9px/1.1 system-ui, sans-serif; letter-spacing: .14em; }
.card-seal-link { position: relative; z-index: 1; display: grid; width: 66px; height: 66px; flex: 0 0 66px; place-items: center; overflow: hidden; border: 2px solid #ffe08a; border-radius: 50%; background: #170e0d; box-shadow: 0 0 0 3px #9c551b, 0 4px 8px #330c12aa; }
.card-5 .card-seal-link, .card-6 .card-seal-link { background: white; }
.card-seal { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.card b { position: relative; z-index: 1; margin: 6px 0 2px; color: #ffe08a; font-size: 15px; letter-spacing: .06em; text-shadow: 0 1px #fff0ac, 0 2px #8b4210, 0 4px 5px #390d16; }
.card h3 { position: relative; z-index: 1; margin: 2px 0 7px; font-size: 12px; line-height: 1.16; text-shadow: 0 1px 2px #430e18; }
.card-title-link:hover { text-decoration: underline; text-decoration-color: #ffe28d; }
.card-detail { position: relative; z-index: 1; min-height: 0; margin-top: auto; padding: 4px 7px; gap: 4px; border-width: 1px; font-size: 10px; }
.card-detail:after { font-size: 11px; }
.account-panel { text-align: center; background: linear-gradient(145deg, #fffdf4ee, #ffe5a8ed), var(--scenery); background-position: center; background-size: cover; }
.account-panel p { margin: 4px 0 11px; font-size: 14px; }
.account-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin: 8px 0 11px; }
.account-options a { display: flex; min-width: 0; min-height: 56px; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 5px 3px; border: 2px solid #f5cd69; border-radius: 10px; color: #fff6d9; background: linear-gradient(160deg, #eea72e, #c31537 58%, #8d0b25); box-shadow: inset 0 1px #fff9d577, 0 3px 0 #8d391e; font-size: 12px; line-height: 1.1; }
.account-options .glyph { width: 22px; height: 22px; }
.account-panel > .btn { margin: 2px auto 0; }
.micro { margin-top: 12px; color: #5c3432; font: 12px/1.5 system-ui, sans-serif; }
.product-art { position: relative; display: flex; height: 115px; align-items: flex-end; justify-content: center; gap: 10px; }
.mug { position: relative; display: grid; width: 70px; height: 76px; place-items: center; border-top: 7px solid #bc9750; border-radius: 8px 8px 25px 25px; background: linear-gradient(90deg, #d7c9a4, #fff 30%, #fffcf0 70%, #c9b584); box-shadow: 0 7px 8px #80682c45; }
.mug:after { position: absolute; z-index: -1; top: 10px; right: -21px; width: 22px; height: 38px; border: 8px solid #ddc997; border-radius: 0 25px 25px 0; content: ''; }
.mug img { width: 43px; height: 43px; border-radius: 50%; }
.capsule { width: 35px; height: 33px; transform: rotate(-12deg); border-top: 5px solid #f9df86; border-radius: 8px 8px 5px 5px; background: linear-gradient(90deg, #693007, #f3b944, #ba7624); }
.sachet { display: grid; width: 48px; height: 88px; place-items: start center; padding-top: 22px; border: 2px solid #cda158; border-radius: 5px; background: linear-gradient(110deg, #a91025, #ebc55f); }
.sachet img { width: 36px; height: 36px; border-radius: 50%; }
.bean { color: #814c21; font-size: 39px; }
.leaf { color: #2a7850; font-size: 40px; }
footer {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 11px 18px;
  padding: 18px clamp(12px, 2.4vw, 32px);
  border-top: 3px solid #ffe18a;
  color: #fff7df;
  background: linear-gradient(115deg, #bb142f, #df3043 45%, #a80b2c);
  box-shadow: inset 0 3px 0 #fff0a644;
  font: 13px/1.45 system-ui, sans-serif;
}
footer strong { font: 700 22px Georgia, serif; color: #fff0a7; text-shadow: 0 2px #8a3014; }
footer a { display: inline-flex; align-items: center; gap: 6px; overflow-wrap: anywhere; }
footer a:hover { text-decoration: underline; text-decoration-color: #ffe48a; }
footer .glyph { width: 23px; height: 23px; color: #ffe58c; }
.wa-mark { display: inline-grid; width: 23px; height: 23px; place-items: center; border: 1px solid #ffe58c; border-radius: 50%; font-size: 9px; font-weight: 800; }
.footer-social { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; }
.footer-social a { padding: 4px 7px; border: 1px solid #ffe18a; border-radius: 8px; background: #870a25; font-size: 11px; }
.footer-social a:first-letter { color: #ffe28d; font-weight: 900; }
footer .official { flex-basis: 100%; text-align: center; font-size: 10px; opacity: .9; }
.page { max-width: 1160px; min-height: 460px; margin: 24px auto; padding: clamp(18px, 3vw, 32px); border: 2px solid #e2b34d; border-radius: 18px; background: linear-gradient(145deg, #fffef9f2, #fff2d9ec); box-shadow: 0 12px 35px #7f311f24; }
.page h1 { margin: 17px 0; color: #bd8120; font-size: clamp(30px, 4vw, 44px); line-height: 1.1; text-shadow: 0 1px #fff4bd, 0 3px #ba6120, 0 5px 9px #73221c44; }
.page h2 { color: #a21a32; font-size: 25px; }
.page p { font: 17px/1.7 system-ui, sans-serif; }
.eyebrow { color: #946519; font: 700 12px system-ui, sans-serif; letter-spacing: 2px; text-transform: uppercase; }
.page-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 24px 0; }
.info { padding: 20px; border: 1px solid #dfbf75; border-radius: 13px; background: linear-gradient(125deg, #fff, #fff6df); }
.info h3 { margin: 0 0 12px; font-size: 23px; }
.info p { font-size: 15px; }
.info .btn { font-size: 13px; }
.badge { display: inline-flex; padding: 5px 11px; border: 1px solid #d9b86d; border-radius: 15px; color: #715014; background: #f6e4ba; font: 12px system-ui, sans-serif; }
.notice { margin: 20px 0; padding: 15px; border-left: 4px solid #c29b4e; border-radius: 5px; background: #f8efda; font: 15px/1.7 system-ui, sans-serif; }
.contacts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.contact-link { display: flex; align-items: center; gap: 14px; padding: 18px; border: 1px solid #debf77; border-radius: 12px; background: #fff8e8; font: 15px/1.6 system-ui, sans-serif; overflow-wrap: anywhere; }
.contact-link:hover { background: #f4e3b9; }
.contact-link .glyph { width: 31px; height: 31px; color: #146da6; }
.search-input { width: 100%; margin: 10px 0; padding: 15px; border: 2px solid #caab62; border-radius: 12px; font: 17px system-ui, sans-serif; }
.results { display: grid; gap: 8px; }
.result { display: flex; justify-content: space-between; gap: 15px; padding: 15px; border: 1px solid #e7d3a3; border-radius: 9px; }
.result:hover { background: #fff0cf; }
.products-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.product-card { padding: 20px; border: 1px solid #dec38a; border-radius: 12px; background: #fffbef; text-align: center; }
.product-card .product-art { height: 150px; }
.product-card h3 { font-size: 23px; }
.page-role { --tone: #8d1730; }
.page-role h1 { color: var(--tone); }
.project-list { display: grid; gap: 16px; }
.product-large .product-art { height: 190px; margin: 25px auto; transform: scale(1.4); }
.hidden { display: none !important; }
@media (max-width: 1180px) {
  .nav { gap: 6px; }
  .nav a { min-height: 40px; padding: 7px 9px; font-size: 12px; }
  .hero { grid-template-columns: minmax(135px, .72fr) minmax(0, 2.5fr) minmax(135px, .72fr); min-height: 290px; }
  .logo-block { font-size: 12px; }
  .hero-main { grid-template-columns: minmax(130px, .8fr) minmax(0, 1.2fr); min-height: 245px; }
  .fountain { height: 225px; }
  .primary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .participation { grid-template-columns: 1fr; }
  .group-head { min-height: 45px; }
  .group-head h3 { font-size: 19px; }
}
@media (max-width: 760px) {
  body { background-attachment: scroll; background-size: auto 900px; }
  body:before { border-width: 3px; outline-offset: -6px; }
  header { padding: 8px 9px 5px; }
  .nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .nav a { min-height: 39px; gap: 4px; padding: 6px 4px; border-radius: 10px; font-size: 11px; white-space: normal; text-align: center; }
  .nav .glyph { width: 17px; height: 17px; }
  .language select { width: 100%; min-width: 0; min-height: 39px; padding: 3px 6px; font-size: 19px; }
  .hero { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 8px; min-height: 0; padding: 9px 11px 12px; background-position: center, center 28%; }
  .hero-main { grid-column: 1 / -1; grid-row: 1; display: grid; min-height: 265px; grid-template-columns: 1fr; }
  .fountain { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .98; background-position: center 42%; background-size: cover; border-radius: 13px; box-shadow: none; }
  .hero-copy { align-self: center; margin-left: auto; width: min(68%, 450px); padding: 14px 5px; text-shadow: 0 1px 0 #fff9e8; }
  .hero-copy h1 { font-size: clamp(39px, 11vw, 67px); letter-spacing: .01em; }
  .hero-copy h2 { margin: 7px auto; font-size: clamp(16px, 4.4vw, 22px); }
  .hero-copy p { max-width: 320px; margin: 6px auto 8px; font-size: 13px; }
  .hero-copy > .btn { min-height: 30px; padding: 5px 9px; font-size: 12px; }
  .hero .logo-block { grid-row: 2; padding: 2px 4px; font-size: 10px; }
  .hero .logo-block img { width: clamp(72px, 20vw, 104px); height: clamp(72px, 20vw, 104px); margin: 3px auto 5px; }
  .hero .logo-meta { min-height: 0; font-size: 9px; }
  .hero .logo-block > a:last-child { margin-top: 4px; }
  .hero .logo-block .btn { min-height: 25px; padding: 4px 7px; font-size: 10px; }
  .container { padding: 9px 9px 18px; }
  .primary-grid { gap: 7px; }
  .tile { gap: 7px; padding: 8px; border-radius: 11px; }
  .tile > .glyph { width: 32px; height: 32px; padding: 5px; }
  .tile h3 { font-size: clamp(13px, 3.6vw, 17px); }
  .tile p { font-size: 10px; }
  .features { grid-template-columns: 1fr; gap: 8px; margin: 8px 0; }
  .feature { min-height: 123px; grid-template-columns: minmax(0, 1fr) minmax(85px, .72fr); padding: 9px; }
  .feature h3 { font-size: 20px; }
  .feature p { margin-bottom: 7px; font-size: 12px; }
  .feature .btn { min-height: 28px; padding: 5px 8px; font-size: 11px; }
  .reference-products, .art-globe, .art-charity { min-height: 90px; background-size: 1290px 808px; }
  .reference-products { background-position: -274px -361px; }
  .art-globe { background-position: -702px -359px; }
  .art-charity { background-position: -1095px -359px; }
  .section-title { margin-top: 13px; font-size: 24px; }
  .participation { gap: 9px; }
  .group-head { min-height: 40px; padding: 6px 9px; }
  .group-head h3 { font-size: clamp(15px, 4vw, 19px); }
  .group-head a { padding: 3px 6px; font-size: 10px; }
  .role-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .role { min-height: 104px; gap: 4px; padding: 7px 3px; }
  .role .glyph { width: 27px; height: 27px; }
  .role h4 { min-height: 34px; font-size: clamp(9px, 2.8vw, 12px); line-height: 1.08; }
  .role .btn { min-height: 24px; padding: 4px 5px; font-size: 9px; }
  .role .btn:after { font-size: 10px; }
  .bottom-grid { grid-template-columns: 1fr; gap: 9px; margin-top: 10px; }
  .cards-panel, .account-panel { padding: 10px; border-radius: 13px; }
  .cards-panel h2, .account-panel h2 { margin-bottom: 9px; font-size: 23px; }
  .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .card { min-height: 173px; padding: 7px 5px; }
  .card-index { font-size: 8px; }
  .card-seal-link { width: clamp(48px, 14vw, 66px); height: clamp(48px, 14vw, 66px); flex-basis: clamp(48px, 14vw, 66px); }
  .card b { font-size: 13px; }
  .card h3 { font-size: clamp(10px, 3vw, 12px); }
  .account-options { gap: 5px; }
  .account-options a { min-height: 49px; font-size: 11px; }
  footer { gap: 9px 12px; padding: 14px 12px; font-size: 11px; }
  footer strong { font-size: 21px; }
  footer .official { overflow-wrap: anywhere; }
  .page { margin: 13px 9px; padding: 18px 14px; }
  .page p { font-size: 15px; }
  .page-grid, .contacts, .products-grid { grid-template-columns: 1fr; gap: 10px; }
  .page .participation { margin: 12px 0; }
}
@media (max-width: 420px) {
  .nav { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
  .nav a { min-height: 37px; padding-inline: 2px; font-size: 10px; }
  .nav .glyph { width: 15px; height: 15px; }
  .hero-main { min-height: 240px; }
  .hero-copy { width: 72%; }
  .hero-copy h1 { font-size: clamp(35px, 10vw, 48px); }
  .primary-grid { grid-template-columns: 1fr; }
  .tile { min-height: 62px; }
  .role-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .role { min-height: 98px; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card { min-height: 175px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Compact geometric controls and a clearer, centered AI MAIA mark. */
.hero-copy { width: 100%; text-align: center; }
.hero-copy h1 {
  display: block;
  width: 100%;
  margin-inline: auto;
  text-align: center;
  color: #fff0a0;
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: #fff0a0;
  -webkit-text-stroke: 1px #842325;
  paint-order: stroke fill;
  text-shadow: 0 -1px 0 #fffbd3, 0 1px 0 #ffe35b, 0 2px 0 #d49220, 0 3px 0 #a95816, 0 4px 0 #74251e, 0 7px 0 #521a21, 0 10px 15px #54141f9c, 0 0 18px #ffe270b5;
}
.btn {
  width: max-content;
  min-width: 0;
  min-height: 29px;
  padding: 5px 16px;
  gap: 5px;
  border: 2px solid transparent;
  border-radius: 3px;
  color: #fff4c7;
  background: linear-gradient(180deg, #ff6370 0%, #dc1839 48%, #a30929 100%) padding-box, linear-gradient(135deg, #fff8d0, #f4b630 48%, #fff0a0) border-box;
  box-shadow: inset 0 1px 0 #fff9d6b8, inset 0 -2px 0 #7a0a21a6, 0 2px 0 #86301d, 0 0 11px #f3bf3c75;
  clip-path: polygon(7% 0, 93% 0, 100% 50%, 93% 100%, 7% 100%, 0 50%);
  font-size: 12px;
  text-shadow: 0 1px 2px #641022;
}
.btn:after { font-size: 12px; }
.btn:hover { box-shadow: inset 0 1px 0 #fffbdc, 0 3px 0 #86301d, 0 0 15px #ffdb58; }
.nav a {
  min-height: 39px;
  padding: 6px 9px;
  border-radius: 3px;
  clip-path: polygon(6% 0, 94% 0, 100% 24%, 100% 76%, 94% 100%, 6% 100%, 0 76%, 0 24%);
}
.logo-block > a:last-child:not(:first-child) {
  display: inline-flex;
  min-height: 27px;
  align-items: center;
  justify-content: center;
  padding: 4px 13px;
  border: 2px solid #ffe18a;
  color: #fff6d7;
  background: linear-gradient(180deg, #f75d68, #c81735 55%, #930a26);
  box-shadow: inset 0 1px 0 #fff9d6a8, 0 2px 0 #873317, 0 0 9px #e9b234;
  clip-path: polygon(8% 0, 92% 0, 100% 50%, 92% 100%, 8% 100%, 0 50%);
  font-size: 12px;
}
.group-head > a {
  border-radius: 2px;
  clip-path: polygon(9% 0, 91% 0, 100% 50%, 91% 100%, 9% 100%, 0 50%);
  background: #ffffff22;
}
.account-options a {
  min-height: 48px;
  border-radius: 3px;
  background: linear-gradient(160deg, #f4bd4a, #cf1838 58%, #980a27);
  box-shadow: inset 0 1px 0 #fff9d6aa, 0 2px 0 #873317, 0 0 9px #e9b23466;
  clip-path: polygon(7% 0, 93% 0, 100% 20%, 100% 80%, 93% 100%, 7% 100%, 0 80%, 0 20%);
}
.card-detail { min-height: 0; padding: 4px 8px; font-size: 10px; }
@media (max-width: 760px) {
  .nav a { min-height: 37px; padding: 5px 4px; }
  .btn { min-height: 27px; padding: 4px 13px; font-size: 11px; }
  .hero-copy h1 { -webkit-text-stroke-width: .8px; }
}
@media (max-width: 420px) {
  .nav a { min-height: 36px; padding-inline: 3px; }
}

/* Reference buttons: compact jewel pills with a bright gold bezel. */
.btn {
  min-height: 27px;
  padding: 4px 12px;
  gap: 5px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  background: linear-gradient(180deg, #ff5667 0%, #d60e31 46%, #78051d 100%) padding-box, linear-gradient(145deg, #fffbd4 0%, #ffd447 26%, #bd7618 54%, #fff2a2 78%, #f2ae25 100%) border-box;
  box-shadow: inset 0 1px 0 #fffbd8, inset 0 -2px 3px #69051b88, 0 0 0 1px #9b5d1b, 0 2px 0 #762219, 0 4px 9px #8d1c2c42, 0 0 9px #ffd34580;
  clip-path: none;
  font-size: 11px;
  line-height: 1;
}
.btn:after { font-size: 12px; }
.btn:hover { transform: translateY(-1px); filter: brightness(1.12); box-shadow: inset 0 1px 0 #fffbd8, 0 0 0 1px #9b5d1b, 0 3px 0 #762219, 0 0 14px #ffdf54; }
.btn:active { transform: translateY(1px); }
.btn.blue, .blue .btn {
  background: linear-gradient(180deg, #3f9deb 0%, #0862b9 47%, #062c69 100%) padding-box, linear-gradient(145deg, #fffbd4 0%, #ffd447 28%, #bd7618 55%, #fff2a2 80%, #f2ae25 100%) border-box;
}
.btn.green, .green .btn {
  background: linear-gradient(180deg, #39c486 0%, #087e51 48%, #03422f 100%) padding-box, linear-gradient(145deg, #fffbd4 0%, #ffd447 28%, #bd7618 55%, #fff2a2 80%, #f2ae25 100%) border-box;
}
.btn.gold, .gold .btn {
  color: #fff7d7;
  background: linear-gradient(180deg, #efb743 0%, #ae5f14 52%, #5f2d12 100%) padding-box, linear-gradient(145deg, #fffbd4 0%, #ffd447 28%, #bd7618 55%, #fff2a2 80%, #f2ae25 100%) border-box;
}
.nav a {
  min-height: 36px;
  padding: 5px 9px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  background: linear-gradient(180deg, #ff5667 0%, #d60e31 46%, #78051d 100%) padding-box, linear-gradient(145deg, #fffbd4, #ffd447 35%, #bd7618 60%, #fff2a2) border-box;
  box-shadow: inset 0 1px 0 #fffbd8, 0 0 0 1px #9b5d1b, 0 2px 0 #762219, 0 0 8px #ffd34566;
  clip-path: none;
}
.nav a:hover { transform: translateY(-1px); filter: brightness(1.1); }
.nav a.active { box-shadow: inset 0 1px 0 #fffbd8, 0 0 0 2px #efbd47, 0 0 13px #ffdb50; }
.logo-block > a:last-child:not(:first-child) {
  min-height: 25px;
  padding: 3px 11px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  background: linear-gradient(180deg, #ff5667, #d60e31 48%, #78051d) padding-box, linear-gradient(145deg, #fffbd4, #ffd447 35%, #bd7618 60%, #fff2a2) border-box;
  box-shadow: inset 0 1px 0 #fffbd8, 0 0 0 1px #9b5d1b, 0 2px 0 #762219, 0 0 8px #ffd34566;
  clip-path: none;
}
.group-head > a {
  border: 1px solid #ffe898;
  border-radius: 999px;
  clip-path: none;
}
.account-options a {
  min-height: 46px;
  border: 1.5px solid #ffe08a;
  border-radius: 9px;
  clip-path: none;
  box-shadow: inset 0 1px 0 #fff9d6aa, 0 2px 0 #873317, 0 0 8px #e9b23455;
}
.card-detail {
  min-height: 0;
  padding: 3px 8px;
  font-size: 10px;
}
@media (max-width: 760px) {
  .btn { min-height: 25px; padding: 3px 10px; font-size: 10px; }
  .nav a { min-height: 35px; padding: 4px 7px; }
}
@media (max-width: 420px) {
  .nav a { min-height: 34px; padding-inline: 5px; }
}

/* Refined reference pass: very compact controls, foil card faces, readable hero text. */
.hero-copy h2,
.hero-copy p {
  color: #fff4cf;
  -webkit-text-stroke: .55px #7d1b29;
  paint-order: stroke fill;
  text-shadow: 0 1px 0 #fff9dd, 0 2px 0 #a8501d, 0 4px 0 #711c28, 0 7px 9px #41131dbb, 0 0 12px #9c321d88;
}
.hero-copy h2 { font-weight: 800; }
.hero-copy p { font-weight: 700; }
.btn {
  min-height: 23px;
  padding: 3px 8px;
  gap: 3px;
  font-size: 10px;
  line-height: 1;
}
.btn:after { font-size: 10px; }
.hero-copy > .btn,
.feature .btn,
.account-panel > .btn { min-height: 24px; padding: 3px 9px; font-size: 10px; }
.role .btn { min-height: 20px; padding: 2px 6px; gap: 3px; font-size: 9px; }
.role .btn:after { font-size: 9px; }
.logo-block > a:last-child:not(:first-child) { min-height: 23px; padding: 2px 9px; font-size: 10px; }
.cards { perspective: 1100px; gap: 8px; }
.card {
  min-height: 192px;
  padding: 8px 6px 7px;
  border: 3px double #ffe7a0;
  border-radius: 14px;
  background:
    radial-gradient(ellipse at 18% 0%, #fff6c33b 0 12%, transparent 42%),
    radial-gradient(ellipse at 100% 100%, #ffd97622 0 11%, transparent 40%),
    repeating-linear-gradient(135deg, #ffffff0a 0 1px, transparent 1px 14px),
    linear-gradient(145deg, var(--card), color-mix(in srgb, var(--card), #390612 38%));
  box-shadow: inset 0 2px 0 #fff9dc9c, inset 0 -12px 19px #39061166, 0 0 0 1px #a75f1d, 0 4px 0 #91461c, 0 8px 16px #64201c44;
  transform-style: preserve-3d;
}
.card:before {
  inset: 5px;
  border: 1px solid #fff0b7bd;
  border-radius: 9px;
  background: linear-gradient(145deg, #ffffff10, transparent 34%, #ffe9a318 70%, transparent);
}
.card:after { width: 37%; background: linear-gradient(90deg, transparent, #fff9dd3b, transparent); }
.card:hover { transform: translateY(-3px) rotateX(2deg); }
.card-1 { --card: #c51235; }
.card-2 { --card: #155ab2; }
.card-3 { --card: #b86a12; }
.card-4 { --card: #087b58; }
.card-5 { --card: #f6edcf; }
.card-6 { --card: #6130a3; }
.card-index { margin: 0 0 5px; color: #fff0b3; font-size: 8px; letter-spacing: .16em; }
.card-seal-link {
  width: 62px;
  height: 62px;
  flex-basis: 62px;
  border: 2px solid #fff1ae;
  box-shadow: 0 0 0 2px #bd801e, 0 0 13px #ffd75899, 0 4px 8px #2d1010aa;
  transform: translateZ(9px);
}
.card b { margin: 5px 0 2px; color: #fff0a7; font-size: 14px; text-shadow: 0 1px #fff8d1, 0 2px #a65d1c, 0 4px 6px #360a17; }
.card h3 { margin: 1px 0 6px; font-size: 11px; line-height: 1.12; }
.card-5 .card-index, .card-5 b, .card-5 h3 { color: #75331e; }
.card .card-detail {
  min-height: 21px;
  margin-top: auto;
  padding: 2px 6px;
  gap: 3px;
  border-width: 1.25px;
  color: #fff1b5;
  background: linear-gradient(180deg, #49331f 0%, #1d1511 54%, #090807 100%) padding-box, linear-gradient(145deg, #fffbd4, #f4b82e 35%, #ac6516 60%, #fff0a0) border-box;
  box-shadow: inset 0 1px 0 #fff6cb, 0 0 0 1px #995616, 0 2px 0 #4a1e10, 0 0 8px #ffd34f99;
  font-size: 9px;
}
.card .card-detail:after { font-size: 9px; }
@media (max-width: 760px) {
  .hero-copy h2, .hero-copy p { -webkit-text-stroke-width: .45px; }
  .hero-copy > .btn, .feature .btn, .account-panel > .btn { min-height: 22px; padding: 2px 7px; font-size: 9px; }
  .role .btn { min-height: 20px; padding: 2px 5px; }
  .card { min-height: 168px; padding: 6px 4px; }
  .card-seal-link { width: 54px; height: 54px; flex-basis: 54px; }
}

/* AI MAIA interactive command console */
.account-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 17px;
  border: 1px solid #fff1b1;
  border-radius: 20px;
  color: #fff9e9;
  text-align: left;
  background:
    radial-gradient(ellipse at 90% 8%, #ffd75e66, transparent 32%),
    radial-gradient(ellipse at 5% 95%, #f84c3c70, transparent 34%),
    linear-gradient(138deg, #c61a31 0%, #99122a 48%, #721125 100%);
  box-shadow: inset 0 0 0 5px #ffd77730, inset 0 1px 0 #fffbd0, 0 12px 27px #56141c36;
}
.account-panel:before {
  position: absolute;
  z-index: -1;
  inset: 9px;
  border: 1px solid #ffe59b66;
  border-radius: 13px;
  content: '';
  pointer-events: none;
}
.account-panel h2 {
  margin: 0 0 13px;
  color: #fff2b5;
  font-size: clamp(21px, 2vw, 27px);
  text-shadow: 0 1px #fff, 0 3px #91400b, 0 6px 11px #330914;
}
.console-bar { display: flex; min-width: 0; align-items: center; gap: 8px; padding: 7px 9px; border: 1px solid #fff0b25c; border-radius: 8px; color: #fff3c0; background: #4a091c45; font: 700 10px/1.2 system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.console-led { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: #ffe47e; box-shadow: 0 0 9px #fff3a4; }
.console-count { margin-left: auto; color: #ffe18a; }
.console-intro { margin: 11px 2px 12px !important; color: #fff9e9; font-size: 13px !important; line-height: 1.45; text-shadow: 0 1px 2px #64091c; }
.account-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin: 0 0 12px; }
.platform-tab { display: flex; min-width: 0; min-height: 38px; align-items: center; justify-content: flex-start; gap: 7px; padding: 6px 8px; border: 1px solid #fff0b0a8; border-radius: 8px 13px 8px 13px; color: #fff8e6; background: linear-gradient(150deg, #fff4c327, #761027a8); box-shadow: inset 0 1px #fff7d355, 0 2px 0 #620c20; font: 700 11px/1.15 system-ui, sans-serif; text-align: left; cursor: pointer; transition: transform .18s ease, background .18s ease, box-shadow .18s ease; }
.platform-tab:hover, .platform-tab:focus-visible { transform: translateY(-2px); outline: 2px solid #fff2b6; outline-offset: 2px; }
.platform-tab[aria-pressed="true"] { color: #531025; background: linear-gradient(150deg, #fff9d7, #ffd15c 62%, #ed9e25); box-shadow: inset 0 1px #fff, 0 3px 0 #a04a18, 0 0 14px #ffdc6a66; }
.platform-tab .glyph { width: 18px; height: 18px; flex: 0 0 18px; }
.platform-view { display: grid; grid-template-columns: 74px minmax(0, 1fr); align-items: center; gap: 12px; min-height: 148px; padding: 13px; border: 1px solid #ffe9a3; border-radius: 12px 19px 12px 19px; color: #31151c; background: linear-gradient(120deg, #fffaf0f5, #fff2dff0); box-shadow: inset 0 1px #fff, 0 5px 0 #6c1324, 0 11px 20px #48091942; }
.platform-orbit { display: grid; width: 66px; aspect-ratio: 1; place-items: center; border: 1px solid #d18c20; border-radius: 50%; color: #fff1a4; background: radial-gradient(circle at 36% 26%, #fff6c4, #d17a19 17%, #a2112c 48%, #530e22 74%); box-shadow: inset 0 0 0 5px #ffdd7980, 0 0 0 3px #fff0bd, 0 0 19px #ffca5077; }
.platform-orbit span { font: 900 11px/1 system-ui, sans-serif; letter-spacing: .08em; text-shadow: 0 1px #50200b; }
.console-copy { min-width: 0; }
.console-kicker { display: inline-block; margin-bottom: 4px; color: #9a5b13; font: 700 9px/1.3 system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.platform-copy h3 { margin: 0 0 4px; color: #77152a; font-size: 18px; line-height: 1.15; text-shadow: 0 1px #fff, 0 2px #edce87; }
.platform-copy p { margin: 0 0 8px; color: #37252a; font-size: 12px; line-height: 1.38; }
.btn.console-action { min-height: 24px; padding: 4px 9px; border-width: 1px; border-radius: 7px 13px 7px 13px; color: #fff9df; font-size: 10px; }
.btn.console-action:after { font-size: 11px; }
@media (max-width: 760px) {
  .account-panel { padding: 14px; border-radius: 16px; }
  .account-panel h2 { margin-bottom: 10px; }
  .console-intro { font-size: 12px !important; }
  .account-options { gap: 6px; }
  .platform-tab { min-height: 36px; padding: 5px 6px; font-size: 10px; }
  .platform-view { grid-template-columns: 58px minmax(0, 1fr); gap: 9px; min-height: 132px; padding: 10px; }
  .platform-orbit { width: 52px; }
  .platform-copy h3 { font-size: 16px; }
  .platform-copy p { font-size: 11px; }
}
@media (max-width: 380px) {
  .account-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .platform-tab { min-height: 34px; }
  .platform-view { grid-template-columns: 46px minmax(0, 1fr); gap: 7px; }
  .platform-orbit { width: 42px; }
}

/* Phone layout: clear the top edge for the AI MAIA hero and dock 12 actions in two side rails. */
@media (max-width: 760px) {
  body { padding-inline: 44px; }
  header { position: static; height: 0; padding: 0; }
  .nav { position: fixed; z-index: 45; inset: 0; display: block; width: 0; height: 0; pointer-events: none; }
  .nav > a, .nav > .language { position: fixed; z-index: 45; display: grid; width: 38px; height: 38px; min-height: 38px; place-items: center; padding: 0; border: 1px solid #fff2b5; border-radius: 5px; clip-path: polygon(24% 0, 76% 0, 100% 24%, 100% 76%, 76% 100%, 24% 100%, 0 76%, 0 24%); color: #fff4c5; background: linear-gradient(145deg, #fff5c5, #e8a82d 23%, #a95b12 43%, #fbd760 58%, #b70e2c 61%, #710c25 100%); box-shadow: inset 0 1px 0 #fff, inset 0 -3px 4px #62121b, 0 0 0 2px #9a5519, 0 0 12px #ffdc57aa; pointer-events: auto; }
  .nav > a { font-size: 0; text-shadow: none; }
  .nav > a .glyph { width: 19px; height: 19px; color: #fff5c8; filter: drop-shadow(0 1px 1px #64131e); }
  .nav > a:nth-of-type(1) { top: calc(50% - 142px); left: 3px; }
  .nav > a:nth-of-type(2) { top: calc(50% - 92px); left: 3px; }
  .nav > a:nth-of-type(3) { top: calc(50% - 42px); left: 3px; }
  .nav > a:nth-of-type(4) { top: calc(50% + 8px); left: 3px; }
  .nav > a:nth-of-type(5) { top: calc(50% + 58px); left: 3px; }
  .nav > a:nth-of-type(6) { top: calc(50% + 108px); left: 3px; }
  .nav > a:nth-of-type(7) { top: calc(50% - 142px); right: 3px; }
  .nav > a:nth-of-type(8) { top: calc(50% - 92px); right: 3px; }
  .nav > a:nth-of-type(9) { top: calc(50% - 42px); right: 3px; }
  .nav > a:nth-of-type(10) { top: calc(50% + 8px); right: 3px; }
  .nav > a:nth-of-type(11) { top: calc(50% + 58px); right: 3px; }
  .nav > .language { top: calc(50% + 108px); right: 3px; }
  .nav .language select { display: grid; width: 36px; min-width: 36px; height: 36px; min-height: 36px; padding: 0; border: 0; border-radius: 5px; color: #fff; background: transparent; font-size: 20px; text-align: center; }
  .nav .language option { color: #31131a; background: #fff8e7; }
  .hero { min-height: 0; padding: 5px 5px 9px; border-top: 0; }
  .hero-main { min-height: clamp(275px, 76vw, 410px); }
  .fountain { background-position: center 41%; }
  .hero-copy { width: 100%; padding: 12px 5px; }
  .hero-copy h1 { margin: 0 auto 8px; font-size: clamp(43px, 12vw, 72px); letter-spacing: .015em; color: #fff3a8; -webkit-text-fill-color: #fff3a8; -webkit-text-stroke: 1.5px #74202b; text-shadow: 0 1px #fffbd5, 0 3px #f6c735, 0 5px #a85416, 0 8px #691a27, 0 12px 18px #38101cbf, 0 0 22px #ffe974; }
  .hero-copy h2 { display: table; max-width: 100%; margin: 7px auto; padding: 5px 10px; border: 1px solid #ffe28a; border-radius: 4px 13px; color: #fff5ce; background: linear-gradient(110deg, #650d22eF, #a71730eF, #651126eF); box-shadow: inset 0 1px #fff8d899, 0 3px 9px #45101d99; -webkit-text-stroke: 0; text-shadow: 0 1px 1px #300812, 0 0 8px #ffd96888; font-size: clamp(15px, 4.2vw, 21px); line-height: 1.15; }
  .hero-copy p { max-width: 100%; margin: 6px auto 9px; padding: 5px 9px; border-radius: 3px 10px; color: #fffdf2; background: #42101dbd; box-shadow: 0 2px 8px #40121e66; -webkit-text-stroke: 0; text-shadow: 0 1px 2px #1f0610; font-size: clamp(11px, 3.2vw, 14px); line-height: 1.28; }
  .hero-copy > .btn { min-height: 26px; padding: 4px 10px; font-size: 10px; }
}
@media (max-width: 380px) {
  body { padding-inline: 41px; }
  .nav > a, .nav > .language { width: 35px; height: 35px; min-height: 35px; }
  .nav .language select { width: 33px; min-width: 33px; height: 33px; min-height: 33px; }
  .nav > a .glyph { width: 17px; height: 17px; }
  .hero-main { min-height: 265px; }
}

/* Floating dimensional hero lettering with no text boxes over the artwork. */
@media (max-width: 760px) {
  .hero-copy { isolation: isolate; }
  .hero-copy:before { position: absolute; z-index: -1; inset: 12% -7%; border-radius: 50%; background: radial-gradient(ellipse at center, #46101d91 0%, #63142466 42%, #70203128 67%, transparent 76%); filter: blur(13px); content: ''; pointer-events: none; }
  .hero-copy h2 { display: block; max-width: 100%; margin: 8px auto; padding: 0; border: 0; border-radius: 0; color: #fff2b2; background: none; box-shadow: none; -webkit-text-stroke: 1px #71202a; paint-order: stroke fill; text-shadow: 0 1px 0 #fffde1, 0 2px 0 #ffe16d, 0 4px 0 #bd791e, 0 6px 0 #77202a, 0 9px 12px #310b17e0, 0 0 14px #ffe27f; font-size: clamp(15px, 4.2vw, 21px); line-height: 1.2; }
  .hero-copy p { max-width: 100%; margin: 7px auto 10px; padding: 0; border-radius: 0; color: #fffdf4; background: none; box-shadow: none; -webkit-text-stroke: .55px #5e1725; paint-order: stroke fill; text-shadow: 0 1px 1px #260914, 0 2px 3px #3b101dcf, 0 0 11px #68192c99; font-size: clamp(11px, 3.2vw, 14px); font-weight: 700; line-height: 1.35; }
}

/* Reference-led mobile header: utility controls, six languages, nine compact navigation links. */
header {
  display: flex;
  max-width: 1680px;
  flex-direction: column;
  gap: 6px;
  padding: 7px clamp(7px, 1.5vw, 18px) 6px;
}
.utility-bar { display: flex; min-height: 35px; align-items: center; justify-content: flex-end; gap: 6px; }
.utility-spacer { flex: 1; }
.utility-action { display: inline-flex; min-width: 35px; min-height: 34px; align-items: center; justify-content: center; gap: 5px; padding: 4px 9px; border: 1.5px solid transparent; border-radius: 8px 13px 8px 13px; color: #fff8df; background: linear-gradient(150deg, #ffe7a0, #a85b12 30%, #291211 58%, #08090d) padding-box, linear-gradient(135deg, #fffbd2, #f3b72f 38%, #fff1a0) border-box; box-shadow: inset 0 1px #fffbd8, 0 2px 0 #642017, 0 0 9px #ffd45288; font: 700 11px/1 system-ui, sans-serif; }
.utility-action .glyph { width: 20px; height: 20px; color: #ffe28a; }
.account-action { min-width: 104px; }
.menu-toggle { width: 38px; padding: 4px; cursor: pointer; }
.hamburger { display: grid; gap: 4px; width: 18px; }
.hamburger i { display: block; height: 2px; border-radius: 2px; background: #fff4ca; box-shadow: 0 1px 2px #431018; }
.language-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; }
.language-chip { display: flex; min-width: 0; min-height: 31px; align-items: center; justify-content: center; gap: 4px; padding: 3px 5px; border: 1px solid #ffe7a0; border-radius: 999px; color: #fff8e7; background: linear-gradient(180deg, #248ed2, #07529e 58%, #06275c); box-shadow: inset 0 1px #fff8cc88, 0 2px 0 #7e3d17, 0 0 7px #ffd35477; font: 800 10px/1 system-ui, sans-serif; cursor: pointer; }
.language-chip[aria-pressed="true"] { color: #44240b; background: linear-gradient(180deg, #fff8db, #f2d28a 58%, #c4903d); box-shadow: inset 0 1px #fff, 0 2px 0 #8d471c, 0 0 8px #ffe48b; }
.language-flag { font-size: 17px; line-height: 1; }
.language-code { font-size: 9px; }
.nav { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 5px; }
.nav > a { display: flex; min-width: 0; min-height: 39px; align-items: center; justify-content: center; gap: 4px; padding: 4px 5px; border: 1.5px solid transparent; border-radius: 9px 14px 9px 14px; color: #fff7dd; background: linear-gradient(160deg, #ec4256, #ae102e 54%, #5e0d25) padding-box, linear-gradient(135deg, #fffbd3, #f7c340 35%, #fff1a0) border-box; box-shadow: inset 0 1px #fff9d8aa, inset 0 -2px #4c091e88, 0 2px 0 #8a3b19, 0 0 8px #ffd24d88; font-size: 10px; line-height: 1.05; text-align: center; text-shadow: 0 1px 2px #410d1b; }
.nav > a:nth-child(2) { color: #251c10; background: linear-gradient(160deg, #fffced, #ead8a9 54%, #b58b44) padding-box, linear-gradient(135deg, #fffbd3, #f7c340 35%, #fff1a0) border-box; text-shadow: 0 1px #fff; }
.nav > a:nth-child(3), .nav > a:nth-child(5), .nav > a:nth-child(6), .nav > a:nth-child(7), .nav > a:nth-child(8) { background: linear-gradient(160deg, #168be1, #0759ad 54%, #042b68) padding-box, linear-gradient(135deg, #fffbd3, #f7c340 35%, #fff1a0) border-box; }
.nav > a:nth-child(4), .nav > a:nth-child(9) { background: linear-gradient(160deg, #ff4053, #bb0f32 54%, #690d24) padding-box, linear-gradient(135deg, #fffbd3, #f7c340 35%, #fff1a0) border-box; }
.nav > a .glyph { width: 19px; height: 19px; color: #ffe389; }
.nav > a:nth-child(2) .glyph { color: #85600e; }
.nav > a.active { outline: 2px solid #ffe17a; outline-offset: 1px; box-shadow: inset 0 1px #fff, 0 0 11px #ffe266; }
.nav[hidden] { display: none !important; }
@media (max-width: 760px) {
  body { padding-inline: 0; }
  header { position: relative; height: auto; padding: 6px 7px 7px; }
  .utility-bar { min-height: 33px; }
  .utility-action { min-height: 31px; }
  .account-action { min-width: 96px; }
  .language-row { gap: 4px; }
  .language-chip { min-height: 29px; gap: 3px; padding: 2px 3px; }
  .language-flag { font-size: 15px; }
  .language-code { font-size: 8px; }
  .nav { position: static; display: grid; width: auto; height: auto; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; pointer-events: auto; }
  .nav > a { position: relative; inset: auto; width: auto; min-width: 0; min-height: 39px; height: auto; gap: 3px; padding: 4px 3px; clip-path: none; font-size: 9px; }
  .nav > a .glyph { width: 18px; height: 18px; }
  .nav > .language { display: none; }
  .hero { grid-template-columns: 1fr; min-height: 0; gap: 0; padding: 5px 6px 10px; border-top: 1px solid #e9b23f; }
  .hero-main { grid-column: 1; grid-row: 1; min-height: clamp(295px, 86vw, 400px); grid-template-columns: 1fr; }
  .fountain { inset: 0; background-position: center 40%; }
  .hero-copy { width: 100%; padding: 38px 8px 8px; }
  .hero-copy h1 { font-size: clamp(43px, 12vw, 72px); }
  .hero-copy h2 { font-size: clamp(15px, 4.2vw, 21px); }
  .hero-copy p { max-width: 96%; font-size: clamp(11px, 3.2vw, 14px); }
  .hero .logo-block { position: absolute; z-index: 4; top: 10px; width: 75px; padding: 0; font-size: 9px; }
  .hero .logo-block:first-child { left: 10px; }
  .hero .logo-block:last-child { right: 10px; }
  .hero .logo-block img { width: 65px; height: 65px; margin: 0 auto; border-width: 2px; }
  .hero .logo-block p, .hero .logo-meta, .hero .logo-block > a:last-child { display: none; }
}
@media (max-width: 430px) {
  .nav { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .nav > a { min-height: 36px; font-size: 8px; }
  .nav > a .glyph { width: 16px; height: 16px; }
  .nav > a:nth-child(n+6) { grid-row: 2; }
  .nav > a:nth-child(6) { grid-column: 1; }
  .nav > a:nth-child(7) { grid-column: 2; }
  .nav > a:nth-child(8) { grid-column: 3; }
  .nav > a:nth-child(9) { grid-column: 4; }
  .hero-main { min-height: 300px; }
  .hero .logo-block { top: 8px; width: 66px; }
  .hero .logo-block img { width: 58px; height: 58px; }
}
@media (max-width: 760px) {
  .language-chip { gap: 2px; }
  .language-name { overflow: hidden; font-size: clamp(6px, 2vw, 8px); line-height: 1; text-overflow: clip; white-space: nowrap; }
  .feature-art-link { display: block; min-width: 0; min-height: 0; overflow: hidden; border-radius: 10px; }
  .cards-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
  .cards-heading h2 { margin: 0; }
  .cards-all { flex: 0 0 auto; min-height: 22px; padding: 3px 8px; font-size: 9px; }
}
@media (max-width: 360px) {
  .language-name { font-size: 6px; }
  .language-flag { font-size: 13px; }
}

/* Supplied mobile interface: original image is kept intact, with invisible tap targets. */
.reference-mode { background: #08090d; background-image: none; }
.reference-mode:before { display: none; }
#header[hidden], #footer[hidden] { display: none !important; }
.reference-mode #main { max-width: none; margin: 0; padding: 0; }
.reference-screen { position: relative; width: 100%; max-width: 1024px; margin: 0 auto; line-height: 0; }
.reference-screen > img { display: block; width: 100%; height: auto; }
.reference-hotspots { position: absolute; inset: 0; pointer-events: none; }
.reference-hotspot { position: absolute; display: block; z-index: 2; margin: 0; padding: 0; border: 0; border-radius: 12px; background: transparent; color: transparent; line-height: 1; pointer-events: auto; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.reference-hotspot:focus-visible { outline: 2px solid #fff2a8; outline-offset: -2px; box-shadow: 0 0 12px #ffd34e; }
.reference-hotspot:active { background: #ffd54a22; box-shadow: inset 0 0 0 2px #ffe08b88; }
.reference-status { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Responsive AI MAIA platform interface reconstructed from the supplied phone reference. */
body { padding-inline: 0 !important; background-color: #a9172b; background-image: linear-gradient(135deg,#c51b31e8,#ed972730 44%,#ffdc7a35),var(--scenery); background-position: center top; background-size: cover; }
body:before { display: none !important; }
header[hidden], footer[hidden] { display: none !important; }
#main { width: 100%; max-width: none; margin: 0; padding: 0; }
.maia-page { width: 100%; min-height: 100vh; overflow: clip; }
.maia-hero { position: relative; display: grid; min-height: clamp(420px,52vw,650px); grid-template-columns: 1fr; align-items: center; justify-items: center; padding: 86px 18px 26px; overflow: hidden; border: 0; background: linear-gradient(180deg,#fff8df88,#ffe9b515 42%,#fff1d166),var(--scenery); background-position: center 37%; background-size: cover; }
.maia-hero:after { position:absolute; inset:auto 0 0; height:30%; content:""; background:linear-gradient(0deg,#fff0c0d9,transparent); pointer-events:none; }
.hero-utility { position:absolute; z-index:6; top:12px; right:12px; display:flex; align-items:center; gap:8px; }
.hero-tool { display:inline-flex; min-width:42px; min-height:38px; align-items:center; justify-content:center; gap:6px; padding:5px 11px; border:1px solid #ffe59b; border-radius:10px 16px 10px 16px; color:#fff6d6; background:linear-gradient(160deg,#15100c,#060608 55%,#2e1a0c); box-shadow:inset 0 1px #fff6bd,0 2px 0 #7b3d13,0 0 10px #ffc95277; font-size:12px; }
.hero-tool .glyph { width:20px; height:20px; color:#ffdc74; }
.account-tool { min-width:112px; }
.hamburger { display:grid; gap:4px; width:19px; }
.hamburger i { display:block; height:2px; border-radius:2px; background:#fff3cf; }
.hero-logo { position:absolute; z-index:4; top:86px; width:min(20vw,190px); text-align:center; }
.hero-logo.brand-logo { left:clamp(12px,3vw,45px); }
.hero-logo.ngo-logo { right:clamp(12px,3vw,45px); }
.hero-logo-link { display:block; }
.hero-logo img { display:block; width:clamp(66px,12vw,132px); height:clamp(66px,12vw,132px); margin:0 auto 6px; object-fit:contain; border:0; border-radius:50%; filter:drop-shadow(0 4px 10px #4d180dcc) drop-shadow(0 0 8px #ffd76a); }
.hero-logo small { display:block; color:#fff9e7; font-weight:700; line-height:1.2; text-shadow:0 1px 2px #27100a,0 0 7px #641423; }
.hero-center { position:relative; z-index:3; width:min(100%,760px); margin-top:28px; text-align:center; }
.hero-center h1 { margin:0; color:#ffd960; font-size:clamp(48px,10vw,112px); font-weight:900; letter-spacing:.04em; line-height:.95; -webkit-text-stroke:1px #76280d; text-shadow:0 1px #fff1ae,0 3px #fff0a4,0 5px #b9670e,0 8px #612013,0 12px 16px #37100dbd,0 0 24px #ffe063; }
.hero-center h2 { margin:7px 0; color:#fff3bf; font-size:clamp(18px,3vw,32px); text-shadow:0 2px 3px #3e160e,0 0 12px #7b2315; }
.hero-center p { width:max-content; max-width:min(94%,680px); margin:8px auto 13px; padding:5px 12px; border-radius:8px; color:#fffdf1; background:#45141766; font-size:clamp(14px,2vw,21px); font-weight:700; text-shadow:0 2px 3px #220a0c; }
.hero-cta { min-height:36px; padding:6px 16px; }
.interface-controls { position:relative; z-index:8; width:100%; padding:8px clamp(8px,2vw,24px) 12px; background:linear-gradient(180deg,#fff6d9,#f6d98e); box-shadow:0 4px 12px #53111955; }
.interface-controls .language-row { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); max-width:1000px; gap:6px; margin:0 auto 8px; }
.interface-controls .language-chip { min-height:35px; border-radius:999px; }
.interface-controls .language-name { font-size:11px; }
.interface-controls .nav { position:static; inset:auto; z-index:auto; display:grid; width:auto; height:auto; grid-template-columns:repeat(9,minmax(0,1fr)); gap:6px; max-width:1600px; margin:auto; pointer-events:auto; }
.interface-controls .nav[hidden] { display:none !important; }
.interface-controls .nav > a { position:relative; inset:auto; display:flex; width:auto; height:auto; min-width:0; min-height:42px; gap:5px; padding:5px 6px; clip-path:none; font-size:clamp(9px,.9vw,13px); }
.interface-controls .nav > a .glyph { width:19px; height:19px; flex:0 0 19px; }
.interface-controls .nav > a:nth-of-type(n) { grid-row:auto; grid-column:auto; }
.maia-page .container { max-width:1680px; padding:12px clamp(8px,2vw,26px) 22px; }
.maia-page .primary-grid { gap:9px; }
.maia-page .tile { min-height:112px; }
.maia-page .features { gap:9px; margin:10px 0; }
.maia-page .feature { min-height:145px; }
.maia-page .bottom-grid { grid-template-columns:minmax(0,1.8fr) minmax(280px,1fr); }
.maia-page .account-login { display:flex; margin:4px auto 0; }
.maia-page .cards-all { font-size:11px; min-height:25px; padding:4px 9px; }
.maia-page .section-title { margin-top:12px; }
.maia-page .role { min-height:118px; }
footer { width:100%; max-width:none; margin:0; padding:13px clamp(12px,2vw,28px); border-radius:0; }
@media (max-width:900px) {
 .interface-controls .nav { position:static; inset:auto; width:auto; height:auto; grid-template-columns:repeat(5,minmax(0,1fr)); pointer-events:auto; }
 .interface-controls .nav > a { min-height:42px; }
 .maia-page .bottom-grid { grid-template-columns:1fr; }
}
@media (max-width:760px) {
 .maia-hero { min-height:clamp(365px,110vw,520px); padding:82px 10px 18px; }
 .hero-utility { top:9px; right:9px; gap:5px; }
 .hero-tool { min-width:37px; min-height:35px; padding:4px 8px; }
 .account-tool { min-width:102px; }
 .hero-logo { top:74px; width:25%; }
 .hero-logo.brand-logo { left:8px; }
 .hero-logo.ngo-logo { right:8px; }
 .hero-logo img { width:clamp(58px,18vw,88px); height:clamp(58px,18vw,88px); }
 .hero-logo small { font-size:clamp(8px,2.2vw,11px); }
 .hero-center { margin-top:54px; }
 .hero-center h1 { font-size:clamp(42px,12vw,74px); }
 .hero-center h2 { max-width:80%; margin:6px auto; font-size:clamp(15px,4.3vw,21px); }
 .hero-center p { max-width:84%; font-size:clamp(12px,3.6vw,16px); }
 .interface-controls { padding:7px 6px 9px; }
 .interface-controls .language-row { gap:3px; margin-bottom:6px; }
 .interface-controls .language-chip { min-height:32px; padding:2px 2px; gap:2px; }
 .interface-controls .language-flag { font-size:16px; }
 .interface-controls .language-name { font-size:9px; }
 .interface-controls .nav { grid-template-columns:repeat(5,minmax(0,1fr)); gap:5px; }
 .interface-controls .nav > a { min-height:39px; gap:3px; padding:4px 2px; font-size:clamp(8px,2.3vw,10px); }
 .interface-controls .nav > a .glyph { width:16px; height:16px; flex-basis:16px; }
 .maia-page .container { padding:9px 7px 16px; }
 .maia-page .primary-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
 .maia-page .tile { min-height:86px; gap:7px; padding:8px; border-radius:12px; }
 .maia-page .tile > .glyph { width:34px; height:34px; flex:0 0 34px; padding:5px; }
 .maia-page .tile h3 { font-size:clamp(12px,3.5vw,16px); }
 .maia-page .tile p { font-size:10px; }
 .maia-page .features { grid-template-columns:1fr; gap:7px; margin:8px 0; }
 .maia-page .feature { min-height:108px; grid-template-columns:minmax(0,1fr) minmax(96px,38%); padding:9px; }
 .maia-page .feature h3 { font-size:18px; }
 .maia-page .feature p { font-size:12px; }
 .maia-page .feature-art-link { min-height:82px; }
 .maia-page .section-title { margin:11px 3px 7px; font-size:24px; }
 .maia-page .participation { grid-template-columns:1fr; gap:8px; }
 .maia-page .group-head { min-height:37px; padding:6px 9px; }
 .maia-page .role { min-height:100px; gap:4px; padding:7px 3px; }
 .maia-page .role .glyph { width:28px; height:28px; }
 .maia-page .role h4 { min-height:31px; font-size:11px; }
 .maia-page .role .btn { min-height:24px; padding:3px 6px; font-size:10px; }
 .maia-page .bottom-grid { grid-template-columns:1fr; gap:8px; margin-top:9px; }
 .maia-page .cards-panel, .maia-page .account-panel { padding:9px; border-radius:13px; }
 .maia-page .cards { grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
 .maia-page .card { min-height:178px; padding:8px 6px; }
 .maia-page .card h3 { font-size:12px; }
 .maia-page .account-options { grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; }
 .maia-page .platform-tab { min-height:50px; flex-direction:column; justify-content:center; gap:3px; padding:4px 2px; text-align:center; font-size:10px; }
 .maia-page .platform-tab .glyph { width:19px; height:19px; }
 .maia-page .platform-view { grid-template-columns:48px minmax(0,1fr); min-height:112px; padding:8px; }
 .maia-page .platform-orbit { width:42px; }
 footer { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; padding:13px 10px; font-size:12px; }
 footer strong, footer .official { grid-column:1/-1; }
}
@media (max-width:380px) {
 .account-tool { min-width:88px; }
 .hero-logo { top:74px; }
 .interface-controls .language-name { font-size:8px; }
 .maia-page .tile { gap:5px; padding:7px 5px; }
 .maia-page .tile > .glyph { width:29px; height:29px; flex-basis:29px; }
}

/* Keep inner-page navigation in normal document flow; never pin it over page content. */
@media (max-width:760px) {
  header .nav { position:static !important; inset:auto !important; display:grid !important; width:100% !important; height:auto !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:5px !important; pointer-events:auto !important; }
  header .nav[hidden] { display:none !important; }
  header .nav > a { position:relative !important; inset:auto !important; display:flex !important; width:auto !important; height:auto !important; min-width:0 !important; min-height:38px !important; clip-path:none !important; }
}

/* Hero copy: centered, prominent and directly over the scene. */
.hero-center { width:min(100%,900px); margin-left:auto; margin-right:auto; text-align:center; }
.hero-center h2 { max-width:100%; margin:10px auto; text-align:center; font-size:clamp(23px,3.6vw,38px); }
.hero-center p { width:min(100%,900px); max-width:100%; margin:12px auto 16px; padding:0; border:0; border-radius:0; background:transparent; text-align:center; font-size:clamp(19px,2.7vw,28px); line-height:1.35; text-shadow:0 2px 4px #220a0c,0 0 12px #7b2315; }
@media (max-width:760px) {
 .hero-center { width:100%; margin-left:auto; margin-right:auto; text-align:center; }
 .hero-center h2 { max-width:94%; margin:8px auto; font-size:clamp(20px,5.1vw,27px); text-align:center; }
 .hero-center p { width:94%; max-width:94%; margin:10px auto 14px; padding:0; background:transparent; font-size:clamp(17px,4.4vw,21px); line-height:1.32; text-align:center; }
}

/* Mobile app call to action and temporary availability dialog. */
.app-download { display:flex; align-items:center; justify-content:center; gap:8px; width:max-content; max-width:100%; min-height:38px; margin:10px auto 2px; padding:7px 13px; border:1px solid #e6bd55; border-radius:10px; color:#fff5d7; background:linear-gradient(145deg,#45270d,#160d07); box-shadow:inset 0 1px 0 #fff5bd88,0 3px 10px #6d2a1480; cursor:pointer; }
.app-download .glyph { width:18px; height:18px; color:#ffd66b; }
.app-download small { padding:2px 6px; border-radius:999px; color:#fff4d0; background:#842534; font-size:10px; }
.app-download:hover, .app-download:focus-visible { filter:brightness(1.15); transform:translateY(-1px); }
.app-notice-backdrop[hidden] { display:none !important; }
.app-notice-backdrop { position:fixed; inset:0; z-index:1000; display:grid; place-items:center; padding:18px; background:#12090bd9; backdrop-filter:blur(5px); }
.app-notice { position:relative; width:min(100%,460px); padding:30px 24px 22px; border:2px solid #f2c55b; border-radius:22px; color:#fff8e7; text-align:center; background:radial-gradient(ellipse at 50% 0%,#7d351d,#26120f 68%); box-shadow:0 0 0 5px #f4c55430,0 20px 70px #000b,inset 0 1px 0 #fff7ca88; }
.app-notice-close { position:absolute; top:8px; right:12px; width:36px; height:36px; border:0; border-radius:50%; color:#ffe2a0; background:#ffffff18; font-size:26px; cursor:pointer; }
.app-notice-icon { display:grid; place-items:center; width:58px; height:58px; margin:0 auto 10px; border:1px solid #f7d878; border-radius:18px; color:#ffdf7a; background:#160e0a; box-shadow:0 0 22px #f4b74655; }
.app-notice-icon .glyph { width:30px; height:30px; }
.app-notice-status { color:#ffe28a; font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.app-notice h3 { margin:7px 0 10px; color:#ffe39a; font-size:clamp(20px,5vw,27px); text-shadow:0 2px 9px #f8ae3b77; }
.app-notice p { margin:0 auto 20px; max-width:38ch; font-size:16px; line-height:1.55; }
.app-notice-ok { min-height:38px; padding:7px 18px; border:1px solid #ffe192; border-radius:10px; color:#fff5d7; background:linear-gradient(#b92a36,#690d20); box-shadow:0 4px 12px #10060999; cursor:pointer; }

/* Clearer fountain scene and dimensional gold hero lettering. */
.maia-hero { background-image:linear-gradient(90deg,#27100d20,transparent 22%,transparent 78%,#27100d20),var(--scenery); background-position:center 34%; background-size:cover; }
.maia-hero:after { height:17%; background:linear-gradient(0deg,#7a34151f,transparent); }
.hero-center h1 { position:relative; color:#ffe07b; background:linear-gradient(180deg,#fff9c9 0%,#ffe987 20%,#f6b327 42%,#fff1a0 49%,#cc7514 66%,#fff0a0 82%,#e68d18); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; -webkit-text-stroke:1px #71300c; text-shadow:0 1px #fff2ae,0 2px #f7c249,0 4px #a85a0d,0 6px #71300c,0 9px 2px #4b1d14,0 14px 20px #29100db0,0 0 26px #ffdb61; filter:drop-shadow(0 0 12px #ffe078a8); transform:perspective(700px) rotateX(3deg); }
.hero-center h2 { color:#fff2bd; -webkit-text-stroke:.6px #873c15; text-shadow:0 1px #fff0b7,0 2px #e6a437,0 4px #71320f,0 6px 12px #30110dbd,0 0 15px #ffd466; }
.hero-center p { color:#fff9e6; font-weight:800; letter-spacing:.015em; text-shadow:0 1px #fff0b7,0 2px #cf891f,0 4px #552718,0 7px 12px #210c0cc9,0 0 13px #f7bd53; }
@media(max-width:760px) { .maia-hero { background-position:center 34%; } .hero-center h1 { -webkit-text-stroke:.7px #71300c; text-shadow:0 1px #fff2ae,0 2px #f7c249,0 4px #a85a0d,0 6px #71300c,0 10px 13px #29100db0,0 0 18px #ffdb61; } }

/* Project donation and sponsorship selection. */
.support-trigger { display:inline-flex; align-items:center; gap:6px; min-height:31px; margin-top:7px; padding:5px 9px; border:1px solid #f2c764; border-radius:9px 13px 9px 13px; color:#fff7df; background:linear-gradient(145deg,#b51c32,#6f0e24); box-shadow:inset 0 1px #fff4c8,0 3px 0 #782216,0 5px 10px #4e1b1590; font-size:12px; }
.support-trigger .glyph { width:16px; height:16px; }
.support-trigger:hover { filter:brightness(1.14); transform:translateY(-1px); }
.support-backdrop[hidden] { display:none !important; }
.support-backdrop { position:fixed; inset:0; z-index:1100; display:grid; place-items:center; padding:18px; background:#13090bdc; backdrop-filter:blur(7px); }
.support-dialog { position:relative; width:min(100%,520px); padding:30px 24px 24px; border:2px solid #f0c657; border-radius:22px 30px 22px 30px; color:#fff8e6; text-align:center; background:radial-gradient(ellipse at 50% 0%,#7d351d,#24110f 70%); box-shadow:0 0 0 5px #f4c55430,0 24px 70px #000b,inset 0 1px 0 #fff7ca88; }
.support-close { position:absolute; top:8px; right:12px; width:36px; height:36px; border:1px solid #ffe6a355; border-radius:50%; color:#ffe2a0; background:#ffffff18; font-size:25px; cursor:pointer; }
.support-emblem { display:grid; place-items:center; width:56px; height:56px; margin:0 auto 9px; border:1px solid #f8d975; border-radius:50%; color:#ffe083; background:#190f0a; box-shadow:0 0 22px #f4b74655; }
.support-emblem .glyph { width:29px; height:29px; }
.support-kicker { color:#ffe28a; font-size:11px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
.support-dialog h2 { margin:8px 0; color:#ffe39a; font-size:clamp(22px,5vw,30px); text-shadow:0 2px 10px #f8ae3b77; }
.support-dialog p { max-width:38ch; margin:0 auto 18px; font-size:16px; line-height:1.5; }
.support-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:0 0 16px; }
.support-option { display:flex; align-items:center; justify-content:center; gap:7px; min-height:48px; padding:8px 10px; border:1px solid #ffe192; border-radius:12px; color:#fff8e5; background:linear-gradient(145deg,#a21c33,#54121f); box-shadow:inset 0 1px #fff6cc88,0 4px 12px #10060999; font-weight:700; }
.support-option .glyph { width:20px; height:20px; flex:0 0 20px; color:#ffdf7a; }
.support-option:hover { filter:brightness(1.18); transform:translateY(-1px); }
.sponsor-option { background:linear-gradient(145deg,#a56a12,#52300c); }
.support-dialog small { display:block; color:#f5e6c6; font-size:12px; line-height:1.5; }
@media(max-width:460px) { .support-dialog { padding:27px 16px 20px; } .support-actions { grid-template-columns:1fr; } }

/* Transparent glass treatment for the three hero utility buttons. */
.hero-tool { background:linear-gradient(140deg,#fff3cc36,#6d321b28 55%,#fff1b32b); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); border-color:#ffe59bc9; box-shadow:inset 0 1px #fff8ddaa,0 2px 0 #7b3d1380,0 0 10px #ffc95266; text-shadow:0 1px 3px #2a100d; }
.hero-tool:hover, .hero-tool:focus-visible { background:linear-gradient(140deg,#fff4d65c,#7d391d4d 55%,#fff2bd50); }

/* Cosmic, dimensional identity for the AI MAIA hero. */
.hero-center h1 { transform:perspective(760px) rotateX(8deg) translateZ(14px); text-shadow:0 1px #fff9d1,0 2px #f7cb55,0 4px #c87b14,0 6px #934109,0 9px #612510,0 13px 2px #451b17,0 18px 25px #220c14c9,0 0 28px #ffe27c; filter:drop-shadow(0 0 14px #ffe078bb); }
.hero-brand { position:relative; width:max-content; max-width:min(96%,900px); margin:12px auto 5px; padding:0 8px; color:#fff3bd; font-size:clamp(13px,2.15vw,25px); font-weight:900; line-height:1.2; letter-spacing:.055em; text-transform:uppercase; transform:perspective(650px) rotateX(13deg); background:linear-gradient(180deg,#fffde4 0%,#ffdc75 22%,#fff2c0 38%,#c98b31 56%,#fff5c5 72%,#e9aa36); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; -webkit-text-stroke:.55px #6f3914; text-shadow:0 1px #fff5c9,0 2px #d49a3a,0 4px #8a4b18,0 6px #4e241c,0 9px 16px #231018c9,0 0 16px #f7d26e; filter:drop-shadow(0 0 8px #ffd66c99); }
.hero-brand:before { position:absolute; z-index:-1; inset:-10px -4%; content:""; border:1px solid #ffe6a255; border-radius:50%; transform:perspective(260px) rotateX(64deg); box-shadow:0 0 12px #ffd66c55,inset 0 0 12px #66caff22; pointer-events:none; }
.hero-center h2 { display:table; max-width:100%; margin:6px auto 8px; color:#fff5cf; font-size:clamp(21px,3.4vw,36px); font-weight:900; letter-spacing:.015em; transform:perspective(600px) rotateX(9deg); -webkit-text-stroke:.55px #7a3414; text-shadow:0 1px #fff4bd,0 2px #e9bd53,0 4px #9c5314,0 6px #63270f,0 9px 16px #210d12c9,0 0 18px #ffe07b; }
.hero-center p { font-size:clamp(18px,2.45vw,26px); font-weight:900; letter-spacing:.02em; transform:perspective(700px) rotateX(7deg); -webkit-text-stroke:.35px #703915; text-shadow:0 1px #fff5cc,0 2px #e4bc65,0 4px #8c511c,0 6px #522418,0 10px 18px #1f0c13c9,0 0 14px #ffe09a; }
@media(max-width:760px) {
 .hero-center h1 { transform:perspective(600px) rotateX(7deg); }
 .hero-brand { max-width:96%; margin:9px auto 4px; padding:0 4px; font-size:clamp(11px,3.2vw,16px); line-height:1.22; letter-spacing:.035em; -webkit-text-stroke:.35px #6f3914; }
 .hero-brand:before { inset:-8px -2%; }
 .hero-center h2 { max-width:96%; margin:5px auto 7px; font-size:clamp(18px,5vw,25px); }
 .hero-center p { width:94%; max-width:94%; font-size:clamp(16px,4vw,20px); }
}
@media(prefers-reduced-motion:reduce) { .hero-brand, .hero-center h1, .hero-center h2, .hero-center p { scroll-behavior:auto; } }

/* Build genuine depth from separated text planes and a perspective stage. */
.maia-hero { perspective:1100px; perspective-origin:50% 40%; transform-style:preserve-3d; }
.hero-center { transform-style:preserve-3d; perspective:900px; }
.hero-center h1 { position:relative; z-index:1; transform-style:preserve-3d; transform:perspective(900px) rotateX(17deg) rotateY(-3deg) translateZ(54px); animation:maia-float-front 6s ease-in-out infinite; }
.hero-center h1:before { content:"AI MAIA"; position:absolute; inset:0; z-index:-1; color:#a65b12; -webkit-text-fill-color:#a65b12; -webkit-text-stroke:1px #63300c; background:none; transform:translate3d(4px,10px,-18px); text-shadow:0 2px #793b11,0 5px #582713,0 9px #351712,0 14px 12px #16070ba8; filter:blur(.2px); }
.hero-brand { transform-style:preserve-3d; transform:perspective(800px) rotateX(19deg) rotateY(-2deg) translateZ(43px); animation:maia-float-middle 7s ease-in-out infinite; }
.hero-brand:after { content:attr(data-text); position:absolute; inset:0; z-index:-1; color:#a36319; -webkit-text-fill-color:#a36319; -webkit-text-stroke:.6px #563019; background:none; transform:translate3d(3px,7px,-13px); text-shadow:0 2px #794515,0 5px #472416,0 9px 10px #15090b99; white-space:inherit; }
.hero-brand:before { border-color:#ffe6a280 #6ed9ff70 #ffe6a255 #c889ff66; box-shadow:0 0 14px #ffd66c77,inset 0 0 15px #66caff33; transform:perspective(300px) rotateX(70deg) rotateY(13deg); animation:maia-orbit 12s linear infinite; }
.hero-center h2 { position:relative; transform-style:preserve-3d; transform:perspective(800px) rotateX(13deg) rotateY(2deg) translateZ(30px); animation:maia-float-middle 6.5s ease-in-out infinite reverse; }
.hero-center h2:before { content:attr(data-text); position:absolute; inset:0; z-index:-1; color:#a65c16; -webkit-text-fill-color:#a65c16; -webkit-text-stroke:.6px #5d2a12; transform:translate3d(3px,7px,-12px); text-shadow:0 2px #71380f,0 5px #421b12,0 9px 10px #17090c99; white-space:inherit; }
.hero-center p { transform:perspective(800px) rotateX(9deg) translateZ(17px); }
@keyframes maia-float-front { 0%,100% { transform:perspective(900px) rotateX(17deg) rotateY(-3deg) translate3d(0,0,54px); } 50% { transform:perspective(900px) rotateX(15deg) rotateY(2deg) translate3d(0,-5px,68px); } }
@keyframes maia-float-middle { 0%,100% { translate:0 0; } 50% { translate:0 -3px; } }
@keyframes maia-orbit { from { rotate:0deg; } to { rotate:360deg; } }
@media(max-width:760px) {
 .maia-hero { perspective:850px; perspective-origin:50% 42%; }
 .hero-center h1 { transform:perspective(700px) rotateX(14deg) rotateY(-2deg) translateZ(35px); }
 .hero-center h1:before { transform:translate3d(3px,7px,-14px); }
 .hero-brand { transform:perspective(700px) rotateX(16deg) translateZ(28px); }
 .hero-brand:after { transform:translate3d(2px,5px,-10px); }
 .hero-center h2 { transform:perspective(700px) rotateX(11deg) translateZ(22px); }
 .hero-center h2:before { transform:translate3d(2px,5px,-9px); }
 .hero-center p { transform:perspective(700px) rotateX(7deg) translateZ(12px); }
}
@media(prefers-reduced-motion:reduce) {
 .hero-center h1,.hero-brand,.hero-center h2,.hero-brand:before { animation:none !important; }
}

/* Keep the two seals clear of the centered hero copy; improve small-copy legibility. */
.hero-logo { top:72px; width:clamp(112px,17vw,170px); }
.hero-logo.brand-logo { left:clamp(5px,1vw,18px); }
.hero-logo.ngo-logo { right:clamp(5px,1vw,18px); }
.hero-logo img { width:clamp(72px,10vw,118px); height:clamp(72px,10vw,118px); }
.hero-logo small { font-size:clamp(12px,1.1vw,14px); line-height:1.25; color:#fffdf3; -webkit-text-stroke:.2px #421b13; text-shadow:0 1px 2px #1a0907,0 2px 5px #260a0d,0 0 10px #711423; animation:maia-float-copy 8s ease-in-out infinite; }
.hero-brand { font-size:clamp(16px,2.35vw,27px); line-height:1.25; text-shadow:0 1px #fffbd4,0 2px #edc35a,0 4px #a4641b,0 6px #552b1d,0 10px 18px #180a12d9,0 0 20px #f7d26e; }
.hero-center h2 { font-size:clamp(23px,3.6vw,38px); line-height:1.18; }
.hero-center p { font-size:clamp(20px,2.8vw,29px); line-height:1.38; animation:maia-float-copy 8.6s ease-in-out infinite .7s; }
@keyframes maia-float-copy { 0%,100% { translate:0 0; } 50% { translate:0 -3px; } }
@media(max-width:760px) {
 .hero-logo { top:66px; width:23%; }
 .hero-logo.brand-logo { left:3px; }
 .hero-logo.ngo-logo { right:3px; }
 .hero-logo img { width:clamp(54px,15vw,68px); height:clamp(54px,15vw,68px); margin-bottom:4px; }
 .hero-logo small { font-size:clamp(9px,2.7vw,11px); line-height:1.2; }
 .hero-brand { max-width:96%; font-size:clamp(13px,3.65vw,18px); line-height:1.3; }
 .hero-center h2 { max-width:96%; font-size:clamp(20px,5.3vw,27px); line-height:1.24; }
 .hero-center p { width:96%; max-width:96%; font-size:clamp(17px,4.45vw,22px); line-height:1.4; }
}
@media(prefers-reduced-motion:reduce) {
 .hero-logo small,.hero-brand,.hero-center h1,.hero-center h2,.hero-center p,.hero-brand:before { animation:none !important; }
}

/* Timed fountain reveal: rise into the foreground, hold, then recede. */
.hero-center h1 { font-size:clamp(58px,10vw,118px); transform-origin:50% 72%; animation:fontana-rise-title 10s cubic-bezier(.2,.72,.18,1) -1.5s infinite; will-change:transform,opacity,filter; }
.hero-center h1:before { transform:translate3d(4px,10px,-22px); }
.hero-brand { width:max-content; max-width:min(96%,1050px); font-size:clamp(28px,5vw,58px); line-height:1.15; transform-origin:50% 72%; animation:fontana-rise-brand 10s cubic-bezier(.2,.72,.18,1) -1.5s infinite; will-change:transform,opacity,filter; }
.hero-brand:after { transform:translate3d(3px,8px,-20px); }
.hero-center h2,.hero-center p,.hero-logo small { transform-origin:50% 75%; animation:small-copy-tilt 10s ease-in-out infinite; will-change:transform; }
.hero-center h2 { animation-delay:-1.5s; }
.hero-center p { animation-delay:-2.1s; }
.hero-logo.brand-logo small { animation-delay:-.8s; }
.hero-logo.ngo-logo small { animation-delay:-1.8s; }
@keyframes fontana-rise-title {
 0%,8% { opacity:0; filter:brightness(.55) blur(7px) drop-shadow(0 0 0 #ffe07800); transform:perspective(1000px) rotateX(35deg) rotateY(-7deg) translate3d(0,105px,-260px) scale(.3); }
 20% { opacity:1; filter:brightness(1.15) blur(0) drop-shadow(0 0 22px #ffe078d9); transform:perspective(1000px) rotateX(5deg) rotateY(-1deg) translate3d(0,0,72px) scale(1.02); }
 28%,55% { opacity:1; filter:brightness(1.08) blur(0) drop-shadow(0 0 14px #ffe078bb); transform:perspective(1000px) rotateX(3deg) rotateY(0) translate3d(0,-2px,64px) scale(1); }
 72% { opacity:1; filter:brightness(.9) blur(1px) drop-shadow(0 0 12px #ffe07888); transform:perspective(1000px) rotateX(20deg) rotateY(5deg) translate3d(0,25px,-70px) scale(.74); }
 84%,100% { opacity:0; filter:brightness(.55) blur(7px) drop-shadow(0 0 0 #ffe07800); transform:perspective(1000px) rotateX(35deg) rotateY(8deg) translate3d(0,105px,-260px) scale(.3); }
}
@keyframes fontana-rise-brand {
 0%,8% { opacity:0; filter:brightness(.55) blur(8px) drop-shadow(0 0 0 #ffd66c00); transform:perspective(900px) rotateX(38deg) rotateY(-8deg) translate3d(0,118px,-280px) scale(.28); }
 20% { opacity:1; filter:brightness(1.15) blur(0) drop-shadow(0 0 20px #ffd66ccf); transform:perspective(900px) rotateX(5deg) rotateY(-1deg) translate3d(0,0,58px) scale(1.02); }
 28%,55% { opacity:1; filter:brightness(1.08) blur(0) drop-shadow(0 0 14px #ffd66caa); transform:perspective(900px) rotateX(2deg) rotateY(0) translate3d(0,-1px,50px) scale(1); }
 72% { opacity:1; filter:brightness(.9) blur(1px) drop-shadow(0 0 12px #ffd66c77); transform:perspective(900px) rotateX(22deg) rotateY(6deg) translate3d(0,30px,-80px) scale(.68); }
 84%,100% { opacity:0; filter:brightness(.5) blur(8px) drop-shadow(0 0 0 #ffd66c00); transform:perspective(900px) rotateX(38deg) rotateY(8deg) translate3d(0,118px,-280px) scale(.28); }
}
@keyframes small-copy-tilt {
 0%,12% { transform:perspective(700px) rotateX(16deg) rotateY(-3deg) translateZ(12px); }
 30%,54% { transform:perspective(700px) rotateX(0) rotateY(0) translateZ(26px); }
 76%,88% { transform:perspective(700px) rotateX(16deg) rotateY(3deg) translateZ(10px); }
 100% { transform:perspective(700px) rotateX(16deg) rotateY(-3deg) translateZ(12px); }
}
@media(max-width:760px) {
 .hero-center h1 { font-size:clamp(47px,12vw,78px); }
 .hero-brand { max-width:96%; font-size:clamp(21px,6.3vw,34px); line-height:1.18; }
}
@media(prefers-reduced-motion:reduce) {
 .hero-center h1,.hero-brand,.hero-center h2,.hero-center p,.hero-logo small { animation:none !important; opacity:1 !important; filter:none !important; transform:none !important; }
}

/* Center the complete hero composition and move it as one distant 3D object. */
.maia-hero { perspective:1400px; perspective-origin:50% 43%; }
.hero-center { width:min(100%,980px); margin:0 auto; text-align:center; perspective:1200px; }
.hero-arrival { display:flex; width:100%; max-width:980px; margin:0 auto; flex-direction:column; align-items:center; justify-content:center; text-align:center; transform-origin:50% 48%; transform-style:preserve-3d; animation:fontana-group-travel 12s cubic-bezier(.22,.7,.18,1) -3s infinite; will-change:transform,opacity,filter; }
.hero-arrival h1,.hero-arrival .hero-brand,.hero-arrival h2,.hero-arrival p { width:auto; max-width:100%; margin-left:auto; margin-right:auto; text-align:center; animation:none !important; transform:none; }
.hero-arrival h1 { font-size:clamp(54px,9vw,102px); line-height:1; }
.hero-arrival h1:before { transform:translate3d(0,9px,-16px); }
.hero-arrival .hero-brand { width:max-content; max-width:96%; margin-top:7px; margin-bottom:5px; font-size:clamp(25px,4.5vw,50px); line-height:1.15; transform:none; }
.hero-arrival .hero-brand:after { transform:translate3d(0,6px,-12px); }
.hero-arrival .hero-brand:before { animation:maia-orbit 12s linear infinite; }
.hero-arrival h2 { display:block; max-width:96%; margin-top:4px; margin-bottom:5px; font-size:clamp(21px,3.1vw,32px); line-height:1.2; transform:none; }
.hero-arrival p { width:96%; max-width:850px; margin-top:4px; margin-bottom:10px; font-size:clamp(17px,2.15vw,23px); line-height:1.35; transform:none; }
.hero-arrival .hero-cta { align-self:center; margin:2px auto 0; }
@keyframes fontana-group-travel {
 0%,7% { visibility:hidden; opacity:0; filter:blur(9px) brightness(.5); transform:perspective(1200px) translate3d(0,74px,-650px) rotateX(48deg) scale(.34); }
 24% { visibility:visible; opacity:1; filter:blur(0) brightness(1.1); transform:perspective(1200px) translate3d(0,0,12px) rotateX(0) scale(1); }
 29%,55% { visibility:visible; opacity:1; filter:blur(0) brightness(1); transform:perspective(1200px) translate3d(0,-1px,0) rotateX(0) scale(1); }
 73% { visibility:visible; opacity:.92; filter:blur(1.5px) brightness(.9); transform:perspective(1200px) translate3d(0,28px,-180px) rotateX(27deg) scale(.68); }
 84%,100% { visibility:hidden; opacity:0; filter:blur(9px) brightness(.5); transform:perspective(1200px) translate3d(0,74px,-650px) rotateX(48deg) scale(.34); }
}
@media(max-width:760px) {
 .hero-center { width:100%; margin:0 auto; }
 .hero-arrival { width:100%; max-width:100%; padding:0 4px; }
 .hero-arrival h1 { font-size:clamp(48px,11.5vw,70px); }
 .hero-arrival .hero-brand { max-width:96%; font-size:clamp(21px,5.8vw,29px); line-height:1.2; }
 .hero-arrival h2 { max-width:96%; font-size:clamp(19px,4.9vw,24px); }
 .hero-arrival p { width:96%; max-width:96%; font-size:clamp(16px,4vw,19px); line-height:1.35; }
 .hero-arrival .hero-cta { min-height:34px; padding:6px 13px; font-size:14px; }
 @keyframes fontana-group-travel {
  0%,7% { visibility:hidden; opacity:0; filter:blur(8px) brightness(.5); transform:perspective(900px) translate3d(0,52px,-500px) rotateX(44deg) scale(.36); }
  24% { visibility:visible; opacity:1; filter:blur(0) brightness(1.1); transform:perspective(900px) translate3d(0,0,8px) rotateX(0) scale(1); }
  29%,55% { visibility:visible; opacity:1; filter:blur(0) brightness(1); transform:perspective(900px) translate3d(0,-1px,0) rotateX(0) scale(1); }
  73% { visibility:visible; opacity:.92; filter:blur(1px) brightness(.9); transform:perspective(900px) translate3d(0,22px,-150px) rotateX(25deg) scale(.7); }
  84%,100% { visibility:hidden; opacity:0; filter:blur(8px) brightness(.5); transform:perspective(900px) translate3d(0,52px,-500px) rotateX(44deg) scale(.36); }
 }
}
@media(prefers-reduced-motion:reduce) { .hero-arrival { animation:none !important; visibility:visible !important; opacity:1 !important; filter:none !important; transform:none !important; } }

/* Alternating centered titles: one arrives, holds, and leaves before the next. */
.hero-center { left:auto !important; right:auto !important; width:min(100%,980px); margin:0 auto; padding:0 8px; text-align:center; transform:none; perspective:1200px; }
.hero-title-stage { position:relative; display:grid; place-items:center; width:100%; max-width:1040px; min-height:clamp(150px,17vw,205px); margin:0 auto; perspective:1300px; transform-style:preserve-3d; }
.hero-title-sequence { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; width:100%; max-width:100%; margin:0 auto; padding:0 2%; text-align:center; font-size:clamp(44px,6vw,78px); font-weight:900; line-height:1.08; letter-spacing:.035em; color:#ffe98b; background:linear-gradient(180deg,#fffde0 0%,#ffe375 18%,#fff3b8 31%,#d89825 48%,#fff2ae 57%,#b96c12 75%,#fff0a0 91%,#e9a72d); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; -webkit-text-stroke:1px #71300c; text-shadow:0 1px #fff8c9,0 3px #f1c550,0 6px #b76d13,0 9px #6b3211,0 13px #3a1713,0 19px 25px #1b0911c9,0 0 24px #ffe079; filter:drop-shadow(0 0 15px #ffd856aa); transform-origin:50% 50%; transform-style:preserve-3d; backface-visibility:hidden; will-change:transform,opacity,filter; }
.hero-title-sequence:before { content:attr(data-text); position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:0 2%; z-index:-1; color:#98510f; -webkit-text-fill-color:#98510f; -webkit-text-stroke:1px #57240e; background:none; transform:translate3d(0,10px,-22px); text-shadow:0 3px #74390f,0 7px #48210f,0 12px #30120f,0 18px 15px #16060ca8; }
.hero-title-ai { animation:hero-title-ai-cycle 12s cubic-bezier(.2,.7,.18,1) -1s infinite; }
.hero-title-brand { animation:hero-title-brand-cycle 12s cubic-bezier(.2,.7,.18,1) -1s infinite; }
.hero-subcopy { display:flex; width:100%; flex-direction:column; align-items:center; justify-content:center; margin:0 auto; text-align:center; }
.hero-subcopy h2 { display:block; width:100%; max-width:900px; margin:4px auto 7px; text-align:center; font-size:clamp(20px,3vw,31px); line-height:1.25; animation:small-copy-tilt 9s ease-in-out infinite; }
.hero-subcopy p { width:96%; max-width:850px; margin:3px auto 10px; text-align:center; font-size:clamp(16px,2.1vw,22px); line-height:1.38; animation:small-copy-tilt 9s ease-in-out infinite -1.5s; }
.hero-center .hero-cta { display:table; margin:7px auto 0; }
@keyframes hero-title-ai-cycle {
 0%,5% { visibility:hidden; opacity:0; filter:blur(9px) brightness(.45); transform:perspective(1300px) translate3d(0,52px,-550px) rotateX(47deg) scale(.34); }
 9% { visibility:visible; opacity:.3; filter:blur(4px) brightness(.7); transform:perspective(1300px) translate3d(0,28px,-260px) rotateX(34deg) scale(.58); }
 23% { visibility:visible; opacity:1; filter:blur(0) brightness(1.08); transform:perspective(1300px) translate3d(0,0,30px) rotateX(0) scale(1); }
 27%,47% { visibility:visible; opacity:1; filter:blur(0) brightness(1); transform:perspective(1300px) translate3d(0,0,18px) rotateX(0) scale(1); }
 52% { visibility:hidden; opacity:0; filter:blur(8px) brightness(.5); transform:perspective(1300px) translate3d(0,44px,-440px) rotateX(44deg) scale(.4); }
 100% { visibility:hidden; opacity:0; filter:blur(9px) brightness(.45); transform:perspective(1300px) translate3d(0,52px,-550px) rotateX(47deg) scale(.34); }
}
@keyframes hero-title-brand-cycle {
 0%,52% { visibility:hidden; opacity:0; filter:blur(9px) brightness(.45); transform:perspective(1300px) translate3d(0,52px,-550px) rotateX(47deg) scale(.34); }
 57% { visibility:visible; opacity:.3; filter:blur(4px) brightness(.7); transform:perspective(1300px) translate3d(0,28px,-260px) rotateX(34deg) scale(.58); }
 71% { visibility:visible; opacity:1; filter:blur(0) brightness(1.08); transform:perspective(1300px) translate3d(0,0,30px) rotateX(0) scale(1); }
 75%,95% { visibility:visible; opacity:1; filter:blur(0) brightness(1); transform:perspective(1300px) translate3d(0,0,18px) rotateX(0) scale(1); }
 100% { visibility:hidden; opacity:0; filter:blur(9px) brightness(.45); transform:perspective(1300px) translate3d(0,52px,-550px) rotateX(47deg) scale(.34); }
}
@media(max-width:760px) {
 .hero-center { width:100%; margin:0 auto; padding:0 6px; }
 .hero-title-stage { width:100%; min-height:clamp(142px,40vw,184px); }
 .hero-title-sequence { font-size:clamp(29px,7.2vw,48px); line-height:1.14; letter-spacing:.018em; -webkit-text-stroke:.65px #71300c; }
 .hero-title-sequence:before { transform:translate3d(0,7px,-17px); -webkit-text-stroke:.7px #57240e; }
 .hero-subcopy h2 { max-width:96%; font-size:clamp(18px,4.9vw,24px); }
 .hero-subcopy p { width:96%; max-width:96%; font-size:clamp(15px,3.9vw,19px); }
 .hero-center .hero-cta { min-height:34px; padding:6px 13px; font-size:14px; }
}
@media(prefers-reduced-motion:reduce) {
 .hero-title-sequence,.hero-subcopy h2,.hero-subcopy p { animation:none !important; }
 .hero-title-ai { visibility:visible !important; opacity:1 !important; filter:none !important; transform:none !important; }
 .hero-title-brand { visibility:hidden !important; }
}

/* Centered gold titles with a right-to-left light pass and clearer captions. */
.hero-title-stage { width:min(92%,1040px); margin-left:auto; margin-right:auto; justify-self:center; }
.hero-title-sequence { left:0; right:0; width:100%; margin-inline:auto; padding-inline:1.5%; transform-origin:50% 50%; text-align:center; }
.hero-title-ai { font-size:clamp(44px,5.7vw,70px); }
.hero-title-brand { font-size:clamp(40px,5.1vw,62px); }
.hero-title-sequence:after { content:attr(data-text); position:absolute; inset:0; z-index:2; display:flex; align-items:center; justify-content:center; padding:0 2%; color:transparent; -webkit-text-fill-color:transparent; -webkit-text-stroke:.55px #fff5c5; background-image:linear-gradient(270deg,transparent 35%,#fff9d8 47%,#fff1a0 50%,#ffc83d 53%,transparent 65%); background-repeat:no-repeat; background-size:260% 100%; background-position:220% center; -webkit-background-clip:text; background-clip:text; filter:drop-shadow(0 0 10px #fff4a8); animation:gold-light-sweep 4.8s linear infinite; pointer-events:none; }
@keyframes gold-light-sweep { from { background-position:220% center; } to { background-position:-160% center; } }
.hero-subcopy { width:min(96%,900px); margin:0 auto; }
.hero-subcopy h2 { color:#fffdf0; font-size:clamp(24px,3.35vw,35px); font-weight:900; letter-spacing:.015em; -webkit-text-stroke:.75px #502019; text-shadow:0 1px #fff5cb,0 2px #873c16,0 4px #3c1714,0 7px 15px #16090bd9,0 0 18px #ffcf62; transform-origin:50% 60%; animation:hero-caption-rock 8s ease-in-out infinite; }
.hero-subcopy p { width:100%; max-width:900px; color:#fff; font-size:clamp(19px,2.5vw,26px); font-weight:900; letter-spacing:.015em; -webkit-text-stroke:.65px #26113c; text-shadow:0 1px #fff4cd,0 2px #522855,0 4px #1b1235,0 7px 15px #100813e8,0 0 20px #d8b8ff; transform-origin:50% 60%; animation:hero-caption-rock 9s ease-in-out infinite -1s; }
@keyframes hero-caption-rock { 0%,12% { transform:perspective(800px) rotateX(18deg) rotateY(-2deg) translateZ(8px); } 32%,55% { transform:perspective(800px) rotateX(0) rotateY(0) translateZ(18px); } 77%,90% { transform:perspective(800px) rotateX(18deg) rotateY(2deg) translateZ(7px); } 100% { transform:perspective(800px) rotateX(18deg) rotateY(-2deg) translateZ(8px); } }
@media(max-width:760px) {
 .hero-title-stage { width:92%; min-height:clamp(142px,39vw,184px); }
 .hero-title-ai { font-size:clamp(37px,9vw,54px); }
 .hero-title-brand { font-size:clamp(31px,7.5vw,44px); line-height:1.12; }
 .hero-subcopy { width:96%; }
 .hero-subcopy h2 { max-width:96%; font-size:clamp(20px,5.3vw,27px); }
 .hero-subcopy p { width:100%; max-width:100%; font-size:clamp(17px,4.25vw,21px); line-height:1.4; }
 .hero-title-sequence:after { -webkit-text-stroke:.4px #fff5c5; }
}

/* Fixed, symmetrical hero lockup: the only motion is a gold beam crossing both titles. */
.maia-hero { isolation:isolate; }
.hero-logo { top:50%; transform:translateY(-50%); }
.hero-center { position:absolute; z-index:2; top:46%; left:50%; width:64%; max-width:1040px; margin:0; padding:0; transform:translate(-50%,-50%) !important; overflow:visible; isolation:isolate; }
.hero-title-stage { display:grid; grid-template-columns:minmax(0,1fr); justify-items:center; align-content:center; gap:0; width:100%; min-height:0; margin:0 auto 3px; overflow:visible; }
.hero-title-sequence { position:relative !important; inset:auto !important; display:flex; width:100%; min-height:0; align-items:center; justify-content:center; margin:0 auto; padding:0 1%; visibility:visible !important; opacity:1 !important; filter:drop-shadow(0 0 15px #ffd856aa) !important; transform:perspective(1000px) rotateX(8deg) translateZ(12px) !important; animation:none !important; text-align:center; white-space:normal; }
.hero-title-ai,.hero-title-brand { font-size:clamp(30px,4vw,54px); line-height:1.08; letter-spacing:.025em; }
.hero-title-sequence:before { transform:translate3d(0,7px,-18px); }
.hero-title-sequence:after { animation:gold-light-sweep 4.8s linear infinite; }
.hero-center:before { content:""; position:absolute; z-index:5; pointer-events:none; top:-8%; left:100%; width:14px; height:116%; border-radius:50%; background:linear-gradient(90deg,transparent,#fffce0 38%,#ffd54e 50%,#fffce0 62%,transparent); box-shadow:0 0 12px 4px #fff3a8,0 0 28px 10px #ffc83d99; filter:blur(1px); animation:logo-to-logo-sweep 5.4s ease-in-out infinite; }
@keyframes logo-to-logo-sweep { 0% { transform:translateX(0); opacity:0; } 8% { opacity:1; } 92% { opacity:1; } 100% { transform:translateX(calc(-200% - 76vw)); opacity:0; } }
.hero-subcopy { width:100%; margin:2px auto 0; }
.hero-subcopy h2 { max-width:100%; margin:4px auto 5px; color:#fffdf2; font-size:clamp(22px,2.7vw,32px); font-weight:900; -webkit-text-stroke:.8px #32111b; text-shadow:0 1px #fff6cf,0 3px #7d2630,0 6px 14px #170914,0 0 20px #ffda70; transform:none; animation:none; }
.hero-subcopy p { width:100%; max-width:100%; margin:2px auto 8px; color:#fff; font-size:clamp(18px,2.15vw,25px); font-weight:900; line-height:1.32; -webkit-text-stroke:.75px #211033; text-shadow:0 1px #fff5d1,0 3px #532653,0 6px 14px #100712,0 0 18px #e4bdff; transform:none; animation:none; }
.hero-logo small { color:#fff; font-size:clamp(12px,1.15vw,15px); font-weight:900; line-height:1.25; -webkit-text-stroke:.55px #271019; text-shadow:0 1px #16070c,0 2px 5px #16070c,0 0 12px #ffcc56; animation:none; }
@media(max-width:760px) {
 .hero-logo { top:50%; width:22%; transform:translateY(-50%); }
 .hero-logo.brand-logo { left:2px; }
 .hero-logo.ngo-logo { right:2px; }
 .hero-logo img { width:clamp(58px,15vw,72px); height:clamp(58px,15vw,72px); }
 .hero-logo small { font-size:clamp(10px,2.7vw,13px); line-height:1.22; }
 .hero-center { top:45%; width:54%; max-width:none; padding:0; }
 .hero-title-stage { width:100%; min-height:0; gap:0; }
 .hero-title-ai,.hero-title-brand { font-size:clamp(18px,5.2vw,28px); line-height:1.12; letter-spacing:.012em; }
 .hero-title-sequence:before { transform:translate3d(0,5px,-14px); }
 .hero-subcopy { width:100%; }
 .hero-subcopy h2 { max-width:100%; margin:3px auto 4px; font-size:clamp(18px,4.8vw,24px); line-height:1.2; }
 .hero-subcopy p { width:100%; font-size:clamp(16px,4vw,20px); line-height:1.3; }
 .hero-center .hero-cta { margin:4px auto 0; }
 .hero-center:before { width:10px; }
}
@media(prefers-reduced-motion:reduce) { .hero-title-sequence:after,.hero-center:before { animation:none !important; } }

/* Final alignment correction: restore the original seal positions and keep the gold sweep inside the lettering. */
.hero-logo { top:72px; width:clamp(112px,17vw,170px); transform:none; }
.hero-logo.brand-logo { left:clamp(5px,1vw,18px); }
.hero-logo.ngo-logo { right:clamp(5px,1vw,18px); }
.hero-logo img { width:clamp(72px,10vw,118px); height:clamp(72px,10vw,118px); }
.hero-center { position:relative; top:auto; left:auto; z-index:3; width:min(64%,760px); max-width:760px; margin:0 auto; padding:0; transform:translateY(-6px) !important; overflow:visible; }
.hero-center:before { display:none; }
.hero-title-stage { width:100%; margin:0 auto 3px; }
.hero-title-sequence:after { background-size:220% 100%; animation:gold-light-sweep 5.4s linear infinite; filter:drop-shadow(0 0 5px #fff4a8); }
@media(max-width:760px) {
 .hero-logo { top:66px; width:23%; transform:none; }
 .hero-logo.brand-logo { left:3px; }
 .hero-logo.ngo-logo { right:3px; }
 .hero-logo img { width:clamp(54px,15vw,68px); height:clamp(54px,15vw,68px); margin-bottom:4px; }
 .hero-logo small { font-size:clamp(9px,2.7vw,11px); line-height:1.2; }
 .hero-center { width:54%; max-width:none; margin:0 auto; transform:translateY(-4px) !important; }
 .hero-title-ai,.hero-title-brand { font-size:clamp(18px,5.2vw,28px); }
 .hero-center:before { display:none; }
}
@media(max-width:380px) { .hero-logo { top:74px; } }

/* Leave only the two original clickable logos; keep separate glints clipped to each title. */
.hero-logo small { display:none !important; }
.hero-title-ai,.hero-title-brand { text-align:center; }
.hero-title-sequence:after { background-image:linear-gradient(270deg,transparent 44%,#fff5bd 48%,#fff 50%,#ffc83d 52%,transparent 56%); background-size:300% 100%; animation:gold-light-sweep 5.4s linear infinite; }
.hero-subcopy,.hero-subcopy h2,.hero-subcopy p { width:100%; margin-left:auto; margin-right:auto; text-align:center; }
.hero-subcopy h2 { transform:perspective(700px) rotateX(9deg) translateZ(9px); transform-style:preserve-3d; text-shadow:0 1px #fff8d7,0 2px #f6ca59,0 4px #a34f24,0 7px #4b1720,0 11px 16px #190911d9,0 0 20px #ffdc79; }
.hero-subcopy p { transform:perspective(800px) rotateX(7deg) translateZ(7px); transform-style:preserve-3d; text-shadow:0 1px #fff8df,0 2px #e6c278,0 4px #765028,0 7px #311726,0 10px 15px #140b17e8,0 0 17px #ffe096; }
@media(max-width:760px) {
 .hero-subcopy h2 { transform:perspective(600px) rotateX(7deg) translateZ(6px); }
 .hero-subcopy p { transform:perspective(700px) rotateX(5deg) translateZ(5px); }
}
@media(prefers-reduced-motion:reduce) { .hero-title-sequence:after { animation:none !important; } }

/* Give both centered titles room to read across the page without a heavy extrusion shadow. */
.hero-center { width:100%; max-width:none; }
.hero-title-stage { position:relative; left:50%; width:94vw; max-width:none; margin:0 0 5px; transform:translateX(-50%); }
.hero-title-sequence { white-space:nowrap; -webkit-text-stroke:.75px #71300c; text-shadow:0 1px #fff8c9,0 3px #e5aa35,0 6px #774010,0 10px 18px #1b091188,0 0 20px #ffe079; filter:drop-shadow(0 0 7px #ffd85677) !important; transform:perspective(1200px) rotateX(5deg) translateZ(5px) !important; }
.hero-title-sequence:before { content:none !important; display:none !important; }
.hero-title-ai { font-size:clamp(32px,5.2vw,74px); }
.hero-title-brand { font-size:clamp(16px,3.7vw,53px); letter-spacing:.015em; }
.hero-subcopy { width:94vw; max-width:none; }
.hero-subcopy h2,.hero-subcopy p { max-width:94vw; }
@media(max-width:760px) {
 .hero-center { width:100%; }
 .hero-title-stage { width:94vw; }
 .hero-title-ai { font-size:clamp(28px,8vw,36px); }
 .hero-title-brand { font-size:clamp(16px,4.25vw,19px); letter-spacing:0; }
 .hero-subcopy { width:94vw; }
 .hero-subcopy h2,.hero-subcopy p { width:94vw; max-width:94vw; }
}

/* Put the two titles on separate, readable lines: AI MAIA between the seals, brand name below them. */
.hero-center { position:static; width:100%; max-width:none; }
.hero-title-stage { position:absolute; z-index:5; top:0; left:50%; width:94vw; height:0; margin:0; transform:translateX(-50%); }
.hero-title-sequence { position:absolute !important; display:block; left:50%; width:70vw; min-height:0; padding:0; white-space:nowrap; transform:translateX(-50%) perspective(1200px) rotateX(4deg) translateZ(4px) !important; }
.hero-title-ai { top:clamp(92px,calc(6.4vw + 10px),102px); font-size:clamp(30px,4vw,58px); }
.hero-title-brand { top:calc(72px + clamp(72px,10vw,118px) + 9px); width:94vw; font-size:clamp(30px,4vw,58px); letter-spacing:.015em; }
.hero-title-sequence:after { inset:0; }
.hero-subcopy { width:94vw; max-width:none; }
.hero-subcopy h2,.hero-subcopy p { max-width:94vw; }
@media(max-width:760px) {
 .hero-title-stage { width:94vw; }
 .hero-title-sequence { width:94vw; white-space:normal; line-height:1.08; }
 .hero-title-ai { top:83px; font-size:clamp(23px,7vw,31px); }
 .hero-title-brand { top:calc(66px + clamp(54px,15vw,68px) + 8px); width:94vw; font-size:clamp(23px,7vw,31px); }
 .hero-subcopy { width:94vw; }
 .hero-subcopy h2,.hero-subcopy p { width:94vw; max-width:94vw; }
}

/* Simple centered title stack: AI MAIA first, followed directly by the MYSTERIUM name. */
.hero-center { position:relative; top:auto; left:auto; width:100%; max-width:none; margin:0 auto; padding:0; transform:none !important; }
.hero-title-stage { position:relative; z-index:5; top:auto; left:auto; display:flex; width:min(94vw,1000px); height:auto; min-height:0; margin:0 auto 8px; padding:0 5px; flex-direction:column; align-items:center; justify-content:center; gap:0; transform:none; }
.hero-title-sequence { position:relative !important; inset:auto !important; display:block; width:100%; min-height:0; margin:0 auto; padding:0; overflow:visible; text-align:center; white-space:normal; transform:perspective(1100px) rotateX(4deg) translateZ(4px) !important; }
.hero-title-sequence:before { display:none !important; content:none !important; }
.hero-title-ai { top:auto; width:100%; font-size:clamp(36px,5vw,62px); line-height:1.04; }
.hero-title-brand { top:auto; width:100%; margin-top:2px; font-size:clamp(24px,3.1vw,42px); line-height:1.12; letter-spacing:.01em; }
.hero-title-sequence:after { inset:0; background-size:300% 100%; animation:gold-light-sweep 5.4s linear infinite; filter:drop-shadow(0 0 4px #fff4a8); }
.hero-subcopy { width:94vw; max-width:none; margin:0 auto; text-align:center; }
.hero-subcopy h2,.hero-subcopy p { width:100%; max-width:100%; margin-left:auto; margin-right:auto; text-align:center; }
@media(max-width:760px) {
 .hero-center { width:100%; }
 .hero-title-stage { width:94vw; min-height:0; margin-bottom:6px; }
 .hero-title-ai,.hero-title-brand { top:auto; font-size:clamp(21px,6.4vw,28px); }
 .hero-subcopy { width:94vw; }
}
.hero-title-ai,.hero-title-brand { font-size:clamp(30px,4vw,52px); }
@media(max-width:760px) { .hero-title-ai,.hero-title-brand { font-size:clamp(21px,6.4vw,28px); } }

/* Bring the MYSTERIUM line forward and tilt it toward the viewer. */
.hero-title-brand { position:relative; z-index:7; transform:perspective(900px) rotateX(12deg) translateZ(20px) !important; filter:drop-shadow(0 0 12px #ffd856bb) !important; }

/* Make the second title larger and unmistakable against the warm fountain scene. */
.hero-title-brand { font-size:clamp(34px,4.8vw,60px) !important; letter-spacing:.02em; color:#eafaff; background:linear-gradient(180deg,#ffffff 0%,#baf4ff 18%,#49d4ff 36%,#177ef3 56%,#153ea9 76%,#9cf1ff 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; -webkit-text-stroke:1.15px #ffe7a0; text-shadow:0 1px #fff,0 3px #77e7ff,0 6px #1679d9,0 9px #102d77,0 13px 18px #06143dbb,0 0 22px #4dd8ff; filter:drop-shadow(0 0 13px #49d5ff) drop-shadow(0 5px 8px #081e5870) !important; }
@media(max-width:760px) { .hero-title-brand { font-size:clamp(24px,6.5vw,30px) !important; line-height:1.08; } }

/* Restore the gold MYSTERIUM title and improve only the lower copy with crisp contrast. */
.hero-title-brand { font-size:clamp(30px,4vw,52px) !important; color:#ffe98b; background:linear-gradient(180deg,#fffde0 0%,#ffe375 18%,#fff3b8 31%,#d89825 48%,#fff2ae 57%,#b96c14 75%,#fff0a0 91%,#e9a72d); background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent; -webkit-text-stroke:.75px #71300c; text-shadow:0 1px #fff8c9,0 3px #e5aa35,0 6px #774010,0 10px 18px #1b091188,0 0 20px #ffe079; filter:drop-shadow(0 0 7px #ffd85677) !important; }
.hero-subcopy h2 { color:#fff8dc; font-size:clamp(27px,3.1vw,38px); font-weight:900; -webkit-text-stroke:.8px #43131b; text-shadow:0 1px #fff8dc,0 2px #d79b35,0 4px #71331d,0 7px 12px #1c0b13; background:transparent !important; box-shadow:none !important; filter:none !important; transform:perspective(700px) rotateX(5deg) translateZ(5px); }
.hero-subcopy p { color:#fffdf2; font-size:clamp(22px,2.5vw,30px); font-weight:900; -webkit-text-stroke:.65px #211629; text-shadow:0 1px #fff7dc,0 2px #b3864b,0 4px #463047,0 7px 12px #160c18; background:transparent !important; box-shadow:none !important; filter:none !important; transform:perspective(800px) rotateX(4deg) translateZ(4px); }
@media(max-width:760px) {
 .hero-title-brand { font-size:clamp(21px,6.4vw,28px) !important; }
 .hero-subcopy h2 { font-size:clamp(20px,5.5vw,25px); line-height:1.22; }
 .hero-subcopy p { font-size:clamp(18px,4.7vw,22px); line-height:1.28; }
}

/* Compact introduction, with clear space around the two logo seals. */
.hero-subcopy.hero-introduction { width:min(52vw,720px); max-width:100%; margin:12px auto 0; }
.hero-subcopy.hero-introduction > h2 { width:100%; max-width:100%; margin:4px auto 6px; font-size:clamp(20px,2.2vw,28px); line-height:1.15; }
.hero-subcopy.hero-introduction > p { width:100%; max-width:100%; margin:5px auto; font-size:clamp(14px,1.2vw,17px); line-height:1.3; font-weight:700; -webkit-text-stroke:0; animation:none; transform:none; }
.hero-subcopy.hero-introduction > .hero-introduction-motto { font-size:clamp(14px,1.3vw,18px); font-weight:900; margin-top:7px; }
@media(max-width:760px) {
 .hero-subcopy.hero-introduction { width:88vw; margin-top:0; padding-top:45px; }
 .hero-subcopy.hero-introduction > h2 { font-size:18px; line-height:1.2; }
 .hero-subcopy.hero-introduction > p { padding:0 4px; font-size:14px; line-height:1.3; }
 .hero-subcopy.hero-introduction > .hero-introduction-motto { font-size:14px; }
}

/* Start both titles below the logo row, on desktop and phone. */
.maia-hero { padding-top:215px; }
.hero-center { align-self:start; }
@media(max-width:760px) {
 .maia-hero { padding-top:160px; }
 .hero-subcopy.hero-introduction { padding-top:0; margin-top:10px; }
}

/* Rich gold lettering and dark, readable introduction copy. */
.hero-title-ai,.hero-title-brand {
 color:#e9ad18; background:linear-gradient(180deg,#ffe56b 0%,#ffce24 20%,#f8b900 38%,#b76b08 52%,#ffda38 65%,#d89009 82%,#ffcf32 100%);
 background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent;
 -webkit-text-stroke:1px #66300c;
 text-shadow:0 2px #ffdf59,0 4px #ba700e,0 6px #70350d,0 9px 13px #351b1270;
 filter:drop-shadow(0 0 7px #ffc62999) !important;
}
.hero-subcopy.hero-introduction > h2,.hero-subcopy.hero-introduction > p {
 color:#591429; -webkit-text-fill-color:#591429; -webkit-text-stroke:0;
 text-shadow:0 1px 1px #fff5db,0 0 5px #fff7de;
}

/* Crisp solid lettering: no translucent fill, glints, haze or thick shadows. */
.hero-title-ai,.hero-title-brand {
 color:#efb923 !important; -webkit-text-fill-color:#efb923 !important;
 background:none !important; -webkit-text-stroke:.6px #66300c;
 text-shadow:none !important; filter:none !important;
 animation:none !important; transform:none !important; opacity:1 !important;
}
.hero-title-ai:before,.hero-title-ai:after,.hero-title-brand:before,.hero-title-brand:after {
 content:none !important; display:none !important;
}
.hero-subcopy.hero-introduction > h2,.hero-subcopy.hero-introduction > p {
 text-shadow:none !important; filter:none !important; animation:none !important; transform:none !important;
}

/* Solid gold face with crisp extruded edges for a readable 3D title. */
.hero-title-ai,.hero-title-brand {
 color:#ffd447 !important; -webkit-text-fill-color:#ffd447 !important;
 -webkit-text-stroke:1px #491122;
 text-shadow:0 1px 0 #9b5812,1px 2px 0 #9b5812,2px 3px 0 #81410e,3px 4px 0 #692812,4px 5px 0 #511421,5px 6px 0 #3b1021 !important;
 filter:none !important; transform:perspective(900px) rotateX(7deg) !important;
 font-weight:900; letter-spacing:.025em; line-height:1.2;
}
.hero-title-stage { padding-bottom:8px; }

/* Reference-style title assembly, kept below the original logo row. */
.hero-center .hero-title-art { display:block; width:min(94vw,1100px); max-width:100%; margin:0 auto 12px; padding:0; line-height:0; animation:none !important; transform:none !important; filter:none !important; text-shadow:none !important; }
.hero-center .hero-title-art:before,.hero-center .hero-title-art:after { display:none !important; content:none !important; }
.hero-title-art img { display:block; width:100%; height:auto; object-fit:contain; }

/* Compact optional background music control. */
.music-toggle{position:fixed;top:max(5px,env(safe-area-inset-top));left:max(6px,env(safe-area-inset-left));z-index:1000;min-height:30px;padding:4px 9px;border:1px solid #d4af37;border-radius:16px;background:linear-gradient(140deg,#fff3cc36,#6d321b28 55%,#fff1b32b);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);color:#fff4cf;font-family:inherit;font-size:11px;line-height:20px;cursor:pointer;box-shadow:0 2px 6px #0002}
.music-toggle:focus-visible{outline:2px solid #fff;outline-offset:2px}
.music-toggle[aria-pressed="true"]{border-color:#fff0b5}

.music-toggle{border-color:#ffe59bc9;box-shadow:inset 0 1px #fff8ddaa,0 2px 0 #7b3d1380,0 0 10px #ffc95266;text-shadow:0 1px 3px #2a100d}

/* 002 · Android viewport optimisation · v1 · 2026-10-13.
   Keep scrolling and system UI; reserve only device-reported safe insets. */
html { min-height:100%; }
body { min-height:100vh; min-height:100dvh; padding-bottom:env(safe-area-inset-bottom,0px); }
@media (max-width:760px), (max-width:1024px) and (pointer:coarse) {
 html,body { min-width:0; width:100%; }
 #main,.maia-page { width:100%; max-width:100%; margin:0; }
 .maia-page { min-height:100vh; min-height:100dvh; }
 header { padding-top:max(3px,env(safe-area-inset-top,0px)); padding-left:max(4px,env(safe-area-inset-left,0px)); padding-right:max(4px,env(safe-area-inset-right,0px)); }
 .maia-hero { padding:calc(120px + env(safe-area-inset-top,0px)) max(4px,env(safe-area-inset-right,0px)) 12px max(4px,env(safe-area-inset-left,0px)); min-height:0; }
 .hero-utility { top:calc(4px + env(safe-area-inset-top,0px)); right:max(4px,env(safe-area-inset-right,0px)); }
 .hero-logo { top:calc(46px + env(safe-area-inset-top,0px)); }
 .hero-logo.brand-logo { left:max(3px,env(safe-area-inset-left,0px)); }
 .hero-logo.ngo-logo { right:max(3px,env(safe-area-inset-right,0px)); }
 .hero-center { width:100%; min-width:0; }
 .hero-center .hero-title-art { width:100%; max-width:100%; margin-bottom:6px; }
 .hero-subcopy.hero-introduction { width:100%; max-width:100%; margin-top:4px; padding:0 4px; }
 .hero-subcopy.hero-introduction > h2,.hero-subcopy.hero-introduction > p { max-width:100%; overflow-wrap:break-word; }
 .interface-controls { padding-left:max(4px,env(safe-area-inset-left,0px)); padding-right:max(4px,env(safe-area-inset-right,0px)); }
 .maia-page .container { padding-left:max(4px,env(safe-area-inset-left,0px)); padding-right:max(4px,env(safe-area-inset-right,0px)); }
 .page { width:auto; max-width:100%; margin:4px max(4px,env(safe-area-inset-right,0px)) 10px max(4px,env(safe-area-inset-left,0px)); }
 footer { padding-left:max(6px,env(safe-area-inset-left,0px)); padding-right:max(6px,env(safe-area-inset-right,0px)); }
 .music-toggle { top:calc(4px + env(safe-area-inset-top,0px)); }
}
@media (orientation:landscape) and (max-height:600px) and (max-width:1024px) and (pointer:coarse) {
 .maia-hero { padding-top:calc(108px + env(safe-area-inset-top,0px)); }
 .hero-logo { top:calc(43px + env(safe-area-inset-top,0px)); }
 .hero-logo img { width:58px; height:58px; }
 .hero-center .hero-title-art { width:min(72%,580px); }
 .hero-subcopy.hero-introduction { width:100%; }
 .interface-controls .nav { grid-template-columns:repeat(5,minmax(0,1fr)); }
}

/* Approved homepage content, v9, 13 October 2026. Existing imagery and controls preserved. */
.home-editorial {margin:12px 0;padding:16px;border:1px solid #dfbf75;border-radius:13px;background:linear-gradient(125deg,#fffef9f2,#fff6dfef);}
.home-editorial h2 {margin:0 0 10px;font-size:clamp(22px,2.4vw,30px);line-height:1.2;}
.home-editorial p {line-height:1.55;margin:10px 0;}
.home-editorial .page-grid {margin:14px 0;}
.home-editorial .btn {max-width:100%;white-space:normal;text-align:center;}
.home-motto {font-weight:bold;text-align:center;}
.home-invitation {text-align:center;}
@media(max-width:760px){.home-editorial{padding:12px;margin:9px 0;}.home-editorial .page-grid{grid-template-columns:1fr;gap:9px;}.home-editorial .info{padding:13px;}.home-editorial .info h3{font-size:19px;overflow-wrap:anywhere;}.cards-heading{flex-wrap:wrap;}}

/* 007 – AI MAIA animated assistant button – v1 – 2026-10-13 */
.maia-avatar-button{display:flex;width:min(100%,270px);margin:18px auto;align-items:center;flex-direction:column;gap:5px;background:transparent;border:0;text-align:center;isolation:isolate;}
.maia-avatar-orbit{position:relative;display:block;width:190px;max-width:100%;aspect-ratio:1;}
.maia-avatar-orbit img{position:relative;z-index:2;display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 9px #ffc53b80);animation:maia-living-light 4s ease-in-out infinite;}
.maia-avatar-ring{position:absolute;inset:-4px;border-radius:50%;background:conic-gradient(from 0deg,transparent 5%,#ffc53b 20%,#ff354d 38%,transparent 48%,#42d8ff 65%,#b77dff 82%,transparent 95%);mask:radial-gradient(circle,transparent 62%,#000 64%,#000 68%,transparent 71%);animation:maia-orbit-colors 9s linear infinite;filter:drop-shadow(0 0 5px #ffca45);}
.maia-avatar-button strong{font-size:28px;color:#a56810;text-shadow:0 1px #fff2bf,0 2px #f6cd6e;letter-spacing:.07em;}
.maia-avatar-brand{font-size:14px;color:#572c16;line-height:1.3;}
.maia-avatar-button small{color:#6d4730;font-size:12px;border:1px solid #d8b568;border-radius:20px;padding:3px 10px;background:#fff6dcaa;}
.maia-avatar-button:hover .maia-avatar-orbit img{filter:drop-shadow(0 0 16px #ffc53baa);}
@keyframes maia-orbit-colors{to{transform:rotate(360deg)}}
@keyframes maia-living-light{0%,100%{filter:brightness(1) drop-shadow(0 0 7px #ffc53b70)}50%{filter:brightness(1.13) drop-shadow(0 0 14px #36caff70)}}
@media(max-width:760px){.maia-avatar-orbit{width:160px}.maia-avatar-button strong{font-size:25px}}
@media(prefers-reduced-motion:reduce){.maia-avatar-ring,.maia-avatar-orbit img{animation:none}}

/* 008 – Clear section headings – v1 – 2026-10-13 */
.section-title,.home-editorial h2,.home-editorial h3,.cards-panel h2,.page h1,.page h2,.page .info h3,.maia-avatar-button strong {
 color:#9d1633 !important;-webkit-text-fill-color:#9d1633 !important;
 -webkit-text-stroke:0 !important;text-shadow:none !important;filter:none !important;
 background-image:none !important;background-clip:border-box !important;
 font-family:Arial,Helvetica,sans-serif;font-weight:800;line-height:1.25;
}
.section-title{display:table;max-width:100%;padding:6px 10px;background-color:#fff9ed;border-radius:7px;}
.group-head h3,.account-panel h2,.card h3,.card b{
 color:#fffdf5 !important;-webkit-text-fill-color:#fffdf5 !important;
 -webkit-text-stroke:0 !important;text-shadow:none !important;filter:none !important;
 font-family:Arial,Helvetica,sans-serif;font-weight:700;line-height:1.25;
}

/* 009 – Participation invitation – v1 – 2026-10-13 */
.participation-invitation{display:flex;justify-content:center;margin:20px 0 14px;}
.participation-invitation-button{min-height:44px;padding:10px 24px;color:#fff !important;-webkit-text-fill-color:#fff !important;font-family:Arial,Helvetica,sans-serif;font-size:clamp(17px,4.5vw,22px);font-weight:700;line-height:1.2;text-shadow:0 1px 2px #4d240b;background:linear-gradient(180deg,#b6781b,#89510b) padding-box,linear-gradient(135deg,#fff4c1,#e7b43e,#fff0a4) border-box;border:2px solid transparent;border-radius:999px;box-shadow:inset 0 1px #ffefac77,0 3px 0 #673609,0 5px 12px #6a321d25;}
.participation-invitation-button:hover{background:linear-gradient(180deg,#aa6c10,#794408) padding-box,linear-gradient(135deg,#fff4c1,#e7b43e,#fff0a4) border-box;}

/* 010 – Living right-side flames – v1 – 2026-10-13 */
.maia-flame-motion,.maia-flame-glow{position:absolute;inset:0;z-index:3;pointer-events:none;background:url('assets/ai-maia-emblem-v1.png') center/contain no-repeat;mask-image:linear-gradient(90deg,transparent 0%,transparent 70%,#000 86%);transform-origin:82% 65%;}
.maia-flame-motion{animation:maia-flame-wave 2.6s ease-in-out infinite alternate;opacity:.74;}
.maia-flame-glow{mix-blend-mode:screen;opacity:.25;animation:maia-flame-shimmer 1.7s ease-in-out infinite alternate;}
@keyframes maia-flame-wave{0%{transform:translate(0,0) skewY(0deg) scaleY(1);filter:brightness(1)}30%{transform:translate(1px,-2px) skewY(-1.6deg) scaleY(1.025);filter:brightness(1.12)}65%{transform:translate(-1px,1px) skewY(1.4deg) scaleY(.985);filter:brightness(1.03)}100%{transform:translate(2px,-3px) skewY(-2deg) scaleY(1.04);filter:brightness(1.18)}}
@keyframes maia-flame-shimmer{0%{opacity:.1;transform:translateY(1px);filter:brightness(1.08)}40%{opacity:.29;transform:translateY(-1px);filter:brightness(1.3)}100%{opacity:.17;transform:translateY(-3px);filter:brightness(1.15)}}
@media(prefers-reduced-motion:reduce){.maia-flame-motion,.maia-flame-glow{animation:none;display:none}}

/* 012 – Ecosistem AI MAIA – approved draft v8, test only */
.ecosystem-approved{max-width:900px;margin:auto;}.ecosystem-approved h2{margin-top:30px;padding-top:16px;border-top:1px solid #dbbf7c;}.ecosystem-approved h3{color:#9d1633;font-family:Arial,Helvetica,sans-serif;line-height:1.3;margin:24px 0 8px;overflow-wrap:anywhere;}.ecosystem-approved p{line-height:1.65;margin:10px 0;}.ecosystem-approved .btn{margin:6px 8px 6px 0;max-width:100%;white-space:normal;text-align:center;}