@font-face {
  font-family: "Vazirmatn";
  src: url("/gateway/assets/Vazirmatn.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --v-ui-font: "Vazirmatn", "Segoe UI", Tahoma, Arial, sans-serif;
  --v-ui-code-font: ui-monospace, SFMono-Regular, Consolas, monospace;
  --v-ui-bg: #061224;
  --v-ui-surface: #0b1c34;
  --v-ui-text: #f4f8ff;
  --v-ui-muted: #a9bbd3;
  --v-ui-border: rgba(153, 190, 227, .19);
  --v-ui-primary: #39d5eb;
  --v-ui-success: #4dd9aa;
  --v-ui-danger: #ff7d8b;
  --v-ui-radius-md: 12px;
  --v-ui-radius-xl: 24px;
}

* { box-sizing: border-box; }
html { min-width: 320px; font-family: var(--v-ui-font); }
body {
  margin: 0;
  background:
    radial-gradient(circle at 12% 5%, rgba(57, 213, 235, .12), transparent 30rem),
    linear-gradient(180deg, #07172b 0, var(--v-ui-bg) 42rem);
  color: var(--v-ui-text);
  line-height: 1.75;
}
button, input, select { font: inherit; min-height: 46px; }
a { color: inherit; text-decoration: none; }
code, pre { direction: ltr; unicode-bidi: isolate; font-family: var(--v-ui-code-font); }
:focus-visible { outline: 3px solid var(--v-ui-primary); outline-offset: 3px; }
.sr-only, .skip-link { position: absolute; }
.skip-link { inset-block-start: 12px; inset-inline-start: 12px; z-index: 100; border-radius: var(--v-ui-radius-md); background: #fff; padding: 10px 15px; color: #061224; transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }
.page-shell { width: min(1120px, calc(100% - 32px)); margin-inline: auto; padding-bottom: 80px; }
.site-header { display: flex; justify-content: space-between; align-items: center; min-height: 90px; gap: 16px; }
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand-mark { display: inline-flex; width: 47px; height: 47px; place-items: center; border: 1px solid rgba(57, 213, 235, .28); border-radius: 18px; background: linear-gradient(145deg, rgba(57, 213, 235, .2), rgba(124, 140, 255, .18)); color: var(--v-ui-primary); font: 800 18px/1 var(--v-ui-code-font); }
.brand-copy strong, .brand-copy small { display: block; }
.brand-copy small { color: var(--v-ui-muted); font-size: 11px; }
.header-nav { display: flex; gap: 8px; }
.header-nav a { min-height: 42px; display: inline-flex; align-items: center; padding-inline: 13px; color: var(--v-ui-muted); font-size: 13px; font-weight: 720; border-radius: var(--v-ui-radius-md); }
.header-nav a:hover { background: rgba(255,255,255,.05); color: #fff; }
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .9fr); gap: 40px; padding-block: 28px 48px; align-items: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 16px; border: 1px solid rgba(57, 213, 235, .22); border-radius: 999px; padding: 7px 13px; color: var(--v-ui-primary); font-size: 12px; font-weight: 780; }
.eyebrow span:first-child { width: 8px; height: 8px; border-radius: 50%; background: var(--v-ui-success); }
.hero h1 { margin: 0; font-size: clamp(32px, 5vw, 52px); line-height: 1.25; }
.hero-description, .hero-note { color: var(--v-ui-muted); }
.hero-note { font-size: 13px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.account-chip { min-height: 42px; display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; padding-inline: 12px; border: 1px solid var(--v-ui-border); border-radius: 999px; color: var(--v-ui-muted); font-size: 12px; font-weight: 720; }
.account-chip a { color: var(--v-ui-primary); }
.role-pill { border-radius: 999px; padding: 2px 8px; font-size: 11px; font-weight: 800; background: rgba(57, 213, 235, .12); color: var(--v-ui-primary); }
.role-pill.admin { background: rgba(77, 217, 170, .14); color: var(--v-ui-success); }
.balance-card { display: grid; gap: 8px; padding: 18px; }
.balance-card strong { font-size: 28px; }
.identity-grid { display: grid; gap: 6px; margin-bottom: 8px; }
.identity-grid span { color: var(--v-ui-muted); font-size: 13px; }
.balance-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.balance-grid small { color: var(--v-ui-muted); display: block; }
.code-card { overflow: hidden; border: 1px solid var(--v-ui-border); border-radius: var(--v-ui-radius-xl); background: rgba(5, 16, 34, .88); }
.code-card > header { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 52px; padding-inline: 16px; border-bottom: 1px solid var(--v-ui-border); }
.window-dot { display: inline-block; width: 8px; height: 8px; margin-inline-end: 4px; border-radius: 50%; background: #52647e; }
.live-badge { justify-self: end; border-radius: 999px; background: rgba(77, 217, 170, .11); padding: 5px 9px; color: var(--v-ui-success); font-size: 10px; font-weight: 800; }
.code-card pre { margin: 0; padding: 22px; overflow: auto; color: #cad7e8; font-size: 12px; line-height: 1.9; }
.tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--v-ui-border); }
.tab { border: 0; background: transparent; color: var(--v-ui-muted); padding-inline: 16px; cursor: pointer; font-weight: 750; }
.tab.is-active { color: #fff; box-shadow: inset 0 -2px 0 var(--v-ui-primary); }
.panel { padding-block: 32px; }
.section-kicker { margin: 0 0 6px; color: var(--v-ui-primary); font-size: 11px; font-weight: 820; }
.section-heading h2 { margin: 0; font-size: clamp(24px, 3vw, 36px); }
.section-heading p { color: var(--v-ui-muted); }
.table-wrap { overflow: auto; border: 1px solid var(--v-ui-border); border-radius: 16px; background: rgba(11, 28, 52, .72); }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { padding: 12px 14px; text-align: start; border-bottom: 1px solid var(--v-ui-border); }
th { color: var(--v-ui-muted); font-weight: 650; }
.pill { display: inline-flex; border-radius: 999px; padding: 2px 8px; font-size: 11px; }
.pill.on { background: rgba(77, 217, 170, .12); color: var(--v-ui-success); }
.pill.off { background: rgba(255, 125, 139, .12); color: var(--v-ui-danger); }
.connect-grid, .key-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 16px; align-items: end; }
label { display: grid; gap: 6px; color: var(--v-ui-muted); font-size: 12px; }
input, select { border: 1px solid var(--v-ui-border); border-radius: var(--v-ui-radius-md); background: var(--v-ui-surface); color: var(--v-ui-text); padding-inline: 12px; }
.primary-button { border: 0; border-radius: var(--v-ui-radius-md); background: linear-gradient(120deg, #0a7188, #3949a8); color: #fff; padding-inline: 20px; cursor: pointer; font-weight: 800; }
.snippet { border: 1px solid var(--v-ui-border); border-radius: 16px; background: rgba(5, 16, 34, .88); padding: 18px; overflow: auto; font-size: 12px; line-height: 1.8; }
.fresh-key { border: 1px dashed var(--v-ui-primary); border-radius: 12px; padding: 12px; color: var(--v-ui-primary); word-break: break-all; }
.price-tools { margin-top: 18px; grid-template-columns: minmax(180px, 260px) 1fr; align-items: center; }
.price-tools .hero-note { margin: 0; }
.usage-heading { display: flex; justify-content: space-between; gap: 18px; align-items: end; }
.usage-kpis { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; margin: 18px 0; }
.usage-kpis article { border: 1px solid var(--v-ui-border); border-radius: 16px; background: rgba(11,28,52,.72); padding: 16px; }
.usage-kpis small, .usage-kpis span { display: block; color: var(--v-ui-muted); font-size: 11px; }
.usage-kpis strong { display: block; margin: 5px 0; font-size: 20px; }
.product-layers { padding-block: 38px 0; border-top: 1px solid var(--v-ui-border); }
.layer-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.layer-grid a { display: grid; gap: 8px; border: 1px solid var(--v-ui-border); border-radius: 18px; background: rgba(11,28,52,.58); padding: 18px; }
.layer-grid a:hover { border-color: rgba(57,213,235,.48); transform: translateY(-1px); }
.layer-grid small, .layer-grid span { color: var(--v-ui-muted); }
.layer-grid strong { font-size: 18px; }
.ghost { border: 1px solid var(--v-ui-border); background: transparent; color: var(--v-ui-muted); border-radius: 10px; padding-inline: 10px; cursor: pointer; min-height: 36px; }
@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; }
  .site-header { flex-wrap: wrap; }
  .usage-kpis, .layer-grid { grid-template-columns: 1fr 1fr; }
  .price-tools { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .usage-kpis, .layer-grid { grid-template-columns: 1fr; }
  .usage-heading { align-items: stretch; flex-direction: column; }
}

.hero-console { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:14px; }
.hero-console article { border:1px solid var(--v-ui-border); border-radius:14px; background:rgba(11,28,52,.64); padding:12px; }
.hero-console small { display:block; color:var(--v-ui-muted); font-size:10px; }
.hero-console strong { display:block; margin-top:3px; font-size:17px; }
.pricing-policy { display:grid; gap:8px; }
.pricing-badges { display:flex; flex-wrap:wrap; gap:7px; }
.pricing-badges span, .price-meta { display:inline-flex; border:1px solid var(--v-ui-border); border-radius:999px; padding:3px 8px; color:var(--v-ui-muted); font-size:10px; }
.price-meta { margin-top:5px; }
@media (max-width:560px){ .hero-console { grid-template-columns:1fr; } }

/* Commercial/legal pages */
.legal-footer{margin:30px 0 10px;padding:20px 0;border-top:1px solid rgba(148,163,184,.22);display:flex;gap:18px;justify-content:space-between;align-items:center;flex-wrap:wrap;color:var(--muted,#94a3b8)}
.legal-footer nav{display:flex;gap:14px;flex-wrap:wrap}.legal-footer a{color:inherit;text-decoration:none}.legal-footer a:hover{text-decoration:underline}
.legal-wrap{max-width:980px;margin:34px auto 64px}.legal-card{background:rgba(11,30,55,.82);border:1px solid rgba(148,163,184,.2);border-radius:22px;padding:clamp(22px,4vw,44px);box-shadow:0 24px 70px rgba(0,0,0,.18)}
.legal-card h1{font-size:clamp(2rem,5vw,3.4rem);margin:.3rem 0 .4rem}.legal-card h2{margin:2rem 0 .6rem;font-size:1.2rem}.legal-card p{line-height:2;color:#cbd5e1}.legal-lead{font-size:1.08rem;color:#94a3b8!important;direction:ltr;text-align:right}
.legal-note{margin-top:30px;padding:16px 18px;border:1px solid rgba(56,189,248,.28);border-radius:14px;background:rgba(8,47,73,.28);line-height:1.9}.legal-contact{margin-top:22px}
@media (max-width:720px){.legal-footer{align-items:flex-start}.legal-card{border-radius:16px}.legal-wrap{margin-top:20px}}