:root {

  --background-black: #0009;

  --background-blue: #248af6;

  --background-blue-100: #141f48;

  --background-blue-01: rgba(36, 138, 246, 0.1);

  --primary-rgb: 36, 138, 246;

  --background-gray-10: #f7f7f7;

  --background-white: #fff;

  --background-overlay: rgba(0, 0, 0, 0.4);

  --border-blue-40: rgba(0, 118, 206, 0.4);

  --border-blue-50: #e0edff;

  --border-gray-40: #d7d7d7;

  --border-gray-70: rgba(176, 186, 191, 0.7);

  --control-primary-initial: #248af6;

  --control-primary-hover: #096ed9;

  --control-primary-pressed: #0b5eb8;

  --control-tertiary-initial: #f2f5f8;

  --control-tertiary-hover: #e1e1e1;

  --control-tertiary-pressed: #cbcbcb;

  --control-secondary-initial: #f6f8f9;

  --text-black-100: #000;

  --text-gray: #585858;

  --text-gray-70: #a6a6a6;

  --text-gray-90: #464646;

  --text-white: #fff;

  --icons-green-100: #00bb61;

  --icons-red: #248af6;

  --shadow-small: 0 1px 3px 0 rgba(0, 0, 0, 0.2);

  --shadow-toolbar:

    0 2px 12px 0 rgba(25, 25, 26, 0.04), 0 6px 20px 0 rgba(25, 25, 26, 0.06);

  --focus-ring: rgba(36, 138, 246, 0.38);

  --site-width: 1160px;

  --radius-control: 8px;

  --radius-card: 8px;

  --radius-upload: 10px;

  --z-header: 1000;

  --z-header-menu: 1010;

  --z-header-drawer: 990;

  --z-tools-menu: 980;

  --z-tools-overlay: 970;

  --z-content: 2;

}



* {

  box-sizing: border-box;

}



html {

  scroll-behavior: smooth;

}



body {

  margin: 0;

  color: var(--text-black-100);

  background: var(--background-white);

  font-family: "Poppins", Arial, sans-serif;

}



[hidden] {

  display: none !important;

}



body.is-locked {

  overflow: hidden;

}



a {

  color: inherit;

  text-decoration: none;

}



button,

input,

select,

textarea {

  font: inherit;

}



button {

  border: 0;

}



img,

svg {

  display: block;

}



.sr-only,

.skip-link {

  position: absolute;

  width: 1px;

  height: 1px;

  overflow: hidden;

  clip: rect(0, 0, 0, 0);

}



.skip-link:focus {

  z-index: 200;

  width: auto;

  height: auto;

  clip: auto;

  top: 12px;

  left: 12px;

  padding: 10px 12px;

  border-radius: var(--radius-control);

  background: var(--background-blue);

  color: var(--text-white);

}



.desktop-only {

  display: inline;

}



.mobile-only,

.mobile-support-bar {

  display: none;

}



.button {

  position: relative;

  display: inline-flex;

  width: fit-content;

  align-items: center;

  justify-content: center;

  gap: 8px;

  border-radius: var(--radius-control);

  cursor: pointer;

  white-space: nowrap;

  transition:

    background-color 0.2s ease,

    color 0.2s ease,

    border-color 0.2s ease,

    transform 0.2s ease;

}



.button:disabled,

.button.is-disabled {

  cursor: not-allowed;

  opacity: 0.55;

  transform: none;

}



.button:focus-visible,

.language-button:focus-visible,

.burger-button:focus-visible,

.accordion__trigger:focus-visible,

.tabs__tab:focus-visible {

  outline: 3px solid var(--focus-ring);

  outline-offset: 2px;

}



.button--primary {

  border: 1px solid var(--control-primary-initial);

  background: var(--control-primary-initial);

  color: #ffffff !important;

  font-size: 14px;

  font-weight: 600;

  line-height: 20px;

}



.button--primary *,

.button--upload * {

  color: #ffffff !important;

}



.button--primary:hover {

  background: var(--control-primary-hover);

}



.button--primary:active {

  background: var(--control-primary-pressed);

}



.button--tertiary {

  background: var(--control-tertiary-initial);

  color: var(--text-gray);

  font-size: 14px;

  font-weight: 600;

  line-height: 20px;

}



.button--tertiary:hover {

  background: var(--control-tertiary-hover);

}



.button--gray {

  border: 1px solid var(--border-gray-70);

  background: var(--background-white);

  color: var(--text-black-100);

  font-size: 14px;

  font-weight: 500;

  line-height: 20px;

}



.button--gray:hover {

  color: var(--text-gray-90);

}



.button--ghost {

  background: transparent;

  color: var(--text-black-100);

  font-size: 18px;

  font-weight: 600;

  line-height: 24px;

}



.button--ghost:hover {

  background: var(--control-tertiary-hover);

}



.button--secondary {

  border: 1px solid var(--border-blue-50);

  background: var(--control-secondary-initial);

  color: rgba(107, 107, 107, 1);

  font-size: 14px;

  font-weight: 400;

  line-height: 20px;

}



.button--transparent {

  background: transparent;

  color: var(--text-black-100);

  font-size: 14px;

  font-weight: 600;

  line-height: 20px;

}



.button--medium {

  height: 40px;

  padding: 10px 12px;

}



.button--small {

  height: 32px;

  padding: 6px 8px;

}



.button--large {

  height: 52px;

  min-width: 250px;

  padding: 16px;

}



.button--full {

  width: 100%;

  height: 52px;

}



.top-banner {

  position: sticky;

  z-index: var(--z-header-menu);

  top: 0;

  display: flex;

  justify-content: center;

  background: var(--background-gray-10);

  padding: 0 40px;

}



.top-banner__inner {

  display: flex;

  width: 100%;

  max-width: var(--site-width);

  height: 64px;

  align-items: center;

  justify-content: space-between;

}



.language-button {

  position: relative;

  display: flex;

  width: 194px;

  height: 40px;

  align-items: center;

  justify-content: space-between;

  padding: 12px 16px;

  border: 1px solid #8c8c8c;

  border-radius: var(--radius-control);

  background: var(--background-white);

  color: var(--text-black-100);

  cursor: pointer;

}



.language-button > span {

  display: inline-flex;

  align-items: center;

  gap: 8px;

}



.language-button [data-language-label] {

  display: inline;

}



.language-menu {

  position: absolute;

  top: 52px;

  left: calc((100vw - min(var(--site-width), calc(100vw - 80px))) / 2);

  z-index: var(--z-header-menu);

  display: grid;

  width: 194px;

  gap: 4px;

  padding: 8px;

  border: 1px solid var(--border-gray-70);

  border-radius: var(--radius-control);

  background: var(--background-white);

  box-shadow: var(--shadow-toolbar);

}



.language-menu a {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 8px 10px;

  border-radius: 6px;

  font-size: 14px;

}



.language-menu a[aria-current="true"] {

  background: var(--background-blue-01);

  color: var(--background-blue);

  font-weight: 600;

}



.language-menu small {

  color: var(--text-gray-70);

  font-size: 11px;

  font-weight: 600;

}



.language-menu a:hover {

  background: var(--control-tertiary-initial);

}



.site-header {

  position: sticky;

  z-index: var(--z-header);

  top: 64px;

  display: flex;

  width: 100%;

  min-height: 80px;

  justify-content: center;

  background: var(--background-white);

  padding: 20px 40px;

}



.site-header__inner {

  display: flex;

  width: 100%;

  max-width: var(--site-width);

  align-items: center;

  justify-content: space-between;

}



.logo {

  display: inline-flex;

  align-items: center;

  gap: 8px;

}



.logo__image {

  display: block;

  width: 40px;

  height: 40px;

  object-fit: contain;

}



.logo__icon {

  display: grid;

  width: 32px;

  height: 32px;

  place-items: center;

  border-radius: 4px;

  background: var(--icons-red);

  color: var(--text-white);

  font-size: 11px;

  font-weight: 800;

  line-height: 1;

}



.logo__wordmark {

  font-size: 32px;

  font-weight: 600;

  letter-spacing: 0;

  line-height: 34px;

}



.site-header__actions {

  display: flex;

  align-items: center;

  justify-content: flex-end;

  gap: 20px;

}



.site-header__page-link {

  color: var(--text-black-100);

  font-size: 14px;

  font-weight: 600;

  line-height: 20px;

  white-space: nowrap;

}



.site-header__page-link:hover {

  color: var(--background-blue);

}



.site-header__tools-mobile,

.burger-button,

.mobile-drawer {

  display: none;

}



.burger-button {

  width: 40px;

  height: 40px;

  align-items: center;

  justify-content: center;

  background: transparent;

  color: var(--text-black-100);

  cursor: pointer;

}



.tools-overlay {

  position: fixed;

  z-index: var(--z-tools-overlay);

  inset: 144px 0 0;

  background: var(--background-overlay);

  opacity: 0;

  visibility: hidden;

  transition:

    opacity 0.3s linear,

    visibility 0.3s linear;

}



.tools-overlay.is-open {

  opacity: 1;

  visibility: visible;

}



.tools-menu {

  position: fixed;

  z-index: var(--z-tools-menu);

  top: 144px;

  right: 0;

  left: 0;

  overflow: hidden;

  border-radius: 0 0 10px 10px;

  background: var(--background-white);

  transform: translateY(-130%);

  transition: transform 0.3s ease-in-out;

}



.tools-menu.is-open {

  transform: translateY(0);

}



.tools-menu__grid {

  display: grid;

  min-height: 484px;

  grid-template-columns: 3fr 1fr;

}



.tools-menu h2 {

  margin: 0;

  padding: 18px 40px;

  border-bottom: 1px solid var(--border-gray-40);

  font-size: 14px;

  font-weight: 600;

  line-height: 18px;

}



.tools-menu__all {

  border-right: 1px solid var(--border-gray-40);

}



.tools-menu__columns {

  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 16px;

  padding: 36px 40px 32px;

}



.tools-menu__column h3 {

  margin: 0 0 14px;

  color: var(--text-gray-70);

  font-size: 14px;

  font-weight: 400;

  line-height: 20px;

}



.tools-menu ul {

  display: grid;

  gap: 2px;

  margin: 0;

  padding: 0;

  list-style: none;

}



.tools-menu a {

  display: flex;

  min-height: 40px;

  align-items: center;

  gap: 12px;

  border-radius: var(--radius-control);

  font-size: 14px;

  line-height: 20px;

}



.tools-menu a:hover {

  background: var(--control-tertiary-hover);

}



.tools-menu__sign > a {

  margin: 30px 24px;

}



.site-ad {

  display: flex;

  width: min(var(--site-width), calc(100% - 32px));

  justify-content: center;

  margin: 32px auto;

  padding: 8px;

  border-radius: var(--radius-card);

  overflow: hidden;

  text-align: center;

}



.site-ad__inner {

  display: block;

  width: 100%;

  max-width: 970px;

  min-height: 90px;

  overflow: hidden;

}



.site-ad--below_header {

  margin-top: 28px;

}



.site-ad--after_upload {

  margin-top: 28px;

  margin-bottom: 56px;

}



.site-ad--tools_grid,

.site-ad--related_tools {

  width: 100%;

  grid-column: 1 / -1;

  margin: 8px 0;

  padding: 0;

}



.site-ad--tools_grid .site-ad__inner,

.site-ad--related_tools .site-ad__inner {

  max-width: 728px;

}



.site-ad--after_tools,

.site-ad--before_faq,

.site-ad--tool_workspace {

  margin-top: 48px;

  margin-bottom: 72px;

}



.site-ad--after_tools {

  margin-top: -52px;

}



.site-ad--tool_workspace {

  width: 100%;

  margin-top: 24px;

  margin-bottom: 0;

}



.site-ad--before_footer {

  margin-bottom: 36px;

}



.site-ad ins,

.site-ad iframe {

  max-width: 100%;

}



.site-ad ins.adsbygoogle {

  display: block;

  width: 100%;

  min-height: 90px;

}



.hero-surface {

  position: relative;

  overflow: hidden;

  background:

    radial-gradient(circle at 10% 54%, rgba(218, 45, 38, 0.1), transparent 28%),

    radial-gradient(

      circle at 78% 22%,

      rgba(36, 138, 246, 0.18),

      transparent 34%

    ),

    linear-gradient(180deg, #f8fbff 0%, #eef6ff 62%, #ffffff 100%);

  padding-bottom: 100px;

}



.hero {

  display: flex;

  width: 100%;

  max-width: 880px;

  flex-direction: column;

  align-items: center;

  margin: 0 auto 40px;

  padding-top: 33px;

}



.hero h1 {

  margin: 0 0 24px;

  color: var(--text-black-100);

  font-size: 64px;

  font-weight: 600;

  line-height: 80px;

  text-align: center;

}



.hero p {

  margin: 0;

  color: var(--text-gray-90);

  font-size: 18px;

  font-weight: 500;

  line-height: 24px;

  text-align: center;

}



.home-hero-media {

  width: min(var(--site-width), calc(100% - 32px));

  margin: 0 auto 34px;

  overflow: hidden;

  border-radius: var(--radius-card);

  box-shadow: var(--shadow-toolbar);

}



.home-hero-media img {

  display: block;

  width: 100%;

  max-height: 420px;

  object-fit: cover;

}



.advantages__image img,

.cta-banner__image {

  display: block;

  width: 100%;

  height: 100%;

  object-fit: cover;

}



.advantages__image {

  overflow: hidden;

  width: 100%;

  height: 100%;

  min-height: 240px;

  border: 1px solid var(--border-blue-50);

  border-radius: var(--radius-card);

  background: var(--background-gray-10);

  box-shadow: var(--shadow-toolbar);

}



.advantages__image--mobile {

  display: none;

}



.theme--minimal .hero-surface {

  background: var(--background-white);

}



.theme--bold .hero-surface {

  background:

    linear-gradient(135deg, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.22)),

    var(--background-blue);

}



.theme--bold .hero h1,

.theme--bold .hero p {

  color: var(--text-white);

}



.theme--soft .hero-surface {

  background: linear-gradient(

    180deg,

    var(--custom-hero-background),

    var(--background-gray-10) 72%,

    var(--background-white)

  );

}



.upload {

  position: relative;

  display: flex;

  width: 100%;

  justify-content: center;

  padding: 0 52px;

}



.blur {

  position: absolute;

  z-index: 1;

  pointer-events: none;

  opacity: 0.45;

  filter: blur(120px);

}



.blur--blue {

  background: rgba(36, 138, 246, 0.38);

}



.blur--cyan {

  background: rgba(36, 138, 246, 0.5);

}



.blur--red {

  background: rgba(218, 45, 38, 0.6);

}



.upload__blur--upper {

  top: -130px;

  left: 50%;

  width: 500px;

  height: 90px;

}



.upload__blur--center {

  top: 60px;

  left: 30%;

  width: 160px;

  height: 260px;

}



.upload__blur--lower {

  bottom: -40px;

  left: 50%;

  width: 720px;

  height: 80px;

  transform: translateX(-50%);

}



.upload__box {

  position: relative;

  z-index: var(--z-content);

  display: flex;

  width: 100%;

  max-width: var(--site-width);

  flex-direction: column;

  padding: 15px;

  border-radius: var(--radius-upload);

  background: var(--background-white);

  box-shadow: var(--shadow-small);

}



.upload-zone {

  display: flex;

  width: 100%;

  min-height: 280px;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  padding: 24px;

  border: 1px dashed var(--border-blue-40);

  border-radius: var(--radius-upload);

  cursor: pointer;

  text-align: center;

  transition:

    border-color 0.2s ease,

    background-color 0.2s ease,

    opacity 0.2s ease;

}



.upload-zone.is-drag-active {

  border-color: var(--background-blue);

  background: #e0edff;

  opacity: 0.75;

}



.upload-zone__desktop-title,

.upload-zone__mobile-title {

  margin-top: 10px;

  font-size: 24px;

  font-weight: 600;

  line-height: 32px;

}



.upload-zone__mobile-title {

  display: none;

}



.button--upload {

  width: 400px;

  height: 52px;

  margin-top: 24px;

}



.upload-zone__description {

  max-width: 700px;

  margin: 24px 10px 0;

  color: var(--text-gray-70);

  font-size: 12px;

  font-weight: 400;

  line-height: 16px;

}



.upload-zone__secure {

  display: inline-flex;

  align-items: center;

  gap: 4px;

  margin-top: 8px;

  color: var(--icons-green-100);

  font-size: 12px;

  line-height: 16px;

}



.stats {

  position: relative;

  z-index: var(--z-content);

  display: flex;

  align-items: stretch;

  justify-content: center;

  gap: 0;

  margin: 100px auto;

}



.stats article {

  display: grid;

  grid-template-columns: 40px auto;

  column-gap: 12px;

  align-items: center;

}



.stats article:not(:last-child) {

  margin-right: 48px;

}



.stats__icon {

  display: grid;

  width: 40px;

  height: 40px;

  place-items: center;

  border-radius: 50%;

  background: var(--background-white);

  box-shadow: var(--shadow-small);

  grid-row: span 2;

}



.stats strong {

  font-size: 18px;

  font-weight: 600;

  line-height: 24px;

}



.stats span:last-child {

  color: var(--text-gray);

  font-size: 12px;

  line-height: 16px;

}



/* Homepage Tools Directory & Categorized Sections */

.tools-directory {

  width: 100%;

  max-width: var(--site-width);

  margin: 0 auto 90px;

  padding: 0 16px;

}





.tools-section {

  margin-bottom: 64px;

  scroll-margin-top: 100px;

}



.tools-section.is-hidden {

  display: none !important;

}



.tools-section:last-child {

  margin-bottom: 0;

}



.tools-section__header {

  margin-bottom: 24px;

}



.tools-section__badge {

  display: inline-flex;

  align-items: center;

  gap: 6px;

  padding: 4px 12px;

  border-radius: 999px;

  background: var(--background-blue-01);

  color: var(--background-blue);

  font-size: 12px;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.5px;

  margin-bottom: 8px;

}



.tools-section__header h2 {

  font-size: 28px;

  font-weight: 700;

  line-height: 36px;

  margin: 0 0 8px;

  color: var(--text-black-100);

}



.tools-section__header p {

  font-size: 15px;

  line-height: 22px;

  color: var(--text-gray);

  margin: 0;

  max-width: 680px;

}



.tools-grid {

  display: grid;

  max-width: var(--site-width);

  grid-template-columns: repeat(3, 1fr);

  gap: 16px;

  margin: 0 auto;

  padding: 0;

}



.tool-card {

  display: flex;

  height: 108px;

  border: 1px solid var(--border-blue-50);

  border-radius: var(--radius-card);

  background: var(--background-white);

  box-shadow: var(--shadow-small);

  transition:

    transform 0.2s ease,

    box-shadow 0.2s ease;

}



.tool-card:hover {

  transform: translateY(-2px);

  box-shadow: var(--shadow-toolbar);

}



.tool-card a {

  display: flex;

  width: 100%;

  gap: 16px;

  align-items: center;

  padding: 16px;

}



.tool-card__icon {

  display: grid;

  flex: 0 0 48px;

  width: 48px;

  height: 48px;

  place-items: center;

  border-radius: 12px;

  background: var(--background-blue-01);

  color: var(--background-blue);

}



.tool-card h2 {

  margin: 0 0 4px;

  font-size: 18px;

  font-weight: 600;

  line-height: 24px;

}



.tool-card p {

  display: -webkit-box;

  margin: 0;

  overflow: hidden;

  -webkit-box-orient: vertical;

  -webkit-line-clamp: 2;

  color: var(--text-gray);

  font-size: 14px;

  font-weight: 400;

  line-height: 20px;

}



.tools-grid__show {

  display: none;

}



.advantages {

  position: relative;

  display: flex;

  max-width: 100%;

  flex-direction: column;

  padding: 0 16px;

}



.advantages > h2 {

  max-width: 918px;

  margin: 0 auto;

  font-size: 35px;

  font-weight: 600;

  line-height: 40px;

  text-align: center;

}



.advantages__subtitle {

  margin: 24px 0 0;

  color: var(--text-gray);

  font-size: 18px;

  font-weight: 500;

  line-height: 24px;

  text-align: center;

}



.advantages__content {

  position: relative;

  z-index: var(--z-content);

  display: flex;

  justify-content: center;

  margin-top: 48px;

}



.advantages__items {

  display: flex;

  flex-direction: column;

}



.advantage-item {

  display: flex;

  width: 396px;

  min-height: 360px;

  flex-direction: column;

  justify-content: flex-start;

}



.advantage-item__mobile-visual {

  display: none;

}



.advantage-item__copy {

  padding: 24px 0 0;

}



.advantage-item h3 {

  margin: 0 0 8px;

  font-size: 20px;

  font-weight: 600;

  line-height: 28px;

}



.advantage-item p {

  margin: 0;

  color: var(--text-gray);

  font-size: 14px;

  font-weight: 400;

  line-height: 20px;

}



.advantage-upload {

  width: 180px;

  height: 52px;

  margin-top: auto;

  margin-left: 46px;

}



.advantages__sticky {

  position: sticky;

  top: 220px;

  width: 702px;

  height: 352px;

  margin-left: 60px;

}



.visual-panel {

  position: relative;

  overflow: hidden;

  width: 100%;

  height: 100%;

  min-height: 240px;

  border: 1px solid var(--border-blue-50);

  border-radius: 18px;

  background:

    linear-gradient(135deg, rgba(36, 138, 246, 0.12), transparent 42%),

    linear-gradient(315deg, rgba(218, 45, 38, 0.08), transparent 40%), #fff;

  box-shadow: var(--shadow-toolbar);

}



.visual-panel__bar {

  display: flex;

  height: 40px;

  align-items: center;

  gap: 7px;

  padding: 0 18px;

  border-bottom: 1px solid var(--border-blue-50);

  background: #f8fbff;

}



.visual-panel__bar span {

  width: 9px;

  height: 9px;

  border-radius: 50%;

  background: #d7d7d7;

}



.visual-panel__bar span:first-child {

  background: var(--icons-red);

}



.visual-panel__bar span:nth-child(2) {

  background: #ffb125;

}



.visual-panel__bar span:nth-child(3) {

  background: #00bb61;

}



.visual-panel__document {

  position: absolute;

  top: 72px;

  left: 34px;

  width: 48%;

  min-height: 210px;

  padding: 28px 24px;

  border-radius: 12px;

  background: #fff;

  box-shadow: var(--shadow-small);

}



.visual-panel__line {

  height: 10px;

  margin-bottom: 14px;

  border-radius: 999px;

  background: #dde8f5;

}



.visual-panel__line--wide {

  width: 90%;

}



.visual-panel__line--short {

  width: 58%;

}



.visual-panel__annotation,

.visual-panel__signature {

  display: inline-flex;

  margin-top: 14px;

  padding: 8px 10px;

  border-radius: 8px;

  background: #e0edff;

  color: var(--background-blue);

  font-size: 12px;

  font-weight: 600;

}



.visual-panel__signature {

  margin-left: 12px;

  background: #ffe8f3;

  color: var(--icons-red);

}



.visual-panel__rail {

  position: absolute;

  top: 78px;

  right: 34px;

  display: grid;

  width: 34%;

  gap: 14px;

}



.visual-panel__rail span {

  display: flex;

  align-items: center;

  min-height: 42px;

  padding: 0 14px;

  border: 1px solid var(--border-blue-50);

  border-radius: 10px;

  background: #fff;

  color: var(--text-gray);

  font-size: 13px;

  box-shadow: 0 8px 18px rgba(25, 25, 26, 0.05);

}



.visual-panel--secure {

  background:

    linear-gradient(135deg, rgba(0, 187, 97, 0.12), transparent 42%),

    linear-gradient(315deg, rgba(36, 138, 246, 0.12), transparent 40%), #fff;

}



.visual-panel--conversion {

  background:

    linear-gradient(135deg, rgba(255, 177, 37, 0.16), transparent 42%),

    linear-gradient(315deg, rgba(36, 138, 246, 0.12), transparent 40%), #fff;

}



.faq-section {

  position: relative;

  display: flex;

  width: 100%;

  max-width: var(--site-width);

  flex-direction: column;

  align-items: center;

  justify-content: center;

  margin: 100px auto;

}



.faq-section > h2,

.questions > h2 {

  margin: 0;

  font-size: 35px;

  font-weight: 600;

  line-height: 40px;

  text-align: center;

}



.faq-section > p {

  margin: 24px 0 32px;

  color: var(--text-gray);

  font-size: 18px;

  font-weight: 500;

  line-height: 24px;

  text-align: center;

}



.tabs {

  width: 100%;

}



.tabs__list {

  position: relative;

  z-index: var(--z-content);

  display: flex;

  width: fit-content;

  gap: 4px;

  margin: 0 auto 40px;

  padding: 4px;

  border-radius: 12px;

  background: var(--background-white);

  box-shadow: var(--shadow-toolbar);

}



.tabs__tab {

  position: relative;

  z-index: 2;

  padding: 10px 12px;

  border-radius: var(--radius-control);

  background: transparent;

  color: var(--text-black-100);

  cursor: pointer;

  font-size: 14px;

  font-weight: 500;

  line-height: 20px;

  transition: color 0.3s;

}



.tabs__tab.is-active {

  color: var(--text-white);

}



.tabs__glider {

  position: absolute;

  z-index: 1;

  top: 4px;

  left: 4px;

  height: calc(100% - 8px);

  border-radius: var(--radius-control);

  background: var(--text-black-100);

  transition:

    width 0.35s cubic-bezier(0.4, 0, 0.2, 1),

    transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);

}



.tabs__panel {

  width: 100%;

}



.accordion {

  display: grid;

  width: 100%;

  gap: 16px;

}



.accordion__item {

  overflow: hidden;

  border: 1px solid var(--border-blue-50);

  border-radius: 12px;

  background: var(--background-white);

  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);

}



.accordion__trigger {

  display: flex;

  width: 100%;

  align-items: center;

  justify-content: space-between;

  gap: 16px;

  padding: 20px 24px;

  background: transparent;

  cursor: pointer;

  text-align: left;

}



.accordion__trigger span {

  font-size: 16px;

  font-weight: 500;

  line-height: 24px;

}



.accordion__trigger svg {

  flex: 0 0 auto;

  transition: transform 0.2s ease;

}



.accordion__trigger[aria-expanded="true"] svg {

  transform: rotate(180deg);

}



.accordion__content {

  padding: 0 24px 20px;

}



.accordion__content p {

  margin: 0;

  color: var(--text-gray);

  font-size: 14px;

  line-height: 22px;

}



.cta-banner {

  position: relative;

  display: flex;

  width: min(var(--site-width), calc(100% - 32px));

  min-height: 320px;

  align-items: center;

  justify-content: center;

  overflow: hidden;

  padding: 52px 0;

  border-radius: 16px;

  margin: 0 auto 100px;

  background: var(--background-blue-100);

}



.cta-banner__copy {

  position: relative;

  z-index: 2;

  display: flex;

  max-width: 520px;

  flex-direction: column;

  align-items: center;

  text-align: center;

}



.cta-banner__copy p {

  margin: 0 0 24px;

  color: var(--text-white);

  font-size: 20px;

  font-weight: 600;

  line-height: 28px;

}



.cta-banner__copy h2 {

  margin: 0 0 32px;

  color: var(--text-white);

  font-size: 36px;

  font-weight: 600;

  line-height: 40px;

}



.cta-banner__left,

.cta-banner__right {

  position: absolute;

  z-index: 1;

  width: 290px;

  height: 210px;

  opacity: 0.85;

  transform: rotate(-15deg);

}



.cta-banner__left {

  left: 10px;

  top: -20px;

}



.cta-banner__right {

  right: -16px;

  top: 34px;

  transform: rotate(15deg);

}



.footer {

  display: flex;

  width: 100%;

  justify-content: center;

  padding: 0 16px 54px;

}



.footer__inner {

  width: 100%;

  max-width: var(--site-width);

  border-top: 1px solid var(--border-gray-70);

  padding-top: 28px;

}



.footer__top {

  display: flex;

  justify-content: space-between;

  gap: 40px;

}



.footer__brand p {

  margin: 8px 0 28px;

  color: var(--text-gray);

  font-size: 20px;

  font-weight: 600;

  line-height: 28px;

}



.footer__logo .logo__image {

  width: 36px;

  height: 36px;

}



.footer__company-image {

  display: flex;

  flex-wrap: wrap;

  gap: 8px;

}



.footer__social-link {

  display: inline-grid;

  width: 34px;

  height: 34px;

  place-items: center;

  border: 1px solid var(--border-gray-70);

  border-radius: 8px;

  background: var(--background-white);

  color: var(--text-gray);

  transition:

    background-color 0.2s ease,

    border-color 0.2s ease,

    color 0.2s ease,

    transform 0.2s ease;

}



.footer__social-link:hover {

  border-color: var(--background-blue);

  background: var(--background-blue-01);

  color: var(--background-blue);

  transform: translateY(-1px);

}



.footer__company-image--empty span {

  height: 18px;

  border-radius: 4px;

  background: #d7d7d7;

}



.footer__company-image--empty span:first-child {

  width: 42px;

}



.footer__company-image--empty span:nth-child(2) {

  width: 64px;

}



.footer__company-image--empty span:nth-child(3) {

  width: 38px;

}



.footer__company-image--empty span:nth-child(4) {

  width: 48px;

}



.footer__links {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));

  gap: 42px;

  flex: 1;

}



.footer h2 {

  margin: 0 0 12px;

  color: var(--text-black-100);

  font-size: 14px;

  font-weight: 600;

  line-height: 20px;

}



.footer ul {

  display: grid;

  gap: 8px;

  margin: 0;

  padding: 0;

  list-style: none;

}



.footer a {

  font-size: 14px;

  line-height: 20px;

}



.footer a:hover {

  color: var(--background-blue-100);

}



.footer__bottom {

  display: flex;

  justify-content: space-between;

  align-items: flex-end;

  margin-top: 28px;

  padding-top: 24px;

  border-top: 1px solid var(--border-gray-70);

}



.footer__language-wrap {

  position: relative;

}



.language-menu--footer {

  top: auto;

  right: 0;

  bottom: 48px;

  left: auto;

}



.footer__copyright {

  margin: 0;

  font-size: 14px;

  font-weight: 500;

  line-height: 20px;

}



.footer__security {

  margin: 8px 0 0;

  color: var(--text-gray);

  font-size: 14px;

  font-weight: 600;

}



.page-hero {

  max-width: var(--site-width);

  margin: 0 auto;

  padding: 64px 16px 48px;

  text-align: center;

}



.page-hero h1,

.contact-form h1 {

  margin: 0;

  font-size: 45px;

  font-weight: 600;

  line-height: 55px;

}



.questions {

  max-width: var(--site-width);

  margin: 0 auto 100px;

  padding: 0 16px;

}



.questions > h2 {

  margin-bottom: 40px;

}



.contact-page {

  display: grid;

  max-width: var(--site-width);

  gap: 80px;

  margin: 0 auto;

  padding: 58px 16px 100px;

}



.contact-form {

  width: min(100%, 640px);

  margin: 0 auto;

  padding: 40px;

  border: 1px solid var(--border-blue-50);

  border-radius: 16px;

  background: #fff;

  box-shadow: var(--shadow-toolbar);

}



.contact-form > p {

  margin: 12px 0 32px;

  color: var(--text-gray);

  font-size: 16px;

  line-height: 24px;

}



.contact-form label {

  display: grid;

  gap: 8px;

  margin-bottom: 18px;

}



.contact-form label span {

  display: flex;

  justify-content: space-between;

  color: var(--text-gray);

  font-size: 14px;

  font-weight: 500;

}



.contact-form input,

.contact-form select,

.contact-form textarea {

  width: 100%;

  border: 1px solid var(--border-gray-40);

  border-radius: var(--radius-control);

  background: #fff;

  color: var(--text-black-100);

  font-size: 14px;

  line-height: 20px;

  outline: none;

  transition:

    border-color 0.2s ease,

    box-shadow 0.2s ease;

}



.contact-form input,

.contact-form select {

  height: 50px;

  padding: 0 14px;

}



.contact-form textarea {

  min-height: 160px;

  padding: 14px;

  resize: vertical;

}



.contact-form input:focus,

.contact-form select:focus,

.contact-form textarea:focus {

  border-color: var(--background-blue);

  box-shadow: 0 0 0 4px rgba(36, 138, 246, 0.12);

}



.form-message {

  margin: 14px 0 0;

  color: var(--icons-green-100);

  font-size: 14px;

  font-weight: 500;

}



.toast-message {

  position: fixed;

  z-index: 240;

  right: 18px;

  bottom: 18px;

  max-width: min(360px, calc(100vw - 36px));

  padding: 12px 14px;

  border-radius: var(--radius-control);

  background: #111827;

  color: #fff;

  box-shadow: var(--shadow-toolbar);

  font-size: 14px;

  line-height: 20px;

  opacity: 0;

  transform: translateY(8px);

  transition:

    opacity 0.22s ease,

    transform 0.22s ease;

}



.toast-message.is-visible {

  opacity: 1;

  transform: translateY(0);

}



.tool-page {

  max-width: var(--site-width);

  margin: 0 auto;

  padding: 56px 16px 100px;

}



.tool-workspace {

  overflow: hidden;

  border: 1px solid var(--border-blue-50);

  border-radius: 18px;

  background:

    radial-gradient(circle at 9% 0, rgba(36, 138, 246, 0.12), transparent 26%),

    radial-gradient(

      circle at 92% 18%,

      rgba(218, 45, 38, 0.08),

      transparent 30%

    ),

    #fff;

  box-shadow: var(--shadow-toolbar);

}



.tool-workspace__header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 16px;

  padding: 18px 24px;

  border-bottom: 1px solid var(--border-blue-50);

}



.tool-workspace__header .button svg {

  transform: rotate(90deg);

}



.tool-workspace__badge {

  padding: 6px 10px;

  border-radius: 999px;

  background: var(--background-blue-01);

  color: var(--background-blue);

  font-size: 12px;

  font-weight: 700;

  text-transform: uppercase;

}



.tool-workspace__hero {

  display: grid;

  grid-template-columns: 72px minmax(0, 1fr);

  gap: 18px;

  padding: 32px 32px 8px;

}



.tool-workspace__icon {

  display: grid;

  width: 72px;

  height: 72px;

  place-items: center;

  border-radius: 16px;

  background: var(--background-blue-01);

  color: var(--background-blue);

}



.tool-workspace h1 {

  margin: 0 0 8px;

  font-size: 45px;

  font-weight: 600;

  line-height: 55px;

}



.tool-workspace__hero p {

  max-width: 720px;

  margin: 0;

  color: var(--text-gray);

  font-size: 17px;

  line-height: 26px;

}



.tool-builder {

  display: grid;

  grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.75fr);

  gap: 24px;

  padding: 32px;

  align-items: start;

}



.tool-stage-panel {

  border: 1px solid var(--border-blue-50);

  border-radius: 14px;

  background: rgba(255, 255, 255, 0.95);

  padding: 16px;

  box-shadow: var(--shadow-small);

  min-height: 440px;

  display: flex;

  flex-direction: column;

}



.tool-upload-panel__drop {

  display: grid;

  min-height: 400px;

  place-items: center;

  align-content: center;

  gap: 12px;

  border: 2px dashed var(--border-blue-40);

  border-radius: 12px;

  color: var(--text-gray);

  cursor: pointer;

  text-align: center;

  transition:

    background-color 0.2s ease,

    border-color 0.2s ease,

    transform 0.2s ease;

  background: #fbfdff;

}



.tool-upload-panel__drop:hover,

.tool-stage-panel.is-drag-active .tool-upload-panel__drop {

  border-color: var(--background-blue);

  background: #f1f7ff;

  transform: translateY(-1px);

}



.tool-upload-panel__drop > span:first-child {

  color: var(--background-blue);

}



.tool-upload-panel__drop .button--primary,

.tool-upload-panel__drop .button--primary span {

  color: #ffffff !important;

}



.tool-upload-panel__drop strong {

  color: var(--text-black-100);

  font-size: 20px;

  line-height: 28px;

}



.tool-upload-panel__drop small {

  max-width: 420px;

  color: var(--text-gray-70);

  font-size: 13px;

  line-height: 18px;

}



.tool-stage-preview {

  display: flex;

  flex-direction: column;

  width: 100%;

}



.tool-stage-preview__header {

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 12px;

  margin-bottom: 14px;

  padding-bottom: 12px;

  border-bottom: 1px solid var(--border-blue-50);

  flex-wrap: wrap;

}



.tool-stage-preview__info {

  display: flex;

  align-items: center;

  gap: 8px;

  flex-wrap: wrap;

}



.tool-stage-preview__icon {

  color: var(--background-blue);

  display: inline-flex;

}



.tool-stage-preview__name {

  font-weight: 700;

  color: var(--text-black-100);

  font-size: 14px;

  max-width: 220px;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

}



.tool-stage-preview__actions {

  display: flex;

  align-items: center;

  gap: 8px;

  flex-wrap: wrap;

}



.tool-stage-preview__badge {

  display: inline-flex;

  align-items: center;

  padding: 3px 8px;

  border-radius: 6px;

  background: #f0f4f8;

  color: var(--text-gray);

  font-size: 11px;

  font-weight: 600;

}



.tool-stage-preview__badge--batch {

  background: rgba(36, 138, 246, 0.12);

  color: var(--background-blue);

  font-weight: 700;

}



/* Batch Gallery Strip */

.tool-batch-strip {

  margin-top: 14px;

  background: #ffffff;

  border: 1px solid var(--border-blue-50);

  border-radius: 10px;

  padding: 12px 14px;

}



.tool-batch-strip__header {

  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-bottom: 10px;

  gap: 8px;

  flex-wrap: wrap;

}



.tool-batch-strip__title {

  display: inline-flex;

  align-items: center;

  gap: 6px;

  font-size: 13px;

  font-weight: 700;

  color: var(--text-black-100);

}



.tool-batch-strip__hint {

  font-size: 11px;

  color: var(--text-gray);

}



.tool-batch-strip__list {

  display: flex;

  gap: 10px;

  overflow-x: auto;

  padding-bottom: 6px;

  scrollbar-width: thin;

}



.tool-batch-strip__list::-webkit-scrollbar {

  height: 6px;

}



.tool-batch-strip__list::-webkit-scrollbar-thumb {

  background: #d0d7de;

  border-radius: 3px;

}



.tool-batch-card {

  display: flex;

  align-items: center;

  gap: 8px;

  padding: 6px 10px;

  background: #f8fafc;

  border: 1px solid #e2e8f0;

  border-radius: 8px;

  cursor: pointer;

  flex-shrink: 0;

  transition: all 0.15s ease;

  user-select: none;

}



.tool-batch-card:hover {

  background: #f1f5f9;

  border-color: #cbd5e1;

}



.tool-batch-card.is-active {

  background: #eef5ff;

  border-color: var(--background-blue);

  box-shadow: 0 0 0 1px var(--background-blue);

}



.tool-batch-card__thumb {

  width: 36px;

  height: 36px;

  border-radius: 6px;

  object-fit: cover;

  background: #e2e8f0;

  flex-shrink: 0;

}



.tool-batch-card__details {

  display: flex;

  flex-direction: column;

  max-width: 140px;

}



.tool-batch-card__name {

  font-size: 12px;

  font-weight: 600;

  color: var(--text-black-100);

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}



.tool-batch-card__size {

  font-size: 10px;

  color: var(--text-gray);

}



.tool-batch-card__remove {

  background: none;

  border: none;

  color: #94a3b8;

  cursor: pointer;

  padding: 2px 4px;

  border-radius: 4px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  margin-left: 2px;

  transition: color 0.15s, background 0.15s;

}



.tool-batch-card__remove:hover {

  color: #ef4444;

  background: #fee2e2;

}



/* Bulk Processing Notice in Sidebar */

.tool-batch-notice {

  display: flex;

  align-items: flex-start;

  gap: 12px;

  padding: 12px 14px;

  background: #f0f7ff;

  border: 1px solid rgba(36, 138, 246, 0.25);

  border-radius: 8px;

  margin-bottom: 16px;

}



.tool-batch-notice__icon {

  color: var(--background-blue);

  flex-shrink: 0;

  margin-top: 2px;

}



.tool-batch-notice strong {

  display: block;

  font-size: 13px;

  color: #1e3a8a;

  margin-bottom: 2px;

}



.tool-batch-notice p {

  margin: 0;

  font-size: 12px;

  color: #3b5998;

  line-height: 1.4;

}



.tool-stage-canvas-wrap {

  position: relative;

  overflow: auto;

  display: flex;

  justify-content: center;

  align-items: center;

  background: #f3f6f9 repeating-conic-gradient(#e5ebf1 0% 25%, #ffffff 0% 50%) 50% / 18px 18px;

  padding: 20px;

  border-radius: 12px;

  border: 1px solid var(--border-blue-40);

  min-height: 380px;

  max-height: 580px;

}



.tool-stage-canvas-box {

  position: relative;

  display: inline-block;

  line-height: 0;

  max-width: 100%;

}



.tool-stage-canvas-box canvas {

  display: block;

  max-width: 100%;

  max-height: 500px;

  width: auto;

  height: auto;

  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);

  border-radius: 4px;

}



.tool-stage-overlay {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  pointer-events: none;

}



.tool-stage-overlay.is-editor,

.tool-workspace[data-tool-id="image-editor"] .tool-stage-overlay {

  pointer-events: auto;

  cursor: crosshair;

}



/* Interactive Crop Box Overlay */

.crop-rect {

  position: absolute;

  pointer-events: auto;

  cursor: move;

  border: 2px dashed #248af6;

  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.52);

  touch-action: none;

}



.crop-rect__handle {

  position: absolute;

  width: 12px;

  height: 12px;

  background: #fff;

  border: 2px solid #248af6;

  border-radius: 2px;

  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);

  z-index: 5;

}



.crop-rect__handle--tl { top: -6px; left: -6px; cursor: nwse-resize; }

.crop-rect__handle--tr { top: -6px; right: -6px; cursor: nesw-resize; }

.crop-rect__handle--bl { bottom: -6px; left: -6px; cursor: nesw-resize; }

.crop-rect__handle--br { bottom: -6px; right: -6px; cursor: nwse-resize; }

.crop-rect__handle--tc { top: -6px; left: calc(50% - 6px); cursor: ns-resize; }

.crop-rect__handle--bc { bottom: -6px; left: calc(50% - 6px); cursor: ns-resize; }

.crop-rect__handle--ml { top: calc(50% - 6px); left: -6px; cursor: ew-resize; }

.crop-rect__handle--mr { top: calc(50% - 6px); right: -6px; cursor: ew-resize; }



.crop-rect__badge {

  position: absolute;

  bottom: 8px;

  right: 8px;

  background: rgba(20, 31, 72, 0.85);

  color: #fff;

  font-size: 11px;

  font-weight: 600;

  padding: 2px 7px;

  border-radius: 4px;

  pointer-events: none;

  white-space: nowrap;

}



.tool-crop-info-card {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 10px 14px;

  background: #f0f7ff;

  border: 1px solid #c8e0fc;

  border-radius: 8px;

  margin-bottom: 16px;

  font-size: 13px;

  color: var(--background-blue);

}



.tool-options {

  border: 1px solid var(--border-blue-50);

  border-radius: 14px;

  background: rgba(255, 255, 255, 0.95);

  box-shadow: var(--shadow-small);

  display: flex;

  flex-direction: column;

  padding: 22px;

}



.tool-options__header {

  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-bottom: 18px;

}



.tool-options__header h2 {

  margin: 0;

  font-size: 20px;

  font-weight: 600;

  line-height: 28px;

}



.tool-options__hint {

  font-size: 11px;

  font-weight: 700;

  text-transform: uppercase;

  color: var(--background-blue);

  background: var(--background-blue-01);

  padding: 3px 8px;

  border-radius: 999px;

  letter-spacing: 0.5px;

}



.tool-field__val-display {

  font-size: 13px;

  font-weight: 700;

  color: var(--background-blue);

}



.tool-range-row {

  display: flex;

  align-items: center;

  gap: 12px;

}



.tool-range-row input[type="range"] {

  flex: 1;

  accent-color: var(--background-blue);

  cursor: pointer;

  height: 6px;

}



.tool-color-picker {

  width: 100%;

  height: 40px;

  padding: 2px;

  border: 1px solid var(--border-blue-50);

  border-radius: 8px;

  cursor: pointer;

  background: #fff;

}



.tool-field {

  display: grid;

  gap: 8px;

  margin-bottom: 16px;

}



.tool-field span,

.tool-check span {

  color: var(--text-gray);

  font-size: 14px;

  font-weight: 500;

}



.tool-field input,

.tool-field select {

  width: 100%;

  height: 48px;

  padding: 0 14px;

  border: 1px solid var(--border-gray-40);

  border-radius: var(--radius-control);

  background: #fff;

  outline: none;

}



.tool-field input:focus,

.tool-field select:focus {

  border-color: var(--background-blue);

  box-shadow: 0 0 0 4px rgba(36, 138, 246, 0.12);

}



.tool-check {

  display: grid;

  grid-template-columns: 18px minmax(0, 1fr);

  gap: 10px;

  align-items: start;

  margin-bottom: 16px;

}



.tool-check input {

  width: 18px;

  height: 18px;

  margin: 1px 0 0;

  accent-color: var(--background-blue);

}



.tool-options__note {

  margin: 14px 0 0;

  color: var(--text-gray-70);

  font-size: 12px;

  line-height: 18px;

}



.tool-options__note--top {

  margin-top: 0;

  padding: 12px;

  border-radius: 10px;

  background: #f8fbff;

  color: var(--text-gray);

}



.image-editor-panel {

  overflow: hidden;

  border: 1px solid var(--border-blue-50);

  border-radius: 16px;

  background: #fff;

  box-shadow: var(--shadow-toolbar);

}



.image-editor-toolbar {

  display: flex;

  flex-wrap: wrap;

  gap: 8px;

  padding: 14px;

  border-bottom: 1px solid var(--border-blue-50);

  background: #f8fbff;

}



.image-editor-tool {

  display: inline-flex;

  min-height: 38px;

  align-items: center;

  gap: 8px;

  padding: 8px 12px;

  border: 1px solid var(--border-blue-50);

  border-radius: var(--radius-control);

  background: #fff;

  color: var(--text-gray-90);

  cursor: pointer;

  font-size: 13px;

  font-weight: 600;

  transition:

    background-color 0.2s ease,

    border-color 0.2s ease,

    color 0.2s ease;

}



.image-editor-tool:hover,

.image-editor-tool.is-active {

  border-color: var(--background-blue);

  background: var(--background-blue-01);

  color: var(--background-blue);

}



.image-editor-shell {

  display: grid;

  grid-template-columns: minmax(0, 1fr) 320px;

  min-height: 520px;

}



.image-editor-properties {

  overflow: auto;

  max-height: 720px;

  padding: 18px;

  background: #fff;

  border-left: 1px solid var(--border-blue-50);

}



.image-editor-properties h2 {

  margin: 0 0 14px;

  font-size: 18px;

  line-height: 24px;

}



.image-editor-preview {

  min-width: 0;

  background:

    linear-gradient(45deg, rgba(224, 237, 255, 0.55) 25%, transparent 25%),

    linear-gradient(-45deg, rgba(224, 237, 255, 0.55) 25%, transparent 25%),

    linear-gradient(45deg, transparent 75%, rgba(224, 237, 255, 0.55) 75%),

    linear-gradient(-45deg, transparent 75%, rgba(224, 237, 255, 0.55) 75%),

    #f6f8f9;

  background-position:

    0 0,

    0 8px,

    8px -8px,

    -8px 0;

  background-size: 16px 16px;

}



.image-editor-preview__bar {

  display: flex;

  min-height: 46px;

  align-items: center;

  justify-content: space-between;

  gap: 16px;

  padding: 0 18px;

  border-bottom: 1px solid var(--border-blue-50);

  background: rgba(255, 255, 255, 0.86);

  color: var(--text-gray);

  font-size: 13px;

  font-weight: 600;

}



.image-editor-canvas-wrap {

  position: relative;

  display: grid;

  min-height: 520px;

  place-items: start center;

  padding: 28px;

  overflow: auto;

}



.image-editor-canvas-wrap canvas {

  max-width: 100%;

  height: auto;

  border-radius: 6px;

  background: #fff;

  box-shadow: 0 12px 32px rgba(25, 25, 26, 0.16);

}



.image-editor-empty {

  position: absolute;

  inset: 0;

  display: grid;

  place-items: center;

  color: var(--text-gray-70);

  font-size: 14px;

  font-weight: 600;

  text-align: center;

}



.image-editor-group {

  padding: 14px 10px;

  border-top: 1px solid var(--border-blue-50);

  border-radius: 10px;

  transition: background-color 0.25s ease, box-shadow 0.25s ease;

}



.image-editor-group.is-highlighted {

  background: var(--background-blue-01);

  box-shadow: 0 0 0 1px var(--background-blue-30, rgba(36, 138, 246, 0.3));

}



.image-editor-group:first-of-type {

  border-top: 0;

}



.image-editor-group h3 {

  margin: 0 0 12px;

  font-size: 14px;

  font-weight: 700;

  line-height: 20px;

}



.tool-result {

  margin: 16px 0 0;

  padding: 16px;

  border: 1px solid var(--border-blue-50);

  border-radius: 12px;

  background: #f8fbff;

}



.tool-result__status {

  color: var(--text-gray);

  font-size: 13px;

  font-weight: 600;

}



.tool-result__bar {

  overflow: hidden;

  height: 8px;

  margin-top: 10px;

  border-radius: 999px;

  background: #dcecff;

}



.tool-result__bar span {

  display: block;

  width: 0%;

  height: 100%;

  border-radius: inherit;

  background: var(--background-blue);

  transition: width 0.35s ease;

}



.tool-result__done {

  margin-top: 14px;

}



.tool-result__done h2 {

  margin: 0 0 4px;

  font-size: 18px;

  line-height: 24px;

  color: var(--text-black-100);

}



.tool-result__done p {

  margin: 0 0 12px;

  color: var(--text-gray);

  font-size: 13px;

  line-height: 20px;

}



.tool-result__done .button {

  width: 100%;

}



.related-tools {

  margin-top: 36px;

}



.related-tools h2 {

  margin: 0 0 16px;

  font-size: 24px;

  line-height: 32px;

}



.tool-content,

.related-tools__content {

  margin: 36px 0 0;

  color: #000000;

  font-size: 15px;

  line-height: 24px;

}



.tool-content h1,

.tool-content h2,

.tool-content h3,

.tool-content h4,

.tool-content h5,

.tool-content h6,

.tool-content p,

.tool-content span,

.tool-content li,

.related-tools__content h1,

.related-tools__content h2,

.related-tools__content h3,

.related-tools__content h4,

.related-tools__content h5,

.related-tools__content h6,

.related-tools__content p,

.related-tools__content span,

.related-tools__content li {

  color: #000000;

}



.tool-content > :first-child,

.related-tools__content > :first-child {

  margin-top: 0;

}



.tool-content > :last-child,

.related-tools__content > :last-child {

  margin-bottom: 0;

}



.tool-content + .related-tools {

  margin-top: 48px;

}



.related-tools__grid {

  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 12px;

}



.related-tools__grid a {

  display: flex;

  min-height: 56px;

  align-items: center;

  gap: 12px;

  padding: 14px 16px;

  border: 1px solid var(--border-blue-50);

  border-radius: var(--radius-card);

  background: #fff;

  box-shadow: var(--shadow-small);

  font-size: 14px;

  font-weight: 600;

}



.related-tools__grid a span {

  color: var(--background-blue);

}



.static-page {

  padding: 68px 20px 90px;

  background: #fff;

}



.static-page__inner {

  width: min(920px, 100%);

  margin: 0 auto;

}



.static-page__inner > h1 {

  max-width: 760px;

  margin: 0 0 24px;

  color: var(--text-black-100);

  font-size: 44px;

  font-weight: 700;

  line-height: 54px;

}



.static-page__content {

  color: var(--text-gray);

  font-size: 16px;

  line-height: 28px;

}



.static-page__content .content-section {

  padding: 24px 0;

  border-top: 1px solid var(--border-blue-50);

}



.static-page__content h2,

.static-page__content h3 {

  margin: 0 0 12px;

  color: var(--text-black-100);

  font-weight: 700;

}



.static-page__content h2 {

  font-size: 28px;

  line-height: 36px;

}



.static-page__content h3 {

  font-size: 21px;

  line-height: 30px;

}



.static-page__content p,

.static-page__content ul,

.static-page__content ol {

  margin: 0 0 18px;

}



.static-page__content li + li {

  margin-top: 8px;

}



@media (max-width: 1299.98px) {

  .tools-grid {

    grid-template-columns: repeat(2, 1fr);

    padding: 0 16px;

  }



  .advantages__sticky {

    width: 500px;

    height: 350px;

  }

}



@media (max-width: 1023.98px) {

  .top-banner {

    padding: 0 16px;

  }



  .site-header {

    padding: 19px 16px;

  }



  .tool-builder {

    grid-template-columns: 1fr;

  }



  .image-editor-shell {

    grid-template-columns: 140px minmax(0, 1fr);

  }



  .image-editor-properties {

    grid-column: 1 / -1;

    border-top: 1px solid var(--border-blue-50);

    border-left: 0;

  }



  .related-tools__grid {

    grid-template-columns: repeat(2, minmax(0, 1fr));

  }

}



@media (max-width: 899.98px) {

  .advantages__sticky {

    width: 350px;

    height: 240px;

  }

}



@media (max-width: 766.98px) {

  html {

    scroll-padding-top: 112px;

  }



  body {

    padding-top: 100px;

  }



  .desktop-only,

  .top-banner,

  .site-header__page-link,

  .site-header__tools-desktop,

  .advantages__sticky,

  .upload-zone__desktop-title {

    display: none;

  }



  .mobile-only,

  .mobile-support-bar,

  .site-header__tools-mobile,

  .burger-button,

  .upload-zone__mobile-title {

    display: flex;

  }



  .mobile-support-bar {

    position: fixed;

    z-index: var(--z-header);

    top: 0;

    right: 0;

    left: 0;

    width: 100%;

    height: 36px;

    align-items: center;

    justify-content: center;

    gap: 4px;

    background: var(--background-gray-10);

    font-size: 14px;

    font-weight: 500;

    line-height: 20px;

  }



  .mobile-support-bar a {

    text-decoration: underline;

  }



  .site-header {

    position: fixed;

    right: 0;

    left: 0;

    top: 36px;

    height: 64px;

    min-height: 64px;

    padding: 12px 16px;

  }



  .logo__icon {

    width: 26px;

    height: 26px;

    font-size: 9px;

  }



  .logo__wordmark {

    font-size: 24px;

    line-height: 26px;

  }



  .site-header__actions {

    gap: 12px;

  }



  .site-header__tools-mobile {

    font-size: 12px;

    font-weight: 600;

  }



  .burger-button {

    display: flex;

  }



  .mobile-drawer {

    position: fixed;

    z-index: var(--z-header-drawer);

    top: 100px;

    right: 16px;

    display: grid;

    width: min(260px, calc(100vw - 32px));

    gap: 4px;

    padding: 12px;

    border: 1px solid var(--border-gray-70);

    border-radius: 12px;

    background: #fff;

    box-shadow: var(--shadow-toolbar);

  }



  .mobile-drawer a {

    padding: 10px 12px;

    border-radius: 8px;

    font-size: 14px;

  }



  .mobile-drawer a:hover {

    background: var(--control-tertiary-initial);

  }



  .tools-overlay {

    inset: 100px 0 0;

  }



  .tools-menu {

    top: 100px;

    max-height: calc(100vh - 100px);

    overflow-y: auto;

  }



  .tools-menu__grid {

    grid-template-columns: 1fr;

  }



  .tools-menu__all {

    border-right: 0;

  }



  .tools-menu__columns {

    grid-template-columns: 1fr;

    gap: 24px;

    padding: 24px 24px 32px;

  }



  .site-ad {

    width: calc(100% - 32px);

    margin: 28px auto;

    padding: 0;

  }



  .site-ad__inner {

    min-height: 100px;

    max-width: 100%;

  }



  .site-ad--tools_grid,

  .site-ad--related_tools {

    width: 100%;

    margin: 8px 0;

  }



  .site-ad--after_upload,

  .site-ad--after_tools,

  .site-ad--before_faq {

    margin-top: 32px;

    margin-bottom: 48px;

  }



  .site-ad--tool_workspace {

    width: 100%;

    margin: 18px 0 0;

  }



  .hero-surface {

    padding-bottom: 56px;

  }



  .hero {

    max-width: min(100%, 380px);

    margin-bottom: 32px;

    padding-top: 28px;

  }



  .hero h1 {

    margin-bottom: 12px;

    font-size: 32px;

    line-height: 40px;

  }



  .hero p {

    font-size: 14px;

    line-height: 20px;

  }



  .home-hero-media {

    margin-bottom: 24px;

  }



  .upload {

    padding: 0 16px;

  }



  .blur,

  .upload__blur {

    display: none;

  }



  .upload__box {

    min-height: 529px;

  }



  .upload-zone {

    min-height: 280px;

    padding: 26px 16px;

  }



  .upload-zone__mobile-title {

    margin: 16px 0 20px;

    font-size: 18px;

    line-height: 24px;

  }



  .button--upload {

    width: 122px;

    height: 52px;

    margin-top: 0;

  }



  .upload-zone__description {

    max-width: 291px;

    margin-top: 24px;

  }



  .upload-zone__secure {

    display: none;

  }



  .stats {

    width: 100%;

    justify-content: space-between;

    margin: 56px 0;

    padding: 0 16px;

  }



  .stats article {

    grid-template-columns: 1fr;

    justify-items: center;

    text-align: center;

  }



  .stats article:not(:last-child) {

    margin-right: 0;

  }



  .stats strong {

    margin-top: 8px;

    font-size: 14px;

    line-height: 20px;

  }



  .stats span:last-child {

    max-width: 90px;

  }



  .tools-directory {

    margin-bottom: 56px;

    padding: 0;

  }





  .tools-section {

    margin-bottom: 44px;

    padding: 0 16px;

  }



  .tools-section__header h2 {

    font-size: 22px;

    line-height: 28px;

  }



  .tools-grid {

    width: 100%;

    grid-template-columns: 1fr;

    gap: 12px;

    margin-bottom: 0;

    padding: 0;

  }



  .tool-card {

    height: 104px;

    border: 0;

    box-shadow: none;

  }



  .tool-card--extra {

    display: flex;

  }



  .tools-grid__show {

    display: none;

  }



  .tool-card__icon {

    flex-basis: 40px;

    width: 40px;

    height: 40px;

  }



  .tool-card h2 {

    font-size: 16px;

    line-height: 24px;

  }



  .tool-card p {

    font-size: 13px;

    line-height: 18px;

  }



  .advantages {

    padding: 0 16px;

  }



  .advantages > h2 {

    font-size: 24px;

    line-height: 32px;

  }



  .advantages__subtitle {

    margin-top: 14px;

    font-size: 14px;

    line-height: 20px;

  }



  .advantages__content {

    justify-content: center;

    margin-top: 40px;

  }



  .advantage-item {

    width: 100%;

    min-height: 0;

    gap: 16px;

    margin-bottom: 32px;

  }



  .advantage-item__mobile-visual {

    display: block;

    height: 191px;

  }



  .advantages__image--mobile {

    display: block;

    height: 191px;

    margin-bottom: 16px;

  }



  .advantage-item__mobile-visual .visual-panel {

    min-height: 191px;

    border-radius: 12px;

  }



  .advantage-item__copy {

    padding: 0;

  }



  .advantage-item h3 {

    font-size: 18px;

    line-height: 24px;

  }



  .advantage-item p {

    font-size: 13px;

    line-height: 18px;

  }



  .visual-panel__document {

    top: 52px;

    left: 16px;

    min-height: 120px;

    padding: 16px;

  }



  .visual-panel__rail {

    top: 56px;

    right: 16px;

    gap: 8px;

  }



  .visual-panel__rail span {

    min-height: 28px;

    font-size: 10px;

  }



  .visual-panel__annotation,

  .visual-panel__signature {

    font-size: 10px;

  }



  .advantage-upload {

    width: 100%;

    max-width: 343px;

    margin: 0 auto;

    height: 52px;

  }



  .faq-section {

    margin: 56px 0;

    padding: 0 16px;

  }



  .faq-section > h2,

  .questions > h2 {

    font-size: 24px;

    font-weight: 500;

    line-height: 32px;

  }



  .faq-section > p {

    margin: 12px 0 20px;

    font-size: 14px;

    font-weight: 400;

    line-height: 20px;

  }



  .tabs__list {

    width: 100%;

    overflow-x: auto;

    gap: 8px;

    margin-bottom: 24px;

    padding: 0 0 12px;

    border-radius: 0;

    background: transparent;

    box-shadow: none;

  }



  .tabs__tab {

    border: 1px solid rgba(0, 0, 0, 0.24);

    white-space: nowrap;

  }



  .tabs__glider {

    top: 0;

    height: 42px;

  }



  .accordion {

    gap: 12px;

  }



  .accordion__trigger {

    padding: 16px 12px;

  }



  .accordion__trigger span {

    font-size: 14px;

    line-height: 20px;

  }



  .accordion__content {

    padding: 0 12px 16px;

  }



  .cta-banner {

    min-height: 230px;

    margin-bottom: 56px;

    padding: 32px 8px;

  }



  .cta-banner__left {

    width: 130px;

    height: 140px;

    left: -48px;

    top: 38px;

  }



  .cta-banner__right {

    width: 190px;

    height: 160px;

    right: -114px;

    top: -14px;

  }



  .cta-banner__copy p {

    margin-bottom: 12px;

    font-size: 16px;

    line-height: 24px;

  }



  .cta-banner__copy h2 {

    margin-bottom: 24px;

    padding: 0 20px;

    font-size: 20px;

    line-height: 28px;

  }



  .button--large {

    min-width: 182px;

  }



  .footer {

    padding: 0 16px 28px;

  }



  .footer__top {

    flex-direction: column;

    gap: 28px;

    text-align: center;

  }



  .footer__brand {

    display: grid;

    justify-items: center;

  }



  .footer__brand p {

    max-width: 220px;

    font-size: 11px;

    font-weight: 500;

    line-height: 16px;

  }



  .footer__links {

    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));

    gap: 8px;

    text-align: left;

  }



  .footer h2 {

    font-size: 16px;

    font-weight: 500;

    line-height: 24px;

  }



  .footer a {

    font-size: 12px;

    line-height: 16px;

  }



  .footer__bottom {

    display: block;

    text-align: center;

  }



  .footer__language {

    display: none;

  }



  .page-hero {

    padding: 44px 16px 32px;

  }



  .page-hero h1,

  .contact-form h1 {

    font-size: 32px;

    line-height: 40px;

  }



  .questions {

    margin-bottom: 56px;

  }



  .contact-page {

    padding: 40px 16px 64px;

  }



  .contact-form {

    padding: 24px;

  }



  .tool-page {

    padding: 40px 16px 64px;

  }



  .tool-workspace {

    border-radius: 12px;

  }



  .tool-workspace__header {

    padding: 14px;

  }



  .tool-workspace__hero {

    grid-template-columns: 1fr;

    padding: 24px 18px 0;

  }



  .tool-workspace__icon {

    width: 56px;

    height: 56px;

    border-radius: 12px;

  }



  .tool-workspace h1 {

    font-size: 32px;

    line-height: 40px;

  }



  .tool-workspace__hero p {

    font-size: 14px;

    line-height: 22px;

  }



  .tool-builder {

    grid-template-columns: 1fr;

    gap: 16px;

    padding: 18px;

  }



  .image-editor-toolbar {

    overflow-x: auto;

    flex-wrap: nowrap;

  }



  .image-editor-tool {

    white-space: nowrap;

  }



  .image-editor-shell {

    grid-template-columns: 1fr;

    min-height: 0;

  }



  .image-editor-properties {

    max-height: none;

    border-right: 0;

    border-left: 0;

  }



  .image-editor-canvas-wrap {

    min-height: 420px;

    padding: 18px;

  }



  .tool-upload-panel__drop {

    min-height: 230px;

  }



  .tool-upload-panel__drop strong {

    font-size: 18px;

    line-height: 24px;

  }



  .related-tools__grid {

    grid-template-columns: 1fr;

  }



  .tool-result {

    margin: 0 18px 18px;

  }



  .static-page {

    padding: 44px 18px 64px;

  }



  .static-page__inner > h1 {

    font-size: 32px;

    line-height: 40px;

  }

}



@media (max-width: 423.98px) {

  .logo__wordmark {

    font-size: 22px;

  }



  .site-header__tools-mobile {

    width: auto;

    padding-inline: 10px;

  }



  .footer__links {

    grid-template-columns: 1fr;

    text-align: center;

  }

}



/* Header Dropdown Menu Styles */

.site-header__dropdown {

  position: relative;

  display: inline-block;

}



.site-header__dropdown-trigger {

  display: inline-flex;

  align-items: center;

  gap: 6px;

  background: transparent;

  border: none;

  cursor: pointer;

}



.site-header__dropdown-trigger svg {

  transition: transform 0.2s ease;

}



.site-header__dropdown[data-open] .site-header__dropdown-trigger svg {

  transform: rotate(180deg);

}



.site-header__dropdown-menu {

  position: absolute;

  top: 100%;

  left: 0;

  min-width: 180px;

  background: var(--background-white, #fff);

  border: 1px solid var(--border-blue-50, rgba(36, 138, 246, 0.16));

  border-radius: var(--radius-control, 8px);

  padding: 8px 0;

  margin-top: 8px;

  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);

  z-index: 1000;

  display: grid;

}



.site-header__dropdown-menu a {

  padding: 8px 16px;

  font-size: 14px;

  color: var(--text-black-100, #000);

  transition: background-color 0.2s, color 0.2s;

  font-weight: 500;

}



.site-header__dropdown-menu a:hover {

  background-color: var(--background-blue-01, rgba(36, 138, 246, 0.1));

  color: var(--background-blue, #248AF6);

}



/* Mobile Drawer Dropdown Styles */

.mobile-drawer__dropdown {

  display: grid;

  width: 100%;

}



.mobile-drawer__dropdown-trigger {

  display: flex;

  justify-content: space-between;

  align-items: center;

  width: 100%;

  padding: 10px 16px;

  font-size: 16px;

  font-weight: 600;

  color: inherit;

  background: transparent;

  border: none;

  text-align: left;

  cursor: pointer;

}



.mobile-drawer__dropdown-trigger svg {

  transition: transform 0.2s ease;

}



.mobile-drawer__dropdown[data-open] .mobile-drawer__dropdown-trigger svg {

  transform: rotate(180deg);

}



.mobile-drawer__dropdown-menu {

  display: grid;

  background: rgba(0, 0, 0, 0.02);

  padding-left: 20px;

  border-left: 2px solid var(--background-blue);

  margin: 4px 16px;

}



.mobile-drawer__dropdown-menu a {

  padding: 8px 16px;

  font-size: 14px;

}



/* Interactive Image Editor styles */

.image-editor-overlay {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  user-select: none;

  cursor: crosshair;

}



.image-edit-element {

  position: absolute;

  cursor: move;

  user-select: none;

  box-sizing: border-box;

  border: 1px dashed rgba(36, 138, 246, 0.45);

  padding: 3px 8px;

  border-radius: 4px;

  background: transparent !important;

  box-shadow: none !important;

  transform: translate(-50%, -50%);

  display: inline-block;

  line-height: 1.25 !important;

  white-space: nowrap !important;

  min-width: 30px;

  min-height: 28px;

  transition: border-color 0.15s ease;

}



.image-edit-element span {

  display: inline-block;

  line-height: 1.25 !important;

  white-space: nowrap !important;

  word-break: keep-all;

  overflow-wrap: normal;

  pointer-events: none;

}



.image-edit-element:hover {

  border-color: rgba(36, 138, 246, 0.9);

  background: transparent !important;

  box-shadow: none !important;

  z-index: 100;

}



.image-edit-element.is-active {

  border-color: #248af6;

  border-style: solid;

  background: transparent !important;

  box-shadow: none !important;

  z-index: 101;

}



/* Tool Action Icon Buttons (Rotate, Flip, etc.) */

.tool-action-buttons-group {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(95px, 1fr));

  gap: 8px;

  margin-bottom: 12px;

}



.tool-action-card-btn {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 6px;

  padding: 12px 8px;

  background: #ffffff;

  border: 1.5px solid var(--border-blue-50);

  border-radius: 10px;

  cursor: pointer;

  color: var(--text-gray-90);

  font-size: 12px;

  font-weight: 600;

  transition: all 0.18s ease;

  user-select: none;

}



.tool-action-card-btn:hover {

  border-color: var(--background-blue);

  background: var(--background-blue-01);

  color: var(--background-blue);

  transform: translateY(-1px);

}



.tool-action-card-btn.is-active {

  border-color: var(--background-blue);

  background: var(--background-blue-01);

  color: var(--background-blue);

  box-shadow: 0 0 0 3px rgba(36, 138, 246, 0.16);

}



.tool-action-card-btn svg {

  stroke-width: 2.2;

}



.image-edit-element .delete-btn {

  position: absolute;

  top: -8px;

  right: -8px;

  width: 18px;

  height: 18px;

  border-radius: 50%;

  background: #da2d26;

  color: white;

  border: none;

  font-size: 11px;

  font-weight: bold;

  cursor: pointer;

  display: none;

  align-items: center;

  justify-content: center;

  box-shadow: 0 1px 4px rgba(0,0,0,0.2);

  line-height: 1;

}



.image-edit-element:hover .delete-btn,

.image-edit-element.is-active .delete-btn {

  display: flex;

}



.image-edit-element[data-type="text"] {

  font-family: inherit;

  font-weight: bold;

}



.exif-card {

  background: #f8fbff;

  border: 1px solid var(--border-blue-50);

  border-radius: 8px;

  padding: 10px 14px;

}

.exif-card__label {

  font-size: 11px;

  font-weight: 600;

  color: var(--text-gray);

  text-transform: uppercase;

}

.exif-card__val {

  font-size: 14px;

  font-weight: 700;

  color: #141f48;

  margin-top: 4px;

  word-break: break-word;

}

.exif-table th,

.exif-table td {

  padding: 8px 12px;

  border-bottom: 1px solid #edf2f7;

}







/* ==========================================================================
   ENHANCED VISIBLE TABLE BORDERS & ARTICLE STYLES (AdSense Quality & UX)
   ========================================================================== */

table, .article-table, .static-page table, .tool-content table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 24px 0 !important;
    background: #ffffff !important;
    border: 2px solid #cbd5e1 !important;
    border-radius: 6px !important;
    font-size: 15px !important;
}

table th, .article-table th, .static-page table th, .tool-content table th {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
    font-weight: 700 !important;
    text-align: left !important;
    padding: 14px 18px !important;
    border: 1px solid #cbd5e1 !important;
}

table td, .article-table td, .static-page table td, .tool-content table td {
    padding: 12px 18px !important;
    border: 1px solid #cbd5e1 !important;
    color: #334155 !important;
    vertical-align: top !important;
    line-height: 1.6 !important;
}

table tr:nth-child(even), .article-table tr:nth-child(even), .static-page table tr:nth-child(even) {
    background-color: #f8fafc !important;
}

table tr:hover, .article-table tr:hover, .static-page table tr:hover {
    background-color: #f1f5f9 !important;
}

.table-responsive {
    width: 100% !important;
    overflow-x: auto !important;
    margin: 24px 0 !important;
    border-radius: 8px !important;
    -webkit-overflow-scrolling: touch !important;
}

.static-page__content h2 {
    margin-top: 36px !important;
    margin-bottom: 16px !important;
    color: #0f172a !important;
    font-size: 24px !important;
    font-weight: 700 !important;
}

.static-page__content h3 {
    margin-top: 24px !important;
    margin-bottom: 12px !important;
    color: #1e293b !important;
    font-size: 19px !important;
    font-weight: 600 !important;
}

.static-page__content p {
    line-height: 1.8 !important;
    color: #334155 !important;
    margin-bottom: 16px !important;
    font-size: 16px !important;
}

.static-page__content ul, .static-page__content ol {
    margin-bottom: 24px !important;
    padding-left: 28px !important;
    line-height: 1.8 !important;
    color: #334155 !important;
    font-size: 16px !important;
}

.static-page__content li {
    margin-bottom: 8px !important;
}

.static-page__content code, .static-page__content pre {
    background: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 6px !important;
    font-family: monospace !important;
}

.static-page__content pre {
    padding: 16px !important;
    overflow-x: auto !important;
    margin: 20px 0 !important;
}

.blog-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.blog-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(0,0,0,0.08) !important;
}