/*
 * Ambientech brand skin - shared custom styles
 *
 * navy   #1B2044  - hero / footer (company site)
 * indigo #5B6BEA  - product UI primary
 * cyan   #54C6DD  - logo / headline accent
 * teal   #2BC49A  - product "running / success"
 */
:root {
	--abt-navy: #1B2044;
	--abt-navy-2: #232A5C;
	--abt-indigo: #5B6BEA;
	--abt-indigo-dark: #474C8F;
	--abt-cyan: #54C6DD;
	--abt-teal: #2BC49A;
	--abt-light: #F5F7FC;
}

body { font-family: 'Poppins', Arial, sans-serif; color: #575F6E; }
h1, h2, h3, h4, h5, h6 { font-family: 'Poppins', Arial, sans-serif; color: var(--abt-navy); }

/* ==========================================================================
   Reveal safety net
   Porto's .appear-animation is JS-gated (jQuery.appear) and was leaving text
   permanently invisible when the trigger didn't fire. Force every animated
   element to end fully visible, then layer a self-contained CSS entrance that
   NEVER touches opacity again -- so text can never disappear.
   ========================================================================== */
.appear-animation { opacity: 1 !important; }

@keyframes abtRiseIn { from { transform: translateY(28px); } to { transform: translateY(0); } }
@keyframes abtRiseInSm { from { transform: translateY(16px); } to { transform: translateY(0); } }
@keyframes abtFadeSoft { from { filter: opacity(0); } to { filter: opacity(1); } }

@media (prefers-reduced-motion: no-preference) {
	.abt-anim { animation: abtRiseIn .7s cubic-bezier(.22,.61,.36,1) both, abtFadeSoft .7s ease both; }
	.abt-anim-d1 { animation-delay: .12s; }
	.abt-anim-d2 { animation-delay: .24s; }
	.abt-anim-d3 { animation-delay: .36s; }
	.abt-anim-d4 { animation-delay: .48s; }
	.abt-anim-d5 { animation-delay: .60s; }
	.abt-anim-d6 { animation-delay: .72s; }
}

/* ----- map Porto primary onto the brand ----- */
.btn-primary {
	background-color: var(--abt-indigo);
	border-color: var(--abt-indigo);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
	background-color: #4a58d8;
	border-color: #4a58d8;
}
.bg-primary { background-color: var(--abt-indigo) !important; }
.text-color-primary { color: var(--abt-indigo) !important; }
.bg-dark { background-color: var(--abt-navy) !important; }

/* ----- brand helpers ----- */
.abt-bg-navy { background-color: var(--abt-navy) !important; }
.abt-bg-light { background-color: var(--abt-light) !important; }
.abt-text-cyan { color: var(--abt-cyan) !important; }
.abt-text-indigo { color: var(--abt-indigo) !important; }
.abt-text-teal { color: var(--abt-teal) !important; }

.abt-gradient-text {
	background: linear-gradient(90deg, var(--abt-indigo) 0%, var(--abt-cyan) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* ----- buttons (company style: indigo -> cyan gradient, rounded) ----- */
.btn-abt-gradient {
	background: linear-gradient(135deg, var(--abt-indigo) 0%, var(--abt-cyan) 100%);
	color: #FFF !important;
	border: 0;
	border-radius: 8px;
	padding: 14px 34px;
	font-weight: 600;
	letter-spacing: .5px;
	transition: all .3s;
	box-shadow: 0 8px 22px -6px rgba(91, 107, 234, .55);
}
.btn-abt-gradient:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -6px rgba(84, 198, 221, .6); }
.btn-abt-outline {
	background: transparent;
	color: #FFF !important;
	border: 2px solid rgba(255,255,255,.35);
	border-radius: 8px;
	padding: 12px 32px;
	font-weight: 600;
	letter-spacing: .5px;
	transition: all .3s;
}
.btn-abt-outline:hover { border-color: var(--abt-cyan); color: var(--abt-cyan) !important; }

/* ----- header ----- */
#header .header-body { background: var(--abt-navy) !important; border: 0; }

/* logo: leaf mark sits directly on the navy header (matches the brand lockup),
   with a subtle ring + shadow to define its edge instead of a white disc */
#header .header-logo img {
	border-radius: 50%;
	box-shadow: 0 6px 16px -6px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.07);
}
#header .abt-logo-text { font-weight: 700; letter-spacing: 2px; color: #FFF !important; font-size: 20px; line-height: 1; }
#header .abt-logo-sub { display: block; font-size: 11px; line-height: 1; letter-spacing: 3px; color: var(--abt-cyan) !important; font-weight: 600; margin-top: 3px; }

/* nav links: brighter + higher specificity so Porto's muted default can't win */
#header .header-nav-main nav > ul > li > a.nav-link,
#header .header-nav-main nav > ul > li.dropdown > a.nav-link {
	color: #FFFFFF !important;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 1px;
	opacity: .92;
	transition: color .25s, opacity .25s;
}
#header .header-nav-main nav > ul > li > a.nav-link:hover,
#header .header-nav-main nav > ul > li > a.nav-link:focus,
#header .header-nav-main nav > ul > li.active > a.nav-link,
#header .header-nav-main nav > ul > li > a.nav-link.active {
	color: var(--abt-cyan) !important;
	opacity: 1;
	background: transparent;
}
/* underline indicator for the active/hover item */
#header .header-nav-main nav > ul > li > a.nav-link { position: relative; }
#header .header-nav-main nav > ul > li > a.nav-link:after {
	content: '';
	position: absolute; left: .9rem; right: .9rem; bottom: 2px;
	height: 2px; border-radius: 2px;
	background: var(--abt-cyan);
	transform: scaleX(0); transform-origin: left;
	transition: transform .28s ease;
}
#header .header-nav-main nav > ul > li > a.nav-link:hover:after,
#header .header-nav-main nav > ul > li > a.nav-link.active:after { transform: scaleX(1); }
#header .abt-header-cta {
	background: linear-gradient(135deg, var(--abt-indigo) 0%, var(--abt-cyan) 100%);
	color: #FFF !important;
	border: 0;
	border-radius: 7px;
	padding: 9px 20px;
	font-size: 14.5px;
	font-weight: 600;
	letter-spacing: .5px;
	box-shadow: 0 8px 18px -8px rgba(91,107,234,.6);
	transition: transform .25s ease, box-shadow .25s ease;
}
#header .abt-header-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 22px -8px rgba(84,198,221,.65); }
@media (max-width: 991px) {
	#header .header-nav-main nav { background: var(--abt-navy-2); border-radius: 8px; padding: 10px 0; }
	#header .header-nav-main nav > ul > li > a.nav-link { padding: 10px 20px; }
}
#header .header-btn-collapse-nav { background: var(--abt-indigo); }

/* mobile: give the logo more room top & bottom and lighten the wordmark
   so the text doesn't crowd the small badge */
@media (max-width: 767px) {
	#header .header-logo { margin: 22px 0; }
	#header .abt-logo-text { font-size: 17px; letter-spacing: 1.5px; }
	#header .abt-logo-sub { font-size: 10px; letter-spacing: 1.8px; margin-top: 3px; }
}

/* ----- hero ----- */
.abt-hero {
	background: radial-gradient(ellipse at 75% -20%, rgba(91,107,234,.35) 0%, transparent 55%),
				radial-gradient(ellipse at 15% 110%, rgba(84,198,221,.22) 0%, transparent 50%),
				linear-gradient(160deg, var(--abt-navy) 0%, #151936 60%, var(--abt-navy-2) 100%) !important;
	position: relative;
	overflow: hidden;
}
.abt-hero .abt-hero-grid {
	position: absolute; top: 0; right: 0; bottom: 0; left: 0;
	background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
	background-size: 46px 46px;
}
.abt-hero .abt-hero-label { color: var(--abt-cyan); font-weight: 600; letter-spacing: 3px; font-size: 14.8px; }
.abt-hero h1 { color: #FFF; font-size: 46.8px; font-weight: 800; line-height: 1.15; }
.abt-hero h1 .abt-accent { color: var(--abt-cyan); }
.abt-hero p.abt-lead { color: rgba(255,255,255,.75); font-size: 18.8px; line-height: 1.8; }
.abt-hero .abt-hero-shot {
	border-radius: 10px;
	box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .65), 0 0 0 1px rgba(255,255,255,.08);
}
.abt-hero .abt-hero-shot-front {
	position: absolute; right: -8px; bottom: -40px; width: 46%;
	border-radius: 8px;
	box-shadow: 0 24px 50px -12px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.1);
}
.abt-hero .abt-stat-value { color: #FFF; font-weight: 800; font-size: 30.8px; }
.abt-hero .abt-stat-label { color: rgba(255,255,255,.55); font-size: 14px; letter-spacing: 1px; }
.abt-hero .abt-stat-divider { width: 1px; background: rgba(255,255,255,.15); }
@media (max-width: 767px) {
	.abt-hero h1 { font-size: 35.6px; }
}

/* ----- section headings ----- */
.abt-section-label { color: var(--abt-indigo); font-weight: 700; letter-spacing: 3px; font-size: 14px; }
.abt-section-title { font-size: 35.6px; font-weight: 800; }
.abt-section-title-light { color: #FFF; }

/* ----- feature cards (elevated UI) ----- */
.abt-features-section { position: relative; overflow: hidden; }
.abt-features-section .abt-feat-glow { position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none; z-index: 0; }
.abt-features-section .abt-feat-glow-1 { top: -70px; left: -50px; width: 320px; height: 320px; background: rgba(91,107,234,.10); }
.abt-features-section .abt-feat-glow-2 { bottom: -90px; right: -50px; width: 340px; height: 340px; background: rgba(84,198,221,.12); }
.abt-features-section .container { position: relative; z-index: 1; }

.abt-feature-card {
	position: relative;
	display: block;
	background: #FFF;
	border: 1px solid #E8ECF7;
	border-radius: 16px;
	padding: 36px 30px 30px;
	height: 100%;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	z-index: 0;
	transition: transform .45s cubic-bezier(.22,.61,.36,1), box-shadow .45s ease, border-color .45s ease;
}
/* soft tint wash (paints above the white bg, below content) */
.abt-feature-card::before {
	content: '';
	position: absolute; inset: 0;
	background: linear-gradient(165deg, rgba(91,107,234,.06) 0%, rgba(84,198,221,.05) 100%);
	opacity: 0; transition: opacity .45s ease; z-index: -1;
}
/* gradient accent bar wiping in from the left on hover */
.abt-feature-card::after {
	content: '';
	position: absolute; top: 0; left: 0; right: 0; height: 4px;
	background: linear-gradient(90deg, var(--abt-indigo) 0%, var(--abt-cyan) 100%);
	transform: scaleX(0); transform-origin: left;
	transition: transform .5s cubic-bezier(.22,.61,.36,1);
}
.abt-feature-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 30px 60px -22px rgba(27,32,68,.30);
	border-color: transparent;
}
.abt-feature-card:hover::before { opacity: 1; }
.abt-feature-card:hover::after { transform: scaleX(1); }

/* ghost index number */
.abt-feature-num {
	position: absolute; top: 20px; right: 26px;
	font-family: 'Poppins', sans-serif; font-size: 48px; font-weight: 800; line-height: 1;
	color: var(--abt-navy); opacity: .06;
	transition: opacity .45s ease, transform .45s ease;
}
.abt-feature-card:hover .abt-feature-num { opacity: .13; transform: translateY(-3px); }

/* Benefit illustration at the top of each card. Replaced the old 62px icon
   tile: an icon can label a feature, but it can't show an outcome. */
.abt-feature-viz {
	display: block;
	margin-bottom: 20px;
	border-radius: 12px;
	overflow: hidden;
	transition: transform .45s cubic-bezier(.22,.61,.36,1);
}
.abt-feature-card:hover .abt-feature-viz { transform: translateY(-3px); }
.abt-fviz { display: block; width: 100%; height: auto; }

/* --- 01 - a machine trips and calls for attention --- */
.abt-fv1-ring { transform-box: fill-box; transform-origin: center; animation: abtFv1Ring 2.4s ease-out infinite; }
@keyframes abtFv1Ring { 0% { transform: scale(1); opacity: .9; } 70%, 100% { transform: scale(3.2); opacity: 0; } }
.abt-fv1-alert { transform-box: fill-box; transform-origin: center bottom; animation: abtFv1Alert 2.4s cubic-bezier(.22,.61,.36,1) infinite; }
@keyframes abtFv1Alert {
	0%       { transform: scale(0); opacity: 0; }
	14%      { transform: scale(1.15); opacity: 1; }
	22%, 78% { transform: scale(1); opacity: 1; }
	92%, 100%{ transform: scale(.85); opacity: 0; }
}
.abt-fv1-box { animation: abtFv1Box 2.4s ease-in-out infinite; }
@keyframes abtFv1Box { 0%, 100% { fill: #FFF; } 40%, 70% { fill: #FDEFF0; } }

/* --- 02 - bars rise, then the shortfall above them fades in --- */
.abt-fv2-bar { transform-box: fill-box; transform-origin: bottom; animation: abtFv2Bar 4.5s cubic-bezier(.22,.61,.36,1) infinite; }
@keyframes abtFv2Bar { 0% { transform: scaleY(0); } 18%, 88% { transform: scaleY(1); } 100% { transform: scaleY(0); } }
.abt-fv2-gap { animation: abtFv2Gap 4.5s ease infinite; }
@keyframes abtFv2Gap { 0%, 20% { opacity: 0; } 36%, 86% { opacity: 1; } 100% { opacity: 0; } }

/* --- 03 - jobs pack together, freeing the run time on the right --- */
.abt-fv3-j2 { animation: abtFv3J2 4.5s cubic-bezier(.22,.61,.36,1) infinite; }
@keyframes abtFv3J2 { 0%, 20% { transform: translateX(0); } 46%, 88% { transform: translateX(-16px); } 100% { transform: translateX(0); } }
.abt-fv3-j3 { animation: abtFv3J3 4.5s cubic-bezier(.22,.61,.36,1) infinite; }
@keyframes abtFv3J3 { 0%, 20% { transform: translateX(0); } 46%, 88% { transform: translateX(-32px); } 100% { transform: translateX(0); } }
.abt-fv3-gain { animation: abtFv3Gain 4.5s ease infinite; }
/* starts only after j3 has finished sliding at 46%, so it never shows under a moving block */
@keyframes abtFv3Gain { 0%, 48% { opacity: 0; } 62%, 86% { opacity: 1; } 100% { opacity: 0; } }

/* --- 04 - the two lines draw and pull apart --- */
.abt-fv4-line { stroke-dasharray: 230; stroke-dashoffset: 230; animation: abtFv4Draw 4.5s ease infinite; }
@keyframes abtFv4Draw { 0% { stroke-dashoffset: 230; } 40%, 88% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 230; } }
.abt-fv4-tip { transform-box: fill-box; transform-origin: center; animation: abtFv4Tip 4.5s ease infinite; }
@keyframes abtFv4Tip { 0%, 38% { transform: scale(0); opacity: 0; } 48%, 88% { transform: scale(1); opacity: 1; } 100% { transform: scale(0); opacity: 0; } }

.abt-feature-card h4 { font-size: 20px; font-weight: 700; margin-bottom: 12px; color: var(--abt-navy); }
.abt-feature-card p { font-size: 16.4px; line-height: 1.75; margin: 0 0 20px; color: #5A6273; }

/* animated "explore" link */
.abt-feature-link {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: 14px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
	color: var(--abt-indigo);
	opacity: .5; transform: translateY(2px);
	transition: opacity .4s ease, transform .4s ease;
}
.abt-feature-card:hover .abt-feature-link { opacity: 1; transform: translateY(0); }
.abt-feature-link i { transition: transform .35s ease; }
.abt-feature-card:hover .abt-feature-link i { transform: translateX(5px); }

@media (prefers-reduced-motion: reduce) {
	.abt-feature-card, .abt-feature-card::after, .abt-feature-card::before,
	.abt-feature-viz, .abt-feature-num, .abt-feature-link, .abt-feature-link i { transition: none; }
	/* Hold each illustration on the frame that carries the message. */
	.abt-fv1-ring, .abt-fv1-alert, .abt-fv1-box, .abt-fv2-bar, .abt-fv2-gap,
	.abt-fv3-j2, .abt-fv3-j3, .abt-fv3-gain, .abt-fv4-line, .abt-fv4-tip { animation: none !important; }
	.abt-fv1-ring { opacity: 0; }
	.abt-fv2-bar { transform: scaleY(1); }
	.abt-fv3-j2 { transform: translateX(-16px); }
	.abt-fv3-j3 { transform: translateX(-32px); }
	.abt-fv4-line { stroke-dashoffset: 0; }
}

/* ----- how it works steps ----- */
.abt-step {
	position: relative;
	text-align: center;
	padding: 0 24px;
}
.abt-step .abt-step-number {
	width: 74px; height: 74px;
	display: flex; align-items: center; justify-content: center;
	margin: 0 auto 22px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--abt-indigo) 0%, var(--abt-cyan) 100%);
	color: #FFF; font-size: 27.6px; font-weight: 800;
	box-shadow: 0 12px 26px -8px rgba(91, 107, 234, .5);
}
.abt-step h4 { font-size: 19.6px; font-weight: 700; }
.abt-step p { font-size: 16.4px; line-height: 1.75; margin: 0; }
.abt-step-arrow {
	position: absolute; top: 26px; right: -24px;
	color: #C6CDE8; font-size: 22.8px;
}
@media (max-width: 991px) {
	.abt-step-arrow { display: none; }
}

/* ==========================================================================
   Animated SVG "How it works" flow diagram
   Machine  ->  IoT device  ->  ABT SCADA cloud  ->  Dashboards / OEE
   Self-contained CSS/SVG animation - no JS needed.
   ========================================================================== */
.abt-flow-section {
	background: radial-gradient(ellipse at 50% -10%, rgba(91,107,234,.30) 0%, transparent 60%),
				linear-gradient(180deg, var(--abt-navy) 0%, #12152B 100%) !important;
}
.abt-flow-wrap { max-width: 1160px; margin: 0 auto; }
.abt-flow-svg { width: 100%; height: auto; display: block; overflow: visible; }

/* Four detailed panels do not survive being squeezed to a phone: at 375px the
   whole diagram scales to 30% and the captions land at ~5px. Hold a readable
   minimum and let it scroll sideways inside its own box instead -- the page
   itself must never scroll horizontally. */
@media (max-width: 991px) {
	.abt-flow-wrap { overflow-x: auto; overflow-y: hidden; padding-bottom: 10px; }
	.abt-flow-svg { min-width: 1000px; }
}

/* connector line: dashes travel from left to right = "data flowing" */
.abt-flow-track { stroke: rgba(255,255,255,.14); stroke-width: 2.5; fill: none; }
.abt-flow-dash {
	stroke: url(#abtFlowGrad);
	stroke-width: 3;
	fill: none;
	stroke-linecap: round;
	stroke-dasharray: 14 16;
	animation: abtDashMove 1.1s linear infinite;
}
@keyframes abtDashMove { to { stroke-dashoffset: -30; } }
.abt-flow-tip { fill: none; stroke: var(--abt-cyan); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .8; }
.abt-flow-cxn { fill: rgba(255,255,255,.45); font-family: 'Poppins', sans-serif; font-size: 11px; letter-spacing: .5px; }

/* ----- the four stage panels -----
   Each stage shows the actual artefact at that point in the pipeline rather
   than an icon, so the diagram reads as the product instead of a stock graphic. */
.abt-flow-panel { fill: #191E40; stroke: rgba(255,255,255,.09); stroke-width: 1.2; }
.abt-flow-div { stroke: rgba(255,255,255,.07); stroke-width: 1; }
.abt-flow-ph { fill: rgba(255,255,255,.55); font-family: 'Poppins', sans-serif; font-size: 11.5px; font-weight: 700; letter-spacing: .6px; }
.abt-flow-chip { font-family: 'Poppins', sans-serif; font-size: 10.5px; font-weight: 700; letter-spacing: .3px; }
.abt-flow-note { fill: rgba(255,255,255,.4); font-family: 'Poppins', sans-serif; font-size: 10.5px; }
.abt-flow-lbl { fill: rgba(255,255,255,.45); font-family: 'Poppins', sans-serif; font-size: 11.5px; font-weight: 600; letter-spacing: .4px; }
.abt-flow-val { fill: #FFF; font-family: 'Poppins', sans-serif; font-size: 18px; font-weight: 800; }
.abt-flow-big { fill: #FFF; font-family: 'Poppins', sans-serif; font-size: 26px; font-weight: 800; }
.abt-flow-inline { fill: #FFF; font-family: 'Poppins', sans-serif; font-size: 12.5px; font-weight: 700; }
.abt-flow-k { font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 800; }
.abt-flow-rowlbl { fill: rgba(255,255,255,.6); font-family: 'Poppins', sans-serif; font-size: 11.5px; }
.abt-flow-rowval { fill: #FFF; font-family: 'Poppins', sans-serif; font-size: 12.5px; font-weight: 700; }
.abt-flow-oee { fill: var(--abt-cyan); font-family: 'Poppins', sans-serif; font-size: 22px; font-weight: 800; }
.abt-flow-tile { fill: rgba(255,255,255,.5); font-family: 'Poppins', sans-serif; font-size: 10.5px; font-weight: 700; letter-spacing: .4px; }
.abt-flow-tileval { fill: #FFF; font-family: 'Poppins', sans-serif; font-size: 17px; font-weight: 800; }

.abt-flow-label { fill: #FFF; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 17px; }
.abt-flow-sub { fill: rgba(255,255,255,.55); font-family: 'Poppins', sans-serif; font-weight: 400; font-size: 13px; letter-spacing: .5px; }

/* the moving data packet that travels each hop */
.abt-flow-packet { fill: var(--abt-cyan); filter: drop-shadow(0 0 6px rgba(84,198,221,.9)); }

/* stage 1: the sensor pulse train draws itself, one pulse per part */
.abt-flow-wave {
	fill: none; stroke: var(--abt-cyan); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
	stroke-dasharray: 420; stroke-dashoffset: 420;
	animation: abtFlowWave 4.2s ease-in-out infinite;
}
@keyframes abtFlowWave { 0% { stroke-dashoffset: 420; } 55%, 88% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 420; } }
.abt-flow-plus { fill: var(--abt-teal); font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 700; animation: abtFlowPlus 2.4s ease-in-out infinite; }
@keyframes abtFlowPlus { 0%, 100% { opacity: 0; transform: translateY(6px); } 18%, 55% { opacity: 1; transform: translateY(0); } }

/* stage 2: the job fills toward its target */
.abt-flow-bar { transform-box: fill-box; transform-origin: left center; animation: abtFlowBar 4.2s cubic-bezier(.22,.61,.36,1) infinite; }
@keyframes abtFlowBar { 0% { transform: scaleX(0); } 45%, 88% { transform: scaleX(1); } 100% { transform: scaleX(0); } }

/* stage 4: the trend draws, the loss bar grows */
.abt-flow-spark {
	fill: none; stroke: var(--abt-cyan); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
	stroke-dasharray: 100; stroke-dashoffset: 100;
	animation: abtFlowSpark 4.2s ease infinite;
}
@keyframes abtFlowSpark { 0%, 20% { stroke-dashoffset: 100; } 62%, 88% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 100; } }
.abt-flow-loss { transform-box: fill-box; transform-origin: left center; animation: abtFlowLoss 4.2s cubic-bezier(.22,.61,.36,1) infinite; }
@keyframes abtFlowLoss { 0%, 25% { transform: scaleX(0); } 68%, 88% { transform: scaleX(1); } 100% { transform: scaleX(0); } }

@media (prefers-reduced-motion: reduce) {
	.abt-flow-dash, .abt-flow-wave, .abt-flow-plus, .abt-flow-bar,
	.abt-flow-spark, .abt-flow-loss { animation: none !important; }
	.abt-flow-wave, .abt-flow-spark { stroke-dashoffset: 0; }
	.abt-flow-bar, .abt-flow-loss { transform: scaleX(1); }
	.abt-flow-plus { opacity: 1; }
}

/* ----- dashboard gallery ----- */
.abt-shot-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	border-radius: 10px;
	overflow: hidden;
	border: 1px solid #E8ECF7;
	background: #FFF;
	box-shadow: 0 6px 18px -8px rgba(27,32,68,.12);
	transition: all .3s;
	position: relative;
}
/* uniform thumbnail box so every gallery card is exactly the same height */
.abt-shot-card .abt-shot-img { display: block; position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: var(--abt-light); }
.abt-shot-card .abt-shot-img img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; transition: transform .45s; }
.abt-shot-card .abt-shot-img:after {
	content: '';
	position: absolute; top: 0; right: 0; bottom: 0; left: 0;
	background: linear-gradient(135deg, rgba(91,107,234,.75) 0%, rgba(84,198,221,.75) 100%);
	opacity: 0;
	transition: opacity .35s;
}
.abt-shot-card .abt-shot-zoom {
	position: absolute; top: 50%; left: 50%;
	transform: translate(-50%, -50%) scale(.6);
	z-index: 2;
	width: 52px; height: 52px;
	display: flex; align-items: center; justify-content: center;
	border-radius: 50%;
	background: #FFF;
	color: var(--abt-indigo);
	font-size: 19.6px;
	opacity: 0;
	transition: all .35s;
}
.abt-shot-card:hover { box-shadow: 0 24px 48px -16px rgba(27,32,68,.28); transform: translateY(-4px); }
.abt-shot-card:hover .abt-shot-img img { transform: scale(1.05); }
.abt-shot-card:hover .abt-shot-img:after { opacity: 1; }
.abt-shot-card:hover .abt-shot-zoom { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.abt-shot-card .abt-shot-caption {
	display: flex; align-items: center; justify-content: space-between;
	margin-top: auto;
	padding: 14px 18px;
	border-top: 1px solid #EEF1F9;
	background: #FFF;
}
.abt-shot-card .abt-shot-caption span { font-weight: 600; color: var(--abt-navy); font-size: 15.6px; }
.abt-shot-card .abt-shot-caption i { color: var(--abt-indigo); }

/* ----- dark IoT device section ----- */
.abt-device-section {
	background: radial-gradient(ellipse at 20% 0%, rgba(91,107,234,.28) 0%, transparent 55%),
				linear-gradient(180deg, #12152B 0%, var(--abt-navy) 100%) !important;
}
.abt-device-section p, .abt-device-section li { color: rgba(255,255,255,.72); }
.abt-device-check li { list-style: none; margin-bottom: 14px; font-size: 17.2px; }
.abt-device-check li i { color: var(--abt-teal); margin-right: 12px; }
.abt-device-shot { border-radius: 10px; box-shadow: 0 26px 60px -18px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.08); }
.abt-badge-pill {
	display: inline-block;
	padding: 6px 16px;
	border-radius: 50px;
	font-size: 14px; font-weight: 600; letter-spacing: 1px;
	background: rgba(84,198,221,.12);
	color: var(--abt-cyan);
	border: 1px solid rgba(84,198,221,.35);
}

/* ----- benefit checklist ----- */
.abt-benefit-list li { list-style: none; margin-bottom: 16px; font-size: 17.2px; color: #575F6E; }
.abt-benefit-list li i { color: var(--abt-teal); margin-right: 12px; }
.abt-benefit-list li strong { color: var(--abt-navy); }

/* ----- CTA ----- */
.abt-cta {
	background: linear-gradient(120deg, var(--abt-indigo-dark) 0%, var(--abt-indigo) 55%, var(--abt-cyan) 130%);
	border-radius: 16px;
	position: relative;
	overflow: hidden;
}
.abt-cta h2 { color: #FFF; font-weight: 800; }
.abt-cta p { color: rgba(255,255,255,.8); }
.abt-cta .btn-light { border-radius: 8px; font-weight: 700; color: var(--abt-indigo-dark); padding: 14px 34px; }

/* ----- consultation form (inside CTA) ----- */
.abt-cta-form { text-align: left; }
.abt-cta-badge {
	padding: 6px 16px; border-radius: 50px;
	font-size: 13.5px; font-weight: 700; letter-spacing: 1.5px;
	background: rgba(255,255,255,.15); color: #FFF; border: 1px solid rgba(255,255,255,.3);
}
.abt-cta-points { list-style: none; }
.abt-cta-points li { margin-bottom: 10px; color: rgba(255,255,255,.9); font-size: 16.4px; }
.abt-cta-points li i { color: #FFF; margin-right: 10px; }

.abt-form-card {
	background: #FFF;
	border-radius: 14px;
	padding: 28px 26px;
	box-shadow: 0 30px 60px -24px rgba(0,0,0,.45);
}
.abt-form-label { display: block; font-size: 14.5px; font-weight: 600; color: var(--abt-navy); margin-bottom: 6px; }
.abt-form-label span { color: var(--abt-indigo); }
.abt-form-label .abt-form-opt { color: #9AA2B1; font-weight: 500; }
.abt-form-control {
	width: 100%;
	border: 1.5px solid #E1E6F2;
	border-radius: 9px;
	padding: 11px 14px;
	font-size: 16px; color: var(--abt-navy);
	background: #FBFCFE;
	font-family: 'Poppins', Arial, sans-serif;
	transition: border-color .25s, box-shadow .25s, background .25s;
}
.abt-form-control::placeholder { color: #AAB1C2; }
.abt-form-control:focus {
	outline: none;
	border-color: var(--abt-indigo);
	background: #FFF;
	box-shadow: 0 0 0 3px rgba(91,107,234,.15);
}
.abt-form-control:invalid:not(:placeholder-shown) { border-color: var(--abt-red); }
textarea.abt-form-control { resize: vertical; min-height: 84px; }
.abt-form-note { font-size: 14.5px; color: #8A93A6; }
.abt-cta-form .btn-abt-gradient { white-space: nowrap; }

.abt-form-success {
	display: flex; align-items: flex-start; gap: 14px;
	padding: 22px 24px;
	border-radius: 12px;
	background: rgba(43,196,154,.1);
	border: 1px solid rgba(43,196,154,.35);
}
.abt-form-success i { color: var(--abt-teal); font-size: 28px; margin-top: 2px; }
.abt-form-success strong { display: block; color: var(--abt-navy); font-size: 18px; margin-bottom: 3px; }
.abt-form-success span { color: #5A6273; font-size: 16px; line-height: 1.5; }

/* ==========================================================================
   Core Capabilities  -  flagship "Main Features" deep-dive
   Four alternating rows, each paired with a self-contained animated SVG:
   1. Automatic time tracking   2. Real-time OEE + sensor counting
   3. Modbus TCP + custom params 4. Fully customizable dashboards
   ========================================================================== */
:root { --abt-amber: #F6A821; --abt-red: #EF5F6B; }

.abt-cap-section {
	background:
		radial-gradient(ellipse at 88% -5%, rgba(91,107,234,.07) 0%, transparent 42%),
		radial-gradient(ellipse at 4% 105%, rgba(84,198,221,.08) 0%, transparent 42%),
		#FFFFFF !important;
	position: relative;
	overflow: hidden;
}
.abt-cap-row { align-items: center; }
.abt-cap-row + .abt-cap-row { margin-top: 72px; }

.abt-cap-index {
	display: inline-flex; align-items: center; justify-content: center;
	width: 48px; height: 48px; border-radius: 13px;
	background: linear-gradient(135deg, var(--abt-indigo) 0%, var(--abt-cyan) 100%);
	color: #FFF; font-weight: 800; font-size: 21.2px;
	box-shadow: 0 12px 24px -8px rgba(91,107,234,.55);
	margin-bottom: 20px;
}
.abt-cap-kicker { display: block; color: var(--abt-indigo); font-weight: 700; letter-spacing: 2px; font-size: 13.5px; text-transform: uppercase; margin-bottom: 8px; }
/* Porto uppercases h3, which the h2 section titles above are not -- so these read
   as shouting, and it mangles mixed-case terms ("KPIs" -> "KPIS"). Render as written. */
.abt-cap-heading { font-size: 27.6px; font-weight: 800; color: var(--abt-navy); line-height: 1.28; margin-bottom: 16px; text-transform: none; }
.abt-cap-text { font-size: 17.2px; line-height: 1.8; color: #5A6273; margin-bottom: 20px; }
.abt-cap-list { padding: 0; margin: 0; list-style: none; }
.abt-cap-list li { position: relative; padding-left: 30px; margin-bottom: 12px; font-size: 16.4px; line-height: 1.6; color: #4A5262; }
.abt-cap-list li i { position: absolute; left: 0; top: 3px; color: var(--abt-teal); font-size: 17.5px; }
.abt-cap-list li strong { color: var(--abt-navy); font-weight: 600; }

.abt-cap-panel {
	border-radius: 18px;
	overflow: hidden;
	background: #12152B;
	box-shadow: 0 34px 66px -26px rgba(27,32,68,.5), 0 0 0 1px rgba(27,32,68,.05);
	transition: transform .45s cubic-bezier(.22,.61,.36,1), box-shadow .45s ease;
}
.abt-cap-panel:hover { transform: translateY(-8px); box-shadow: 0 48px 90px -30px rgba(27,32,68,.55); }
.abt-cap-svg { display: block; width: 100%; height: auto; }

@media (max-width: 991px) {
	.abt-cap-heading { font-size: 24.4px; }
	.abt-cap-row + .abt-cap-row { margin-top: 48px; }
}

/* ---- SVG 1: time-tracking timeline ---- */
/* Segments sweep out left-to-right like a recorder drawing the shift, rather
   than all fading in place. */
.abt-ttl-seg {
	opacity: 0;
	transform-box: fill-box; transform-origin: left center;
	animation: abtSegIn .55s cubic-bezier(.22,.61,.36,1) forwards;
}
@keyframes abtSegIn { from { opacity: 0; transform: scaleX(.15); } to { opacity: 1; transform: scaleX(1); } }
.abt-ttl-playhead { animation: abtTtlSweep 7s linear infinite; }
@keyframes abtTtlSweep { 0% { transform: translateX(0); } 100% { transform: translateX(480px); } }
.abt-live-dot { animation: abtLiveBlink 1.4s ease-in-out infinite; }
@keyframes abtLiveBlink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* ---- SVG 2: OEE gauge + sensor count ---- */
.abt-oee-arc { animation: abtOeeDraw 1.9s .35s cubic-bezier(.22,.61,.36,1) forwards; }
@keyframes abtOeeDraw { to { stroke-dashoffset: 72; } }
.abt-oee-bar { transform: scaleX(0); transform-origin: left center; transform-box: fill-box; animation: abtBarGrow 1.5s cubic-bezier(.22,.61,.36,1) forwards; }
@keyframes abtBarGrow { to { transform: scaleX(1); } }
.abt-pulse-ring { transform-box: fill-box; transform-origin: center; animation: abtPulseRing 2.2s ease-out infinite; }
@keyframes abtPulseRing { 0% { transform: scale(.6); opacity: .7; } 100% { transform: scale(2.2); opacity: 0; } }
.abt-plus-one { animation: abtPlusOne 2.4s ease-in-out infinite; }
@keyframes abtPlusOne { 0% { opacity: 0; transform: translateY(0); } 18% { opacity: 1; } 60% { opacity: 0; transform: translateY(-20px); } 100% { opacity: 0; } }

/* ---- SVG 3: Modbus TCP flow ---- */
.abt-mb-flow { stroke-dasharray: 6 8; animation: abtMbFlow .9s linear infinite; }
@keyframes abtMbFlow { to { stroke-dashoffset: -28; } }
.abt-mb-val { animation: abtValFlicker 3.2s ease-in-out infinite; }
@keyframes abtValFlicker { 0%, 46%, 54%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* ---- SVG 4: dashboard builder ---- */
.abt-db-bar { transform-box: fill-box; transform-origin: bottom; animation: abtDbBar 2.6s ease-in-out infinite alternate; }
@keyframes abtDbBar { from { transform: scaleY(.5); } to { transform: scaleY(1); } }
.abt-db-line { stroke-dasharray: 420; stroke-dashoffset: 420; animation: abtDbLine 3s .3s ease forwards; }
@keyframes abtDbLine { to { stroke-dashoffset: 0; } }
.abt-db-donut { animation: abtDbDonut 1.9s .3s ease forwards; }
@keyframes abtDbDonut { to { stroke-dashoffset: 7; } }
.abt-db-ghost { animation: abtDbGhost 4.6s ease-in-out infinite; }
@keyframes abtDbGhost {
	0%   { opacity: 0; transform: translate(58px, -88px); }
	22%  { opacity: 1; }
	68%  { opacity: 1; transform: translate(0, 0); }
	86%  { opacity: 1; transform: translate(0, 0); }
	100% { opacity: 0; transform: translate(0, 0); }
}

/* ---- replay the panel graphics when they scroll into view ----
   These run once with `forwards`, so on load they finish long before the visitor
   reaches the section and you arrive at a static picture. The script below
   restarts them on entry by flicking this class on and off.

   Deliberately a *replay*, not a gate: never hold the graphics back waiting for
   a signal. If the script or the observer never runs, the artwork still settles
   into its correct finished state on load -- it just animated early. Pausing
   instead would leave the panels blank whenever that signal failed to arrive. */
.abt-cap-panel.abt-replay svg * { animation: none !important; }

@media (prefers-reduced-motion: reduce) {
	.abt-ttl-seg, .abt-ttl-playhead, .abt-live-dot, .abt-oee-arc, .abt-oee-bar,
	.abt-pulse-ring, .abt-plus-one, .abt-mb-flow, .abt-mb-val, .abt-db-bar,
	.abt-db-line, .abt-db-donut, .abt-db-ghost { animation: none !important; }
	.abt-ttl-seg { opacity: 1; transform: none; }
	.abt-oee-arc { stroke-dashoffset: 72; }
	.abt-oee-bar { transform: scaleX(1); }
	.abt-db-line { stroke-dashoffset: 0; }
	.abt-db-donut { stroke-dashoffset: 7; }
	.abt-db-ghost { opacity: 0; }
}

/* ----- footer ----- */
#footer { background: #12152B; border: 0; margin-top: 0; }
#footer .abt-footer-title { color: #FFF; font-weight: 700; letter-spacing: 2px; font-size: 16.4px; line-height: 1; }
/* keep the footer wordmark tight (collapse the inherited tall line-height) */
#footer .abt-logo-sub { line-height: 1; margin-top: 3px; }
#footer p, #footer a { color: rgba(255,255,255,.6); }
#footer a:hover { color: var(--abt-cyan); }
#footer .footer-copyright { background: #0D0F20 !important; border: 0; }
#footer .footer-copyright p { color: rgba(255,255,255,.4); }

/* ==========================================================================
   Language switcher (TH / EN)
   Sits between the main nav and the header CTA on desktop; on smaller
   viewports it moves ahead of the burger so it stays reachable.
   ========================================================================== */
#header .abt-lang {
	display: flex;
	align-items: center;
	margin-left: 18px;
	flex: 0 0 auto;
}
#header .abt-lang-btn {
	display: inline-block;
	padding: 5px 9px;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .5px;
	line-height: 1;
	color: rgba(255,255,255,.55) !important;
	text-decoration: none;
	transition: color .25s ease, background-color .25s ease, box-shadow .25s ease;
}
#header .abt-lang-btn:hover,
#header .abt-lang-btn:focus-visible {
	color: #FFF !important;
	background: rgba(255,255,255,.08);
}
#header .abt-lang-btn.is-active {
	color: #FFF !important;
	background: rgba(84,198,221,.18);
	box-shadow: inset 0 0 0 1px rgba(84,198,221,.45);
}
#header .abt-lang-sep {
	display: block;
	width: 1px;
	height: 13px;
	margin: 0 3px;
	background: rgba(255,255,255,.2);
}
@media (max-width: 1199px) {
	#header .abt-lang { order: -1; margin-left: 0; margin-right: 12px; }
}

/* ==========================================================================
   Thai typography
   Poppins carries no Thai glyphs, so the browser falls through to Noto Sans
   Thai per character -- Latin stays Poppins, Thai renders properly. Thai also
   needs looser leading (tone marks stack above and below) and far tighter
   tracking than the uppercase Latin labels this theme is built around.
   ========================================================================== */
body,
h1, h2, h3, h4, h5, h6,
.abt-stat-value {
	font-family: 'Poppins', 'Noto Sans Thai', Arial, sans-serif;
}
html[lang="th"] svg text,
html[lang="th"] svg tspan {
	font-family: 'Poppins', 'Noto Sans Thai', sans-serif;
}

html[lang="th"] body { line-height: 1.9; }
html[lang="th"] h1, html[lang="th"] h2, html[lang="th"] h3,
html[lang="th"] h4, html[lang="th"] h5, html[lang="th"] h6 { line-height: 1.4; }

/* Tracking meant for Latin small-caps ruins Thai -- neutralise it. */
html[lang="th"] #header .abt-logo-sub,
html[lang="th"] #header .header-nav-main nav > ul > li > a.nav-link,
html[lang="th"] #header .abt-header-cta,
html[lang="th"] .abt-lang-btn,
html[lang="th"] .abt-hero .abt-hero-label,
html[lang="th"] .abt-hero .abt-stat-label,
html[lang="th"] .abt-section-label,
html[lang="th"] .abt-cap-kicker,
html[lang="th"] .abt-badge-pill,
html[lang="th"] .abt-cta-badge,
html[lang="th"] .abt-feature-link,
html[lang="th"] .abt-shot-caption,
html[lang="th"] #footer .abt-footer-title {
	letter-spacing: .3px !important;
}
html[lang="th"] #header .abt-logo-sub { font-size: 11.5px; }

/* Thai headlines run longer than the English originals -- give them room. */
html[lang="th"] .abt-hero h1 { font-size: 40.4px; line-height: 1.32; }
html[lang="th"] .abt-section-title { font-size: 32.4px; line-height: 1.38; }
html[lang="th"] .abt-cap-heading { font-size: 25.2px; line-height: 1.42; }
html[lang="th"] .abt-cap-list li,
html[lang="th"] .abt-benefit-list li,
html[lang="th"] .abt-device-check li,
html[lang="th"] .abt-cta-points li { line-height: 1.75; }
@media (max-width: 991px) {
	html[lang="th"] .abt-hero h1 { font-size: 31px; }
	html[lang="th"] .abt-section-title { font-size: 27.6px; }
}

/* ==========================================================================
   Page text scale (+2px pass)
   Everything above declares its own px size. These are the elements that took
   their size from the Porto theme instead -- the body default, the .text-N
   helpers, bare <h2>, the buttons and the footer. Pinned to the same +2px so
   the page scales as one, instead of only the parts this skin happens to style.
   Values in the comments are the pre-bump sizes.
   ========================================================================== */
body { font-size: 16px; }                            /* 14   */
.text-4 { font-size: 18.8px !important; }            /* 16.8 */
.text-5 { font-size: 23px !important; }              /* 21   */
.abt-cta h2 { font-size: 32.8px; }                   /* 30.8 */
.btn-abt-gradient, .btn-abt-outline { font-size: 14.8px; }  /* 12.8 */
#footer p, #footer a { font-size: 14.6px; }          /* 12.6 */
#footer .footer-copyright p { font-size: 13.3px; }   /* 11.34 */

/* ---- header breathing room after the +2px pass ----
   The six nav labels at 15px no longer fit beside the logo, language switcher
   and CTA on narrower desktops (English is the tight case: OVERVIEW ...
   CONTACT US totals 760px). Rather than shrink the type back, reclaim the
   whitespace: tighten the item padding, and hold the header CTA back to 1400px
   -- it is already hidden below 1200px, so this just moves an existing
   threshold rather than introducing a new behaviour. */
@media (min-width: 1200px) and (max-width: 1439px) {
	#header .header-nav-main nav > ul > li > a.nav-link { padding-left: 9px; padding-right: 9px; }
	#header .header-nav-main nav > ul > li > a.nav-link:after { left: 9px; right: 9px; }
}
@media (min-width: 1200px) and (max-width: 1399px) {
	#header .abt-header-cta-wrap { display: none !important; }
}

/* ---- hero headline: a sentence, not a phrase ----
   The headline is now a full sentence, so the col-lg-5 slot can only hold it in
   two lines at full desktop width. Between the tablet rule (<=991px) and 1400px
   the slot narrows from 570px to 376px, and at full size both languages spill a
   stray fragment onto an extra line.

   Two size steps handle it, because one size cannot serve a slot that ranges
   from 549px down to 376px. text-wrap: pretty covers the rest, keeping the last
   line from collapsing to a single orphaned word at the narrow end where a third
   line is simply unavoidable.

   Note the Thai rules are not optional here: html[lang="th"] .abt-hero h1 in the
   language block outranks a bare .abt-hero h1, so a band that omits it would
   leave Thai at full desktop size. */
.abt-hero h1 { text-wrap: pretty; }
@media (min-width: 1200px) and (max-width: 1399px) {
	.abt-hero h1 { font-size: 38px; }
	html[lang="th"] .abt-hero h1 { font-size: 33px; }
}
/* 992-1199 is the tightest the headline ever gets: a 376px column, narrower
   than the full-width stack below 992px. */
@media (min-width: 992px) and (max-width: 1199px) {
	.abt-hero h1 { font-size: 31px; }
	html[lang="th"] .abt-hero h1 { font-size: 31px; }
}