:root { --bg: #04070d; --bg2: #07101b; --panel: #0a1422; --panel2: #0c192a; --text: #f4f8ff; --muted: #9fb0c4; --line: rgba(150,190,255,.14); --blue: #2f9dff; --cyan: #59e2ff; --violet: #9b7cff; --pink: #ff6fcf; --rose: #ff477f; --red: #ff4747; --gold: #ffc14f; --orange: #ff8b3d; --fenom: #5dcfff; --gini: #e267ff; --shadow: 0 28px 90px rgba(0,0,0,.48); --radius: 26px; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0px; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--text); background: radial-gradient(circle at 15% 8%, rgba(20, 111, 255, 0.11), transparent 28%), radial-gradient(circle at 84% 11%, rgba(255, 58, 58, 0.09), transparent 26%), linear-gradient(rgb(3, 6, 11) 0%, rgb(7, 16, 26) 46%, rgb(3, 6, 11) 100%); line-height: 1.55; }
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
.wrap { width: min(1580px, 100% - clamp(28px, 4vw, 72px)); margin-inline: auto; }
.hero .wrap { width: min(1780px, 100% - clamp(20px, 2.6vw, 52px)); }
body { overflow-x: hidden; }
.skip { position: fixed; left: 16px; top: -60px; background: white; color: black; padding: 10px 14px; border-radius: 10px; z-index: 100; }
.skip:focus { top: 16px; }
.site-header { position: sticky; top: 0px; z-index: 50; background: rgba(3, 6, 11, 0.76); backdrop-filter: blur(20px); border-bottom: 1px solid var(--line); }
.nav { height: 76px; display: flex; align-items: center; gap: 26px; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 11px; min-width: max-content; }
.brand img { border-radius: 50%; box-shadow: rgba(83, 170, 255, 0.15) 0px 0px 30px; }
.brand span { display: flex; flex-direction: column; line-height: 1; }
.brand strong { font-size: 17px; letter-spacing: 0.04em; }
.brand small { font-size: 9px; letter-spacing: 0.28em; color: rgb(145, 167, 190); margin-top: 5px; }
.nav-links { display: flex; gap: 24px; margin-left: auto; }
.nav-links a { font-size: 14px; color: rgb(178, 193, 209); }
.nav-links a:hover { color: white; }
.official-bar { border-top: 1px solid rgba(150,190,255,.1); background: rgba(2,5,10,.66); }
.official-links { min-height: 38px; display: flex; align-items: center; justify-content: center; gap: clamp(18px, 3vw, 42px); white-space: nowrap; overflow-x: auto; scrollbar-width: none; }
.official-links::-webkit-scrollbar { display: none; }
.official-links span { color: rgb(102,126,151); font-size: 9px; letter-spacing: .2em; font-weight: 800; }
.official-links a { color: rgb(177,198,219); font-size: 12px; font-weight: 700; transition: color .18s; }
.official-links a:hover { color: white; }
.button { display: inline-flex; align-items: center; justify-content: center; padding: 13px 20px; border-radius: 999px; font-weight: 800; font-size: 14px; color: rgb(5, 8, 13); background: linear-gradient(90deg, rgb(106, 223, 255), rgb(217, 246, 255)); box-shadow: rgba(71, 184, 255, 0.2) 0px 14px 40px; transition: transform 0.18s, box-shadow 0.18s; }
.button:hover { transform: translateY(-2px); box-shadow: rgba(71, 184, 255, 0.3) 0px 16px 50px; }
.button.small { padding: 11px 16px; }
.button.ghost { background: rgba(255, 255, 255, 0.035); color: rgb(228, 237, 247); border: 1px solid var(--line); box-shadow: none; }
.hero { position: relative; padding: 42px 0px 90px; overflow: hidden; }
.hero-halo { position: absolute; width: 800px; height: 800px; border-radius: 50%; background: rgba(39, 119, 255, 0.07); filter: blur(100px); left: 50%; top: -380px; transform: translateX(-50%); pointer-events: none; }
.banner-frame { position: relative; border-radius: 30px; overflow: hidden; border: 1px solid rgba(133, 200, 255, 0.22); background: rgb(2, 5, 10); box-shadow: rgba(0, 0, 0, 0.58) 0px 35px 100px, rgba(61, 142, 255, 0.06) 0px 0px 80px; }
.banner-frame::after { content: ""; position: absolute; inset: 0px; pointer-events: none; border-radius: inherit; box-shadow: rgba(255, 255, 255, 0.043) 0px 0px 0px 1px inset; }
.banner-frame img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; }
.hero-copy { display: grid; grid-template-columns: 1.04fr 0.96fr; gap: clamp(38px, 5vw, 82px); padding: 58px clamp(6px, 1.2vw, 18px) 0px; align-items: end; }
.eyebrow { font-size: 11px; font-weight: 800; letter-spacing: 0.24em; color: rgb(126, 218, 255); text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0px; }
h1 { font-size: clamp(52px, 7vw, 92px); line-height: 0.92; letter-spacing: -0.055em; margin: 18px 0px 0px; }
h1 span { background: linear-gradient(90deg, rgb(249, 252, 255), rgb(158, 232, 255) 55%, rgb(255, 125, 121)) text; color: transparent; }
.hero-lead p { font-size: 18px; color: var(--muted); line-height: 1.75; margin-bottom: 26px; }
.hero-lead .signature-line { color: rgb(228,240,255); font-size: clamp(20px, 2vw, 28px); line-height: 1.3; font-weight: 780; margin-bottom: 12px; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; }
.proofbar { padding: 20px 0; border-block: 1px solid var(--line); background: linear-gradient(180deg,rgba(255,255,255,.02),rgba(3,7,13,.46)); }
.proof-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.proof-card { --proof-accent: var(--cyan); position: relative; min-height: 116px; padding: 24px 26px; overflow: hidden; isolation: isolate; border: 1px solid rgba(121,192,235,.22); border-color: color-mix(in srgb,var(--proof-accent) 23%,transparent); border-radius: 18px; background: linear-gradient(145deg,rgba(18,36,59,.96),rgba(4,10,18,.99)); box-shadow: inset 0 1px 0 rgba(255,255,255,.07), inset 0 -22px 34px rgba(0,0,0,.22), 0 14px 32px rgba(0,0,0,.28); transition: transform .24s ease,border-color .24s ease,box-shadow .24s ease; }
.proof-card:nth-child(2) { --proof-accent: var(--violet); }
.proof-card:nth-child(3) { --proof-accent: var(--orange); }
.proof-card:nth-child(4) { --proof-accent: var(--pink); }
.proof-card::before { content: ""; position: absolute; z-index: -1; inset: 0 18px auto; height: 2px; background: linear-gradient(90deg,transparent,var(--proof-accent),transparent); box-shadow: 0 0 20px color-mix(in srgb,var(--proof-accent) 58%,transparent); }
.proof-card::after { content: ""; position: absolute; z-index: -1; inset: -80% 48% -80% -45%; transform: translateX(-70%) rotate(16deg); background: linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent); transition: transform .55s ease; }
.proof-card:hover { transform: translateY(-4px); border-color: rgba(128,210,255,.42); border-color: color-mix(in srgb,var(--proof-accent) 46%,transparent); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), inset 0 -22px 34px rgba(0,0,0,.2), 0 19px 40px rgba(0,0,0,.38), 0 0 28px color-mix(in srgb,var(--proof-accent) 12%,transparent); }
.proof-card:hover::after { transform: translateX(220%) rotate(16deg); }
.proof-grid b { display: block; font-size: 14px; letter-spacing: 0.1em; color: rgb(232, 241, 255); margin-bottom: 8px; }
.proof-grid span { display: block; font-size: 14px; color: rgb(151, 172, 195); }
.section { padding: 100px 0px; }
.section-head { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: end; margin-bottom: 40px; }
.section-head h2, .article-kicker h2, .social-copy h2, .contact-card h2 { font-size: clamp(38px, 5vw, 64px); line-height: 1.02; letter-spacing: -0.045em; margin: 14px 0px 0px; }
.section-head > p { margin: 0px; color: var(--muted); line-height: 1.78; font-size: 17px; }
.identity-section { background: linear-gradient(transparent, rgba(18,37,62,.26), transparent); }
.identity-grid { display: grid; grid-template-columns: minmax(340px,.9fr) 1.1fr; gap: 28px; align-items: stretch; }
.identity-visual { margin: 0; padding: clamp(14px, 2vw, 24px); border: 1px solid var(--line); border-radius: 30px; background: rgb(4,9,16); box-shadow: var(--shadow); }
.identity-visual img { width: 100%; height: 100%; aspect-ratio: 1; object-fit: contain; border-radius: 20px; }
.identity-copy { display: grid; gap: 16px; }
.identity-fact { padding: clamp(26px,3vw,42px); border: 1px solid var(--line); border-radius: 26px; background: linear-gradient(145deg,rgba(14,31,52,.78),rgba(5,12,21,.95)); }
.identity-fact > span { color: rgb(126,218,255); font-size: 10px; font-weight: 850; letter-spacing: .22em; }
.identity-fact h3 { margin: 10px 0 10px; font-size: clamp(24px,2.4vw,36px); letter-spacing: -.025em; }
.identity-fact p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.72; }
.fenom-accent { border-color: rgba(61,190,255,.24); }
.gini-accent { border-color: rgba(212,74,255,.24); }
.gini-accent > span { color: var(--gini); }
.identity-fact > .identity-name { display: block; font-size: clamp(30px,2.6vw,40px); line-height: 1; letter-spacing: .1em; text-shadow: 0 0 24px currentcolor; }
.identity-fact.fenom-accent h3, .identity-fact.gini-accent h3 { margin-top: 15px; font-size: clamp(23px,1.8vw,30px); }
.genres { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
.genres article { min-height: 230px; padding: 26px; border-radius: 24px; border: 1px solid var(--line); background: linear-gradient(145deg, rgba(14, 31, 52, 0.8), rgba(5, 12, 21, 0.95)); box-shadow: rgba(0, 0, 0, 0.2) 0px 16px 50px; transition: transform 0.18s, border-color 0.18s; }
.genres article:hover { transform: translateY(-4px); border-color: rgba(141, 207, 255, 0.3); }
.genres i { width: 12px; height: 12px; border-radius: 50%; display: block; margin-bottom: 28px; box-shadow: currentcolor 0px 0px 24px; }
.genres h3 { font-size: 19px; margin-bottom: 10px; }
.genres p { font-size: 14px; color: var(--muted); line-height: 1.68; margin: 0px; }
.seven-worlds article:last-child { grid-column: span 2; }
.cyan { color: var(--cyan); background: currentcolor; }
.violet { color: var(--violet); background: currentcolor; }
.pink { color: var(--pink); background: currentcolor; }
.red { color: var(--red); background: currentcolor; }
.gold { color: var(--gold); background: currentcolor; }
.rose { color: var(--rose); background: currentcolor; }
.blue { color: var(--blue); background: currentcolor; }
.orange { color: var(--orange); background: currentcolor; }
.characters-section { position: relative; overflow: hidden; background: radial-gradient(circle at 12% 18%,rgba(98,42,196,.12),transparent 28%), radial-gradient(circle at 88% 46%,rgba(42,155,255,.11),transparent 27%), linear-gradient(180deg,rgba(5,10,18,.96),rgba(7,17,29,.98) 52%,rgba(3,7,13,.98)); border-block: 1px solid var(--line); }
.characters-section::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .22; background-image: linear-gradient(rgba(112,175,230,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(112,175,230,.08) 1px,transparent 1px); background-size: 88px 88px; mask-image: linear-gradient(to bottom,transparent,black 14%,black 86%,transparent); }
.characters-section .wrap { position: relative; }
.characters-head { margin-bottom: clamp(42px,6vw,74px); }
.fenom-name, span.fenom-name, strong.fenom-name, h3.fenom-name { color: var(--fenom); font-weight: 800; }
.gini-name, span.gini-name, strong.gini-name, h3.gini-name { color: var(--gini); font-weight: 800; }
.character-showcase { display: grid; gap: clamp(24px,3.2vw,46px); }
.showcase-row { --character-accent: var(--gini); display: grid; grid-template-columns: minmax(340px,.84fr) minmax(0,1.16fr); min-height: 700px; overflow: hidden; isolation: isolate; border: 1px solid color-mix(in srgb,var(--character-accent) 25%,var(--line)); border-radius: clamp(24px,3vw,36px); background: radial-gradient(circle at 92% 14%,color-mix(in srgb,var(--character-accent) 9%,transparent),transparent 34%),linear-gradient(135deg,rgba(12,27,46,.97),rgba(4,10,18,.99)); box-shadow: 0 30px 90px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.04); }
.showcase-row.fenom-row { --character-accent: var(--fenom); }
.showcase-row.is-reverse { grid-template-columns: minmax(0,1.16fr) minmax(340px,.84fr); }
.showcase-row.is-reverse .showcase-visual { order: 2; }
.showcase-row.is-reverse .showcase-copy { order: 1; }
.showcase-visual { position: relative; min-height: 700px; margin: 0; overflow: hidden; background: #03070d; }
.showcase-visual::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.03),inset 0 -90px 100px rgba(2,5,10,.22); }
.showcase-visual img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .65s cubic-bezier(.2,.7,.2,1),filter .65s ease; }
.showcase-row:hover .showcase-visual img { transform: scale(1.018); filter: saturate(1.04) contrast(1.02); }
.showcase-copy { position: relative; display: flex; flex-direction: column; justify-content: center; padding: clamp(42px,6vw,88px); }
.showcase-copy::before { content: ""; width: 82px; height: 2px; margin-bottom: 28px; background: linear-gradient(90deg,var(--character-accent),transparent); box-shadow: 0 0 22px color-mix(in srgb,var(--character-accent) 60%,transparent); }
.showcase-kicker { display: block; font-size: 12px; line-height: 1.4; font-weight: 850; letter-spacing: .2em; }
.showcase-copy h3 { max-width: 760px; margin: 14px 0 22px; font-size: clamp(40px,4.4vw,68px); line-height: 1.02; letter-spacing: -.045em; }
.showcase-copy p { max-width: 760px; margin: 0; color: rgb(174,194,215); font-size: clamp(17px,1.25vw,20px); line-height: 1.78; }
.fg-pair { margin-top: 24px; padding: 42px clamp(28px, 4vw, 58px); border-radius: 30px; border: 1px solid rgba(129, 203, 255, 0.18); background: radial-gradient(circle at 12% 20%, rgba(48, 151, 255, 0.13), transparent 34%), radial-gradient(circle at 88% 80%, rgba(255, 65, 90, 0.12), transparent 34%), linear-gradient(135deg, rgb(8, 22, 37), rgb(7, 12, 21)); box-shadow: rgba(0, 0, 0, 0.32) 0px 26px 80px; text-align: center; }
.fg-pair h3 { font-size: clamp(34px, 4vw, 58px); letter-spacing: -0.045em; margin: 12px 0px; }
.fg-pair p { max-width: 920px; margin: 0px auto; color: var(--muted); font-size: 17px; line-height: 1.75; }
.identity-pair { display: grid; grid-template-columns: minmax(180px,300px) 1fr; gap: clamp(24px,4vw,60px); align-items: center; text-align: left; }
.identity-pair img { width: 100%; max-height: 220px; object-fit: contain; }
.identity-pair p { margin-inline: 0; }
.character-signature { margin-top: clamp(34px,4vw,54px); }
.fg-pair blockquote { max-width: 920px; margin: 28px auto 0px; padding: 22px 26px; border-block: 1px solid rgba(126, 218, 255, 0.18); font-size: 20px; line-height: 1.6; color: rgb(232, 245, 255); }
.name-origin { margin-top: 16px !important; font-size: 13px !important; color: rgb(113, 134, 154) !important; }
.name-origin a { color: rgb(126, 218, 255); text-decoration: underline; text-underline-offset: 3px; }
.article-layout { display: grid; grid-template-columns: 0.78fr 1.22fr; gap: 90px; }
.article-kicker { position: sticky; top: 115px; align-self: start; }
.rich-article { max-width: 760px; }
.rich-article .intro { font-size: 24px; line-height: 1.55; color: rgb(216, 232, 246); }
.rich-article h3 { font-size: 27px; margin: 46px 0px 10px; letter-spacing: -0.025em; }
.rich-article p { color: var(--muted); font-size: 17px; line-height: 1.82; }
.rich-article blockquote { margin: 48px 0px 0px; padding: 28px 32px; border-left: 3px solid rgb(89, 216, 255); background: rgba(69, 163, 255, 0.055); border-radius: 0px 20px 20px 0px; color: rgb(217, 237, 255); font-size: 20px; line-height: 1.65; }
.distribution { background: rgba(255, 255, 255, 0.01); border-block: 1px solid var(--line); }
.platform-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.platform-grid.five-platforms { grid-template-columns: repeat(5,1fr); }
.platform { --platform-accent: var(--cyan); position: relative; min-height: 230px; padding: 30px 25px 26px; overflow: hidden; isolation: isolate; border: 1px solid color-mix(in srgb,var(--platform-accent) 22%,var(--line)); border-radius: 22px; background: linear-gradient(150deg,rgba(13,29,49,.96),rgb(5,13,23)); box-shadow: inset 0 1px 0 rgba(255,255,255,.04),0 18px 46px rgba(0,0,0,.22); transition: transform .24s ease,border-color .24s ease,box-shadow .24s ease; }
.platform:nth-child(2) { --platform-accent: #4a9dff; }
.platform:nth-child(3) { --platform-accent: #e267ff; }
.platform:nth-child(4) { --platform-accent: #d7e5f4; }
.platform:nth-child(5) { --platform-accent: #8d7dff; }
.platform::before { content: ""; position: absolute; z-index: -1; inset: 0 16px auto; height: 2px; background: linear-gradient(90deg,transparent,var(--platform-accent),transparent); box-shadow: 0 0 22px color-mix(in srgb,var(--platform-accent) 52%,transparent); }
.platform::after { content: "↗"; position: absolute; top: 22px; right: 22px; color: color-mix(in srgb,var(--platform-accent) 80%,white); font-size: 18px; transition: transform .24s ease; }
.platform:hover { transform: translateY(-5px); border-color: color-mix(in srgb,var(--platform-accent) 48%,transparent); box-shadow: inset 0 1px 0 rgba(255,255,255,.07),0 24px 56px rgba(0,0,0,.34),0 0 28px color-mix(in srgb,var(--platform-accent) 9%,transparent); }
.platform:hover::after { transform: translate(3px,-3px); }
.platform span { font-size: 12px; color: color-mix(in srgb,var(--platform-accent) 82%,white); letter-spacing: 0.12em; text-transform: uppercase; }
.platform strong { display: block; font-size: 19px; margin: 13px 0px 8px; }
.platform p { font-size: 14px; color: var(--muted); margin: 0px; line-height: 1.65; }
.social-card, .contact-card { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; padding: 52px; border-radius: 32px; border: 1px solid var(--line); background: radial-gradient(circle at 0px 0px, rgba(45, 135, 255, 0.12), transparent 32%), radial-gradient(circle at 100% 100%, rgba(255, 67, 67, 0.09), transparent 30%), rgb(7, 17, 29); box-shadow: var(--shadow); }
.social-copy p, .contact-card p { color: var(--muted); font-size: 17px; line-height: 1.75; margin: 18px 0px 0px; }
.social-links { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.social-links a { padding: 20px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255, 255, 255, 0.024); }
.social-links b { display: block; font-size: 16px; margin-bottom: 5px; }
.social-links span { font-size: 13px; color: rgb(138, 160, 182); }
.contact-card { grid-template-columns: 220px 1fr; }
.contact-card img { border-radius: 50%; box-shadow: rgba(75, 157, 255, 0.16) 0px 0px 70px; }
.email-link { display: inline-block; margin-top: 22px; font-size: 22px; font-weight: 800; color: rgb(116, 221, 255); }
.website-link { display: inline-block; margin-top: 18px; color: rgb(188,204,222); font-size: 15px; text-decoration: underline; text-underline-offset: 4px; }
footer { padding: 52px 0px; border-top: 1px solid var(--line); background: rgb(2, 5, 10); }
.footer-grid { display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: center; }
.footer-brand { display: flex; align-items: center; gap: 12px; }
.footer-brand img { border-radius: 50%; }
.footer-brand div { display: flex; flex-direction: column; }
.footer-brand span { font-size: 12px; color: rgb(115, 136, 157); }
.footer-links { display: flex; gap: 18px; font-size: 13px; color: rgb(159, 176, 193); }
.copyright { grid-column: 1 / -1; color: rgb(96, 116, 137); font-size: 12px; line-height: 1.6; border-top: 1px solid var(--line); padding-top: 22px; }
@media (min-width: 1700px) {
  .nav { height: 82px; }
  .nav-links { gap: 30px; }
  .hero { padding-top: 34px; }
  .hero-copy { padding-top: 66px; }
  .hero-lead p { font-size: 19px; }
  .genres { gap: 18px; }
  .genres article { min-height: 250px; padding: 30px; }
  .showcase-row, .showcase-visual { min-height: 780px; }
  .platform { padding: 30px; }
}
@media (min-width: 2200px) {
  .wrap { width: min(1840px, 100% - 96px); }
  .hero .wrap { width: min(2080px, 100% - 84px); }
  .section { padding: 118px 0px; }
  .showcase-row, .showcase-visual { min-height: 880px; }
}
@media (max-width: 1000px) {
  .wrap, .hero .wrap { width: calc(100% - 28px); }
  .nav-links { display: none; }
  .hero-copy, .section-head, .article-layout, .social-card, .identity-grid { grid-template-columns: 1fr; gap: 30px; }
  .proof-grid, .genres, .platform-grid, .platform-grid.five-platforms { grid-template-columns: repeat(2, 1fr); }
  .article-kicker { position: static; }
  .showcase-row, .showcase-row.is-reverse { grid-template-columns: minmax(280px,.9fr) minmax(0,1.1fr); min-height: 610px; }
  .showcase-visual { min-height: 610px; }
  .contact-card { grid-template-columns: 170px 1fr; }
}
@media (max-width: 820px) {
  .showcase-row, .showcase-row.is-reverse { grid-template-columns: 1fr; min-height: 0; }
  .showcase-row.is-reverse .showcase-visual, .showcase-row.is-reverse .showcase-copy { order: initial; }
  .showcase-visual { min-height: 0; aspect-ratio: 2 / 3; }
  .showcase-copy { min-height: 330px; }
}
@media (max-width: 680px) {
  .wrap, .hero .wrap { width: calc(100% - 18px); }
  .site-header .button { display: none; }
  .official-links { justify-content: space-between; padding-inline: 10px; gap: 0; overflow: visible; }
  .official-links span { display: none; }
  .official-links a { font-size: 10px; }
  .hero { padding-top: 24px; }
  .banner-frame { border-radius: 18px; }
  .hero-copy { padding-top: 34px; }
  h1 { font-size: 52px; }
  .section { padding: 72px 0px; }
  .proof-grid, .genres, .platform-grid, .social-links { grid-template-columns: 1fr; }
  .platform-grid.five-platforms { grid-template-columns: 1fr; }
  .seven-worlds article:last-child { grid-column: span 1; }
  .proofbar { padding: 14px 0; }
  .proof-card { min-height: 104px; padding: 22px; }
  .showcase-row { border-radius: 22px; }
  .showcase-copy { min-height: 0; padding: 34px 26px 38px; }
  .showcase-copy::before { margin-bottom: 22px; }
  .showcase-copy h3 { font-size: clamp(34px,10vw,46px); }
  .showcase-copy p { font-size: 16px; line-height: 1.72; }
  .social-card, .contact-card { padding: 30px; }
  .contact-card { grid-template-columns: 1fr; }
  .contact-card img { width: 150px; }
  .identity-pair { grid-template-columns: 1fr; text-align: center; }
  .identity-pair img { width: min(260px,100%); margin-inline: auto; }
  .identity-pair p { margin-inline: auto; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-links { flex-wrap: wrap; }
}
@media (max-width: 480px) {
  .nav { height: 66px; }
  .brand img { width: 40px; height: 40px; }
  .brand strong { font-size: 15px; }
  .brand small { font-size: 8px; }
  .hero { padding: 16px 0px 60px; }
  .banner-frame { border-radius: 14px; }
  .hero-copy { padding-top: 28px; }
  h1 { font-size: clamp(42px, 13vw, 54px); }
  .hero-lead p { font-size: 16px; line-height: 1.65; }
  .button { width: 100%; }
  .actions { display: grid; grid-template-columns: 1fr; }
  .fg-pair { padding: 30px 20px; }
  .fg-pair blockquote { font-size: 18px; }
  .email-link { font-size: 18px; word-break: break-word; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .button, .proof-card, .proof-card::after, .genres article, .platform, .platform::after, .showcase-visual img { transition: none; }
  .showcase-row:hover .showcase-visual img { transform: none; }
}
.contact-emails { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 22px; }
.contact-emails .email-link { margin-top: 0px; }
.secondary-email { font-size: 16px; color: rgb(159, 176, 196); font-weight: 650; }
.legal-page { min-height: 100vh; }
.legal-header { border-bottom: 1px solid var(--line); background: rgba(3,6,11,.88); }
.legal-nav { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.legal-nav .brand img { width: 46px; height: 46px; object-fit: contain; }
.legal-main { padding: 80px 0 110px; }
.legal-article { max-width: 920px; }
.legal-article h1, .not-found h1 { font-size: clamp(48px,7vw,82px); line-height: .98; letter-spacing: -.05em; margin: 16px 0 28px; }
.legal-article .lead { font-size: 21px; color: rgb(211,226,240); line-height: 1.65; }
.legal-article h2 { font-size: 27px; letter-spacing: -.025em; margin: 48px 0 10px; }
.legal-article p { color: var(--muted); font-size: 17px; line-height: 1.82; }
.legal-article a { color: rgb(116,221,255); text-decoration: underline; text-underline-offset: 4px; }
.legal-updated { margin-top: 54px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 14px !important; }
.legal-footer { padding: 34px 0; }
.legal-footer .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.legal-footer p { margin: 0; color: rgb(115,136,157); font-size: 13px; }
.legal-footer nav { display: flex; flex-wrap: wrap; gap: 18px; color: rgb(159,176,193); font-size: 13px; }
.not-found { min-height: 100vh; width: min(760px,calc(100% - 36px)); margin: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 70px 0; }
.not-found img { width: min(320px,70vw); max-height: 220px; object-fit: contain; margin-bottom: 24px; }
.not-found h1 em { font-style: normal; background: linear-gradient(90deg,var(--cyan),var(--pink)) text; color: transparent; }
.not-found > p:not(.eyebrow) { max-width: 620px; color: var(--muted); font-size: 17px; line-height: 1.7; }
.not-found .button { margin-top: 16px; }
@media (max-width: 480px) {
  .contact-emails .email-link { font-size: 17px; word-break: break-word; }
  .secondary-email { font-size: 15px !important; }
  .legal-nav { min-height: 68px; }
  .legal-nav .button { display: inline-flex; width: auto; }
  .legal-main { padding: 58px 0 80px; }
  .legal-footer .wrap { align-items: flex-start; flex-direction: column; }
}

/* ==========================================================================\n   CHARACTER SHOWCASE V2 — ORIGINAL LOCKED ASSET PRESENTATION\n   Character source files are displayed unchanged. Motion is applied only to\n   surrounding frames/background layers; no filter, redraw, or image transform.\n   ========================================================================== */
.character-showcase-v2 {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: clamp(22px,3vw,38px);
}
.character-card-v2 {
  --card-accent: var(--fenom);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(18px,2.2vw,26px);
  border: 1px solid color-mix(in srgb,var(--card-accent) 32%,rgba(150,190,255,.15));
  border-radius: clamp(24px,2.7vw,34px);
  background:
    radial-gradient(circle at 50% 8%,color-mix(in srgb,var(--card-accent) 12%,transparent),transparent 34%),
    linear-gradient(150deg,rgba(9,19,34,.98),rgba(3,8,15,.995));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 28px 75px rgba(0,0,0,.38),
    0 0 34px color-mix(in srgb,var(--card-accent) 8%,transparent);
}
.gini-card-v2 { --card-accent: var(--gini); }
.duo-card-v2 {
  --card-accent: #8b9cff;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0,1.48fr) minmax(280px,.52fr);
  gap: clamp(26px,4vw,54px);
  align-items: center;
  padding: clamp(22px,3vw,38px);
}
.character-card-v2::before {
  content: "";
  position: absolute;
  z-index: -3;
  inset: 0;
  opacity: .38;
  background-image:
    linear-gradient(rgba(116,179,255,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(116,179,255,.07) 1px,transparent 1px);
  background-size: 54px 54px;
  animation: fgGridDrift 18s linear infinite;
}
.character-card-v2::after {
  content: "";
  position: absolute;
  z-index: -2;
  inset: -45%;
  background: conic-gradient(from 0deg,transparent 0 28%,color-mix(in srgb,var(--card-accent) 22%,transparent) 34%,transparent 42% 68%,color-mix(in srgb,var(--card-accent) 14%,transparent) 74%,transparent 82%);
  filter: blur(26px);
  animation: fgAmbientSweep 16s linear infinite;
}
.ambient-orbit {
  position: absolute;
  z-index: -1;
  width: min(72vw,520px);
  aspect-ratio: 1;
  left: 50%;
  top: 34%;
  transform: translate(-50%,-50%);
  border: 1px solid color-mix(in srgb,var(--card-accent) 32%,transparent);
  border-radius: 50%;
  box-shadow:
    0 0 38px color-mix(in srgb,var(--card-accent) 16%,transparent),
    inset 0 0 42px color-mix(in srgb,var(--card-accent) 9%,transparent);
  animation: fgOrbitPulse 5.6s ease-in-out infinite;
  pointer-events: none;
}
.duo-card-v2 .ambient-orbit {
  left: 31%;
  top: 50%;
  width: min(58vw,650px);
}
.ambient-particles {
  position: absolute;
  z-index: -1;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  left: 13%;
  top: 18%;
  background: color-mix(in srgb,var(--card-accent) 80%,white);
  box-shadow:
    78px 42px 0 color-mix(in srgb,var(--card-accent) 62%,transparent),
    226px 9px 0 color-mix(in srgb,var(--card-accent) 72%,transparent),
    302px 93px 0 color-mix(in srgb,var(--card-accent) 48%,transparent),
    145px 248px 0 color-mix(in srgb,var(--card-accent) 68%,transparent),
    34px 326px 0 color-mix(in srgb,var(--card-accent) 42%,transparent),
    335px 384px 0 color-mix(in srgb,var(--card-accent) 55%,transparent);
  opacity: .72;
  animation: fgParticlesFloat 7.5s ease-in-out infinite alternate;
  pointer-events: none;
}
.character-stage-v2 {
  position: relative;
  z-index: 2;
  width: min(100%,470px);
  aspect-ratio: 9 / 16;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid color-mix(in srgb,var(--card-accent) 42%,rgba(255,255,255,.12));
  border-radius: clamp(19px,2vw,28px);
  background: #222831;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.035) inset,
    0 22px 55px rgba(0,0,0,.42),
    0 0 34px color-mix(in srgb,var(--card-accent) 12%,transparent);
}
.character-stage-v2::before {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.045),
    inset 0 -40px 65px rgba(1,4,9,.12);
}
.locked-character-v2 {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0%;
  filter: none !important;
  transform: none !important;
  transition: none !important;
}
.character-card-copy-v2 {
  position: relative;
  z-index: 4;
  padding: clamp(24px,3vw,36px) clamp(4px,1vw,12px) clamp(4px,1vw,12px);
}
.character-card-copy-v2::before {
  content: "";
  display: block;
  width: 74px;
  height: 2px;
  margin-bottom: 20px;
  background: linear-gradient(90deg,var(--card-accent),transparent);
  box-shadow: 0 0 20px color-mix(in srgb,var(--card-accent) 54%,transparent);
}
.character-card-copy-v2 h3 {
  margin: 10px 0 14px;
  font-size: clamp(31px,3vw,47px);
  line-height: 1.04;
  letter-spacing: -.04em;
}
.character-card-copy-v2 p {
  margin: 0;
  color: rgb(174,194,215);
  font-size: clamp(16px,1.18vw,19px);
  line-height: 1.72;
}
.duo-stage-v2 {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: clamp(12px,1.6vw,22px);
  align-items: start;
}
.duo-person-v2 { width: 100%; }
.duo-copy-v2 { padding: 12px 4px; }
.duo-copy-v2 h3 { font-size: clamp(38px,4vw,60px); }

@keyframes fgGridDrift {
  from { background-position: 0 0,0 0; }
  to { background-position: 54px 54px,54px 54px; }
}
@keyframes fgAmbientSweep {
  to { transform: rotate(360deg); }
}
@keyframes fgOrbitPulse {
  0%,100% { opacity:.42; transform: translate(-50%,-50%) scale(.98); }
  50% { opacity:.82; transform: translate(-50%,-50%) scale(1.04); }
}
@keyframes fgParticlesFloat {
  from { transform: translate3d(0,0,0); opacity:.42; }
  to { transform: translate3d(16px,-24px,0); opacity:.88; }
}

@media (max-width: 900px) {
  .character-showcase-v2 { grid-template-columns: 1fr; }
  .duo-card-v2 { grid-column: auto; grid-template-columns: 1fr; }
  .duo-stage-v2 { max-width: 720px; margin: 0 auto; }
  .duo-copy-v2 { padding-top: 24px; }
}
@media (max-width: 620px) {
  .character-card-v2, .duo-card-v2 { padding: 16px; border-radius: 22px; }
  .duo-stage-v2 { gap: 8px; }
  .character-card-copy-v2 { padding: 24px 2px 4px; }
  .character-card-copy-v2 h3 { font-size: clamp(30px,9vw,42px); }
}
@media (prefers-reduced-motion: reduce) {
  .character-card-v2::before,
  .character-card-v2::after,
  .ambient-orbit,
  .ambient-particles { animation: none !important; }
}


/* =========================================================
   FictiGen Website ULTRA FINAL 3
   Owner-approved Fenom/Gini portraits + direct master-banner crops.
   No generative redraw is performed by this website layer.
   ========================================================= */
.approved-portrait-stage-v3 {
  aspect-ratio: 2 / 3;
  background: #050815;
}
.approved-character-v3 {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  filter: none !important;
  transform: none !important;
  transition: none !important;
}
.banner-pair-v3 {
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: clamp(12px,1.6vw,22px);
  width: 100%;
}
.banner-slice-v3 {
  position: relative;
  min-height: clamp(260px,31vw,430px);
  margin: 0;
  overflow: hidden;
  border-radius: clamp(19px,2vw,28px);
  border: 1px solid rgba(136,169,255,.26);
  background-image: url("fictigen-banner.webp");
  background-repeat: no-repeat;
  background-size: 185% auto;
  background-color: #040714;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.04),
    0 22px 55px rgba(0,0,0,.42),
    0 0 34px rgba(82,113,255,.10);
}
.fenom-banner-slice-v3 {
  background-position: left 34%;
}
.gini-banner-slice-v3 {
  background-position: right 34%;
  border-color: rgba(195,107,255,.28);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.04),
    0 22px 55px rgba(0,0,0,.42),
    0 0 34px rgba(177,86,255,.11);
}
.banner-slice-v3::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  box-shadow: inset 0 -55px 90px rgba(0,0,0,.12);
}
@media (max-width: 900px) {
  .banner-pair-v3 { grid-template-columns: 1fr; max-width: 760px; margin: 0 auto; }
  .banner-slice-v3 { min-height: clamp(250px,56vw,430px); background-size: 185% auto; }
}


/* =========================================================
   FictiGen Website ULTRA FINAL 4
   Uses the 3 user-selected high-resolution showcase images.
   ========================================================= */
.character-showcase-ultra4 {
  align-items: start;
}
.ultra4-poster-card {
  display: flex;
  flex-direction: column;
}
.ultra4-poster-stage,
.ultra4-duo-stage {
  position: relative;
  z-index: 2;
  width: min(100%, 980px);
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid color-mix(in srgb,var(--card-accent) 42%,rgba(255,255,255,.12));
  border-radius: clamp(19px,2vw,28px);
  background: #070b14;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.035) inset,
    0 22px 55px rgba(0,0,0,.42),
    0 0 34px color-mix(in srgb,var(--card-accent) 12%,transparent);
}
.ultra4-poster-stage::before,
.ultra4-duo-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.045);
}
.ultra4-poster-image,
.ultra4-duo-image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: none !important;
  transform: none !important;
  transition: none !important;
}
.ultra4-duo-card {
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, .55fr);
}
.ultra4-copy {
  padding-top: clamp(22px, 2.6vw, 30px);
}
@media (max-width: 900px) {
  .ultra4-duo-card { grid-template-columns: 1fr; }
  .ultra4-duo-stage { max-width: 940px; }
}
/* ===== FICTIGEN FINAL MENU FIX ===== */

.nav-links {
  gap: 10px;
}

.nav-links a {
  color: #eef8ff !important;
  font-weight: 700;
  padding: 9px 13px;
  border-radius: 11px;
  border: 1px solid transparent;
  transition: all .2s ease;
}

.nav-links a:hover,
.nav-links a:focus {
  color: #ffffff !important;
  background: linear-gradient(
    135deg,
    rgba(63, 198, 255, .16),
    rgba(190, 88, 255, .15)
  );
  border-color: rgba(112, 205, 255, .42);
  box-shadow:
    0 0 16px rgba(62, 198, 255, .18),
    0 0 24px rgba(182, 83, 255, .10);
  text-shadow: 0 0 10px rgba(130, 215, 255, .45);
  transform: translateY(-1px);
  outline: none;
}

.nav-links a:active {
  transform: scale(.97);
}

/* Official external-link buttons */

.official-links {
  gap: 8px;
}

.official-links > span {
  color: #a8bed4 !important;
  font-weight: 800;
}

.official-links a {
  color: #edf8ff !important;
  font-weight: 700;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid rgba(123, 190, 235, .25);
  background: rgba(255, 255, 255, .035);
  transition: all .2s ease;
}

.official-links a:hover,
.official-links a:focus {
  color: #ffffff !important;
  background: linear-gradient(
    135deg,
    rgba(51, 200, 255, .20),
    rgba(190, 78, 255, .18)
  );
  border-color: rgba(113, 207, 255, .55);
  box-shadow:
    0 0 16px rgba(52, 196, 255, .18),
    inset 0 1px 0 rgba(255,255,255,.08);
  transform: translateY(-1px);
  outline: none;
}

.official-links a:active {
  transform: scale(.96);
}
/* =========================================================
   FICTIGEN PROFESSIONAL HEADER — FINAL LOCK
   ========================================================= */

.pro-header{
  position:sticky;
  top:0;
  z-index:1000;
  background:rgba(3,7,14,.95);
  border-bottom:1px solid rgba(120,190,255,.18);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  box-shadow:0 10px 35px rgba(0,0,0,.28);
}

.pro-nav{
  min-height:78px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:28px;
}

.pro-brand{
  min-width:max-content;
}

.pro-nav-links{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:5px;
  margin:0;
}

.pro-nav-links a{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:9px 12px;
  border:1px solid transparent;
  border-radius:11px;
  color:#edf8ff !important;
  font-size:14px;
  font-weight:700;
  white-space:nowrap;
  transition:all .2s ease;
}

.pro-nav-links a::after{
  content:"";
  position:absolute;
  left:18%;
  right:18%;
  bottom:4px;
  height:2px;
  border-radius:99px;
  background:linear-gradient(90deg,#4edcff,#c76cff);
  opacity:0;
  transform:scaleX(.25);
  transition:all .2s ease;
  box-shadow:0 0 12px rgba(78,220,255,.6);
}

.pro-nav-links a:hover,
.pro-nav-links a:focus-visible{
  color:#fff !important;
  background:linear-gradient(
    135deg,
    rgba(58,198,255,.16),
    rgba(193,86,255,.15)
  );
  border-color:rgba(115,207,255,.40);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 0 20px rgba(54,194,255,.15);
  transform:translateY(-1px);
  outline:none;
}

.pro-nav-links a:hover::after,
.pro-nav-links a:focus-visible::after{
  opacity:1;
  transform:scaleX(1);
}

.pro-nav-links a:active{
  transform:scale(.96);
}

.pro-nav-actions{
  display:flex;
  align-items:center;
  gap:10px;
  white-space:nowrap;
}

/* OFFICIAL LINKS DROPDOWN */

.official-dropdown{
  position:relative;
}

.official-dropdown summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:7px;
  min-height:42px;
  padding:9px 14px;
  border-radius:12px;
  border:1px solid rgba(120,190,235,.28);
  background:rgba(255,255,255,.035);
  color:#edf8ff;
  font-size:14px;
  font-weight:750;
  transition:all .2s ease;
}

.official-dropdown summary::-webkit-details-marker{
  display:none;
}

.official-dropdown summary:hover,
.official-dropdown[open] summary{
  color:#fff;
  border-color:rgba(113,207,255,.55);
  background:linear-gradient(
    135deg,
    rgba(55,198,255,.18),
    rgba(190,80,255,.16)
  );
  box-shadow:0 0 18px rgba(55,195,255,.18);
}

.official-dropdown-menu{
  display:none;
  position:absolute;
  top:calc(100% + 9px);
  right:0;
  width:190px;
  padding:8px;
  border-radius:14px;
  border:1px solid rgba(130,190,235,.25);
  background:rgba(5,10,19,.99);
  box-shadow:0 20px 50px rgba(0,0,0,.50);
}

.official-dropdown[open] .official-dropdown-menu,
.official-dropdown:hover .official-dropdown-menu{
  display:block;
}

.official-dropdown-menu a{
  display:block;
  padding:10px 12px;
  border-radius:9px;
  color:#eaf6ff !important;
  font-size:14px;
  font-weight:700;
  transition:all .18s ease;
}

.official-dropdown-menu a:hover{
  color:#fff !important;
  background:linear-gradient(
    90deg,
    rgba(55,199,255,.18),
    rgba(191,82,255,.16)
  );
  padding-left:16px;
}

.pro-youtube{
  min-height:44px;
  padding:11px 18px !important;
}

/* RESPONSIVE */

@media(max-width:1200px){
  .pro-nav{
    grid-template-columns:auto auto;
    gap:15px;
    padding-top:8px;
  }

  .pro-nav-actions{
    justify-self:end;
  }

  .pro-nav-links{
    display:flex !important;
    grid-column:1 / -1;
    width:100%;
    justify-content:flex-start;
    overflow-x:auto;
    padding-bottom:9px;
  }
}

@media(max-width:680px){
  .pro-nav{
    display:flex;
    flex-wrap:wrap;
    min-height:auto;
    padding:10px 0;
  }

  .pro-brand{
    margin-right:auto;
  }

  .pro-nav-actions{
    width:100%;
    order:2;
    justify-content:space-between;
  }

  .pro-nav-links{
    display:flex !important;
    width:100%;
    order:3;
    overflow-x:auto;
  }

  .pro-youtube{
    display:inline-flex !important;
  }
}

/* =========================================================
   FICTIGEN PROFESSIONAL HEADER V2 — FINAL LOCK
   ========================================================= */

.pro-header{
  position:sticky;
  top:0;
  z-index:1000;
  background:rgba(3,7,14,.96);
  border-bottom:1px solid rgba(121,191,240,.20);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  box-shadow:0 12px 34px rgba(0,0,0,.30);
}

.pro-nav{
  min-height:82px;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto auto;
  align-items:center;
  gap:12px;
}

/* LEFT BRAND — ORIGINAL LOOK */
.pro-brand{
  min-width:max-content;
  margin-right:4px;
}

/* =========================
   MAIN NAVIGATION
   ========================= */

.pro-nav-links{
  display:flex !important;
  align-items:center;
  justify-content:flex-start;
  gap:6px;
  min-width:0;
  margin:0;
}

.pro-nav-links a{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:43px;
  padding:9px 13px;
  border-radius:11px;

  color:#f2f8ff !important;
  font-size:15px;
  font-weight:760;
  letter-spacing:.005em;
  white-space:nowrap;

  border:1px solid rgba(126,195,238,.28);

  background:
    linear-gradient(180deg,
      rgba(255,255,255,.075),
      rgba(74,125,170,.045));

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -1px 0 rgba(0,0,0,.35),
    0 5px 14px rgba(0,0,0,.18),
    0 0 12px rgba(70,183,255,.055);

  text-shadow:
    0 1px 0 rgba(0,0,0,.45),
    0 0 9px rgba(113,209,255,.16);

  transition:
    color .20s ease,
    border-color .20s ease,
    background .20s ease,
    box-shadow .20s ease,
    transform .20s ease;
}

/* Permanent illuminated lower reflection */
.pro-nav-links a::after{
  content:"";
  position:absolute;
  left:17%;
  right:17%;
  bottom:4px;
  height:2px;
  border-radius:999px;
  z-index:-1;

  background:linear-gradient(90deg,#4cdcff,#c66cff);
  opacity:.48;

  box-shadow:
    0 0 8px rgba(76,220,255,.35),
    0 0 10px rgba(198,108,255,.22);

  transition:
    opacity .20s ease,
    left .20s ease,
    right .20s ease,
    box-shadow .20s ease;
}

/* Moving light reflection on hover */
.pro-nav-links a::before{
  content:"";
  position:absolute;
  z-index:-1;
  top:-70%;
  bottom:-70%;
  width:34%;
  left:-55%;

  transform:rotate(18deg);

  background:linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.24),
    transparent
  );

  transition:left .48s ease;
}

.pro-nav-links a:hover,
.pro-nav-links a:focus-visible{
  color:#ffffff !important;

  border-color:rgba(103,214,255,.68);

  background:
    linear-gradient(135deg,
      rgba(50,198,255,.20),
      rgba(187,84,255,.18));

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -1px 0 rgba(0,0,0,.28),
    0 7px 18px rgba(0,0,0,.26),
    0 0 18px rgba(64,199,255,.20),
    0 0 25px rgba(185,83,255,.10);

  text-shadow:
    0 0 10px rgba(135,222,255,.55);

  transform:translateY(-1px);
  outline:none;
}

.pro-nav-links a:hover::before,
.pro-nav-links a:focus-visible::before{
  left:125%;
}

.pro-nav-links a:hover::after,
.pro-nav-links a:focus-visible::after{
  left:10%;
  right:10%;
  opacity:1;

  box-shadow:
    0 0 12px rgba(76,220,255,.75),
    0 0 16px rgba(198,108,255,.48);
}

.pro-nav-links a:active{
  transform:translateY(0) scale(.97);
}

/* =========================
   OFFICIAL LINKS — SMALLER
   ========================= */

.official-inline{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:5px;
  white-space:nowrap;
}

.official-inline-label{
  margin-right:2px;
  color:#7892aa;
  font-size:8px;
  font-weight:850;
  letter-spacing:.16em;
}

.official-inline a{
  position:relative;
  overflow:hidden;
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-height:34px;
  padding:6px 9px;
  border-radius:9px;

  color:#dcecff !important;
  font-size:11.5px;
  font-weight:720;

  border:1px solid rgba(126,183,226,.22);

  background:
    linear-gradient(180deg,
      rgba(255,255,255,.055),
      rgba(255,255,255,.018));

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 4px 12px rgba(0,0,0,.15),
    0 0 8px rgba(80,180,255,.04);

  transition:all .18s ease;
}

.official-inline a::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:-55%;
  width:34%;

  transform:skewX(-18deg);

  background:linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.22),
    transparent
  );

  transition:left .42s ease;
}

.official-inline a:hover,
.official-inline a:focus-visible{
  color:#ffffff !important;

  border-color:rgba(107,211,255,.56);

  background:
    linear-gradient(135deg,
      rgba(55,196,255,.17),
      rgba(188,80,255,.14));

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 5px 14px rgba(0,0,0,.23),
    0 0 15px rgba(59,193,255,.16);

  transform:translateY(-1px);
  outline:none;
}

.official-inline a:hover::before,
.official-inline a:focus-visible::before{
  left:125%;
}

.official-inline a:active{
  transform:scale(.96);
}

/* =========================
   WATCH ON YOUTUBE CTA
   ========================= */

.pro-youtube{
  min-height:44px;
  padding:11px 17px !important;
  white-space:nowrap;
  font-size:13px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.40),
    0 8px 24px rgba(61,192,255,.20);
}

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

@media(max-width:1550px){

  .pro-nav{
    gap:9px;
  }

  .pro-nav-links{
    gap:4px;
  }

  .pro-nav-links a{
    padding:8px 10px;
    font-size:13.5px;
  }

  .official-inline a{
    padding:6px 7px;
    font-size:10.5px;
  }

  .official-inline-label{
    display:none;
  }

  .pro-youtube{
    padding-inline:14px !important;
    font-size:12px !important;
  }
}

@media(max-width:1240px){

  .pro-nav{
    grid-template-columns:auto 1fr auto;
    min-height:auto;
    padding:9px 0;
    row-gap:8px;
  }

  .pro-nav-links{
    overflow-x:auto;
    scrollbar-width:none;
  }

  .pro-nav-links::-webkit-scrollbar{
    display:none;
  }

  .official-inline{
    grid-column:2 / 4;
    justify-content:flex-end;
    overflow-x:auto;
    scrollbar-width:none;
  }

  .official-inline::-webkit-scrollbar{
    display:none;
  }
}

@media(max-width:820px){

  .pro-nav{
    grid-template-columns:auto 1fr;
  }

  .pro-youtube{
    justify-self:end;
  }

  .pro-nav-links{
    grid-column:1 / -1;
    width:100%;
  }

  .official-inline{
    grid-column:1 / -1;
    width:100%;
    justify-content:flex-start;
  }

  .pro-nav-links a{
    font-size:13px;
  }
}

@media(max-width:560px){

  .pro-brand img{
    width:40px;
    height:40px;
  }

  .pro-youtube{
    min-height:39px;
    padding:9px 12px !important;
    font-size:11px !important;
  }

  .pro-nav-links a{
    min-height:39px;
    padding:8px 10px;
    font-size:12.5px;
  }

  .official-inline a{
    min-height:32px;
    font-size:10.5px;
  }
}

@media(prefers-reduced-motion:reduce){

  .pro-nav-links a,
  .pro-nav-links a::before,
  .pro-nav-links a::after,
  .official-inline a,
  .official-inline a::before{
    transition:none !important;
  }
}

/* =========================================================
   FICTIGEN FINAL LOCK
   FENOM + GINI EQUAL RESPONSIVE DISPLAY SIZE
   DISPLAY SIZE ONLY — ORIGINAL IMAGES UNTOUCHED
   ========================================================= */

/* Both posters always use exactly the same visible stage size */
.ultra4-poster-stage,
.fenom-card-v2 .ultra4-poster-stage,
.gini-card-v2 .ultra4-poster-stage {
  width: min(100%, 460px);
  height: clamp(480px, 56vh, 680px);
  max-height: 680px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin-left: auto;
  margin-right: auto;
}

/* Preserve 100% of each original image.
   No crop, no zoom, no image modification. */
.ultra4-poster-image,
.fenom-card-v2 .ultra4-poster-image,
.gini-card-v2 .ultra4-poster-image {
  width: 100% !important;
  height: 100% !important;

  max-width: 100%;
  max-height: 100%;

  object-fit: contain !important;
  object-position: center center !important;

  filter: none !important;
  transform: none !important;
  transition: none !important;
}

/* Normal desktop / laptop */
@media (max-width: 1280px) {
  .ultra4-poster-stage,
  .fenom-card-v2 .ultra4-poster-stage,
  .gini-card-v2 .ultra4-poster-stage {
    width: min(100%, 430px);
    height: clamp(450px, 55vh, 600px);
  }
}

/* Tablet */
@media (max-width: 900px) {
  .ultra4-poster-stage,
  .fenom-card-v2 .ultra4-poster-stage,
  .gini-card-v2 .ultra4-poster-stage {
    width: min(100%, 410px);
    height: min(64vh, 560px);
  }
}

/* Mobile */
@media (max-width: 620px) {
  .ultra4-poster-stage,
  .fenom-card-v2 .ultra4-poster-stage,
  .gini-card-v2 .ultra4-poster-stage {
    width: min(100%, 360px);
    height: min(68vh, 500px);
  }
}

/* Small mobile */
@media (max-width: 420px) {
  .ultra4-poster-stage,
  .fenom-card-v2 .ultra4-poster-stage,
  .gini-card-v2 .ultra4-poster-stage {
    width: min(100%, 330px);
    height: min(66vh, 460px);
  }
}
/* =========================================================
   FICTIGEN FINAL CHARACTER SIZE — +30%
   DISPLAY SIZE ONLY — ORIGINAL IMAGES UNTOUCHED
   ========================================================= */

.ultra4-poster-stage,
.fenom-card-v2 .ultra4-poster-stage,
.gini-card-v2 .ultra4-poster-stage {
  width: min(100%, 600px) !important;
  height: clamp(620px, 70vh, 820px) !important;
  max-height: 820px !important;

  display: flex;
  align-items: center;
  justify-content: center;

  margin-left: auto;
  margin-right: auto;
}

.ultra4-poster-image,
.fenom-card-v2 .ultra4-poster-image,
.gini-card-v2 .ultra4-poster-image {
  width: 100% !important;
  height: 100% !important;

  max-width: 100%;
  max-height: 100%;

  object-fit: contain !important;
  object-position: center center !important;

  filter: none !important;
  transform: none !important;
  transition: none !important;
}

/* Laptop / smaller desktop */
@media (max-width: 1280px) {
  .ultra4-poster-stage,
  .fenom-card-v2 .ultra4-poster-stage,
  .gini-card-v2 .ultra4-poster-stage {
    width: min(100%, 550px) !important;
    height: clamp(560px, 66vh, 720px) !important;
  }
}

/* Tablet */
@media (max-width: 900px) {
  .ultra4-poster-stage,
  .fenom-card-v2 .ultra4-poster-stage,
  .gini-card-v2 .ultra4-poster-stage {
    width: min(100%, 500px) !important;
    height: min(68vh, 650px) !important;
  }
}

/* Mobile */
@media (max-width: 620px) {
  .ultra4-poster-stage,
  .fenom-card-v2 .ultra4-poster-stage,
  .gini-card-v2 .ultra4-poster-stage {
    width: min(100%, 420px) !important;
    height: min(68vh, 560px) !important;
  }
}

/* =========================================================
   FICTIGEN FINAL VISUAL SIZE LOCK
   +20% DESKTOP CHARACTER DISPLAY
   + BANNER EDGE FILL
   CSS PRESENTATION ONLY — SOURCE IMAGES UNTOUCHED
   ========================================================= */


/* ---------------------------------------------------------
   1. FENOM + GINI — SAME SIZE, ABOUT +20% ON LARGE DESKTOP
   --------------------------------------------------------- */

.ultra4-poster-stage,
.fenom-card-v2 .ultra4-poster-stage,
.gini-card-v2 .ultra4-poster-stage {
  width: min(100%, 720px) !important;

  /* exactly increased from previous desktop sizing */
  height: clamp(744px, 84vh, 984px) !important;
  max-height: 984px !important;

  display: flex;
  align-items: center;
  justify-content: center;

  margin-left: auto;
  margin-right: auto;
}

.ultra4-poster-image,
.fenom-card-v2 .ultra4-poster-image,
.gini-card-v2 .ultra4-poster-image {
  width: 100% !important;
  height: 100% !important;

  max-width: 100%;
  max-height: 100%;

  object-fit: contain !important;
  object-position: center center !important;

  /* locked originals remain completely untouched */
  filter: none !important;
  transform: none !important;
  transition: none !important;
}


/* Normal laptop / smaller desktop:
   slightly reduced so layout remains responsive */

@media (max-width: 1280px) {
  .ultra4-poster-stage,
  .fenom-card-v2 .ultra4-poster-stage,
  .gini-card-v2 .ultra4-poster-stage {
    width: min(100%, 590px) !important;
    height: clamp(600px, 70vh, 760px) !important;
    max-height: 760px !important;
  }
}


/* Tablet */

@media (max-width: 900px) {
  .ultra4-poster-stage,
  .fenom-card-v2 .ultra4-poster-stage,
  .gini-card-v2 .ultra4-poster-stage {
    width: min(100%, 500px) !important;
    height: min(70vh, 650px) !important;
  }
}


/* Mobile */

@media (max-width: 620px) {
  .ultra4-poster-stage,
  .fenom-card-v2 .ultra4-poster-stage,
  .gini-card-v2 .ultra4-poster-stage {
    width: min(100%, 420px) !important;
    height: min(68vh, 560px) !important;
  }
}


/* ---------------------------------------------------------
   2. MAIN TOP BANNER — FILL SMALL BLACK TOP/SIDE GAPS
   No banner-image editing. Presentation crop only.
   --------------------------------------------------------- */

.banner-frame {
  overflow: hidden !important;
}

.banner-frame picture {
  display: block;
  overflow: hidden;
}

.banner-frame img {
  width: 100% !important;
  height: auto !important;

  object-fit: cover !important;
  object-position: center center !important;

  /*
   Small ~5% enlargement:
   removes approximately the narrow half-inch side gutters
   and reduces the empty black area above the characters.
  */
  transform: translateY(-1.2%) scale(1.055) !important;
  transform-origin: center center !important;
}


/* Less banner crop on tablet/mobile */

@media (max-width: 900px) {
  .banner-frame img {
    transform: translateY(-0.6%) scale(1.025) !important;
  }
}

@media (max-width: 620px) {
  .banner-frame img {
    transform: scale(1.01) !important;
  }
}

/* FINAL R7 BANNER LOCK — NO ZOOM / NO CROP */
.banner-frame picture {
  display: block !important;
}

.banner-frame img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
  filter: none !important;
}