/* Brand, library icons, motion, and theme refinements. */
html {
  scrollbar-gutter: stable;
  --color-accent: #3157e8;
}

.icon .bi {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: inherit;
  width: 100%;
  height: 100%;
}

.icon { font-size: 20px; }
.icon .bi::before { vertical-align: 0; }
.brand-name .brand-slashes { color: var(--color-accent); font: inherit; margin-inline: 1px; letter-spacing: -.15em; padding-right: 3px; }
.brand-name > span:not(.brand-slashes) { letter-spacing: .03em; }
.brand-footer .brand-slashes { color: #a7b7ff; }
.eyebrow-icon { color: var(--color-accent); font-size: 21px; }
.hero h1 em { color: var(--color-accent); }
.hero-description, .section-description { font-size: 14px; }
.section-description { max-width: 350px; }
.hero-footnote { font-size: 11px; }
.topbar .icon { font-size: 12px; }
.hero-footnote .icon { font-size: 14px; }
.contact-details .icon { font-size: 17px; }
.nav-roblox > .icon, .art-caption .icon { font-size: 16px; }
.hero-art { color: #171719; }
.theme-toggle { width: 36px; height: 36px; border: 1px solid var(--color-border); flex-shrink: 0; }
.theme-toggle .icon { font-size: 17px; }
.theme-toggle:hover { background: var(--color-surface); }
.theme-toggle:active .icon { transform: rotate(25deg) scale(.9); }
.theme-toggle .icon { transition: transform .25s ease; }
.roblox-nav-logo { width: 16px; height: 16px; flex-shrink: 0; }
.nav-roblox { gap: 9px; }
.poster-front, .poster-back, .studio-stamp, .mini-browser { color: #171719; }
.poster-monogram { font-size: 85px; font-weight: 500; letter-spacing: -.09em; line-height: 1.7; }
.studio-stamp > span:last-child, .footer-main > p { white-space: pre-line; }
.ribbon-inner > i { font-size: 15px; color: #9c9c95; }
.mini-browser-square { font-size: 18px; font-weight: 600; letter-spacing: -.08em; }
.service-card { display: flex; flex-direction: column; }
.service-image { flex-shrink: 0; }
.service-card > p { font-size: 12px; min-height: 65px; }
.service-preview { list-style: none; margin: 13px 0 18px; padding: 0; font-size: 11px; line-height: 1.7; color: var(--color-text-muted); }
.service-preview li { padding: 5px 0 5px 11px; position: relative; border-bottom: 1px solid var(--color-border); }
.service-preview li::before { content: ""; width: 3px; height: 3px; background: currentColor; border-radius: 50%; position: absolute; left: 0; top: 13px; }
.service-card .card-action { margin-top: auto; min-height: 44px; padding-top: 12px; font-size: 12px; }
.service-badge { font-size: 9px; color: #171719; }
.service-icon { color: #171719; }
.service-icon .icon { font-size: 17px; }
.process-step p, .faq-item p { font-size: 13px; }
.process-step h3 { font-size: 19px; }
.step-top > span:first-child { color: var(--color-accent); }
.process-step { border-color: var(--color-border); }
.services-note > p, .services-note .text-link { font-size: 12px; }
.faq-item summary { font-size: 14px; }
.contact-form label { font-size: 12px; }
.contact-form select, .contact-form textarea { font-size: 13px; }
.form-note { font-size: 11px; }
.contact-details > a, .contact-details > div { font-size: 12px; }
.footer-bottom, .footer-bottom button { font-size: 11px; }
.topbar { background: #171719; }
.site-footer { background: #111215; }
.roblox-art, .developer-page { background-color: #171719; color: #f7f7f2; }
.button-light { background: #f7f7f2; color: #171719; }
.button-light:hover { background: #e6e6df; }
.official-roblox-logo { position: absolute; left: 50%; top: 50%; width: 65%; height: auto; transform: translate(-50%, -50%); max-width: 310px; }
.developer-visual .official-roblox-logo { width: 70%; }
.code-line-one { top: 92px; }
.code-line-two { bottom: 83px; }
.content-dialog[open] { animation: dialog-open .27s cubic-bezier(.2,.7,.2,1) both; }
.content-dialog[open]::backdrop { animation: backdrop-open .25s ease both; }
.content-dialog.closing::backdrop { animation: backdrop-close .18s ease both; }
.dialog-services a { transition: color .2s, padding .2s; }
.dialog-services a:hover { padding-left: 6px; }
.dialog-footnote { font-size: 12px; }
.faq-item summary::after { transition: transform .22s; }
.faq-item[open] summary::after { transform: rotate(180deg); }
.faq-item[open] p { animation: answer-open .25s ease both; }
.button:active { transform: translateY(0) scale(.98); }
.whatsapp-float .icon { font-size: 26px; }
.whatsapp-float:hover { box-shadow: 0 8px 25px rgb(37 211 102 / 28%); }
.content-dialog:focus-visible { outline-color: var(--color-accent); }
:focus-visible { outline-color: var(--color-accent); }

/* Physical print samples keep their original paper colors in both themes. */
html[data-theme="dark"] {
  --color-background: #111215;
  --color-surface: #1c1e23;
  --color-text: #f3f2ee;
  --color-text-muted: #b5b8c2;
  --color-border: #353840;
  --color-accent: #a5b7ff;
}

html[data-theme="dark"] .site-header { background: rgb(17 18 21 / 95%); }
html[data-theme="dark"] .topbar { background: #08090b; }
html[data-theme="dark"] .language-switch button { color: #b5b8c2; }
html[data-theme="dark"] .language-switch button[aria-pressed="true"] { color: #fff; }
html[data-theme="dark"] .nav-roblox { background: #282b34; color: #fff; }
html[data-theme="dark"] .process-section { background: #191b20; }
html[data-theme="dark"] .button-outline:hover, html[data-theme="dark"] .filter-button:hover { background: #292c33; }
html[data-theme="dark"] .filter-button[aria-pressed="true"] { background: #f3f2ee; color: #171719; }
html[data-theme="dark"] .button-dark { background: #f3f2ee; color: #171719; }
html[data-theme="dark"] .button-dark:hover { background: #dcdedc; }
html[data-theme="dark"] .button-primary { background: #3157e8; color: #fff; }
html[data-theme="dark"] .contact-form { background: #1c1e23; color: #f3f2ee; }
html[data-theme="dark"] .contact-form select, html[data-theme="dark"] .contact-form textarea { border-color: #515560; }
html[data-theme="dark"] .contact-form textarea::placeholder { color: #aeb1bb; }
html[data-theme="dark"] .catalog-note { background: #1c1e23; }
html[data-theme="dark"] .catalog-note > .icon { color: var(--color-accent); }
html[data-theme="dark"] .icon-button:hover { background: #30333c; }
html[data-theme="dark"] .legal-dialog .text-link, html[data-theme="dark"] .dialog-services a:hover { color: var(--color-accent); }
html[data-theme="dark"] .main-nav { border-color: #353840; }
html[data-theme="dark"] .skip-link { background: #1c1e23; }

::view-transition-old(root) { animation: none; }
::view-transition-new(root) { animation: theme-reveal .55s cubic-bezier(.2,.7,.2,1); }

@keyframes theme-reveal {
  from { clip-path: circle(0 at var(--theme-x, 90vw) var(--theme-y, 60px)); }
  to { clip-path: circle(150vmax at var(--theme-x, 90vw) var(--theme-y, 60px)); }
}
@keyframes dialog-open {
  from { opacity: 0; transform: translateY(16px) scale(.975); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes backdrop-open { from { opacity: 0; } to { opacity: 1; } }
@keyframes backdrop-close { from { opacity: 1; } to { opacity: 0; } }
@keyframes answer-open { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 1150px) {
  .main-nav { gap: 19px; }
  .header-inner { gap: 18px; }
  .brand-name { font-size: 18px; }
}

@media (max-width: 1000px) {
  .header-inner { height: 78px; }
  .header-controls { margin-left: auto; gap: 9px; }
  .menu-toggle { display: flex; }
  .main-nav {
    display: flex;
    position: absolute;
    top: 78px;
    left: 0;
    right: 0;
    background: var(--color-background);
    padding: 15px 24px 24px;
    border-bottom: 1px solid var(--color-border);
    box-shadow: 0 8px 15px rgb(0 0 0 / 5%);
    align-items: stretch;
    flex-direction: column;
    gap: 0;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-10px);
    transition: opacity .22s ease, transform .22s ease, visibility 0s .22s;
  }
  .main-nav[data-open="true"] { visibility: visible; opacity: 1; pointer-events: auto; transform: translateY(0); transition-delay: 0s; }
  .main-nav > a { padding: 13px 4px; font-size: 14px; }
  .main-nav > a::after { display: none; }
  .main-nav .nav-roblox { padding: 13px 15px; margin-top: 9px; justify-content: flex-start; gap: 12px; }
  .nav-roblox > .icon { margin-left: auto; }
}

@media (max-width: 700px) {
  .header-inner { height: 72px; }
  .main-nav { top: 72px; padding-inline: 20px; }
  .main-nav[data-open="true"] { display: flex; }
  .header-controls { gap: 5px; }
  .brand-name { font-size: 18px; }
  .theme-toggle { width: 34px; height: 34px; }
  .theme-toggle .icon { font-size: 16px; }
  .hero-description, .section-description { font-size: 14px; }
  .hero-footnote { font-size: 11px; }
  .service-card h3 { font-size: 19px; }
  .service-card > p { font-size: 12px; min-height: 88px; }
  .service-preview { font-size: 11px; }
  .service-card .card-action { font-size: 11px; gap: 5px; }
  .service-badge { font-size: 8px; }
  .service-number { font-size: 9px; }
  .process-step p { font-size: 13px; }
  .services-note { gap: 9px; }
  .services-note > p { font-size: 12px; flex-basis: calc(100% - 40px); }
  .services-note .text-link { margin-left: 26px; font-size: 12px; }
  .contact-form .button { min-height: 52px; font-size: 12px; }
  .contact-details > a, .contact-details > div { font-size: 12px; }
  .faq-item summary { font-size: 14px; }
  .faq-item p { font-size: 13px; }
  .footer-bottom { font-size: 10px; }
  .footer-bottom button { font-size: 11px; min-height: 35px; }
  .dialog-services a { font-size: 14px; min-height: 60px; }
  .poster-monogram { font-size: 70px; }
}

@media (max-width: 390px) {
  .site-header .brand-mark { display: block; width: 32px; height: 30px; }
  .site-header .brand-mark img { width: 58px; height: 58px; }
  .brand-name { font-size: 17px; }
  .brand-name > span:not(.brand-slashes) { font-size: 11px; }
  .brand-name small { font-size: 5px; }
  .header-controls { gap: 4px; }
  .menu-toggle { width: 33px; }
  .service-card h3 { font-size: 17px; }
  .service-card > p { min-height: 110px; }
  .service-card .card-action { font-size: 11px; }
  .service-badge { font-size: 7px; }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
  .main-nav { transition: none !important; }
}