/* =============================================================================
   e-SMART ISO — Modern UI Layer (2026)
   Author: Magic Software Thailand
   Loaded AFTER style2024.css / custom.css so it overrides the 2014 template.
   ============================================================================= */

/* Typography — full Prompt family (local files)
----------------------------------------------------------------------------- */
@font-face { font-family: 'Prompt'; src: url('../fonts/Prompt-Light.ttf') format('truetype');      font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Prompt'; src: url('../fonts/Prompt-Regular.ttf') format('truetype');    font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Prompt'; src: url('../fonts/Prompt-Medium.ttf') format('truetype');     font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Prompt'; src: url('../fonts/Prompt-SemiBold.ttf') format('truetype');   font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Prompt'; src: url('../fonts/Prompt-Bold.ttf') format('truetype');       font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Prompt'; src: url('../fonts/Prompt-ExtraBold.ttf') format('truetype');  font-weight: 800; font-style: normal; font-display: swap; }

/* Design tokens
----------------------------------------------------------------------------- */
:root {
	--brand-700: #1e40af;
	--brand-600: #1d4ed8;
	--brand-500: #2563eb;
	--brand-400: #3b82f6;
	--accent-500: #06b6d4;
	--accent-400: #22d3ee;

	--ink-900: #060b16;
	--ink-800: #0b1220;
	--ink-700: #0f172a;
	--ink-600: #1e293b;
	--ink-500: #475569;
	--ink-400: #64748b;

	--line: #e5e9f0;
	--surface: #ffffff;
	--surface-soft: #f6f8fc;

	--radius-sm: 12px;
	--radius: 18px;
	--radius-lg: 26px;
	--pill: 999px;

	--shadow-sm: 0 1px 2px rgba(15, 23, 42, .05), 0 2px 6px rgba(15, 23, 42, .05);
	--shadow-md: 0 18px 40px -22px rgba(15, 23, 42, .35);
	--shadow-lg: 0 40px 70px -30px rgba(15, 23, 42, .45);
	--shadow-brand: 0 20px 38px -18px rgba(37, 99, 235, .75);

	--grad-brand: linear-gradient(135deg, #2563eb 0%, #06b6d4 100%);
	--ease: cubic-bezier(.4, 0, .2, 1);
}

* { -webkit-tap-highlight-color: transparent; }

body,
.site-name {
	font-family: 'Prompt', 'Segoe UI', 'Helvetica Neue', sans-serif;
	font-size: 16px;
	line-height: 1.75;
	color: var(--ink-500);
	background-color: var(--surface);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 {
	font-family: 'Prompt', 'Segoe UI', sans-serif;
	color: var(--ink-700);
	line-height: 1.35;
	letter-spacing: -.01em;
}
h1 { font-size: 38px; font-weight: 700; margin-bottom: 18px; }
h2 { font-size: 24px; font-weight: 600; margin-bottom: 14px; }
h3 { font-size: 19px; font-weight: 600; }
h4 { font-size: 16px; font-weight: 600; }
p  { margin-bottom: 16px; }
a  { color: var(--brand-500); transition: color .2s var(--ease); }
a:hover, a:focus { color: var(--brand-700); text-decoration: none; }
::selection { background: rgba(37, 99, 235, .18); }

img { max-width: 100%; height: auto; }

.text-colored { color: var(--brand-500); }
.text-gradient {
	background: var(--grad-brand);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: var(--brand-500);
}

@media (min-width: 1200px) {
	.container { width: 100%; max-width: 1220px; padding-left: 24px; padding-right: 24px; }
}

/* Scroll behaviour helpers
----------------------------------------------------------------------------- */
.scroll-progress {
	position: fixed;
	top: 0; left: 0;
	height: 3px;
	width: 0;
	background-image: var(--grad-brand);
	z-index: 2000;
	transition: width .1s linear;
}

/* Reveal-on-scroll (activated by JS adding .reveal-on to <html>)
----------------------------------------------------------------------------- */
html.reveal-on .reveal-up {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity .7s var(--ease), transform .7s var(--ease);
	will-change: opacity, transform;
}
html.reveal-on .reveal-up.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	html.reveal-on .reveal-up { opacity: 1 !important; transform: none !important; transition: none; }
}

/* Sections & section headings
----------------------------------------------------------------------------- */
.section { padding: 104px 0; background-color: var(--surface); }
.section-soft { background-color: var(--surface-soft); }
.section-tight { padding: 72px 0; }

.sec-head { max-width: 860px; margin: 0 auto 56px; text-align: center; }
.sec-head.left { margin-left: 0; text-align: left; }

.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--brand-600);
	background: rgba(37, 99, 235, .09);
	border: 1px solid rgba(37, 99, 235, .18);
	border-radius: var(--pill);
	padding: 7px 16px;
	margin-bottom: 20px;
}
.dark-section .eyebrow,
.cta-band .eyebrow {
	color: #cfe6ff;
	background: rgba(255, 255, 255, .08);
	border-color: rgba(255, 255, 255, .18);
}
.sec-title {
	font-size: 42px;
	font-weight: 700;
	margin: 0 0 18px;
	letter-spacing: -.02em;
}
.sec-sub {
	font-size: 18px;
	color: var(--ink-400);
	margin: 0;
	line-height: 1.85;
}
.dark-section .sec-sub { color: rgba(255, 255, 255, .72); }
.dark-section .sec-title,
.dark-section h1, .dark-section h2, .dark-section h3, .dark-section h4 { color: #fff; }

/* Buttons
----------------------------------------------------------------------------- */
.btn-modern {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-width: 0;
	padding: 15px 30px;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.2;
	text-transform: none;
	text-decoration: none !important;
	border: 1px solid transparent;
	border-radius: var(--pill);
	transition: transform .25s var(--ease), box-shadow .25s var(--ease),
	            background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.btn-modern i { font-size: 14px; transition: transform .25s var(--ease); }
.btn-modern:hover i { transform: translateX(3px); }
.btn-modern:focus { outline: none; }

.btn-brand {
	background-image: var(--grad-brand);
	color: #fff !important;
	box-shadow: var(--shadow-brand);
}
.btn-brand:hover, .btn-brand:focus {
	color: #fff !important;
	transform: translateY(-2px);
	box-shadow: 0 26px 46px -18px rgba(37, 99, 235, .95);
}
.btn-glass {
	background-color: rgba(255, 255, 255, .1);
	border-color: rgba(255, 255, 255, .38);
	color: #fff !important;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}
.btn-glass:hover, .btn-glass:focus {
	background-color: rgba(255, 255, 255, .2);
	border-color: rgba(255, 255, 255, .6);
	transform: translateY(-2px);
}
.btn-light {
	background-color: #fff;
	color: var(--brand-600) !important;
	box-shadow: 0 20px 36px -20px rgba(0, 0, 0, .55);
}
.btn-light:hover, .btn-light:focus { transform: translateY(-2px); color: var(--brand-700) !important; }

/* Header / navigation
----------------------------------------------------------------------------- */
.header {
	padding: 12px 0;
	background-color: transparent;
	border-bottom: 1px solid transparent;
	transition: background-color .3s var(--ease), padding .3s var(--ease),
	            border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.fixed-header-on .header {
	background-color: rgba(8, 13, 26, .82);
	-webkit-backdrop-filter: saturate(170%) blur(16px);
	backdrop-filter: saturate(170%) blur(16px);
	border-bottom-color: rgba(255, 255, 255, .09);
	box-shadow: 0 20px 40px -32px rgba(0, 0, 0, .9);
	padding: 4px 0;
}
.logo { margin: 8px 10px 8px 0; }
.logo img { transition: transform .3s var(--ease); }

.main-navigation .navbar-default .navbar-nav > li > a {
	position: relative;
	font-size: 15px;
	font-weight: 500;
	color: rgba(255, 255, 255, .82);
	padding: 10px 16px;
	margin: 0 2px;
	border-radius: var(--pill);
	transition: color .25s var(--ease), background-color .25s var(--ease);
}
@media (min-width: 768px) {
	.main-navigation .navbar-default .navbar-nav > li > a { padding-top: 10px; padding-bottom: 10px; }
	.main-navigation .navbar-nav { padding: 14px 0; }
	.fixed-header-on .navbar-default .navbar-nav > li > a { padding-top: 10px; padding-bottom: 10px; }
}
.main-navigation .navbar-default .navbar-nav > li > a:hover,
.main-navigation .navbar-default .navbar-nav > li > a:focus {
	color: #fff;
	background-color: rgba(255, 255, 255, .12);
}
.main-navigation .navbar-default .navbar-nav > li.active > a,
.main-navigation .navbar-default .navbar-nav > li.active > a:hover,
.main-navigation .navbar-default .navbar-nav > li.active > a:focus {
	color: #fff;
	background-color: rgba(255, 255, 255, .14);
}
.main-navigation .navbar-default .navbar-nav > li.nav-cta > a,
.main-navigation .navbar-default .navbar-nav > li.nav-cta.active > a {
	background-image: var(--grad-brand);
	color: #fff;
	margin-left: 10px;
	padding-left: 22px;
	padding-right: 22px;
	box-shadow: var(--shadow-brand);
}
.main-navigation .navbar-default .navbar-nav > li.nav-cta > a:hover {
	background-color: transparent;
	filter: brightness(1.08);
}
.main-navigation .navbar-default .navbar-toggle {
	margin-top: 16px;
	margin-right: 0;
	border-radius: 12px;
	border-color: rgba(255, 255, 255, .3);
	padding: 9px 10px;
}
.main-navigation .navbar-default .navbar-toggle:hover,
.main-navigation .navbar-default .navbar-toggle:focus { background-color: rgba(255, 255, 255, .14); }
.main-navigation .navbar-default .navbar-toggle .icon-bar { background-color: #fff; }

@media (max-width: 767px) {
	.header { padding: 6px 0; background-color: rgba(8, 13, 26, .9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
	.navbar-collapse.collapse.in,
	.navbar-collapse.collapsing {
		background-color: rgba(8, 13, 26, .97) !important;
		border: 1px solid rgba(255, 255, 255, .1);
		border-radius: var(--radius);
		margin: 10px 0 14px;
		padding: 10px;
		box-shadow: var(--shadow-lg);
	}
	.main-navigation .navbar-default .navbar-nav > li > a { padding: 12px 16px; }
	.main-navigation .navbar-default .navbar-nav > li.nav-cta > a { margin: 6px 0 2px; text-align: center; }
	.logo img { height: 48px !important; }
}

/* Hero / banner
----------------------------------------------------------------------------- */
.banner { min-height: 100vh; }
.banner:after {
	background: radial-gradient(900px 520px at 12% 18%, rgba(37, 99, 235, .48), transparent 62%),
	            radial-gradient(820px 500px at 88% 76%, rgba(6, 182, 212, .34), transparent 62%),
	            linear-gradient(180deg, rgba(5, 10, 22, .9) 0%, rgba(5, 10, 22, .68) 45%, rgba(5, 10, 22, .96) 100%);
}
.banner-caption {
	top: 0; bottom: 0; left: 0; right: 0;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-align: center;
	align-items: center;
	padding: 120px 0 70px;
}
/* Hero entrance — pure CSS so above-the-fold content never depends on JS */
@keyframes heroIn {
	from { opacity: 0; transform: translateY(26px); }
	to   { opacity: 1; transform: none; }
}
.hero-badge,
.banner-caption .hero-title,
.hero-lead,
.hero-actions,
.hero-stats,
.hero-social {
	animation: heroIn .85s var(--ease) both;
}
.hero-badge                  { animation-delay: .05s; }
.banner-caption .hero-title  { animation-delay: .15s; }
.hero-lead                   { animation-delay: .28s; }
.hero-actions                { animation-delay: .40s; }
.hero-stats                  { animation-delay: .52s; }
.hero-social                 { animation-delay: .64s; }
@media (prefers-reduced-motion: reduce) {
	.hero-badge, .banner-caption .hero-title, .hero-lead,
	.hero-actions, .hero-stats, .hero-social { animation: none; }
}

.hero-badge {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #d9ecff;
	background: rgba(255, 255, 255, .1);
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: var(--pill);
	padding: 8px 18px;
	margin-bottom: 26px;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}
.hero-badge i { color: var(--accent-400); }
.banner-caption .hero-title {
	font-size: 60px;
	font-weight: 700;
	line-height: 1.22;
	letter-spacing: -.025em;
	color: #fff;
	margin: 0 0 24px;
	text-shadow: 0 20px 50px rgba(0, 0, 0, .4);
}
.hero-lead {
	font-size: 19px;
	line-height: 1.85;
	color: rgba(255, 255, 255, .82);
	max-width: 820px;
	margin: 0 auto 36px;
}
.hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: center;
	margin-bottom: 54px;
}
.hero-stats {
	list-style: none;
	padding: 0;
	margin: 0 0 34px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
}
.hero-stats li {
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: var(--radius);
	padding: 20px 14px;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	transition: transform .3s var(--ease), background-color .3s var(--ease);
}
.hero-stats li:hover { transform: translateY(-4px); background: rgba(255, 255, 255, .12); }
.hero-stats strong {
	display: block;
	font-size: 30px;
	font-weight: 700;
	line-height: 1.2;
	color: #fff;
}
.hero-stats span {
	display: block;
	font-size: 13px;
	color: rgba(255, 255, 255, .68);
	line-height: 1.5;
	margin-top: 4px;
}
.hero-social {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	font-size: 14px;
	color: rgba(255, 255, 255, .6);
}
.hero-social img { height: 30px; opacity: .9; transition: opacity .25s var(--ease), transform .25s var(--ease); }
.hero-social a:hover img { opacity: 1; transform: translateY(-2px); }

.hero-scroll {
	position: absolute;
	left: 50%;
	bottom: 26px;
	transform: translateX(-50%);
	z-index: 3;
	color: rgba(255, 255, 255, .55);
	font-size: 22px;
	animation: heroBounce 2.2s infinite;
}
.hero-scroll:hover, .hero-scroll:focus { color: #fff; }
@keyframes heroBounce {
	0%, 100% { transform: translate(-50%, 0); }
	50%      { transform: translate(-50%, 9px); }
}

@media (max-width: 1199px) { .banner-caption .hero-title { font-size: 50px; } }
@media (max-width: 991px) {
	.banner-caption .hero-title { font-size: 40px; }
	.hero-lead { font-size: 17px; }
	.hero-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
	.banner { min-height: 0; height: auto; padding-bottom: 10px; }
	.banner-caption { position: relative; padding: 130px 0 70px; }
	.banner-caption .hero-title { font-size: 31px; }
	.hero-lead { font-size: 16px; }
	.hero-actions .btn-modern { width: 100%; }
	.hero-stats strong { font-size: 25px; }
	.hero-scroll { display: none; }
}

/* Feature cards
----------------------------------------------------------------------------- */
.card-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px;
}
.card-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 991px) { .card-grid, .card-grid.cols-2 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .card-grid, .card-grid.cols-2 { grid-template-columns: 1fr; } }

.feature-card {
	position: relative;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: 34px 30px;
	overflow: hidden;
	transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.feature-card:before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
	background-image: var(--grad-brand);
	opacity: 0;
	transition: opacity .35s var(--ease);
}
.feature-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--shadow-md);
	border-color: rgba(37, 99, 235, .22);
}
.feature-card:hover:before { opacity: 1; }
.feature-icon {
	width: 58px; height: 58px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 23px;
	color: var(--brand-600);
	background: linear-gradient(135deg, rgba(37, 99, 235, .12), rgba(6, 182, 212, .14));
	border-radius: 18px;
	margin-bottom: 22px;
	transition: transform .35s var(--ease);
}
.feature-card:hover .feature-icon { transform: scale(1.06) rotate(-4deg); }
.feature-card h3 {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ink-700);
	margin: 0 0 12px;
}
.feature-card p { margin: 0; font-size: 15.5px; color: var(--ink-400); }

/* Benefits split
----------------------------------------------------------------------------- */
.media-frame {
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-lg);
	border: 1px solid var(--line);
}
.media-frame img { display: block; width: 100%; }

.benefit-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px 26px;
}
@media (max-width: 991px) { .benefit-list { grid-template-columns: 1fr; } }
.benefit-list li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 9px 0;
	font-size: 15.5px;
	line-height: 1.65;
	color: var(--ink-500);
	border-bottom: 1px dashed rgba(148, 163, 184, .28);
}
.benefit-list li i {
	flex: 0 0 22px;
	width: 22px; height: 22px;
	margin-top: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	color: #fff;
	background-image: var(--grad-brand);
	border-radius: 50%;
}

/* Workflow steps
----------------------------------------------------------------------------- */
.step-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 22px;
	counter-reset: step;
}
@media (max-width: 991px) { .step-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .step-grid { grid-template-columns: 1fr; } }
.step-card {
	position: relative;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 30px 26px 26px;
	transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.step-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.step-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px; height: 42px;
	border-radius: 14px;
	font-size: 17px;
	font-weight: 700;
	color: #fff;
	background-image: var(--grad-brand);
	margin-bottom: 16px;
	box-shadow: var(--shadow-brand);
}
.step-card h3 { font-size: 17px; margin: 0 0 8px; }
.step-card p { font-size: 15px; color: var(--ink-400); margin: 0; }

/* Modules accordion
----------------------------------------------------------------------------- */
.panel-group { margin-bottom: 0; }
.panel-group .panel {
	background: transparent;
	border-radius: var(--radius);
	box-shadow: none;
	margin-bottom: 12px !important;
}
.panel-group .panel + .panel { margin-top: 0; }
.panel-default > .panel-heading { background: transparent; }

.panel-heading a,
.panel-heading a.collapsed {
	display: flex;
	align-items: center;
	gap: 16px;
	width: 100%;
	padding: 18px 58px 18px 18px;
	font-size: 16px;
	font-weight: 500;
	color: var(--ink-700);
	background-color: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
	transition: background-color .3s var(--ease), color .3s var(--ease),
	            border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.panel-heading a.collapsed:hover {
	background-color: var(--surface);
	color: var(--brand-600);
	border-color: rgba(37, 99, 235, .35);
	box-shadow: var(--shadow-md);
}
.panel-heading a:not(.collapsed) {
	background-image: var(--grad-brand);
	background-color: transparent;
	color: #fff;
	border-color: transparent;
	border-radius: var(--radius) var(--radius) 0 0;
	box-shadow: none;
}
.panel-heading a:not(.collapsed):hover { background-color: transparent; color: #fff; }
.panel-heading a font { opacity: .75; font-size: 13px !important; font-weight: 300; }

.panel-heading a > div:first-child {
	flex: 0 0 44px;
	width: 44px; height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 14px;
	background: linear-gradient(135deg, rgba(37, 99, 235, .12), rgba(6, 182, 212, .14));
	transition: background .3s var(--ease);
}
.panel-heading a:not(.collapsed) > div:first-child { background: rgba(255, 255, 255, .2); }
.panel-heading a > div:first-child img { max-width: 24px; }
.panel-heading a > div:nth-child(2) { padding-left: 0 !important; line-height: 1.45; }

.panel-heading a:after,
.panel-heading a.collapsed:after {
	font-family: "FontAwesome";
	content: "\f107";
	font-size: 18px;
	position: absolute;
	right: 22px;
	top: 50%;
	margin-top: -11px;
	line-height: 1;
	transition: transform .3s var(--ease);
}
.panel-heading a:not(.collapsed):after { transform: rotate(180deg); }

.panel-default > .panel-heading + .panel-collapse > .panel-body {
	background-color: var(--surface);
	border: 1px solid var(--line);
	border-top: none;
	border-radius: 0 0 var(--radius) var(--radius);
	padding: 26px 26px 22px;
}
.panel-body .list-unstyled { font-size: 15.5px; }
.panel-body .list-unstyled li {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	padding: 7px 0;
	color: var(--ink-500);
	border-bottom: 1px dashed rgba(148, 163, 184, .22);
}
.panel-body .list-unstyled li:last-child { border-bottom: none; }
.panel-body .list-unstyled li i {
	flex: 0 0 auto;
	margin-top: 8px;
	font-size: 12px;
	color: var(--brand-500);
	padding-right: 0 !important;
}
.panel-body .subhead {
	font-size: 17px;
	font-weight: 600;
	color: var(--brand-600);
	margin: 22px 0 6px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--line);
}
.panel-body .subhead:first-child { margin-top: 0; }
.panel-note { font-size: 14px; color: var(--ink-400); margin: 14px 0 0; }

/* Dark section (Hardware / Software requirements)
----------------------------------------------------------------------------- */
.dark-section {
	position: relative;
	background-color: var(--ink-800);
	color: rgba(255, 255, 255, .75);
	overflow: hidden;
}
.dark-section:before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	background: url("../images/bg-image-1.jpg") center center / cover no-repeat;
	opacity: .1;
	filter: grayscale(.6);
}
.dark-section:after {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	background: radial-gradient(760px 420px at 15% 10%, rgba(37, 99, 235, .35), transparent 60%),
	            radial-gradient(700px 420px at 85% 90%, rgba(6, 182, 212, .28), transparent 60%);
}
.dark-section > .container { position: relative; z-index: 2; }

.spec-block + .spec-block { margin-top: 46px; }
.spec-label {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 18px;
	font-weight: 600;
	color: #fff;
	margin: 0 0 22px;
}
.spec-label i { color: var(--accent-400); }
.spec-card {
	background: rgba(255, 255, 255, .05);
	border: 1px solid rgba(255, 255, 255, .13);
	border-radius: var(--radius);
	padding: 24px;
	height: 100%;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	transition: transform .3s var(--ease), background-color .3s var(--ease), border-color .3s var(--ease);
}
.spec-card:hover {
	transform: translateY(-5px);
	background: rgba(255, 255, 255, .09);
	border-color: rgba(255, 255, 255, .25);
}
.spec-card h3 {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--accent-400);
	margin: 0 0 12px;
}
.spec-card ul { list-style: none; padding: 0; margin: 0; }
.spec-card li {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-size: 15.5px;
	color: rgba(255, 255, 255, .82);
	padding: 4px 0;
	line-height: 1.6;
}
.spec-card li i { margin-top: 8px; font-size: 11px; color: var(--accent-400); }

/* CTA band
----------------------------------------------------------------------------- */
.cta-band {
	position: relative;
	background-image: var(--grad-brand);
	color: #fff;
	padding: 76px 0;
	overflow: hidden;
	text-align: center;
}
.cta-band:before {
	content: "";
	position: absolute;
	top: -60%; right: -10%;
	width: 620px; height: 620px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .1);
}
.cta-band .container { position: relative; z-index: 2; }
.cta-band h2 {
	color: #fff;
	font-size: 36px;
	font-weight: 700;
	margin: 0 0 14px;
	letter-spacing: -.02em;
}
.cta-band p { font-size: 18px; color: rgba(255, 255, 255, .88); margin: 0 0 30px; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
@media (max-width: 767px) {
	.cta-band h2 { font-size: 26px; }
	.cta-actions .btn-modern { width: 100%; }
}

/* Portfolio
----------------------------------------------------------------------------- */
.filters { margin-bottom: 42px; }
.filters .nav-pills > li > a {
	border-radius: var(--pill);
	padding: 9px 18px;
	font-size: 13.5px;
	font-weight: 500;
	text-transform: none;
	color: var(--ink-400);
	background-color: var(--surface);
	border: 1px solid var(--line);
	transition: all .25s var(--ease);
}
.filters .nav-pills > li > a:hover {
	color: var(--brand-600);
	background-color: rgba(37, 99, 235, .07);
	border-color: rgba(37, 99, 235, .3);
}
.filters .nav-pills > li.active > a,
.filters .nav-pills > li.active > a:hover,
.filters .nav-pills > li.active > a:focus {
	background-image: var(--grad-brand);
	border-color: transparent;
	color: #fff;
	box-shadow: var(--shadow-brand);
}

.isotope-item { margin-bottom: 24px; }
.isotope-item .image-box {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 14px 14px 8px;
	transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.isotope-item .image-box:hover {
	transform: translateY(-5px);
	box-shadow: var(--shadow-md);
	border-color: rgba(37, 99, 235, .28);
}
.isotope-item .overlay-container {
	height: 84px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-sm);
	background: #fff;
}
.isotope-item .overlay-container img {
	max-height: 74px;
	width: auto;
	max-width: 100%;
	filter: grayscale(1);
	opacity: .75;
	transition: filter .3s var(--ease), opacity .3s var(--ease);
}
.isotope-item .image-box:hover .overlay-container img { filter: none; opacity: 1; }
.overlay {
	background-color: rgba(37, 99, 235, .92);
	border-radius: var(--radius-sm);
}
.overlay span { font-size: 12px; bottom: 8px; }
.isotope-item .btn-default,
.isotope-item .btn-default:hover {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	min-height: 48px;
	padding: 8px 4px 4px;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.35;
	text-transform: none;
	white-space: normal;
	background: transparent;
	border: none;
	color: var(--ink-500);
}
.isotope-item .image-box:hover .btn-default { color: var(--brand-600); }

/* Footer / contact
----------------------------------------------------------------------------- */
#footer { background-color: var(--ink-800); color: rgba(255, 255, 255, .7); }
#footer .footer.section { background-color: transparent; padding: 100px 0 70px; }
#footer h1, #footer h2, #footer h3 { color: #fff; }

.contact-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}
@media (max-width: 767px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-card {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	background: rgba(255, 255, 255, .04);
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: var(--radius);
	padding: 22px;
	transition: transform .3s var(--ease), background-color .3s var(--ease), border-color .3s var(--ease);
}
.contact-card:hover {
	transform: translateY(-4px);
	background: rgba(255, 255, 255, .07);
	border-color: rgba(255, 255, 255, .2);
}
.contact-card.wide { grid-column: 1 / -1; }
.contact-card .ci {
	flex: 0 0 48px;
	width: 48px; height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 15px;
	font-size: 19px;
	color: #fff;
	background-image: var(--grad-brand);
}
.contact-card .cl {
	display: block;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .45);
	margin-bottom: 2px;
}
.contact-card .cv {
	display: block;
	font-size: 17px;
	font-weight: 500;
	color: #fff;
	line-height: 1.6;
}
#footer a.cv:hover { color: var(--accent-400); text-decoration: none; }

.map-frame {
	margin-top: 34px;
	border-radius: var(--radius-lg);
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, .12);
	box-shadow: var(--shadow-lg);
	line-height: 0;
}
.map-frame iframe { filter: grayscale(.25) contrast(1.05); }

.subfooter {
	background-color: var(--ink-900);
	border-top: 1px solid rgba(255, 255, 255, .07);
	border-bottom: none;
	padding: 26px 0;
	color: rgba(255, 255, 255, .5);
	font-size: 14px;
}
.subfooter a { color: rgba(255, 255, 255, .78); }
.subfooter a:hover { color: #fff; }

/* Back to top
----------------------------------------------------------------------------- */
.scrollToTop {
	position: fixed;
	right: 22px;
	bottom: 22px;
	width: 50px;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background-image: var(--grad-brand);
	color: #fff;
	font-size: 17px;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(14px);
	box-shadow: var(--shadow-brand);
	transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s var(--ease);
	z-index: 1000;
}
.scrollToTop.is-visible { opacity: 1; visibility: visible; transform: none; }
.scrollToTop:hover { transform: translateY(-3px); }

/* Modals
----------------------------------------------------------------------------- */
.modal-content { border-radius: var(--radius); border: none; box-shadow: var(--shadow-lg); overflow: hidden; }
.modal-header { background-image: var(--grad-brand); background-color: transparent; border-bottom: none; padding: 18px 22px; }
.modal-header h4 { font-size: 17px; font-weight: 600; }
.modal-body { padding: 30px 24px; }
.modal-body h2 { font-size: 18px; font-weight: 500; color: var(--ink-500); line-height: 1.7; margin: 18px 0 0; }
.modal-footer { border-top: 1px solid var(--line); }
.modal-footer .btn-default {
	min-width: 120px;
	border-radius: var(--pill);
	text-transform: none;
	font-size: 14px;
	padding: 9px 20px;
}

/* Utilities
----------------------------------------------------------------------------- */
.space { padding: 20px 0; }
.mt-30 { margin-top: 30px; }
.mt-50 { margin-top: 50px; }

@media (max-width: 767px) {
	.section { padding: 68px 0; }
	.sec-title { font-size: 29px; }
	.sec-sub { font-size: 16px; }
	.sec-head { margin-bottom: 38px; }
	h1 { font-size: 28px; }
}

/* Narrow phones — keep long unbroken Thai strings inside the viewport
----------------------------------------------------------------------------- */
body { overflow-x: hidden; }
h1, h2, h3, h4, p, li, span, a, .sec-title, .hero-title {
	overflow-wrap: break-word;
	word-wrap: break-word;
}
@media (max-width: 420px) {
	.banner-caption .hero-title { font-size: 27px; }
	.sec-title { font-size: 25px; }
	.hero-badge { font-size: 11px; padding: 7px 14px; letter-spacing: .06em; }
	.eyebrow { font-size: 11px; letter-spacing: .08em; }
	.hero-stats { grid-template-columns: 1fr; }
	.hero-stats li { padding: 16px 14px; }
	.feature-card, .step-card { padding: 26px 22px; }
	.panel-heading a, .panel-heading a.collapsed { padding: 16px 44px 16px 14px; gap: 12px; font-size: 15px; }
	.panel-heading a:after, .panel-heading a.collapsed:after { right: 16px; }
	.panel-default > .panel-heading + .panel-collapse > .panel-body { padding: 20px 18px; }
	.contact-card { padding: 18px; gap: 13px; }
	.contact-card .cv { font-size: 15.5px; }
}