/* The approved homepage artwork intentionally has a brighter palette than the
   workspace. All overrides are opt-in; shared QR/AI styles are untouched. */
body.home-cosmos {
  --home-cyan: #35ddf3;
  --home-violet: #9b7cff;
  --home-pink: #ec52ed;
  --home-text: #f4f3ff;
  --home-muted: #d0d4ef;
  --home-width: 1020px;
  position: relative;
  background: #040b1c;
  color: var(--home-text);
}

/* A single full-width atmospheric field follows the document height. Hero
   objects have independent geometry, so wide screens never expose crop edges. */
.home-space { position: absolute; inset: 0; overflow: hidden; pointer-events: none; background: url('../images/home/stars.webp?v=2') 0 0 / 1024px 1024px repeat, url('../images/home/cosmos.webp?v=2') center / 100% 100% no-repeat; }
.home-space-planet { position: absolute; top: 65px; left: max(0px, calc(50% - 760px)); width: clamp(250px, 29vw, 420px); aspect-ratio: 1.18; background: url('../images/home/planet.webp') center / contain no-repeat; }
.home-space-galaxy { position: absolute; top: 70px; right: max(0px, calc(50% - 770px)); width: clamp(240px, 29vw, 430px); aspect-ratio: 1.42; background: url('../images/home/galaxy.webp') center / contain no-repeat; }
.home-space-formula, .home-space-function { position: absolute; color: #b4b8f0; opacity: .68; font: italic 20px Georgia, serif; }
.home-space-formula { top: 164px; right: max(190px, calc(50% - 530px)); }
.home-space-function { top: 490px; left: max(20px, calc(50% - 700px)); }
.home-space-grid { position: absolute; top: 210px; right: max(20px, calc(50% - 740px)); width: 118px; color: #8472f3; opacity: .65; filter: drop-shadow(0 0 5px #269def); }
.home-space-code { position: absolute; top: 345px; right: max(16px, calc(50% - 745px)); margin: 0; padding: 12px; border: 1px solid #7660b84d; border-radius: 12px; color: #7acbdc; background: #0a102b45; font: 12px/1.6 var(--font-family-mono); transform: rotate(4deg); opacity: .7; }
.home-space-code span { color: #b591ef; }
.home-page { position: relative; }

/* Desktop chrome inherits HEAD's shared styles, including 64px clearance,
   original logo, button typography and ordering. Only mobile keeps the
   accepted first-iteration treatment; no global template override is needed. */
.home-cosmos #nav_id_menu .menu-three-dots:focus-visible { outline: 2px solid #b3f4ff; outline-offset: 3px; }
/* Shared overlay styles cap body at 100vh, which collapses this long page and
   resets its scroll position. Keep Bootstrap's overflow lock without changing
   document height or shrinking the continuous background behind the overlay. */
body.home-cosmos:is(.offcanvas-nav-open, .offcanvas-open, .modal-open) { height: auto !important; max-height: none !important; }
.home-cosmos #wrapper_main_menu_content { width: 100%; max-width: none; flex: 0 0 100%; }
.home-cosmos main > .container-fluid > .row { margin-top: 0 !important; }
.home-cosmos #wrapper-for-button { display: none; }

.home-page { width: min(var(--home-width), 100%); margin-inline: auto; padding-bottom: 20px; }
.home-page h1, .home-page h2, .home-page p { margin: 0; }
.home-page h2 { font-size: 25px; font-weight: 700; line-height: 1.2; letter-spacing: -.025em; }
.home-page p { color: var(--home-muted); }
.home-hero { text-align: center; padding: 14px 0 12px; }
.home-page .home-brand { display: flex; align-items: center; justify-content: center; gap: 12px; color: #e5e1ff; font-size: 18px; line-height: 20px; font-weight: 650; letter-spacing: .045em; text-shadow: 0 0 14px rgb(155 124 255 / 35%); margin-bottom: 6px; }
@font-face {
  font-family: "Home Aclonica";
  src: url('../fonts/aclonica/aclonica_regular.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
/* Reserve the wordmark's width so font swapping cannot move its star or row. */
.home-brand-name { flex: 0 0 6.5em; white-space: nowrap; font-family: "Home Aclonica", var(--font-family-sans); font-weight: 400; letter-spacing: .02em; }
.home-brand .bi { color: #a3c7ff; font-size: 17px; }
.home-page h1 { color: #eae8ff; font-size: clamp(30px, 3.65vw, 41px); line-height: .91; font-weight: 700; letter-spacing: -.025em; }
.home-accent-text { color: var(--home-cyan); }
.home-accent-image { color: #9080ff; }
.home-accent-video { color: var(--home-pink); }
.home-page .home-hero-description { margin-top: 12px; font-size: 15px; line-height: 1.35; }

.home-products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; width: 90%; margin: 0 auto; }
.home-product { --product-accent: var(--home-cyan); position: relative; isolation: isolate; display: flex; overflow: hidden; min-height: 166px; padding: 12px 26px 16px; border: 1px solid var(--product-accent); border-radius: 19px; color: var(--home-text); text-decoration: none; background: radial-gradient(ellipse at 0% 100%, #09e9ff66, transparent 35%), radial-gradient(ellipse at 5% 0%, #00859e99, transparent 62%), linear-gradient(115deg, #03233a, #05182c 65%, #322771); box-shadow: inset 0 0 18px #20d8ff32, 0 0 24px #0cb7ff15; transition: border-color var(--duration-fast), box-shadow var(--duration-fast); }
.home-product--video { --product-accent: var(--home-pink); background: radial-gradient(ellipse at 100% 100%, #ef24ff66, transparent 45%), radial-gradient(ellipse at 8% 0%, #8219bd99, transparent 60%), linear-gradient(115deg, #2c1450, #201136 65%, #63217c); box-shadow: inset 0 0 20px #e83dff42, 0 0 24px #cc39ff18; }
.home-product:hover { color: var(--home-text); box-shadow: inset 0 0 24px color-mix(in srgb, var(--product-accent) 26%, transparent), 0 0 24px color-mix(in srgb, var(--product-accent) 20%, transparent); }
.home-product:active { filter: brightness(.92); }
.home-product-copy { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; width: 61%; min-height: 137px; }
.home-product h2 { display: flex; align-items: center; gap: 18px; white-space: nowrap; font-size: 24px; }
.home-product-icon { width: 40px; height: 40px; display: grid; place-items: center; flex: 0 0 40px; border-radius: 10px; border: 1px solid var(--product-accent); background: color-mix(in srgb, var(--product-accent) 20%, transparent); box-shadow: inset 0 0 14px color-mix(in srgb, var(--product-accent) 40%, transparent); font-size: 23px; }
.home-product p { font-size: 13px; line-height: 1.27; margin: 8px 0; }
.home-product-cta { margin-top: auto; min-height: 32px; display: inline-flex; align-items: center; gap: 22px; padding: 5px 20px; border: 1px solid var(--product-accent); border-radius: 24px; background: linear-gradient(180deg, #1764a7, #09395d); box-shadow: inset 0 0 10px #3bc4ff66; font-size: 12px; line-height: 18px; font-weight: 650; }
.home-product--video .home-product-cta { background: linear-gradient(180deg, #7331a8, #35135c); box-shadow: inset 0 0 10px #b841ff66; }
.home-product-art { position: absolute; right: 0; bottom: 0; width: 46%; height: auto; pointer-events: none; }

.home-ecosystems { text-align: center; margin-top: 10px; }
.home-ecosystems > p { font-size: 13px; line-height: 1.4; margin-top: 4px; }
.home-mascots { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 10px; max-width: 830px; margin: 2px auto 0; }
.home-mascot-link { display: block; min-width: 0; text-decoration: none; border-radius: 16px; transition: transform var(--duration-normal), filter var(--duration-normal); }
.home-mascot-link:hover, .home-mascot-link:focus-visible { transform: translateY(-3px) scale(1.025); filter: drop-shadow(0 0 7px #8b77ff66); }
.home-mascot-link:active { transform: translateY(-1px); }
.home-mascots figure { min-width: 0; margin: 0; }
.home-mascots img { width: 158px; max-width: 100%; height: auto; display: block; margin-inline: auto; }
.home-mascots figcaption { color: var(--home-text); font-size: 14px; line-height: 18px; font-weight: 600; }

.home-models { margin-top: 12px; padding: 10px 19px 18px; border: 1px solid #806acc; border-radius: 20px; background: linear-gradient(120deg, rgb(15 65 85 / 74%), rgb(12 17 40 / 92%) 32%, rgb(42 29 79 / 84%)); box-shadow: inset 0 0 20px #9b7cff20, 0 0 20px #4a57db15; }
.home-section-heading { display: flex; align-items: center; gap: 24px; margin-bottom: 14px; }
.home-section-heading h2 { flex: 0 0 auto; }
.home-section-heading p { font-size: 12px; line-height: 1.4; }
.home-models-grid { display: flex; flex-wrap: wrap; gap: 10px 12px; }
.home-model-tile { display: flex; align-items: center; gap: 9px; min-width: 0; flex: 1 1 auto; max-width: 250px; min-height: 32px; padding: 4px 10px; border: 1px solid #596f9d; border-radius: 12px; color: var(--home-text); text-decoration: none; background: linear-gradient(145deg, #172c49, #080e23 75%); box-shadow: inset 0 0 7px #899dff33; transition: border-color var(--duration-fast), background var(--duration-fast); }
.home-model-tile:nth-child(3n) { border-color: #7e67ab; background: linear-gradient(145deg, #2b2549, #100d29 75%); }
.home-model-tile:hover { border-color: var(--home-cyan); background: #193455; color: white; }
.home-model-tile:active { background: #304468; }
.home-model-avatar { display: grid; place-items: center; flex: 0 0 22px; width: 22px; height: 22px; font-size: 11px; font-weight: 650; border-radius: 5px; color: #e8eafa; }
.home-model-avatar .home-model-logo { display: block; width: 22px; height: 22px; object-fit: contain; }
.home-model-avatar .home-model-logo[hidden] { display: none; }
.home-model-name { min-width: 0; font-size: 12px; line-height: 20px; font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-tools { padding: 12px 16px 0; }
.home-tools .home-section-heading { margin-bottom: 12px; gap: 40px; }
.home-tools-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 16px; }
.home-tool { --tool-accent: #45b8ff; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-width: 0; min-height: 86px; padding: 14px 18px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--tool-accent) 62%, #13243b); background: linear-gradient(145deg, color-mix(in srgb, var(--tool-accent) 17%, #071225), #061125); box-shadow: inset 0 1px 2px #ffffff20; color: var(--home-text); text-decoration: none; transition: border-color var(--duration-fast), box-shadow var(--duration-fast); }
.home-tool--violet { --tool-accent: #b872ff; }
.home-tool--green { --tool-accent: #42e2b0; }
.home-tool--cyan { --tool-accent: #20dafa; }
.home-tool--gold { --tool-accent: #e6b55a; }
.home-tool--pink { --tool-accent: #e66cf9; }
.home-tool > .bi { display: grid; place-items: center; flex: 0 0 40px; width: 40px; font-size: 34px; line-height: 1; color: var(--tool-accent); filter: drop-shadow(0 0 5px color-mix(in srgb, var(--tool-accent) 55%, transparent)); }
.home-tool-copy { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.home-tool-name { font-size: 14px; line-height: 1.3; font-weight: 650; text-align: left; overflow-wrap: anywhere; }
.home-tool-description { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; color: var(--home-muted); font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }
.home-tool:hover { color: white; border-color: var(--tool-accent); box-shadow: inset 0 0 14px color-mix(in srgb, var(--tool-accent) 15%, transparent), 0 0 14px color-mix(in srgb, var(--tool-accent) 18%, transparent); }
.home-tool:active { filter: brightness(.85); }
.home-page :is(a, button):focus-visible { outline: 2px solid #b3f4ff; outline-offset: 4px; }
.home-page .home-load-status { font-size: 13px; text-align: center; margin: 12px 0 0; }
.home-load-status:empty { display: none; }
.home-retry { display: block; margin: 14px auto 0; min-height: 44px; border: 1px solid var(--home-violet); border-radius: 10px; padding: 8px 18px; color: var(--home-text); background: #20213e; }
.home-retry:hover { background: #34345a; }
.home-retry:disabled { opacity: .6; cursor: wait; }
.home-retry[hidden] { display: none; }
#load-trigger { height: 1px; }

.home-cosmos #wrapper-for-footer { position: relative; width: min(1070px, 100%); max-width: none; margin: 74px auto 0; padding-inline: 30px; }
.home-cosmos #wrapper-for-footer::before { content: ''; position: absolute; bottom: 100%; height: 92px; left: 50%; width: 100vw; transform: translateX(-50%); background: url('../images/home/horizon.webp') center bottom / 100% 100% no-repeat; mask-image: linear-gradient(transparent, #000 20%, #000 80%, transparent); pointer-events: none; }
.home-cosmos #footer_id { border-color: #4a72a65c !important; margin: 0 !important; min-height: 60px; gap: 12px; }
.home-cosmos #footer_id p, .home-cosmos #footer_id .nav-link { color: var(--home-text) !important; font-size: 12px; }
.home-cosmos #footer_id p { flex: 1; width: auto; }
.home-cosmos #ico_footer { flex: 0 0 40px; width: 40px; min-height: 40px; overflow: visible; margin: 0 !important; }
.home-cosmos #ico_footer img { display: block; width: 28px; height: 28px; padding: 0; margin: 0; border-radius: 0; object-fit: contain; }
.home-cosmos #footer_id .nav { flex: 1; width: auto; }

@media (min-width: 992px) {
  /* Center controls of different heights without inline baseline descent. */
  .home-cosmos #nav_id_menu .navbar-nav { align-items: center; }
  /* The visible bar is 64px, while the shared padded nav is 71px tall.
     Center only guest controls on that bar; preserve the accepted auth row. */
  .home-cosmos #nav_id_menu .navbar-nav:has(#input-output:not([style*="display: none"]):not([style*="display:none"])) { position: relative; top: -3.5px; }
  .home-cosmos #billingTopBtn { display: flex; }
  .home-cosmos #nav_id_menu .menu-three-dots,
  .home-cosmos #profile-1 .dropdown > a > img { display: block; }
}

@media (min-width: 1440px) {
  body.home-cosmos { --home-width: 1180px; }
  .home-products { width: 90%; }
  .home-product { min-height: 190px; padding-block: 18px; }
  .home-product-copy { min-height: 152px; }
  .home-product p { font-size: 14px; max-width: 260px; }
  .home-mascots { max-width: 910px; }
}
@media (max-width: 991.98px) {
  .home-cosmos #transparent-menu-background { height: 60px !important; background: rgb(23 16 51 / 38%) !important; opacity: 1 !important; backdrop-filter: blur(18px) !important; -webkit-backdrop-filter: blur(18px) !important; border-bottom: 1px solid rgb(158 135 255 / 22%) !important; }
  .home-cosmos.home-scrolled #transparent-menu-background { background: rgb(8 13 32 / 84%) !important; }
  .home-cosmos #nav_id_menu > .container-fluid > .navbar-brand { padding: 0; }
  .home-cosmos #nav_id_menu { padding: 8px 0 !important; }
  .home-cosmos #nav_id_menu > .container-fluid { min-height: 44px; padding-inline: 16px; }
  .home-cosmos main { padding-top: 60px; }
  .home-cosmos #nav_id_menu > .container-fluid > .navbar-brand .logo_fi { width: 36px; height: 36px; }
  .home-hero { padding-top: 18px; }
  .home-products { width: 100%; gap: 14px; }
  .home-product { padding-inline: 18px; }
  .home-product h2 { font-size: 22px; gap: 12px; }
  .home-section-heading { flex-wrap: wrap; gap: 8px 20px; }
  .home-section-heading p { flex: 1; min-width: 180px; }
  .home-model-tile { min-height: 44px; }
  .home-tools-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
  .home-space { background-image: url('../images/home/stars.webp?v=2'), url('../images/home/cosmos-mobile.webp'); }
  .home-space-planet { top: 62px; left: -30px; width: 190px; opacity: .6; }
  .home-space-galaxy { top: 202px; right: -30px; width: 210px; opacity: .8; }
  .home-space-formula, .home-space-function, .home-space-code { display: none; }
  .home-space-grid { top: 660px; right: -20px; width: 100px; opacity: .3; }
  .home-page { padding-inline: 6px; }
  .home-page h1 { font-size: clamp(27px, 5.9vw, 38px); line-height: 1.06; }
  .home-page h2 { font-size: 23px; }
  .home-hero-description .home-title-break { display: none; }
  .home-page .home-hero-description { max-width: 480px; margin-inline: auto; font-size: 14px; }
  .home-products { grid-template-columns: 1fr; max-width: 520px; }
  .home-product { min-height: 178px; padding: 16px 18px; }
  .home-product-copy { min-height: 144px; width: 65%; }
  .home-product h2 { font-size: 23px; }
  .home-product p { font-size: 13px; max-width: 235px; padding-right: 10px; }
  .home-product-art { width: 42%; }
  .home-product-cta { min-height: 44px; }
  .home-ecosystems { margin-top: 20px; }
  .home-ecosystems > p { max-width: 460px; margin: 8px auto; }
  .home-mascots { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 0; max-width: 500px; }
  .home-mascot-link:last-child { grid-column: 2; }
  .home-models { margin-top: 20px; padding: 16px 12px; }
  .home-section-heading { gap: 10px; }
  .home-section-heading h2 { width: 100%; }
  .home-section-heading p { min-width: 0; }
  .home-models-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .home-model-tile { max-width: none; padding-inline: 8px; gap: 6px; }
  .home-tools { padding: 20px 0 0; }
  .home-tools .home-section-heading { gap: 8px; }
  .home-tools-grid { grid-template-columns: 1fr; gap: 12px; }
  .home-tool { min-height: 86px; padding: 14px 16px; }
  .home-tool-name { font-size: 14px; }
  .home-cosmos #wrapper-for-footer { padding-inline: 20px; margin-top: 60px; }
  .home-cosmos #wrapper-for-footer::before { background-size: auto 100%; height: 76px; }
  .home-cosmos #footer_id { flex-direction: column; gap: 10px; text-align: center; }
  .home-cosmos #ico_footer { order: -1; flex: 0 0 auto; }
  .home-cosmos #footer_id .nav { justify-content: center !important; }
  .home-cosmos #footer_id .nav-link { min-height: 44px; display: flex; align-items: center; }
}
@media (max-width: 430px) {
  .home-mascots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-mascot-link:last-child { grid-column: auto; }
  .home-product-copy { width: 67%; }
  .home-product h2 { font-size: 21px; gap: 10px; }
  .home-product-icon { width: 34px; height: 34px; flex-basis: 34px; font-size: 21px; }
  .home-product p { font-size: 12px; }
  .home-product-cta { padding-inline: 14px; gap: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .home-cosmos *, .home-cosmos *::before, .home-cosmos *::after { scroll-behavior: auto; transition: none; }
  .home-mascot-link:hover, .home-mascot-link:focus-visible, .home-mascot-link:active { transform: none; }
}
@media (max-width: 359.98px) {
  .home-page h1 { font-size: 23px; line-height: 1.08; }
}
@media (forced-colors: active) {
  .home-product, .home-tool, .home-model-tile, .home-mascot-link { border: 1px solid LinkText; }
  .home-page :is(a, button):focus-visible { outline-color: Highlight; }
}