/* ----------------------------------------------------------------------------------------
* vuqar.pro — site stylesheet
* One file for the whole public site: fonts, grid, components, pages.
* The admin panel keeps its own app.css.
* ---------------------------------------------------------------------------------------- */
/* INDEX
------------------------------------------------------------------------------------------
01. Fonts
02. Variables
03. Base
04. Grid & utilities
05. Buttons
06. Section & section title
07. Header
08. Page header & breadcrumb
09. Hero
10. Ticker
11. About
12. Services
13. Why choose
14. Tools
15. Portfolio
16. Core features (Alqor)
17. Process
18. Store & price
19. Calculator
20. Testimonials
21. FAQ accordion
22. CTA box
23. Footer
24. Inner pages: about, services, tech, projects, store, product
25. Contact & forms
26. FAQ page
27. Legal
28. Alqor, docs & hub
29. Widgets: toasts, to-top, cursor, animations
30. Responsive
------------------------------------------------------------------------------------------ */

/************************************/
/***         01. Fonts            ***/
/************************************/

@font-face{font-family:'Onest';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/onest-cyrillic-ext.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'Onest';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/onest-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Onest';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/onest-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Onest';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/onest-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Exo 2';font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/exo-2-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Exo 2';font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/exo-2-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Exo 2';font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/exo-2-700-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Exo 2';font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/exo-2-700-cyrillic-ext.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/jetbrains-mono-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/jetbrains-mono-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/jetbrains-mono-400-cyrillic-ext.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/jetbrains-mono-400-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}

/************************************/
/***       02. Variables          ***/
/************************************/

:root{
	--primary-color: #2B2A2A;
	--primary-deep: #1F1E1E;
	--accent-color: #EDC92C;
	--accent-hover: #D9B51A;
	--white-color: #FFFFFF;
	--gray-color: #E6E6E6;
	--text-color: #5E5D5D;
	--text-on-dark: rgba(255, 255, 255, .78);
	--divider-color: rgba(43, 42, 42, .12);
	--dark-divider-color: rgba(255, 255, 255, .12);
	--glass-color: rgba(255, 255, 255, .07);
	--error-color: #D64545;
	--success-color: #2E9E5B;
	--radius: 10px;
	--default-font: 'Onest', 'Segoe UI', system-ui, sans-serif;
	--mono-font: 'JetBrains Mono', 'Consolas', monospace;
	--heading-font: 'Exo 2', 'Onest', 'Segoe UI', sans-serif;
	--arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.5 10.5 10.5 1.5M3 1.5h7.5V9' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 0a10 10 0 1 1 0 20 10 10 0 0 1 0-20Zm4.3 6.3a1 1 0 0 0-1.4 0L8.8 10.4 7.1 8.7a1 1 0 1 0-1.4 1.4l2.4 2.4a1 1 0 0 0 1.4 0l4.8-4.8a1 1 0 0 0 0-1.4Z'/%3E%3C/svg%3E");
}

/************************************/
/***          03. Base            ***/
/************************************/

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

html{ -webkit-text-size-adjust: 100%; scroll-padding-top: 110px; }
html, body{ width: 100%; overflow-x: clip; }

body{
	margin: 0;
	font-family: var(--default-font);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6;
	color: var(--text-color);
	background: var(--white-color);
	-webkit-font-smoothing: antialiased;
}

::-webkit-scrollbar{ width: 7px; background-color: var(--primary-color); }
::-webkit-scrollbar-thumb{ background: var(--accent-color); }
::selection{ color: var(--primary-color); background-color: var(--accent-color); }

h1, h2, h3, h4, h5, h6,
.page-header-title, .footer-talk-title, .faqs-cta-title, .about-review-title{
	font-family: var(--heading-font);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -.01em;
	color: var(--primary-color);
	margin: 0;
}

p{ margin: 0 0 1.4em; }
figure{ margin: 0; }
img{ max-width: 100%; height: auto; display: block; }
a{ color: inherit; text-decoration: none; transition: color .3s ease-in-out; }
ul, ol{ margin: 0; padding: 0; }
button, input, select, textarea{ font: inherit; color: inherit; }
button{ background: none; border: 0; padding: 0; cursor: pointer; }
code, pre, kbd{ font-family: var(--mono-font); }
:focus-visible{ outline: 2px solid var(--accent-color); outline-offset: 3px; }
[hidden]{ display: none !important; }

.sr-only{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.skip-link{
	position: absolute; left: 15px; top: -60px; z-index: 1000;
	background: var(--accent-color); color: var(--primary-color);
	padding: 10px 16px; border-radius: 6px; font-weight: 600;
}
.skip-link:focus{ top: 15px; }

.ic{ width: 22px; height: 22px; flex: none; }
.text-accent{ color: var(--accent-color); }
.text-soft{ color: var(--text-color); }
.dark-section .text-soft{ color: var(--text-on-dark); }

.image-anime{ position: relative; overflow: hidden; }
.image-anime::after{
	content: ""; position: absolute; width: 200%; height: 0%;
	left: 50%; top: 50%; z-index: 1; pointer-events: none;
	background-color: rgba(255,255,255,.3);
	transform: translate(-50%,-50%) rotate(-45deg);
}
.image-anime:hover::after{ height: 250%; transition: all 600ms linear; background-color: transparent; }

/************************************/
/***    04. Grid & utilities      ***/
/************************************/

.container{ width: 100%; max-width: 1300px; margin: 0 auto; padding: 0 15px; }

.row{ display: flex; flex-wrap: wrap; margin: 0 -15px; }
.row > *{ width: 100%; max-width: 100%; flex-shrink: 0; padding: 0 15px; }
.row.g-0{ margin: 0; }
.row.g-0 > *{ padding: 0; }

.col-12{ flex: 0 0 auto; width: 100%; }
.col-6{ flex: 0 0 auto; width: 50%; }

@media (min-width: 768px){
	.col-md-4{ flex: 0 0 auto; width: 33.3333%; }
	.col-md-6{ flex: 0 0 auto; width: 50%; }
	.col-md-12{ flex: 0 0 auto; width: 100%; }
}
@media (min-width: 992px){
	.col-lg-3{ flex: 0 0 auto; width: 25%; }
	.col-lg-4{ flex: 0 0 auto; width: 33.3333%; }
	.col-lg-5{ flex: 0 0 auto; width: 41.6667%; }
	.col-lg-6{ flex: 0 0 auto; width: 50%; }
	.col-lg-7{ flex: 0 0 auto; width: 58.3333%; }
	.col-lg-8{ flex: 0 0 auto; width: 66.6667%; }
	.col-lg-12{ flex: 0 0 auto; width: 100%; }
	.order-lg-1{ order: 1; }
	.order-lg-2{ order: 2; }
}

.align-items-center{ align-items: center; }
.align-items-end{ align-items: flex-end; }
.align-items-start{ align-items: flex-start; }
.justify-content-center{ justify-content: center; }
.text-center{ text-align: center; }
.d-flex{ display: flex; }
.flex-wrap{ flex-wrap: wrap; }
.btn-group{ display: flex; flex-wrap: wrap; align-items: center; gap: 15px 20px; }
.mt-20{ margin-top: 20px; }
.mt-30{ margin-top: 30px; }
.mt-40{ margin-top: 40px; }
.mt-60{ margin-top: 60px; }
.mb-30{ margin-bottom: 30px; }

/************************************/
/***        05. Buttons           ***/
/************************************/

.btn-default{
	position: relative;
	display: inline-flex;
	align-items: center;
	font-size: 16px;
	font-weight: 600;
	line-height: 1em;
	color: var(--primary-color);
	background: var(--accent-color);
	border-radius: 5px;
	padding: 17px 46px 17px 24px;
	border: 0;
	overflow: hidden;
	cursor: pointer;
	transition: color .4s ease-in-out;
	z-index: 1;
}
.btn-default::before{
	content: "";
	position: absolute;
	top: 50%; right: 24px;
	width: 12px; height: 12px;
	background-color: currentColor;
	-webkit-mask: var(--arrow) center / contain no-repeat;
	        mask: var(--arrow) center / contain no-repeat;
	transform: translateY(-50%);
	transition: transform .4s ease-in-out;
}
.btn-default:hover::before{ transform: translateY(-50%) rotate(45deg); }
.btn-default::after{
	content: "";
	position: absolute;
	top: 0; right: 0; bottom: 0;
	width: 0; height: 100%;
	background: var(--primary-color);
	transition: all .4s ease-in-out;
	z-index: -1;
}
.btn-default:hover{ color: var(--white-color); }
.btn-default:hover::after{ right: auto; left: 0; width: 100%; }

.dark-section .btn-default:hover,
.btn-default.btn-highlighted:hover{ color: var(--primary-color); }
.dark-section .btn-default::after,
.btn-default.btn-highlighted::after{ background: var(--white-color); }

.btn-default.btn-ghost{ background: transparent; color: var(--white-color); box-shadow: inset 0 0 0 1px var(--dark-divider-color); }
.btn-default.btn-ghost::after{ background: var(--accent-color); }
.btn-default.btn-ghost:hover{ color: var(--primary-color); }

.btn-default.btn-dark{ background: var(--primary-color); color: var(--white-color); }
.btn-default.btn-dark::after{ background: var(--white-color); }
.btn-default.btn-dark:hover{ color: var(--primary-color); }

.btn-default.btn-outline-dark{ background: transparent; color: var(--primary-color); box-shadow: inset 0 0 0 1px currentColor; }
.btn-default.btn-outline-dark::after{ background: var(--primary-color); }
.btn-default.btn-outline-dark:hover{ color: var(--white-color); }

.btn-default:disabled{ opacity: .6; cursor: progress; }

.readmore-btn{
	position: relative;
	display: inline-block;
	font-weight: 600;
	line-height: normal;
	color: var(--white-color);
	padding-right: 22px;
}
.readmore-btn::before{
	content: "";
	position: absolute;
	top: 50%; right: 0;
	width: 12px; height: 12px;
	background-color: currentColor;
	-webkit-mask: var(--arrow) center / contain no-repeat;
	        mask: var(--arrow) center / contain no-repeat;
	transform: translateY(-50%);
	transition: transform .4s ease-in-out;
}
.readmore-btn:hover::before{ transform: translateY(-50%) rotate(45deg); }
.readmore-btn:hover{ color: var(--accent-color); }
.readmore-btn--accent{ color: var(--primary-color); }
.readmore-btn--accent::before{ background-color: var(--accent-hover); }
.readmore-btn--accent:hover{ color: var(--accent-hover); }

.round-arrow{
	flex: none;
	width: 44px; height: 44px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 50%;
	background: var(--accent-color);
	color: var(--primary-color);
	transition: all .4s ease-in-out;
}
.round-arrow svg{ width: 18px; height: 18px; transition: transform .4s ease-in-out; }
.round-arrow:hover{ background: var(--primary-color); color: var(--white-color); }
.round-arrow:hover svg{ transform: rotate(45deg); }
.dark-section .round-arrow:hover{ background: var(--white-color); color: var(--primary-color); }

/* lists with the accent check */
.check-list{ list-style: none; display: flex; flex-direction: column; gap: 18px; }
.check-list li{ position: relative; padding-left: 30px; line-height: 1.5; color: var(--white-color); }
.check-list li::before{
	content: ""; position: absolute; left: 0; top: 2px;
	width: 20px; height: 20px;
	background: var(--accent-color);
	-webkit-mask: var(--check) center / contain no-repeat;
	        mask: var(--check) center / contain no-repeat;
}
.check-list--dark li{ color: var(--primary-color); }
.check-list--dark li::before{ background: var(--accent-hover); }
.check-list--2col{ display: grid; grid-template-columns: 1fr 1fr; gap: 15px 20px; }

.stars{ display: inline-flex; gap: 3px; vertical-align: middle; }
.stars svg{ width: 17px; height: 17px; fill: var(--accent-color); }
.stars .off svg{ fill: rgba(43,42,42,.2); }

.tag-list{ list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.tag-list li{ font-size: 12.5px; font-weight: 500; line-height: 1; padding: 7px 10px; border-radius: 4px; background: var(--gray-color); color: var(--primary-color); }

/************************************/
/***  06. Section & section title ***/
/************************************/

.section{ padding: 120px 0; }

.bg-section{
	width: auto;
	max-width: 1820px;
	border-radius: var(--radius);
	margin: 0 15px;
}
@media (min-width: 1850px){ .bg-section{ margin: 0 auto; } }

.bg-gray{ background-color: var(--gray-color); }

.dark-section{
	color: var(--text-on-dark);
	background-color: var(--primary-color);
	background-image:
		radial-gradient(60% 55% at 100% 0%, rgba(237, 201, 44, .16), transparent 70%),
		radial-gradient(55% 60% at 0% 100%, rgba(237, 201, 44, .09), transparent 70%),
		linear-gradient(180deg, var(--primary-deep), var(--primary-color));
}
.dark-section + .dark-section,
.bg-section + .bg-section{ margin-top: 15px; }

.section-row{ margin-bottom: 70px; }
.section-row .section-title{ margin-bottom: 0; }
.section-btn{ text-align: right; }

.section-title{ margin-bottom: 50px; }
.section-title-center{ max-width: 760px; margin-left: auto; margin-right: auto; text-align: center; }

.section-title .section-sub-title{
	position: relative;
	display: inline-block;
	font-size: 16px;
	font-weight: 500;
	line-height: normal;
	color: var(--primary-color);
	padding-left: 34px;
	margin-bottom: 15px;
}
.section-title .section-sub-title::before{
	content: "";
	position: absolute; left: 0; top: 50%;
	width: 24px; height: 7px;
	transform: translateY(-50%);
	background:
		linear-gradient(var(--accent-color), var(--accent-color)) 0 0 / 24px 2px no-repeat,
		linear-gradient(var(--accent-color), var(--accent-color)) 8px 5px / 16px 2px no-repeat;
}
.section-title h1{ font-size: 76px; line-height: 1.08; letter-spacing: -.015em; }
.section-title h2{ font-size: 48px; letter-spacing: -.015em; }
.section-title p{ margin: 20px 0 0; }
.section-title p + p{ margin-top: 14px; }

.dark-section .section-title .section-sub-title,
.dark-section .section-title h1,
.dark-section .section-title h2,
.dark-section h3{ color: var(--white-color); }
.dark-section .section-title p,
.dark-section .section-title-content p{ color: var(--text-on-dark); }

.section-title-content p{ margin-bottom: 25px; }
.section-title-content p:last-child{ margin-bottom: 0; }

.section-footer-text{ margin: 30px 0 0; text-align: center; color: var(--white-color); }
.section-footer-text a{ color: var(--accent-color); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.section-footer-text a:hover{ color: var(--white-color); }
.section-footer-text--dark{ color: var(--primary-color); }
.section-footer-text--dark a{ color: var(--primary-color); text-decoration-color: var(--accent-color); }
.section-footer-text--dark a:hover{ color: var(--accent-hover); }

.icon-box{
	position: relative;
	flex: none;
	width: 54px; height: 54px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 50%;
	background: var(--accent-color);
	color: var(--primary-color);
	overflow: hidden;
}
.icon-box::before{
	content: ""; position: absolute; inset: 0;
	border-radius: 50%;
	background: var(--white-color);
	transform: scale(0);
	transition: transform .4s ease-in-out;
}
.icon-box > *{ position: relative; z-index: 1; }

/************************************/
/***         07. Header           ***/
/************************************/

header.main-header{ position: absolute; top: 30px; left: 15px; right: 15px; z-index: 100; }

header.main-header .header-sticky{
	position: relative;
	max-width: 1300px;
	margin: 0 auto;
	background: var(--glass-color);
	-webkit-backdrop-filter: blur(40px);
	        backdrop-filter: blur(40px);
	border: 1px solid var(--dark-divider-color);
	border-radius: var(--radius);
	transition: transform .35s ease-in-out, background-color .35s;
}
header.main-header .header-sticky.is-fixed{
	position: fixed;
	top: 15px; left: 15px; right: 15px;
	background: rgba(43, 42, 42, .96);
	box-shadow: 0 18px 40px -24px rgba(0,0,0,.55);
}

.navbar{ display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 5px; }

.brand{ display: inline-flex; align-items: center; flex: none; }
.brand-logo{ display: block; width: auto; height: 50px; }
@keyframes caret{ 50%{ opacity: 0; } }

.main-menu{ flex: 1; text-align: center; }
.nav-list{ list-style: none; display: inline-flex; align-items: center; gap: 4px; }
.nav-item{ position: relative; display: flex; align-items: center; }
.nav-item > a{ font-size: 16px; font-weight: 500; line-height: 1.2; color: var(--white-color); padding: 12px 10px; }
.nav-item > a:hover, .nav-item.is-active > a{ color: var(--accent-color); }
/* dropdown parent: a button that opens the submenu */
.submenu-toggle{ display: inline-flex; align-items: center; gap: 5px; padding: 12px 10px; background: none; border: 0; font: inherit; font-size: 16px; font-weight: 500; line-height: 1.2; color: var(--white-color); cursor: pointer; }
.submenu-toggle svg{ width: 16px; height: 16px; flex: none; transition: transform .3s; }
.submenu-toggle:hover, .nav-item.is-active > .submenu-toggle, .nav-item.is-open > .submenu-toggle{ color: var(--accent-color); }
.nav-item.submenu:hover .submenu-toggle svg, .nav-item.submenu.is-open .submenu-toggle svg{ transform: rotate(180deg); }

.sub-list{
	list-style: none;
	position: absolute; left: 50%; top: calc(100% + 16px);
	width: 330px;
	padding: 10px;
	text-align: left;
	background: rgba(36, 35, 35, .97);
	-webkit-backdrop-filter: blur(30px);
	        backdrop-filter: blur(30px);
	border: 1px solid rgba(255,255,255,.1);
	border-radius: 16px;
	box-shadow: 0 40px 70px -25px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.06);
	visibility: hidden; opacity: 0;
	transform: translate(-50%, 10px);
	transition: opacity .3s ease, transform .3s ease, visibility .3s;
}
/* hover bridge across the gap, and the pointer notch */
.sub-list::after{ content: ""; position: absolute; left: 0; right: 0; top: -18px; height: 18px; }
.sub-list::before{
	content: ""; position: absolute; left: 50%; top: -7px;
	width: 14px; height: 14px;
	background: rgb(36, 35, 35);
	border-left: 1px solid rgba(255,255,255,.1); border-top: 1px solid rgba(255,255,255,.1);
	transform: translateX(-50%) rotate(45deg);
	border-radius: 3px 0 0 0;
}
.nav-item.submenu:hover > .sub-list,
.nav-item.submenu.is-open > .sub-list{ visibility: visible; opacity: 1; transform: translate(-50%, 0); }
.sub-list li + li{ margin-top: 2px; }
.sub-list a{
	display: flex; align-items: center; gap: 14px;
	padding: 11px 12px;
	border-radius: 11px;
	color: var(--white-color);
	transition: background-color .25s ease;
}
.sub-list a:hover{ background: rgba(255,255,255,.06); }
.sub-ic{
	flex: none; width: 42px; height: 42px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 11px;
	background: rgba(237,201,44,.12);
	border: 1px solid rgba(237,201,44,.25);
	color: var(--accent-color);
	transition: all .25s ease;
}
.sub-ic .ic{ width: 19px; height: 19px; }
.sub-list a:hover .sub-ic{ background: var(--accent-color); border-color: var(--accent-color); color: var(--primary-color); }
.sub-text strong{ display: block; font-size: 15.5px; font-weight: 600; line-height: 1.3; }
.sub-text small{ display: block; margin-top: 3px; font-size: 13px; line-height: 1.35; color: rgba(255,255,255,.58); }

.mobile-langs{ display: none; }

.header-actions{ display: flex; align-items: center; gap: 12px; flex: none; }

.lang-dd{ position: relative; }
.lang-dd-btn{
	display: inline-flex; align-items: center; gap: 8px;
	height: 50px; padding: 0 14px;
	color: var(--white-color); font-weight: 600; font-size: 14px;
	border-radius: 5px;
	box-shadow: inset 0 0 0 1px var(--dark-divider-color);
	transition: background-color .3s;
}
.lang-dd-btn:hover{ background: var(--glass-color); }
.lang-dd-btn .chev{ width: 14px; height: 14px; opacity: .7; transition: transform .3s; }
.lang-dd.is-open .chev{ transform: rotate(180deg); }
.flag{ width: 22px; height: 16px; border-radius: 3px; flex: none; }
.lang-dd-panel{
	position: absolute; right: 0; top: calc(100% + 10px);
	min-width: 190px; padding: 6px;
	background: var(--white-color);
	border-radius: var(--radius);
	box-shadow: 0 24px 50px -20px rgba(0,0,0,.45);
	visibility: hidden; opacity: 0; transform: translateY(-6px);
	transition: all .25s ease-in-out;
}
.lang-dd.is-open .lang-dd-panel{ visibility: visible; opacity: 1; transform: none; }
.lang-dd-panel a{ display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 6px; color: var(--primary-color); font-weight: 500; font-size: 15px; }
.lang-dd-panel a:hover{ background: var(--gray-color); }
.lang-dd-panel a[aria-current]{ background: var(--accent-color); }

.navbar-toggle{
	display: none;
	width: 46px; height: 46px;
	flex-direction: column; align-items: center; justify-content: center; gap: 5px;
	background: var(--accent-color);
	border-radius: 6px;
}
.navbar-toggle span{ display: block; width: 22px; height: 2.5px; border-radius: 3px; background: var(--primary-color); transition: transform .3s, opacity .3s; }
.navbar-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(7.5px) rotate(45deg); }
.navbar-toggle[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.navbar-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7.5px) rotate(-45deg); }

/************************************/
/*** 08. Page header & breadcrumb ***/
/************************************/

.page-header{
	position: relative;
	margin: 15px 15px 0;
	padding: 225px 0 110px;
	border-radius: var(--radius);
	overflow: hidden;
}
.page-header::before,
.page-header::after{ content: ""; position: absolute; inset: 0; pointer-events: none; }
/* grid that drifts diagonally */
.page-header::after{
	background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
	background-size: 64px 64px;
	-webkit-mask-image: radial-gradient(75% 85% at 50% 35%, #000, transparent);
	        mask-image: radial-gradient(75% 85% at 50% 35%, #000, transparent);
	animation: grid-drift 14s linear infinite;
}
/* accent light sweeping across the grid lines */
.page-header::before{
	z-index: 1;
	background-image: linear-gradient(rgba(237,201,44,.55) 1px, transparent 1px), linear-gradient(90deg, rgba(237,201,44,.55) 1px, transparent 1px);
	background-size: 64px 64px;
	-webkit-mask-image: radial-gradient(260px 200px at var(--gx, 20%) var(--gy, 40%), #000, transparent 70%);
	        mask-image: radial-gradient(260px 200px at var(--gx, 20%) var(--gy, 40%), #000, transparent 70%);
	opacity: .55;
	animation: grid-drift 14s linear infinite, grid-sweep 9s ease-in-out infinite alternate;
}
@property --gx{ syntax: '<percentage>'; inherits: false; initial-value: 20%; }
@property --gy{ syntax: '<percentage>'; inherits: false; initial-value: 40%; }
@keyframes grid-drift{ to{ background-position: 64px 64px, 64px 64px; } }
@keyframes grid-sweep{
	0%{ --gx: 12%; --gy: 30%; }
	50%{ --gx: 55%; --gy: 75%; }
	100%{ --gx: 88%; --gy: 25%; }
}
.page-header .container{ position: relative; z-index: 2; }
.page-header-box{ text-align: center; }
.page-header-title{ margin: 0; font-size: 72px; font-weight: 700; line-height: 1.05; letter-spacing: -.015em; color: var(--white-color); }
.breadcrumb ol{ list-style: none; display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 6px 0; margin-top: 18px; }
.breadcrumb li{ display: inline-flex; align-items: center; font-size: 17px; font-weight: 500; color: var(--white-color); }
.breadcrumb li + li::before{ content: "/"; margin: 0 12px; color: var(--accent-color); }
.breadcrumb a:hover{ color: var(--accent-color); }
.breadcrumb [aria-current]{ color: var(--accent-color); }

/************************************/
/***          09. Hero            ***/
/************************************/

.hero{
	position: relative;
	margin: 15px 15px 0;
	padding: 230px 0 110px;
	border-radius: var(--radius);
	overflow: hidden;
}
.hero-bg-video{ position: absolute; inset: 0; }
.hero-bg-video video{ width: 100%; height: 100%; object-fit: cover; }
.hero-bg-video::after{
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(31,30,30,.82) 0%, rgba(31,30,30,.72) 45%, rgba(31,30,30,.92) 100%);
}
.hero .container{ position: relative; z-index: 2; }
.hero-content{ max-width: 1100px; margin: 0 auto; }
.hero-content .section-title{ max-width: none; }
.hero-content .section-title p{ font-size: 20px; max-width: 820px; margin-left: auto; margin-right: auto; }
.hero h1 .typed{ display: block; margin-top: .12em; min-height: 1.15em; font-size: .75em; white-space: nowrap; }
.hero h1 .typed::after{ content: ""; display: inline-block; width: 3px; height: .85em; margin-left: 6px; vertical-align: -.06em; background: var(--accent-color); animation: caret 1s steps(1) infinite; }

.hero-panel{
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	max-width: 1020px;
	margin: 10px auto 0;
	border-radius: 20px;
	overflow: hidden;
	background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.03));
	border: 1px solid rgba(255,255,255,.12);
	-webkit-backdrop-filter: blur(24px);
	        backdrop-filter: blur(24px);
	box-shadow: 0 50px 90px -45px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.1);
}
.hero-panel::before{
	content: ""; position: absolute; left: -120px; top: -160px; width: 360px; height: 360px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(237,201,44,.22), transparent 65%);
	pointer-events: none;
}
.hero-panel-stats{ position: relative; display: grid; grid-template-columns: 1fr 1fr; border-right: 1px solid rgba(255,255,255,.1); }
.hero-stat{ padding: 30px 32px 26px; border-bottom: 1px solid rgba(255,255,255,.1); }
.hero-stat + .hero-stat{ border-left: 1px solid rgba(255,255,255,.1); }
.hero-stat-num{ display: block; font-size: 56px; font-weight: 700; line-height: 1; letter-spacing: -.045em; color: var(--white-color); }
.hero-stat-num em{ font-style: normal; color: var(--accent-color); margin-left: 2px; }
.hero-stat-label{ display: block; margin-top: 10px; font-size: 15px; line-height: 1.35; color: var(--text-on-dark); }
.hero-rating{ grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: 14px 20px; padding: 24px 32px; }
.hero-rating-score{ display: flex; align-items: center; gap: 12px; margin: 0; }
.hero-rating-score strong{ font-size: 30px; font-weight: 700; letter-spacing: -.03em; line-height: 1; color: var(--white-color); }
.hero-rating-text > p:last-child{ margin: 5px 0 0; font-size: 14px; color: var(--text-on-dark); }

.satisfy-avatars{ display: flex; }
.satisfy-avatars span{
	width: 46px; height: 46px; margin-left: -10px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 50%; border: 3px solid #2f2e2e;
	background: linear-gradient(135deg, #F6DD6A, var(--accent-color));
	color: var(--primary-color);
	font-size: 13px; font-weight: 700; letter-spacing: -.02em;
	box-shadow: 0 6px 14px -6px rgba(0,0,0,.6);
}
.satisfy-avatars span:first-child{ margin-left: 0; }
.satisfy-avatars span:nth-child(even){ background: linear-gradient(135deg, #FFFFFF, #DADADA); }
.satisfy-avatars span.more{ background: #3a3939; color: var(--white-color); font-size: 12px; }
.satisfy-avatars--dark span{ border-color: var(--white-color); }
.satisfy-avatars--dark span:nth-child(even){ background: linear-gradient(135deg, #3d3c3c, var(--primary-color)); color: var(--white-color); }

.hero-panel-side{ position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 26px; padding: 22px 32px 30px; background: rgba(0,0,0,.16); }
.hero-services{ list-style: none; }
.hero-services a{
	display: flex; align-items: center; gap: 14px;
	padding: 13px 0;
	border-bottom: 1px solid rgba(255,255,255,.08);
	color: var(--white-color); font-weight: 500; line-height: 1.3;
	transition: color .3s ease, padding .3s ease;
}
.hs-ic{
	flex: none; width: 40px; height: 40px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 11px;
	background: rgba(237,201,44,.13);
	border: 1px solid rgba(237,201,44,.3);
	color: var(--accent-color);
	transition: all .3s ease;
}
.hs-ic .ic{ width: 19px; height: 19px; }
.hs-arrow{ width: 17px; height: 17px; margin-left: auto; flex: none; opacity: .45; transition: all .3s ease; }
.hero-services a:hover{ color: var(--accent-color); padding-left: 4px; }
.hero-services a:hover .hs-ic{ background: var(--accent-color); color: var(--primary-color); }
.hero-services a:hover .hs-arrow{ opacity: 1; transform: rotate(45deg); }
.hero-btns{ display: flex; flex-wrap: wrap; gap: 12px; }
.hero-btns .btn-default{ flex: 1 1 auto; justify-content: center; }

/************************************/
/***         10. Ticker           ***/
/************************************/

.scrolling-ticker{ margin: 15px 15px 0; padding: 22px 0; border-radius: var(--radius); background: var(--accent-color); overflow: hidden; }
.scrolling-ticker-box{ --gap: 22px; display: flex; gap: var(--gap); user-select: none; }
.scrolling-content{ flex-shrink: 0; display: flex; align-items: center; gap: var(--gap); min-width: 100%; animation: ticker 40s linear infinite; }
.scrolling-content span{ display: flex; align-items: center; gap: var(--gap); font-size: 26px; font-weight: 600; line-height: 1.2; letter-spacing: -.02em; color: var(--primary-color); white-space: nowrap; }
.scrolling-content .spark{ width: 26px; height: 26px; fill: var(--primary-color); animation: spark 3s linear infinite; }
@keyframes spark{ 50%{ transform: rotate(180deg) scale(.55); } 100%{ transform: rotate(360deg) scale(1); } }
@keyframes ticker{ to{ transform: translateX(calc(-100% - var(--gap))); } }

/* two crossed bands */
.ticker-cross{ position: relative; height: 200px; overflow: hidden; }
.ticker-cross .scrolling-ticker{ position: absolute; left: -4%; right: -4%; top: 50%; margin: 0; border-radius: 0; padding: 20px 0; }
.ticker-back{ background: var(--primary-color); transform: translateY(-50%) rotate(3deg); }
.ticker-front{ z-index: 1; background: linear-gradient(90deg, #E9C21F, var(--accent-color) 30%, #F3D75A 60%, var(--accent-color)); transform: translateY(-50%) rotate(-2.5deg); box-shadow: 0 25px 45px -22px rgba(43,42,42,.55); }
.ticker-back .scrolling-content span{ font-size: 22px; font-weight: 500; color: rgba(255,255,255,.88); }
.ticker-back .scrolling-content .spark{ fill: var(--accent-color); width: 20px; height: 20px; }
.ticker-front .scrolling-content span{ font-size: 28px; font-weight: 700; letter-spacing: -.025em; }
.scrolling-content.is-reverse{ animation-direction: reverse; animation-duration: 55s; }

/************************************/
/***          11. About           ***/
/************************************/

.about-image-box{ position: relative; margin-right: 15px; }
.about-image-box figure{ border-radius: var(--radius); }
.about-image-box img{ width: 100%; aspect-ratio: 1 / 1.12; object-fit: cover; border-radius: var(--radius); }
.about-review-box{
	position: absolute; left: 30px; bottom: 30px; z-index: 2;
	padding: 20px; border-radius: var(--radius);
	background: var(--white-color);
	box-shadow: 0 25px 50px -25px rgba(0,0,0,.4);
	animation: float-x 3s ease-in-out infinite alternate;
}
@keyframes float-x{ to{ transform: translateX(20px); } }
.about-review-box .stars{ margin-top: 12px; }
.about-review-title{ margin: 8px 0 0; font-size: 18px; font-weight: 600; color: var(--primary-color); }

.about-body{ display: flex; flex-wrap: wrap; align-items: center; gap: 20px 40px; }
.author-box{ display: flex; align-items: center; gap: 14px; }
.author-avatar{ width: 52px; height: 52px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--primary-color); color: var(--accent-color); font-weight: 700; }
.author-box p{ margin: 0; line-height: 1.3; }
.author-box .author-name{ font-size: 19px; font-weight: 600; color: var(--primary-color); margin-bottom: 4px; }

.about-footer{ display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 40px; padding-top: 40px; border-top: 1px solid var(--divider-color); }
.about-counter-box{ padding: 30px; border-radius: var(--radius); background: var(--gray-color); display: flex; flex-direction: column; justify-content: center; }
.about-counter-box p{ margin: 0; line-height: 1.35; }
.about-counter-box .about-counter-num{ font-size: 54px; font-weight: 600; line-height: 1; letter-spacing: -.03em; color: var(--primary-color); margin-bottom: 10px; }
.about-footer .check-list{ justify-content: center; }

/************************************/
/***        12. Services          ***/
/************************************/

.service-item{
	display: flex; flex-direction: column; justify-content: space-between; gap: 30px;
	min-height: 400px;
	height: calc(100% - 30px);
	margin-bottom: 30px;
	padding: 40px;
	border-radius: var(--radius);
	background: var(--glass-color);
	-webkit-backdrop-filter: blur(30px);
	        backdrop-filter: blur(30px);
	border: 1px solid rgba(255,255,255,.04);
	transition: transform .4s ease-in-out, border-color .4s;
}
.service-item:hover{ transform: translateY(-5px); border-color: rgba(237,201,44,.35); }
.service-item:hover .icon-box::before{ transform: scale(1); }
.service-item .icon-box{ margin-bottom: 40px; }
.service-item h3{ font-size: 21px; color: var(--white-color); }
.service-item h3 a:hover{ color: var(--accent-color); }
.service-item p{ margin: 12px 0 0; color: var(--text-on-dark); }
.service-item-btn{ padding-top: 28px; border-top: 1px solid var(--dark-divider-color); }

/************************************/
/***       13. Why choose         ***/
/************************************/

.why-choose-content{ height: 100%; display: flex; flex-direction: column; justify-content: center; }
.why-choose-body{ display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.why-choose-item{
	min-height: 270px; padding: 36px;
	display: flex; flex-direction: column; justify-content: space-between; gap: 20px;
	border-radius: var(--radius); background: var(--gray-color);
}
.why-choose-num{ margin: 0; font-size: 46px; font-weight: 600; line-height: 1; letter-spacing: -.03em; color: var(--primary-color); }
.why-choose-label{ margin: 10px 0 0; color: var(--primary-color); font-weight: 500; }
.why-choose-text{ margin: 0; padding-top: 20px; border-top: 1px solid var(--divider-color); line-height: 1.55; }
.why-choose-footer{ display: flex; flex-wrap: wrap; align-items: center; gap: 20px 40px; margin-top: 40px; }
.contact-box{ display: inline-flex; align-items: center; gap: 15px; }
.contact-box .icon-box{ background: var(--primary-color); color: var(--white-color); }
.contact-box .icon-box::before{ background: var(--accent-color); }
.contact-box:hover .icon-box::before{ transform: scale(1); }
.contact-box:hover .icon-box{ color: var(--primary-color); }
.contact-box-label{ display: block; font-size: 15px; }
.contact-box-value{ display: block; font-size: 20px; font-weight: 600; color: var(--primary-color); }
.why-choose-image{ height: 100%; margin-left: 15px; border-radius: var(--radius); }
.why-choose-image img{ width: 100%; height: 100%; min-height: 420px; aspect-ratio: 1 / 1.12; object-fit: cover; border-radius: var(--radius); }

/************************************/
/***          14. Tools           ***/
/************************************/

.tools-note{ display: inline-flex; align-items: center; gap: 10px; margin: 22px 0 0; padding: 9px 16px; border-radius: 30px; border: 1px dashed rgba(237,201,44,.45); color: var(--text-on-dark); font-size: 14.5px; }
.tools-note-dot{ width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--accent-color); box-shadow: 0 0 0 4px rgba(237,201,44,.18); }
.tools-stack{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tools-stack-item{ position: relative; display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 12px; background: var(--glass-color); border: 1px solid var(--dark-divider-color); overflow: hidden; }
.tools-stack-item::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(237,201,44,.12) 50%, transparent 70%); transform: translateX(-100%); transition: transform .7s ease; pointer-events: none; }
.js .tools-stack-item[data-anim]{ transition: opacity .8s ease, transform .5s ease, border-color .3s ease, background .3s ease; }
.tools-stack-item:hover{ transform: translateY(-3px); border-color: rgba(237,201,44,.6); background: rgba(255,255,255,.1); }
.tools-stack-item:hover::after{ transform: translateX(100%); }
.tools-stack-ic{ width: 42px; height: 42px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--accent-color); color: var(--primary-color); }
.tools-stack-ic .tool-ic{ width: 22px; height: 22px; }
.tools-stack-text{ display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tools-stack-text strong{ font-family: var(--heading-font); font-size: 16.5px; font-weight: 700; color: var(--white-color); line-height: 1.25; }
.tools-stack-text small{ font-size: 13px; color: var(--text-on-dark); }
@media only screen and (max-width: 374px){ .tools-stack{ grid-template-columns: minmax(0, 1fr); } }
.tools-list-box{ display: flex; align-items: center; gap: 30px; margin-left: 35px; }
.tools-col{ flex: 1; display: flex; flex-direction: column; gap: 30px; }
.tools-item{
	position: relative; overflow: hidden;
	display: block;
	padding: 30px 20px;
	text-align: center;
	border-radius: var(--radius);
	background: var(--glass-color);
	-webkit-backdrop-filter: blur(30px);
	        backdrop-filter: blur(30px);
	transition: color .4s ease-in-out;
}
.tools-item::before{ content: ""; position: absolute; left: 0; right: 0; top: 0; height: 0; background: var(--accent-color); transition: all .4s ease-in-out; }
.tools-item:hover::before{ top: auto; bottom: 0; height: 100%; }
.tools-item > *{ position: relative; z-index: 1; }
.tools-item .icon-box{ width: auto; height: auto; background: none; color: var(--white-color); margin-bottom: 22px; overflow: visible; }
.tools-item .icon-box::before{ display: none; }
.tool-ic{ width: 46px; height: 46px; }
.tools-name{ margin: 0; font-size: 20px; font-weight: 600; color: var(--white-color); }
.tools-meta{ margin: 6px 0 0; font-size: 14px; color: var(--text-on-dark); }
.tools-item:hover .icon-box,
.tools-item:hover .tools-name,
.tools-item:hover .tools-meta{ color: var(--primary-color); }
.tools-item--more .tool-ic{ width: 36px; height: 36px; }

/************************************/
/***        15. Portfolio         ***/
/************************************/

.portfolio-item{
	position: relative; overflow: hidden;
	display: flex; flex-direction: column; justify-content: flex-end;
	min-height: 470px;
	height: calc(100% - 30px);
	margin-bottom: 30px;
	padding: 10px;
	border-radius: var(--radius);
	background: var(--primary-color);
}
.portfolio-item-image{ position: absolute; inset: 0; }
.portfolio-item-image img{ width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .6s ease-in-out; }
.portfolio-item:hover .portfolio-item-image img{ transform: scale(1.06); }
.portfolio-item-body{ position: relative; z-index: 2; padding: 22px; border-radius: var(--radius); background: var(--white-color); }
.portfolio-item-body h3{ font-size: 21px; }
.portfolio-item-body h3 a:hover{ color: var(--accent-hover); }
.portfolio-item-body p{ margin: 10px 0 0; font-size: 15px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.portfolio-item-body .tag-list{ margin-top: 14px; }
.portfolio-item-links{ display: flex; gap: 20px; max-height: 0; overflow: hidden; opacity: 0; transition: all .4s ease-in-out; }
.portfolio-item:hover .portfolio-item-links,
.portfolio-item:focus-within .portfolio-item-links{ max-height: 70px; opacity: 1; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--divider-color); }
@media (hover: none){ .portfolio-item-links{ max-height: 70px; opacity: 1; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--divider-color); } }
.bg-gray .portfolio-item-body .tag-list li{ background: var(--gray-color); }

/************************************/
/***  16. Core features (Alqor)   ***/
/************************************/

.alqor-feature{ overflow: hidden; }
.alqor-visual{ position: relative; margin-right: 30px; padding: 46px 20px 80px 0; }
.alqor-visual::before{
	content: ""; position: absolute; left: 10%; top: 15%; width: 75%; height: 70%;
	background: radial-gradient(closest-side, rgba(237,201,44,.32), transparent);
	filter: blur(30px);
	pointer-events: none;
}
.alqor-window{
	position: relative;
	border-radius: 18px;
	overflow: hidden;
	background: #1A1919;
	border: 1px solid rgba(255,255,255,.1);
	box-shadow: 0 60px 100px -45px rgba(0,0,0,.9), 0 0 0 9px rgba(255,255,255,.03);
	transform: perspective(1500px) rotateY(9deg) rotateX(3deg);
	transition: transform .7s cubic-bezier(.2,.7,.2,1);
}
.alqor-visual:hover .alqor-window{ transform: none; }
.alqor-window-bar{ display: flex; align-items: center; gap: 7px; padding: 14px 18px; background: #242323; border-bottom: 1px solid rgba(255,255,255,.07); }
.alqor-window-bar > span{ width: 11px; height: 11px; border-radius: 50%; background: #4a4848; }
.alqor-window-bar > span:first-child{ background: var(--accent-color); }
.alqor-window-bar em{ margin-left: 10px; font-style: normal; font-family: var(--mono-font); font-size: 13px; color: #c9c7c7; }
.alqor-window-bar b{ margin-left: auto; font-weight: 500; font-size: 12px; padding: 4px 9px; border-radius: 20px; background: rgba(237,201,44,.14); color: var(--accent-color); }
.alqor-window pre{ margin: 0; padding: 22px 22px 18px 6px; overflow-x: auto; font-size: 14.5px; line-height: 1.8; color: #E8E6E3; }
.alqor-window .ln{ display: inline-block; width: 40px; padding-right: 16px; text-align: right; color: #5a5856; user-select: none; }
.alqor-window-out{ padding: 14px 22px; border-top: 1px solid rgba(255,255,255,.07); background: #151414; font-family: var(--mono-font); font-size: 13.5px; line-height: 1.7; color: #A8D18D; }
.alqor-window-out span{ color: var(--accent-color); margin-right: 6px; }
.alqor-chip{
	position: absolute; z-index: 2;
	display: block;
	padding: 13px 17px;
	border-radius: 14px;
	background: var(--white-color);
	color: var(--text-color);
	font-size: 13.5px; line-height: 1.3;
	box-shadow: 0 25px 45px -20px rgba(0,0,0,.6);
	animation: float-y 4s ease-in-out infinite alternate;
}
.alqor-chip strong{ display: block; font-size: 22px; font-weight: 700; letter-spacing: -.02em; color: var(--primary-color); }
.alqor-chip--1{ right: -10px; top: 6px; }
.alqor-chip--2{ left: -26px; bottom: 6px; background: var(--accent-color); color: var(--primary-color); animation-delay: -1.5s; }
.alqor-chip--3{ right: 70px; bottom: 18px; animation-delay: -3s; }
@keyframes float-y{ to{ transform: translateY(-12px); } }

.core-logo{ height: 46px; width: auto; margin-bottom: 26px; }
.alqor-content .section-title{ margin-bottom: 26px; }
.alqor-content .section-title h2{ font-size: 44px; }
.alqor-features{ list-style: none; border-bottom: 1px solid var(--dark-divider-color); }
.alqor-features li{ display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 20px 0; border-top: 1px solid var(--dark-divider-color); }
.alqor-features .icon-box{ width: 56px; height: 56px; }
.alqor-features li:hover .icon-box::before{ transform: scale(1); }
.alqor-features h3{ font-size: 20px; color: var(--white-color); }
.alqor-features p{ margin: 5px 0 0; color: var(--text-on-dark); }
.alqor-num{ font-family: var(--mono-font); font-size: 14px; color: rgba(255,255,255,.3); transition: color .3s; }
.alqor-features li:hover .alqor-num{ color: var(--accent-color); }
.core-btns{ display: flex; flex-wrap: wrap; gap: 15px; margin-top: 40px; }

/************************************/
/***         17. Process          ***/
/************************************/

.process-steps{ list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; counter-reset: step; }
.process-item{
	position: relative;
	padding: 30px 26px;
	border-radius: var(--radius);
	background: var(--gray-color);
	transition: transform .4s ease-in-out, background-color .4s;
}
.process-item::after{
	content: ""; position: absolute; top: 57px; right: -24px; width: 24px; height: 2px;
	background: repeating-linear-gradient(90deg, var(--accent-hover) 0 4px, transparent 4px 8px);
}
.process-item:last-child::after{ display: none; }
.process-item:hover{ transform: translateY(-5px); background: var(--primary-color); }
.process-item:hover h3{ color: var(--white-color); }
.process-item:hover p{ color: var(--text-on-dark); }
.process-item:hover .icon-box::before{ transform: scale(1); }
.process-item-head{ display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 28px; }
.process-badge{ font-size: 13px; font-weight: 600; color: var(--primary-color); background: var(--white-color); padding: 6px 10px; border-radius: 4px; }
.process-item h3{ font-size: 19px; transition: color .4s; }
.process-item p{ margin: 10px 0 0; font-size: 15px; line-height: 1.55; transition: color .4s; }
.bg-gray .process-item{ background: var(--white-color); }
.bg-gray .process-item:hover{ background: var(--primary-color); }
.bg-gray .process-badge{ background: var(--gray-color); }

/************************************/
/***     18. Store & price        ***/
/************************************/

.product-item{
	display: flex; flex-direction: column;
	height: calc(100% - 30px);
	margin-bottom: 30px;
	padding: 10px;
	border-radius: var(--radius);
	background: var(--white-color);
	transition: transform .4s ease-in-out, box-shadow .4s;
}
.product-item:hover{ transform: translateY(-5px); box-shadow: 0 30px 50px -35px rgba(43,42,42,.45); }
.product-item-image{ position: relative; display: block; overflow: hidden; border-radius: 8px; background: var(--primary-color); }
.product-item-image img{ width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; transition: transform .6s ease-in-out; }
.product-item:hover .product-item-image img{ transform: scale(1.05); }
.product-badge{ position: absolute; left: 12px; top: 12px; z-index: 1; padding: 7px 11px; border-radius: 4px; background: var(--accent-color); color: var(--primary-color); font-size: 13px; font-weight: 600; line-height: 1; }
.product-item-body{ flex: 1; display: flex; flex-direction: column; padding: 22px 16px 14px; }
.product-item-body h3{ font-size: 20px; }
.product-item-body h3 a:hover{ color: var(--accent-hover); }
.product-item-body p{ margin: 10px 0 20px; font-size: 15px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.product-item-foot{ margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 15px; padding-top: 18px; border-top: 1px solid var(--divider-color); }
.section:not(.bg-gray) .product-item{ background: var(--gray-color); }

.product-item-foot{ align-items: flex-end; }
.price-tag{ display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
.price-was{ display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; }
.price-was s{ color: #8d8c8c; text-decoration-thickness: 1.5px; }
.price-off{ padding: 4px 8px; border-radius: 30px; background: var(--primary-color); color: var(--accent-color); font-size: 12.5px; font-weight: 800; line-height: 1; letter-spacing: .02em; }
.price-main{ display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
.price-now{ font-family: var(--heading-font); font-size: 36px; font-weight: 800; letter-spacing: -.02em; color: var(--primary-color); line-height: 1; font-variant-numeric: tabular-nums; }
.price-now .cur{ font-size: .62em; font-weight: 700; margin-left: 3px; }
.price-alt{ padding: 4px 9px; border-radius: 6px; background: rgba(237,201,44,.22); color: var(--primary-color); font-size: 14px; font-weight: 600; white-space: nowrap; }
.price-save{ display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--success-color); }
.price-save .ic{ width: 15px; height: 15px; flex: none; }
.price-save strong{ font-weight: 700; }
.product-item-foot .round-arrow{ flex: none; }

/************************************/
/***       19. Calculator         ***/
/************************************/

.calc{ display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 30px; align-items: start; }
.calc-label{ font-size: 18px; margin: 0 0 18px; }
.calc-label:not(:first-child){ margin-top: 40px; }
.calc input{ position: absolute; opacity: 0; pointer-events: none; }
.calc-types{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; }
.calc-type-card{
	height: 100%;
	display: flex; flex-direction: column; gap: 6px;
	padding: 22px;
	border-radius: var(--radius);
	background: var(--gray-color);
	border: 2px solid transparent;
	cursor: pointer;
	transition: all .3s ease-in-out;
}
.calc-type-card .icon-box{ width: 46px; height: 46px; margin-bottom: 10px; background: var(--white-color); }
.calc-type-card .ic{ width: 20px; height: 20px; }
.calc-type-card strong{ color: var(--primary-color); font-weight: 600; font-size: 17px; line-height: 1.3; }
.calc-type-card small{ font-size: 14px; line-height: 1.4; }
.calc-type-card em{ margin-top: auto; padding-top: 10px; font-style: normal; font-weight: 600; color: var(--primary-color); font-size: 14px; }
.calc-type-card:hover{ border-color: rgba(237,201,44,.6); }
.calc-type input:checked + .calc-type-card{ background: var(--primary-color); border-color: var(--primary-color); }
.calc-type input:checked + .calc-type-card strong,
.calc-type input:checked + .calc-type-card em{ color: var(--white-color); }
.calc-type input:checked + .calc-type-card small{ color: var(--text-on-dark); }
.calc-type input:checked + .calc-type-card .icon-box{ background: var(--accent-color); }
.calc-type input:focus-visible + .calc-type-card,
.calc-addon input:focus-visible + .calc-addon-chip{ outline: 2px solid var(--accent-color); outline-offset: 2px; }
.calc-addons{ display: flex; flex-wrap: wrap; gap: 12px; }
.calc-addon-chip{
	display: inline-flex; align-items: center; gap: 10px;
	padding: 12px 16px;
	border-radius: 6px;
	background: var(--gray-color);
	color: var(--primary-color); font-weight: 500;
	cursor: pointer;
	border: 2px solid transparent;
	transition: all .3s ease-in-out;
}
.calc-addon-chip em{ font-style: normal; font-size: 13px; color: var(--text-color); }
.calc-tick{ width: 20px; height: 20px; border-radius: 4px; background: var(--white-color); position: relative; flex: none; }
.calc-addon input:checked + .calc-addon-chip{ border-color: var(--accent-color); background: rgba(237,201,44,.18); }
.calc-addon input:checked + .calc-addon-chip .calc-tick{ background: var(--accent-color); }
.calc-addon input:checked + .calc-addon-chip .calc-tick::after{ content: ""; position: absolute; left: 7px; top: 3px; width: 5px; height: 10px; border: solid var(--primary-color); border-width: 0 2px 2px 0; transform: rotate(45deg); }

.calc-summary{ position: sticky; top: 110px; padding: 36px; border-radius: var(--radius); }
.calc-summary-label{ display: block; font-size: 14px; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; color: var(--text-on-dark); }
.calc-total{ margin: 10px 0 28px; font-size: 44px; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; color: var(--accent-color); font-variant-numeric: tabular-nums; }
.calc-dash{ margin: 0 4px; }
.calc-cur{ font-size: 20px; color: var(--white-color); margin-left: 4px; }
.calc-breakdown{ list-style: none; margin: 14px 0 22px; padding: 0 0 18px; border-bottom: 1px solid var(--dark-divider-color); }
.calc-breakdown li{ display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; color: var(--white-color); font-size: 15px; }
.calc-breakdown li em{ font-style: normal; color: var(--text-on-dark); white-space: nowrap; }
.calc-note{ font-size: 14px; color: var(--text-on-dark); }
.calc-cta{ width: 100%; justify-content: center; }

/************************************/
/***      20. Testimonials        ***/
/************************************/

.slider{ position: relative; }
.slider-track{
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 60px) / 3);
	gap: 30px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	padding: 6px 0;
}
.slider-track::-webkit-scrollbar{ display: none; }
.testimonial-item{
	scroll-snap-align: start;
	display: flex; flex-direction: column; align-items: center;
	padding: 40px;
	border-radius: var(--radius);
	background: var(--white-color);
	text-align: center;
}
.testimonial-author{ width: 100%; padding-bottom: 30px; margin-bottom: 30px; border-bottom: 1px solid var(--divider-color); }
.testimonial-avatar{ width: 88px; height: 88px; margin: 0 auto 22px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--primary-color); color: var(--accent-color); font-size: 26px; font-weight: 700; }
.testimonial-author h3{ font-size: 20px; }
.testimonial-author p{ margin: 5px 0 0; font-size: 15px; }
.testimonial-item blockquote{ margin: 18px 0 0; }
.testimonial-item blockquote p{ margin: 0; font-size: 18px; line-height: 1.55; color: var(--primary-color); }
.slider-nav{ display: flex; justify-content: center; gap: 12px; margin-top: 40px; }
.slider-btn{ width: 50px; height: 50px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--primary-color); color: var(--white-color); transition: all .3s; }
.slider-btn svg{ width: 20px; height: 20px; }
.slider-btn:hover{ background: var(--accent-color); color: var(--primary-color); }
.our-testimonials .section-footer-text{ display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; }

/************************************/
/***    21. FAQ accordion         ***/
/************************************/

.faqs-image-box{ position: relative; height: 100%; margin-right: 15px; }
.faqs-image-box figure{ height: 100%; border-radius: 16px; }
.faqs-image-box img{ width: 100%; height: 100%; min-height: 460px; object-fit: cover; border-radius: 16px; }
.faqs-cta-box{
	position: absolute; left: 25px; bottom: 25px; right: 25px; z-index: 2;
	padding: 22px; border-radius: var(--radius);
	background: rgba(43,42,42,.6);
	-webkit-backdrop-filter: blur(30px);
	        backdrop-filter: blur(30px);
}
.faqs-cta-title{ margin: 0 0 14px; font-size: 20px; font-weight: 600; color: var(--white-color); }
.faqs-cta-box ul{ list-style: none; display: flex; flex-direction: column; gap: 8px; }
.faqs-cta-box li{ display: flex; align-items: center; gap: 10px; color: var(--white-color); word-break: break-word; }
.faqs-cta-box .ic{ width: 19px; height: 19px; color: var(--accent-color); }
.faqs-cta-box a:hover{ color: var(--accent-color); }

.faq-accordion{ display: flex; flex-direction: column; gap: 20px; height: 100%; justify-content: center; }
.accordion-item{ border-radius: var(--radius); overflow: hidden; background: var(--glass-color); -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px); }
.accordion-item summary{
	position: relative;
	display: flex; align-items: center; justify-content: space-between; gap: 20px;
	padding: 20px 24px;
	font-size: 18px; font-weight: 500; line-height: 1.35;
	color: var(--white-color);
	cursor: pointer; list-style: none;
	transition: background-color .4s ease-in-out, color .4s;
}
.accordion-item summary::-webkit-details-marker{ display: none; }
.accordion-icon{
	position: relative; flex: none;
	width: 26px; height: 26px; border-radius: 50%;
	background: var(--accent-color);
	transition: background-color .4s, transform .4s;
}
.accordion-icon::before, .accordion-icon::after{ content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 2px; background: var(--primary-color); transform: translate(-50%,-50%); transition: transform .3s; }
.accordion-icon::after{ transform: translate(-50%,-50%) rotate(90deg); }
.accordion-item[open] summary{ background: var(--accent-color); color: var(--primary-color); }
.accordion-item[open] .accordion-icon{ background: var(--primary-color); }
.accordion-item[open] .accordion-icon::before{ background: var(--accent-color); }
.accordion-item[open] .accordion-icon::after{ transform: translate(-50%,-50%) rotate(0); opacity: 0; }
.accordion-body{ padding: 20px 24px; }
.accordion-body p{ margin: 0; color: var(--text-on-dark); line-height: 1.65; }
.accordion-item[open] .accordion-body{ animation: drop .35s ease; }
@keyframes drop{ from{ opacity: 0; transform: translateY(-6px); } to{ opacity: 1; transform: none; } }

/* light variant (FAQ page, about page) */
.accordion--light .accordion-item{ background: var(--gray-color); -webkit-backdrop-filter: none; backdrop-filter: none; }
.accordion--light .accordion-item summary{ color: var(--primary-color); }
.accordion--light .accordion-body p{ color: var(--text-color); }

/************************************/
/***         22. CTA box          ***/
/************************************/

.cta-box-section{ padding: 0 0 120px; }
.bg-section + .cta-box-section, .page-header + .cta-box-section{ padding-top: 120px; }
.cta-box{
	position: relative; overflow: hidden;
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 30px;
	padding: 60px;
	border-radius: var(--radius);
	background: var(--accent-color);
}
.cta-box::after{ content: ""; position: absolute; right: -120px; top: -120px; width: 360px; height: 360px; border-radius: 50%; border: 60px solid rgba(43,42,42,.06); pointer-events: none; }
.cta-box-content{ position: relative; max-width: 680px; }
.cta-box h2{ font-size: 44px; letter-spacing: -.03em; }
.cta-box p{ margin: 16px 0 0; color: var(--primary-color); font-size: 18px; }
.cta-box-btns{ position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 15px; }

/************************************/
/***          23. Footer          ***/
/************************************/

.main-footer{ margin: 0 15px 15px; padding: 100px 0 0; border-radius: var(--radius); }
.footer-header{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 25px; padding-bottom: 50px; margin-bottom: 50px; border-bottom: 1px solid var(--dark-divider-color); }
.footer-social{ list-style: none; display: flex; flex-wrap: wrap; gap: 12px; }
.footer-social a{ display: inline-flex; align-items: center; gap: 10px; padding: 11px 16px; border-radius: 5px; background: var(--glass-color); color: var(--white-color); font-weight: 500; transition: all .4s ease-in-out; }
.footer-social a:hover{ background: var(--accent-color); color: var(--primary-color); }
.footer-social .ic{ width: 19px; height: 19px; }

.footer-talk{ height: 100%; display: flex; flex-direction: column; gap: 22px; padding: 32px; border-radius: var(--radius); background: var(--glass-color); }
.footer-talk-head{ display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.footer-talk-title{ margin: 0; font-size: 40px; font-weight: 600; letter-spacing: -.03em; line-height: 1.05; color: var(--white-color); }
.footer-talk > p{ margin: 0; color: var(--white-color); }
.footer-mail{ margin-top: auto; font-size: 22px; font-weight: 600; color: var(--accent-color); word-break: break-word; }
.footer-mail:hover{ color: var(--white-color); }

.footer-links-box{ display: flex; flex-wrap: wrap; justify-content: space-between; gap: 30px; margin-left: 5vw; }
.footer-links h2{ font-size: 20px; color: var(--white-color); margin-bottom: 24px; }
.footer-links ul{ list-style: none; display: flex; flex-direction: column; gap: 14px; }
.footer-links li{ position: relative; padding-left: 16px; color: var(--white-color); line-height: 1.4; }
.footer-links li::before{ content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-color); }
.footer-links a:hover{ color: var(--accent-color); }
.footer-contact li{ display: flex; align-items: flex-start; gap: 10px; padding-left: 0; }
.footer-contact li::before{ display: none; }
.footer-contact .ic{ width: 20px; height: 20px; color: var(--accent-color); margin-top: 1px; }
.footer-copyright{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 15px; margin-top: 60px; padding: 34px 0; border-top: 1px solid var(--dark-divider-color); }
.footer-copyright p{ margin: 0; color: var(--white-color); }
.footer-legal{ display: flex; flex-wrap: wrap; gap: 8px 26px; }
.footer-legal a{ color: var(--white-color); }
.footer-legal a:hover{ color: var(--accent-color); }

/************************************/
/*** 24. Inner pages              ***/
/************************************/

.image-box{ border-radius: var(--radius); overflow: hidden; position: relative; }
.image-box img{ width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3.4; }
.image-tag{ position: absolute; left: 20px; bottom: 20px; z-index: 2; padding: 10px 14px; border-radius: 6px; background: var(--accent-color); color: var(--primary-color); font-family: var(--mono-font); font-size: 13px; }
.lead{ font-size: 19px; font-weight: 500; color: var(--primary-color); line-height: 1.55; }
.highlight-box{ margin: 0 0 1.4em; padding: 20px 24px; border-left: 4px solid var(--accent-color); border-radius: 0 var(--radius) var(--radius) 0; background: var(--gray-color); color: var(--primary-color); line-height: 1.6; }
.bg-gray .highlight-box{ background: var(--white-color); }

.feature-card{
	height: calc(100% - 30px);
	margin-bottom: 30px;
	padding: 36px;
	border-radius: var(--radius);
	background: var(--gray-color);
	transition: transform .4s ease-in-out, background-color .4s;
}
.feature-card .icon-box{ margin-bottom: 30px; }
.feature-card .icon-box.num{ font-weight: 700; font-size: 18px; }
.feature-card h3{ font-size: 21px; }
.feature-card p{ margin: 12px 0 0; line-height: 1.6; }
.feature-card .check-list{ margin-top: 22px; gap: 12px; }
.feature-card .check-list li{ font-size: 15px; }
.feature-card:hover{ transform: translateY(-5px); }
.feature-card:hover .icon-box::before{ transform: scale(1); }
.bg-gray .feature-card{ background: var(--white-color); }
.dark-section .feature-card{ background: var(--glass-color); }
.dark-section .feature-card p{ color: var(--text-on-dark); }
.dark-section .feature-card .check-list li{ color: var(--white-color); }

.stat-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 30px; }
.stat-item{ padding: 32px 28px; border-radius: var(--radius); background: var(--gray-color); }
.stat-item .stat-num{ display: block; font-size: 46px; font-weight: 700; line-height: 1; letter-spacing: -.03em; color: var(--primary-color); }
.stat-item .stat-label{ display: block; margin-top: 12px; line-height: 1.4; }
.dark-section .stat-item{ background: var(--glass-color); }
.dark-section .stat-item .stat-num{ color: var(--accent-color); }

.habit-list{ list-style: none; display: flex; flex-direction: column; gap: 16px; margin-top: 30px; }
.habit-list li{ padding: 20px 22px 20px 56px; position: relative; border-radius: var(--radius); background: var(--gray-color); line-height: 1.55; }
.habit-list li::before{ content: ""; position: absolute; left: 22px; top: 22px; width: 20px; height: 20px; background: var(--accent-hover); -webkit-mask: var(--check) center / contain no-repeat; mask: var(--check) center / contain no-repeat; }
.habit-list strong{ color: var(--primary-color); }

.tech-group-head{ display: flex; align-items: center; gap: 16px; margin: 0 0 30px; }
.tech-group-head h2{ font-size: 28px; }
.tech-group-head .line{ flex: 1; height: 1px; background: var(--divider-color); }
.tech-group-head .count{ width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--accent-color); color: var(--primary-color); font-weight: 700; font-size: 14px; }
.tech-group + .tech-group{ margin-top: 50px; }
.tech-card{ height: calc(100% - 30px); margin-bottom: 30px; padding: 30px; border-radius: var(--radius); background: var(--gray-color); transition: transform .4s; }
.tech-card:hover{ transform: translateY(-4px); }
.tech-card-head{ display: flex; align-items: center; gap: 16px; }
.tech-card-head .icon-box{ width: 56px; height: 56px; background: var(--white-color); }
.tech-card-head .icon-box svg{ width: 26px; height: 26px; }
.tech-card-head .icon-box .letter{ font-weight: 700; font-size: 20px; }
.tech-card h3{ font-size: 20px; }
.tech-card-meta{ display: block; margin-top: 3px; font-size: 14px; }
.tech-core{ margin-left: auto; padding: 5px 9px; border-radius: 4px; background: var(--primary-color); color: var(--accent-color); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.tech-card p{ margin: 18px 0 0; font-size: 15px; line-height: 1.6; }
.skill-bar{ display: flex; align-items: center; gap: 14px; margin-top: 20px; }
.skill-bar-track{ flex: 1; height: 6px; border-radius: 6px; background: var(--white-color); overflow: hidden; }
.skill-bar-fill{ display: block; height: 100%; width: 0; border-radius: 6px; background: var(--accent-color); transition: width 1.2s cubic-bezier(.2,.7,.2,1); }
.skill-bar-value{ font-weight: 700; color: var(--primary-color); font-size: 15px; }

.store-more{ text-align: center; margin-top: 20px; }
.store-more-count{ margin: 0 0 18px; }
.store-more.is-loading .btn-default{ opacity: .7; pointer-events: none; }
.note-line{ display: flex; align-items: center; justify-content: center; gap: 10px; margin: 40px 0 0; font-weight: 500; color: var(--primary-color); }
.note-line .ic{ width: 20px; height: 20px; color: var(--accent-hover); }

.product-detail-image{ border-radius: var(--radius); overflow: hidden; background: var(--primary-color); }
.product-detail-image img{ width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.product-badge-inline{ display: inline-block; margin-bottom: 15px; padding: 7px 12px; border-radius: 4px; background: var(--accent-color); color: var(--primary-color); font-size: 14px; font-weight: 600; }
.product-title{ font-size: 46px; letter-spacing: -.03em; margin-bottom: 28px; }
.detail-h{ font-size: 26px; margin: 45px 0 18px; }
.prose-detail p{ line-height: 1.75; }
.include-card{ position: sticky; top: 110px; padding: 36px; border-radius: var(--radius); }
.include-card h2{ font-size: 24px; color: var(--white-color); margin-bottom: 24px; }
.include-card .check-list{ gap: 14px; margin-bottom: 30px; }
.offer{ padding: 24px; border-radius: var(--radius); background: var(--glass-color); }
.offer-head{ display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.offer-label{ font-size: 14px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-on-dark); }
.offer-off{ padding: 5px 9px; border-radius: 4px; background: var(--accent-color); color: var(--primary-color); font-weight: 700; font-size: 14px; }
.offer-price{ display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 14px 0 0; }
.offer-now{ font-size: 48px; font-weight: 700; letter-spacing: -.03em; line-height: 1; color: var(--accent-color); }
.offer-now .cur, .offer-alt .cur{ font-size: .6em; margin-left: 3px; }
.offer-alt{ font-size: 22px; font-weight: 600; color: var(--white-color); }
.offer-old{ margin: 10px 0 0; color: var(--text-on-dark); display: flex; flex-wrap: wrap; gap: 8px; }
.offer-was{ text-transform: lowercase; }
.offer-save{ display: flex; align-items: center; gap: 10px; margin: 16px 0 0; padding-top: 16px; border-top: 1px solid var(--dark-divider-color); color: var(--white-color); }
.offer-save .ic{ width: 18px; height: 18px; color: var(--accent-color); }
.offer-save strong{ color: var(--accent-color); }
.offer-actions{ display: flex; flex-direction: column; gap: 12px; margin-top: 26px; }
.offer-actions .btn-default{ justify-content: center; }
.offer-trust{ list-style: none; display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
.offer-trust li{ display: flex; gap: 10px; font-size: 14px; color: var(--text-on-dark); line-height: 1.5; }
.offer-trust .ic{ width: 18px; height: 18px; color: var(--accent-color); margin-top: 2px; }
.back-link{ display: inline-flex; align-items: center; gap: 8px; margin-top: 50px; font-weight: 600; color: var(--primary-color); }
.back-link:hover{ color: var(--accent-hover); }

/************************************/
/***    25. Contact & forms       ***/
/************************************/

.contact-form{ height: 100%; padding: 44px; border-radius: var(--radius); background: var(--gray-color); }
.form-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-group{ display: flex; flex-direction: column; gap: 8px; }
.form-group.full{ grid-column: 1 / -1; }
.form-group label{ font-weight: 500; color: var(--primary-color); font-size: 15px; }
.form-group .req{ color: var(--error-color); }
.form-control{
	width: 100%;
	padding: 15px 18px;
	border: 1px solid transparent;
	border-radius: 6px;
	background: var(--white-color);
	color: var(--primary-color);
	font-size: 16px;
	outline: none;
	transition: border-color .3s, box-shadow .3s;
}
.form-control::placeholder{ color: #9a9999; }
.form-control:focus{ border-color: var(--accent-color); box-shadow: 0 0 0 4px rgba(237,201,44,.25); }
textarea.form-control{ resize: vertical; min-height: 150px; }
.contact-form .btn-default{ margin-top: 26px; }
.hp-field{ position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.product-note{ display: flex; align-items: center; gap: 10px; margin-bottom: 22px; padding: 14px 16px; border-radius: 6px; background: rgba(237,201,44,.25); color: var(--primary-color); }
.product-note .ic{ width: 18px; height: 18px; }

.contact-info{ height: 100%; padding: 44px; border-radius: var(--radius); display: flex; flex-direction: column; }
.contact-info h2{ font-size: 28px; color: var(--white-color); margin-bottom: 26px; }
.contact-info-item{ display: flex; align-items: center; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--dark-divider-color); }
.contact-info-item:first-of-type{ padding-top: 0; }
.contact-info-item .icon-box{ width: 50px; height: 50px; }
.contact-info-item:hover .icon-box::before{ transform: scale(1); }
.contact-info-label{ display: block; font-size: 14px; color: var(--text-on-dark); }
.contact-info-value{ display: block; font-size: 18px; font-weight: 600; color: var(--white-color); word-break: break-word; }
a.contact-info-item:hover .contact-info-value{ color: var(--accent-color); }
.contact-info-note{ display: flex; align-items: center; gap: 10px; margin: auto 0 0; padding-top: 26px; color: var(--text-on-dark); font-size: 15px; }
.contact-info-note .ic{ width: 18px; height: 18px; color: var(--accent-color); }
.map-frame{ margin-top: 30px; border-radius: var(--radius); overflow: hidden; height: 440px; background: var(--gray-color); }
.map-frame iframe{ width: 100%; height: 100%; border: 0; filter: grayscale(1) contrast(1.05); transition: filter .5s; }
.map-frame:hover iframe{ filter: none; }

/************************************/
/***        26. FAQ page          ***/
/************************************/

.faq-index{ position: sticky; top: 110px; padding: 32px; border-radius: var(--radius); }
.faq-index h2{ font-size: 22px; color: var(--white-color); margin-bottom: 18px; }
.faq-index ol{ list-style: none; display: flex; flex-direction: column; }
.faq-index a{ display: flex; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--dark-divider-color); color: var(--text-on-dark); line-height: 1.45; font-size: 15px; transition: all .3s; }
.faq-index li:last-child a{ border-bottom: 0; }
.faq-index a:hover{ color: var(--accent-color); padding-left: 6px; }
.faq-index .n{ flex: none; color: var(--accent-color); font-weight: 600; }
.faq-page-list .accordion-item{ scroll-margin-top: 110px; }
.faq-page-list summary h2{ font-size: 18px; font-weight: 500; letter-spacing: -.01em; line-height: 1.4; color: inherit; }

/************************************/
/***         27. Legal            ***/
/************************************/

.legal-head{ margin-bottom: 50px; }
.legal-updated{ display: inline-flex; align-items: center; gap: 8px; margin: 18px 0 0; padding: 8px 14px; border-radius: 5px; background: var(--gray-color); font-size: 14px; font-weight: 500; color: var(--primary-color); }
.legal-updated .ic{ width: 16px; height: 16px; }
.legal-toc{ position: sticky; top: 110px; padding: 30px; border-radius: var(--radius); }
.legal-toc h2{ font-size: 20px; color: var(--white-color); margin-bottom: 14px; }
.legal-toc ol{ padding-left: 20px; display: flex; flex-direction: column; gap: 10px; }
.legal-toc li{ color: var(--accent-color); }
.legal-toc a{ color: var(--text-on-dark); line-height: 1.45; font-size: 15px; }
.legal-toc a:hover{ color: var(--accent-color); }
.legal-section{ padding: 34px 0; border-bottom: 1px solid var(--divider-color); scroll-margin-top: 110px; }
.legal-section:first-child{ padding-top: 0; }
.legal-section h2{ font-size: 26px; margin-bottom: 18px; }
.legal-section p{ line-height: 1.75; }
.prose-list{ list-style: none; display: flex; flex-direction: column; gap: 10px; margin: 0 0 1.4em; }
.prose-list li{ position: relative; padding-left: 22px; line-height: 1.65; }
.prose-list li::before{ content: ""; position: absolute; left: 2px; top: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-color); }
.legal-cta{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; margin-top: 40px; padding: 30px; border-radius: var(--radius); background: var(--accent-color); }
.legal-cta p{ margin: 0; max-width: 520px; font-weight: 500; color: var(--primary-color); }

/************************************/
/***   28. Alqor, docs & hub      ***/
/************************************/

.alq-logo{ height: 56px; width: auto; margin-bottom: 26px; }
.kw-list{ display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 0; }
.kw-list code{ padding: 7px 11px; border-radius: 5px; background: var(--primary-color); color: var(--accent-color); font-size: 14px; }

.alq-code{ margin: 0 0 20px; border-radius: var(--radius); overflow: hidden; background: #1E1D1D; box-shadow: 0 30px 60px -40px rgba(0,0,0,.6); }
.alq-code__bar{ display: flex; align-items: center; gap: 7px; padding: 12px 16px; background: #2B2A2A; border-bottom: 1px solid rgba(255,255,255,.06); }
.alq-dot{ width: 11px; height: 11px; border-radius: 50%; background: #5a5858; }
.alq-dot:nth-child(1){ background: #EDC92C; }
.alq-code__name{ margin-left: 8px; font-family: var(--mono-font); font-size: 12.5px; color: #bdbbbb; }
.alq-copy{ display: inline-flex; align-items: center; gap: 6px; margin-left: 12px; padding: 5px 10px; border-radius: 6px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); color: #d6d4d1; font-family: var(--default-font); font-size: 12.5px; font-weight: 600; line-height: 1; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.alq-copy svg{ width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.alq-copy:hover{ background: var(--accent-color); border-color: var(--accent-color); color: var(--primary-color); }
.alq-copy.is-done{ background: var(--success-color); border-color: var(--success-color); color: var(--white-color); }
.alq-code__tag{ margin-left: auto; font-family: var(--mono-font); font-size: 11.5px; color: #8f8d8d; text-transform: uppercase; letter-spacing: .06em; }
.alq-code pre{ margin: 0; padding: 18px 20px; overflow-x: auto; font-size: 14px; line-height: 1.75; color: #E8E6E3; }
.alq-code--plain pre{ color: #cfd6c4; }
.t-kw{ color: #EDC92C; } .t-ty{ color: #F2A65A; } .t-st{ color: #A8D18D; } .t-fn{ color: #8EC3F0; }
.t-nu{ color: #F2A65A; } .t-bo{ color: #E79AC0; } .t-cm{ color: #7C7A78; font-style: italic; } .t-ar{ color: #9B9998; }

.alq-target{ display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 50px; align-items: center; padding: 50px 0; border-top: 1px solid var(--divider-color); }
.alq-target:first-child{ border-top: 0; padding-top: 0; }
.alq-target.is-rev .alq-target-info{ order: 2; }
.alq-target-n{ display: inline-flex; width: 50px; height: 50px; align-items: center; justify-content: center; border-radius: 50%; background: var(--accent-color); color: var(--primary-color); font-weight: 700; margin-bottom: 20px; }
.alq-target h3{ font-size: 30px; }
.alq-target p{ margin: 14px 0 0; }
.chip-list{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.chip-list code{ padding: 7px 11px; border-radius: 5px; background: var(--gray-color); color: var(--primary-color); font-size: 13px; }

.alq-tool{ height: calc(100% - 30px); margin-bottom: 30px; display: flex; flex-direction: column; gap: 10px; padding: 28px; border-radius: var(--radius); background: var(--gray-color); }
.alq-tool code{ align-self: flex-start; padding: 7px 11px; border-radius: 5px; background: var(--primary-color); color: var(--accent-color); font-size: 14px; }

.os-card{
	position: relative; overflow: hidden;
	height: calc(100% - 30px); margin-bottom: 30px;
	display: flex; flex-direction: column;
	padding: 34px;
	border-radius: 18px;
	background: linear-gradient(180deg, #FFFFFF, #F6F6F6);
	border: 1px solid var(--divider-color);
	box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
	transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s, border-color .45s;
}
.os-card::before{ content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--accent-color); transform: scaleX(0); transform-origin: left; transition: transform .45s ease; }
.os-card:hover{ transform: translateY(-8px); border-color: rgba(237,201,44,.55); box-shadow: 0 40px 70px -40px rgba(43,42,42,.55); }
.os-card:hover::before{ transform: scaleX(1); }
.os-card-watermark{ position: absolute; right: -36px; bottom: -40px; width: 190px; height: 190px; color: rgba(43,42,42,.045); pointer-events: none; transition: transform .6s ease; }
.os-card-watermark svg{ width: 100%; height: 100%; }
.os-card-watermark svg *{ fill: currentColor !important; }
.os-card:hover .os-card-watermark{ transform: rotate(-8deg) scale(1.05); }
.os-card-top{ position: relative; display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 28px; }
.os-card-icon{ width: 68px; height: 68px; display: inline-flex; align-items: center; justify-content: center; border-radius: 18px; background: var(--primary-color); color: var(--white-color); transition: all .45s ease; box-shadow: 0 16px 30px -16px rgba(43,42,42,.7); }
.os-card-icon svg{ width: 32px; height: 32px; }
.os-card:hover .os-card-icon{ background: var(--accent-color); color: var(--primary-color); }
.os-card-ver{ display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 30px; background: var(--gray-color); color: var(--primary-color); font-size: 13px; font-weight: 600; }
.os-card-ver::before{ content: ""; width: 7px; height: 7px; border-radius: 50%; background: #2E9E5B; box-shadow: 0 0 0 3px rgba(46,158,91,.18); }
.os-card h3{ position: relative; font-size: 27px; }
.os-card-label{ position: relative; margin-top: 18px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #8a8989; }
.os-card-chips{ position: relative; display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 30px; }
.os-card-chips span{ padding: 7px 11px; border-radius: 7px; background: var(--gray-color); color: var(--primary-color); font-size: 13.5px; font-weight: 500; }
.os-card-btn{ position: relative; margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 16px; border-radius: 10px; background: var(--primary-color); color: var(--white-color); font-weight: 600; transition: all .4s ease; }
.os-card:hover .os-card-btn{ background: var(--accent-color); color: var(--primary-color); }
.dl-ic{ width: 18px; height: 18px; flex: none; }
.dl-note{ margin: 10px 0 0; text-align: center; }
.dl-note code{ padding: 2px 6px; border-radius: 4px; background: var(--white-color); color: var(--primary-color); font-size: .9em; }
.start-box{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; margin-top: 40px; padding: 36px; border-radius: var(--radius); }
.start-box h3{ font-size: 26px; color: var(--white-color); }
.start-box p{ margin: 8px 0 0; color: var(--text-on-dark); }

/* Alqor · outline button on dark, GitHub icon in buttons */
.btn-default.btn-outline-light{ background: transparent; color: var(--white-color); box-shadow: inset 0 0 0 1px rgba(255,255,255,.55); }
.btn-default.btn-outline-light::after{ background: var(--accent-color); }
.btn-default.btn-outline-light:hover{ color: var(--primary-color); box-shadow: inset 0 0 0 1px var(--accent-color); }
.btn-gh{ display: inline-flex; align-items: center; gap: 9px; }
.gh-ic{ width: 18px; height: 18px; flex: none; position: relative; z-index: 1; }

/* Alqor · what's new in the release */
.alq-new-fix{ margin: 26px 0 0; padding: 14px 18px; border-left: 3px solid var(--accent-color); border-radius: 0 var(--radius) var(--radius) 0; background: var(--glass-color); color: var(--text-on-dark); font-size: 14.5px; line-height: 1.6; }
.alq-feat-grid{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 50px; }
.alq-feat{ position: relative; display: flex; flex-direction: column; gap: 10px; padding: 22px 22px 20px; border-radius: 12px; background: var(--glass-color); border: 1px solid var(--dark-divider-color); text-decoration: none; overflow: hidden; }
.js .alq-feat[data-anim]{ transition: opacity .8s ease, transform .5s ease, border-color .3s ease, background .3s ease; }
.alq-feat::before{ content: ""; position: absolute; left: 0; top: 0; right: 0; height: 3px; background: var(--accent-color); transform: scaleX(0); transform-origin: left; transition: transform .4s ease; }
.alq-feat:hover{ transform: translateY(-4px); border-color: rgba(237,201,44,.55); background: rgba(237,201,44,.07); }
.alq-feat:hover::before{ transform: scaleX(1); }
.alq-feat-n{ font-family: var(--mono-font); font-size: 12px; font-weight: 700; color: var(--accent-color); }
.alq-feat h3{ font-size: 19px; color: var(--white-color); }
.alq-feat code{ align-self: flex-start; max-width: 100%; padding: 6px 10px; border-radius: 6px; background: #1E1D1D; color: #E8E6E3; font-size: 13px; overflow-wrap: anywhere; }
.alq-feat-more{ margin-top: auto; padding-top: 4px; font-size: 13.5px; font-weight: 600; color: var(--text-on-dark); transition: color .3s ease; }
.alq-feat:hover .alq-feat-more{ color: var(--accent-color); }
@media only screen and (max-width: 991px){ .alq-feat-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media only screen and (max-width: 575px){ .alq-feat-grid{ grid-template-columns: minmax(0, 1fr); } }

/* Alqor · open source */
.oss-repo{ margin-top: 6px; padding: 26px; border-radius: var(--radius); background: var(--glass-color); border: 1px solid var(--dark-divider-color); }
.oss-repo-name{ display: inline-flex; align-items: center; gap: 12px; color: var(--white-color); font-family: var(--mono-font); font-size: 16px; text-decoration: none; overflow-wrap: anywhere; }
.oss-repo-name .gh-ic{ width: 26px; height: 26px; }
.oss-repo-name strong{ color: var(--accent-color); }
.oss-repo-name:hover span{ text-decoration: underline; }
.oss-repo-meta{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 22px 0 24px; padding: 18px 0 0; border-top: 1px solid var(--dark-divider-color); }
.oss-repo-meta dt{ font-size: 12.5px; color: var(--text-on-dark); }
.oss-repo-meta dd{ margin: 4px 0 0; font-weight: 700; color: var(--white-color); }
.oss-join{ margin: 34px 0 20px; font-size: 22px; color: var(--white-color); }
.oss-grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.oss-card{ display: block; padding: 24px; border-radius: var(--radius); background: var(--glass-color); border: 1px solid var(--dark-divider-color); text-decoration: none; transition: transform .3s ease, border-color .3s ease, background .3s ease; }
.oss-card .icon-box{ width: 46px; height: 46px; margin-bottom: 16px; }
.oss-card .ic{ width: 21px; height: 21px; }
.oss-card h4{ font-family: var(--heading-font); font-size: 18px; color: var(--white-color); }
.oss-card p{ margin: 8px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--text-on-dark); }
.oss-card:hover{ transform: translateY(-4px); border-color: var(--accent-color); background: rgba(237,201,44,.08); }
.oss-card:hover .icon-box::before{ transform: scale(1); }

@media only screen and (max-width: 767px){
	.oss-grid{ grid-template-columns: minmax(0, 1fr); }
	.oss-repo{ padding: 20px; }
	.oss-repo-meta{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* docs */
.doc-layout{ display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 50px; align-items: start; }
.doc-toc{ position: sticky; top: 110px; padding: 26px; border-radius: var(--radius); max-height: calc(100vh - 140px); overflow-y: auto; }
.doc-toc h2{ font-size: 18px; color: var(--white-color); margin-bottom: 12px; }
.doc-toc a{ display: block; padding: 8px 0; font-size: 15px; color: var(--text-on-dark); border-bottom: 1px solid var(--dark-divider-color); }
.doc-toc a:last-child{ border-bottom: 0; }
.doc-toc a:hover, .doc-toc a.is-active{ color: var(--accent-color); }
.doc-sec{ padding: 0 0 50px; margin-bottom: 50px; border-bottom: 1px solid var(--divider-color); scroll-margin-top: 110px; }
.doc-sec h2{ display: flex; align-items: center; gap: 14px; font-size: 30px; margin-bottom: 20px; }
.doc-sec h2 .n{ width: 44px; height: 44px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--accent-color); color: var(--primary-color); font-size: 17px; font-weight: 700; }
.doc-sec p{ line-height: 1.75; }
.doc-sec .alq-lead{ font-size: 18px; font-weight: 500; color: var(--primary-color); }
/* features added in 2.4 / 2.5: gold "new" badge in headings and tables, a glowing tag in the TOC */
.doc-new{ display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 5px 5px 5px 10px; border-radius: 30px; background: linear-gradient(135deg, #F7DE6A 0%, #EDC92C 55%, #D9B51A 100%); color: var(--primary-color); font-family: var(--default-font); font-size: 11.5px; font-weight: 700; line-height: 1; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 8px 18px -8px rgba(217,181,26,.85), inset 0 1px 0 rgba(255,255,255,.55); }
.doc-new svg{ width: 11px; height: 11px; flex: none; }
.doc-new b{ padding: 3px 7px; border-radius: 20px; background: var(--primary-color); color: var(--accent-color); font-family: var(--mono-font); font-size: 10.5px; font-weight: 700; letter-spacing: 0; }
.doc-sec h2 .doc-new{ margin-left: 4px; }
.doc-sec--new h2 .n{ background: var(--primary-color); color: var(--accent-color); box-shadow: 0 0 0 4px rgba(237,201,44,.25); }
.alq-table td .doc-new{ margin-left: 8px; padding: 4px 4px 4px 8px; font-size: 10.5px; vertical-align: 1px; }
.doc-toc a{ display: flex; align-items: center; justify-content: space-between; gap: 10px; }
/* sample library */
.smp-intro{ font-size: 17px; }
.smp-filter{ display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 30px; }
.smp-filter button{ padding: 9px 15px; border-radius: 30px; border: 1px solid var(--divider-color); background: var(--white-color); color: var(--primary-color); font-family: var(--default-font); font-size: 14px; font-weight: 600; cursor: pointer; transition: background .2s, border-color .2s; }
.smp-filter button small{ margin-left: 6px; font-size: 12px; color: var(--text-color); }
.smp-filter button:hover{ border-color: var(--primary-color); }
.smp-filter button[aria-pressed="true"]{ background: var(--primary-color); border-color: var(--primary-color); color: var(--accent-color); }
.smp-filter button[aria-pressed="true"] small{ color: rgba(255,255,255,.6); }
.smp{ padding: 26px 0 8px; border-top: 1px solid var(--divider-color); scroll-margin-top: 110px; }
.smp-head{ display: flex; align-items: flex-start; gap: 16px; margin-bottom: 16px; }
.smp-n{ flex: none; min-width: 42px; padding: 6px 0; border-radius: 8px; background: var(--gray-color); color: var(--primary-color); font-family: var(--mono-font); font-size: 13px; font-weight: 700; text-align: center; }
.smp-head h3{ font-size: 21px; }
.smp-head p{ margin: 4px 0 0; font-size: 15px; line-height: 1.55; }
.smp-cat{ display: inline-block; margin-top: 8px; padding: 3px 9px; border-radius: 20px; background: rgba(237,201,44,.2); color: var(--primary-color); font-size: 12px; font-weight: 600; }
.smp-out{ margin: -6px 0 20px; }
.smp-out summary{ display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 8px; background: var(--gray-color); color: var(--primary-color); font-size: 14px; font-weight: 600; cursor: pointer; list-style: none; }
.smp-out summary::-webkit-details-marker{ display: none; }
.smp-out summary::before{ content: "▸"; transition: transform .2s; }
.smp-out[open] summary::before{ transform: rotate(90deg); }
.smp-out[open] summary{ margin-bottom: 12px; }
.smp-none{ margin: -6px 0 20px; font-size: 14px; color: var(--text-color); }
.doc-toc a.is-new > span:first-child{ min-width: 0; }
.doc-new-toc{ display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 3px 8px; border-radius: 20px; border: 1px solid rgba(237,201,44,.4); background: rgba(237,201,44,.1); color: var(--accent-color); font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; }
.doc-new-toc i{ width: 6px; height: 6px; border-radius: 50%; background: var(--accent-color); box-shadow: 0 0 8px 1px rgba(237,201,44,.8); }
.doc-toc a.is-new:hover .doc-new-toc, .doc-toc a.is-new.is-active .doc-new-toc{ background: var(--accent-color); color: var(--primary-color); border-color: var(--accent-color); }
.doc-toc a.is-new:hover .doc-new-toc i, .doc-toc a.is-new.is-active .doc-new-toc i{ background: var(--primary-color); box-shadow: none; }
.alq-kbd{ padding: 2px 7px; border-radius: 4px; background: var(--gray-color); color: var(--primary-color); font-size: .88em; }
.alq-callout{ display: flex; gap: 14px; margin: 20px 0; padding: 18px 20px; border-radius: var(--radius); background: rgba(237,201,44,.18); border-left: 4px solid var(--accent-color); color: var(--primary-color); line-height: 1.65; }
.alq-callout svg{ width: 22px; height: 22px; flex: none; }
.alq-table{ width: 100%; margin: 20px 0; border-collapse: separate; border-spacing: 0; border-radius: var(--radius); overflow: hidden; background: var(--gray-color); }
.alq-table th{ text-align: left; padding: 14px 18px; background: var(--primary-color); color: var(--white-color); font-weight: 600; }
.alq-table td{ padding: 13px 18px; border-top: 1px solid var(--white-color); color: var(--primary-color); }
.alq-table code{ color: var(--primary-color); font-weight: 600; }

/* hub */
.hub-head{ text-align: center; margin-bottom: 50px; }
.hub-meta{ display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 22px; }
.hub-pill{ display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 5px; background: var(--primary-color); color: var(--white-color); font-weight: 500; font-size: 15px; }
.hub-pill .dl-ic{ color: var(--accent-color); }
.hub-os{ height: calc(100% - 30px); margin-bottom: 30px; padding: 30px; border-radius: var(--radius); background: var(--gray-color); scroll-margin-top: 110px; }
.hub-os-head{ display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.hub-os-head .os-card-icon{ margin: 0; width: 56px; height: 56px; border-radius: 14px; }
.hub-os-head h2{ font-size: 26px; }
.hub-primary{ display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; border-radius: 8px; background: var(--accent-color); color: var(--primary-color); transition: all .3s; }
.hub-primary:hover{ background: var(--primary-color); color: var(--white-color); }
.hub-primary-main{ display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; }
.hub-primary-meta{ font-size: 13.5px; opacity: .85; }
.hub-others{ margin-top: 20px; }
.hub-others-title{ display: block; margin-bottom: 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; color: var(--primary-color); }
.hub-row{ display: flex; align-items: center; gap: 10px; padding: 12px 0; border-top: 1px solid var(--divider-color); color: var(--primary-color); font-size: 15px; }
.hub-row:hover{ color: var(--accent-hover); }
.hub-row-l{ flex: 1; }
.hub-row-s{ font-size: 13px; color: var(--text-color); white-space: nowrap; }
.hub-box{ height: calc(100% - 30px); margin-bottom: 30px; padding: 30px; border-radius: var(--radius); background: var(--gray-color); }
.hub-box h3{ font-size: 22px; margin-bottom: 12px; }


/* page intros: h1 inside content sections is smaller than the hero h1 */
.section .section-title h1{ font-size: 54px; }
.hero .section-title h1{ font-size: 64px; }
.hl{ background: linear-gradient(transparent 62%, rgba(237,201,44,.7) 62%); padding: 0 .08em; }
.about-photo img{ aspect-ratio: 1 / 1.05; }
.about-photo-2 img, .why-photo img{ aspect-ratio: 1 / .9; }
.feature-card--sm{ padding: 28px; }
.feature-card--sm .icon-box{ margin-bottom: 20px; width: 48px; height: 48px; }
.feature-card--sm h3{ font-size: 18px; }
.feature-card--sm p{ font-size: 15px; }
.alq-hero-code .alq-code:last-child{ margin-bottom: 0; }
.hub-head{ text-align: center; margin-bottom: 50px; }
.hub-head .alq-logo{ margin: 0 auto 26px; }
.hub-head .section-title{ margin-bottom: 0; }
.bg-gray .alq-tool{ background: var(--white-color); }
.hub-box p{ margin: 0 0 12px; }
.error-page{ padding: 230px 0 140px; }
.error-code{ margin: 0 0 6px; font-size: 150px; font-weight: 700; line-height: 1; letter-spacing: -.05em; color: var(--accent-color); }
.error-text{ max-width: 560px; margin: 18px auto 34px; color: var(--text-on-dark); font-size: 18px; }
.section-spacer{ height: 120px; }


/* career timeline (About page) */
.career-steps{ list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; position: relative; }
.career-steps::before{ content: ""; position: absolute; left: 4%; right: 4%; top: 57px; height: 2px; background: repeating-linear-gradient(90deg, var(--accent-hover) 0 6px, transparent 6px 12px); opacity: .6; }
.career-item{
	position: relative;
	display: flex; flex-direction: column;
	padding: 30px 24px 28px;
	border-radius: 14px;
	background: var(--white-color);
	border: 1px solid transparent;
	transition: transform .4s ease, border-color .4s, box-shadow .4s;
}
.career-item:hover{ transform: translateY(-6px); border-color: rgba(237,201,44,.6); box-shadow: 0 30px 50px -35px rgba(43,42,42,.45); }
.career-item:hover .icon-box::before{ transform: scale(1); }
.career-head{ display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 26px; }
.career-year{ font-family: var(--heading-font); font-size: 22px; font-weight: 800; color: var(--primary-color); letter-spacing: -.01em; }
.career-item h3{ font-size: 19px; line-height: 1.25; }
.career-tech{ margin: 10px 0 0; padding-bottom: 16px; border-bottom: 1px solid var(--divider-color); font-size: 13.5px; font-weight: 500; line-height: 1.5; color: #8C6E00; }
.career-points{ list-style: none; display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.career-points li{ position: relative; padding-left: 18px; font-size: 14.5px; line-height: 1.5; }
.career-points li::before{ content: ""; position: absolute; left: 0; top: 8px; width: 7px; height: 7px; border-radius: 2px; background: var(--accent-color); transform: rotate(45deg); }
.career-item:last-child{ background: var(--primary-color); }
.career-item:last-child h3, .career-item:last-child .career-year{ color: var(--white-color); }
.career-item:last-child .career-points li{ color: var(--text-on-dark); }
.career-item:last-child .career-tech{ color: var(--accent-color); border-color: var(--dark-divider-color); }
.career-note{ max-width: 820px; margin: 50px auto 0; padding: 22px 28px; border-radius: 12px; background: var(--white-color); border-left: 4px solid var(--accent-color); text-align: center; font-size: 17px; font-weight: 500; line-height: 1.6; color: var(--primary-color); }
@media only screen and (max-width: 1199px){
	.career-steps{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.career-steps::before{ display: none; }
}
@media only screen and (max-width: 991px){ .career-steps{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media only screen and (max-width: 767px){
	.career-steps{ grid-template-columns: 1fr; }
	.career-note{ margin-top: 30px; padding: 18px 20px; font-size: 16px; text-align: left; }
}


/* SEO section: before/after traffic card */
.seo-points{ list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 22px; }
.seo-points li{ position: relative; padding-left: 30px; color: var(--primary-color); font-weight: 500; line-height: 1.45; }
.seo-points li::before{ content: ""; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; background: var(--accent-hover); -webkit-mask: var(--check) center / contain no-repeat; mask: var(--check) center / contain no-repeat; }
.seo-card{ position: relative; margin-left: 20px; padding: 32px; border-radius: 20px; box-shadow: 0 50px 90px -50px rgba(43,42,42,.8); overflow: hidden; }
.seo-card-head{ display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.seo-card-label{ margin: 0; font-size: 14px; font-weight: 500; text-transform: uppercase; letter-spacing: .07em; color: var(--text-on-dark); }
.seo-card-value{ margin: 6px 0 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.seo-card-value span{ font-family: var(--heading-font); font-size: 48px; font-weight: 800; line-height: 1; color: var(--white-color); font-variant-numeric: tabular-nums; transition: color .5s; }
.seo-card-value small{ font-size: 15px; color: var(--text-on-dark); }
[data-mode="after"] .seo-card-value span{ color: var(--accent-color); }
.seo-toggle{ display: inline-flex; padding: 4px; border-radius: 40px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.1); }
.seo-toggle button{ padding: 9px 18px; border-radius: 40px; color: var(--text-on-dark); font-size: 14px; font-weight: 600; transition: all .3s; }
.seo-toggle button[aria-pressed="true"]{ background: var(--accent-color); color: var(--primary-color); }
.seo-growth{
	position: absolute; right: 32px; top: 96px;
	padding: 7px 12px; border-radius: 30px;
	background: rgba(46,158,91,.18); color: #7BD99E;
	font-weight: 700; font-size: 15px;
	opacity: 0; transform: translateY(8px) scale(.9);
	transition: opacity .5s .9s, transform .5s .9s;
}
[data-mode="after"] .seo-growth{ opacity: 1; transform: none; }
[data-mode="before"] .seo-growth{ transition-delay: 0s; }
.seo-chart{ display: block; width: 100%; height: auto; margin-top: 26px; overflow: visible; }
.seo-grid{ stroke: rgba(255,255,255,.08); stroke-width: 1; }
.seo-axis{ fill: rgba(255,255,255,.45); font-family: var(--default-font); font-size: 12px; }
.seo-line{ fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
.seo-line--before{ stroke: rgba(255,255,255,.75); stroke-dashoffset: 0; transition: stroke .5s, opacity .5s; }
.seo-line--after{ stroke: var(--accent-color); stroke-dashoffset: 1; transition: stroke-dashoffset 1.8s cubic-bezier(.45,.05,.2,1); filter: drop-shadow(0 6px 12px rgba(237,201,44,.35)); }
.seo-area{ opacity: 0; transition: opacity .9s; }
.seo-area--before{ fill: rgba(255,255,255,.07); }
.seo-area--after{ fill: url(#seo-area); }
.seo-pts circle{ stroke-width: 2.2; opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.3); transition: opacity .3s, transform .3s; }
.seo-pts--before circle{ fill: #2B2A2A; stroke: rgba(255,255,255,.85); }
.seo-pts--after circle{ fill: #2B2A2A; stroke: var(--accent-color); }
[data-mode="before"] .seo-area--before{ opacity: 1; }
[data-mode="before"] .seo-pts--before circle{ opacity: 1; transform: none; transition-delay: calc(var(--d) * .6s); }
[data-mode="after"] .seo-pts--after circle{ opacity: 1; transform: none; transition-delay: calc(var(--d) * 1.6s + .15s); }
.seo-dot{ opacity: 0; transition: opacity .4s; }
.seo-dot--after{ fill: var(--accent-color); stroke: rgba(237,201,44,.35); stroke-width: 10; }
[data-mode="after"] .seo-line--after{ stroke-dashoffset: 0; }
[data-mode="after"] .seo-line--before{ stroke: rgba(255,255,255,.2); stroke-dasharray: .006 .012; }
[data-mode="after"] .seo-area--after{ opacity: 1; transition-delay: .7s; }
[data-mode="after"] .seo-dot--after{ opacity: 1; transition-delay: 1.8s; animation: seo-pulse 2s 2s ease-in-out infinite; }
@keyframes seo-pulse{ 50%{ stroke-width: 16; stroke: rgba(237,201,44,.15); } }
.seo-kpis{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
.seo-kpi{ padding: 16px 18px; border-radius: 12px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); }
.seo-kpi-num{ display: block; font-family: var(--heading-font); font-size: 30px; font-weight: 800; line-height: 1; color: var(--white-color); font-variant-numeric: tabular-nums; transition: color .5s; }
[data-mode="after"] .seo-kpi-num{ color: var(--accent-color); }
.seo-kpi-label{ display: block; margin-top: 8px; font-size: 13.5px; color: var(--text-on-dark); }
@media only screen and (max-width: 991px){ .seo-card{ margin: 40px 0 0; } }
@media only screen and (max-width: 767px){
	.seo-points{ grid-template-columns: 1fr; }
	.seo-card{ padding: 22px 18px; }
	.seo-card-value span{ font-size: 38px; }
	.seo-growth{ position: static; display: inline-block; margin-top: 12px; }
	.seo-kpis{ gap: 8px; }
	.seo-kpi{ padding: 12px; }
	.seo-kpi-num{ font-size: 22px; }
	.seo-kpi-label{ font-size: 12px; }
}
@media (prefers-reduced-motion: reduce){
	.seo-line--after, .seo-area, .seo-growth, .seo-dot, .seo-pts circle{ transition: none; }
	[data-mode="after"] .seo-dot--after{ animation: none; }
}

/* Home · MQL5 / MetaTrader 5 */
.mql-points{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.mql-point{ position: relative; overflow: hidden; display: flex; align-items: flex-start; gap: 14px; padding: 18px 18px 18px 16px; border-radius: 12px; background: var(--white-color); border: 1px solid var(--divider-color); box-shadow: 0 18px 30px -26px rgba(43,42,42,.45); transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
.mql-point::before{ content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent-color); transform: scaleY(0); transform-origin: top; transition: transform .35s ease; }
.mql-point .icon-box{ width: 42px; height: 42px; }
.mql-point .ic{ width: 20px; height: 20px; }
.mql-point-text{ display: flex; flex-direction: column; gap: 4px; padding-right: 18px; line-height: 1.4; }
.mql-point-text strong{ font-family: var(--heading-font); font-size: 16.5px; font-weight: 700; color: var(--primary-color); }
.mql-point-text small{ font-size: 14px; color: var(--text-color); }
.mql-point-n{ position: absolute; top: 12px; right: 14px; font-family: var(--mono-font); font-size: 11.5px; font-weight: 700; color: rgba(43,42,42,.28); transition: color .3s ease; }
.mql-point:hover{ transform: translateY(-3px); border-color: rgba(237,201,44,.7); box-shadow: 0 24px 40px -28px rgba(43,42,42,.55); }
.mql-point:hover::before{ transform: scaleY(1); }
.mql-point:hover .icon-box::before{ transform: scale(1); }
.mql-point:hover .mql-point-n{ color: var(--accent-hover); }
.js .mql-point[data-anim]{ transition: opacity .8s ease, transform .5s ease, border-color .3s ease, box-shadow .3s ease; }
@media only screen and (min-width: 992px){
	/* both columns stretch; the buttons sit on the price panel's bottom line */
	.mql-row{ align-items: stretch; }
	.mql-row > [class*="col-"]{ display: flex; flex-direction: column; }
	.mql-row .mql-terminal{ flex: 1 1 auto; display: flex; flex-direction: column; }
	.mql-row .mql-chart{ margin: auto 0; }
}
.mql-actions{ margin-top: 40px; }
@media only screen and (min-width: 992px){ .mql-row .mql-actions{ margin-top: auto; padding-top: 30px; } }
.mql-terminal{ position: relative; overflow: hidden; padding: 20px 22px 18px; border-radius: 16px; box-shadow: 0 40px 70px -45px rgba(0,0,0,.65); }
.mql-terminal-bar{ display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; font-family: var(--mono-font); font-size: 12.5px; }
.mql-sym{ color: var(--white-color); font-weight: 700; font-size: 14px; }
.mql-sym em{ font-style: normal; font-weight: 400; color: var(--text-on-dark); }
.mql-badge{ padding: 4px 9px; border-radius: 5px; background: rgba(237,201,44,.14); color: var(--accent-color); }
.mql-live{ margin-left: auto; display: inline-flex; align-items: center; gap: 7px; color: #6fd99a; letter-spacing: .08em; }
.mql-live i{ width: 8px; height: 8px; border-radius: 50%; background: #2fd07a; box-shadow: 0 0 0 0 rgba(47,208,122,.6); animation: mql-pulse 1.8s infinite; }
@keyframes mql-pulse{ 70%{ box-shadow: 0 0 0 9px rgba(47,208,122,0); } 100%{ box-shadow: 0 0 0 0 rgba(47,208,122,0); } }
.mql-chart{ display: block; width: 100%; height: auto; overflow: visible; }
.mql-grid{ stroke: rgba(255,255,255,.06); stroke-dasharray: 3 5; }
.mql-candle line{ stroke-width: 1.4; }
.mql-candle.is-up line{ stroke: #EDC92C; }
.mql-candle.is-up rect{ fill: #EDC92C; }
.mql-candle.is-down line{ stroke: #8f8d8d; }
.mql-candle.is-down rect{ fill: #5d5b5b; }
.mql-ma{ fill: none; stroke: #ffffff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .85; stroke-dasharray: 1; stroke-dashoffset: 0; }
.mql-price-line{ stroke: rgba(237,201,44,.55); stroke-dasharray: 4 4; }
.mql-mark path{ fill: currentColor; }
.mql-mark text{ font-family: var(--mono-font); font-size: 11px; font-weight: 700; fill: currentColor; }
.mql-mark--buy{ color: #2fd07a; }
.mql-mark--tp{ color: var(--accent-color); }
.mql-terminal-foot{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--dark-divider-color); font-family: var(--mono-font); font-size: 12px; }
.mql-terminal-foot span{ padding: 5px 9px; border-radius: 5px; background: var(--glass-color); color: var(--text-on-dark); }
.mql-terminal-foot .mql-pl{ margin-left: auto; background: rgba(47,208,122,.14); color: #6fd99a; font-weight: 700; }
/* draw-in: candles grow one after another, then the average and the marks */
.js .mql-terminal .mql-candle{ transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); opacity: 0; transition: transform .45s cubic-bezier(.2,.7,.2,1), opacity .3s; transition-delay: calc(var(--i) * 45ms + .2s); }
.js .mql-terminal.is-in .mql-candle{ transform: none; opacity: 1; }
.js .mql-terminal .mql-ma{ stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s ease 1.1s; }
.js .mql-terminal.is-in .mql-ma{ stroke-dashoffset: 0; }
.js .mql-terminal .mql-mark, .js .mql-terminal .mql-price-line{ opacity: 0; transition: opacity .5s ease 2.2s; }
.js .mql-terminal.is-in .mql-mark, .js .mql-terminal.is-in .mql-price-line{ opacity: 1; }

.mql-prices{ margin-top: 24px; margin-bottom: 0; padding: 24px 26px 10px; border-radius: 16px; background: var(--gray-color); border: 1px solid var(--divider-color); }
.mql-prices-title{ margin: 0 0 6px; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-color); }
.mql-prices ul{ list-style: none; margin: 0; padding: 0; }
.mql-prices li{ display: flex; align-items: center; gap: 12px; padding: 14px 0; }
.mql-prices li + li{ border-top: 1px solid var(--divider-color); }
.mql-ic{ width: 22px; height: 22px; flex: none; color: var(--primary-color); }
.mql-prices-label{ font-weight: 600; color: var(--primary-color); line-height: 1.4; }
.mql-prices-dots{ flex: 1; min-width: 20px; align-self: center; border-bottom: 2px dotted rgba(43,42,42,.25); transform: translateY(4px); }
.mql-prices-tag{ flex: none; white-space: nowrap; padding: 6px 12px; border-radius: 8px; background: var(--accent-color); color: var(--primary-color); font-family: var(--heading-font); font-size: 20px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; transition: transform .25s ease; }
.mql-prices li:hover .mql-prices-tag{ transform: scale(1.06); }
@media only screen and (max-width: 767px){
	.mql-points{ grid-template-columns: 1fr; }
	.mql-terminal{ padding: 16px 14px 14px; }
	.mql-prices{ padding: 20px 18px 6px; }
	.mql-prices li{ gap: 10px; }
	.mql-prices-label{ flex: 1; font-size: 15px; }
	.mql-prices-dots{ display: none; }
	.mql-prices-tag{ font-size: 18px; }
}
@media (prefers-reduced-motion: reduce){
	.js .mql-terminal .mql-candle, .js .mql-terminal .mql-ma, .js .mql-terminal .mql-mark, .js .mql-terminal .mql-price-line{ transition: none; }
	.mql-live i{ animation: none; }
}

/************************************/
/*** 29. Widgets & animations     ***/
/************************************/

.toasts{ position: fixed; right: 20px; bottom: 20px; z-index: 300; display: flex; flex-direction: column; gap: 10px; }
.toast{ max-width: 360px; padding: 14px 18px; border-radius: 8px; background: var(--primary-color); color: var(--white-color); box-shadow: 0 20px 40px -20px rgba(0,0,0,.5); border-left: 4px solid var(--accent-color); animation: toast-in .35s ease; }
.toast.is-success{ border-left-color: var(--success-color); }
.toast.is-error{ border-left-color: var(--error-color); }
@keyframes toast-in{ from{ opacity: 0; transform: translateY(12px); } }

.to-top{
	position: fixed; right: 22px; bottom: 22px; z-index: 90;
	width: 48px; height: 48px;
	display: flex; align-items: center; justify-content: center;
	border-radius: 50%;
	background: var(--accent-color); color: var(--primary-color);
	opacity: 0; visibility: hidden; transform: translateY(10px);
	transition: all .35s ease-in-out;
	box-shadow: 0 14px 30px -14px rgba(0,0,0,.5);
}
.to-top svg{ width: 20px; height: 20px; }
.to-top.is-visible{ opacity: 1; visibility: visible; transform: none; }
.to-top:hover{ background: var(--primary-color); color: var(--accent-color); }

.cursor-dot{
	position: fixed; left: 0; top: 0; z-index: 400;
	width: 12px; height: 12px; margin: -6px 0 0 -6px;
	border-radius: 50%;
	background: var(--accent-color);
	pointer-events: none;
	mix-blend-mode: difference;
	transition: width .25s, height .25s, margin .25s, opacity .25s;
	opacity: 0;
}
.cursor-dot.is-on{ opacity: 1; }

/* reveal on scroll ("fadeInUp") */
.js [data-anim]{ opacity: 0; transform: translateY(30px); transition: opacity .8s ease, transform .8s ease; }
.js [data-anim].is-in{ opacity: 1; transform: none; }
.js .section-title [data-anim]:nth-child(2){ transition-delay: .1s; }
.js .section-title [data-anim]:nth-child(3){ transition-delay: .2s; }

@media (prefers-reduced-motion: reduce){
	.js [data-anim]{ opacity: 1; transform: none; transition: none; }
	.scrolling-content, .scrolling-content .spark, .about-review-box, .alqor-chip, .page-header::before, .page-header::after{ animation: none; }
	.alqor-window{ transform: none; }
	html{ scroll-behavior: auto; }
}

/************************************/
/***       30. Responsive         ***/
/************************************/

@media only screen and (max-width: 1199px){
	.nav-list{ gap: 0; }
	.nav-item > a, .submenu-toggle{ padding: 12px 7px; font-size: 15px; }
	.header-btn{ display: none; }
	.process-steps{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.process-item::after{ display: none; }
	.calc-types{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media only screen and (max-width: 1024px){
	.section{ padding: 90px 0; }
	.section-title h1, .hero .section-title h1{ font-size: 60px; }
	.section .section-title h1{ font-size: 46px; }
	.section-title h2{ font-size: 40px; }
	.page-header-title{ font-size: 56px; }
	.tools-list-box{ margin-left: 0; margin-top: 40px; }
	.footer-links-box{ margin-left: 0; }

	/* mobile navigation */
	.navbar-toggle{ display: flex; }
	.main-menu{
		position: absolute; left: 0; right: 0; top: calc(100% + 10px);
		text-align: left;
		padding: 10px 0;
		background: var(--accent-color);
		border-radius: var(--radius);
		box-shadow: 0 30px 60px -30px rgba(0,0,0,.6);
		visibility: hidden; opacity: 0; transform: translateY(-8px);
		transition: all .3s ease-in-out;
		max-height: calc(100vh - 130px);
		overflow-y: auto;
	}
	.main-menu.is-open{ visibility: visible; opacity: 1; transform: none; }
	.nav-list{ display: flex; flex-direction: column; align-items: stretch; }
	.nav-item{ flex-wrap: wrap; }
	.nav-item > a{ flex: 1; padding: 11px 20px; color: var(--primary-color); font-size: 16px; }
	.nav-item > a:hover, .nav-item.is-active > a{ color: var(--white-color); }
	.submenu-toggle{ flex: 1; justify-content: space-between; color: var(--primary-color); padding: 11px 20px; text-align: left; }
	.submenu-toggle:hover, .nav-item.is-active > .submenu-toggle, .nav-item.is-open > .submenu-toggle{ color: var(--white-color); }
	.nav-item.submenu:hover .submenu-toggle svg{ transform: none; }
	.nav-item.submenu.is-open .submenu-toggle svg{ transform: rotate(180deg); }
	.sub-list{ position: static; width: 100%; padding: 0 12px 8px; background: transparent; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; display: none; visibility: visible; opacity: 1; transform: none; }
	.sub-list::before, .sub-list::after{ display: none; }
	.nav-item.submenu:hover > .sub-list{ transform: none; }
	.nav-item.submenu.is-open > .sub-list{ display: block; transform: none; }
	.sub-list a{ padding: 9px 10px; color: var(--primary-color); }
	.sub-list a:hover{ background: rgba(43,42,42,.08); }
	.sub-ic{ width: 38px; height: 38px; background: rgba(43,42,42,.1); border-color: transparent; color: var(--primary-color); }
	.sub-text small{ color: rgba(43,42,42,.7); }
	.mobile-langs{ display: flex; gap: 8px; padding: 12px 20px 6px; margin-top: 6px; border-top: 1px solid rgba(43,42,42,.15); }
	.mobile-langs a{ display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 5px; color: var(--primary-color); font-weight: 600; font-size: 14px; }
	.mobile-langs a[aria-current]{ background: var(--primary-color); color: var(--white-color); }
}

@media only screen and (max-width: 991px){
	.section{ padding: 70px 0; }
	.bg-section + .cta-box-section{ padding-top: 70px; }
	.section-row{ margin-bottom: 40px; }
	.section-btn{ text-align: left; margin-top: 25px; }
	.section-title{ margin-bottom: 36px; }
	.section-title h1, .hero .section-title h1{ font-size: 46px; }
	/* long phrases may wrap here; keep room for two lines so nothing jumps */
	.hero h1 .typed{ white-space: normal; min-height: 2.3em; font-size: .8em; }
	.section .section-title h1{ font-size: 40px; }
	.mt-mobile{ margin-top: 30px; }
	.error-page{ padding: 170px 0 90px; }
	.error-code{ font-size: 110px; }
	.section-spacer{ height: 70px; }
	.section-title h2{ font-size: 34px; }
	.page-header{ padding: 170px 0 70px; }
	.page-header-title{ font-size: 44px; }
	.hero{ padding: 170px 0 70px; }
	.hero-content .section-title p{ font-size: 18px; }
	.hero-panel{ grid-template-columns: 1fr; }
	.hero-panel-stats{ border-right: 0; border-bottom: 1px solid rgba(255,255,255,.1); }
	.alqor-visual{ margin: 0 0 40px; }
	.alqor-content .section-title h2{ font-size: 34px; }
	.about-image-box{ margin: 0 0 40px; }
	.why-choose-image{ margin: 40px 0 0; }
	.why-choose-image img{ min-height: 0; aspect-ratio: 4 / 3; }
	.faqs-image-box{ margin: 0 0 30px; }
	.faqs-image-box img{ min-height: 0; aspect-ratio: 4 / 3; }
	.process-steps{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.calc{ grid-template-columns: 1fr; }
	.calc-summary{ position: static; }
	.slider-track{ grid-auto-columns: calc((100% - 30px) / 2); }
	.cta-box{ padding: 40px 30px; }
	.cta-box h2{ font-size: 34px; }
	.main-footer{ padding-top: 70px; }
	.footer-talk{ margin-bottom: 40px; }
	.footer-talk-title{ font-size: 32px; }
	.alq-target{ grid-template-columns: minmax(0, 1fr); gap: 26px; }
	.alq-target.is-rev .alq-target-info{ order: 0; }
	.doc-layout{ grid-template-columns: minmax(0, 1fr); }
	.doc-toc{ position: static; max-height: none; }
	.faq-index, .legal-toc, .include-card{ position: static; margin-bottom: 30px; }
	.product-title{ font-size: 36px; }
	.contact-info{ margin-top: 30px; }
	.image-box{ margin-bottom: 40px; }
}

@media only screen and (max-width: 767px){
	header.main-header{ top: 25px; }
	.brand-logo{ height: 42px; }
	.lang-dd{ display: none; }
	.section{ padding: 60px 0; }
	.section-title h1, .hero .section-title h1, .section .section-title h1{ font-size: 34px; }
	.hero h1 .typed{ font-size: .7em; }
	.section-title h2{ font-size: 29px; }
	.page-header-title{ font-size: 36px; }
	.breadcrumb li{ font-size: 15px; }
	.hero{ padding: 150px 0 60px; }
	.hero-stat{ padding: 22px 20px; }
	.hero-stat-num{ font-size: 40px; }
	.hero-rating, .hero-panel-side{ padding-left: 20px; padding-right: 20px; }
	.ticker-cross{ height: 140px; }
	.ticker-cross .scrolling-ticker{ padding: 14px 0; }
	.ticker-front .scrolling-content span{ font-size: 21px; }
	.ticker-back .scrolling-content span{ font-size: 17px; }
	.alqor-window{ transform: none; }
	.alqor-window pre{ font-size: 13px; }
	.alqor-visual{ padding: 20px 0 50px; }
	.alqor-chip{ padding: 10px 13px; font-size: 12px; }
	.alqor-chip strong{ font-size: 18px; }
	.alqor-chip--1{ right: 0; top: 0; }
	.alqor-chip--2{ left: 0; }
	.alqor-features li{ grid-template-columns: 48px minmax(0, 1fr); }
	.alqor-features .icon-box{ width: 48px; height: 48px; }
	.alqor-num{ display: none; }
	.os-card{ padding: 26px; }
	.scrolling-ticker{ padding: 16px 0; }
	.scrolling-content span{ font-size: 20px; }
	.scrolling-content .spark{ width: 20px; height: 20px; }
	.about-review-box{ left: 15px; bottom: 15px; padding: 15px; }
	.about-footer{ grid-template-columns: 1fr; }
	.service-item{ min-height: 0; padding: 30px; }
	.service-item .icon-box{ margin-bottom: 26px; }
	.why-choose-body{ grid-template-columns: 1fr; gap: 20px; }
	.why-choose-item{ min-height: 0; padding: 28px; }
	.tools-list-box{ flex-direction: column; gap: 20px; }
	.tools-col{ width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
	.check-list--2col{ grid-template-columns: 1fr; }
	.portfolio-item{ min-height: 400px; }
	.alqor-content .section-title h2{ font-size: 29px; }
	.process-steps{ grid-template-columns: 1fr; }
	.calc-types{ grid-template-columns: 1fr; }
	.calc-total{ font-size: 36px; }
	.calc-summary{ padding: 28px; }
	.slider-track{ grid-auto-columns: 100%; }
	.testimonial-item{ padding: 30px 24px; }
	.cta-box-section{ padding-bottom: 60px; }
	.bg-section + .cta-box-section{ padding-top: 60px; }
	.cta-box h2{ font-size: 28px; }
	.footer-header{ padding-bottom: 35px; margin-bottom: 35px; }
	.footer-links-box{ flex-direction: column; }
	.footer-copyright{ margin-top: 40px; flex-direction: column; align-items: flex-start; }
	.form-grid{ grid-template-columns: 1fr; }
	.contact-form, .contact-info{ padding: 28px 22px; }
	.map-frame{ height: 320px; }
	.stat-item .stat-num{ font-size: 38px; }
	.feature-card{ padding: 28px; }
	.doc-sec h2{ font-size: 24px; }
	.cursor-dot{ display: none; }
}

@media only screen and (max-width: 374px){
	/* very narrow phones: the longest phrase can take three lines */
	.hero h1 .typed{ min-height: 3.45em; }
}