/* ══════════════════════════════
   GLOBAL / SHARED
══════════════════════════════ */
:root {
   --blue: #0000FF;
}

* {
   box-sizing: border-box;
}

body {
   font-family: 'Inter', sans-serif;
   background: #fff;
   margin: 0;
}

/* ── SHARED ── */
.navbar-custom {
   background: rgba(255, 255, 255, .95);
   border-bottom: 1px solid #e5e7eb;
   box-shadow: 0 2px 4px rgba(0, 0, 0, .08);
   height: 83px;
   padding: 0 clamp(20px, 5vw, 300px);
}

.nav-link-item {
   color: #1a1a1a !important;
   font-weight: 500;
   font-size: 16px;
   padding: 6px 12px !important;
   text-decoration: none;
}

.nav-link-item.active-page {
   color: blue !important;
   font-weight: 600;
}

.btn-login {
   border: 1px solid blue;
   color: blue;
   background: transparent;
   border-radius: 8px;
   padding: 6px 15px;
   font-size: 16px;
   font-weight: 500;
   cursor: pointer;
}

.btn-signup {
   background: blue;
   color: #fff;
   border: none;
   border-radius: 8px;
   padding: 8px 15px;
   font-size: 14px;
   font-weight: 500;
   cursor: pointer;
} 
.topbar-user {
   max-width: min(240px, 40vw);
}

.topbar-user .topbar-user-name {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

.section-title {
   font-size: clamp(28px, 3vw, 40px);
   font-weight: 700;
   letter-spacing: -1.2px;
   color: #1a1a1a;
}

.page-title {
   font-size: clamp(36px, 4vw, 56px);
   font-weight: 700;
   letter-spacing: -1.68px;
   color: #1a1a1a;
   text-align: center;
}

.page-subtitle {
   font-size: 20px;
   font-weight: 300;
   color: rgba(33, 37, 41, .75);
   text-align: center;
}

.page-hero {
   padding: 80px clamp(20px, 5vw, 312px) 60px;
   background: linear-gradient(170deg, rgba(181, 101, 29, .1) 0%, rgba(0, 0, 255, .1) 100%);
}

.card-shadow {
   box-shadow: 0 2px 4px rgba(0, 0, 0, .08);
}

.code-pink {
   color: #d63384;
   font-family: 'Courier New', monospace;
}

.badge-blue {
   background: blue;
   color: #fff;
   font-size: 12px;
   font-weight: 500;
   letter-spacing: .3px;
   border-radius: 6px;
   padding: 4px 10px;
}

.badge-green {
   background: #198754;
   color: #fff;
   font-size: 12px;
   font-weight: 500;
   border-radius: 6px;
   padding: 4px 10px;
}

.badge-yellow {
   background: #ffc107;
   color: #fff;
   font-size: 12px;
   font-weight: 500;
   border-radius: 6px;
   padding: 4px 10px;
}

.code-block {
   background: linear-gradient(166deg, #f8f9fa 0%, #fff 100%);
   border: 1px solid #e5e7eb;
   border-radius: 8px;
   padding: 16px;
   font-family: 'Courier New', monospace;
   font-size: 12.6px;
   box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}

.weight-txt {
   font-size: 14px;
   color: rgba(33, 37, 41, .75);
}

/* ── LANGUAGE DROPDOWN ── */
.lang-selector {
   position: relative;
   display: inline-flex;
   align-items: center;
}

.lang-trigger {
   display: flex;
   align-items: center;
   gap: 6px;
   cursor: pointer;
   background: transparent;
   border: none;
   padding: 4px 6px;
   border-radius: 6px;
   transition: background .15s;
}

.lang-trigger:hover {
   background: rgba(0, 0, 0, .05);
}

.lang-flag-stack {
   position: relative;
   width: 29px;
   height: 32px;
   flex-shrink: 0;
}

.lang-flag-stack img {
   position: absolute;
   left: 0;
   width: 29px;
   height: 20px;
   border-radius: 2px;
   object-fit: cover;
}

.lang-flag-stack .flag-top {
   top: 5px;
   z-index: 2;
}

.lang-flag-stack .flag-bottom {
   top: 12px;
   z-index: 1;
}

.lang-current-label {
   font-size: 14px;
   color: #1a1a1a;
   font-weight: 500;
   white-space: nowrap;
}

.lang-chevron {
   width: 12px;
   height: 12px;
   transition: transform .2s;
   flex-shrink: 0;
}

.lang-chevron.open {
   transform: rotate(180deg);
}

.lang-dropdown {
   position: absolute;
   top: calc(100% + 8px);
   left: 50%;
   transform: translateX(-50%) translateY(-6px);
   min-width: 190px;
   background: #fff;
   border: 1px solid #e5e7eb;
   border-radius: 10px;
   box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
   padding: 6px;
   z-index: 9999;
   opacity: 0;
   pointer-events: none;
   transition: opacity .18s, transform .18s;
}

.lang-dropdown.open {
   opacity: 1;
   pointer-events: auto;
   transform: translateX(-50%) translateY(0);
}

.lang-option {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 9px 12px;
   border-radius: 7px;
   cursor: pointer;
   font-size: 14px;
   color: #212529;
   font-weight: 500;
   transition: background .12s;
}

.lang-option:hover {
   background: #f0f4ff;
}

.lang-option.selected {
   background: #eef2ff;
   color: blue;
}

.lang-option .opt-flag {
   width: 26px;
   height: 18px;
   border-radius: 2px;
   object-fit: cover;
   flex-shrink: 0;
}

.lang-option .opt-check {
   margin-left: auto;
   color: blue;
   font-size: 13px;
}

.lang-divider {
   height: 1px;
   background: #f0f0f0;
   margin: 4px 0;
}

.lang-section-lbl {
   font-size: 11px;
   color: #9ca3af;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: .6px;
   padding: 6px 12px 2px;
}

/* ── HAMBURGER ── */
.tog-bar {
   display: block;
   width: 24px;
   height: 2px;
   background: #1a1a1a;
   margin: 5px 0;
   border-radius: 2px;
   transition: all .3s;
}

.navbar-toggler[aria-expanded=true] .tog-bar:nth-child(1) {
   transform: translateY(7px) rotate(45deg);
}

.navbar-toggler[aria-expanded=true] .tog-bar:nth-child(2) {
   opacity: 0;
}

.navbar-toggler[aria-expanded=true] .tog-bar:nth-child(3) {
   transform: translateY(-7px) rotate(-45deg);
}

@media(max-width:1199.98px) {
   .navbar-custom {
      height: auto;
      min-height: 85px;
      padding: 0 20px;
   }

   .navbar-collapse {
      background: rgba(255, 255, 255, .98);
      border-top: 1px solid #e5e7eb;
      padding: 16px 20px 20px;
      margin: 0 -20px;
   }

   .navbar-nav .nav-link-item {
      padding: 10px 8px !important;
      border-bottom: 1px solid #f0f0f0;
      display: block;
   }

   .nav-right-group {
      border-top: 1px solid #f0f0f0;
      padding-top: 16px;
   }

   .lang-dropdown {
      left: 0;
      transform: translateX(0) translateY(-6px);
   }

   .lang-dropdown.open {
      transform: translateX(0) translateY(0);
   }
}

/* ── FOOTER ── */
.footer {
   background: #1e293b;
   padding: 48px clamp(20px, 5vw, 300px) 0;
}

.footer-lnk {
   font-size: 16px;
   color: #bdc3c7;
   text-decoration: none;
   display: block;
   line-height: 1.8;
}

.footer-lnk:hover {
   color: #fff;
}

.footer-hd {
   font-size: 16px;
   font-weight: 600;
   color: #fff;
   letter-spacing: -.4px;
   margin-bottom: 12px;
}

.footer-hr {
   border-color: rgba(108, 117, 125, .25);
   margin: 24px 0 0;
}

.footer-copy {
   font-size: 16px;
   color: rgba(255, 255, 255, .75);
   text-align: center;
   padding: 20px 0;
   margin: 0;
}

.footer-social {
   display: flex;
   gap: 8px;
   flex-wrap: wrap;
   margin-top: 12px;
}

.social-icon {
   width: 32px;
   height: 32px;
   border-radius: 6px;
   background: rgba(255, 255, 255, .1);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   color: #bdc3c7;
   text-decoration: none;
   transition: background .18s, color .18s, transform .18s;
   flex-shrink: 0;
}

.social-icon:hover {
   background: rgba(255, 255, 255, .22);
   color: #fff;
   transform: translateY(-2px);
}

.social-icon svg {
   width: 16px;
   height: 16px;
   fill: currentColor;
}

/* ══════════════════════════════
   HOME PAGE
══════════════════════════════ */
.hero-section {
   padding: 80px clamp(20px, 5vw, 300px) 60px;
   background: linear-gradient(164deg, rgba(181, 101, 29, .1) 0%, rgba(0, 0, 255, .1) 100%);
}

.hero-title {
   font-size: clamp(36px, 4vw, 56px);
   font-weight: 700;
   line-height: 1.2;
   letter-spacing: -1.68px;
   color: #1a1a1a;
}

.hero-sub {
   font-size: 20px;
   font-weight: 300;
   line-height: 1.6;
   color: rgba(33, 37, 41, .75);
   max-width: 540px;
}

.btn-hero-filled {
   background: blue;
   color: #fff;
   border: none;
   border-radius: 8px;
   padding: 14px 22px;
   font-size: 17px;
   font-weight: 500;
   cursor: pointer;
}

.btn-hero-outline {
   border: 1px solid blue;
   color: blue;
   background: transparent;
   border-radius: 8px;
   padding: 14px 22px;
   font-size: 17px;
   font-weight: 500;
   cursor: pointer;
}

.hero-note {
   font-size: 14px;
   color: rgba(33, 37, 41, .75);
}

.code-card {
   background: #fff;
   border-radius: 12px;
   box-shadow: 0 16px 48px rgba(0, 0, 0, .17);
   padding: 24px;
}

.code-inner {
   background: linear-gradient(157deg, #f8f9fa 0%, #fff 100%);
   border: 1px solid #e5e7eb;
   border-radius: 8px;
   padding: 16px;
   font-family: 'Courier New', monospace;
   font-size: 12.6px;
   line-height: 1.6;
}

.code-comment {
   color: rgba(33, 37, 41, .75);
}

.code-blue {
   color: blue;
}

.code-purple {
   color: #a020f0;
}

.feature-card {
   border: 1px solid #dedede;
   border-radius: 12px;
   padding: 24px;
   text-align: center;
   background: #fff;
}

.feat-icon {
   width: 64px;
   height: 64px;
   background: linear-gradient(135deg, #3b82f6 0%, blue 100%);
   border-radius: 12px;
   box-shadow: 0 4px 6px rgba(0, 0, 0, .1), 0 2px 4px rgba(0, 0, 0, .06);
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 auto 16px;
}

.feat-icon svg {
   width: 24px;
   height: 24px;
   fill: #fff;
}

.feat-title {
   font-size: 20px;
   font-weight: 600;
   color: #1a1a1a;
   letter-spacing: -.5px;
}

.feat-desc {
   font-size: 16px;
   color: rgba(33, 37, 41, .75);
}

/* Home pricing mini-cards */
.plan-mini {
   border: 1px solid rgba(0, 0, 0, .17);
   border-radius: 16px;
   padding: 24px;
   background: #fff;
   height: 100%;
   position: relative;
}

.plan-mini.featured {
   border: 2px solid blue;
   box-shadow: 0 4px 16px rgba(0, 0, 255, .2);
}

.most-popular {
   position: absolute;
   top: 10px;
   right: 10px;
   background: blue;
   color: #fff;
   font-size: 12px;
   padding: 4px 10px;
   border-radius: 6px;
}

.plan-price {
   font-size: 56px;
   font-weight: 700;
   color: blue;
   text-align: center;
   line-height: 1.2;
   letter-spacing: -1.68px;
}

.plan-name {
   font-size: 24px;
   font-weight: 600;
   color: #1a1a1a;
   text-align: center;
}

.plan-chars {
   text-align: center;
   font-size: 16px;
   color: rgba(33, 37, 41, .75);
}

.plan-rate {
   text-align: center;
   font-size: 14px;
   color: rgba(33, 37, 41, .75);
}

.plan-list {
   list-style: none;
   padding: 0;
   margin: 0;
}

.plan-list li {
   font-size: 14px;
   color: #212529;
   display: flex;
   align-items: center;
   gap: 8px;
   margin-bottom: 8px;
}

.plan-list li.dim {
   color: rgba(33, 37, 41, .75);
}

.btn-plan {
   border: 1px solid blue;
   color: blue;
   background: transparent;
   border-radius: 8px;
   width: 100%;
   padding: 14px;
   font-size: 16px;
   font-weight: 500;
   cursor: pointer;
}

.btn-plan-filled {
   background: blue;
   color: #fff;
   border: none;
   border-radius: 8px;
   width: 100%;
   padding: 14px;
   font-size: 16px;
   font-weight: 500;
   cursor: pointer;
}

.btn-plan-text {
   border: none;
   background: transparent;
   color: blue;
   font-size: 16px;
   font-weight: 500;
   width: 100%;
   padding: 14px;
   cursor: pointer;
}

.core-card {
   border: 1px solid rgba(0, 0, 0, .17);
   border-radius: 12px;
   padding: 16px;
   background: #fff;
}

.code-snippet {
   background: linear-gradient(175deg, #f8f9fa 0%, #fff 100%);
   border: 1px solid #e5e7eb;
   border-radius: 8px;
   padding: 12px 16px;
   font-family: 'Monaco', 'Courier New', monospace;
   font-size: 12.6px;
   color: #d63384;
   box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}

.cta-section {
   background: linear-gradient(171deg, #3b82f6 0%, blue 100%);
   padding: 48px 0;
   text-align: center;
}

/* ══════════════════════════════
   PRICING PAGE
══════════════════════════════ */
.pricing-card {
   border: 1px solid rgba(0, 0, 0, .17);
   border-radius: 16px;
   padding: 24px;
   background: #fff;
   height: 100%;
   position: relative;
}

.pricing-card.featured {
   border: 2px solid blue;
   box-shadow: 0 4px 16px rgba(0, 0, 255, .2);
}

.pricing-card.current-plan {
   border: 1px solid #198754;
}

.current-plan-badge {
   background: #198754;
   color: #fff;
   font-size: 12px;
   padding: 3px 8px;
   border-radius: 6px;
   position: absolute;
   top: 10px;
   left: 10px;
   z-index: 1;
}

.package-type-badge {
   position: absolute;
   top: 10px;
   right: 10px;
   font-size: 11px;
   font-weight: 600;
   padding: 4px 10px;
   border-radius: 6px;
   line-height: 1.2;
   z-index: 1;
}

.package-type-badge.subscription {
   background: #0000ff;
   color: #fff;
}

.package-type-badge.addon {
   background: #6c757d;
   color: #fff;
}

.package-type-badge.enterprise {
   background: #1f2937;
   color: #fff;
}

/* Billing interval, shown under the price: "$10.00" / "Monthly". */
.plan-duration {
   text-align: center;
   font-size: 14px;
   font-weight: 600;
   color: #6c757d;
   margin-top: -4px;
}

.billing-package-toggle .form-check-input {
   width: 3em;
   height: 1.5em;
   cursor: pointer;
   margin-top: 0;
}

.billing-package-toggle .form-check-input:checked {
   background-color: #0000ff;
   border-color: #0000ff;
}

.billing-package-toggle .form-check-input:focus {
   border-color: #0000ff;
   box-shadow: 0 0 0 0.25rem rgba(0, 0, 255, 0.25);
}

.billing-package-toggle-label {
   font-size: 14px;
   font-weight: 500;
   color: #212529;
   cursor: pointer;
   white-space: nowrap;
}

.features-lbl {
   font-size: 16px;
   font-weight: 600;
   color: #1a1a1a;
}

.limits-lbl {
   font-size: 16px;
   font-weight: 600;
   color: rgba(33, 37, 41, .75);
}

.btn-plan-current {
   border: none;
   background: transparent;
   color: #198754;
   font-size: 16px;
   font-weight: 500;
   width: 100%;
   padding: 14px;
   cursor: pointer;
}

.current-plan-info {
   background: #dbe8ff;
   border: 1px solid #bebeff;
   border-radius: 12px;
   padding: 20px 24px;
}

.enterprise-card {
   background: #fff;
   border-radius: 12px;
   box-shadow: 0 16px 48px rgba(0, 0, 0, .17);
   padding: 36px;
}

.tbl-responsive {
   overflow-x: auto;
}

table.compare-tbl {
   width: 100%;
   border-collapse: collapse;
   font-size: 15px;
}

table.compare-tbl th,
table.compare-tbl td {
   padding: 16px;
   border: 1px solid #dee2e6;
   text-align: center;
}

table.compare-tbl th:first-child,
table.compare-tbl td:first-child {
   text-align: left;
   font-weight: 700;
}

table.compare-tbl thead th {
   background: #fafbfc;
   font-size: 13px;
   letter-spacing: .7px;
   text-transform: uppercase;
   color: #6c757d;
   font-weight: 600;
}

table.compare-tbl thead th:first-child {
   text-align: left;
}

/* ══════════════════════════════
   DOCUMENTATION PAGE
══════════════════════════════ */
.step-circle {
   width: 60px;
   height: 60px;
   background: blue;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 16px;
   font-weight: 700;
   color: #fff;
   flex-shrink: 0;
   margin: 0 auto 12px;
}

.endpoint-card {
   background: #fff;
   border-radius: 12px;
   box-shadow: 0 2px 4px rgba(0, 0, 0, .08);
   padding: 24px;
   height: 100%;
}

.lang-table {
   width: 100%;
   border-collapse: collapse;
}

.lang-table th {
   background: #fafbfc;
   font-size: 13px;
   letter-spacing: .7px;
   text-transform: uppercase;
   color: #6c757d;
   font-weight: 600;
   padding: 16px;
   border-bottom: 2px solid #e5e7eb;
}

.lang-table td {
   padding: 16px;
   border-bottom: 1px solid #e5e7eb;
   font-size: 16px;
}

.err-table {
   width: 100%;
   border-collapse: collapse;
   font-size: 15px;
}

.err-table th {
   background: #fafbfc;
   font-size: 13px;
   text-transform: uppercase;
   letter-spacing: .7px;
   color: #6c757d;
   font-weight: 600;
   padding: 16px;
   border: 1px solid #dee2e6;
}

.err-table td {
   padding: 16px;
   border: 1px solid #dee2e6;
}

/* SDK Integration */
.sdk-tab-bar {
   background: #f9f9fb;
   border-radius: 14px;
   padding: 10px;
   display: flex;
   gap: 8px;
   flex-wrap: wrap;
}

.sdk-tab {
   background: transparent;
   border: none;
   padding: 10px 15px;
   border-radius: 999px;
   font-size: 15px;
   color: #374151;
   display: flex;
   align-items: center;
   gap: 8px;
   cursor: pointer;
   font-weight: 400;
   transition: background .15s, color .15s;
}

.sdk-tab:hover {
   background: rgba(0, 0, 0, .05);
}

.sdk-tab.active {
   background: blue;
   color: #fff;
   border-radius: 8px;
}

.sdk-step {
   background: #fff;
   border: 1px solid #e5e7eb;
   border-radius: 12px;
   margin-bottom: 12px;
   overflow: hidden;
   transition: box-shadow .15s;
}

.sdk-step.open {
   box-shadow: 0 2px 8px rgba(0, 0, 0, .07);
}

.sdk-step-hdr {
   display: flex;
   align-items: center;
   gap: 16px;
   padding: 20px 24px;
   cursor: pointer;
   user-select: none;
}

.sdk-step-hdr:hover {
   background: #fafafa;
}

.sdk-step-num {
   width: 36px;
   height: 36px;
   background: blue;
   border-radius: 18px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 15px;
   font-weight: 700;
   color: #fff;
   flex-shrink: 0;
}

.sdk-step-title {
   font-size: 17px;
   font-weight: 700;
   color: #1a1a2e;
   flex: 1;
}

.sdk-chevron {
   flex-shrink: 0;
   transition: transform .25s;
   color: #9ca3af;
}

.sdk-step.open .sdk-chevron {
   transform: rotate(90deg);
}

.sdk-step-body {
   display: none;
   padding: 4px 24px 20px 24px;
   border-top: 1px solid #f3f4f6;
}

.sdk-step.open .sdk-step-body {
   display: block;
}

.sdk-guide-link {
   font-size: 13.8px;
   color: blue;
   text-decoration: none;
   display: inline-block;
   margin-bottom: 12px;
}

.sdk-guide-link:hover {
   text-decoration: underline;
}

.cmd-box {
   background: #f9fafb;
   border: 1px solid #e5e7eb;
   border-radius: 8px;
   padding: 14px 16px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
   font-family: 'Courier New', 'Monaco', monospace;
   font-size: 13.8px;
   color: #1f2937;
   word-break: break-all;
}

.cmd-copy-btn {
   display: flex;
   align-items: center;
   gap: 5px;
   font-size: 13px;
   color: #6b7280;
   cursor: pointer;
   background: transparent;
   border: 1px solid #e5e7eb;
   border-radius: 4px;
   padding: 4px 10px;
   white-space: nowrap;
   flex-shrink: 0;
   transition: background .12s, color .12s;
}

.cmd-copy-btn:hover {
   background: #f3f4f6;
   color: #374151;
}

.code-block-sdk {
   background: #1e1e2e;
   border-radius: 8px;
   padding: 16px 20px;
   font-family: 'Monaco', 'Courier New', monospace;
   font-size: 13px;
   line-height: 1.7;
   overflow-x: auto;
   margin-top: 10px;
}

.code-block-sdk pre {
   margin: 0;
   color: #cdd6f4;
}

.sdk-step-desc {
   font-size: 14px;
   color: #6b7280;
   margin-bottom: 12px;
   line-height: 1.6;
}

.tok-kw {
   color: #cba6f7;
}

.tok-fn {
   color: #89b4fa;
}

.tok-str {
   color: #a6e3a1;
}

.tok-cm {
   color: #6c7086;
}

.tok-var {
   color: #cdd6f4;
}

.tok-num {
   color: #fab387;
}

.user-tag {
   font-size: 16px;
   font-weight: 500;
   color: #1a1a1a;
   cursor: pointer;
}

/* ══════════════════════════════
   CONTACT PAGE
══════════════════════════════ */
.contact-icon-box {
   width: 56px;
   height: 56px;
   background: #dee8ff;
   border-radius: 6px;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   font-size: 22px;
}

.contact-icon-box.yellow {
   background: rgba(255, 193, 7, .1);
}

.faq-card {
   background: #fff;
   border-radius: 12px;
   padding: 16px;
   box-shadow: 0 2px 4px rgba(0, 0, 0, .06);
}

/* ══════════════════════════════
   ABOUT PAGE
══════════════════════════════ */
.about-img {
   border-radius: 8px;
   object-fit: cover;
   width: 100%;
   max-height: 450px;
}

.checkmark-list li {
   list-style: none;
   display: flex;
   align-items: center;
   gap: 12px;
   font-size: 16px;
   color: rgba(33, 37, 41, .75);
   margin-bottom: 12px;
}


/*---*/
.plan-features-list li::before {
    content: "";
    background: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_632_8961)"><path d="M14.535 6.66666C14.8395 8.16086 14.6225 9.71428 13.9203 11.0679C13.218 12.4214 12.073 13.4934 10.6761 14.1049C9.27913 14.7164 7.71479 14.8305 6.24391 14.4282C4.77302 14.026 3.4845 13.1316 2.59323 11.8943C1.70195 10.657 1.26179 9.15148 1.34615 7.62892C1.43051 6.10635 2.0343 4.65872 3.05681 3.52744C4.07932 2.39616 5.45876 1.64961 6.96509 1.4123C8.47141 1.17498 10.0136 1.46123 11.3344 2.22333" stroke="%23198754" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/><path d="M6 7.33366L8 9.33366L14.6667 2.66699" stroke="%23198754" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="clip0_632_8961"><rect width="16" height="16" fill="white"/></clipPath></defs></svg>');
    width: 16px;
    height: 16px;
    position: absolute;
    top: 3px;
    left: 0;
}

/* Excluded feature — red cross (overrides the default green tick). Add class="cross" on the <li>. */
.plan-features-list li.cross::before {
    background: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="6.66667" stroke="%23dc3545" stroke-width="1.33333"/><path d="M10.3333 5.66699L5.66663 10.3337M5.66663 5.66699L10.3333 10.3337" stroke="%23dc3545" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}
.plan-features-list li {
    position: relative;
    padding-left: 22px;
    list-style: none;
    margin-bottom: 8px;
}

.plan-features-list ul {
    padding-left: 0;
    margin-top: 18px;
}
/* ------- 28-apr-2026 ------- */
.sdk-tab.active img {
    filter: brightness(0) invert(1);
}

.sdk-step-body {
    border: 0;
}

/* ── RESPONSIVENESS (Documentation) ── */

/* Tablet (md) and below */
@media (max-width: 991px) {
    .sdk-tab {
        padding: 8px 12px;
        font-size: 14px;
    }

    .sdk-step-hdr {
        padding: 16px 20px;
    }

    .sdk-step-title {
        font-size: 16px;
    }
}

/* Mobile (sm) and below */
@media (max-width: 575px) {
    .sdk-tab-bar {
        gap: 4px;
        padding: 6px;
    }

    .sdk-tab {
        padding: 6px 10px;
        font-size: 13px;
        gap: 4px;
    }

    .sdk-step-hdr {
        padding: 12px 16px;
        gap: 12px;
    }

    .sdk-step-num {
        width: 28px;
        height: 28px;
        font-size: 13px;
    }

    .sdk-step-body {
        padding: 4px 16px 16px 16px;
    }

    .cmd-box {
        flex-direction: column;
        align-items: flex-start;
        padding: 12px;
    }

    .cmd-copy-btn {
        width: 100%;
        justify-content: center;
        margin-top: 8px;
    }

    .step-circle {
        width: 48px;
        height: 48px;
        font-size: 14px;
    }
}

.sdk-embed {
    color: #172033;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.55;
}

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

    .sdk-embed code,
    .sdk-embed pre,
    .sdk-embed kbd {
        font-family: "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
    }

    /* ===================== CODE BLOCKS ===================== */

    .sdk-embed .code-wrap {
        position: relative;
        margin: 18px 0 4px;
        border-radius: 14px;
        overflow: hidden;
        background: #0b1020;
        box-shadow: 0 10px 30px rgba(11, 16, 32, 0.18);
    }

    .sdk-embed .code-head {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 14px;
        background: rgba(255,255,255,0.04);
        color: #a8b1c1;
        font-size: 12px;
        letter-spacing: .04em;
        text-transform: uppercase;
        border-bottom: 1px solid rgba(255,255,255,0.06);
    }

        .sdk-embed .code-head .dots {
            display: inline-flex;
            gap: 6px;
        }

        .sdk-embed .code-head .dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
        }

            .sdk-embed .code-head .dot:nth-child(1) {
                background: #ef4444;
            }

            .sdk-embed .code-head .dot:nth-child(2) {
                background: #f59e0b;
            }

            .sdk-embed .code-head .dot:nth-child(3) {
                background: #10b981;
            }

        .sdk-embed .code-head .lang {
            margin-left: 8px;
        }

    .sdk-embed .copy-btn {
        margin-left: auto;
        background: transparent;
        color: #cbd5e1;
        border: 1px solid rgba(255,255,255,0.12);
        border-radius: 8px;
        padding: 5px 10px;
        font-size: 12px;
        cursor: pointer;
        transition: all .15s ease;
    }

        .sdk-embed .copy-btn:hover {
            background: rgba(255,255,255,0.08);
            color: #fff;
        }

        .sdk-embed .copy-btn.done {
            color: #34d399;
            border-color: rgba(52,211,153,.4);
        }

    .sdk-embed pre.code {
        margin: 0;
        padding: 16px 18px;
        color: #e6edf6;
        font-size: 13.5px;
        line-height: 1.7;
        overflow-x: auto;
        tab-size: 2;
        white-space: pre;
    }

        .sdk-embed pre.code .tok-key {
            color: #7dd3fc;
        }

        .sdk-embed pre.code .tok-str {
            color: #fcd34d;
        }

        .sdk-embed pre.code .tok-com {
            color: #94a3b8;
            font-style: italic;
        }

        .sdk-embed pre.code .tok-fn {
            color: #c4b5fd;
        }

        .sdk-embed pre.code .tok-num {
            color: #f472b6;
        }

    /* Paragraphs */

    .sdk-embed p {
        color: #4a5470;
        font-size: 14px;
    }

        .sdk-embed p code {
            font-size: 13px;
            padding: 1px 6px;
            border-radius: 5px;
            background: rgba(79,70,229,0.1);
            color: #4f46e5;
        }

    /* ===================== TABS ===================== */

    .sdk-embed .tabs {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        padding: 4px;
        background: rgba(15,23,42,0.05);
        border-radius: 10px;
        margin: 16px 0 4px;
    }

    .sdk-embed .tab {
        padding: 6px 12px;
        border-radius: 7px;
        font-size: 13px;
        color: #4a5470;
        cursor: pointer;
        border: none;
        background: transparent;
        font-weight: 600;
    }

        .sdk-embed .tab.active {
            background: #fff;
            color: #4f46e5;
            box-shadow: 0 1px 3px rgba(0,0,0,0.06);
        }

    .sdk-embed .tab-panel {
        display: none;
    }

        .sdk-embed .tab-panel.active {
            display: block;
        }

/* ===================== DOC SECTION ===================== */

.content {
    min-width: 0;
}

section.doc-section {
    background: rgba(255,255,255,0.92);
    border: 1px solid #e2e8f0;
    border-radius: 22px;
    padding: 32px;
    margin-bottom: 24px;
    box-shadow: 0 30px 80px rgba(54,74,130,0.14);
    backdrop-filter: blur(14px);
    scroll-margin-top: 96px;
}

.step-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 4px;
}

.step-badge {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: #0d6efd;
    color: #fff;
    font-weight: 800;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.doc-section h2 {
    margin: 0;
    font-size: 24px;
    letter-spacing: -0.01em;
    color: #172033;
}

.doc-section h3 {
    margin: 22px 0 10px;
    font-size: 17px;
    color: #172033;
}

.doc-section p {
    color: #4a5470;
    margin: 10px 0 0;
}

.doc-section ul,
.doc-section ol {
    color: #4a5470;
    padding-left: 22px;
}

.doc-section li {
    margin: 4px 0;
}

/* ===================== MOBILE ===================== */

@media (max-width: 600px) {
    .sdk-embed pre.code {
        font-size: 12.5px;
    }

    section.doc-section {
        padding: 20px;
    }
}
/* ===================== CALLOUTS ===================== */
.callout {
    margin-top: 18px;
    padding: 14px 16px;
    border-radius: 12px;
    border-left: 3px solid var(--brand);
    background: var(--brand-soft);
    color: var(--ink);
    font-size: 14px;
}

    .callout strong {
        color: var(--brand);
    }

    .callout.warn {
        border-color: var(--warn);
        background: rgba(245, 158, 11, 0.10);
    }

        .callout.warn strong {
            color: #b45309;
        }

    .callout.ok {
        border-color: var(--ok);
        background: rgba(16, 185, 129, 0.10);
    }

        .callout.ok strong {
            color: #047857;
        }

.social-media a {
    display: inline-block;
    transition: transform 1s ease-in-out !important;
    transform: rotate(0deg);
}

    .social-media a:hover {
        transform: rotate(360deg);
    }