/* ============================================================
   JoFotara WC Pro — portal stylesheet
   Ethereal-glass design system. RTL-first: layout uses logical
   properties so Arabic (default) and English both render natively.
   ============================================================ */

:root {
	--bg: #050505;
	--ink: rgba(255, 255, 255, .92);
	/* Contrast against the near-black page/card background (~#0a0a0a):
	   soft ≈ 9.8:1, faint ≈ 6.3:1 — both clear WCAG AA (4.5:1) for body text
	   while keeping the two levels visually distinct. faint was .34 (≈3.0:1),
	   which failed on .mi-store, .mi-qr-label, .review-role, .footer-h,
	   .footer-disclaimer and the footer copyright line. */
	--ink-soft: rgba(255, 255, 255, .70);
	--ink-faint: rgba(255, 255, 255, .55);
	--emerald: #34d399;
	--teal: #2dd4bf;
	--gold: #f5d06a;
	--hairline: rgba(255, 255, 255, .09);
	--hairline-soft: rgba(255, 255, 255, .05);
	--shell-bg: rgba(255, 255, 255, .04);
	--core-bg: rgba(11, 13, 12, .82);
	--ease: cubic-bezier(.32, .72, 0, 1);
	--font-display: 'Readex Pro', 'IBM Plex Sans Arabic', system-ui, sans-serif;
	--font-body: 'IBM Plex Sans Arabic', 'Readex Pro', system-ui, sans-serif;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
	scroll-behavior: smooth;
	scroll-padding-top: 7rem;
}

body {
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.8;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
	min-height: 100dvh;
}

html[dir="rtl"] body { line-height: 1.9; }

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

::selection { background: rgba(52, 211, 153, .28); color: #fff; }

:focus-visible { outline: 2px solid var(--emerald); outline-offset: 3px; border-radius: 4px; }

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .12); border-radius: 99px; }
::-webkit-scrollbar-track { background: transparent; }

.container {
	width: min(1160px, 100% - 2.5rem);
	margin-inline: auto;
}

.container-narrow { width: min(820px, 100% - 2.5rem); }

/* ---------- Atmosphere: mesh orbs + film grain ---------- */
.mesh {
	position: fixed;
	inset: 0;
	z-index: -1;
	overflow: hidden;
}

.orb {
	position: absolute;
	display: block;
	border-radius: 50%;
	/* No blur filter: the radial gradients fade to transparent on their own,
	   and large animated blurs are a GPU-compositor killer on weak devices. */
	opacity: .5;
}

.orb-a {
	width: 46vw; height: 46vw;
	inset-block-start: -12vw;
	inset-inline-start: -8vw;
	background: radial-gradient(circle, rgba(52, 211, 153, .32) 0%, rgba(52, 211, 153, .12) 35%, transparent 68%);
	animation: drift-a 34s ease-in-out infinite alternate;
}

.orb-b {
	width: 38vw; height: 38vw;
	inset-block-start: 24vh;
	inset-inline-end: -12vw;
	background: radial-gradient(circle, rgba(45, 212, 191, .24) 0%, rgba(45, 212, 191, .09) 35%, transparent 68%);
	animation: drift-b 42s ease-in-out infinite alternate;
}

.orb-c {
	width: 30vw; height: 30vw;
	inset-block-end: -10vw;
	inset-inline-start: 30vw;
	background: radial-gradient(circle, rgba(245, 208, 106, .14) 0%, rgba(245, 208, 106, .05) 35%, transparent 68%);
	animation: drift-c 38s ease-in-out infinite alternate;
}

@keyframes drift-a { to { transform: translate3d(6vw, 8vh, 0) scale(1.08); } }
@keyframes drift-b { to { transform: translate3d(-5vw, -6vh, 0) scale(.94); } }
@keyframes drift-c { to { transform: translate3d(-4vw, -8vh, 0) scale(1.1); } }

.noise {
	position: fixed;
	inset: 0;
	z-index: 90;
	pointer-events: none;
	opacity: .032;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Type helpers ---------- */
.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .38rem .95rem;
	border: 1px solid rgba(52, 211, 153, .25);
	border-radius: 999px;
	background: rgba(52, 211, 153, .08);
	color: #7fe6c3;
	font-size: .78rem;
	font-weight: 500;
}

html[dir="ltr"] .eyebrow {
	font-size: .68rem;
	text-transform: uppercase;
	letter-spacing: .18em;
}

.section-title {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(1.7rem, 3.4vw, 2.5rem);
	line-height: 1.35;
	margin-block-start: 1.1rem;
}

.section-sub {
	color: var(--ink-soft);
	max-width: 46rem;
	margin-inline: auto;
	margin-block-start: .9rem;
	font-size: 1.02rem;
}

.section {
	padding-block: clamp(5.5rem, 9vw, 8.5rem);
}

.section-head {
	text-align: center;
	margin-block-end: clamp(2.6rem, 5vw, 4rem);
}

/* ---------- Double-bezel shells ---------- */
.shell {
	background: var(--shell-bg);
	border: 1px solid var(--hairline);
	border-radius: 1.9rem;
	padding: .45rem;
}

.core {
	background: var(--core-bg);
	border: 1px solid var(--hairline-soft);
	border-radius: 1.45rem;
	box-shadow: inset 0 1px 1px rgba(255, 255, 255, .06);
	padding: 1.7rem;
	height: 100%;
}

/* ---------- Buttons ---------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .8rem;
	padding: .85rem 1.7rem;
	border-radius: 999px;
	font-weight: 600;
	font-size: .95rem;
	line-height: 1.4;
	transition: transform .5s var(--ease), background-color .5s var(--ease), box-shadow .5s var(--ease), filter .5s var(--ease);
	will-change: transform;
}

.btn:active { transform: scale(.97); }

.btn-primary {
	background: linear-gradient(120deg, var(--emerald), var(--teal));
	color: #04140d;
	box-shadow: 0 10px 32px -10px rgba(52, 211, 153, .5);
}

.btn-primary:hover {
	transform: translateY(-2px);
	filter: brightness(1.06);
	box-shadow: 0 16px 40px -12px rgba(52, 211, 153, .6);
}

.btn-orb {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.8rem;
	height: 1.8rem;
	border-radius: 50%;
	background: rgba(0, 0, 0, .16);
	margin-inline-end: -.6rem;
	transition: transform .5s var(--ease);
}

.btn-orb svg { width: .85rem; height: .85rem; }

html[dir="rtl"] .arrow-fwd { transform: scaleX(-1); }

.btn:hover .btn-orb { transform: translate(2px, -2px) scale(1.06); }
html[dir="rtl"] .btn:hover .btn-orb { transform: translate(-2px, -2px) scale(1.06); }

.btn-ghost {
	border: 1px solid var(--hairline);
	color: var(--ink);
	background: rgba(255, 255, 255, 0);
}

.btn-ghost:hover { background: rgba(255, 255, 255, .06); transform: translateY(-2px); }

.btn-wide { width: 100%; padding-block: 1.05rem; }

/* ---------- Navigation ---------- */
.nav-wrap {
	position: fixed;
	inset-inline: 0;
	inset-block-start: 0;
	z-index: 50;
	display: flex;
	justify-content: center;
	padding-block-start: 1.1rem;
	pointer-events: none;
}

.nav {
	pointer-events: auto;
	display: flex;
	align-items: center;
	gap: .9rem;
	padding: .5rem .65rem;
	border-radius: 999px;
	border: 1px solid var(--hairline);
	background: rgba(8, 9, 9, .55);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	transition: box-shadow .6s var(--ease), background-color .6s var(--ease);
	max-width: calc(100vw - 2rem);
}

.nav.scrolled {
	background: rgba(8, 9, 9, .78);
	box-shadow: 0 18px 50px -20px rgba(0, 0, 0, .8);
}

.brand {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	padding-inline: .35rem;
}

.brand-mark {
	display: inline-flex;
	padding: .3rem;
	border-radius: .7rem;
	background: rgba(255, 255, 255, .06);
	border: 1px solid var(--hairline-soft);
}

.brand-name {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: .95rem;
	white-space: nowrap;
}

.nav-links {
	display: flex;
	align-items: center;
}

.nav-links a {
	padding: .5rem .85rem;
	border-radius: 999px;
	color: var(--ink-soft);
	font-size: .88rem;
	transition: color .4s var(--ease), background-color .4s var(--ease);
	white-space: nowrap;
}

.nav-links a:hover { color: var(--ink); background: rgba(255, 255, 255, .06); }

.nav-actions {
	display: flex;
	align-items: center;
	gap: .45rem;
}

.lang-toggle {
	padding: .42rem .8rem;
	border: 1px solid var(--hairline);
	border-radius: 999px;
	font-size: .78rem;
	color: var(--ink-soft);
	transition: color .4s var(--ease), border-color .4s var(--ease);
	white-space: nowrap;
}

.lang-toggle:hover { color: var(--ink); border-color: rgba(255, 255, 255, .25); }

.nav-login {
	padding: .5rem .7rem;
	color: var(--ink-soft);
	font-size: .88rem;
	white-space: nowrap;
	transition: color .4s var(--ease);
}

.nav-login:hover { color: var(--ink); }

.btn-nav { padding: .55rem 1.15rem; font-size: .85rem; }

.burger {
	display: none;
	position: relative;
	width: 2.4rem;
	height: 2.4rem;
	border-radius: 50%;
	border: 1px solid var(--hairline);
}

.burger span {
	position: absolute;
	inset-inline-start: 50%;
	inset-block-start: 50%;
	width: 1rem;
	height: 1.5px;
	background: var(--ink);
	border-radius: 2px;
	transition: transform .5s var(--ease);
}

.burger span:first-child { transform: translate(-50%, calc(-50% - 3px)); }
.burger span:last-child { transform: translate(-50%, calc(-50% + 3px)); }
html[dir="rtl"] .burger span:first-child { transform: translate(50%, calc(-50% - 3px)); }
html[dir="rtl"] .burger span:last-child { transform: translate(50%, calc(-50% + 3px)); }

body.menu-open .burger span:first-child { transform: translate(-50%, -50%) rotate(45deg); }
body.menu-open .burger span:last-child { transform: translate(-50%, -50%) rotate(-45deg); }
html[dir="rtl"] body.menu-open .burger span:first-child { transform: translate(50%, -50%) rotate(-45deg); }
html[dir="rtl"] body.menu-open .burger span:last-child { transform: translate(50%, -50%) rotate(45deg); }

.mobile-menu {
	position: fixed;
	inset: 0;
	z-index: 40;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(4, 4, 4, .88);
	backdrop-filter: blur(28px);
	-webkit-backdrop-filter: blur(28px);
	opacity: 0;
	visibility: hidden;
	transition: opacity .6s var(--ease), visibility 0s linear .6s;
}

body.menu-open .mobile-menu {
	opacity: 1;
	visibility: visible;
	transition-delay: 0s;
}

.mobile-menu-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.1rem;
	text-align: center;
	padding: 2rem;
}

.mm-link {
	font-family: var(--font-display);
	font-size: 1.9rem;
	font-weight: 600;
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .6s var(--ease), transform .6s var(--ease), color .4s var(--ease);
}

.mm-link:hover { color: var(--emerald); }

body.menu-open .mm-link { opacity: 1; transform: translateY(0); }
body.menu-open .mm-link:nth-child(1) { transition-delay: .08s; }
body.menu-open .mm-link:nth-child(2) { transition-delay: .14s; }
body.menu-open .mm-link:nth-child(3) { transition-delay: .2s; }
body.menu-open .mm-link:nth-child(4) { transition-delay: .26s; }

.mm-row {
	display: flex;
	gap: 1rem;
	align-items: center;
	margin-block-start: .6rem;
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .6s var(--ease) .32s, transform .6s var(--ease) .32s;
}

.mm-buy {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .6s var(--ease) .38s, transform .6s var(--ease) .38s, background-color .4s, box-shadow .4s;
}

body.menu-open .mm-row,
body.menu-open .mm-buy { opacity: 1; transform: translateY(0); }

/* ---------- Hero ---------- */
.hero {
	padding-block-start: clamp(8rem, 14vh, 11rem);
	padding-block-end: clamp(3rem, 6vw, 5rem);
}

.hero-grid {
	display: grid;
	grid-template-columns: 1.06fr .94fr;
	gap: clamp(2.5rem, 5vw, 4.5rem);
	align-items: center;
}

.hero-title {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(2.3rem, 4.9vw, 3.9rem);
	line-height: 1.3;
	margin-block-start: 1.4rem;
	letter-spacing: 0;
}

html[dir="ltr"] .hero-title { line-height: 1.16; }

.glow-text {
	background: linear-gradient(115deg, var(--emerald) 10%, var(--teal) 55%, var(--gold) 105%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	filter: drop-shadow(0 0 22px rgba(52, 211, 153, .3));
}

.hero-sub {
	color: var(--ink-soft);
	font-size: 1.05rem;
	max-width: 55ch;
	margin-block-start: 1.4rem;
}

.cta-row {
	display: flex;
	flex-wrap: wrap;
	gap: .9rem;
	margin-block-start: 2.2rem;
}

/* ---------- Hero visual (invoice mock) ---------- */
.hero-visual { position: relative; }

.mock-stack {
	position: relative;
	max-width: 440px;
	margin-inline: auto;
}

.mock-card-back {
	position: absolute;
	inset-block-start: 6%;
	inset-inline-start: 8%;
	width: 88%;
	height: 92%;
	border: 1px solid var(--hairline-soft);
	border-radius: 2rem;
	background: rgba(255, 255, 255, .025);
	rotate: 4deg; /* individual property so the float animation below can't clobber it */
	animation: floaty 8s ease-in-out infinite alternate;
}

html[dir="rtl"] .mock-card-back { rotate: -4deg; }

.mock-invoice {
	position: relative;
	z-index: 1;
	animation: floaty 7s ease-in-out .6s infinite alternate-reverse;
}

@keyframes floaty {
	from { transform: translateY(0); }
	to { transform: translateY(-9px); }
}

.mi-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
}

.mi-store { color: var(--ink-faint); font-size: .78rem; }

.mi-no {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 1.02rem;
	margin-block-start: .15rem;
}

.mi-status {
	padding: .3rem .75rem;
	border-radius: 999px;
	background: rgba(52, 211, 153, .13);
	border: 1px solid rgba(52, 211, 153, .3);
	color: #7fe6c3;
	font-size: .74rem;
	white-space: nowrap;
}

.mi-lines {
	display: flex;
	flex-direction: column;
	gap: .75rem;
	margin-block: 1.4rem;
}

.mi-line {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.mi-line i, .mi-line b {
	display: block;
	height: 9px;
	border-radius: 99px;
	background: rgba(255, 255, 255, .08);
	width: var(--w);
}

.mi-line b { background: rgba(255, 255, 255, .14); }

.mi-totals {
	display: flex;
	flex-direction: column;
	gap: .45rem;
	font-size: .84rem;
	color: var(--ink-soft);
}

.mi-totals > div {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
}

.mi-totals span:last-child {
	font-variant-numeric: tabular-nums;
	direction: ltr;
}

.mi-total {
	border-block-start: 1px solid var(--hairline);
	padding-block-start: .6rem;
	margin-block-start: .35rem;
	color: var(--ink);
	font-weight: 600;
}

.mi-total span:last-child { color: var(--emerald); }

.mi-foot {
	display: flex;
	align-items: center;
	gap: 1rem;
	border-block-start: 1px solid var(--hairline);
	margin-block-start: 1.2rem;
	padding-block-start: 1.2rem;
}

.mi-qr {
	display: grid;
	grid-template-columns: repeat(5, 9px);
	gap: 2.5px;
}

.mi-qr i {
	width: 9px;
	height: 9px;
	border-radius: 2px;
	background: rgba(255, 255, 255, .07);
}

.mi-qr i.on { background: rgba(52, 211, 153, .85); }

.mi-qr-label { color: var(--ink-faint); font-size: .76rem; }

.float-chip {
	position: absolute;
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .55rem 1rem;
	border-radius: 999px;
	border: 1px solid var(--hairline);
	background: rgba(13, 15, 14, .92);
	box-shadow: 0 16px 40px -16px rgba(0, 0, 0, .7);
	font-size: .78rem;
	white-space: nowrap;
	z-index: 2;
}

.chip-sent {
	inset-block-start: -1.1rem;
	inset-inline-end: -.6rem;
	animation: floaty 6s ease-in-out .3s infinite alternate;
}

.chip-credit {
	inset-block-end: -1rem;
	inset-inline-start: -.8rem;
	border-color: rgba(245, 208, 106, .3);
	color: #f0dba4;
	animation: floaty 6.5s ease-in-out 1s infinite alternate-reverse;
}

.chip-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--emerald);
	box-shadow: 0 0 0 0 rgba(52, 211, 153, .5);
	animation: pulse 2.4s var(--ease) infinite;
}

@keyframes pulse {
	0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, .45); }
	70% { box-shadow: 0 0 0 9px rgba(52, 211, 153, 0); }
	100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}

/* ---------- Stats ---------- */
.stats { padding-block: clamp(2rem, 4vw, 3.5rem); }

.stats-row { border-radius: 1.6rem; }

.stats-core {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5rem;
	text-align: center;
	padding: 1.9rem 1.4rem;
	border-radius: 1.2rem;
}

.stat-num {
	display: block;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 2.1rem;
	line-height: 1.2;
	background: linear-gradient(120deg, var(--emerald), var(--teal));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.stat-label {
	display: block;
	color: var(--ink-soft);
	font-size: .84rem;
	margin-block-start: .3rem;
}

/* ---------- Bento features ---------- */
.bento {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.1rem;
}

.bento-large {
	grid-column: span 2;
	grid-row: span 2;
}

.bento-card .core {
	display: flex;
	flex-direction: column;
	gap: .7rem;
}

.bento-card h3 {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 1.12rem;
}

.bento-card p {
	color: var(--ink-soft);
	font-size: .93rem;
}

.bento-large h3 { font-size: 1.45rem; }
.bento-large p { font-size: 1rem; max-width: 52ch; }

.feat-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.7rem;
	height: 2.7rem;
	border-radius: .95rem;
	border: 1px solid rgba(52, 211, 153, .22);
	background: rgba(52, 211, 153, .08);
	color: var(--emerald);
	margin-block-end: .3rem;
}

.feat-icon svg { width: 1.25rem; height: 1.25rem; }

/* Pipeline animation inside the large card */
.pipeline {
	position: relative;
	display: flex;
	justify-content: space-between;
	gap: .5rem;
	margin-block-start: auto;
	padding-block-start: 2.2rem;
}

.pipe-track {
	position: absolute;
	inset-inline: 14px;
	inset-block-start: calc(2.2rem + 4px);
	height: 2px;
	border-radius: 99px;
	background: rgba(255, 255, 255, .1);
	overflow: hidden;
}

.pipe-fill {
	display: block;
	height: 100%;
	background: linear-gradient(90deg, var(--emerald), var(--teal));
	transform: scaleX(0);
	transform-origin: left;
	animation: pipefill 5.2s var(--ease) infinite;
}

html[dir="rtl"] .pipe-fill {
	transform-origin: right;
	background: linear-gradient(-90deg, var(--emerald), var(--teal));
}

@keyframes pipefill {
	0% { transform: scaleX(0); opacity: 1; }
	62% { transform: scaleX(1); opacity: 1; }
	86% { transform: scaleX(1); opacity: 1; }
	100% { transform: scaleX(1); opacity: 0; }
}

.pipe-node {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .55rem;
	flex: 1;
	min-width: 0;
}

.pipe-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .16);
	animation: nodeglow 5.2s var(--ease) infinite;
	animation-delay: calc(var(--i) * 1.15s);
}

@keyframes nodeglow {
	0%, 100% { background: rgba(255, 255, 255, .16); box-shadow: none; }
	12%, 55% { background: var(--emerald); box-shadow: 0 0 14px rgba(52, 211, 153, .65); }
}

.pipe-label {
	color: var(--ink-soft);
	font-size: .72rem;
	text-align: center;
	line-height: 1.5;
}

/* ---------- Steps ---------- */
.steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.1rem;
}

.step {
	position: relative;
	padding: 1.8rem 1.6rem;
	border: 1px solid var(--hairline);
	border-radius: 1.6rem;
	background: rgba(255, 255, 255, .02);
	transition: border-color .5s var(--ease), transform .5s var(--ease);
}

.step:hover { border-color: rgba(52, 211, 153, .3); transform: translateY(-4px); }

.step-num {
	display: block;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 2.5rem;
	line-height: 1.3;
	color: rgba(255, 255, 255, .13);
	margin-block-end: .4rem;
}

.step h3 {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 1.1rem;
	margin-block-end: .5rem;
}

.step p { color: var(--ink-soft); font-size: .93rem; }

/* ---------- Pricing ---------- */
.price-wrap { max-width: 30rem; margin-inline: auto; }

.price-shell {
	position: relative;
	border-radius: 2.1rem;
	padding: 1px;
	background: linear-gradient(150deg, rgba(52, 211, 153, .55), rgba(255, 255, 255, .07) 38%, rgba(245, 208, 106, .4));
	box-shadow: 0 40px 110px -40px rgba(52, 211, 153, .28);
}

.price-core {
	background: #0a0c0b;
	border-radius: calc(2.1rem - 1px);
	padding: clamp(1.8rem, 4vw, 2.6rem);
	text-align: center;
}

.price-badge {
	display: inline-block;
	padding: .35rem .95rem;
	border-radius: 999px;
	border: 1px solid var(--hairline);
	color: var(--ink-soft);
	font-size: .78rem;
}

.price-amount {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: .25rem;
	margin-block-start: 1.3rem;
	direction: ltr;
}

.price-currency { color: var(--ink-soft); font-size: 1.5rem; }

.price-value {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(3.4rem, 8vw, 4.6rem);
	line-height: 1;
	background: linear-gradient(120deg, var(--emerald), var(--teal) 70%, var(--gold) 120%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.price-note { color: var(--ink-soft); font-size: .92rem; margin-block-start: .7rem; }

.price-list {
	text-align: start;
	margin-block: 1.7rem;
	display: flex;
	flex-direction: column;
	gap: .8rem;
}

.price-list li {
	display: flex;
	align-items: flex-start;
	gap: .7rem;
	font-size: .94rem;
	color: var(--ink);
}

.li-check {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.35rem;
	height: 1.35rem;
	margin-block-start: .18rem;
	border-radius: 50%;
	background: rgba(52, 211, 153, .13);
	color: var(--emerald);
}

.li-check svg { width: .8rem; height: .8rem; }

.price-renewal {
	color: var(--ink-soft);
	font-size: .84rem;
	margin-block-start: 1.1rem;
	line-height: 1.8;
}

.price-secure { color: var(--ink-faint); font-size: .78rem; margin-block-start: .5rem; }

/* ---------- FAQ ---------- */
.faq { display: flex; flex-direction: column; gap: .75rem; }

.faq-item {
	border: 1px solid var(--hairline);
	border-radius: 1.25rem;
	background: rgba(255, 255, 255, .02);
	overflow: hidden;
	transition: border-color .5s var(--ease);
}

.faq-item.open { border-color: rgba(52, 211, 153, .3); }

.faq-q {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.1rem 1.4rem;
	font-weight: 500;
	font-size: .98rem;
	text-align: start;
	line-height: 1.6;
}

.faq-x {
	position: relative;
	flex: none;
	width: 1.6rem;
	height: 1.6rem;
	border-radius: 50%;
	border: 1px solid var(--hairline);
	transition: transform .5s var(--ease), border-color .5s var(--ease);
}

.faq-x::before, .faq-x::after {
	content: "";
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	width: .65rem;
	height: 1.5px;
	background: var(--ink-soft);
	translate: -50% -50%;
}

html[dir="rtl"] .faq-x::before, html[dir="rtl"] .faq-x::after { translate: 50% -50%; }

.faq-x::after { rotate: 90deg; }

.faq-item.open .faq-x { transform: rotate(45deg); border-color: rgba(52, 211, 153, .4); }

.faq-a {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows .55s var(--ease);
}

.faq-item.open .faq-a { grid-template-rows: 1fr; }

.faq-a-inner {
	overflow: hidden;
	/* Inline padding only. Block padding must NOT live here permanently: the
	   collapsed state is a 0fr grid row, and with border-box sizing a zero-height
	   box still renders its own padding — which left ~20px of dead space under
	   every closed question and made the list look mis-spaced. It is applied on
	   open instead, and transitions with the row so nothing jumps. */
	padding-inline: 1.4rem;
	padding-block: 0;
	color: var(--ink-soft);
	font-size: .93rem;
	line-height: 1.9;
	transition: padding-block-end .55s var(--ease);
}

.faq-item.open .faq-a-inner { padding-block-end: 1.25rem; }

/* Answers may be plain text or rich text from the CMS — space both. */
.faq-a-inner > p + p,
.faq-a-inner > ul,
.faq-a-inner > ol { margin-block-start: .6rem; }
.faq-a-inner ul, .faq-a-inner ol { padding-inline-start: 1.2rem; }
.faq-a-inner li { margin-block-end: .3rem; }
.faq-a-inner a { color: var(--emerald); text-decoration: underline; text-underline-offset: 3px; }
.faq-a-inner ul, .faq-a-inner ol { padding-inline-start: 1.4rem; margin-block-end: .6rem; }
.faq-a-inner a { color: var(--emerald); }

/* ---------- Footer ---------- */
.footer {
	border-block-start: 1px solid var(--hairline-soft);
	margin-block-start: clamp(3rem, 6vw, 5rem);
	padding-block: 3.5rem 2rem;
}

.footer-grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr;
	gap: 2.5rem;
}

.footer-tagline {
	color: var(--ink-soft);
	font-size: .9rem;
	margin-block-start: 1rem;
	max-width: 34ch;
}

.footer-disclaimer {
	color: var(--ink-faint);
	font-size: .76rem;
	margin-block-start: 1rem;
	max-width: 44ch;
	line-height: 1.9;
}

.footer-h {
	font-size: .8rem;
	color: var(--ink-faint);
	font-weight: 500;
	margin-block-end: 1rem;
}

html[dir="ltr"] .footer-h { text-transform: uppercase; letter-spacing: .14em; font-size: .7rem; }

.footer-links li { margin-block-end: .55rem; }

.footer-links a {
	color: var(--ink-soft);
	font-size: .9rem;
	transition: color .4s var(--ease);
}

.footer-links a:hover { color: var(--ink); }

.footer-bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .8rem;
	border-block-start: 1px solid var(--hairline-soft);
	margin-block-start: 2.8rem;
	padding-block-start: 1.5rem;
	color: var(--ink-faint);
	font-size: .8rem;
}

/* ---------- Panel pages (coming soon / errors) ---------- */
.panel-page {
	min-height: 78dvh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-block: 8rem 4rem;
	padding-inline: 1.25rem;
}

.panel { max-width: 34rem; width: 100%; text-align: center; }

.panel-core {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.1rem;
	padding: clamp(2rem, 5vw, 3rem);
}

.panel-title {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 1.55rem;
	line-height: 1.4;
}

.panel-big {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 5rem;
	line-height: 1;
	background: linear-gradient(120deg, var(--emerald), var(--teal));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.panel-body { color: var(--ink-soft); }

/* ---------- Toast ---------- */
.toast {
	position: fixed;
	inset-block-end: 1.6rem;
	inset-inline: 0;
	margin-inline: auto;
	width: max-content;
	max-width: calc(100vw - 2rem);
	padding: .85rem 1.5rem;
	border-radius: 999px;
	border: 1px solid var(--hairline);
	background: rgba(15, 17, 16, .96);
	box-shadow: 0 18px 50px -18px rgba(0, 0, 0, .8);
	font-size: .88rem;
	z-index: 80;
	transform: translateY(180%);
	transition: transform .6s var(--ease);
}

.toast.show { transform: translateY(0); }

/* ---------- Telegram contact FAB ---------- */
.tg-fab {
	position: fixed;
	inset-block-end: 1.6rem;
	/* Physical right in BOTH locales: keeps clear of the CookieScript consent
	   badge, which is pinned bottom-left and does not mirror for RTL. */
	right: 1.6rem;
	z-index: 70;
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	padding: .68rem 1.15rem .68rem .82rem;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, .16);
	background: linear-gradient(135deg, #2aabee, #229ed9 70%);
	color: #fff;
	font-family: var(--font-display);
	font-size: .92rem;
	font-weight: 600;
	line-height: 1;
	box-shadow: 0 14px 34px -12px rgba(34, 158, 217, .75), inset 0 1px 0 rgba(255, 255, 255, .18);
	transition: transform .35s var(--ease), box-shadow .35s var(--ease);
	animation: tgfab-in .7s var(--ease) .6s both;
}

.tg-fab:hover {
	transform: translateY(-3px) scale(1.02);
	box-shadow: 0 20px 44px -12px rgba(34, 158, 217, .85), inset 0 1px 0 rgba(255, 255, 255, .22);
}

.tg-fab:active { transform: translateY(-1px) scale(1); }

.tg-fab-ic {
	display: grid;
	place-items: center;
	width: 1.4rem;
	height: 1.4rem;
	flex: none;
}

.tg-fab-label { white-space: nowrap; }

@keyframes tgfab-in {
	from { opacity: 0; transform: translateY(26px) scale(.92); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
	.tg-fab { animation: none; }
	.tg-fab:hover { transform: none; }
}

/* ---------- Scroll reveal ---------- */
[data-reveal] {
	opacity: 0;
	transform: translateY(26px);
	filter: blur(7px);
	transition: opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease);
}

[data-reveal].revealed {
	opacity: 1;
	transform: translateY(0);
	filter: blur(0);
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
	.bento { grid-template-columns: repeat(2, 1fr); }
	.bento-large { grid-column: span 2; grid-row: auto; }
	.stats-core { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 960px) {
	.hero-grid { grid-template-columns: 1fr; }
	.hero-visual { max-width: 30rem; margin-inline: auto; width: 100%; margin-block-start: 1.5rem; }
	.nav-links { display: none; }
	.nav-login { display: none; }
	.burger { display: block; }
}

@media (max-width: 760px) {
	.section { padding-block: 4.5rem; }
	.bento { grid-template-columns: 1fr; }
	.bento-large { grid-column: auto; }
	.steps { grid-template-columns: 1fr; }
	.footer-grid { grid-template-columns: 1fr; gap: 2rem; }
	.btn-nav { display: none; }
	.float-chip { font-size: .72rem; }
	.chip-sent { inset-inline-end: 0; }
	.chip-credit { inset-inline-start: 0; }
	.pipe-label { font-size: .64rem; }
}

@media (max-width: 480px) {
	.hero-title { font-size: 2rem; }
	.cta-row .btn { width: 100%; }
	.stats-core { grid-template-columns: 1fr 1fr; gap: 1.1rem; padding: 1.4rem 1rem; }
	.stat-num { font-size: 1.7rem; }
}

/* ============================================================
   Authenticated UI: auth pages, dashboard shell, forms, tables
   ============================================================ */

.mesh-dim .orb { opacity: .22; }

/* ---------- Forms (shared) ---------- */
.form { display: flex; flex-direction: column; gap: 1.05rem; }

.field { display: flex; flex-direction: column; gap: .5rem; }

.field-label { font-size: .85rem; color: var(--ink-soft); font-weight: 500; }

.field-hint { font-size: .78rem; color: var(--ink-faint); }

.input {
	width: 100%;
	padding: .8rem 1rem;
	border-radius: .85rem;
	border: 1px solid var(--hairline);
	background: rgba(255, 255, 255, .03);
	color: var(--ink);
	font-family: inherit;
	font-size: .95rem;
	transition: border-color .4s var(--ease), background-color .4s var(--ease);
}

.input:focus {
	outline: none;
	border-color: rgba(52, 211, 153, .5);
	background: rgba(52, 211, 153, .04);
}

.input:disabled { opacity: .55; cursor: not-allowed; }

textarea.input { resize: vertical; min-height: 4.5rem; line-height: 1.7; }

.input-file { padding: .6rem; font-size: .85rem; }
.input-sm { padding: .55rem .7rem; font-size: .85rem; }
.input-num { width: 5.5rem; }

select.input { appearance: none; cursor: pointer; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.form-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-block-start: .3rem; }

.checkbox { display: flex; align-items: flex-start; gap: .6rem; font-size: .9rem; color: var(--ink-soft); cursor: pointer; }
.checkbox input { margin-block-start: .25rem; accent-color: var(--emerald); }

/* ---------- CookieScript overrides ----------
   The consent banner is third-party markup we cannot edit, and its close button
   and language switcher ship below the 24x24 minimum tap size. These raise them
   to 44px (the WCAG target) without touching its layout. Scoped to their ids and
   classes so nothing else is affected. */
#cookiescript_close,
.cookiescript_custom_select {
	min-width: 44px;
	min-height: 44px;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
}

.cookiescript_custom_select { padding-inline: .5rem; }

/* Keep them clear of each other so the targets do not overlap. */
#cookiescript_close { margin: 2px; }

/* ---------- Reviews ---------- */
/* Slider. Scroll-snap does the work, so direction (LTR/RTL) is handled by the
   browser and the whole thing still functions with JavaScript disabled. */
.review-slider { --rv-gap: 1.2rem; position: relative; }

.review-track {
	display: flex;
	gap: var(--rv-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
	/* Room for the focus ring and the cards' own shadow. */
	padding-block: .35rem;
}

.review-track::-webkit-scrollbar { display: none; }

.review-track:focus-visible {
	outline: 2px solid rgba(52, 211, 153, .55);
	outline-offset: 4px;
	border-radius: 1.25rem;
}

/* Widths are written out per breakpoint rather than divided from a custom
   property, so the track never depends on calc() resolving a variable divisor.
   4 cards + 3 gaps, 3 + 2, 2 + 1, then 1 full-width. */
.review-track > .review-card {
	flex: 0 0 calc((100% - 3 * var(--rv-gap)) / 4);
	scroll-snap-align: start;
}

@media (max-width: 1180px) {
	.review-track > .review-card { flex-basis: calc((100% - 2 * var(--rv-gap)) / 3); }
}
@media (max-width: 860px) {
	.review-track > .review-card { flex-basis: calc((100% - var(--rv-gap)) / 2); }
}
@media (max-width: 580px) {
	.review-track > .review-card { flex-basis: 100%; }
}

/* Controls — revealed by JS (the container ships hidden). */
.review-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .9rem;
	margin-block-start: 1.4rem;
}

.review-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.4rem;
	height: 2.4rem;
	padding: 0;
	border-radius: 50%;
	border: 1px solid var(--hairline);
	background: var(--shell-bg);
	color: var(--ink-soft);
	cursor: pointer;
	transition: color .3s var(--ease), border-color .3s var(--ease), background-color .3s var(--ease);
}

.review-arrow svg { width: 1.05rem; height: 1.05rem; }
.review-arrow:hover { color: var(--ink); border-color: rgba(52, 211, 153, .45); background: rgba(52, 211, 153, .08); }
.review-arrow:disabled { opacity: .35; cursor: default; }
/* The chevrons point along the reading direction. */
[dir="rtl"] .review-arrow svg { transform: scaleX(-1); }

.review-dots { display: flex; align-items: center; gap: .45rem; }

.review-dot {
	width: .5rem;
	height: .5rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--hairline);
	cursor: pointer;
	transition: background-color .3s var(--ease), width .3s var(--ease);
}

.review-dot[aria-selected="true"] { width: 1.4rem; border-radius: 999px; background: var(--emerald); }

.review-card { border-radius: 1.25rem; }
.review-card .core { display: flex; flex-direction: column; gap: .85rem; padding: 1.5rem; height: 100%; }

.review-stars { color: var(--gold); letter-spacing: .12em; font-size: .95rem; }
.review-stars-lg { font-size: 1.15rem; margin-inline-end: .5rem; }

.review-body {
	margin: 0;
	font-size: .95rem;
	line-height: 1.85;
	color: var(--ink);
	white-space: pre-line;
}

.review-author { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-block-start: auto; }
.review-name { font-weight: 600; font-size: .9rem; }
.review-role { font-size: .8rem; color: var(--ink-faint); }
.review-verified { font-size: .68rem; }

/* Portal: the customer's own submitted review */
.review-invite { margin-block-start: 1.2rem; }
.review-mine { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-block-start: .6rem; }
.review-mine .review-body { flex-basis: 100%; font-size: .9rem; color: var(--ink-soft); }

/* Admin moderation table: keep long review text readable */
.review-cell { max-width: 28rem; font-size: .85rem; line-height: 1.7; color: var(--ink-soft); }

/* ---------- Typeahead (admin email lookup) ---------- */
.typeahead { position: relative; display: flex; flex-direction: column; gap: .5rem; }

.typeahead-panel {
	position: absolute;
	inset-inline: 0;
	top: calc(100% + .35rem);
	z-index: 30;
	max-height: 17rem;
	overflow-y: auto;
	padding: .3rem;
	border-radius: .9rem;
	border: 1px solid var(--hairline);
	background: #0b0d0c;
	box-shadow: 0 18px 40px rgba(0, 0, 0, .55);
}

.typeahead-panel[hidden] { display: none; }

.typeahead-item {
	display: flex;
	flex-direction: column;
	gap: .15rem;
	width: 100%;
	padding: .55rem .7rem;
	border: 0;
	border-radius: .65rem;
	background: transparent;
	color: var(--ink);
	font-family: inherit;
	text-align: start;
	cursor: pointer;
	transition: background-color .2s var(--ease);
}

.typeahead-item:hover,
.typeahead-item.active { background: rgba(52, 211, 153, .12); }

.typeahead-item .ta-email { font-size: .9rem; }
.typeahead-item .ta-meta { font-size: .76rem; color: var(--ink-faint); }

.typeahead-status:empty { display: none; }
.typeahead-status.is-ok { color: var(--emerald); }
.typeahead-status.is-warn { color: var(--gold); }

/* Button sizes/variants used across the app */
.btn-sm { padding: .6rem 1.1rem; font-size: .85rem; }
.btn-xs { padding: .42rem .8rem; font-size: .78rem; }

.btn-danger {
	background: rgba(248, 113, 113, .14);
	border: 1px solid rgba(248, 113, 113, .4);
	color: #fca5a5;
}
.btn-danger:hover { background: rgba(248, 113, 113, .22); transform: translateY(-1px); }

.btn-link-danger {
	color: #f87171;
	font-size: .82rem;
	background: none;
	border: 0;
	cursor: pointer;
	transition: color .3s var(--ease);
}
.btn-link-danger:hover { color: #fca5a5; text-decoration: underline; }

.inline-form { display: inline; }

/* ---------- Auth pages ---------- */
.auth-body { display: block; }

.auth-shell {
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 1.4rem;
}

.auth-top {
	width: 100%;
	max-width: 30rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-block: .6rem 1.4rem;
}

.auth-main {
	flex: 1;
	width: 100%;
	max-width: 30rem;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-block: 1rem 3rem;
}

.auth-card { width: 100%; border-radius: 1.7rem; }
.auth-card .core { padding: clamp(1.6rem, 5vw, 2.4rem); }

.auth-title { font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; }
.auth-sub { color: var(--ink-soft); font-size: .95rem; margin-block: .6rem 1.6rem; }
.auth-note { color: var(--ink-soft); font-size: .88rem; margin-block-start: 1rem; }
.auth-center { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1rem; }

.auth-links {
	display: flex;
	flex-direction: column;
	gap: .7rem;
	margin-block-start: 1.5rem;
	font-size: .88rem;
	color: var(--ink-soft);
}
.auth-links a { color: var(--emerald); }
.auth-links a:hover { text-decoration: underline; }

.success-mark {
	width: 3.4rem; height: 3.4rem;
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: rgba(52, 211, 153, .14);
	border: 1px solid rgba(52, 211, 153, .4);
	color: var(--emerald);
}
.success-mark svg { width: 1.6rem; height: 1.6rem; }

/* Key display box */
.key-box, .key-inline {
	display: flex;
	align-items: center;
	gap: .6rem;
	flex-wrap: wrap;
}
.key-box {
	justify-content: center;
	background: rgba(52, 211, 153, .06);
	border: 1px solid rgba(52, 211, 153, .28);
	border-radius: .9rem;
	padding: .9rem 1.1rem;
	margin-block: .4rem 1rem;
}
.key-box code, .key-inline code {
	font-family: Consolas, Menlo, monospace;
	font-size: 1.05rem;
	letter-spacing: .5px;
	color: #eafff6;
	font-weight: 600;
}
.btn-copy {
	padding: .35rem .8rem;
	border-radius: 999px;
	border: 1px solid var(--hairline);
	background: rgba(255, 255, 255, .04);
	color: var(--ink-soft);
	font-size: .78rem;
	cursor: pointer;
	transition: color .3s, border-color .3s;
}
.btn-copy:hover { color: var(--ink); border-color: rgba(52, 211, 153, .4); }

/* ---------- App shell ---------- */
.app-body { display: block; }

.app-wrap { display: flex; min-height: 100dvh; }

.sidebar {
	position: fixed;
	inset-block: 0;
	inset-inline-start: 0;
	width: 250px;
	display: flex;
	flex-direction: column;
	padding: 1.2rem .9rem;
	background: rgba(9, 11, 10, .82);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border-inline-end: 1px solid var(--hairline);
	z-index: 30;
}

.sidebar-brand { padding: .4rem .6rem 1.4rem; }
.admin-tag {
	font-style: normal;
	font-size: .62rem;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: var(--gold);
	background: rgba(245, 208, 106, .12);
	padding: .1rem .4rem;
	border-radius: 5px;
	margin-inline-start: .3rem;
}

.sidebar-nav { display: flex; flex-direction: column; gap: .25rem; }

.side-link {
	display: flex;
	align-items: center;
	gap: .75rem;
	width: 100%;
	padding: .68rem .85rem;
	border-radius: .8rem;
	color: var(--ink-soft);
	font-size: .92rem;
	text-align: start;
	background: none;
	border: 0;
	cursor: pointer;
	transition: color .3s var(--ease), background-color .3s var(--ease);
}
.side-link:hover { color: var(--ink); background: rgba(255, 255, 255, .05); }
.side-link.active { color: #eafff6; background: rgba(52, 211, 153, .12); }
.side-link.active .side-ico { color: var(--emerald); }

.side-ico { display: inline-flex; width: 1.15rem; height: 1.15rem; flex: none; }
.side-ico svg { width: 100%; height: 100%; }

.sidebar-foot { margin-block-start: auto; padding-block-start: 1rem; border-block-start: 1px solid var(--hairline-soft); }
.side-logout { color: var(--ink-faint); }
.side-logout:hover { color: #fca5a5; }

.app-main {
	flex: 1;
	min-width: 0;
	margin-inline-start: 250px;
	display: flex;
	flex-direction: column;
}

.app-topbar {
	position: sticky;
	inset-block-start: 0;
	z-index: 20;
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1rem clamp(1rem, 3vw, 2rem);
	background: rgba(5, 5, 5, .72);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-block-end: 1px solid var(--hairline);
}

.app-title { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; flex: 1; }

.app-topbar-right { display: flex; align-items: center; gap: .9rem; }
.topbar-user { color: var(--ink-faint); font-size: .82rem; }

.side-toggle {
	display: none;
	width: 2.2rem; height: 2.2rem;
	border-radius: .6rem;
	border: 1px solid var(--hairline);
	color: var(--ink);
	align-items: center;
	justify-content: center;
}
.side-toggle svg { width: 1.1rem; height: 1.1rem; }

.app-content { padding: clamp(1.2rem, 3vw, 2rem); max-width: 1080px; width: 100%; }

/* ---------- Page building blocks ---------- */
.page-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	margin-block-end: 1.6rem;
}
.page-h2 { font-family: var(--font-display); font-weight: 600; font-size: 1.4rem; }
.page-sub { color: var(--ink-soft); font-size: .9rem; margin-block-start: .2rem; }

.panel-card { border-radius: 1.4rem; margin-block-end: 1.2rem; }
.panel-card .core { padding: 1.5rem; }
/* padding:0 for flush tables; overflow-x:auto lets a wide table scroll inside
   the card instead of clipping or pushing the page wider. */
.panel-card .core.no-pad { padding: 0; overflow-x: auto; }
.card-h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; margin-block-end: 1.1rem; }
.card-head { padding: 1.2rem 1.5rem .2rem; }
.pad { padding: 1.5rem; }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; align-items: start; }

.empty-card { border-radius: 1.4rem; }
.empty-card .core { padding: 2.4rem; text-align: center; color: var(--ink-soft); display: flex; flex-direction: column; gap: 1rem; align-items: center; }

.muted { color: var(--ink-faint); }

/* Definition lists */
.def { display: grid; grid-template-columns: auto 1fr; gap: .6rem 1.4rem; font-size: .9rem; }
.def dt { color: var(--ink-faint); }
.def dd { color: var(--ink); }

/* ---------- License cards (portal) ---------- */
.license-card { border-radius: 1.5rem; margin-block-end: 1.2rem; }
.license-card .core { padding: 1.6rem; }

.lc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.lc-label { font-size: .78rem; color: var(--ink-faint); display: block; margin-block-end: .45rem; }

.lc-grid {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	border-block: 1px solid var(--hairline-soft);
	margin-block: 1.3rem;
	padding-block: 1.3rem;
}
.lc-stat { display: flex; flex-direction: column; gap: .4rem; }
.lc-stat-label { font-size: .78rem; color: var(--ink-faint); }
.lc-stat-value { font-size: 1.05rem; font-weight: 600; }
.lc-actions { display: flex; gap: .6rem; flex-wrap: wrap; }

.site-list { display: flex; flex-direction: column; gap: .6rem; margin-block-start: .7rem; }
.site-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: .8rem 1rem;
	border: 1px solid var(--hairline-soft);
	border-radius: .8rem;
	background: rgba(255, 255, 255, .02);
}
.site-domain { display: block; font-size: .92rem; font-weight: 500; }
.site-meta { display: block; font-size: .74rem; color: var(--ink-faint); margin-block-start: .2rem; }

/* ---------- Badges ---------- */
.badge {
	display: inline-block;
	padding: .22rem .7rem;
	border-radius: 999px;
	font-size: .74rem;
	font-weight: 500;
	line-height: 1.6;
}
.badge-ok { background: rgba(52, 211, 153, .14); color: #7fe6c3; border: 1px solid rgba(52, 211, 153, .3); }
.badge-warn { background: rgba(245, 208, 106, .13); color: #f0dba4; border: 1px solid rgba(245, 208, 106, .3); }
.badge-danger { background: rgba(248, 113, 113, .14); color: #fca5a5; border: 1px solid rgba(248, 113, 113, .32); }
.badge-info { background: rgba(96, 165, 250, .14); color: #93c5fd; border: 1px solid rgba(96, 165, 250, .3); }
.badge-muted { background: rgba(255, 255, 255, .06); color: var(--ink-soft); border: 1px solid var(--hairline); }

/* ---------- Tables ---------- */
.table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.table thead th {
	text-align: start;
	padding: .9rem 1.2rem;
	font-size: .74rem;
	font-weight: 600;
	color: var(--ink-faint);
	text-transform: uppercase;
	letter-spacing: .04em;
	border-block-end: 1px solid var(--hairline);
	white-space: nowrap;
}
.table tbody td { padding: .9rem 1.2rem; border-block-end: 1px solid var(--hairline-soft); vertical-align: middle; }
.table tbody tr:last-child td { border-block-end: 0; }
.table tbody tr { transition: background-color .3s var(--ease); }
.table tbody tr:hover { background: rgba(255, 255, 255, .02); }
.table code { font-family: Consolas, Menlo, monospace; font-size: .84rem; color: #cfe; }
.table a { color: var(--emerald); }
.table a:hover { text-decoration: underline; }

/* ---------- Search / filters ---------- */
.search-bar { display: flex; gap: .6rem; margin-block-end: 1.2rem; }
.search-bar .input { max-width: 26rem; }

.filter-row { display: flex; gap: .5rem; flex-wrap: wrap; margin-block-end: 1.2rem; }
.chip {
	padding: .4rem .9rem;
	border-radius: 999px;
	border: 1px solid var(--hairline);
	color: var(--ink-soft);
	font-size: .82rem;
	transition: color .3s, border-color .3s, background-color .3s;
}
.chip:hover { color: var(--ink); }
.chip-on { background: rgba(52, 211, 153, .12); color: #7fe6c3; border-color: rgba(52, 211, 153, .3); }

/* ---------- Stat cards (admin) ---------- */
.stat-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 1rem;
	margin-block-end: 1.4rem;
}
.stat-card { border-radius: 1.2rem; }
.stat-card .core { padding: 1.3rem 1.4rem; }
.sc-label { display: block; font-size: .8rem; color: var(--ink-faint); margin-block-end: .5rem; }
.sc-value { font-family: var(--font-display); font-weight: 700; font-size: 1.7rem; color: #eafff6; }
.sc-sub { font-size: .95rem; color: var(--ink-faint); font-style: normal; font-weight: 400; }
.sc-link { color: var(--emerald); margin-inline-start: .3rem; }

/* ---------- Action grid (admin license) ---------- */
.action-grid { display: flex; flex-direction: column; gap: .8rem; }
.revoke-form { display: flex; gap: .5rem; align-items: center; }
.revoke-form .input { flex: 1; }

/* ---------- Tickets thread ---------- */
.thread { display: flex; flex-direction: column; gap: 1rem; margin-block-end: 1.4rem; }
.msg {
	border: 1px solid var(--hairline);
	border-radius: 1rem;
	padding: 1.1rem 1.3rem;
	max-width: 82%;
}
.msg-mine { background: rgba(255, 255, 255, .02); align-self: flex-start; }
.msg-staff {
	background: rgba(52, 211, 153, .06);
	border-color: rgba(52, 211, 153, .22);
	align-self: flex-end;
}
.msg-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-block-end: .5rem; }
.msg-author { font-size: .82rem; font-weight: 600; color: var(--ink); }
.msg-time { font-size: .74rem; color: var(--ink-faint); }
.msg-body { font-size: .93rem; color: var(--ink-soft); line-height: 1.8; }
.msg-attach {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	margin-block-start: .7rem;
	font-size: .82rem;
	color: var(--emerald);
}
.msg-attach:hover { text-decoration: underline; }

.reply-box { margin-block-start: .5rem; }

/* ---------- Notices ---------- */
.notice {
	padding: .9rem 1.2rem;
	border-radius: .9rem;
	font-size: .9rem;
	margin-block-end: 1.2rem;
	border: 1px solid var(--hairline);
	background: rgba(255, 255, 255, .03);
	color: var(--ink-soft);
}
.notice-ok { border-color: rgba(52, 211, 153, .3); background: rgba(52, 211, 153, .07); color: #b8f0dc; }
.notice-warn { border-color: rgba(245, 208, 106, .3); background: rgba(245, 208, 106, .07); color: #f0dba4; }
.notice-danger { border-color: rgba(248, 113, 113, .32); background: rgba(248, 113, 113, .08); color: #fca5a5; }
.notice-muted { color: var(--ink-faint); }

/* ---------- Flash ---------- */
.flash-stack {
	position: fixed;
	inset-block-start: 5.2rem;
	inset-inline: 0;
	margin-inline: auto;
	width: max-content;
	max-width: calc(100vw - 2rem);
	z-index: 60;
	display: flex;
	flex-direction: column;
	gap: .5rem;
	pointer-events: none;
}
.flash {
	padding: .8rem 1.3rem;
	border-radius: 999px;
	font-size: .88rem;
	border: 1px solid var(--hairline);
	background: rgba(15, 17, 16, .96);
	box-shadow: 0 16px 44px -18px rgba(0, 0, 0, .8);
	pointer-events: auto;
}
.flash-success { border-color: rgba(52, 211, 153, .4); color: #b8f0dc; }
.flash-error { border-color: rgba(248, 113, 113, .4); color: #fca5a5; }

.row-link { cursor: pointer; }

/* ---------- App responsive ---------- */
@media (max-width: 860px) {
	.sidebar {
		transform: translateX(-100%);
		transition: transform .4s var(--ease);
	}
	html[dir="rtl"] .sidebar { transform: translateX(100%); }
	body.sidebar-open .sidebar { transform: translateX(0); }
	.app-main { margin-inline-start: 0; }
	.side-toggle { display: inline-flex; }
	.two-col { grid-template-columns: 1fr; }
	.grid-2 { grid-template-columns: 1fr; }
	.topbar-user { display: none; }
	.msg { max-width: 100%; }
}

/* ---------- Payment buttons ---------- */
.pay-buttons { display: flex; flex-direction: column; gap: .7rem; }
.pay-buttons .pay-form { display: block; }
.pay-buttons .btn-wide { width: 100%; }

.pay-buttons-inline {
	flex-direction: row;
	flex-wrap: wrap;
	gap: .5rem;
}
.pay-buttons-inline .pay-form { display: inline-block; }

/* ---------- Admin toggle rows ---------- */
.toggle-row {
	display: flex;
	align-items: center;
	gap: .7rem;
	flex-wrap: wrap;
	font-size: .95rem;
	color: var(--ink);
	cursor: pointer;
}
.toggle-row input[type="checkbox"] {
	width: 1.1rem;
	height: 1.1rem;
	accent-color: var(--emerald);
	cursor: pointer;
}

.soft-hr {
	border: 0;
	border-block-start: 1px solid var(--hairline-soft);
	margin-block: 1.2rem;
}

/* ---------- Content / doc pages ---------- */
.doc-section { padding-block-start: clamp(7rem, 12vh, 9rem); }
.doc-title {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(1.8rem, 4vw, 2.6rem);
	margin-block-end: 1.6rem;
}
.doc-body { color: var(--ink-soft); font-size: 1rem; line-height: 2; }
.doc-body h2 { font-family: var(--font-display); font-weight: 600; font-size: 1.35rem; color: var(--ink); margin-block: 2rem .8rem; }
.doc-body h3 { font-weight: 600; font-size: 1.08rem; color: var(--ink); margin-block: 1.4rem .5rem; }
.doc-body p { margin-block-end: 1rem; }
.doc-body ul { list-style: disc; padding-inline-start: 1.4rem; margin-block-end: 1rem; display: flex; flex-direction: column; gap: .4rem; }
.doc-body li { color: var(--ink-soft); }
.doc-body strong { color: var(--ink); }
.doc-body a { color: var(--emerald); }
.doc-body a:hover { text-decoration: underline; }
.doc-back { margin-block-start: 2.5rem; }
.doc-back a { color: var(--emerald); }
.doc-back a:hover { text-decoration: underline; }

/* ---------- Contact ---------- */
.contact-card { border-radius: 1.7rem; }
.contact-card .core { padding: clamp(1.6rem, 4vw, 2.4rem); }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Changelog timeline ---------- */
.timeline { display: flex; flex-direction: column; gap: 1rem; margin-block-start: 1.5rem; }
.tl-item { border-radius: 1.2rem; }
.tl-item .core { padding: 1.3rem 1.5rem; }
.tl-head { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.tl-version { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; color: var(--emerald); }
.tl-date { color: var(--ink-faint); font-size: .82rem; margin-inline-start: auto; }
.tl-log { color: var(--ink-soft); font-size: .93rem; line-height: 1.9; margin-block-start: .7rem; }

/* ---------- Admin CMS ---------- */
.code-area { font-family: Consolas, Menlo, monospace; font-size: .85rem; line-height: 1.6; }
.faq-admin-row { display: flex; align-items: flex-end; gap: 1.2rem; flex-wrap: wrap; }
.faq-order { max-width: 8rem; }
.faq-admin-actions { margin-inline-start: auto; }
.faq-delete { margin-block-start: .8rem; text-align: end; }

/* ---------- Install wizard ---------- */
.install-wrap {
	max-width: 40rem;
	margin-inline: auto;
	padding: 2.5rem 1.4rem 4rem;
}
.install-brand {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-block-end: 1.6rem;
}
.install-step { color: var(--ink-faint); font-size: .82rem; }
.install-card { border-radius: 1.7rem; }
.install-card .core { padding: clamp(1.6rem, 4vw, 2.4rem); }
.install-card .card-h3 { margin-block: 1.6rem 1rem; }

.req-list { display: flex; flex-direction: column; gap: .4rem; }
.req-row {
	display: flex;
	align-items: center;
	gap: .7rem;
	padding: .5rem .8rem;
	border-radius: .7rem;
	background: rgba(255, 255, 255, .02);
	font-size: .9rem;
}
.req-mark { width: 1.2rem; text-align: center; font-weight: 700; }
.req-ok .req-mark { color: var(--emerald); }
.req-bad .req-mark { color: #f87171; }
.req-bad { background: rgba(248, 113, 113, .07); }
.req-label { color: var(--ink); }
.req-hint { color: var(--ink-faint); font-size: .78rem; margin-inline-start: auto; }

/* ---------- WYSIWYG editor ---------- */
.wz {
	border: 1px solid var(--hairline);
	border-radius: .85rem;
	background: rgba(255, 255, 255, .03);
	overflow: hidden;
}
.wz-bar {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	padding: .5rem .6rem;
	border-block-end: 1px solid var(--hairline);
	background: rgba(255, 255, 255, .02);
}
.wz-group { display: inline-flex; gap: .2rem; padding-inline-end: .5rem; border-inline-end: 1px solid var(--hairline-soft); }
.wz-group:last-child { border-inline-end: 0; padding-inline-end: 0; }
.wz-btn {
	min-width: 1.9rem;
	height: 1.9rem;
	padding: 0 .5rem;
	border-radius: .5rem;
	border: 1px solid transparent;
	background: rgba(255, 255, 255, .04);
	color: var(--ink-soft);
	font-size: .82rem;
	line-height: 1;
	cursor: pointer;
	transition: color .3s var(--ease), background-color .3s var(--ease);
}
.wz-btn:hover { color: var(--ink); background: rgba(52, 211, 153, .14); }
.wz-editor {
	min-height: 12rem;
	max-height: 32rem;
	overflow-y: auto;
	padding: 1rem 1.1rem;
	font-size: .95rem;
	line-height: 1.9;
	color: var(--ink);
}
.wz-editor:focus { outline: none; }
.wz-editor h2 { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; margin-block: 1.1rem .5rem; }
.wz-editor h3 { font-weight: 600; font-size: 1.08rem; margin-block: .9rem .4rem; }
.wz-editor p { margin-block-end: .8rem; }
.wz-editor ul { list-style: disc; padding-inline-start: 1.4rem; margin-block-end: .8rem; }
.wz-editor ol { list-style: decimal; padding-inline-start: 1.4rem; margin-block-end: .8rem; }
.wz-editor blockquote {
	border-inline-start: 3px solid rgba(52, 211, 153, .5);
	padding-inline-start: 1rem;
	color: var(--ink-soft);
	margin-block: .8rem;
}
.wz-editor code { font-family: Consolas, Menlo, monospace; background: rgba(255, 255, 255, .07); padding: .1rem .35rem; border-radius: 4px; font-size: .88em; }
.wz-editor a { color: var(--emerald); }
.wz .wz-source { display: none; width: 100%; border: 0; border-radius: 0; background: #0a0c0b; }
.wz.is-source .wz-source { display: block; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}

	[data-reveal] { opacity: 1; transform: none; filter: none; }
}