/* ==========================================================================
   Expert MQL — main stylesheet (v2)
   "Lajvard & Saffron": deep lapis night for header, hero, page heads and
   footer; warm paper for reading; saffron for action. RTL-first.
   ========================================================================== */

@font-face {
	font-family: "Estedad";
	src: url("../fonts/estedad-wght.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

:root {
	--paper: #f6f3ec;
	--paper-2: #efe9dc;
	--surface: #ffffff;
	--ink: #13182a;
	--ink-2: #434a5f;
	--ink-3: #6e7489;
	--line: #e7e1d3;
	--line-2: #d8d0be;

	--night: #0b1640;
	--night-2: #102062;
	--night-3: #182c80;
	--on-night: #e8ecff;
	--on-night-2: #a9b5e3;
	--line-night: rgba(255, 255, 255, .1);

	--lj-50: #eef2fd;
	--lj-100: #dde5fb;
	--lj-200: #bfcdf6;
	--lj-500: #2f52d0;
	--lj-600: #2241b4;
	--lj-700: #1b338c;

	--sf-100: #fff3d2;
	--sf-300: #ffd36b;
	--sf-500: #f5a700;
	--sf-600: #db9400;
	--sf-700: #a86e00;

	--up: #0f9f6e;
	--down: #e1474f;
	--wa: #1faa59;

	--font: "Estedad", Tahoma, "Segoe UI", system-ui, sans-serif;
	--mono: ui-monospace, "Cascadia Code", "SFMono-Regular", Consolas, "Liberation Mono", monospace;

	--r-sm: 10px;
	--r: 16px;
	--r-lg: 24px;
	--r-pill: 999px;

	--sh-1: 0 1px 2px rgba(19, 24, 42, .06), 0 1px 1px rgba(19, 24, 42, .03);
	--sh-2: 0 14px 34px -14px rgba(19, 24, 42, .24);
	--sh-3: 0 34px 80px -30px rgba(11, 22, 64, .55);
	--glow: 0 0 0 1px rgba(47, 82, 208, .18), 0 18px 40px -18px rgba(34, 65, 180, .45);

	--girih: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.06'%3E%3Cpath d='M32 8l6.5 17.5L56 32l-17.5 6.5L32 56l-6.5-17.5L8 32l17.5-6.5z'/%3E%3Cpath d='M0 0l14 14M64 0L50 14M0 64l14-14M64 64L50 50'/%3E%3C/g%3E%3C/svg%3E");

	--wrap: 1240px;
	--gutter: 20px;
	--header-h: 74px;
	--ease: cubic-bezier(.2, .7, .2, 1);
}

/* ----- Base ----------------------------------------------------------- */

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-padding-top: calc(var(--header-h) + 16px);
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font);
	font-size: 1rem;
	line-height: 1.85;
	font-weight: 420;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}

img,
svg,
video,
iframe { max-width: 100%; }

img { height: auto; display: block; }

a { color: var(--lj-600); text-decoration: none; }
a:hover { color: var(--lj-700); }

h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.45; font-weight: 800; color: var(--ink); }
p { margin: 0 0 1em; }

button,
input,
select,
textarea { font: inherit; color: inherit; }

:focus-visible { outline: 3px solid var(--sf-500); outline-offset: 2px; border-radius: 6px; }

summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }

::selection { background: var(--sf-300); color: var(--ink); }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.skip-link {
	position: absolute;
	inset-inline-start: 12px;
	top: -60px;
	z-index: 100;
	padding: 10px 16px;
	background: var(--ink);
	color: #fff;
	border-radius: var(--r-sm);
}
.skip-link:focus { top: 12px; color: #fff; }

.icon { width: 1.25em; height: 1.25em; flex: none; vertical-align: -.2em; }

.container {
	width: 100%;
	max-width: calc(var(--wrap) + var(--gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.live-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #2fd89a;
	box-shadow: 0 0 0 0 rgba(47, 216, 154, .6);
	animation: pulse 2s infinite;
	flex: none;
}

/* ----- Buttons, chips ----------------------------------------------------- */

.btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5em;
	min-height: 46px;
	padding: .55em 1.3em;
	border: 1.5px solid transparent;
	border-radius: var(--r-pill);
	font-weight: 750;
	font-size: .95rem;
	line-height: 1.3;
	cursor: pointer;
	transition: transform .25s var(--ease), background-color .2s, border-color .2s, box-shadow .25s, color .2s;
	white-space: nowrap;
	isolation: isolate;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn .icon { width: 1.15em; height: 1.15em; }

.btn--saffron { background: linear-gradient(135deg, #ffc233, var(--sf-500)); color: var(--ink); box-shadow: 0 10px 26px -12px rgba(219, 148, 0, .95); }
.btn--saffron:hover { color: var(--ink); box-shadow: 0 16px 34px -12px rgba(219, 148, 0, 1); }
.btn--primary { background: linear-gradient(135deg, var(--lj-500), var(--lj-700)); color: #fff; box-shadow: 0 10px 24px -12px rgba(34, 65, 180, .9); }
.btn--primary:hover { color: #fff; }
.btn--outline { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn--outline:hover { background: var(--ink); color: #fff; }
.btn--ghost { background: var(--lj-50); color: var(--lj-700); }
.btn--ghost:hover { background: var(--lj-100); color: var(--lj-700); }
.btn--light { background: rgba(255, 255, 255, .08); color: #fff; border-color: rgba(255, 255, 255, .28); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.btn--light:hover { background: #fff; color: var(--night); border-color: #fff; }
.btn--sm { min-height: 40px; padding: .4em 1.05em; font-size: .9rem; }
.btn--lg { min-height: 56px; padding: .7em 1.7em; font-size: 1.02rem; }
.btn--block { width: 100%; }

/* A light sweep across the button on hover (and now and then on its own). */
.btn--shine { overflow: hidden; }
.btn--shine::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(110deg, transparent 32%, rgba(255, 255, 255, .6) 50%, transparent 68%);
	transform: translateX(130%);
	animation: shine 5.5s var(--ease) 2s infinite;
}
.btn--shine:hover::after { animation: shine-once .9s var(--ease); }

.chips { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 10px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
	display: inline-flex;
	align-items: center;
	gap: .45em;
	flex: none;
	padding: .4em 1em;
	border: 1px solid var(--line-2);
	border-radius: var(--r-pill);
	background: var(--surface);
	color: var(--ink-2);
	font-size: .88rem;
	font-weight: 650;
	transition: border-color .2s, color .2s, background .2s, transform .2s var(--ease);
}
.chip:hover { border-color: var(--lj-500); color: var(--lj-600); transform: translateY(-1px); }
.chip.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip__count { font-size: .78rem; opacity: .65; font-weight: 500; }

.link-more { display: inline-flex; align-items: center; gap: .35em; font-weight: 750; font-size: .92rem; white-space: nowrap; }
.link-more .icon { transition: transform .25s var(--ease); }
.link-more:hover .icon { transform: translateX(-4px); }

.icon-btn {
	position: relative;
	display: inline-grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	color: inherit;
	background: transparent;
	border: 0;
	cursor: pointer;
	transition: background .2s, color .2s;
}
.icon-btn .icon { width: 22px; height: 22px; }

/* ----- Top bar + header (dark, like the footer) ------------------------- */

.topbar { background: #08102f; color: var(--on-night-2); font-size: .8rem; border-bottom: 1px solid var(--line-night); }
.topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 38px; }
.topbar__note { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.topbar__links { display: flex; gap: 18px; list-style: none; margin: 0; padding: 0; }
.topbar__links a { display: inline-flex; align-items: center; gap: 6px; color: var(--on-night); }
.topbar__links a:hover { color: var(--sf-300); }
.topbar .icon { width: 15px; height: 15px; color: var(--sf-300); }

.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	color: var(--on-night);
	background: var(--girih), linear-gradient(90deg, var(--night), var(--night-2) 70%, var(--night-3));
	border-bottom: 1px solid var(--line-night);
	transition: box-shadow .3s;
}
.site-header.is-scrolled { box-shadow: 0 14px 30px -18px rgba(5, 10, 35, .9); }
.admin-bar .site-header { top: 32px; }

.site-header__bar { display: flex; align-items: center; gap: 18px; height: var(--header-h); }

.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); flex: none; }
.logo:hover { color: var(--ink); }
.logo__mark { width: 44px; height: 44px; filter: drop-shadow(0 8px 14px rgba(34, 65, 180, .4)); transition: transform .4s var(--ease); }
.logo:hover .logo__mark { transform: rotate(-6deg) scale(1.05); }
.logo__text { display: grid; line-height: 1.2; }
.logo__name { font-weight: 900; font-size: 1.24rem; letter-spacing: -.01em; direction: ltr; text-align: end; }
.logo__tag { font-size: .74rem; color: var(--ink-3); font-weight: 600; }
.logo--custom img { max-height: 48px; width: auto; }
.site-header .logo,
.site-footer .logo { color: #fff; }
.site-header .logo__tag,
.site-footer .logo__tag { color: var(--on-night-2); }

.primary-nav { margin-inline-start: 10px; }
.menu { list-style: none; margin: 0; padding: 0; }
.menu--primary { display: flex; align-items: center; gap: 2px; }
.menu--primary > li { position: relative; }
.menu--primary > li > a {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 10px 12px;
	color: var(--on-night);
	font-weight: 650;
	font-size: .95rem;
	transition: color .2s;
}
.menu--primary > li > a::before {
	content: "";
	position: absolute;
	inset-inline: 12px;
	bottom: 4px;
	height: 2px;
	border-radius: 2px;
	background: var(--sf-500);
	transform: scaleX(0);
	transition: transform .3s var(--ease);
}
.menu--primary > li > a:hover,
.menu--primary > li.current-menu-item > a { color: #fff; }
.menu--primary > li:hover > a::before,
.menu--primary > li.current-menu-item > a::before { transform: scaleX(1); }
.menu--primary > li.menu-item-has-children > a::after {
	content: "";
	width: 6px;
	height: 6px;
	border: solid currentColor;
	border-width: 0 0 1.8px 1.8px;
	transform: rotate(-45deg) translateY(-2px);
	margin-inline-start: 5px;
	opacity: .6;
}
.menu--primary .sub-menu {
	position: absolute;
	inset-inline-start: -8px;
	top: calc(100% + 10px);
	min-width: 300px;
	list-style: none;
	margin: 0;
	padding: 10px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 20px;
	box-shadow: var(--sh-3);
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px) scale(.98);
	transform-origin: top right;
	transition: opacity .2s, transform .25s var(--ease), visibility .2s;
}
.menu--primary .sub-menu::before { content: ""; position: absolute; inset: -12px 0 auto; height: 12px; }
.menu--primary > li:hover > .sub-menu,
.menu--primary > li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.menu--primary .sub-menu a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 9px 10px;
	border-radius: 14px;
	color: var(--ink-2);
	font-weight: 650;
	font-size: .92rem;
	transition: background .2s, color .2s;
}
.menu--primary .sub-menu a:hover { background: var(--lj-50); color: var(--lj-700); }
.menu-icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 12px;
	background: var(--lj-50);
	color: var(--lj-600);
	transition: background .2s, color .2s, transform .3s var(--ease);
}
.sub-menu a:hover .menu-icon { background: var(--lj-600); color: #fff; transform: rotate(-6deg); }
.menu-text { display: grid; line-height: 1.5; }
.menu-title { font-weight: 750; color: var(--ink); }
.menu-desc { font-size: .78rem; font-weight: 500; color: var(--ink-3); }

.site-header__actions { display: flex; align-items: center; gap: 2px; margin-inline-start: auto; }
.site-header .icon-btn:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.header-cta { margin-inline-start: 10px; }

.cart-count {
	position: absolute;
	top: 3px;
	inset-inline-end: 1px;
	min-width: 19px;
	height: 19px;
	padding: 0 5px;
	border-radius: var(--r-pill);
	background: var(--sf-500);
	color: var(--ink);
	font-size: .7rem;
	font-weight: 800;
	line-height: 19px;
	text-align: center;
	box-shadow: 0 0 0 2px var(--night-2);
}
.cart-count.is-empty { display: none; }

/* Search popover */
.search-pop { position: relative; }
.search-pop[open] > summary { background: rgba(255, 255, 255, .12); }
.search-pop__panel {
	position: absolute;
	inset-inline-end: 0;
	top: calc(100% + 16px);
	width: min(560px, calc(100vw - 32px));
	padding: 14px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 20px;
	box-shadow: var(--sh-3);
	color: var(--ink);
	animation: pop-in .25s var(--ease);
}

.search-form { display: flex; align-items: center; gap: 6px; padding: 5px; background: var(--paper); border: 1.5px solid var(--line-2); border-radius: var(--r-pill); transition: border-color .2s, background .2s; }
.search-form:focus-within { border-color: var(--lj-500); background: #fff; }
.search-form input {
	flex: 1;
	min-width: 0;
	height: 42px;
	padding: 0 14px;
	border: 0;
	background: transparent;
	outline: none;
}
.search-form button {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border: 0;
	border-radius: 50%;
	background: var(--lj-600);
	color: #fff;
	cursor: pointer;
	transition: background .2s, transform .2s var(--ease);
}
.search-form button:hover { background: var(--lj-700); transform: scale(1.06); }

/* Mobile drawer (details/summary, works without JavaScript) */
.drawer { display: none; }
.drawer__close { display: none; }
.drawer[open] .drawer__open { display: none; }
.drawer[open] .drawer__close { display: block; }
.drawer__panel {
	position: fixed;
	inset: var(--header-h) 0 0;
	z-index: 49;
	overflow-y: auto;
	padding: 18px var(--gutter) 40px;
	background: var(--surface);
	color: var(--ink);
	animation: drawer-in .3s var(--ease);
}
html.drawer-open { overflow: hidden; }
.menu--drawer > li { border-bottom: 1px solid var(--line); }
.menu--drawer a { display: flex; align-items: center; gap: 10px; padding: 13px 4px; color: var(--ink); font-weight: 750; font-size: 1.02rem; }
.menu--drawer .sub-menu { list-style: none; margin: 0 0 10px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.menu--drawer .sub-menu a { padding: 10px; border-radius: 14px; background: var(--paper); font-weight: 650; font-size: .88rem; color: var(--ink-2); }
.menu--drawer .menu-icon { width: 32px; height: 32px; border-radius: 10px; }
.menu--drawer .menu-desc { display: none; }
.drawer__contact { display: grid; gap: 10px; margin-top: 22px; }

/* ----- Sections ------------------------------------------------------------ */

.section { position: relative; padding-block: 76px; }
.section--tint { background: var(--paper-2); }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 30px; }
.section-head h2 { margin: 0; font-size: clamp(1.45rem, 1.1rem + 1.2vw, 2.15rem); }
.section-head p { margin: 6px 0 0; color: var(--ink-2); }
.section-head--center { flex-direction: column; align-items: center; text-align: center; max-width: 720px; margin-inline: auto; }

/* ----- Hero (dark, animated) ------------------------------------------- */

.hero {
	position: relative;
	overflow: hidden;
	padding-block: 64px 0;
	color: var(--on-night);
	background:
		radial-gradient(1100px 560px at 15% -10%, rgba(47, 82, 208, .55), transparent 62%),
		radial-gradient(700px 420px at 100% 100%, rgba(245, 167, 0, .16), transparent 60%),
		var(--night);
}
.hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--girih);
	-webkit-mask-image: radial-gradient(70% 80% at 30% 40%, #000, transparent 75%);
	mask-image: radial-gradient(70% 80% at 30% 40%, #000, transparent 75%);
	animation: drift 40s linear infinite;
}
.hero__bg { position: absolute; inset: 0; pointer-events: none; }
.hero__orb { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; animation: float 16s ease-in-out infinite alternate; }
.hero__orb--a { width: 420px; height: 420px; top: -140px; inset-inline-end: 8%; background: #3a5ce0; }
.hero__orb--b { width: 300px; height: 300px; bottom: 60px; inset-inline-start: -80px; background: #f5a700; opacity: .22; animation-duration: 20s; }
.hero__orb--c { width: 220px; height: 220px; top: 40%; inset-inline-start: 38%; background: #7c4dff; opacity: .25; animation-duration: 24s; }

.hero__grid { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 48px; }
.hero__badge {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 20px;
	padding: 7px 16px;
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: var(--r-pill);
	background: rgba(255, 255, 255, .06);
	color: var(--on-night);
	font-weight: 700;
	font-size: .88rem;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}
.hero__title { color: #fff; font-size: clamp(2.1rem, 1.3rem + 3vw, 3.7rem); line-height: 1.3; font-weight: 900; margin-bottom: 20px; letter-spacing: -.01em; }
.rotator { display: inline-block; position: relative; color: var(--sf-300); }
.rotator::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: .06em;
	height: .14em;
	border-radius: 4px;
	background: linear-gradient(90deg, var(--sf-500), transparent);
	opacity: .55;
}
.rotator__word { display: inline-block; transition: opacity .35s var(--ease), transform .35s var(--ease), filter .35s; }
.rotator.is-out .rotator__word { opacity: 0; transform: translateY(-.35em); filter: blur(4px); }
.rotator.is-in .rotator__word { animation: word-in .5s var(--ease); }
.hero__lead { font-size: 1.12rem; color: var(--on-night-2); max-width: 36em; margin-bottom: 30px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 26px; }
.hero__trust { display: flex; flex-wrap: wrap; gap: 8px 20px; list-style: none; margin: 0; padding: 0; color: var(--on-night-2); font-size: .88rem; font-weight: 600; }
.hero__trust li { display: inline-flex; align-items: center; gap: 6px; }
.hero__trust .icon { color: #2fd89a; width: 18px; height: 18px; }

.hero [data-anim] { animation: rise-soft .9s var(--ease) both; }
.hero [data-anim]:nth-child(2) { animation-delay: .08s; }
.hero [data-anim]:nth-child(3) { animation-delay: .16s; }
.hero [data-anim]:nth-child(4) { animation-delay: .24s; }
.hero [data-anim]:nth-child(5) { animation-delay: .32s; }

.hero__stats {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
	list-style: none;
	margin: 52px 0 0;
	padding: 0 0 96px;
}
.hero__stats li {
	display: grid;
	gap: 2px;
	padding: 18px 20px;
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 20px;
	background: linear-gradient(160deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .02));
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	animation: rise-soft .9s var(--ease) .4s both;
}
.hero__stats li:nth-child(2) { animation-delay: .5s; }
.hero__stats li:nth-child(3) { animation-delay: .6s; }
.hero__stats li:nth-child(4) { animation-delay: .7s; }
.hero__stats strong { font-size: 1.6rem; font-weight: 900; color: #fff; line-height: 1.4; }
.hero__stats span { font-size: .84rem; color: var(--on-night-2); }
.hero__curve { position: absolute; inset-inline: 0; bottom: -1px; width: 100%; height: 70px; color: var(--paper); }

/* Hero illustration */
.hero-visual { position: relative; padding: 26px 0 60px 26px; animation: rise 1s var(--ease) .2s both; }
.hv-card { background: var(--surface); border: 1px solid rgba(255, 255, 255, .5); border-radius: 22px; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .7); color: var(--ink); }
.hv-chart { padding: 16px 16px 10px; transform: perspective(1200px) rotateY(7deg) rotateX(3deg); animation: tilt 9s ease-in-out infinite alternate; }
.hv-chart__head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; direction: ltr; }
.hv-pair { font-weight: 800; font-size: .95rem; }
.hv-tf { padding: 1px 8px; border-radius: 6px; background: var(--lj-50); color: var(--lj-700); font-size: .75rem; font-weight: 700; }
.hv-status { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 700; color: var(--up); direction: rtl; }
.hv-status i { width: 8px; height: 8px; border-radius: 50%; background: var(--up); animation: pulse 2s infinite; }
.hv-chart__svg { display: block; width: 100%; height: auto; aspect-ratio: 480 / 250; overflow: visible; }
.cdl { transform-box: fill-box; transform-origin: 50% 100%; animation: candle .55s var(--ease) both; animation-delay: calc(var(--i) * 70ms + .5s); }
.hv-ma { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.6s ease-out 1.6s forwards; }
.hv-area { opacity: 0; animation: fade 1s ease 2.6s forwards; }
.hv-signal { opacity: 0; animation: pop .5s var(--ease) 2.9s forwards; transform-box: fill-box; }
.hv-code {
	position: absolute;
	inset-inline-end: -10px;
	bottom: 0;
	width: min(340px, 72%);
	padding: 0 0 12px;
	background: #0a1233;
	border-color: rgba(255, 255, 255, .14);
	color: #d7dcef;
	--r: 2deg;
	transform: rotate(2deg);
	animation: bob 7s ease-in-out infinite alternate;
	overflow: hidden;
}
.hv-code__bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; margin-bottom: 8px; background: rgba(255, 255, 255, .05); border-bottom: 1px solid rgba(255, 255, 255, .08); font: 600 .72rem var(--mono); color: #8e9bd0; }
.hv-code__bar i { width: 9px; height: 9px; border-radius: 50%; background: #e1474f; }
.hv-code__bar i:nth-child(2) { background: var(--sf-500); }
.hv-code__bar i:nth-child(3) { background: #2fd89a; }
.hv-code__bar span { margin-inline-start: 6px; }
.hv-code pre { margin: 0; padding: 0 16px; font: 600 .8rem/1.75 var(--mono); white-space: pre; overflow: hidden; }
.hv-code .k { color: #ffcf5c; }
.hv-code .t { color: #8fb2ff; }
.hv-code .n { color: #7ee0b2; }
.hv-code .f { color: #ffffff; }
.caret { display: inline-block; width: 8px; height: 1.05em; margin-inline-start: 2px; vertical-align: -.15em; background: var(--sf-300); animation: blink 1s steps(1) infinite; }
.hv-chip {
	position: absolute;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	border-radius: var(--r-pill);
	background: rgba(255, 255, 255, .95);
	box-shadow: 0 16px 34px -14px rgba(0, 0, 0, .6);
	font-size: .82rem;
	font-weight: 750;
	white-space: nowrap;
	color: var(--ink);
	animation: bob 6s ease-in-out infinite alternate;
}
.hv-chip .icon { width: 17px; height: 17px; }
.hv-chip--auto { top: 2px; inset-inline-start: 12%; color: var(--up); animation-delay: -2s; }
.hv-chip--lang { top: 44%; inset-inline-start: -18px; color: var(--lj-700); animation-delay: -4s; }
.hv-chip--risk { bottom: 54px; inset-inline-start: 6%; color: var(--sf-700); }

/* ----- Marquee band ----------------------------------------------------- */

.marquee { overflow: hidden; background: linear-gradient(90deg, var(--sf-500), #ffc233, var(--sf-500)); color: var(--ink); border-block: 1px solid #e29a00; }
.marquee__track { display: flex; width: max-content; animation: marquee 45s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item { display: inline-flex; align-items: center; gap: 10px; padding: 15px 22px; font-weight: 800; font-size: .98rem; white-space: nowrap; }
.marquee__item .icon { width: 14px; height: 14px; color: var(--night); opacity: .7; }

/* ----- Bento categories ---------------------------------------------------- */

.bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(190px, auto); gap: 18px; }
.bento__tile {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 24px;
	overflow: hidden;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	color: var(--ink);
	box-shadow: var(--sh-1);
	transition: transform .35s var(--ease), box-shadow .35s, border-color .35s;
}
.bento__tile:hover { transform: translateY(-6px); box-shadow: var(--glow); border-color: var(--lj-200); color: var(--ink); }
.bento__icon { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 10px; border-radius: 17px; color: #fff; background: linear-gradient(135deg, var(--lj-500), var(--lj-700)); box-shadow: 0 12px 24px -12px rgba(34, 65, 180, .9); transition: transform .4s var(--ease); }
.bento__tile:hover .bento__icon { transform: rotate(-8deg) scale(1.06); }
.bento__icon .icon { width: 27px; height: 27px; }
.bento__tile--sf .bento__icon { background: linear-gradient(135deg, #ffc233, var(--sf-600)); color: var(--ink); box-shadow: 0 12px 24px -12px rgba(219, 148, 0, .9); }
.bento__tile--up .bento__icon { background: linear-gradient(135deg, #2fd89a, var(--up)); box-shadow: 0 12px 24px -12px rgba(15, 159, 110, .9); }
.bento__tile--down .bento__icon { background: linear-gradient(135deg, #ff7a80, var(--down)); box-shadow: 0 12px 24px -12px rgba(225, 71, 79, .9); }
.bento__title { font-weight: 850; font-size: 1.15rem; }
.bento__desc { color: var(--ink-3); font-size: .9rem; line-height: 1.8; }
.bento__count { display: inline-flex; align-items: center; gap: 4px; margin-top: auto; padding-top: 8px; font-size: .88rem; font-weight: 750; color: var(--lj-600); }
.bento__count .icon { transition: transform .3s var(--ease); }
.bento__tile:hover .bento__count .icon { transform: translateX(-5px); }
.bento__bigicon { position: absolute; inset-inline-end: -18px; bottom: -22px; color: var(--lj-50); transform: rotate(-12deg); transition: transform .5s var(--ease), color .3s; pointer-events: none; }
.bento__bigicon .icon { width: 130px; height: 130px; }
.bento__tile:hover .bento__bigicon { transform: rotate(0) scale(1.08); color: var(--lj-100); }

.bento__tile--feature {
	grid-column: span 2;
	grid-row: span 2;
	justify-content: flex-end;
	gap: 10px;
	padding: 32px;
	color: var(--on-night);
	background: var(--girih), radial-gradient(500px 300px at 85% 10%, rgba(58, 92, 224, .7), transparent 70%), linear-gradient(160deg, var(--night-3), var(--night));
	border-color: transparent;
}
.bento__tile--feature:hover { color: var(--on-night); border-color: transparent; box-shadow: var(--sh-3); }
.bento__tile--feature .bento__icon { background: rgba(255, 255, 255, .12); box-shadow: none; color: var(--sf-300); }
.bento__tile--feature .bento__title { color: #fff; font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); line-height: 1.4; }
.bento__tile--feature .bento__desc { color: var(--on-night-2); font-size: 1rem; max-width: 30em; }
.bento__tile--feature .btn { align-self: flex-start; margin-top: 8px; }
.bento__glow { position: absolute; width: 260px; height: 260px; top: -60px; inset-inline-start: -60px; border-radius: 50%; background: var(--sf-500); filter: blur(80px); opacity: .25; animation: float 12s ease-in-out infinite alternate; }
.bento__spark { position: absolute; top: 28px; inset-inline-start: 28px; width: 46%; height: auto; opacity: .9; }
.bento__spark polyline { stroke-dasharray: 1; stroke-dashoffset: 1; }
.bento__tile--feature.is-in .bento__spark polyline { animation: draw 2s ease-out .3s forwards; }

/* ----- Product cards ------------------------------------------------------ */

/* Only the list is a grid: WooCommerce also puts the class "products" on the related-products <section>. */
ul.products { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 18px; }
ul.products::before,
ul.products::after { display: none; }
.products__item { margin: 0; padding: 0; width: auto; float: none; }

.pcard {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 20px;
	overflow: hidden;
	transition: transform .35s var(--ease), box-shadow .35s, border-color .35s;
}
.pcard:hover { transform: translateY(-6px); box-shadow: var(--glow); border-color: var(--lj-200); }
.pcard__media { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--paper-2); overflow: hidden; }
.pcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.pcard:hover .pcard__media img { transform: scale(1.07); }
.pcard__view {
	position: absolute;
	inset-inline: 10px;
	bottom: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 8px;
	border-radius: 12px;
	background: rgba(11, 22, 64, .86);
	color: #fff;
	font-size: .82rem;
	font-weight: 750;
	opacity: 0;
	transform: translateY(12px);
	transition: opacity .3s, transform .35s var(--ease);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
.pcard:hover .pcard__view { opacity: 1; transform: none; }
.pcard__flag {
	position: absolute;
	top: 10px;
	inset-inline-start: 10px;
	padding: 3px 11px;
	border-radius: var(--r-pill);
	background: var(--down);
	color: #fff;
	font-size: .75rem;
	font-weight: 800;
	box-shadow: 0 8px 16px -8px rgba(0, 0, 0, .5);
}
.pcard__flag--free { background: var(--sf-500); color: var(--ink); }
.pcard__body { display: flex; flex-direction: column; flex: 1; gap: 6px; padding: 14px 16px 16px; }
.pcard__term { font-size: .76rem; font-weight: 700; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcard__term:hover { color: var(--lj-600); }
.pcard__title { margin: 0; font-size: .95rem; font-weight: 750; line-height: 1.75; }
.pcard__title a { color: var(--ink); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pcard__title a:hover { color: var(--lj-600); }
.pcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--line); }
.pcard__price { font-weight: 850; color: var(--lj-700); font-size: .98rem; }
.pcard__price del { color: var(--ink-3); font-weight: 500; font-size: .82rem; margin-inline-end: 4px; }
.pcard__price ins { text-decoration: none; }
.pcard__free { color: var(--sf-700); }
.pcard__tag { display: inline-flex; align-items: center; gap: 3px; font-size: .74rem; font-weight: 700; color: var(--up); }
.pcard__tag .icon { width: 15px; height: 15px; }

/* ----- Features ------------------------------------------------------------ */

.features { background: radial-gradient(800px 400px at 50% 0%, rgba(47, 82, 208, .07), transparent 70%); }
.features__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.feature {
	position: relative;
	padding: 26px 24px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	overflow: hidden;
	transition: transform .35s var(--ease), box-shadow .35s, border-color .35s;
}
.feature::after { content: ""; position: absolute; inset: auto 0 0; height: 3px; background: linear-gradient(90deg, var(--sf-500), var(--lj-500)); transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease); }
.feature:hover { transform: translateY(-6px); box-shadow: var(--glow); border-color: var(--lj-200); }
.feature:hover::after { transform: scaleX(1); }
.feature h3 { margin: 14px 0 6px; font-size: 1.08rem; }
.feature p { margin: 0; color: var(--ink-3); font-size: .92rem; line-height: 1.9; }
.feature__icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; color: #fff; background: linear-gradient(135deg, var(--lj-500), var(--lj-700)); box-shadow: 0 12px 24px -12px rgba(34, 65, 180, .9); transition: transform .4s var(--ease); }
.feature__icon--1 { background: linear-gradient(135deg, #ffc233, var(--sf-600)); color: var(--ink); box-shadow: 0 12px 24px -12px rgba(219, 148, 0, .9); }
.feature__icon--2 { background: linear-gradient(135deg, #2fd89a, var(--up)); box-shadow: 0 12px 24px -12px rgba(15, 159, 110, .9); }
.feature:hover .feature__icon { transform: rotate(-8deg) scale(1.08); }
.feature__icon .icon { width: 27px; height: 27px; }

/* ----- Process timeline (dark) ------------------------------------------- */

.process { overflow: hidden; color: var(--on-night); background: var(--girih), radial-gradient(900px 500px at 50% 0%, rgba(47, 82, 208, .45), transparent 65%), var(--night); }
.process .section-head h2 { color: #fff; }
.process .section-head p { color: var(--on-night-2); }
.timeline { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; list-style: none; margin: 10px 0 34px; padding: 0; }
.timeline::before,
.timeline::after { content: ""; position: absolute; top: 31px; inset-inline: 12%; height: 3px; border-radius: 3px; }
.timeline::before { background: rgba(255, 255, 255, .12); }
.timeline::after { background: linear-gradient(270deg, var(--sf-500), #ffd36b, var(--lj-500)); transform: scaleX(0); transform-origin: right; transition: transform 1.8s var(--ease) .3s; }
.timeline.is-in::after { transform: scaleX(1); }
.timeline__step { position: relative; z-index: 1; text-align: center; padding: 0 6px; }
.timeline__num {
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	margin: 0 auto 16px;
	border-radius: 50%;
	background: var(--night-2);
	border: 2px solid var(--sf-500);
	color: var(--sf-300);
	font-weight: 900;
	font-size: 1.4rem;
	box-shadow: 0 0 0 8px rgba(245, 167, 0, .1), 0 0 30px rgba(245, 167, 0, .35);
}
.timeline__step h3 { color: #fff; font-size: 1.08rem; margin-bottom: 6px; }
.timeline__step p { color: var(--on-night-2); font-size: .9rem; margin: 0; line-height: 1.85; }
.process__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* ----- Article cards --------------------------------------------------------- */

.acard { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; transition: box-shadow .35s, border-color .35s, transform .35s var(--ease); }
.acard:hover { box-shadow: var(--glow); border-color: var(--lj-200); transform: translateY(-4px); }
.acard__media { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--paper-2); }
.acard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.acard:hover .acard__media img { transform: scale(1.06); }
.acard__placeholder { display: grid; place-items: center; width: 100%; height: 100%; color: var(--lj-200); background: linear-gradient(135deg, var(--lj-50), var(--paper-2)); }
.acard__placeholder .icon { width: 44px; height: 44px; }
.acard__body { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: 16px 18px 18px; }
.acard__term { align-self: start; padding: 2px 10px; border-radius: var(--r-pill); background: var(--lj-50); color: var(--lj-700); font-size: .76rem; font-weight: 700; }
.acard__title { margin: 0; font-size: 1.04rem; line-height: 1.75; font-weight: 750; }
.acard__title a { color: var(--ink); }
.acard__title a:hover { color: var(--lj-600); }
.acard__excerpt { margin: 0; color: var(--ink-2); font-size: .9rem; line-height: 1.85; }
.acard__meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: auto; padding-top: 6px; color: var(--ink-3); font-size: .8rem; }
.acard__meta span { display: inline-flex; align-items: center; gap: 4px; }
.acard__meta .icon { width: 15px; height: 15px; }

.acard--row { flex-direction: row; align-items: stretch; }
.acard--row .acard__media { flex: 0 0 34%; aspect-ratio: auto; min-height: 180px; }
.acard--row .acard__body { padding: 18px 20px; }
.acard--row .acard__title { font-size: 1.12rem; }

.acard--mini { flex-direction: row; border: 0; border-radius: 0; background: transparent; border-bottom: 1px solid var(--line); }
.acard--mini:hover { box-shadow: none; transform: none; }
.acard--mini .acard__body { padding: 12px 0; }
.acard--mini .acard__title { font-size: .95rem; line-height: 1.8; font-weight: 650; }

.cards-3 { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }

/* ----- Learn section ------------------------------------------------------- */

.learn__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 26px; align-items: start; }
.learn__main { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.learn__main .acard:first-child { grid-column: 1 / -1; }
.learn__main .acard:first-child .acard__title { font-size: 1.25rem; }
.news-col { padding: 20px 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.news-col__title { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; font-size: 1.05rem; }
.news-col__icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: var(--sf-100); color: var(--sf-700); }
.news-col__icon .icon { width: 18px; height: 18px; }
.news-col__count { margin-inline-start: auto; padding: 1px 9px; border-radius: var(--r-pill); background: var(--paper); color: var(--ink-3); font-size: .74rem; font-weight: 700; }
.news-col .link-more { margin-top: 14px; }

/* ----- FAQ ------------------------------------------------------------- */

.faq__grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 48px; align-items: start; }
.faq__intro h2 { font-size: clamp(1.45rem, 1.15rem + 1.1vw, 2.1rem); }
.faq__intro p { color: var(--ink-2); }
.faq__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.faq__list { display: grid; gap: 10px; }
.faq__list details { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 0 22px; transition: border-color .25s, box-shadow .25s; }
.faq__list details[open] { border-color: var(--lj-200); box-shadow: var(--glow); }
.faq__list summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 0; font-weight: 750; }
.faq__list summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--lj-50); color: var(--lj-600); font-weight: 800; transition: transform .3s var(--ease), background .3s, color .3s; }
.faq__list details[open] summary::after { transform: rotate(135deg); background: var(--lj-600); color: #fff; }
.faq__list details[open] p { animation: rise .4s var(--ease); }
.faq__list p { margin: 0 0 18px; color: var(--ink-2); }

/* ----- CTA band ------------------------------------------------------------- */

.cta-band {
	position: relative;
	overflow: hidden;
	padding-block: 64px;
	color: var(--on-night);
	background: var(--girih), linear-gradient(120deg, var(--lj-700), var(--lj-600), #3d4fd6, var(--lj-700));
	background-size: auto, 300% 300%;
	animation: gradient-pan 14s ease-in-out infinite alternate;
}
.cta-band__ring { position: absolute; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .12); pointer-events: none; animation: spin 40s linear infinite; }
.cta-band__ring--a { width: 420px; height: 420px; top: -210px; inset-inline-start: -120px; border-style: dashed; }
.cta-band__ring--b { width: 260px; height: 260px; bottom: -150px; inset-inline-end: 8%; border-color: rgba(245, 167, 0, .3); animation-direction: reverse; }
.cta-band__inner { position: relative; display: flex; align-items: center; gap: 28px; }
.cta-band__icon { display: grid; place-items: center; flex: none; width: 76px; height: 76px; border-radius: 24px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); color: var(--sf-300); animation: bob 5s ease-in-out infinite alternate; }
.cta-band__icon .icon { width: 40px; height: 40px; }
.cta-band__copy { flex: 1; }
.cta-band h2 { color: #fff; font-size: clamp(1.35rem, 1.1rem + 1vw, 2rem); }
.cta-band p { margin: 0; max-width: 42em; color: #d2daf7; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 12px; flex: none; }

/* ----- Footer ------------------------------------------------------------ */

.site-footer { background: var(--girih), var(--night); color: var(--on-night-2); font-size: .92rem; }
.site-footer a { color: var(--on-night); transition: color .2s; }
.site-footer a:hover { color: var(--sf-300); }
.site-footer__grid { display: grid; grid-template-columns: 1.45fr 1fr 1fr 1fr .9fr; gap: 34px; padding-block: 60px 38px; }
.site-footer__brand p { margin: 16px 0; line-height: 2; }
.site-footer__title { position: relative; margin: 0 0 16px; padding-bottom: 10px; color: #fff; font-weight: 800; font-size: 1rem; }
.site-footer__title::after { content: ""; position: absolute; bottom: 0; inset-inline-start: 0; width: 28px; height: 3px; border-radius: 3px; background: var(--sf-500); }
.menu--footer li { margin-bottom: 6px; }
.menu--footer a { color: var(--on-night-2); display: inline-block; transition: color .2s, transform .25s var(--ease); }
.menu--footer a:hover { color: #fff; transform: translateX(-4px); }
.contact-list { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; }
.contact-list li { display: flex; align-items: center; gap: 8px; }
.contact-list .icon { color: var(--sf-300); }
.socials { display: flex; gap: 8px; }
.social { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .1); color: #fff; transition: transform .3s var(--ease), background .2s; }
.social:hover { transform: translateY(-3px); color: #fff; }
.social--whatsapp:hover { background: var(--wa); }
.social--telegram:hover { background: #2aa3df; }
.social--mail:hover { background: var(--sf-500); color: var(--ink); }
.trust-seal { display: inline-grid; place-items: center; min-width: 112px; min-height: 120px; padding: 8px; border-radius: 16px; background: #fff; box-shadow: 0 14px 30px -16px rgba(0, 0, 0, .6); transition: transform .3s var(--ease); }
.trust-seal:hover { transform: translateY(-3px); }
.trust-seal > * { grid-area: 1 / 1; }
.trust-seal img { position: relative; width: 96px; height: auto; }
.trust-seal__badge { display: grid; justify-items: center; color: var(--night); text-align: center; line-height: 1.55; }
.trust-seal__badge .icon { width: 42px; height: 42px; margin-bottom: 6px; padding: 9px; border-radius: 50%; color: #fff; background: linear-gradient(135deg, var(--lj-500), var(--lj-700)); box-shadow: 0 0 0 4px var(--lj-50), 0 0 0 5px var(--lj-200); }
.trust-seal__badge strong { font-size: .8rem; font-weight: 850; }
.trust-seal__badge small { font-size: .7rem; font-weight: 650; color: var(--ink-3); }
.trust-seal.is-loaded .trust-seal__badge { display: none; }
/* Hidden, not removed: a lazy image without a box would never load. */
.trust-seal.is-broken img { visibility: hidden; }
.trust-note { display: flex; align-items: center; gap: 6px; margin: 14px 0 0; font-size: .85rem; }
.trust-note .icon { color: #2fd89a; }
.site-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-block: 18px 24px; padding-inline-end: 150px; border-top: 1px solid var(--line-night); font-size: .83rem; }
.site-footer__bottom p { margin: 0; }

.float-chat {
	position: fixed;
	inset-inline-end: 18px;
	bottom: 18px;
	z-index: 40;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 17px 11px 14px;
	border-radius: var(--r-pill);
	background: var(--wa);
	color: #fff;
	font-weight: 800;
	font-size: .9rem;
	box-shadow: 0 14px 30px -12px rgba(18, 140, 70, .7);
	transition: transform .25s var(--ease);
}
.float-chat::before { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 0 rgba(31, 170, 89, .55); animation: ring 2.6s infinite; }
.float-chat:hover { color: #fff; transform: translateY(-3px); }
.float-chat .icon { width: 22px; height: 22px; }

.to-top {
	position: fixed;
	inset-inline-start: 18px;
	bottom: 18px;
	z-index: 40;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 15px;
	background: var(--night-2);
	color: #fff;
	box-shadow: var(--sh-2);
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity .3s, transform .3s var(--ease), visibility .3s, background .2s;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--lj-600); color: #fff; }

/* ----- Page head (dark band) ------------------------------------------- */

.page-head {
	position: relative;
	overflow: hidden;
	padding-block: 34px 52px;
	color: var(--on-night);
	background: var(--girih), radial-gradient(900px 420px at 10% -20%, rgba(47, 82, 208, .55), transparent 65%), var(--night);
}
.page-head--overlap { padding-bottom: 120px; }
.page-head__orb,
.page-head .page-head__orb { position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none; animation: float 16s ease-in-out infinite alternate; }
.page-head__orb--a { width: 380px; height: 380px; top: -160px; inset-inline-end: 6%; background: #3a5ce0; opacity: .5; }
.page-head__orb--b { width: 240px; height: 240px; bottom: -120px; inset-inline-start: 12%; background: var(--sf-500); opacity: .2; animation-duration: 22s; }
.page-head__inner { position: relative; }
.page-head__title { margin: 10px 0 8px; color: #fff; font-size: clamp(1.65rem, 1.25rem + 1.7vw, 2.7rem); line-height: 1.4; animation: rise-soft .8s var(--ease) both; }
.page-head__count { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 4px 13px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); color: var(--sf-300); font-weight: 700; font-size: .86rem; animation: rise-soft .8s var(--ease) .1s both; }
.page-head__count .icon { width: 16px; height: 16px; }
.page-head__desc { max-width: 52em; margin-top: 12px; color: var(--on-night-2); animation: rise-soft .8s var(--ease) .15s both; }
.page-head__desc p:last-child { margin-bottom: 0; }
.page-head__search { max-width: 560px; margin-top: 18px; }
.page-head .search-form { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .18); }
.page-head .search-form:focus-within { background: rgba(255, 255, 255, .12); border-color: var(--sf-300); }
.page-head .search-form input { color: #fff; }
.page-head .search-form input::placeholder { color: var(--on-night-2); }
.page-head .chips { margin-top: 20px; animation: rise-soft .8s var(--ease) .2s both; }
.page-head .chip { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); color: #dfe5fb; }
.page-head .chip:hover { border-color: var(--sf-300); color: #fff; }
.page-head .chip.is-active { background: var(--sf-500); border-color: var(--sf-500); color: var(--ink); }

.page-wrap { position: relative; z-index: 2; padding-block: 36px 70px; }
.page-head--overlap + .page-wrap { margin-top: -88px; padding-top: 0; }

.breadcrumbs { font-size: .84rem; color: var(--ink-3); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; list-style: none; margin: 0; padding: 0; }
.breadcrumbs li + li::before { content: "/"; margin-inline-end: 6px; opacity: .5; }
.breadcrumbs a { color: var(--ink-3); }
.breadcrumbs a:hover { color: var(--lj-600); }
.breadcrumbs .separator { margin-inline: 6px; opacity: .5; }
.page-head .breadcrumbs,
.page-head .breadcrumbs a,
.article__head .breadcrumbs,
.article__head .breadcrumbs a,
.product-stage .breadcrumbs,
.product-stage .breadcrumbs a { color: var(--on-night-2); }
.page-head .breadcrumbs a:hover,
.article__head .breadcrumbs a:hover,
.product-stage .breadcrumbs a:hover { color: #fff; }

.pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 36px 0 12px; }
.pagination .page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 46px;
	height: 46px;
	padding: 0 10px;
	border-radius: 14px;
	background: var(--surface);
	border: 1px solid var(--line);
	color: var(--ink);
	font-weight: 750;
	transition: border-color .2s, color .2s, transform .2s var(--ease);
}
.pagination .page-numbers:hover { border-color: var(--lj-500); color: var(--lj-600); transform: translateY(-2px); }
.pagination .page-numbers.current { background: linear-gradient(135deg, var(--lj-500), var(--lj-700)); border-color: transparent; color: #fff; box-shadow: 0 10px 22px -12px rgba(34, 65, 180, .9); }
.pagination .page-numbers.dots { border: 0; background: transparent; }

.empty { padding: 40px; text-align: center; background: var(--surface); border: 1px dashed var(--line-2); border-radius: var(--r-lg); color: var(--ink-2); }

.card-sheet { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-2); }

/* ----- Archive layout + sidebar -------------------------------------------- */

.archive__layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; align-items: start; }
.archive__list { display: grid; gap: 18px; }
.archive__list .acard--card .acard__media { aspect-ratio: 21 / 9; }
.archive__list .acard--card .acard__title { font-size: 1.35rem; }

.sidebar { position: sticky; top: calc(var(--header-h) + 20px); display: grid; gap: 18px; }
.widget { padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.widget__title { margin-bottom: 10px; font-size: 1rem; }
.widget__list { list-style: none; margin: 0; padding: 0; }
.widget__list a { display: flex; justify-content: space-between; gap: 8px; padding: 8px 0; color: var(--ink-2); font-weight: 600; font-size: .92rem; border-bottom: 1px solid var(--line); transition: color .2s, padding .25s var(--ease); }
.widget__list li:last-child a { border-bottom: 0; }
.widget__list a:hover { color: var(--lj-600); padding-inline-start: 6px; }
.widget__list span { color: var(--ink-3); font-weight: 500; font-size: .82rem; }
.widget--offer { position: relative; overflow: hidden; background: var(--girih), linear-gradient(160deg, var(--night-3), var(--night)); border-color: transparent; color: var(--on-night-2); }
.widget--offer .widget__title { color: #fff; }
.widget--offer p { font-size: .9rem; }
.widget--offer .btn + .btn { margin-top: 8px; }
.widget--offer__icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 12px; border-radius: 15px; background: rgba(255, 255, 255, .1); color: var(--sf-300); }
.widget--offer__icon .icon { width: 26px; height: 26px; }
.mini-products { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mini-products a { display: flex; align-items: center; gap: 10px; color: var(--ink); font-size: .88rem; font-weight: 650; line-height: 1.7; }
.mini-products img { width: 56px; height: 56px; object-fit: cover; border-radius: 12px; flex: none; }
.mini-products a:hover { color: var(--lj-600); }

/* ----- Pages ----------------------------------------------------------------- */

.page-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: start; }
.page-body { padding: clamp(22px, 4vw, 44px); }
.page-aside { position: sticky; top: calc(var(--header-h) + 20px); }
.shop-page { padding: clamp(18px, 3vw, 32px); }

/* ----- Single article -------------------------------------------------------- */

.read-progress { position: fixed; top: 0; inset-inline: 0; z-index: 60; height: 3px; pointer-events: none; }
.read-progress span { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--sf-500), var(--lj-500)); transform: scaleX(var(--progress, 0)); transform-origin: right; }

.article__head { position: relative; overflow: hidden; padding-block: 30px 50px; background: var(--girih), radial-gradient(900px 420px at 10% -20%, rgba(47, 82, 208, .55), transparent 65%), var(--night); color: var(--on-night); }
.article.has-cover .article__head { padding-bottom: 190px; }
.article__head-inner { position: relative; max-width: calc(900px + var(--gutter) * 2); }
.article__title { margin: 12px 0 14px; color: #fff; font-size: clamp(1.7rem, 1.2rem + 2vw, 2.7rem); line-height: 1.45; font-weight: 900; animation: rise-soft .8s var(--ease) both; }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; color: var(--ink-3); font-size: .88rem; }
.meta__term { padding: 3px 12px; border-radius: var(--r-pill); background: var(--lj-50); color: var(--lj-700); font-weight: 700; font-size: .82rem; }
.meta__item { display: inline-flex; align-items: center; gap: 5px; }
.meta .icon { width: 16px; height: 16px; }
.article__head .meta { color: var(--on-night-2); animation: rise-soft .8s var(--ease) .1s both; }
.article__head .meta__term { background: rgba(245, 167, 0, .16); color: var(--sf-300); }

.article__cover { position: relative; z-index: 2; margin-top: -160px; margin-bottom: 34px; }
.article__cover img { width: 100%; max-height: 560px; object-fit: cover; border-radius: var(--r-lg); box-shadow: var(--sh-3); border: 6px solid var(--surface); animation: rise-soft 1s var(--ease) .15s both; }
.article:not(.has-cover) .article__layout { padding-top: 34px; }

.article__layout { display: grid; grid-template-columns: minmax(0, 760px) 280px; justify-content: center; gap: 48px; padding-bottom: 60px; }
.article__aside { position: relative; }
.toc--sticky { position: sticky; top: calc(var(--header-h) + 24px); max-height: calc(100vh - var(--header-h) - 48px); overflow-y: auto; }

.toc { padding: 18px 18px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); font-size: .9rem; }
.toc__title { margin: 0 0 8px; font-weight: 800; color: var(--ink); }
.toc ol { list-style: none; margin: 0; padding: 0; }
.toc__item a { display: block; padding: 6px 10px; border-inline-start: 2px solid var(--line); color: var(--ink-2); line-height: 1.7; transition: color .2s, border-color .2s, background .2s; }
.toc__item--h3 a { padding-inline-start: 22px; font-size: .85rem; color: var(--ink-3); }
.toc__item a:hover { color: var(--lj-600); }
.toc__item a.is-active { border-color: var(--sf-500); color: var(--lj-700); background: var(--lj-50); font-weight: 700; }

.toc-mobile { display: none; margin-bottom: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.toc-mobile > summary { padding: 14px 18px; font-weight: 800; }
.toc-mobile .toc { border: 0; padding-top: 0; }

/* Article body typography */
.prose { font-size: 1.07rem; line-height: 2.05; color: #1d2234; overflow-wrap: break-word; }
.prose > * { margin-block: 0 1.15em; }
.prose h2 { position: relative; margin-top: 1.9em; padding-inline-start: 16px; font-size: 1.5rem; line-height: 1.6; }
.prose h2::before { content: ""; position: absolute; inset-inline-start: 0; top: .35em; bottom: .35em; width: 5px; border-radius: 4px; background: linear-gradient(var(--sf-500), var(--lj-500)); }
.prose h3 { margin-top: 1.6em; font-size: 1.22rem; line-height: 1.7; }
.prose h4 { margin-top: 1.4em; font-size: 1.06rem; }
.prose a { color: var(--lj-600); text-decoration: underline; text-decoration-color: var(--lj-200); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.prose a:hover { text-decoration-color: var(--sf-500); }
.prose strong { font-weight: 750; color: var(--ink); }
.prose ul,
.prose ol { padding-inline-start: 1.4em; }
.prose li { margin-bottom: .35em; }
.prose ul li::marker { color: var(--sf-600); }
.prose ol li::marker { color: var(--lj-600); font-weight: 800; }
.prose img { border-radius: var(--r); margin-inline: auto; }
.prose figure,
.prose .wp-caption { max-width: 100%; margin-inline: auto; }
.prose .wp-caption-text,
.prose figcaption { margin-top: 8px; font-size: .85rem; color: var(--ink-3); text-align: center; line-height: 1.8; }
.prose .aligncenter { margin-inline: auto; }
.prose .alignleft { float: left; margin: .3em 1.2em 1em 0; }
.prose .alignright { float: right; margin: .3em 0 1em 1.2em; }
.prose blockquote { margin-inline: 0; padding: 16px 22px; background: var(--surface); border-inline-start: 4px solid var(--sf-500); border-radius: 0 var(--r) var(--r) 0; color: var(--ink-2); }
.prose blockquote p:last-child { margin-bottom: 0; }
.prose hr { height: 1px; border: 0; background: linear-gradient(90deg, transparent, var(--line-2), transparent); margin-block: 2em; }
.prose iframe,
.prose video { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: var(--r); }
.prose code { padding: .12em .4em; border-radius: 6px; background: var(--lj-50); color: var(--lj-700); font: .88em var(--mono); direction: ltr; unicode-bidi: embed; }
.prose pre,
.prose pre.EnlighterJSRAW {
	direction: ltr;
	text-align: left;
	margin-block: 0 1.3em;
	padding: 18px 20px;
	overflow-x: auto;
	background: var(--night);
	color: #dfe3f3;
	border-radius: var(--r);
	font: 500 .88rem/1.75 var(--mono);
	white-space: pre;
	tab-size: 4;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.prose pre code { padding: 0; background: none; color: inherit; font: inherit; }
/* Formulas in product lessons, written as plain HTML (no math script). A display formula is a centred
   box; the ones built from Latin symbols carry dir="ltr" and read left to right like printed math. */
.prose .formula { display: block; width: fit-content; max-width: 100%; margin: .9em auto 1.1em; padding: 10px 20px; overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); line-height: 2.1; text-align: center; }
.prose .formula + br { display: none; } /* wpautop's line break after a formula would add an empty line */
.prose .formula i,
.prose .math i { font-family: "Times New Roman", Georgia, serif; font-size: 1.1em; }
.prose .formula :is(sub, sup),
.prose .math :is(sub, sup) { font-size: .72em; }
.table-scroll { overflow-x: auto; margin-block: 0 1.3em; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.prose table { width: 100%; border-collapse: collapse; font-size: .94rem; line-height: 1.8; }
.prose th,
.prose td { padding: 10px 14px; border-bottom: 1px solid var(--line); text-align: start; vertical-align: top; }
.prose th { background: var(--lj-50); color: var(--night); font-weight: 800; }
.prose tr:nth-child(even) td { background: #fbfaf6; }
.prose tr:last-child td { border-bottom: 0; }

/* Contact chips from [site_whatsapp] / [site_telegram] */
.emq-contact-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 2px 0 2px 10px;
	padding: 4px 12px 4px 14px;
	border-radius: var(--r-pill);
	background: var(--surface);
	border: 1px solid var(--line);
	font-size: .92rem;
	font-weight: 700;
	line-height: 1.8;
	vertical-align: middle;
}
.emq-contact-chip svg { width: 18px; height: 18px; fill: currentColor; }
.emq-contact-chip--whatsapp svg { color: var(--wa); }
.emq-contact-chip--telegram svg { color: #2aa3df; }
.prose h3 .emq-contact-chip,
.prose h2 .emq-contact-chip { font-size: .88rem; }
.emq-contact-chip a { text-decoration: none !important; }

.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-block: 24px 10px; }
.tags a { padding: 4px 12px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line); color: var(--ink-2); font-size: .82rem; font-weight: 600; }
.tags a:hover { border-color: var(--lj-500); color: var(--lj-600); }

.share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-block: 22px; padding-block: 18px; border-block: 1px solid var(--line); }
.share__label { font-weight: 700; color: var(--ink-2); font-size: .9rem; margin-inline-end: 4px; }
.share__btn { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); cursor: pointer; transition: all .25s var(--ease); }
.share__btn .icon { width: 19px; height: 19px; }
.share__btn:hover { color: #fff; border-color: transparent; transform: translateY(-3px); }
.share__btn--telegram:hover { background: #2aa3df; }
.share__btn--whatsapp:hover { background: var(--wa); }
.share__btn--x:hover { background: #000; }
.share__btn--linkedin:hover { background: #0a66c2; }
.share__btn--copy:hover,
.share__btn--copy.is-copied { background: var(--lj-600); color: #fff; }

.offer-box {
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 18px;
	margin-block: 30px;
	padding: 24px 26px;
	overflow: hidden;
	border-radius: var(--r-lg);
	color: var(--on-night-2);
	background: var(--girih), radial-gradient(400px 200px at 0% 0%, rgba(245, 167, 0, .25), transparent 70%), linear-gradient(135deg, var(--night-3), var(--night));
}
.offer-box h2 { margin: 0 0 4px; font-size: 1.15rem; color: #fff; }
.offer-box p { margin: 0; font-size: .92rem; line-height: 1.85; }
.offer-box__icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; background: linear-gradient(135deg, #ffc233, var(--sf-600)); color: var(--ink); animation: bob 5s ease-in-out infinite alternate; }
.offer-box__icon .icon { width: 30px; height: 30px; }

/* Comments */
.comments { margin-top: 36px; }
.comments__title { font-size: 1.3rem; }
.comment-list,
.comment-list .children { list-style: none; margin: 0; padding: 0; }
.comment-list .children { padding-inline-start: 28px; border-inline-start: 2px solid var(--line); margin-inline-start: 18px; }
.comment__box { margin-bottom: 14px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.comment__head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.comment__avatar { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, var(--lj-500), var(--lj-700)); color: #fff; font-weight: 800; }
.comment__author { font-weight: 750; }
.comment__date { margin-inline-start: auto; color: var(--ink-3); font-size: .8rem; }
.comment__text { font-size: .95rem; line-height: 1.95; }
.comment__text p:last-child { margin-bottom: 4px; }
.comment-reply-link { font-size: .82rem; font-weight: 700; }
.comment-respond { margin-top: 24px; padding: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.comment-reply-title { font-size: 1.15rem; }
.comment-form label,
.contact-form label { display: block; margin-bottom: 5px; font-weight: 650; font-size: .9rem; }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea,
.contact-form input,
.contact-form select,
.contact-form textarea { width: 100%; padding: 11px 14px; border: 1.5px solid var(--line-2); border-radius: 14px; background: var(--paper); transition: border-color .2s, background .2s, box-shadow .2s; }
.comment-form input:focus,
.comment-form textarea:focus,
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus { outline: none; border-color: var(--lj-500); background: #fff; box-shadow: 0 0 0 4px rgba(47, 82, 208, .12); }
.comment-form p { margin-bottom: 14px; }
.comment-notes { color: var(--ink-3); font-size: .85rem; }

/* ----- Contact page ------------------------------------------------------------ */

.contact-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 26px; align-items: start; }
.contact-channels { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.channel {
	display: flex;
	gap: 14px;
	padding: 20px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	color: var(--ink);
	box-shadow: var(--sh-2);
	transition: transform .35s var(--ease), box-shadow .35s, border-color .35s;
}
a.channel:hover { transform: translateY(-5px); box-shadow: var(--glow); border-color: var(--lj-200); color: var(--ink); }
.channel__icon { display: grid; place-items: center; flex: none; width: 50px; height: 50px; border-radius: 16px; color: #fff; background: linear-gradient(135deg, var(--lj-500), var(--lj-700)); }
.channel__icon .icon { width: 25px; height: 25px; }
.channel--whatsapp .channel__icon { background: linear-gradient(135deg, #34d07a, var(--wa)); }
.channel--telegram .channel__icon { background: linear-gradient(135deg, #4cc0f0, #1f8fc8); }
.channel--mail .channel__icon,
.channel--hours .channel__icon { background: linear-gradient(135deg, #ffc233, var(--sf-600)); color: var(--ink); }
.channel__body { display: grid; gap: 2px; min-width: 0; line-height: 1.7; }
.channel__body strong { font-size: 1rem; }
.channel__body span,
.channel__body a { color: var(--ink-2); font-weight: 600; font-size: .92rem; overflow-wrap: anywhere; }
.channel__body small { color: var(--ink-3); font-size: .8rem; }
.channel--address,
.channel--hours { grid-column: 1 / -1; }
.contact-card { padding: clamp(22px, 3vw, 34px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-3); }
.contact-card h2 { display: flex; align-items: center; gap: 10px; font-size: 1.35rem; }
.contact-card h2 .icon { color: var(--sf-600); }
.contact-card > p { color: var(--ink-2); }
.contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.contact-form p { margin-bottom: 14px; }
.contact-form .hp { position: absolute !important; inset-inline-start: -9999px; }
.form-note { padding: 12px 16px; border-radius: 14px; font-weight: 650; }
.form-note--ok { background: #e6f7ef; color: #0b7a54; border: 1px solid #b9e8d3; }
.form-note--error { background: #fdeceb; color: #b42f36; border: 1px solid #f6c7c9; }

/* ----- About page ------------------------------------------------------------------ */

.eyebrow { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 12px; padding: 4px 13px; border-radius: var(--r-pill); background: var(--sf-100); color: var(--sf-700); font-weight: 800; font-size: .82rem; }
.eyebrow .icon { width: 16px; height: 16px; }
.checklist { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; list-style: none; margin: 6px 0 26px; padding: 0; font-weight: 650; font-size: .93rem; }
.checklist li { display: flex; align-items: center; gap: 8px; }
.checklist .icon { width: 24px; height: 24px; padding: 4px; border-radius: 50%; background: #e6f7ef; color: var(--up); }

.about-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; padding: clamp(22px, 3.5vw, 42px); }
.about-intro h2 { font-size: clamp(1.4rem, 1.1rem + 1.1vw, 2rem); line-height: 1.5; }
.about-intro__copy > p:not(.eyebrow) { color: var(--ink-2); }
.about-intro__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.about-intro__visual { position: relative; overflow: hidden; padding: 18px 34px 0; border-radius: 22px; background: var(--girih), radial-gradient(500px 300px at 80% 0%, rgba(58, 92, 224, .65), transparent 70%), linear-gradient(160deg, var(--night-3), var(--night)); }
.about-intro__orb { position: absolute; width: 240px; height: 240px; bottom: -90px; inset-inline-start: -70px; border-radius: 50%; background: var(--sf-500); filter: blur(70px); opacity: .28; animation: float 14s ease-in-out infinite alternate; }

.about-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; list-style: none; margin: 24px 0 0; padding: 0; }
.about-stats li { display: grid; align-content: start; gap: 2px; padding: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); transition: transform .35s var(--ease), box-shadow .35s, border-color .35s; }
.about-stats li:hover { transform: translateY(-5px); box-shadow: var(--glow); border-color: var(--lj-200); }
.about-stats__icon { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 8px; border-radius: 15px; background: var(--lj-50); color: var(--lj-600); }
.about-stats li:nth-child(2) .about-stats__icon { background: var(--sf-100); color: var(--sf-700); }
.about-stats li:nth-child(3) .about-stats__icon { background: #e6f7ef; color: var(--up); }
.about-stats li:nth-child(4) .about-stats__icon { background: #fdeceb; color: var(--down); }
.about-stats strong { font-size: 1.9rem; font-weight: 900; line-height: 1.35; color: var(--night); }
.about-stats li > span:last-child { color: var(--ink-3); font-size: .88rem; line-height: 1.7; }

.about-block { margin-top: 76px; }
.services { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.service { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 26px 22px 22px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); color: var(--ink); transition: transform .35s var(--ease), box-shadow .35s, border-color .35s; }
.service:hover { transform: translateY(-6px); box-shadow: var(--glow); border-color: var(--lj-200); color: var(--ink); }
.service__num { position: absolute; top: 12px; inset-inline-end: 18px; font-size: 3.3rem; font-weight: 900; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--line-2); transition: -webkit-text-stroke-color .35s, transform .45s var(--ease); }
.service:hover .service__num { -webkit-text-stroke-color: var(--sf-500); transform: translateY(-4px); }
.service__icon { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 8px; border-radius: 17px; color: #fff; background: linear-gradient(135deg, var(--lj-500), var(--lj-700)); box-shadow: 0 12px 24px -12px rgba(34, 65, 180, .9); transition: transform .4s var(--ease); }
.service__icon .icon { width: 27px; height: 27px; }
.service:hover .service__icon { transform: rotate(-8deg) scale(1.06); }
.service h3 { margin: 0; font-size: 1.1rem; }
.service p { margin: 0; color: var(--ink-3); font-size: .92rem; line-height: 1.9; }
.service__more { display: inline-flex; align-items: center; gap: 4px; margin-top: auto; padding-top: 12px; font-weight: 750; font-size: .9rem; color: var(--lj-600); }
.service__more .icon { transition: transform .3s var(--ease); }
.service:hover .service__more .icon { transform: translateX(-5px); }
.service:first-child { background: var(--girih), radial-gradient(300px 200px at 90% 0%, rgba(58, 92, 224, .6), transparent 70%), linear-gradient(160deg, var(--night-3), var(--night)); border-color: transparent; }
.service:first-child:hover { box-shadow: var(--sh-3); }
.service:first-child h3 { color: #fff; }
.service:first-child p { color: var(--on-night-2); }
.service:first-child .service__icon { background: linear-gradient(135deg, #ffc233, var(--sf-600)); color: var(--ink); box-shadow: 0 12px 24px -12px rgba(219, 148, 0, .9); }
.service:first-child .service__num { -webkit-text-stroke-color: rgba(255, 255, 255, .2); }
.service:first-child .service__more { color: var(--sf-300); }

.about-tail { padding-block: 76px 84px; }
.promise { display: grid; grid-template-columns: .8fr 1.2fr; gap: 44px; align-items: center; }
.promise__intro h2 { font-size: clamp(1.45rem, 1.1rem + 1.2vw, 2.15rem); }
.promise__intro > p:not(.eyebrow) { color: var(--ink-2); }
.promise__intro .trust-seal { margin-top: 6px; border: 1px solid var(--line); box-shadow: var(--sh-2); }
.promise__list { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; list-style: none; margin: 0; padding: 0; }
.promise__list li { display: flex; gap: 14px; padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); transition: transform .35s var(--ease), box-shadow .35s, border-color .35s; }
.promise__list li:hover { transform: translateY(-5px); box-shadow: var(--glow); border-color: var(--lj-200); }
.promise__icon { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 15px; background: linear-gradient(135deg, #ffc233, var(--sf-600)); color: var(--ink); box-shadow: 0 12px 24px -12px rgba(219, 148, 0, .9); }
.promise__icon .icon { width: 24px; height: 24px; }
.promise__list h3 { margin: 0 0 4px; font-size: 1.02rem; }
.promise__list p { margin: 0; color: var(--ink-3); font-size: .9rem; line-height: 1.85; }

.about-contact { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 30px; align-items: center; margin-top: 60px; padding: clamp(22px, 3.5vw, 38px); border-radius: var(--r-lg); color: var(--on-night-2); background: var(--girih), radial-gradient(600px 300px at 100% 0%, rgba(58, 92, 224, .55), transparent 70%), linear-gradient(160deg, var(--night-3), var(--night)); box-shadow: var(--sh-3); }
.about-contact h2 { display: flex; align-items: center; gap: 10px; color: #fff; font-size: 1.3rem; }
.about-contact h2 .icon { color: var(--sf-300); }
.about-contact .prose { color: var(--on-night); font-size: 1rem; }
.about-contact .prose > :last-child { margin-bottom: 0; }
.about-contact__actions { display: grid; gap: 10px; }

/* ----- Search results, 404, hub ---------------------------------------------- */

.search-results { display: grid; gap: 12px; }
.result { display: flex; gap: 16px; align-items: center; padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; color: var(--ink); transition: border-color .25s, box-shadow .25s, transform .25s var(--ease); }
.result:hover { border-color: var(--lj-200); box-shadow: var(--glow); color: var(--ink); transform: translateX(-4px); }
.result__media { display: grid; place-items: center; flex: none; width: 76px; height: 76px; border-radius: 14px; overflow: hidden; background: var(--lj-50); color: var(--lj-500); }
.result__media img { width: 100%; height: 100%; object-fit: cover; }
.result__body { display: grid; gap: 2px; flex: 1; }
.result__type { font-size: .75rem; font-weight: 800; color: var(--sf-700); }
.result__title { font-weight: 750; line-height: 1.7; }
.result__excerpt { font-size: .86rem; color: var(--ink-3); }
.result__go { color: var(--lj-500); opacity: 0; transition: opacity .25s; }
.result:hover .result__go { opacity: 1; }

.not-found { position: relative; overflow: hidden; padding-block: 80px 110px; text-align: center; color: var(--on-night); background: var(--girih), radial-gradient(900px 500px at 50% -10%, rgba(47, 82, 208, .6), transparent 65%), var(--night); }
.not-found__inner { position: relative; max-width: 660px; }
.not-found__code { margin: 0; font-size: clamp(6rem, 3rem + 10vw, 11rem); font-weight: 900; line-height: 1; color: transparent; background: linear-gradient(135deg, #ffd36b, var(--sf-500) 40%, #8fa7ff); -webkit-background-clip: text; background-clip: text; animation: bob 5s ease-in-out infinite alternate; }
.not-found h1 { margin-top: 16px; color: #fff; }
.not-found p { color: var(--on-night-2); }
.not-found__search { margin: 22px auto; max-width: 520px; }
.not-found__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

.hub-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-bottom: 40px; }
.hub-cat { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 16px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; color: var(--ink); box-shadow: var(--sh-2); transition: transform .3s var(--ease), box-shadow .3s, border-color .3s; }
.hub-cat:hover { transform: translateY(-4px); border-color: var(--lj-200); box-shadow: var(--glow); color: var(--ink); }
.hub-cat__icon { grid-row: span 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--lj-50); color: var(--lj-600); }
.hub-cat__name { font-weight: 750; }
.hub-cat__count { font-size: .82rem; color: var(--ink-3); }

.seo-text { margin-block: 36px 0; padding: 0 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.seo-text > summary { padding: 16px 0; font-weight: 800; color: var(--ink-2); }
.seo-text .prose { font-size: .97rem; }

/* ----- Scroll reveal ------------------------------------------------------------ */

/* "reveal-on" is set by main.js after it has marked what is already on screen, so nothing above the
   fold is ever hidden, and without JavaScript everything simply stays visible. */
html.reveal-on [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .65s var(--ease), transform .65s var(--ease); transition-delay: var(--d, 0s); }
html.reveal-on [data-reveal].is-in { opacity: 1; transform: none; }

/* ----- Keyframes ------------------------------------------------------------ */

@keyframes rise { from { opacity: 0; transform: translateY(24px); } }
/* Transform only: headings stay visible from the first paint (no delayed Largest Contentful Paint). */
@keyframes rise-soft { from { transform: translateY(18px); } }
@keyframes fade { to { opacity: 1; } }
@keyframes pop { from { opacity: 0; transform: scale(.4); } 70% { opacity: 1; transform: scale(1.12); } to { opacity: 1; transform: scale(1); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes candle { from { opacity: 0; transform: scaleY(.15); } }
@keyframes float { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(40px, 30px, 0); } }
@keyframes bob { from { transform: translateY(0) rotate(var(--r, 0deg)); } to { transform: translateY(-10px) rotate(var(--r, 0deg)); } }
@keyframes tilt { from { transform: perspective(1200px) rotateY(7deg) rotateX(3deg); } to { transform: perspective(1200px) rotateY(2deg) rotateX(1deg) translateY(-6px); } }
@keyframes drift { to { background-position: 640px 320px; } }
@keyframes pulse { 70% { box-shadow: 0 0 0 9px rgba(47, 216, 154, 0); } 100% { box-shadow: 0 0 0 0 rgba(47, 216, 154, 0); } }
@keyframes ring { 0% { box-shadow: 0 0 0 0 rgba(31, 170, 89, .55); } 80%, 100% { box-shadow: 0 0 0 14px rgba(31, 170, 89, 0); } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes marquee { to { transform: translateX(50%); } }
@keyframes word-in { from { opacity: 0; transform: translateY(.4em); filter: blur(4px); } }
@keyframes shine { 0%, 80% { transform: translateX(130%); } 100% { transform: translateX(-130%); } }
@keyframes shine-once { from { transform: translateX(130%); } to { transform: translateX(-130%); } }
@keyframes gradient-pan { from { background-position: 0 0, 0% 50%; } to { background-position: 0 0, 100% 50%; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes drawer-in { from { opacity: 0; transform: translateY(-10px); } }
@keyframes pop-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }

/* ----- Responsive ------------------------------------------------------------ */

@media (max-width: 1180px) {
	.header-cta { display: none; }
	.learn__grid { grid-template-columns: 1fr 1fr; }
	.learn__main { grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); }
	.learn__main .acard:first-child { grid-column: auto; }
	.learn__main .acard:first-child .acard__title { font-size: 1.04rem; }
	.site-footer__grid { grid-template-columns: 1.3fr 1fr 1fr 1fr; }
	.site-footer__trust { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
	.site-footer__trust .site-footer__title { flex-basis: 100%; }
	.site-footer__trust .trust-note { margin: 0; }
	.services { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1060px) {
	.topbar { display: none; }
	.primary-nav { display: none; }
	.drawer { display: block; }
	.site-header__bar { gap: 8px; }
	.logo { margin-inline-end: auto; }
	.site-header__actions { margin-inline-start: 0; }
	.hero__grid { grid-template-columns: 1fr; gap: 34px; }
	.hero-visual { max-width: 620px; width: 100%; margin-inline: auto; }
	.hero__stats { grid-template-columns: repeat(2, 1fr); }
	.bento { grid-template-columns: repeat(2, 1fr); }
	.features__grid { grid-template-columns: repeat(2, 1fr); }
	.timeline { grid-template-columns: repeat(2, 1fr); row-gap: 34px; }
	.timeline::before,
	.timeline::after { display: none; }
	.faq__grid { grid-template-columns: 1fr; gap: 28px; }
	.archive__layout,
	.article__layout,
	.page-layout,
	.contact-grid,
	.about-intro,
	.promise,
	.about-contact { grid-template-columns: minmax(0, 1fr); }
	.about-stats { grid-template-columns: repeat(2, 1fr); }
	.sidebar,
	.page-aside { position: static; }
	.sidebar { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
	.article__aside { display: none; }
	.toc-mobile { display: block; }
	.site-footer__grid { grid-template-columns: 1fr 1fr; }
	.site-footer__brand { grid-column: 1 / -1; }
	.cta-band__inner { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 720px) {
	:root { --gutter: 16px; --header-h: 64px; }
	body { font-size: 1rem; }
	.section { padding-block: 52px; }
	.site-header__bar { gap: 2px; }
	.icon-btn { width: 40px; height: 40px; }
	.icon-btn .icon { width: 21px; height: 21px; }
	.site-header__actions .account-link { display: none; }
	.search-pop__panel { position: fixed; top: var(--header-h); inset-inline: 0; width: auto; border-radius: 0 0 20px 20px; }
	.logo { gap: 8px; }
	.logo__mark { width: 36px; height: 36px; }
	.logo__name { font-size: 1.05rem; }
	.logo__tag { font-size: .66rem; }
	.hero { padding-top: 36px; }
	.hero__lead { font-size: 1rem; }
	.hero__actions .btn { flex: 1 1 100%; }
	.hero__stats { gap: 10px; margin-top: 34px; padding-bottom: 80px; }
	.hero__stats li { padding: 14px; }
	.hero__stats strong { font-size: 1.25rem; }
	.hero__stats span { font-size: .75rem; line-height: 1.6; }
	.hero-visual { padding: 18px 0 70px; }
	.hv-chart { transform: none; animation: none; }
	.hv-chip--lang,
	.hv-chip--risk { display: none; }
	.hv-code { width: 84%; inset-inline-end: 0; }
	.marquee__item { padding: 12px 16px; font-size: .9rem; }
	.bento { grid-template-columns: 1fr 1fr; gap: 10px; grid-auto-rows: auto; }
	.bento__tile { padding: 16px; }
	.bento__tile--feature { grid-column: 1 / -1; grid-row: auto; padding: 24px 20px; min-height: 280px; }
	.bento__desc { font-size: .82rem; }
	.bento__bigicon .icon { width: 90px; height: 90px; }
	ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.pcard { border-radius: 16px; }
	.pcard__body { padding: 10px 11px 12px; }
	.pcard__title { font-size: .86rem; }
	.pcard__foot { flex-direction: column; align-items: flex-start; gap: 2px; }
	.pcard__price { font-size: .86rem; }
	.pcard__view { display: none; }
	.features__grid { grid-template-columns: 1fr; gap: 10px; }
	.feature { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-items: start; padding: 16px; }
	.feature__icon { grid-row: span 2; width: 48px; height: 48px; border-radius: 15px; }
	.feature__icon .icon { width: 24px; height: 24px; }
	.feature h3 { margin: 2px 0; font-size: 1rem; }
	.feature p { font-size: .86rem; line-height: 1.8; }
	.timeline { grid-template-columns: 1fr; }
	.timeline__step { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; text-align: start; }
	.timeline__num { grid-row: span 2; width: 52px; height: 52px; margin: 0; font-size: 1.15rem; }
	.learn__grid { grid-template-columns: 1fr; }
	/* Article cards become a swipeable row; the news columns keep their three newest items. */
	.learn__main { display: flex; gap: 12px; margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
	.learn__main::-webkit-scrollbar { display: none; }
	.learn__main .acard { flex: 0 0 84%; scroll-snap-align: start; }
	.news-col article:nth-of-type(n+4) { display: none; }
	.acard--row { flex-direction: column; }
	.acard--row .acard__media { flex: none; aspect-ratio: 16 / 9; min-height: 0; }
	.archive__list .acard--card .acard__media { aspect-ratio: 16 / 9; }
	.offer-box { grid-template-columns: auto 1fr; }
	.offer-box .btn { grid-column: 1 / -1; }
	.prose { font-size: 1.02rem; line-height: 2; }
	.prose h2 { font-size: 1.3rem; }
	.article.has-cover .article__head { padding-bottom: 120px; }
	.article__cover { margin-top: -100px; }
	.article__cover img { border-width: 4px; }
	.contact-channels,
	.contact-form__row { grid-template-columns: 1fr; }
	.contact-channels { gap: 10px; }
	.channel { gap: 12px; padding: 14px 16px; }
	.channel__icon { width: 44px; height: 44px; border-radius: 14px; }
	.channel__icon .icon { width: 22px; height: 22px; }
	.services,
	.promise__list,
	.checklist { grid-template-columns: 1fr; }
	.service { padding: 22px 18px 18px; }
	.about-intro { gap: 24px; }
	.about-intro__visual { padding: 6px 14px 0; }
	.about-stats { gap: 10px; }
	.about-stats li { padding: 16px; }
	.about-stats strong { font-size: 1.4rem; }
	.about-stats li > span:last-child { font-size: .78rem; }
	.about-block { margin-top: 52px; }
	.about-tail { padding-block: 52px 60px; }
	.promise { gap: 26px; }
	.about-contact { margin-top: 40px; }
	.cta-band__icon { display: none; }
	.site-footer__grid { grid-template-columns: 1fr 1fr; gap: 28px; }
	.site-footer__bottom { padding-inline-end: 0; padding-bottom: 84px; }
	.float-chat span { display: none; }
	.float-chat { padding: 13px; }
	.section-head { flex-direction: column; align-items: flex-start; }
	.section-head--center { align-items: center; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*,
	*::before,
	*::after { animation: none !important; transition: none !important; }
	html.reveal-on [data-reveal] { opacity: 1; transform: none; }
	.hv-ma,
	.bento__spark polyline { stroke-dashoffset: 0; }
	.hv-area,
	.hv-signal { opacity: 1; }
}