/* site palette */
html:root {
    --bg: #170F1E;
    --surface: #271A33;
    --surface-alt: #1F1428;
    --text: #F5F3F6;
    --text-muted: #B8B0BF;
    --border: #3B3243;
    --primary: #A75DEA;
    --primary-hover: #BB81EF;
    --on-primary: #111111;
    --primary-text: #AC66EB;
    --accent: #ABEB94;
    --on-accent: #111111;
    --accent-text: #ABEB94;
    --dark-band: #0E0A12;
    --on-dark: #FFFFFF;
    --on-dark-muted: #BDB6C3;
    --brand-btn-bg: #111111;
    --brand-btn-text: #A75DEA;
    --section-alt-bg: #1F1428;
    --dark-band-bg: #0E0A12;
    --brand-band-bg: #A75DEA;
    --hero-bg: #170F1E;
}

/* /site palette */

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    font-family: 'Kreon', serif;
    background-color: var(--bg, #170F1E);
    color: var(--text, #F5F3F6);
    margin: 0;
    padding: 0;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

.text-muted {
    color: var(--text-muted, #B8B0BF) !important;
}

.tz-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--primary, #A75DEA);
    color: var(--on-primary, #111111);
    padding: 0.75rem 1.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 6px;
    border: none;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

.tz-btn:hover {
    background-color: var(--primary-hover, #BB81EF);
    color: var(--on-primary, #111111);
}

.tz-btn-alt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    color: var(--primary-text, #AC66EB);
    padding: 0.75rem 1.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 6px;
    border: 1px solid var(--primary, #A75DEA);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.tz-btn-alt:hover {
    background-color: var(--primary, #A75DEA);
    color: var(--on-primary, #111111);
}

.tz-card {
    background-color: var(--surface, #271A33);
    color: var(--text, #F5F3F6);
    border: 1px solid var(--border, #3B3243);
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
    transition: transform 0.3s ease-out, border-color 0.3s ease-out, box-shadow 0.3s ease-out;
}

.tz-card:hover {
    transform: translateY(-4px);
    border-color: var(--primary, #A75DEA);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.tz-media {
    aspect-ratio: 16 / 9;
    border-radius: 6px;
    border: 1px solid var(--border, #3B3243);
    overflow: hidden;
    flex-shrink: 0;
}

.tz-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tz-eyebrow {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-weight: 600;
    color: var(--primary, #A75DEA);
    margin-bottom: 0.5rem;
    display: block;
}

.tz-title {
    font-size: 1.875rem;
    font-weight: 700;
    color: var(--text, #F5F3F6);
    line-height: 1.25;
    letter-spacing: -0.02em;
}

@media (min-width: 640px) {
    .tz-title {
        font-size: 2.25rem;
    }
}

.tz-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    background-color: var(--primary, #A75DEA);
    color: var(--on-primary, #111111);
}

.tz-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--primary-text, #AC66EB);
}

.tz-section {
    background-color: var(--bg, #170F1E);
    padding-top: 4rem;
    padding-bottom: 4rem;
}

@media (min-width: 640px) {
    .tz-section {
        padding-top: 6rem;
        padding-bottom: 6rem;
    }
}

.tz-section-alt {
    background-color: var(--section-alt-bg, var(--surface-alt, #1F1428));
    padding-top: 4rem;
    padding-bottom: 4rem;
}

@media (min-width: 640px) {
    .tz-section-alt {
        padding-top: 6rem;
        padding-bottom: 6rem;
    }
}

.tz-section-dark {
    background-color: var(--dark-band-bg, var(--dark-band, #0E0A12));
    color: var(--on-dark, #FFFFFF);
    padding-top: 4rem;
    padding-bottom: 4rem;
}

@media (min-width: 640px) {
    .tz-section-dark {
        padding-top: 6rem;
        padding-bottom: 6rem;
    }
}

.tz-section-dark .tz-title,
.tz-on-dark .tz-title {
    color: var(--on-dark, #FFFFFF);
}

.tz-section-dark .tz-eyebrow,
.tz-on-dark .tz-eyebrow {
    color: var(--primary, #A75DEA);
}

.tz-section-dark .tz-btn-alt,
.tz-on-dark .tz-btn-alt {
    color: var(--on-dark, #FFFFFF);
    border-color: var(--on-dark, #FFFFFF);
}

.tz-section-dark .tz-btn-alt:hover,
.tz-on-dark .tz-btn-alt:hover {
    background-color: var(--on-dark, #FFFFFF);
    color: var(--dark-band, #0E0A12);
}

.tz-section-dark .tz-card,
.tz-on-dark .tz-card {
    background-color: var(--surface, #271A33);
    color: var(--text, #F5F3F6);
    border-color: var(--border, #3B3243);
}

.tz-section-dark .tz-card .tz-title,
.tz-on-dark .tz-card .tz-title {
    color: var(--text, #F5F3F6);
}

.tz-section-brand {
    background-color: var(--brand-band-bg, var(--primary, #A75DEA));
    color: var(--on-primary, #111111);
    padding-top: 4rem;
    padding-bottom: 4rem;
}

@media (min-width: 640px) {
    .tz-section-brand {
        padding-top: 6rem;
        padding-bottom: 6rem;
    }
}

.tz-section-brand .tz-title {
    color: var(--on-primary, #111111);
}

.tz-section-brand .tz-btn {
    background-color: var(--brand-btn-bg, #111111);
    color: var(--brand-btn-text, #A75DEA);
}

.tz-section-brand .tz-btn:hover {
    background-color: var(--surface, #271A33);
    color: var(--primary-hover, #BB81EF);
}

.tz-section-brand .tz-btn-alt {
    color: var(--on-primary, #111111);
    border-color: var(--on-primary, #111111);
}

.tz-section-brand .tz-btn-alt:hover {
    background-color: var(--on-primary, #111111);
    color: var(--primary, #A75DEA);
}

.tz-on-dark {
    color: var(--on-dark, #FFFFFF);
}

.tz-on-dark p {
    color: var(--on-dark-muted, #BDB6C3);
}

/* ===== header ===== */
.repeatrule-header {
    font-family: 'Kreon', serif;
}

.repeatrule-header a {
    text-decoration: none;
}

.repeatrule-header img {
    max-width: 44px;
    max-height: 44px;
}

/* ===== hero ===== */
.hero-section {
    font-family: 'Kreon', serif;
    position: relative;
}

.hero-section h1 {
    overflow-wrap: anywhere;
}

.hero-section p {
    overflow-wrap: anywhere;
}

/* ===== founder-appeal ===== */
.founder-appeal-section {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.founder-appeal-section .founder-media-col {
    width: 100%;
}

.founder-appeal-section .founder-frame {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}

.founder-appeal-section .founder-plate {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

@media (max-width: 767px) {
    .founder-appeal-section .founder-appeal-grid {
        grid-template-columns: 1fr;
    }

    .founder-appeal-section .founder-plate .grid {
        grid-template-columns: 1fr;
    }

    .founder-appeal-section .founder-text {
        font-size: 14px;
        line-height: 1.6;
    }
}

/* ===== comparison ===== */
.tz-comparison-block {
    font-family: 'Kreon', serif;
    overflow-wrap: anywhere;
}

.tz-comparison-block .comparison-table-wrapper {
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.tz-comparison-block .comparison-table-wrapper:hover {
    border-color: #A75DEA;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

@media (max-width: 767px) {
    .tz-comparison-block .comparison-header {
        display: none;
    }

    .tz-comparison-block .comparison-row {
        display: block;
        width: 100%;
    }
}

/* ===== how-we-work ===== */
.how-we-work-section {
    font-family: 'Kreon', serif;
}

.how-we-work-section .step-frame {
    min-height: 100%;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}

.how-we-work-section .step-num {
    font-feature-settings: 'tnum';
}

@media (max-width: 767px) {
    .how-we-work-section .grid {
        grid-template-columns: 1fr;
    }
}

/* ===== team ===== */
.team-section {
    background-color: var(--bg, #170F1E);
}

.team-section .team-card {
    min-height: 100%;
}

.team-section .team-image-wrap {
    position: relative;
}

@media (max-width: 767px) {
    .team-section .team-card {
        margin-bottom: 1.25rem;
    }

    .team-section .team-card:last-child {
        margin-bottom: 0;
    }
}

/* ===== featured-case ===== */
#featured-case-section {
    background-color: var(--primary, #A75DEA);
}

#featured-case-section .featured-case-block {
    width: 100%;
    position: relative;
}

#featured-case-section .js-case-btn {
    cursor: pointer;
}

#featured-case-section .js-case-btn.active {
    border-color: var(--primary, #A75DEA);
    background-color: #1F1428;
}

#featured-case-section .js-case-btn:not(.active):hover {
    border-color: var(--border, #3B3243);
    background-color: #271A33;
}

@media (max-width: 767px) {
    #featured-case-section h2 {
        font-size: 16px;
        line-height: 1.3;
        hyphens: auto;
    }

    #featured-case-section h3 {
        font-size: 14px;
        line-height: 1.3;
    }

    #featured-case-section {
        overflow-x: hidden;
    }
}

/* ===== layout-grid ===== */
.layout-grid-section {
    background-color: #170F1E;
}

.layout-grid-section .layout-item {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}

.layout-grid-section .layout-item:hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.layout-grid-section h2,
.layout-grid-section h3 {
    overflow-wrap: anywhere;
}

@media (max-width: 767px) {
    .layout-grid-section .grid {
        grid-template-columns: 1fr;
    }
}

/* ===== short-form ===== */
#quick-inquiry-section input::placeholder {
    color: #B8B0BF;
    opacity: 1;
}

#quick-inquiry-section input:focus {
    border-color: #A75DEA;
}

/* ===== footer ===== */
.repeatrule-footer {
    background-color: var(--dark-band-bg, #0E0A12);
    color: var(--on-dark-muted, #BDB6C3);
    font-family: 'Kreon', serif;
}

.repeatrule-footer a {
    text-decoration: none;
}

.repeatrule-footer a:focus-visible {
    outline: 2px solid var(--primary, #A75DEA);
    outline-offset: 2px;
}

@media (max-width: 767px) {
    .repeatrule-footer .grid {
        grid-template-columns: 1fr;
    }
}

.repeatrule-header {
    font-family: 'Kreon', serif;
}

.repeatrule-header a {
    text-decoration: none;
}

.repeatrule-header img {
    max-width: 44px;
    max-height: 44px;
}

.hero-section {
    font-family: 'Kreon', serif;
    position: relative;
}

.hero-section h1,
.hero-section p {
    overflow-wrap: anywhere;
}

.repeatrule-footer {
    background-color: #0E0A12;
    color: #BDB6C3;
    font-family: 'Kreon', serif;
}

.repeatrule-footer a {
    text-decoration: none;
}

.repeatrule-footer a:focus-visible {
    outline: 2px solid #A75DEA;
    outline-offset: 2px;
}

.kb-listing-block .js-post-item {
    overflow-wrap: anywhere;
}

.kb-listing-block h2,
.kb-listing-block h3,
.kb-cta-band h2 {
    overflow-wrap: anywhere;
}

.kb-listing-block .js-post-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 767px) {
    .repeatrule-footer .grid {
        grid-template-columns: 1fr;
    }

    .kb-listing-block .js-filter-container {
        width: 100%;
    }
}


/* ===== PAGE: affinity ===== */
.affinity-workflow-block {
  font-family: 'Kreon', serif;
  color: #F5F3F6;
}
.affinity-workflow-block .js-workflow-tab.active {
  background-color: #A75DEA;
  color: #111111;
  border-color: #A75DEA;
}
.affinity-workflow-block .js-workflow-tab:not(.active) {
  background-color: #271A33;
  color: #F5F3F6;
  border-color: #3B3243;
}
.affinity-workflow-block .js-workflow-tab:not(.active):hover {
  border-color: #A75DEA;
  color: #ABEB94;
}
.affinity-workflow-block .js-workflow-pane {
  display: block;
}
.affinity-workflow-block .js-workflow-pane.hidden {
  display: none;
}
@media (max-width: 767px) {
  .affinity-workflow-block .steps-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== PAGE: contacts ===== */
.contact-page-block input::placeholder,
.contact-page-block textarea::placeholder {
  color: #B8B0BF;
  opacity: 0.85;
}

.contact-page-block input:focus,
.contact-page-block textarea:focus {
  outline: none;
  box-shadow: 0 0 0 1px #A75DEA;
}

@media (max-width: 767px) {
  .contact-page-block .grid {
    grid-template-columns: 1fr;
  }
}

/* ===== PAGE: privacy ===== */
.privacy-content-block { font-family: var(--font-family-base, 'Kreon', serif); }
.privacy-content-block h2, .privacy-content-block h3 { overflow-wrap: anywhere; }
.privacy-content-block p, .privacy-content-block li { overflow-wrap: anywhere; }
@media (max-width: 767px) {
  .privacy-content-block .privacy-content-wrapper { display: flex; flex-direction: column; gap: 1.5rem; }
}

/* ===== PAGE: terms ===== */
.terms-block {
  overflow-wrap: anywhere;
}
.terms-block .terms-article {
  scroll-margin-top: 6rem;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.terms-block .terms-article:hover {
  border-color: var(--primary);
}
.terms-block .js-terms-link.is-active {
  background-color: var(--surface-alt);
  color: var(--primary-text);
  font-weight: 600;
}
@media (max-width: 767px) {
  .terms-block .grid {
    grid-template-columns: 1fr;
  }
}

/* ===== PAGE: disclaimer ===== */
.disclaimer-page-block {
  font-family: 'Kreon', serif;
  overflow-wrap: anywhere;
}

.disclaimer-page-block a {
  transition: color 0.2s ease-in-out;
}

.disclaimer-page-block .tz-btn {
  border-radius: 6px;
  font-family: 'Kreon', serif;
}

.main-comment-item {
    font-family: 'Kreon', serif;
}

.comment-avatar {
    width: 3rem;
    height: 3rem;
    min-width: 3rem;
    min-height: 3rem;
    object-fit: cover;
}

.comment-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 9999px;
    object-fit: cover;
}

.comment-action-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}

.comment-action-btn:focus-visible {
    outline: 2px solid #A75DEA;
    outline-offset: 2px;
}

.reply-comment-item {
    font-family: 'Kreon', serif;
}

.reply-comment-item .comment-avatar {
    width: 2.5rem;
    height: 2.5rem;
    min-width: 2.5rem;
    min-height: 2.5rem;
    object-fit: cover;
}

.reply-comment-item .comment-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 9999px;
    object-fit: cover;
}

.reply-comment-item .comment-action-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}

.reply-comment-item .comment-action-btn:focus-visible {
    outline: 2px solid #A75DEA;
    outline-offset: 2px;
}


/* ===== PAGE TEMPLATE: layout-catalog ===== */
.catalog-detail-page {
    font-family: 'Kreon', serif;
}

.catalog-detail-page .tz-title,
.catalog-detail-page h1,
.catalog-detail-page h2,
.catalog-detail-page h3,
.catalog-detail-page p {
    overflow-wrap: anywhere;
}

@media (max-width: 767px) {
    .catalog-detail-page .parameter-table thead {
        display: none;
    }

    .catalog-detail-page .parameter-table,
    .catalog-detail-page .parameter-table tbody,
    .catalog-detail-page .parameter-table tr,
    .catalog-detail-page .parameter-table td {
        display: block;
        width: 100%;
    }

    .catalog-detail-page .parameter-table td {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* ===== PAGE TEMPLATE: knowledge-base ===== */
.repeatrule-header {
    font-family: 'Kreon', serif;
}

.repeatrule-header a {
    text-decoration: none;
}

.repeatrule-header img {
    max-width: 44px;
    max-height: 44px;
}

.hero-section {
    font-family: 'Kreon', serif;
    position: relative;
}

.hero-section h1 {
    overflow-wrap: anywhere;
}

.hero-section p {
    overflow-wrap: anywhere;
}

.kb-article-layout {
    font-family: 'Kreon', serif;
}

.kb-article-layout .article-body h2,
.kb-article-layout .article-body h3 {
    overflow-wrap: anywhere;
}

.kb-article-layout .article-body p,
.kb-article-layout .article-body li {
    overflow-wrap: anywhere;
}

.kb-article-layout .article-media-frame img {
    display: block;
}

.repeatrule-footer {
    background-color: var(--dark-band-bg, #0E0A12);
    color: var(--on-dark-muted, #BDB6C3);
    font-family: 'Kreon', serif;
}

.repeatrule-footer a {
    text-decoration: none;
}

.repeatrule-footer a:focus-visible {
    outline: 2px solid var(--primary, #A75DEA);
    outline-offset: 2px;
}

@media (max-width: 767px) {
    .repeatrule-footer .grid {
        grid-template-columns: 1fr;
    }
}

/* mobile-text-guard */
@media (max-width: 767px) {
  h1, h2, h3, h4, h5, h6, p, li, dt, dd, blockquote, figcaption, td, th, label {
    overflow-wrap: anywhere;
  }
  a, button, .btn {
    overflow-wrap: anywhere;
    white-space: normal;
  }
  img, video, iframe {
    max-width: 100%;
  }
}