:root{--ink:#17211c;--green:#17392d;--green-2:#315d4d;--green-3:#6b9f89;--rust:#b66745;--gold:#dba829;--paper:#fff;--smoke:#f5f7f3;--muted:#657069;--line:#dce3de;--dark:#10251d;--radius:20px;--shadow:0 22px 56px rgba(17,48,37,.11)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--ink);font-family:Manrope,Arial,sans-serif;line-height:1.5}
body.admin-bar .site-header{top:32px}
body>.skip-link{position:fixed;left:12px;top:-80px;z-index:99999;background:#fff;color:#17392d;padding:10px 14px;border-radius:6px;box-shadow:var(--shadow)}
body>.skip-link:focus{top:12px}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
button,select{font:inherit}
em{font-style:normal;color:var(--rust)}
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.button{display:inline-flex;align-items:center;justify-content:center;gap:14px;padding:15px 22px;border:0;border-radius:6px;background:var(--green);color:#fff;font-size:13px;font-weight:750;box-shadow:0 12px 26px rgba(23,57,45,.18);transition:transform .2s,background .2s}
.button:hover,.button:focus-visible{transform:translateY(-2px);background:#0f2e24}
.button-small{padding:12px 17px}
.full{width:100%}
.text-link{display:inline-flex;align-items:center;gap:10px;color:var(--green-2);font-size:13px;font-weight:750}
.eyebrow{display:flex;align-items:center;gap:10px;margin:0 0 20px;color:var(--green-2);font-size:10px;font-weight:800;letter-spacing:2.2px;text-transform:uppercase}
.eyebrow>span{width:24px;height:2px;background:var(--rust)}
.eyebrow.light{color:#cfddd7}
.section{padding:96px 6vw}
.section h2,.trainer-heading h2,.feedback-heading h2,.training-impact h2,.contact h2{margin:0;color:var(--ink);font-size:clamp(38px,4.4vw,63px);font-weight:500;line-height:1.08;letter-spacing:-2.8px}

/* Header and language control */
.site-header{position:sticky;top:0;z-index:100;display:flex;align-items:center;justify-content:space-between;min-height:82px;padding:0 5vw;background:rgba(255,255,255,.96);border-bottom:1px solid rgba(220,227,222,.8);backdrop-filter:blur(16px)}
.brand-logo,.custom-logo-link{display:block;flex:0 0 auto}
.brand-logo img,.custom-logo{width:88px;max-height:70px;object-fit:contain}
.primary-nav{display:flex;align-items:center;gap:24px;font-size:12px;font-weight:720}
.primary-nav>a:not(.button):hover{color:var(--rust)}
.nav-toggle{display:none;width:42px;height:42px;padding:9px;border:0;background:transparent}
.nav-toggle>span:not(.screen-reader-text){display:block;height:2px;margin:5px 0;background:var(--green)}
.training-dropdown{position:relative}
.training-dropdown summary{display:flex;align-items:center;gap:7px;padding:11px 15px;border:1px solid transparent;border-radius:9px;color:var(--green);cursor:pointer;list-style:none;transition:background .2s,border-color .2s,color .2s,box-shadow .2s}
.training-dropdown summary::-webkit-details-marker{display:none}
.training-dropdown summary:after{content:'⌄';margin-left:1px;color:#7f8c85;font-size:13px;transition:transform .2s,color .2s}
.training-dropdown summary:hover,.training-dropdown summary:focus-visible,.training-dropdown[open] summary{border-color:#d8e2dc;background:#f3f7f4;color:#143a2d;box-shadow:0 6px 16px rgba(17,48,37,.07);outline:none}
.training-dropdown[open] summary:after{transform:rotate(180deg);color:var(--rust)}
.training-menu{position:absolute;left:-135px;top:calc(100% + 12px);width:min(980px,92vw);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:12px;border:1px solid #dce5df;border-radius:16px;background:#f6f9f7;box-shadow:0 28px 70px rgba(17,48,37,.2);animation:trainingMenuIn .18s ease-out;overflow:hidden}
.training-menu:before{content:'';position:absolute;left:154px;top:-7px;width:14px;height:14px;transform:rotate(45deg);border-left:1px solid #dce5df;border-top:1px solid #dce5df;background:#f6f9f7}
.training-menu section{position:relative;z-index:1;padding:18px 16px 16px;border:1px solid #e1e8e3;border-radius:12px;background:#fff;box-shadow:0 7px 18px rgba(17,48,37,.045)}
.training-category-heading{display:flex!important;align-items:flex-start;justify-content:space-between;gap:8px;margin:0 0 9px;padding:0 0 12px!important;border-bottom:1px solid #e5ebe7;color:var(--green)!important}
.training-category-heading strong{display:block;margin:0;color:var(--green);font-size:12px;line-height:1.25}
.training-category-heading span{flex:0 0 auto;color:var(--rust);font-size:8px;font-weight:800;white-space:nowrap}
.training-menu>a,.training-menu section>a:not(.training-category-heading){display:block;margin:1px -7px;padding:7px 8px;border-radius:7px;color:var(--muted);font-size:10px;line-height:1.42;transition:background .17s,color .17s,transform .17s}
.training-menu section>a:not(.training-category-heading):hover,.training-menu section>a:not(.training-category-heading):focus-visible{background:#f2f7f3;color:var(--rust);transform:translateX(2px);outline:none}
@keyframes trainingMenuIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.language-select{position:relative}
.language-select select{height:42px;padding:0 32px 0 12px;border:1px solid #d6ded8;border-radius:4px;background:#fff;color:var(--green);font-size:11px;font-weight:800;cursor:pointer}
#google_translate_element,.goog-te-banner-frame,.goog-te-gadget,body>.skiptranslate{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;opacity:0!important;pointer-events:none!important}
body{top:0!important}

/* Slider */
.training-slider{position:relative;min-height:760px;padding:68px 6vw 32px;background:linear-gradient(135deg,#fff 0%,#f2f6f2 100%);overflow:hidden}
.training-slider:after{content:'C++ · QT · QML';position:absolute;right:-35px;top:36px;color:rgba(23,57,45,.035);font-size:10vw;font-weight:800;letter-spacing:-7px;white-space:nowrap}
.slides-stage{position:relative;min-height:605px;z-index:2}
.hero-slide{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(420px,1fr);align-items:center;gap:6vw;visibility:hidden;opacity:0;transform:translateX(20px);transition:opacity .5s,transform .5s,visibility .5s}
.hero-slide.is-active{position:relative;visibility:visible;opacity:1;transform:none}
.slide-copy h1{max-width:720px;margin:0;font-size:clamp(48px,5vw,72px);font-weight:400;line-height:1.12;letter-spacing:-1.5px;text-wrap:balance}
.slide-copy h1>span{color:var(--ink)}
.slide-copy h1>em{color:var(--rust);font:inherit}
.slide-copy>p:not(.eyebrow){max-width:640px;margin:28px 0;color:var(--muted);font-size:17px;line-height:1.8}
.hero-actions{display:flex;align-items:center;gap:27px;margin-top:30px}
.slide-count{display:flex;align-items:end;gap:8px;margin-top:52px;color:#949e98}
.slide-count b{color:var(--rust);font-size:28px}
.slide-count span{padding-bottom:5px;font-size:10px}
.slide-visual{min-width:0}
.product-screen{height:480px;overflow:hidden;border-radius:12px;background:#11251e;color:#fff;box-shadow:0 32px 75px rgba(23,33,28,.24)}
.screen-bar{height:48px;display:flex;align-items:center;gap:7px;padding:0 17px;background:#1d382e}
.screen-bar i{width:8px;height:8px;border-radius:50%;background:var(--rust)}
.screen-bar i:nth-child(2){background:var(--gold)}
.screen-bar i:nth-child(3){background:#6ab08f}
.screen-bar span{margin-left:9px;color:#9eb2a8;font:10px monospace}
.code-demo{height:calc(100% - 48px);display:flex;flex-direction:column;gap:16px;padding:44px;background:radial-gradient(circle at 80% 10%,#2e5546,#11251e 68%)}
.code-demo>small,.medical-demo header,.performance-demo header{color:#8eb1a2;font-size:8px;letter-spacing:1.7px}
.code-demo code{padding:13px 15px;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.035);font-size:11px}
.code-demo code span{margin-right:12px;color:#7d978c}
.code-demo .code-success{border-color:rgba(104,210,166,.35);color:#83d8b4}
.screen-metric{display:flex;align-items:end;justify-content:space-between;margin-top:auto}
.screen-metric strong{font-size:34px}
.screen-metric small{color:#9cb0a6;font-size:8px;letter-spacing:1.2px;text-transform:uppercase}
.hmi-demo{height:calc(100% - 48px);display:grid;grid-template-columns:.8fr 1.2fr;grid-template-rows:1fr auto;gap:25px;padding:38px;background:radial-gradient(circle,#2b5847,#0f211a 70%)}
.hmi-gauge{width:220px;height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;margin:auto;border:9px solid #315c4a;border-top-color:var(--rust);border-right-color:var(--gold);border-radius:50%}
.hmi-gauge strong{font-size:68px;font-weight:450}
.hmi-gauge small{color:#7ec8a8;font-size:9px;letter-spacing:2px}
.hmi-route{align-self:center;padding:27px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08)}
.hmi-route span{display:block;color:#8db0a1;font-size:8px;letter-spacing:1.6px}
.hmi-route strong{display:block;margin:8px 0 28px;font-size:30px}
.hmi-route i{display:block;width:82%;height:4px;background:linear-gradient(90deg,#b66745 62%,#456758 62%)}
.hmi-controls{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding-top:14px;border-top:1px solid #345247;text-align:center}
.hmi-controls span{padding:10px;background:rgba(255,255,255,.035);font-size:14px}
.hmi-controls small{color:#8ba69b;font-size:7px}
.medical-demo{height:calc(100% - 48px);padding:28px;background:#06191c}
.medical-demo header,.performance-demo header{display:flex;justify-content:space-between}
.medical-demo header b{color:#68d5a7}
.medical-wave{height:210px;margin:22px 0;display:flex;flex-direction:column;justify-content:space-around;background-image:linear-gradient(rgba(73,116,111,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(73,116,111,.12) 1px,transparent 1px);background-size:18px 18px}
.medical-wave i{height:35px;background-repeat:repeat-x;background-size:180px 35px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='35'%3E%3Cpath d='M0 24h25l8-7 6 14 9-27 10 25 8-5h114' fill='none' stroke='%236bd0a8' stroke-width='2'/%3E%3C/svg%3E");animation:wave 3s linear infinite}
.medical-wave i:nth-child(2){filter:hue-rotate(45deg);animation-duration:4s}.medical-wave i:nth-child(3){filter:hue-rotate(150deg);animation-duration:5s}
.medical-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.medical-stats span{padding:12px;background:#0a2729;border:1px solid rgba(100,190,166,.15)}
.medical-stats small{display:block;color:#76a297;font-size:7px}.medical-stats b{display:block;margin-top:6px;color:#79d7b1;font-size:19px}
.performance-demo{height:calc(100% - 48px);padding:30px;background:#f5f9f6;color:var(--ink)}
.performance-demo header b{color:var(--green-2)}
.performance-bars{height:250px;display:flex;align-items:end;gap:8px;margin:26px 0 18px;border-bottom:1px solid #cfdad3;background-image:linear-gradient(rgba(80,120,100,.08) 1px,transparent 1px);background-size:100% 25%}
.performance-bars i{flex:1;background:#6c9d87;border-radius:3px 3px 0 0;animation:bar-pulse 2.3s ease-in-out infinite alternate}
.performance-bars i:nth-child(4n){background:var(--rust)}
.performance-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px}.performance-stats span{padding:13px;background:#e7eee9;font-size:12px}.performance-stats b{color:var(--green-2)}
.slider-controls{position:relative;z-index:3;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #d5ddd7}
.slider-controls button{display:grid;grid-template-columns:auto 1fr;gap:5px 12px;padding:17px 18px;border:0;border-right:1px solid #d5ddd7;background:transparent;color:#7c8781;text-align:left;cursor:pointer}
.slider-controls button span{font-size:8px}.slider-controls button i{height:2px;align-self:center;background:#d4dbd6}.slider-controls button b{grid-column:1/-1;font-size:11px;font-weight:400}.slider-controls button[aria-selected=true]{color:var(--green)}.slider-controls button[aria-selected=true] i{background:var(--rust)}

.trust-bar{min-height:90px;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px 6vw;background:#15342a;color:#fff}
.trust-bar span{color:#9bb3a9;font-size:9px;letter-spacing:1.6px;text-transform:uppercase}
.trust-bar b{font-size:12px}

/* Intro */
.intro{display:grid;grid-template-columns:1fr 1fr;column-gap:8vw}
.intro-copy{padding-top:34px}
.intro-copy>p,.section-heading>p,.audience-title>p,.trainer-heading>p{margin:0 0 24px;color:var(--muted);font-size:15px;line-height:1.8}
.feature-grid{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:72px;background:var(--line);border:1px solid var(--line)}
.feature-grid article{min-height:238px;padding:31px;background:#fff}
.feature-grid article>span,.audience-grid article>span{color:var(--rust);font-size:10px;font-weight:800}
.feature-grid h3{margin:45px 0 10px;font-size:18px}.feature-grid p,.audience-grid p{color:var(--muted);font-size:12px;line-height:1.75}

/* Catalogue */
.programs{background:#15342a;color:#fff}
.section-heading{display:grid;grid-template-columns:1.2fr .8fr;align-items:end;gap:8vw;margin-bottom:32px}
.section-heading h2{color:#fff}.section-heading>p{color:#b7c7c0}
.catalogue-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;max-width:1180px;margin:0 auto 38px;border:0}
.catalogue-nav a{position:relative;isolation:isolate;display:flex;aspect-ratio:1.28/1;min-width:0;flex-direction:column;align-items:flex-start;justify-content:flex-end;overflow:hidden;padding:24px;border:1px solid rgba(255,255,255,.22);border-radius:24px;background:linear-gradient(145deg,#34735d,#245141 72%,#1d4638);box-shadow:0 16px 34px rgba(3,19,13,.22);color:#fff;font-size:clamp(17px,1.55vw,23px);font-weight:800;line-height:1.14;letter-spacing:-.15px;transition:transform .24s,box-shadow .24s,border-color .24s,filter .24s}
.catalogue-nav a:nth-child(2){background:linear-gradient(145deg,#b66f4f,#8d4f38 72%,#713d2d)}.catalogue-nav a:nth-child(3){background:linear-gradient(145deg,#4f7887,#355d6b 72%,#294b57)}.catalogue-nav a:nth-child(4){background:linear-gradient(145deg,#75668d,#584b70 72%,#453b5b)}
.catalogue-nav a:hover{transform:translateY(-5px);border-color:rgba(255,255,255,.48);box-shadow:0 24px 46px rgba(3,19,13,.3);filter:brightness(1.06)}
.catalogue-nav a:before{position:absolute;right:20px;top:15px;z-index:-1;color:rgba(255,255,255,.20);font-size:32px;font-weight:800;letter-spacing:-2px}.catalogue-nav a:nth-child(1):before{content:'C++'}.catalogue-nav a:nth-child(2):before{content:'Qt/QML'}.catalogue-nav a:nth-child(3):before{content:'PERF'}.catalogue-nav a:nth-child(4):before{content:'A/D'}
.catalogue-nav span{position:absolute;left:20px;top:18px;display:grid;place-items:center;width:34px;height:34px;border:1px solid rgba(255,255,255,.32);border-radius:50%;background:rgba(255,255,255,.14);color:#fff;font-size:9px;font-weight:800}
.catalogue-groups{display:flex;flex-direction:column;gap:42px}
.catalogue-group{scroll-margin-top:96px}
.catalogue-group>header{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:15px;margin-bottom:15px;padding-bottom:12px;border-bottom:1px solid #3c5b4f}
.catalogue-group>header>span{display:grid;place-items:center;width:39px;height:39px;border:1px solid #58786a;border-radius:50%;color:#d6ae91;font-size:9px;font-weight:700}
.catalogue-group h3{margin:0;font-size:21px;font-weight:500;line-height:1.2}.catalogue-group header p{margin:4px 0 0;color:#aebfb8;font-size:9px;line-height:1.5}
.course-accordion{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:start}
.catalogue-course{min-width:0;border:1px solid #385a4b;border-radius:18px;background:linear-gradient(145deg,#1d4034,#18382e);overflow:hidden;box-shadow:0 12px 28px rgba(4,22,15,.16);transition:border-color .22s,background .22s,transform .22s,box-shadow .22s}
.catalogue-course:hover{border-color:#cf9d7b;background:linear-gradient(145deg,#254b3e,#1b3c31);transform:translateY(-4px);box-shadow:0 20px 36px rgba(4,22,15,.28)}
.catalogue-course summary{min-height:166px;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto 1fr auto;align-items:start;gap:11px 14px;padding:20px;cursor:pointer;list-style:none}.catalogue-course summary::-webkit-details-marker{display:none}
.catalogue-course[open]{grid-column:1/-1;background:#fff;color:var(--ink);border-color:#bd967e;transform:none;box-shadow:0 18px 38px rgba(4,22,15,.2)}
.catalogue-course[open] summary{min-height:auto;grid-template-columns:auto minmax(0,1fr) auto auto;grid-template-rows:auto;align-items:center;padding:17px 20px}
.course-no{grid-column:1;grid-row:1;display:grid;place-items:center;width:34px;height:34px;border:1px solid #577669;border-radius:50%;color:#e0b28f;font-size:8.5px;font-weight:700}
.course-title{grid-column:1/-1;grid-row:2;display:flex;min-width:0;flex-direction:column;gap:7px;align-self:center}.course-title strong{font-size:17px;font-weight:500;line-height:1.3}.course-title small{display:-webkit-box;overflow:hidden;color:#afc0b9;font-size:9.5px;line-height:1.55;-webkit-box-orient:vertical;-webkit-line-clamp:3}.catalogue-course[open] .course-title small{color:var(--muted);-webkit-line-clamp:2}
.course-tag{grid-column:1;grid-row:3;justify-self:start;align-self:end;padding:5px 8px;border:1px solid #557568;border-radius:99px;color:#c8d6d0;font-size:7px;line-height:1;text-transform:uppercase;white-space:nowrap}.catalogue-course[open] .course-tag{border-color:#d9e0db;color:var(--green-2)}
.course-toggle{grid-column:2;grid-row:3;justify-self:end;align-self:end;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#294b3e;color:#fff;font-size:15px;line-height:1;transition:transform .22s,background .22s}.catalogue-course[open] .course-no{grid-column:1;grid-row:1}.catalogue-course[open] .course-title{grid-column:2;grid-row:1}.catalogue-course[open] .course-tag{grid-column:3;grid-row:1}.catalogue-course[open] .course-toggle{grid-column:4;grid-row:1;transform:rotate(45deg);background:#294b3e;color:#fff}
.course-content{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);gap:30px;padding:30px;border-top:1px solid var(--line)}
.curriculum-label{margin:0 0 18px;color:var(--rust);font-size:9px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase}
.curriculum ol{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:0;padding:0;list-style:none}.curriculum li{display:flex;gap:10px;padding:10px 12px;background:#f4f7f4;color:#526159;font-size:10px}.curriculum li span{color:var(--rust);font-weight:800}
.course-content aside{padding:20px;background:#f4f7f4;border-radius:12px}.course-visual{position:relative;min-height:170px;padding:22px;overflow:hidden;border-radius:10px;background:linear-gradient(145deg,#16382d,#2f6550);color:#fff}.course-visual small{font-size:8px;letter-spacing:1.4px}.course-visual strong{display:block;max-width:85%;margin-top:18px;font-size:20px}.course-visual>div{position:absolute;left:22px;right:22px;bottom:22px;height:48px;display:flex;align-items:end;gap:6px}.course-visual i{flex:1;height:40%;background:#7fb49f}.course-visual i:nth-child(2),.course-visual i:nth-child(5){height:85%;background:#d18b66}.course-visual i:nth-child(3){height:62%}.course-visual i:nth-child(4){height:73%}
.course-meta{display:flex;flex-wrap:wrap;gap:7px;margin:13px 0}.course-meta span{padding:6px 8px;border:1px solid #d5ded8;border-radius:99px;color:var(--green-2);font-size:8px}.course-content aside p{color:var(--muted);font-size:10px;line-height:1.7}.course-content aside>a{display:flex;justify-content:space-between;margin-top:17px;color:var(--rust);font-size:10px;font-weight:800}
.catalogue-clients{margin:70px -6vw -96px;padding:34px 0 25px;background:#fff;color:var(--ink)}
.catalogue-client-title{display:flex;align-items:end;justify-content:space-between;padding:0 6vw 20px}.catalogue-client-title span{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:1.4px}.catalogue-client-title small{color:#7d8882;font-size:9px}
.client-window{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.client-track{display:flex;width:max-content;animation:marquee 95s linear infinite}.client-track:hover{animation-play-state:paused}
.client-set{display:flex;gap:14px;padding-right:14px}.client-logo{width:175px;height:88px;flex:0 0 175px;display:grid;place-items:center;padding:13px;border:1px solid #e0e5e1;background:#fff}.client-logo img{width:100%;height:100%;object-fit:contain}.client-logo strong{font-size:10px;text-align:center}
.catalogue-clients>p{margin:19px 6vw 0;color:#7a847f;font-size:8px;text-align:center}

/* Audience and trainer */
.audience{background:linear-gradient(180deg,#fff,#f5f7f4)}
.audience-title{display:grid;grid-template-columns:1.15fr .85fr;align-items:end;gap:8vw}
.audience-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:48px}
.audience-grid article{min-height:280px;display:flex;flex-direction:column;padding:27px 24px;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:0 10px 28px rgba(17,48,37,.05)}
.audience-grid h3{margin:34px 0 10px;font-size:18px}.audience-grid a{margin-top:auto;padding-top:18px;color:var(--green-2);font-size:10px;font-weight:800}
.trainer-section{padding:92px 6vw 100px;background:linear-gradient(180deg,#edf2ee,#f8f6f2);border-top:1px solid var(--line)}
.trainer-heading{display:grid;grid-template-columns:1.15fr .85fr;align-items:end;gap:7vw;max-width:1480px;margin:0 auto}
.trainer-card{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(300px,410px);align-items:center;gap:6vw;max-width:1480px;margin:45px auto 0;padding:clamp(32px,4.5vw,65px);border:1px solid var(--line);border-radius:26px;background:#fff;box-shadow:var(--shadow)}
.trainer-copy h2{margin:0;color:var(--green);font-size:clamp(36px,4vw,57px);font-weight:500;letter-spacing:-2px}.trainer-role{color:var(--rust)!important;font-weight:750}.trainer-copy>p{color:var(--muted);font-size:13px;line-height:1.75}.credentials{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:18px 0}.credentials img{width:100%;height:66px;object-fit:contain;padding:7px;border:1px solid var(--line);background:#fff}
.trainer-copy blockquote{margin:18px 0;padding:17px 20px;border-left:3px solid var(--gold);background:#f8faf8;color:var(--green-2);font-size:13px;line-height:1.7}.trainer-details{border:1px solid var(--line);border-radius:12px;overflow:hidden}.trainer-details summary{padding:16px 18px;color:var(--green);font-size:13px;font-weight:750;cursor:pointer}.trainer-details>div{padding:2px 18px 18px;color:var(--muted);font-size:11px;line-height:1.7}.trainer-links{display:flex;gap:20px}.trainer-links a{color:var(--rust);font-weight:750}
.trainer-portrait{margin:0;overflow:hidden;border-radius:20px;background:#fff;box-shadow:0 22px 52px rgba(17,48,37,.13)}.trainer-portrait img{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:center top}.trainer-portrait figcaption{display:flex;flex-direction:column;gap:4px;padding:16px 20px;background:var(--green);color:#fff}.trainer-portrait figcaption span{color:#d8b08f;font-size:8px;letter-spacing:1.6px;text-transform:uppercase}.trainer-portrait figcaption strong{font-size:12px}

/* Feedback and impact */
.feedback-section{padding:92px 6vw 82px;background:linear-gradient(180deg,#fff,#f6f8f5)}
.feedback-heading{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(300px,.58fr);align-items:stretch;gap:6vw;max-width:1480px;margin:0 auto 40px}.feedback-heading>div{display:flex;flex-direction:column;justify-content:center}.feedback-heading>div>p:last-child{max-width:790px;margin:23px 0 0;color:var(--muted);font-size:14px;line-height:1.8}
.google-rating{display:flex;flex-direction:column;justify-content:center;gap:15px;padding:25px;border:1px solid var(--line);border-radius:21px;background:#fff;box-shadow:0 17px 42px rgba(17,48,37,.08)}
.google-brand{display:flex;align-items:center;gap:13px}.google-brand>span,.google-mark{display:grid;place-items:center;width:46px;height:46px;flex:0 0 46px;border:4px solid #fff;border-radius:50%;background:conic-gradient(from 35deg,#4285f4 0 25%,#34a853 0 50%,#fbbc05 0 75%,#ea4335 0);box-shadow:0 0 0 1px #dce2de;color:#fff;font-size:21px;font-weight:900}.google-brand>div{display:flex;flex-direction:column;gap:3px}.google-brand strong{font-size:16px}.google-brand small{color:#7b8780;font-size:8px}.rating-value{display:flex;align-items:baseline;gap:5px}.rating-value strong{font-size:56px;line-height:1;letter-spacing:-3px}.rating-value span{color:#66736c;font-size:19px;font-weight:800}.stars{display:flex;align-items:center;gap:11px}.stars>span{color:#f4b400;font-size:17px;letter-spacing:3px}.stars small{color:#78847e;font-size:8px;font-weight:800;letter-spacing:1px;text-transform:uppercase}.google-rating>p{margin:0;color:var(--muted);font-size:11px}.google-rating>a{display:flex;justify-content:space-between;padding-top:13px;border-top:1px solid #e5ebe7;color:var(--rust);font-size:10px;font-weight:800}
.review-fallback{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:17px;max-width:1480px;margin:0 auto;padding:23px 25px;border-radius:18px;background:var(--green);color:#fff}.review-fallback h3{margin:0 0 5px;font-size:16px}.review-fallback p{max-width:760px;margin:0;color:#c6d6cf;font-size:10px;line-height:1.65}.review-fallback .button{background:#fff;color:var(--green);box-shadow:none}
.training-impact{display:grid;grid-template-columns:.85fr 1.15fr;align-items:center;gap:7vw;padding:84px 6vw;background:var(--green-2);color:#fff}.training-impact h2{color:#fff}.impact-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:#537767;border:1px solid #537767}.impact-grid article{min-height:145px;display:flex;flex-direction:column;justify-content:center;padding:24px;background:#315d4d}.impact-grid strong{font-size:37px;font-weight:500}.impact-grid strong:after{content:'+'}.impact-grid span{margin-top:5px;color:#c6d7d0;font-size:9px;text-transform:uppercase;letter-spacing:1px}

/* Contact */
.contact{display:grid;grid-template-columns:1.1fr .9fr;gap:9vw;padding:96px 7vw;background:#10251d;color:#fff}.contact h2{color:#fff}.contact>div:first-child>p:last-child{max-width:650px;color:#b9cbc3;line-height:1.8}.contact-card{padding:36px;background:#fff;color:var(--ink)}.contact-card h3{margin:0;font-size:23px}.contact-card>p{color:var(--muted);font-size:12px}.contact-person{display:flex;flex-direction:column;gap:5px;margin:19px 0 21px;padding:15px 17px;border:1px solid var(--line);border-left:3px solid var(--gold);background:#f8faf8}.contact-person span{color:#77847d;font-size:8px;letter-spacing:1.2px;text-transform:uppercase}.contact-person strong{font-size:14px}.contact-person a{color:var(--rust);font-size:10px;font-weight:800}.contact-lines{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}.contact-lines a{padding:13px;background:var(--smoke);font-size:11px;font-weight:750}.contact-lines span{display:block;margin-bottom:4px;color:var(--muted);font-size:7px;text-transform:uppercase}

/* Footer */
.site-footer{display:grid;grid-template-columns:minmax(190px,.9fr) minmax(320px,1.25fr) minmax(390px,1.75fr);gap:30px 4vw;align-items:start;padding:48px 6vw 25px;border-top:4px solid #e7ae21;background:radial-gradient(circle at 12% 0,rgba(255,188,16,.08),transparent 26%),linear-gradient(135deg,#0b241e,#16382e 58%,#0d2b24);color:#ecf4f0}.footer-company img{width:180px;padding:13px;border-radius:14px;background:#fff}.footer-company p{color:#b9cbc3;font-size:10px;line-height:1.7}.footer-location address{display:flex;max-width:390px;flex-direction:column;gap:9px;color:#d4e1db;font-style:normal;font-size:12px;line-height:1.78}.footer-location address span{display:block;text-align:justify;text-justify:inter-word;letter-spacing:.05px}.footer-location strong{color:#fff;font-size:17px;line-height:1.35}.footer-location a{width:max-content;color:#f1c96f;font-weight:750}.footer-map-cluster{display:grid;grid-template-columns:minmax(250px,1fr) 150px;gap:12px;align-items:start}.map-card{overflow:hidden;border-radius:14px;background:#fff}.map-card iframe{display:block;width:100%;height:165px;border:0}.social-petals{display:grid;grid-template-columns:1fr 1fr;gap:6px;width:150px}.petal{height:72px;display:grid;place-items:center;background:#fff;transition:transform .2s,background .2s}.petal:hover{transform:scale(1.06)}.petal svg{width:24px;height:24px;fill:currentColor}.linkedin{border-radius:72px 6px 6px 6px;color:#0a66c2}.instagram{border-radius:6px 72px 6px 6px;color:#c13584}.instagram svg{fill:none;stroke:currentColor;stroke-width:1.8}.facebook{border-radius:6px 6px 6px 72px;color:#1877f2}.x-social{border-radius:6px 6px 72px 6px;color:#111}.linkedin:hover{background:#0a66c2;color:#fff}.instagram:hover{background:#c13584;color:#fff}.facebook:hover{background:#1877f2;color:#fff}.x-social:hover{background:#111;color:#fff}.map-link{grid-column:1/-1;color:#f1c96f;font-size:9px;font-weight:800}.footer-links{display:flex;flex-direction:column;gap:12px}.footer-links a{font-size:10px;font-weight:750}.footer-links a:hover{color:#f1c96f}.site-footer>small{grid-column:1/-1;display:flex;justify-content:space-between;gap:24px;padding-top:22px;border-top:1px solid rgba(255,255,255,.13);color:#8fa99e;font-size:8px}
.content-fallback{min-height:65vh;padding:80px 7vw}.content-fallback article{max-width:920px;margin:auto}.content-fallback h1{font-size:48px;font-weight:500}

@keyframes marquee{to{transform:translateX(-50%)}}
@keyframes wave{to{background-position:180px 0}}
@keyframes bar-pulse{to{filter:brightness(1.18);transform:scaleY(.92)}}

@media(max-width:1180px){
	.primary-nav{gap:14px}.primary-nav>a:not(.button){display:none}.training-menu{left:auto;right:-150px}
	.hero-slide{grid-template-columns:1fr;gap:36px}.slides-stage{min-height:1120px}.slide-copy{padding-top:20px}.slide-visual{max-width:780px;width:100%}
	.section-heading,.audience-title,.trainer-heading,.feedback-heading{grid-template-columns:1fr;gap:24px}.audience-grid{grid-template-columns:repeat(2,1fr)}
	.trainer-card{grid-template-columns:1fr}.trainer-portrait{max-width:410px}
	.contact{grid-template-columns:1fr}.site-footer{grid-template-columns:1fr 1fr}.footer-map-cluster{grid-column:1/-1}.site-footer>small{grid-column:1/-1}
}
@media(max-width:800px){
	body.admin-bar .site-header{top:46px}.site-header{min-height:70px;padding:0 6vw}.brand-logo img,.custom-logo{width:74px;max-height:60px}.nav-toggle{display:block}.primary-nav{position:absolute;left:0;right:0;top:100%;display:none;align-items:stretch;flex-direction:column;gap:0;padding:20px 6vw 26px;background:#fff;border-top:1px solid var(--line);box-shadow:0 20px 40px rgba(17,48,37,.14)}.primary-nav.is-open{display:flex}.primary-nav>a:not(.button){display:block;padding:10px 0}.training-dropdown summary{padding:11px 12px}.training-menu{position:static;width:100%;grid-template-columns:1fr 1fr;margin-top:8px;padding:9px;border-radius:12px;box-shadow:none}.training-menu:before{display:none}.language-select{margin-top:12px}.language-select select{width:100%}
	.training-slider{min-height:auto;padding:54px 6vw 25px}.slides-stage{min-height:960px}.product-screen{height:420px}.slider-controls{grid-template-columns:1fr 1fr}.slide-copy h1{font-size:45px}.trust-bar{flex-wrap:wrap;justify-content:center}
	.intro{grid-template-columns:1fr}.intro-copy{padding-top:24px}.feature-grid{grid-template-columns:1fr 1fr}.catalogue-nav{grid-template-columns:1fr 1fr}.catalogue-nav a{aspect-ratio:1.3/1}.course-accordion{grid-template-columns:repeat(2,minmax(0,1fr))}.course-content{grid-template-columns:1fr}.curriculum ol{grid-template-columns:1fr}.catalogue-clients{margin-bottom:-96px}.training-impact{grid-template-columns:1fr}.review-fallback{grid-template-columns:auto 1fr}.review-fallback .button{grid-column:1/-1}.site-footer{grid-template-columns:1fr}.footer-map-cluster{grid-column:1}.site-footer>small{grid-column:1;flex-direction:column}
}
@media(max-width:560px){
	.section{padding:68px 6vw}.section h2,.trainer-heading h2,.feedback-heading h2,.training-impact h2,.contact h2{font-size:38px;letter-spacing:-1.5px}
	.slides-stage{min-height:865px}.slide-copy h1{font-size:42px}.slide-copy>p:not(.eyebrow){font-size:14px}.hero-actions{align-items:flex-start;flex-direction:column}.product-screen{height:350px}.code-demo{padding:26px}.code-demo code{font-size:8px}.hmi-demo{padding:22px;gap:13px}.hmi-gauge{width:145px;height:145px}.hmi-gauge strong{font-size:44px}.medical-demo{padding:19px}.medical-wave{height:160px}.performance-bars{height:180px}.slider-controls{grid-template-columns:1fr}.slider-controls button{padding:11px 8px}
	.feature-grid,.audience-grid{grid-template-columns:1fr}.feature-grid article{min-height:205px}.catalogue-nav{grid-template-columns:1fr 1fr;gap:10px}.catalogue-nav a{aspect-ratio:1.08/1;min-height:0;padding:16px;border-radius:18px;font-size:14px}.catalogue-nav a:before{right:14px;top:12px;font-size:23px}.catalogue-nav span{left:14px;top:14px;width:29px;height:29px}.catalogue-groups{gap:44px}.catalogue-group h3{font-size:18px}.catalogue-group header p{font-size:8.5px}.course-accordion{grid-template-columns:1fr;gap:11px}.catalogue-course summary{min-height:170px;padding:18px}.catalogue-course[open] summary{grid-template-columns:auto minmax(0,1fr) auto;gap:10px;padding:15px}.catalogue-course[open] .course-no{grid-column:1}.catalogue-course[open] .course-title{grid-column:2}.catalogue-course[open] .course-tag{display:none}.catalogue-course[open] .course-toggle{grid-column:3}.course-title strong{font-size:16px}.course-title small{font-size:9px;-webkit-line-clamp:3}.course-content{padding:20px 15px}.catalogue-client-title{align-items:flex-start;flex-direction:column;gap:7px}.client-logo{width:150px;height:80px;flex-basis:150px}
	.trainer-section,.feedback-section{padding:64px 6vw}.trainer-card{padding:23px}.credentials{grid-template-columns:1fr}.credentials img{height:75px}.trainer-links{flex-direction:column}.google-rating{padding:21px}.rating-value strong{font-size:50px}.review-fallback{grid-template-columns:1fr}.review-fallback .google-mark{display:none}.impact-grid{grid-template-columns:1fr}.contact{padding:70px 6vw}.contact-card{padding:24px}.contact-lines{grid-template-columns:1fr}
	.footer-map-cluster{grid-template-columns:1fr 150px}.social-petals{grid-column:auto}.map-link{grid-column:1/-1}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero-slide,.button,.client-track,.medical-wave i,.performance-bars i{animation:none!important;transition:none!important}.client-window{overflow-x:auto;mask-image:none}.client-set[aria-hidden=true]{display:none}}




/* v1.6 refinements */
.expert-banner{background:#f4f8f6;border-bottom:1px solid rgba(7,35,30,.10);padding:15px clamp(20px,5vw,72px);position:relative;z-index:3}
.expert-banner-inner{max-width:1440px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:28px}
.expert-banner-copy{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:18px;row-gap:3px}
.expert-banner-eyebrow{grid-row:1 / span 2;font-size:10px;font-weight:800;letter-spacing:.16em;color:#147a57;border-right:1px solid rgba(20,122,87,.22);padding-right:18px;white-space:nowrap}
.expert-banner-copy strong{font-size:clamp(16px,1.5vw,21px);line-height:1.2;color:#092c25}
.expert-banner-copy p{margin:0;color:#4f665f;font-size:13px;line-height:1.4}
.expert-banner-logo{width:160px;height:auto;display:block;flex:0 0 auto}

.training-dropdown .training-menu{display:grid;grid-template-columns:repeat(4,minmax(190px,1fr));gap:0;min-width:min(1040px,92vw);max-height:min(72vh,650px);overflow:auto}
.training-menu-intro{grid-column:1/-1;display:flex;align-items:baseline;gap:14px;padding:14px 18px;background:#eef8f3;border-bottom:1px solid rgba(7,35,30,.10);position:sticky;top:0;z-index:2}
.training-menu-intro strong{font-size:14px;color:#092c25}
.training-menu-intro span{font-size:12px;color:#5a6d67}
.training-dropdown .training-menu section{padding:16px 14px;border-right:1px solid rgba(7,35,30,.08)}
.training-dropdown .training-menu section:last-child{border-right:0}
.training-category-heading{padding-bottom:10px!important;margin-bottom:7px!important;border-bottom:1px solid rgba(7,35,30,.10)!important}
.training-category-heading strong{font-size:14px!important;color:#093f32!important}
.training-dropdown .training-menu section>a:not(.training-category-heading){font-size:12px;line-height:1.35;padding:7px 8px;border-radius:7px}
.training-dropdown .training-menu section>a:not(.training-category-heading):hover{background:#e8f7ef;color:#086b4c;transform:translateX(2px)}

.slide-qt-champion{display:inline-flex;align-items:center;gap:11px;margin:12px 0 2px;text-decoration:none;max-width:max-content;padding:6px 10px 6px 8px;border-radius:10px;border:1px solid rgba(255,255,255,.17);background:rgba(255,255,255,.06);transition:.22s ease}
.slide-qt-champion:hover{background:rgba(255,255,255,.11);transform:translateY(-1px)}
.slide-qt-champion img{width:112px;height:auto;display:block}
.slide-qt-champion span{font-size:11px;line-height:1.25;color:rgba(255,255,255,.78);max-width:145px}

.slide-more{position:relative;margin-top:13px;max-width:500px}
.slide-more-toggle{appearance:none;border:1px solid rgba(255,255,255,.25);background:rgba(7,22,19,.30);color:#fff;border-radius:999px;min-height:38px;padding:7px 9px 7px 15px;display:inline-flex;align-items:center;gap:12px;font:inherit;font-size:12px;font-weight:700;cursor:pointer;transition:.2s ease}
.slide-more-toggle:hover,.slide-more-toggle:focus-visible{background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.48);outline:none}
.slide-more-toggle b{width:24px;height:24px;border-radius:50%;background:#41d85f;color:#082219;display:grid;place-items:center;font-size:18px;line-height:1;transition:transform .2s ease}
.slide-more.is-open .slide-more-toggle b{transform:rotate(45deg)}
.slide-more-panel{margin-top:9px;padding:13px 15px;border:1px solid rgba(255,255,255,.17);border-radius:12px;background:rgba(4,22,18,.88);backdrop-filter:blur(10px);box-shadow:0 16px 40px rgba(0,0,0,.16)}
.slide-more-panel strong{display:block;color:#fff;font-size:12px;margin-bottom:8px}
.slide-more-panel ul{margin:0 0 9px;padding-left:18px;display:grid;gap:4px}
.slide-more-panel li{color:rgba(255,255,255,.76);font-size:11px;line-height:1.35}
.slide-more-link{font-size:11px;font-weight:700;color:#6bed80;text-decoration:none}
.slide-more-link:hover{text-decoration:underline}

@media (max-width:1000px){
  .training-dropdown .training-menu{grid-template-columns:repeat(2,minmax(220px,1fr));min-width:min(720px,92vw)}
  .training-dropdown .training-menu section:nth-of-type(2){border-right:0}
}
@media (max-width:800px){
  .expert-banner{padding:12px 18px}
  .expert-banner-inner{align-items:flex-start}
  .expert-banner-copy{display:block}
  .expert-banner-eyebrow{display:block;border:0;padding:0;margin-bottom:4px}
  .expert-banner-copy p{margin-top:3px}
  .expert-banner-logo{width:120px}
  .training-dropdown .training-menu{grid-template-columns:1fr;min-width:0;max-height:none}
  .training-menu-intro{display:block;position:static}
  .training-menu-intro span{display:block;margin-top:3px}
  .training-dropdown .training-menu section{border-right:0;border-bottom:1px solid rgba(7,35,30,.08)}
}
@media (max-width:560px){
  .expert-banner-inner{display:block}
  .expert-banner-logo{margin-top:10px;width:116px}
  .slide-qt-champion{display:flex;max-width:100%}
  .slide-more{max-width:100%}
}



/* v1.7 — Training Catalogue: More details belongs to the existing category tiles, not the hero slider */
.category-details-nav{overflow:visible;align-items:start}
.catalogue-nav .catalogue-tile{position:relative;isolation:isolate;min-width:0;aspect-ratio:1.28/1;border:1px solid rgba(255,255,255,.22);border-radius:24px;background:linear-gradient(145deg,#34735d,#245141 72%,#1d4638);box-shadow:0 16px 34px rgba(3,19,13,.22);transition:transform .24s,box-shadow .24s,border-color .24s,filter .24s;z-index:1}
.catalogue-nav .catalogue-tile:nth-child(2){background:linear-gradient(145deg,#b66f4f,#8d4f38 72%,#713d2d)}
.catalogue-nav .catalogue-tile:nth-child(3){background:linear-gradient(145deg,#4f7887,#355d6b 72%,#294b57)}
.catalogue-nav .catalogue-tile:nth-child(4){background:linear-gradient(145deg,#75668d,#584b70 72%,#453b5b)}
.catalogue-nav .catalogue-tile:hover,.catalogue-nav .catalogue-tile:focus-within{transform:translateY(-5px);border-color:rgba(255,255,255,.5);box-shadow:0 24px 46px rgba(3,19,13,.3);filter:brightness(1.05)}
.catalogue-nav .catalogue-tile.is-open{z-index:40}
.catalogue-nav .category-main{all:unset;box-sizing:border-box;position:absolute;inset:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;overflow:hidden;padding:24px 24px 72px;border-radius:24px;color:#fff;cursor:pointer}
.catalogue-nav .category-main::before{content:none!important}
.catalogue-nav .category-main:focus-visible{outline:3px solid rgba(255,255,255,.8);outline-offset:3px}
.catalogue-nav .category-number{position:absolute;left:20px;top:18px;display:grid;place-items:center;width:34px;height:34px;border:1px solid rgba(255,255,255,.32);border-radius:50%;background:rgba(255,255,255,.14);color:#fff;font-size:9px;font-weight:800}
.catalogue-nav .category-watermark{position:absolute;right:20px;top:15px;color:rgba(255,255,255,.2);font-size:32px;font-weight:800;letter-spacing:-2px}
.catalogue-nav .category-main strong{max-width:92%;font-size:clamp(17px,1.55vw,23px);font-weight:800;line-height:1.14;letter-spacing:-.15px}
.catalogue-nav .category-main small{margin-top:7px;color:rgba(255,255,255,.72);font-size:9px;font-weight:650;letter-spacing:.35px;text-transform:uppercase}
.catalogue-nav .category-more{position:absolute;left:20px;right:20px;bottom:17px;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:12px;height:38px;padding:5px 7px 5px 13px;border:1px solid rgba(255,255,255,.28);border-radius:999px;background:rgba(7,25,20,.23);color:#fff;font:inherit;font-size:10px;font-weight:760;cursor:pointer;transition:background .2s,border-color .2s,transform .2s}
.catalogue-nav .category-more:hover,.catalogue-nav .category-more:focus-visible{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.55);outline:none}
.catalogue-nav .category-more b{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:#fff;color:#15342a;font-size:17px;font-weight:600;line-height:1;transition:transform .2s}
.catalogue-nav .catalogue-tile.is-open .category-more b{transform:rotate(45deg)}
.catalogue-nav .catalogue-training-list{position:absolute;left:10px;right:10px;top:calc(100% - 3px);z-index:50;max-height:360px;overflow:auto;padding:11px;border:1px solid #dce5df;border-radius:14px;background:#fff;box-shadow:0 24px 54px rgba(3,19,13,.28);color:#17392d}
.catalogue-nav .catalogue-training-list[hidden]{display:none!important}
.catalogue-nav .catalogue-list-title{display:block;padding:8px 9px 10px;color:#17392d;font-size:10px;font-weight:800;letter-spacing:.6px;text-transform:uppercase}
.catalogue-nav .catalogue-training-list a{all:unset;box-sizing:border-box;display:flex;align-items:center;width:100%;padding:9px 10px;border-radius:8px;color:#43534b;font-size:10.5px;font-weight:650;line-height:1.35;cursor:pointer;transition:background .17s,color .17s,transform .17s}
.catalogue-nav .catalogue-training-list a::before{content:none!important}
.catalogue-nav .catalogue-training-list a:hover,.catalogue-nav .catalogue-training-list a:focus-visible{background:#e8f7ef;color:#086b4c;transform:translateX(3px);outline:none}
.catalogue-nav .catalogue-training-list .catalogue-view-category{margin-top:7px;border-top:1px solid #e3e9e5;border-radius:0;padding-top:12px;color:#9a593c;font-weight:800}
@media (max-width:1000px){.category-details-nav{grid-template-columns:repeat(2,minmax(0,1fr))}.catalogue-nav .category-main strong{font-size:21px}}
@media (max-width:620px){.category-details-nav{grid-template-columns:1fr}.catalogue-nav .catalogue-tile{aspect-ratio:auto;min-height:210px}.catalogue-nav .catalogue-training-list{position:relative;left:auto;right:auto;top:auto;margin:206px 10px 10px}.catalogue-nav .catalogue-tile.is-open{padding-bottom:1px}.catalogue-nav .category-main strong{font-size:22px}}



/* v1.8 Compact Training Catalogue */
.compact-catalogue-nav{
  gap:14px !important;
  margin-top:22px !important;
}
.compact-catalogue-nav .catalogue-tile{
  min-height:168px !important;
  aspect-ratio:1.18 / 1 !important;
  border-radius:18px !important;
  overflow:hidden !important;
  cursor:pointer !important;
  transition:transform .22s ease, box-shadow .22s ease, filter .22s ease !important;
}
.compact-catalogue-nav .catalogue-tile:hover,
.compact-catalogue-nav .catalogue-tile:focus-within{
  transform:translateY(-5px) !important;
  box-shadow:0 16px 32px rgba(0,0,0,.20) !important;
  filter:brightness(1.05) !important;
}
.compact-catalogue-nav .category-main{
  position:absolute !important;
  inset:0 !important;
  z-index:4 !important;
  padding:20px !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-end !important;
  text-decoration:none !important;
}
.compact-catalogue-nav .category-main strong{
  margin:0 !important;
}
.compact-catalogue-nav .category-main::after{
  content:"View training list";
  display:inline-flex;
  width:max-content;
  max-width:100%;
  margin-top:7px;
  padding-bottom:3px;
  border-bottom:1px solid rgba(255,255,255,.75);
  color:rgba(255,255,255,.92);
  font-size:9px;
  font-weight:800;
  letter-spacing:.55px;
  text-transform:uppercase;
  opacity:0;
  transform:translateY(6px);
  transition:opacity .18s ease, transform .18s ease;
}
.compact-catalogue-nav .catalogue-tile:hover .category-main::after,
.compact-catalogue-nav .catalogue-tile:focus-within .category-main::after{
  opacity:1;
  transform:translateY(0);
}
.compact-catalogue-nav .category-watermark{
  transition:transform .22s ease, opacity .22s ease !important;
}
.compact-catalogue-nav .catalogue-tile:hover .category-watermark,
.compact-catalogue-nav .catalogue-tile:focus-within .category-watermark{
  transform:scale(1.05) !important;
  opacity:.32 !important;
}
#programs{
  padding-top:64px !important;
  padding-bottom:64px !important;
}
#programs .section-heading{
  margin-bottom:14px !important;
}
@media (max-width:900px){
  .compact-catalogue-nav{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}
@media (max-width:620px){
  .compact-catalogue-nav{
    grid-template-columns:1fr !important;
    gap:12px !important;
  }
  .compact-catalogue-nav .catalogue-tile{
    min-height:142px !important;
    aspect-ratio:auto !important;
  }
  .compact-catalogue-nav .category-main::after{
    opacity:1;
    transform:none;
  }
}



/* v1.9 Click-to-view catalogue training list */
.compact-catalogue-nav .category-main::after{
  content:"View training programs" !important;
}
.compact-catalogue-nav .catalogue-tile{
  min-height:154px !important;
}
.catalogue-modal{
  position:fixed;
  inset:0;
  z-index:99999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
}
.catalogue-modal.is-open{display:flex;}
.catalogue-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(5,15,25,.64);
  backdrop-filter:blur(5px);
}
.catalogue-modal-dialog{
  position:relative;
  z-index:1;
  width:min(620px, 94vw);
  max-height:82vh;
  overflow:auto;
  border-radius:22px;
  background:#fff;
  color:#132029;
  padding:28px 30px 30px;
  box-shadow:0 24px 70px rgba(0,0,0,.28);
}
.catalogue-modal-close{
  position:absolute;
  top:14px;
  right:16px;
  width:36px;
  height:36px;
  border:0;
  border-radius:50%;
  background:#edf2f2;
  color:#183139;
  font-size:25px;
  line-height:1;
  cursor:pointer;
}
.catalogue-modal-kicker{
  margin:0 0 7px;
  color:#4d6d68;
  font-size:11px;
  font-weight:800;
  letter-spacing:1.2px;
  text-transform:uppercase;
}
#catalogue-modal-title{
  margin:0 42px 18px 0;
  font-size:28px;
  line-height:1.15;
}
.catalogue-modal-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.catalogue-modal-course{
  display:flex;
  align-items:center;
  min-height:48px;
  padding:12px 14px;
  border:1px solid #dce8e5;
  border-radius:12px;
  background:#f8fbfa;
  color:#183139;
  font-size:14px;
  font-weight:700;
  text-decoration:none;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.catalogue-modal-course:hover,
.catalogue-modal-course:focus{
  transform:translateY(-2px);
  border-color:#84aaa1;
  box-shadow:0 8px 18px rgba(25,61,54,.10);
}
body.catalogue-modal-open{overflow:hidden;}
@media (max-width:620px){
  .catalogue-modal{padding:14px;}
  .catalogue-modal-dialog{padding:24px 20px 22px;border-radius:18px;}
  .catalogue-modal-list{grid-template-columns:1fr;}
  #catalogue-modal-title{font-size:23px;}
}



/* v2.0 catalogue tile infographic + inline dropdown */
.compact-catalogue-nav{
  gap:14px !important;
}
.compact-catalogue-nav .catalogue-tile{
  min-height:150px !important;
  position:relative;
}
.compact-catalogue-nav .category-main{
  padding:22px !important;
  justify-content:flex-end !important;
}
.compact-catalogue-nav .category-main strong{
  font-size:clamp(18px,1.65vw,24px) !important;
  line-height:1.08 !important;
  max-width:78% !important;
}
.compact-catalogue-nav .category-main::after{
  content:"Click to view training list" !important;
  margin-top:8px;
}
.compact-catalogue-nav .category-watermark{display:none !important;}
.compact-catalogue-nav .category-infographic{
  position:absolute;
  top:14px;
  right:14px;
  width:108px;
  height:82px;
  opacity:.9;
  pointer-events:none;
}
.compact-catalogue-nav .category-infographic svg{width:100%;height:100%;display:block}

.catalogue-dropdown{
  margin-top:18px;
}
.catalogue-dropdown-placeholder{
  display:none;
  min-height:68px;
  padding:18px 20px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:18px;
  color:rgba(255,255,255,.78);
  background:rgba(255,255,255,.03);
}
.catalogue-dropdown-placeholder.is-visible{display:flex;align-items:center}
.catalogue-dropdown-placeholder p{margin:0;font-size:14px}
.catalogue-dropdown-panel{
  margin-top:4px;
  padding:18px 0 0;
  border-top:1px solid rgba(255,255,255,.1);
}
.catalogue-dropdown-header{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin-bottom:16px;
}
.catalogue-dropdown-header h3{margin:0;color:#fff;font-size:30px;line-height:1.08}
.catalogue-panel-close{
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.06);
  color:#fff;
  border-radius:999px;
  padding:10px 16px;
  cursor:pointer;
  font-weight:700;
}
.catalogue-course-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
.catalogue-course-card{
  position:relative;
  display:flex;
  flex-direction:column;
  min-height:160px;
  padding:18px 70px 18px 18px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(145deg,rgba(54,111,88,.85),rgba(22,63,49,.92) 72%,rgba(16,49,38,.96));
  box-shadow:0 12px 28px rgba(0,0,0,.18);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.catalogue-course-card:hover,
.catalogue-course-card:focus-within{
  transform:translateY(-3px);
  box-shadow:0 18px 34px rgba(0,0,0,.24);
  border-color:rgba(255,255,255,.26);
}
.catalogue-course-card h4{
  margin:0 0 10px;
  font-size:18px;
  line-height:1.2;
  color:#fff;
}
.catalogue-course-desc{
  margin:0 0 16px;
  font-size:12px;
  line-height:1.5;
  color:rgba(255,255,255,.82);
}
.catalogue-course-tag{
  display:inline-flex;
  width:max-content;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  font-size:10px;
  font-weight:700;
  letter-spacing:.4px;
  text-transform:uppercase;
  color:rgba(255,255,255,.92);
}
.catalogue-course-toggle{
  position:absolute;
  right:18px;
  bottom:18px;
  width:30px;
  height:30px;
  border:0;
  border-radius:999px;
  background:rgba(255,255,255,.1);
  color:#fff;
  font-size:20px;
  line-height:1;
  cursor:pointer;
}
.catalogue-course-toggle:hover{background:rgba(255,255,255,.18)}
.catalogue-course-more{
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid rgba(255,255,255,.12);
}
.catalogue-course-more p{
  margin:0;
  font-size:12px;
  line-height:1.55;
  color:rgba(255,255,255,.86);
}
.catalogue-course-card.is-open .catalogue-course-toggle{transform:rotate(45deg)}
@media (max-width:1100px){
  .catalogue-course-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:800px){
  .compact-catalogue-nav .category-infographic{width:92px;height:70px}
  .catalogue-dropdown-header h3{font-size:26px}
}
@media (max-width:640px){
  .catalogue-course-grid{grid-template-columns:1fr;}
  .compact-catalogue-nav .catalogue-tile{min-height:138px !important;}
  .compact-catalogue-nav .category-main strong{max-width:74% !important;font-size:22px !important;}
  .compact-catalogue-nav .category-infographic{width:84px;height:64px;top:12px;right:12px}
  .catalogue-dropdown-header{align-items:flex-start;flex-direction:column}
}



/* ==========================================================
   v2.1 Training Catalogue — reference-image interaction
   ========================================================== */
.tc-v21{
  background:#14392f !important;
  color:#fff;
  padding-top:62px !important;
  padding-bottom:68px !important;
}
.tc-v21 .tc-heading{
  margin-bottom:26px !important;
}
.tc-v21 .tc-heading > p{
  max-width:520px;
  color:rgba(255,255,255,.72);
}
.tc-category-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:22px;
}
.tc-category-card{
  position:relative;
  min-height:330px;
  border:1px solid rgba(255,255,255,.20);
  border-radius:38px;
  padding:30px 30px 34px;
  overflow:hidden;
  text-align:left;
  color:#fff;
  cursor:pointer;
  box-shadow:0 18px 36px rgba(6,26,20,.18);
  transition:transform .22s ease, box-shadow .22s ease, filter .22s ease, border-color .22s ease;
}
.tc-category-card:hover,
.tc-category-card:focus-visible,
.tc-category-card.is-active{
  transform:translateY(-6px);
  box-shadow:0 26px 48px rgba(4,20,15,.30);
  border-color:rgba(255,255,255,.40);
  filter:brightness(1.04);
}
.tc-category-card:focus-visible{outline:3px solid rgba(255,255,255,.7);outline-offset:4px}
.tc-cpp{background:linear-gradient(145deg,#285c4b,#143d31 72%,#103329)}
.tc-qt{background:linear-gradient(145deg,#9a6650,#744535 75%,#683c2f)}
.tc-performance{background:linear-gradient(145deg,#4b7280,#2f5663 72%,#254956)}
.tc-architecture{background:linear-gradient(145deg,#695e7d,#4c435e 72%,#41394f)}
.tc-category-number{
  position:absolute;
  top:28px;
  left:30px;
  display:grid;
  place-items:center;
  width:52px;
  height:52px;
  border:1px solid rgba(255,255,255,.36);
  border-radius:50%;
  font-size:13px;
  font-weight:850;
  letter-spacing:.3px;
}
.tc-category-art{
  position:absolute;
  top:24px;
  right:24px;
  width:105px;
  height:70px;
  opacity:.20;
}
.tc-category-art svg{width:100%;height:100%;overflow:visible}
.tc-category-art svg text{
  fill:#fff;
  font:800 48px/1 Arial,sans-serif;
}
.tc-category-art svg rect,
.tc-category-art svg path{
  fill:none;
  stroke:#fff;
  stroke-width:7;
  stroke-linecap:square;
  stroke-linejoin:miter;
}
.tc-category-title{
  position:absolute;
  left:34px;
  right:30px;
  bottom:34px;
  max-width:88%;
  font-size:clamp(26px,2.1vw,38px);
  font-weight:500;
  line-height:1.10;
  letter-spacing:-.8px;
}
.tc-panels{margin-top:18px}
.tc-category-panel{
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.12);
  animation:tcPanelIn .24s ease both;
}
@keyframes tcPanelIn{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:none}
}
.tc-category-panel-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:18px;
  margin:0 0 18px;
}
.tc-panel-eyebrow{
  display:block;
  margin-bottom:7px;
  color:#d9a07d;
  font-size:10px;
  font-weight:850;
  letter-spacing:1.2px;
  text-transform:uppercase;
}
.tc-category-panel-head h3{
  margin:0;
  color:#fff;
  font-size:29px;
  line-height:1.15;
}
.tc-category-panel-head p{
  margin:7px 0 0;
  color:rgba(255,255,255,.72);
  font-size:13px;
}
.tc-category-close{
  flex:0 0 auto;
  border:1px solid rgba(255,255,255,.24);
  border-radius:999px;
  padding:9px 15px;
  background:rgba(255,255,255,.06);
  color:#fff;
  font-weight:750;
  cursor:pointer;
}
.tc-category-close:hover{background:rgba(255,255,255,.12)}
.tc-course-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  align-items:start;
}
.tc-course-card{
  position:relative;
  min-height:168px;
  padding:18px 58px 17px 18px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:18px;
  background:linear-gradient(145deg,#174c3c,#123f32 72%,#10392e);
  color:#fff;
  box-shadow:0 11px 24px rgba(0,0,0,.13);
  cursor:pointer;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
.tc-course-card:hover,
.tc-course-card:focus-within,
.tc-course-card.is-open{
  transform:translateY(-2px);
  border-color:rgba(255,255,255,.28);
  box-shadow:0 16px 30px rgba(0,0,0,.20);
  background:linear-gradient(145deg,#1c5745,#144535 72%,#103a2f);
}
.tc-course-card:focus-visible{outline:2px solid rgba(255,255,255,.62);outline-offset:3px}
.tc-course-number{
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  margin-bottom:20px;
  border:1px solid rgba(255,255,255,.28);
  border-radius:50%;
  color:#e4b088;
  font-size:9px;
  font-weight:850;
}
.tc-course-copy h4{
  margin:0 0 8px;
  color:#fff;
  font-size:16px;
  line-height:1.20;
}
.tc-course-copy p{
  margin:0 0 16px;
  min-height:38px;
  color:rgba(255,255,255,.71);
  font-size:10.5px;
  line-height:1.45;
}
.tc-course-tag{
  display:inline-flex;
  width:max-content;
  padding:4px 9px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:999px;
  color:rgba(255,255,255,.86);
  font-size:8px;
  font-weight:750;
  letter-spacing:.35px;
  text-transform:uppercase;
}
.tc-course-plus{
  position:absolute;
  right:17px;
  bottom:17px;
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  padding:0;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.09);
  color:#fff;
  font-size:19px;
  line-height:1;
  cursor:pointer;
  transition:background .18s ease,transform .18s ease;
}
.tc-course-plus:hover{background:rgba(255,255,255,.17)}
.tc-course-card.is-open .tc-course-plus{transform:rotate(45deg);background:rgba(255,255,255,.16)}

.tc-course-detail{
  grid-column:1/-1;
  overflow:hidden;
  border-radius:18px;
  background:#fff;
  color:#17352c;
  box-shadow:0 18px 50px rgba(0,0,0,.22);
  animation:tcDetailIn .22s ease both;
}
@keyframes tcDetailIn{
  from{opacity:0;transform:translateY(-4px)}
  to{opacity:1;transform:none}
}
.tc-detail-top{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto auto;
  gap:14px;
  align-items:center;
  padding:16px 18px;
  border-bottom:1px solid #e5ebe8;
}
.tc-detail-no{
  display:grid;
  place-items:center;
  width:32px;height:32px;
  border:1px solid #93aca3;
  border-radius:50%;
  color:#d47e5e;
  font-size:9px;
  font-weight:850;
}
.tc-detail-title h4{
  margin:0 0 3px;
  font-size:16px;
  color:#14382e;
}
.tc-detail-title p{
  margin:0;
  color:#74827d;
  font-size:10px;
  line-height:1.4;
}
.tc-detail-tag{
  padding:4px 9px;
  border:1px solid #cedad5;
  border-radius:999px;
  color:#71817b;
  font-size:8px;
  font-weight:800;
  text-transform:uppercase;
}
.tc-detail-close{
  display:grid;
  place-items:center;
  width:28px;height:28px;
  border:0;border-radius:50%;
  background:#174b3c;color:#fff;
  cursor:pointer;
  font-size:16px;
}
.tc-detail-body{
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(300px,1fr);
  gap:22px;
  padding:22px;
}
.tc-topic-label{
  margin:0 0 13px;
  color:#d47e5e;
  font-size:9px;
  font-weight:900;
  letter-spacing:1.15px;
  text-transform:uppercase;
}
.tc-topic-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
.tc-topic{
  display:grid;
  grid-template-columns:27px minmax(0,1fr);
  align-items:center;
  gap:8px;
  min-height:38px;
  padding:7px 10px;
  background:#f2f5f3;
  color:#6c7b75;
  font-size:9.5px;
}
.tc-topic b{
  color:#cf7759;
  font-size:9px;
}
.tc-detail-side{
  padding:16px;
  border-radius:14px;
  background:#f3f6f4;
}
.tc-mini-graphic{
  position:relative;
  min-height:150px;
  padding:25px 20px 44px;
  border-radius:12px;
  overflow:hidden;
  background:linear-gradient(135deg,#174a39,#277051);
  color:#fff;
}
.tc-mini-graphic small{
  display:block;
  margin-bottom:22px;
  font-size:8px;
  letter-spacing:1px;
}
.tc-mini-graphic h5{
  position:relative;z-index:2;
  margin:0;
  max-width:92%;
  color:#fff;
  font-size:17px;
  line-height:1.2;
}
.tc-bars{
  position:absolute;
  left:20px;right:20px;bottom:17px;
  display:grid;
  grid-template-columns:1fr .95fr 1fr 1fr 1fr;
  gap:5px;
  align-items:end;
  height:35px;
}
.tc-bars i{display:block;background:#83bca7}
.tc-bars i:nth-child(1){height:16px}
.tc-bars i:nth-child(2){height:34px;background:#d98e67}
.tc-bars i:nth-child(3){height:24px}
.tc-bars i:nth-child(4){height:29px}
.tc-bars i:nth-child(5){height:35px;background:#d98e67}
.tc-meta{
  display:flex;gap:7px;flex-wrap:wrap;
  margin:10px 0 12px;
}
.tc-meta span{
  display:inline-flex;
  padding:5px 9px;
  border:1px solid #d7e1dd;
  border-radius:999px;
  color:#6b7b75;
  font-size:8px;
}
.tc-detail-side > p{
  margin:0 0 12px;
  color:#73817c;
  font-size:9.5px;
  line-height:1.5;
}
.tc-customise{
  color:#c86e4e;
  font-size:9.5px;
  font-weight:850;
  text-decoration:none;
}
.tc-customise:hover{text-decoration:underline}

@media(max-width:1180px){
  .tc-category-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tc-category-card{min-height:265px}
}
@media(max-width:920px){
  .tc-course-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tc-detail-body{grid-template-columns:1fr}
}
@media(max-width:650px){
  .tc-category-grid{grid-template-columns:1fr}
  .tc-category-card{min-height:210px;border-radius:28px}
  .tc-category-title{font-size:30px}
  .tc-course-grid{grid-template-columns:1fr}
  .tc-topic-grid{grid-template-columns:1fr}
  .tc-detail-top{grid-template-columns:auto minmax(0,1fr) auto}
  .tc-detail-tag{grid-column:2/3}
  .tc-detail-close{grid-row:1/2;grid-column:3/4}
}



/* v2.2 — hover-open training category lists */
.tc-hover-enabled .tc-category-card::after{
  content:"Hover to view training";
  position:absolute;
  left:34px;
  bottom:18px;
  color:rgba(255,255,255,.58);
  font-size:9px;
  font-weight:800;
  letter-spacing:.7px;
  text-transform:uppercase;
  opacity:0;
  transform:translateY(4px);
  transition:opacity .18s ease, transform .18s ease;
}
.tc-hover-enabled .tc-category-card:hover::after,
.tc-hover-enabled .tc-category-card.is-active::after{
  opacity:1;
  transform:none;
}
.tc-hover-enabled .tc-category-card.is-active{
  box-shadow:0 28px 52px rgba(4,20,15,.32);
}
.tc-hover-enabled .tc-category-panel{
  scroll-margin-top:110px;
}
@media (hover:none), (pointer:coarse){
  .tc-hover-enabled .tc-category-card::after{
    content:"Tap to view training";
    opacity:1;
    transform:none;
  }
}



/* ==========================================================
   v2.3 Professional catalogue refinements
   ========================================================== */

/* Give the section more breathing room above and below. */
.tc-v21{
  padding-top:96px !important;
  padding-bottom:104px !important;
}

/* Clear separation before Learning Journeys. */
.tc-v21 + .audience{
  padding-top:92px !important;
  padding-bottom:92px !important;
}
.tc-v21 + .audience .eyebrow{
  margin-top:0 !important;
}

.tc-v21 .tc-heading{
  margin-bottom:34px !important;
}
.tc-v21 .tc-heading h2{
  color:#ffffff !important;
  font-weight:650 !important;
  letter-spacing:-.7px !important;
  text-shadow:0 2px 12px rgba(0,0,0,.12);
}
.tc-v21 .tc-heading > p{
  color:rgba(255,255,255,.82) !important;
  font-size:15px !important;
  line-height:1.65 !important;
}

/* Four distinct, restrained corporate colours. */
.tc-category-card.tc-cpp{
  background:
    radial-gradient(circle at 88% 16%, rgba(95,203,158,.14), transparent 29%),
    linear-gradient(145deg,#1f6652 0%,#164c3e 58%,#103c31 100%) !important;
}
.tc-category-card.tc-qt{
  background:
    radial-gradient(circle at 88% 16%, rgba(238,174,126,.16), transparent 30%),
    linear-gradient(145deg,#9a6148 0%,#7b4937 60%,#62382d 100%) !important;
}
.tc-category-card.tc-performance{
  background:
    radial-gradient(circle at 88% 16%, rgba(134,205,224,.15), transparent 29%),
    linear-gradient(145deg,#326e7d 0%,#285865 60%,#214653 100%) !important;
}
.tc-category-card.tc-architecture{
  background:
    radial-gradient(circle at 88% 16%, rgba(192,167,224,.15), transparent 29%),
    linear-gradient(145deg,#655679 0%,#514762 60%,#433b52 100%) !important;
}

.tc-category-card{
  min-height:348px !important;
  border:1px solid rgba(255,255,255,.23) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 20px 42px rgba(4,22,17,.22) !important;
}
.tc-category-card:hover,
.tc-category-card:focus-visible,
.tc-category-card.is-active{
  border-color:rgba(255,255,255,.48) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 30px 58px rgba(3,18,14,.34) !important;
}

/* Improve number visibility without overpowering the card. */
.tc-category-number{
  width:50px !important;
  height:50px !important;
  border-color:rgba(255,255,255,.48) !important;
  background:rgba(255,255,255,.07);
  color:#fff !important;
  font-size:13px !important;
  font-weight:850 !important;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);
}

/* Larger subject-specific infographic in the top-right corner. */
.tc-category-art{
  top:22px !important;
  right:22px !important;
  width:142px !important;
  height:96px !important;
  opacity:1 !important;
  pointer-events:none;
}
.tc-category-art svg{
  width:100%;
  height:100%;
  overflow:visible;
}
.tc-category-art .ig-panel{
  fill:rgba(255,255,255,.075);
  stroke:rgba(255,255,255,.30);
  stroke-width:2;
}
.tc-category-art .ig-card{
  fill:rgba(255,255,255,.16);
  stroke:rgba(255,255,255,.34);
  stroke-width:1.5;
}
.tc-category-art .ig-card.soft{fill:rgba(255,255,255,.105)}
.tc-category-art .ig-card.soft2{fill:rgba(255,255,255,.075)}
.tc-category-art .ig-chip{
  fill:rgba(255,255,255,.13);
  stroke:rgba(255,255,255,.36);
  stroke-width:1.7;
}
.tc-category-art .ig-line,
.tc-category-art .ig-needle,
.tc-category-art .ig-chart{
  fill:none;
  stroke:rgba(255,255,255,.88);
  stroke-width:4;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.tc-category-art .ig-line.thin{stroke-width:2.6}
.tc-category-art .ig-chipline,
.tc-category-art .ig-pin,
.tc-category-art .ig-link,
.tc-category-art .ig-ticks{
  fill:none;
  stroke:rgba(255,255,255,.53);
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.tc-category-art .ig-dot{fill:rgba(255,255,255,.90)}
.tc-category-art .ig-dot.soft{fill:rgba(255,255,255,.55)}
.tc-category-art .ig-dot.soft2{fill:rgba(255,255,255,.32)}
.tc-category-art .ig-orbit{
  fill:rgba(255,255,255,.08);
  stroke:rgba(255,255,255,.42);
  stroke-width:2;
}
.tc-category-art .ig-gauge{
  fill:none;
  stroke:rgba(255,255,255,.46);
  stroke-width:8;
  stroke-linecap:round;
}
.tc-category-art .ig-diamond{
  fill:rgba(255,255,255,.07);
  stroke:rgba(255,255,255,.46);
  stroke-width:2.2;
}

/* Stronger typography and better readable content. */
.tc-category-title{
  left:32px !important;
  right:30px !important;
  bottom:66px !important;
  max-width:88% !important;
  color:#fff !important;
  font-family:Inter, "Segoe UI", Arial, sans-serif !important;
  font-size:clamp(27px,2vw,38px) !important;
  font-weight:700 !important;
  line-height:1.08 !important;
  letter-spacing:-.7px !important;
  text-shadow:0 2px 14px rgba(0,0,0,.24);
}
.tc-category-subtitle{
  position:absolute;
  left:33px;
  right:28px;
  bottom:34px;
  display:block;
  overflow:hidden;
  color:rgba(255,255,255,.84);
  font-family:Inter, "Segoe UI", Arial, sans-serif;
  font-size:11.5px;
  font-weight:600;
  line-height:1.35;
  letter-spacing:.15px;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Do not allow the hover hint to collide with the new subtitle. */
.tc-hover-enabled .tc-category-card::after{
  display:none !important;
}

/* Training-list copy also gets a small readability lift. */
.tc-category-panel-head h3{
  color:#fff !important;
  font-weight:700 !important;
  letter-spacing:-.35px;
}
.tc-category-panel-head p{
  color:rgba(255,255,255,.82) !important;
  font-size:14px !important;
}
.tc-course-copy h4{
  font-size:17px !important;
  font-weight:700 !important;
  color:#fff !important;
}
.tc-course-copy p{
  color:rgba(255,255,255,.80) !important;
  font-size:11.5px !important;
  line-height:1.52 !important;
}
.tc-course-tag{
  color:#fff !important;
  border-color:rgba(255,255,255,.28) !important;
  background:rgba(255,255,255,.045);
}

@media(max-width:1180px){
  .tc-category-card{min-height:285px !important}
}
@media(max-width:650px){
  .tc-v21{
    padding-top:74px !important;
    padding-bottom:78px !important;
  }
  .tc-v21 + .audience{
    padding-top:72px !important;
    padding-bottom:72px !important;
  }
  .tc-category-card{
    min-height:235px !important;
  }
  .tc-category-art{
    width:116px !important;
    height:80px !important;
  }
  .tc-category-title{
    font-size:29px !important;
    bottom:64px !important;
  }
  .tc-category-subtitle{
    font-size:10.5px;
    white-space:normal;
    bottom:27px;
  }
}



/* =========================================================
   v2.4 — readable professional training catalogue
   ========================================================= */

/* Main category tiles: regular/medium weight, not bold */
.tc-category-title{
  font-weight:500 !important;
  letter-spacing:-.35px !important;
  text-shadow:0 2px 10px rgba(0,0,0,.18) !important;
}
.tc-category-subtitle{
  font-size:12.5px !important;
  font-weight:450 !important;
  line-height:1.45 !important;
  color:rgba(255,255,255,.91) !important;
}

/* The dark-green page background must not visually merge with course tiles. */
.tc-category-panel[data-category-panel="cpp"] .tc-course-card{
  background:linear-gradient(145deg,#347267 0%,#285f57 55%,#22534d 100%) !important;
  border-color:rgba(188,226,218,.26) !important;
}
.tc-category-panel[data-category-panel="qt"] .tc-course-card{
  background:linear-gradient(145deg,#956553 0%,#7f5749 56%,#6b493f 100%) !important;
  border-color:rgba(245,210,192,.25) !important;
}
.tc-category-panel[data-category-panel="performance"] .tc-course-card{
  background:linear-gradient(145deg,#467586 0%,#386474 56%,#315766 100%) !important;
  border-color:rgba(197,224,234,.25) !important;
}
.tc-category-panel[data-category-panel="architecture"] .tc-course-card{
  background:linear-gradient(145deg,#706482 0%,#60546f 56%,#51475f 100%) !important;
  border-color:rgba(221,211,236,.25) !important;
}

.tc-course-card{
  min-height:188px !important;
  padding:20px 64px 19px 20px !important;
  box-shadow:0 14px 30px rgba(0,0,0,.16) !important;
}
.tc-course-card:hover,
.tc-course-card:focus-within,
.tc-course-card.is-open{
  filter:brightness(1.06);
  border-color:rgba(255,255,255,.42) !important;
  box-shadow:0 20px 38px rgba(0,0,0,.24) !important;
}

/* Remove heavy/bold appearance inside course tiles */
.tc-course-copy h4{
  font-family:Inter,"Segoe UI",Arial,sans-serif !important;
  font-size:18px !important;
  line-height:1.28 !important;
  font-weight:500 !important;
  letter-spacing:-.15px !important;
  color:#fff !important;
}
.tc-course-copy p{
  min-height:0 !important;
  margin:0 0 18px !important;
  font-family:Inter,"Segoe UI",Arial,sans-serif !important;
  font-size:13px !important;
  line-height:1.60 !important;
  font-weight:400 !important;
  color:rgba(255,255,255,.92) !important;
}
.tc-course-number{
  width:32px !important;
  height:32px !important;
  margin-bottom:18px !important;
  font-size:10px !important;
  font-weight:600 !important;
  color:#ffd3b5 !important;
}
.tc-course-tag{
  padding:5px 10px !important;
  font-size:9px !important;
  font-weight:550 !important;
  letter-spacing:.25px !important;
  color:#fff !important;
  background:rgba(255,255,255,.07) !important;
}
.tc-course-plus{
  width:34px !important;
  height:34px !important;
  font-size:20px !important;
  background:rgba(255,255,255,.12) !important;
}

/* Panel headings: clean, professional, readable */
.tc-category-panel-head h3{
  font-size:31px !important;
  font-weight:500 !important;
  color:#fff !important;
}
.tc-category-panel-head p{
  max-width:780px;
  font-size:14px !important;
  line-height:1.60 !important;
  font-weight:400 !important;
  color:rgba(255,255,255,.88) !important;
}

/* Detailed white panel typography */
.tc-detail-title h4{
  font-size:19px !important;
  font-weight:500 !important;
  letter-spacing:-.1px !important;
}
.tc-detail-title p{
  font-size:12.5px !important;
  line-height:1.55 !important;
  color:#65746f !important;
}
.tc-topic-label{
  font-size:10.5px !important;
  font-weight:650 !important;
}
.tc-topic{
  min-height:44px !important;
  padding:9px 12px !important;
  font-size:12.5px !important;
  line-height:1.45 !important;
  color:#5f6e69 !important;
}
.tc-topic b{
  font-size:10.5px !important;
  font-weight:650 !important;
}
.tc-detail-side > p{
  font-size:11.5px !important;
  line-height:1.60 !important;
}
.tc-customise{
  font-size:11.5px !important;
  font-weight:600 !important;
}
.tc-mini-graphic h5{
  font-size:19px !important;
  line-height:1.28 !important;
  font-weight:500 !important;
  max-width:88% !important;
}

/* Subject-specific infographic treatment in the detail panel */
.tc-subject-graphic{
  position:absolute;
  left:20px;
  right:20px;
  bottom:18px;
  height:65px;
}
.tc-subject-graphic svg{
  width:100%;
  height:100%;
  display:block;
  overflow:visible;
}
.tc-subject-graphic .sg-line,
.tc-subject-graphic .sg-node,
.tc-subject-graphic .sg-box{
  fill:none;
  stroke:rgba(255,255,255,.82);
  stroke-width:2.4;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.tc-subject-graphic .sg-soft{
  fill:rgba(255,255,255,.13);
  stroke:rgba(255,255,255,.38);
  stroke-width:1.5;
}
.tc-subject-graphic .sg-fill{fill:#86bca9}
.tc-subject-graphic .sg-accent{fill:#dd9169}
.tc-subject-graphic .sg-muted{fill:rgba(255,255,255,.42)}
.tc-subject-graphic text{
  fill:rgba(255,255,255,.90);
  font-family:Inter,"Segoe UI",Arial,sans-serif;
  font-size:10px;
  font-weight:500;
}
.tc-mini-graphic{
  min-height:178px !important;
}

/* Better vertical spacing around the Training Catalogue / Learning Journeys boundary */
.tc-v21{
  padding-top:104px !important;
  padding-bottom:112px !important;
}
.tc-v21 + .audience{
  margin-top:0 !important;
  padding-top:104px !important;
}

/* Make the top menu category headings clearly navigational. */
.training-menu .training-category-heading{
  cursor:pointer;
}
.training-menu .training-category-heading strong{
  font-weight:600;
}
.training-menu a[data-nav-course-title]{
  cursor:pointer;
}

@media(max-width:920px){
  .tc-course-copy h4{font-size:17px !important}
  .tc-course-copy p{font-size:12.5px !important}
}



/* =========================================================
   v2.5 — Training Catalogue tiles closer to latest reference
   ========================================================= */
.tc-v21 .tc-heading{
  margin-bottom:28px !important;
}

.tc-category-grid{
  max-width:1020px !important;
  margin:0 auto !important;
  gap:14px !important;
  align-items:stretch !important;
}

.tc-category-card{
  min-height:216px !important;
  border-radius:28px !important;
  padding:18px 20px 20px !important;
  border:1px solid rgba(255,255,255,.18) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.03),
    0 16px 34px rgba(4,18,14,.18) !important;
}

.tc-category-card:hover,
.tc-category-card:focus-visible,
.tc-category-card.is-active{
  transform:translateY(-4px) !important;
  border-color:rgba(255,255,255,.30) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 22px 40px rgba(3,16,12,.26) !important;
}

/* Softer professional colours, better separated from the dark page background */
.tc-category-card.tc-cpp{
  background:
    radial-gradient(circle at 82% 16%, rgba(113, 206, 171, .12), transparent 28%),
    linear-gradient(145deg, #285b4f 0%, #1c4b42 58%, #143b34 100%) !important;
}
.tc-category-card.tc-qt{
  background:
    radial-gradient(circle at 82% 16%, rgba(242, 187, 147, .13), transparent 28%),
    linear-gradient(145deg, #9c664e 0%, #845541 58%, #6d4535 100%) !important;
}
.tc-category-card.tc-performance{
  background:
    radial-gradient(circle at 82% 16%, rgba(164, 212, 228, .12), transparent 28%),
    linear-gradient(145deg, #4b7282 0%, #375c69 58%, #274754 100%) !important;
}
.tc-category-card.tc-architecture{
  background:
    radial-gradient(circle at 82% 16%, rgba(205, 184, 226, .13), transparent 28%),
    linear-gradient(145deg, #6d6283 0%, #5a506d 58%, #483f59 100%) !important;
}

.tc-category-number{
  top:16px !important;
  left:18px !important;
  width:30px !important;
  height:30px !important;
  border-radius:50% !important;
  border:1px solid rgba(255,255,255,.28) !important;
  background:rgba(255,255,255,.05) !important;
  color:rgba(255,255,255,.95) !important;
  font-size:9px !important;
  font-weight:600 !important;
  letter-spacing:.1px !important;
}

.tc-category-art{
  top:16px !important;
  right:18px !important;
  width:72px !important;
  height:52px !important;
  opacity:.18 !important;
}

.tc-category-art svg text{
  font-size:34px !important;
  font-weight:600 !important;
}
.tc-category-art svg rect,
.tc-category-art svg path,
.tc-category-art .ig-line,
.tc-category-art .ig-needle,
.tc-category-art .ig-chart,
.tc-category-art .ig-chipline,
.tc-category-art .ig-pin,
.tc-category-art .ig-link,
.tc-category-art .ig-ticks{
  stroke-width:2.2 !important;
}

.tc-category-title{
  left:20px !important;
  right:18px !important;
  bottom:18px !important;
  max-width:82% !important;
  font-size:clamp(18px, 1.5vw, 22px) !important;
  line-height:1.15 !important;
  font-weight:500 !important;
  letter-spacing:-.2px !important;
  text-shadow:none !important;
}

.tc-category-subtitle{
  display:none !important;
}

/* Keep the rest of the catalogue readable and visually balanced */
.tc-category-panel{
  margin-top:16px !important;
}

@media (max-width:1180px){
  .tc-category-grid{
    max-width:none !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }
  .tc-category-card{
    min-height:204px !important;
  }
}

@media (max-width:650px){
  .tc-category-grid{
    grid-template-columns:1fr !important;
    gap:12px !important;
  }
  .tc-category-card{
    min-height:180px !important;
    border-radius:24px !important;
  }
  .tc-category-art{
    width:60px !important;
    height:44px !important;
  }
  .tc-category-title{
    font-size:20px !important;
    max-width:78% !important;
  }
}



/* v2.6 — Qt & QML tile colour update only */
.tc-category-card.tc-qt{
  background:
    radial-gradient(circle at 82% 16%, rgba(233, 184, 178, .12), transparent 28%),
    linear-gradient(145deg, #87554f 0%, #71453f 58%, #593633 100%) !important;
}
.tc-category-card.tc-qt:hover,
.tc-category-card.tc-qt:focus-visible,
.tc-category-card.tc-qt.is-active{
  border-color:rgba(245, 210, 205, .34) !important;
}



/* v2.7 — Qt & QML tile changed to professional gray */
.tc-category-card.tc-qt{
  background:
    radial-gradient(circle at 82% 16%, rgba(210, 214, 220, .12), transparent 28%),
    linear-gradient(145deg, #6f757b 0%, #5f666d 58%, #4f575e 100%) !important;
}
.tc-category-card.tc-qt:hover,
.tc-category-card.tc-qt:focus-visible,
.tc-category-card.tc-qt.is-active{
  border-color: rgba(224, 229, 234, .34) !important;
}



/* v2.8 — Qt & QML main tile + inside training cards in matching gray */

/* Main Qt & QML catalogue tile */
.tc-category-card.tc-qt{
  background:
    radial-gradient(circle at 82% 16%, rgba(220, 224, 228, .11), transparent 28%),
    linear-gradient(145deg, #747b81 0%, #626a71 58%, #525a61 100%) !important;
  border-color:rgba(232,236,239,.24) !important;
}

/* Qt & QML training cards shown inside the catalogue */
.tc-category-panel[data-category-panel="qt"] .tc-course-card{
  background:
    radial-gradient(circle at 88% 14%, rgba(235,238,241,.07), transparent 32%),
    linear-gradient(145deg, #737a80 0%, #626a70 58%, #515a60 100%) !important;
  border-color:rgba(232,236,239,.22) !important;
  color:#fff !important;
}

.tc-category-panel[data-category-panel="qt"] .tc-course-card:hover,
.tc-category-panel[data-category-panel="qt"] .tc-course-card:focus-within,
.tc-category-panel[data-category-panel="qt"] .tc-course-card.is-open{
  background:
    radial-gradient(circle at 88% 14%, rgba(245,247,249,.10), transparent 32%),
    linear-gradient(145deg, #7c848a 0%, #697177 58%, #586168 100%) !important;
  border-color:rgba(245,247,249,.38) !important;
}

/* Keep text clear on gray */
.tc-category-panel[data-category-panel="qt"] .tc-course-copy h4,
.tc-category-panel[data-category-panel="qt"] .tc-course-copy p,
.tc-category-panel[data-category-panel="qt"] .tc-course-number,
.tc-category-panel[data-category-panel="qt"] .tc-course-tag{
  color:#fff !important;
}

.tc-category-panel[data-category-panel="qt"] .tc-course-plus{
  background:rgba(255,255,255,.13) !important;
}
.tc-category-panel[data-category-panel="qt"] .tc-course-plus:hover{
  background:rgba(255,255,255,.20) !important;
}



/* =========================================================
   v2.9 — Animated subject-specific training infographics
   ========================================================= */

/* Animated infographic container inside the training detail panel */
.tc-subject-graphic{
  position:absolute;
  left:18px;
  right:18px;
  bottom:16px;
  height:72px;
  pointer-events:none;
}
.tc-subject-graphic svg{
  width:100%;
  height:100%;
  display:block;
  overflow:visible;
}
.tc-subject-graphic .sg-line,
.tc-subject-graphic .sg-node,
.tc-subject-graphic .sg-box,
.tc-subject-graphic .sg-outline{
  fill:none;
  stroke:rgba(255,255,255,.86);
  stroke-width:2.4;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.tc-subject-graphic .sg-soft{
  fill:rgba(255,255,255,.13);
  stroke:rgba(255,255,255,.34);
  stroke-width:1.5;
}
.tc-subject-graphic .sg-fill{fill:#8ec3af}
.tc-subject-graphic .sg-accent{fill:#d69069}
.tc-subject-graphic .sg-muted{fill:rgba(255,255,255,.40)}
.tc-subject-graphic text{
  fill:rgba(255,255,255,.90);
  font-family:Inter,"Segoe UI",Arial,sans-serif;
  font-size:10px;
  font-weight:500;
}

/* Animation primitives */
@keyframes tcPulse {
  0%,100% { transform:scale(1); opacity:.92; }
  50% { transform:scale(1.08); opacity:1; }
}
@keyframes tcFloat {
  0%,100% { transform:translateY(0px); }
  50% { transform:translateY(-4px); }
}
@keyframes tcFloatSlow {
  0%,100% { transform:translateY(0px); }
  50% { transform:translateY(-6px); }
}
@keyframes tcSlide {
  0% { transform:translateX(-10px); opacity:.65; }
  50% { transform:translateX(6px); opacity:1; }
  100% { transform:translateX(-10px); opacity:.65; }
}
@keyframes tcBars {
  0%,100% { transform:scaleY(.55); }
  50% { transform:scaleY(1); }
}
@keyframes tcRotateNeedle {
  0% { transform:rotate(-28deg); }
  50% { transform:rotate(22deg); }
  100% { transform:rotate(-28deg); }
}
@keyframes tcBlink {
  0%,40%,100% { opacity:.18; }
  20% { opacity:.95; }
}
@keyframes tcDash {
  from { stroke-dashoffset:36; }
  to { stroke-dashoffset:0; }
}
@keyframes tcTrace {
  0% { stroke-dashoffset:180; opacity:.75; }
  50% { opacity:1; }
  100% { stroke-dashoffset:0; opacity:.8; }
}
@keyframes tcExpand {
  0%,100% { transform:scaleX(.82); }
  50% { transform:scaleX(1.04); }
}
@keyframes tcCube {
  0% { transform:translateY(0px) skewX(0deg); }
  50% { transform:translateY(-4px) skewX(-2deg); }
  100% { transform:translateY(0px) skewX(0deg); }
}
@keyframes tcNodeGlow {
  0%,100% { opacity:.55; }
  50% { opacity:1; }
}
@keyframes tcWave {
  0% { stroke-dashoffset:140; }
  100% { stroke-dashoffset:0; }
}

/* Animation classes */
.tc-subject-graphic .anim-pulse{ transform-origin:center; animation:tcPulse 1.8s ease-in-out infinite; }
.tc-subject-graphic .anim-float{ transform-origin:center; animation:tcFloat 2.6s ease-in-out infinite; }
.tc-subject-graphic .anim-float-slow{ transform-origin:center; animation:tcFloatSlow 3.2s ease-in-out infinite; }
.tc-subject-graphic .anim-slide{ animation:tcSlide 2.2s ease-in-out infinite; }
.tc-subject-graphic .anim-bars{ transform-origin:center bottom; animation:tcBars 1.4s ease-in-out infinite; }
.tc-subject-graphic .anim-bars.delay1{ animation-delay:.15s; }
.tc-subject-graphic .anim-bars.delay2{ animation-delay:.3s; }
.tc-subject-graphic .anim-bars.delay3{ animation-delay:.45s; }
.tc-subject-graphic .anim-bars.delay4{ animation-delay:.6s; }
.tc-subject-graphic .anim-needle{ transform-origin:56px 53px; animation:tcRotateNeedle 2.2s ease-in-out infinite; }
.tc-subject-graphic .anim-blink{ animation:tcBlink 1.4s step-end infinite; }
.tc-subject-graphic .anim-blink.delay1{ animation-delay:.2s; }
.tc-subject-graphic .anim-blink.delay2{ animation-delay:.4s; }
.tc-subject-graphic .anim-dash{
  stroke-dasharray:10 8;
  animation:tcDash 1.8s linear infinite;
}
.tc-subject-graphic .anim-trace{
  stroke-dasharray:180;
  animation:tcTrace 1.8s ease-in-out infinite;
}
.tc-subject-graphic .anim-expand{
  transform-origin:center;
  animation:tcExpand 2.2s ease-in-out infinite;
}
.tc-subject-graphic .anim-cube{
  transform-origin:center;
  animation:tcCube 2.6s ease-in-out infinite;
}
.tc-subject-graphic .anim-glow{ animation:tcNodeGlow 1.6s ease-in-out infinite; }
.tc-subject-graphic .anim-glow.delay1{ animation-delay:.18s; }
.tc-subject-graphic .anim-glow.delay2{ animation-delay:.36s; }
.tc-subject-graphic .anim-wave{
  stroke-dasharray:140;
  animation:tcWave 1.6s linear infinite;
}



/* =========================================================
   v3.0 — Hero slider animation update
   Modern C++: live typing editor
   Performance: live profiler dashboard
   ========================================================= */

/* ---------- Modern C++ live typing ---------- */
.cpp-live-editor{
  gap:0 !important;
  padding:30px 34px 26px !important;
  background:
    radial-gradient(circle at 82% 5%,rgba(66,123,98,.28),transparent 34%),
    linear-gradient(145deg,#17352b,#0e211a 72%) !important;
}
.cpp-editor-label{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:20px;
}
.cpp-editor-label small{
  color:#a1c4b5 !important;
  font-size:8px;
  font-weight:700;
  letter-spacing:1.65px;
}
.cpp-run-state{
  display:flex;
  align-items:center;
  gap:6px;
  color:#83d8b4;
  font-size:8px;
  font-weight:700;
  letter-spacing:.8px;
}
.cpp-run-state i{
  width:7px;height:7px;border-radius:50%;
  background:#66d29e;
  box-shadow:0 0 0 0 rgba(102,210,158,.42);
  animation:cppRunPulse 1.6s ease-out infinite;
}
@keyframes cppRunPulse{
  0%{box-shadow:0 0 0 0 rgba(102,210,158,.40)}
  70%{box-shadow:0 0 0 7px rgba(102,210,158,0)}
  100%{box-shadow:0 0 0 0 rgba(102,210,158,0)}
}
.cpp-editor-lines{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-height:230px;
  padding:14px 0 12px;
  border-top:1px solid rgba(255,255,255,.07);
  border-bottom:1px solid rgba(255,255,255,.07);
}
.cpp-type-line{
  display:grid;
  grid-template-columns:28px minmax(0,1fr);
  align-items:center;
  min-height:34px;
  padding:2px 9px;
  border-radius:5px;
  background:transparent;
}
.cpp-type-line b{
  color:#648376;
  font:500 9px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace;
}
.cpp-type-line code{
  display:block;
  min-height:20px;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  color:#dfece6;
  font:500 11px/1.55 ui-monospace,SFMono-Regular,Consolas,monospace !important;
  white-space:pre-wrap;
}
.cpp-type-line code.is-typing::after{
  content:"";
  display:inline-block;
  width:7px;
  height:15px;
  margin-left:2px;
  vertical-align:-2px;
  background:#83d8b4;
  animation:cppCursorBlink .68s steps(1) infinite;
}
@keyframes cppCursorBlink{50%{opacity:0}}
.cpp-type-line.is-done{
  background:rgba(255,255,255,.025);
}
.cpp-success-line code{
  color:#83d8b4 !important;
}
.cpp-editor-status{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin-top:18px;
}
.cpp-editor-status span{
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-rows:auto auto;
  column-gap:8px;
  align-items:center;
  padding:9px 11px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:7px;
  background:rgba(255,255,255,.035);
}
.cpp-editor-status strong{
  grid-row:1/3;
  color:#d9eae3;
  font-size:13px;
  font-weight:650;
}
.cpp-editor-status small{
  color:#6f9283;
  font-size:7.5px;
  letter-spacing:.5px;
  text-transform:uppercase;
}

/* ---------- Performance live dashboard ---------- */
.perf-live-dashboard{
  position:relative;
  height:calc(100% - 48px);
  overflow:hidden;
  padding:22px 24px 20px !important;
  background:
    radial-gradient(circle at 94% 0%,rgba(83,136,111,.12),transparent 30%),
    #f6f9f7 !important;
}
.perf-live-dashboard header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:14px;
}
.perf-live-dashboard header span{
  display:flex;
  align-items:center;
  gap:7px;
  color:#688178;
  font-size:8px;
  font-weight:700;
  letter-spacing:1.2px;
}
.perf-live-dot{
  width:7px;height:7px;border-radius:50%;
  background:#5b9c7d;
  animation:perfLivePulse 1.45s ease-in-out infinite;
}
@keyframes perfLivePulse{
  0%,100%{opacity:.45;transform:scale(.86)}
  50%{opacity:1;transform:scale(1.15)}
}
.perf-fps{
  padding:5px 9px;
  border-radius:999px;
  background:#e1eee7;
  color:#2d7458 !important;
  font-size:9px;
  font-weight:700;
}
.perf-kpi-row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin-bottom:12px;
}
.perf-kpi{
  position:relative;
  padding:11px 12px 10px;
  border:1px solid #dce7e1;
  border-radius:8px;
  background:#fff;
  box-shadow:0 4px 12px rgba(42,78,62,.05);
}
.perf-kpi small{
  display:block;
  margin-bottom:5px;
  color:#7c8c85;
  font-size:7px;
  font-weight:700;
  letter-spacing:.55px;
}
.perf-kpi strong{
  display:block;
  color:#24493b;
  font-size:17px;
  font-weight:650;
  line-height:1.05;
}
.perf-kpi strong em{
  font-size:8px;
  font-style:normal;
  font-weight:500;
  color:#7a8b84;
}
.perf-kpi > i{
  display:block;
  margin-top:5px;
  font-size:7px;
  font-style:normal;
}
.perf-good{color:#438666}
.perf-number{
  display:inline-block;
  min-width:28px;
  animation:perfNumberGlow 2.6s ease-in-out infinite;
}
@keyframes perfNumberGlow{
  0%,100%{opacity:.78}
  50%{opacity:1}
}
.perf-chart{
  position:relative;
  height:205px;
  padding:28px 8px 5px;
  border:1px solid #dbe6e0;
  border-radius:9px;
  overflow:hidden;
  background:linear-gradient(#fff,#f8fbf9);
}
.perf-chart-labels{
  position:absolute;
  left:13px;right:13px;top:9px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  z-index:2;
}
.perf-chart-labels span{
  color:#4d665c;
  font-size:8px;
  font-weight:700;
}
.perf-chart-labels b{
  color:#ad7459;
  font-size:7px;
  font-weight:650;
}
.perf-chart svg{
  width:100%;
  height:100%;
}
.perf-grid-lines path{
  fill:none;
  stroke:#e5ece8;
  stroke-width:1;
}
.perf-budget-line{
  fill:none;
  stroke:#d49779;
  stroke-width:1.4;
  stroke-dasharray:6 6;
}
.perf-area{
  fill:url(#perfAreaGradientV30);
  opacity:.9;
}
.perf-trace{
  fill:none;
  stroke:#4f9073;
  stroke-width:3;
  stroke-linecap:round;
  stroke-dasharray:900;
  stroke-dashoffset:900;
  animation:perfTraceDraw 4.5s ease-in-out infinite;
}
@keyframes perfTraceDraw{
  0%{stroke-dashoffset:900;opacity:.3}
  18%,82%{stroke-dashoffset:0;opacity:1}
  100%{stroke-dashoffset:-900;opacity:.25}
}
.perf-scan-line{
  stroke:#6ba188;
  stroke-width:1.5;
  opacity:.45;
  animation:perfScan 3.2s linear infinite;
}
@keyframes perfScan{
  from{transform:translateX(0)}
  to{transform:translateX(620px)}
}
.perf-trace-dot{
  fill:#fff;
  stroke:#4f9073;
  stroke-width:3;
  animation:perfDotPulse 1.8s ease-in-out infinite;
}
.perf-trace-dot.dot-two{animation-delay:.3s}
.perf-trace-dot.dot-three{animation-delay:.6s}
@keyframes perfDotPulse{
  0%,100%{r:4;opacity:.55}
  50%{r:7;opacity:1}
}
.perf-resource-row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:9px;
  margin-top:11px;
}
.perf-resource-row > span{
  display:grid;
  grid-template-columns:28px 1fr 28px;
  gap:7px;
  align-items:center;
}
.perf-resource-row b,
.perf-resource-row small{
  color:#6f8179;
  font-size:7px;
  font-weight:700;
}
.perf-resource-row small{text-align:right}
.perf-resource-row i{
  position:relative;
  height:6px;
  overflow:hidden;
  border-radius:999px;
  background:#dfe8e3;
}
.perf-fill{
  position:absolute;
  inset:0 auto 0 0;
  border-radius:999px;
  background:#63977f;
  transform-origin:left;
  animation:perfResourceFlow 2.4s ease-in-out infinite alternate;
}
.perf-fill-cpu{width:24%}
.perf-fill-gpu{width:38%;animation-delay:.25s}
.perf-fill-mem{width:51%;background:#b88166;animation-delay:.5s}
@keyframes perfResourceFlow{
  from{transform:scaleX(.72)}
  to{transform:scaleX(1)}
}

@media(max-width:720px){
  .cpp-live-editor{padding:22px 20px !important}
  .cpp-editor-lines{min-height:190px}
  .cpp-type-line code{font-size:8.5px !important}
  .cpp-editor-status strong{font-size:11px}
  .perf-live-dashboard{padding:15px 14px 13px !important}
  .perf-kpi strong{font-size:13px}
  .perf-chart{height:150px}
  .perf-resource-row{gap:5px}
}
@media(prefers-reduced-motion:reduce){
  .cpp-run-state i,
  .cpp-type-line code.is-typing::after,
  .perf-live-dot,
  .perf-number,
  .perf-trace,
  .perf-scan-line,
  .perf-trace-dot,
  .perf-fill{
    animation:none !important;
  }
}



/* =========================================================
   v3.1 — Qt & Advanced Qt slider: automotive HMI animation
   ========================================================= */
.qt-auto-hmi{
  position:relative;
  display:flex !important;
  flex-direction:column;
  height:calc(100% - 48px);
  overflow:hidden;
  padding:0 !important;
  background:
    radial-gradient(circle at 84% 8%, rgba(49,113,93,.16), transparent 28%),
    linear-gradient(145deg,#101d1a,#172824 68%,#0e1715) !important;
  color:#eef6f2;
}

.qt-hmi-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:42px;
  padding:0 18px;
  border-bottom:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.025);
}
.qt-hmi-brand{
  font-size:8px;
  font-weight:700;
  letter-spacing:1.1px;
  text-transform:uppercase;
  color:#91bca9;
}
.qt-hmi-status{
  display:flex;
  gap:12px;
  align-items:center;
  color:#c7d7d0;
  font-size:8px;
}
.qt-hmi-temp{
  color:#82c7aa;
}

.qt-hmi-main{
  display:grid;
  grid-template-columns:1.08fr .92fr;
  grid-template-rows:1fr 1fr;
  gap:10px;
  flex:1;
  padding:12px;
}
.qt-infotainment-card{
  grid-row:1/3;
}
.qt-infotainment-card,
.qt-seat-card,
.qt-climate-card{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.025));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
.qt-card-label{
  position:absolute;
  top:12px;
  left:14px;
  z-index:2;
  color:#739486;
  font-size:7px;
  font-weight:750;
  letter-spacing:1px;
}

.qt-infotainment-card{
  padding:36px 16px 14px;
}
.qt-now-playing{
  display:grid;
  grid-template-columns:86px 1fr;
  gap:14px;
  align-items:center;
}
.qt-album-art{
  position:relative;
  display:grid;
  place-items:center;
  width:86px;
  height:86px;
  overflow:hidden;
  border-radius:12px;
  background:
    radial-gradient(circle at 70% 20%,rgba(125,204,171,.28),transparent 30%),
    linear-gradient(145deg,#25473e,#18352e);
  box-shadow:0 12px 28px rgba(0,0,0,.24);
}
.qt-album-art > span{
  position:relative;
  z-index:2;
  font-size:28px;
  color:#c4e5d7;
  animation:qtMusicPulse 1.9s ease-in-out infinite;
}
.qt-album-art i{
  position:absolute;
  bottom:10px;
  width:6px;
  border-radius:4px 4px 0 0;
  background:#77b89c;
  transform-origin:bottom;
  animation:qtEq 1.2s ease-in-out infinite;
}
.qt-album-art i:nth-of-type(1){left:20px;height:22px}
.qt-album-art i:nth-of-type(2){left:38px;height:35px;animation-delay:.2s}
.qt-album-art i:nth-of-type(3){left:56px;height:27px;animation-delay:.4s}
@keyframes qtEq{
  0%,100%{transform:scaleY(.45);opacity:.55}
  50%{transform:scaleY(1);opacity:1}
}
@keyframes qtMusicPulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.08)}
}
.qt-track-copy small{
  display:block;
  margin-bottom:6px;
  color:#719486;
  font-size:7px;
  letter-spacing:.8px;
}
.qt-track-copy strong{
  display:block;
  margin-bottom:4px;
  color:#fff;
  font-size:15px;
  font-weight:550;
}
.qt-track-copy span{
  color:#94a9a0;
  font-size:9px;
}
.qt-progress{
  display:grid;
  grid-template-columns:1fr auto auto;
  gap:8px;
  align-items:center;
  margin-top:18px;
}
.qt-progress > i{
  position:relative;
  height:4px;
  overflow:hidden;
  border-radius:999px;
  background:#2b4139;
}
.qt-progress > i em{
  position:absolute;
  inset:0 auto 0 0;
  width:54%;
  border-radius:999px;
  background:#6db293;
  animation:qtTrackProgress 5s linear infinite alternate;
}
@keyframes qtTrackProgress{
  from{width:38%}
  to{width:76%}
}
.qt-progress span{
  color:#778a82;
  font-size:7px;
}
.qt-media-controls{
  display:flex;
  justify-content:center;
  gap:12px;
  margin-top:18px;
}
.qt-media-controls button{
  display:grid;
  place-items:center;
  width:30px;height:30px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:50%;
  background:rgba(255,255,255,.035);
  color:#d6e3dd;
  font-size:14px;
}
.qt-media-controls .qt-play{
  width:38px;height:38px;
  background:#5c9d82;
  color:#0d1c17;
  font-size:11px;
  font-weight:700;
  animation:qtPlayGlow 2s ease-in-out infinite;
}
@keyframes qtPlayGlow{
  0%,100%{box-shadow:0 0 0 0 rgba(92,157,130,.18)}
  50%{box-shadow:0 0 0 7px rgba(92,157,130,0)}
}

.qt-seat-card{
  padding:34px 13px 12px;
}
.qt-seat-layout{
  display:grid;
  grid-template-columns:86px 1fr;
  gap:10px;
  align-items:center;
}
.qt-seat-visual{
  position:relative;
  width:76px;
  height:92px;
  margin:auto;
}
.qt-seat-back,
.qt-seat-base{
  position:absolute;
  left:19px;
  width:38px;
  border:2px solid rgba(255,255,255,.24);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
}
.qt-seat-back{
  top:4px;
  height:48px;
  border-radius:18px 18px 10px 10px;
  transform:skewY(-4deg);
}
.qt-seat-base{
  bottom:7px;
  height:30px;
  border-radius:10px 10px 18px 18px;
  transform:skewX(-8deg);
}
.qt-seat-heat{
  position:absolute;
  left:30px;
  width:16px;
  height:3px;
  border-radius:999px;
  background:#d17f60;
  opacity:.25;
  animation:qtHeat 1.6s ease-in-out infinite;
}
.qt-seat-heat.heat-1{top:27px}
.qt-seat-heat.heat-2{top:38px;animation-delay:.2s}
.qt-seat-heat.heat-3{top:66px;animation-delay:.4s}
@keyframes qtHeat{
  0%,100%{opacity:.18;transform:scaleX(.7)}
  50%{opacity:.95;transform:scaleX(1)}
}
.qt-seat-controls small{
  display:block;
  color:#718c81;
  font-size:7px;
}
.qt-seat-controls strong{
  display:block;
  margin:4px 0 8px;
  font-size:14px;
  font-weight:550;
  color:#fff;
}
.qt-seat-buttons{
  display:flex;
  gap:6px;
}
.qt-seat-buttons button{
  width:25px;height:25px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:7px;
  background:rgba(255,255,255,.04);
  color:#dbe7e1;
}
.qt-seat-modes{
  display:flex;
  gap:5px;
  margin-top:8px;
  flex-wrap:wrap;
}
.qt-seat-modes span{
  padding:4px 6px;
  border-radius:999px;
  color:#7f928a;
  font-size:6.5px;
  background:rgba(255,255,255,.035);
}
.qt-seat-modes span.active{
  color:#f0c5ae;
  background:rgba(209,127,96,.13);
}

.qt-climate-card{
  padding:34px 12px 12px;
}
.qt-climate-dials{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  align-items:center;
}
.qt-temp-dial{
  position:relative;
  width:88px;
  height:88px;
  margin:auto;
}
.qt-temp-dial svg{
  position:absolute;
  inset:0;
  width:100%;height:100%;
  transform:rotate(-8deg);
}
.qt-temp-dial circle{
  fill:none;
  stroke:rgba(255,255,255,.06);
  stroke-width:8;
}
.qt-temp-arc{
  fill:none;
  stroke:#6eb191;
  stroke-width:8;
  stroke-linecap:round;
  stroke-dasharray:160;
  stroke-dashoffset:28;
  animation:qtClimateArc 2.8s ease-in-out infinite alternate;
}
@keyframes qtClimateArc{
  from{stroke-dashoffset:55}
  to{stroke-dashoffset:18}
}
.qt-temp-dial > div{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  align-content:center;
}
.qt-temp-dial strong{
  color:#fff;
  font-size:17px;
  font-weight:550;
}
.qt-temp-dial small{
  color:#7e948a;
  font-size:6px;
}
.qt-fan{
  text-align:center;
}
.qt-fan-icon{
  display:block;
  margin-bottom:7px;
  color:#9dc9b7;
  font-size:22px;
  animation:qtFanSpin 3.2s linear infinite;
}
@keyframes qtFanSpin{
  to{transform:rotate(360deg)}
}
.qt-fan-bars{
  display:flex;
  justify-content:center;
  align-items:flex-end;
  gap:3px;
  height:20px;
}
.qt-fan-bars i{
  width:4px;
  border-radius:3px;
  background:#6caf92;
  transform-origin:bottom;
  animation:qtFanBars 1.4s ease-in-out infinite;
}
.qt-fan-bars i:nth-child(1){height:6px}
.qt-fan-bars i:nth-child(2){height:9px;animation-delay:.1s}
.qt-fan-bars i:nth-child(3){height:13px;animation-delay:.2s}
.qt-fan-bars i:nth-child(4){height:17px;animation-delay:.3s}
.qt-fan-bars i:nth-child(5){height:20px;animation-delay:.4s}
@keyframes qtFanBars{
  0%,100%{opacity:.35;transform:scaleY(.75)}
  50%{opacity:1;transform:scaleY(1)}
}
.qt-fan small{
  display:block;
  margin-top:6px;
  color:#748b81;
  font-size:6px;
}
.qt-climate-actions{
  display:flex;
  gap:5px;
  margin-top:6px;
}
.qt-climate-actions span{
  flex:1;
  padding:5px 0;
  border-radius:6px;
  text-align:center;
  color:#758a80;
  font-size:6px;
  background:rgba(255,255,255,.025);
}
.qt-climate-actions span.active{
  color:#cbe4d8;
  background:rgba(99,164,137,.12);
}

.qt-hmi-bottom{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  min-height:35px;
  border-top:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.018);
}
.qt-hmi-bottom span{
  display:grid;
  place-items:center;
  color:#667c73;
  font-size:6.5px;
}
.qt-hmi-bottom span.active{
  color:#a5cebd;
  background:rgba(98,164,136,.06);
}

@media(max-width:720px){
  .qt-hmi-main{
    grid-template-columns:1fr;
    grid-template-rows:auto auto auto;
    overflow:auto;
  }
  .qt-infotainment-card{grid-row:auto}
  .qt-seat-card,.qt-climate-card{min-height:155px}
  .qt-hmi-bottom{display:none}
}
@media(prefers-reduced-motion:reduce){
  .qt-album-art > span,
  .qt-album-art i,
  .qt-progress > i em,
  .qt-play,
  .qt-seat-heat,
  .qt-temp-arc,
  .qt-fan-icon,
  .qt-fan-bars i{
    animation:none !important;
  }
}



/* =========================================================
   v3.2 — New lead slider: Expert Qt & QML Training
   ========================================================= */
.expert-lead-slide .slide-copy h1 span{
  max-width:640px;
}
.expert-lead-slide .slide-copy > p:not(.eyebrow){
  max-width:690px;
}

.expert-proof-row{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin:18px 0 2px;
}
.expert-proof-row span{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:6px 10px;
  border:1px solid rgba(30,78,62,.16);
  border-radius:999px;
  background:rgba(31,87,67,.055);
  color:#44655a;
  font-size:8px;
  font-weight:650;
  letter-spacing:.35px;
  text-transform:uppercase;
}
.expert-proof-row b{
  margin-right:4px;
  color:#c77657;
  font-size:10px;
}

.screen-expert-training{
  background:
    radial-gradient(circle at 88% 0%,rgba(72,142,113,.22),transparent 31%),
    linear-gradient(145deg,#183f33,#102b23 72%,#0d211b) !important;
}
.expert-lab{
  display:flex;
  flex-direction:column;
  height:calc(100% - 48px);
  padding:20px 22px 16px;
  color:#eef7f3;
}
.expert-lab-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin-bottom:13px;
}
.expert-lab-head small{
  display:block;
  margin-bottom:4px;
  color:#78a995;
  font-size:7px;
  font-weight:800;
  letter-spacing:1.3px;
}
.expert-lab-head strong{
  color:#f1f7f4;
  font-size:13px;
  font-weight:550;
}
.champion-badge{
  display:grid;
  grid-template-columns:auto auto;
  align-items:center;
  gap:7px;
  padding:7px 10px 7px 7px;
  border:1px solid rgba(255,255,255,.11);
  border-radius:9px;
  background:rgba(255,255,255,.045);
}
.champion-badge i{
  display:grid;
  place-items:center;
  width:29px;height:29px;
  border-radius:6px;
  background:#55b78a;
  color:#0f2b21;
  font-size:12px;
  font-style:normal;
  font-weight:850;
}
.champion-badge b{
  color:#bed9cd;
  font-size:7px;
  letter-spacing:1px;
}

.expert-lab-grid{
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  grid-template-rows:1fr 1fr;
  gap:9px;
  flex:1;
  min-height:0;
}
.expert-lab-grid section{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.075);
  border-radius:10px;
  background:linear-gradient(145deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
}
.expert-section-label{
  position:absolute;
  top:10px;
  left:11px;
  color:#739c8b;
  font-size:6.5px;
  font-weight:800;
  letter-spacing:.9px;
}

.expert-hands-on{
  display:grid;
  grid-template-columns:100px 1fr;
  align-items:center;
  gap:4px;
  padding:28px 10px 9px;
}
.expert-ring{
  position:relative;
  width:92px;
  height:92px;
}
.expert-ring svg{
  width:100%;height:100%;
  transform:rotate(-90deg);
}
.expert-ring-bg,
.expert-ring-progress{
  fill:none;
  stroke-width:7;
}
.expert-ring-bg{stroke:rgba(255,255,255,.07)}
.expert-ring-progress{
  stroke:#69b692;
  stroke-linecap:round;
  stroke-dasharray:239;
  stroke-dashoffset:239;
  animation:expertRingFill 4s ease-in-out infinite;
}
@keyframes expertRingFill{
  0%{stroke-dashoffset:239}
  25%,76%{stroke-dashoffset:48}
  100%{stroke-dashoffset:239}
}
.expert-ring > div{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  align-content:center;
}
.expert-ring strong{
  color:#fff;
  font-size:21px;
  font-weight:650;
  line-height:1;
}
.expert-ring small{
  margin-top:4px;
  color:#7ea493;
  font-size:6px;
  letter-spacing:.7px;
}
.expert-hands-on p{
  margin:0;
  color:#8fa69d;
  font-size:7.5px;
  line-height:1.45;
}

.expert-project{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:27px 14px 12px;
}
.project-flow{
  position:relative;
  display:grid;
  grid-template-columns:1fr 28px 1fr 28px 1fr;
  align-items:center;
  width:100%;
}
.project-node{
  position:relative;
  z-index:2;
  display:grid;
  place-items:center;
  min-height:35px;
  padding:5px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:7px;
  background:#183a30;
  color:#bad1c7;
  font-size:7px;
  animation:expertNodePulse 2.4s ease-in-out infinite;
}
.project-node.n2{
  background:#235947;
  color:#e2f2eb;
  animation-delay:.25s;
}
.project-node.n3{animation-delay:.5s}
@keyframes expertNodePulse{
  0%,100%{transform:translateY(0);border-color:rgba(255,255,255,.10)}
  50%{transform:translateY(-2px);border-color:rgba(105,182,146,.48)}
}
.project-link{
  height:1px;
  overflow:hidden;
  background:rgba(255,255,255,.10);
}
.project-link::after{
  content:"";
  display:block;
  width:45%;
  height:1px;
  background:#69b692;
  animation:expertFlow 1.7s linear infinite;
}
.project-link.l2::after{animation-delay:.55s}
@keyframes expertFlow{
  from{transform:translateX(-120%)}
  to{transform:translateX(260%)}
}
.project-pulse{
  position:absolute;
  width:120px;height:120px;
  border-radius:50%;
  border:1px solid rgba(103,180,144,.13);
  animation:expertProjectPulse 2.6s ease-out infinite;
}
@keyframes expertProjectPulse{
  0%{transform:scale(.45);opacity:0}
  40%{opacity:.55}
  100%{transform:scale(1.55);opacity:0}
}

.expert-advanced{
  padding:31px 12px 10px;
}
.advanced-chip-row{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-content:center;
  height:100%;
}
.advanced-chip-row span{
  padding:6px 8px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:999px;
  background:rgba(255,255,255,.035);
  color:#a8c0b6;
  font-size:6.5px;
  animation:expertChip 3s ease-in-out infinite;
}
.advanced-chip-row span:nth-child(2){animation-delay:.2s}
.advanced-chip-row span:nth-child(3){animation-delay:.4s}
.advanced-chip-row span:nth-child(4){animation-delay:.6s}
.advanced-chip-row span:nth-child(5){animation-delay:.8s}
.advanced-chip-row span:nth-child(6){animation-delay:1s}
@keyframes expertChip{
  0%,100%{background:rgba(255,255,255,.03);color:#8ca89c}
  50%{background:rgba(105,182,146,.12);color:#d6ebe2}
}

.expert-ai{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:28px 14px 9px;
}
.ai-workflow{
  display:grid;
  grid-template-columns:1.2fr 22px .72fr 22px 40px;
  gap:5px;
  align-items:center;
}
.ai-code{
  display:flex;
  flex-direction:column;
  gap:5px;
}
.ai-code i{
  display:block;
  height:4px;
  border-radius:999px;
  background:#5d7d70;
  transform-origin:left;
  animation:expertCodeType 2.2s ease-in-out infinite;
}
.ai-code i:nth-child(1){width:88%}
.ai-code i:nth-child(2){width:62%;animation-delay:.18s}
.ai-code i:nth-child(3){width:78%;animation-delay:.36s}
.ai-code i:nth-child(4){width:48%;animation-delay:.54s}
@keyframes expertCodeType{
  0%,100%{transform:scaleX(.28);opacity:.35}
  55%{transform:scaleX(1);opacity:1}
}
.ai-arrow{
  color:#5a8d77;
  font-size:13px;
  animation:expertArrow 1.4s ease-in-out infinite;
}
@keyframes expertArrow{
  0%,100%{transform:translateX(-2px);opacity:.35}
  50%{transform:translateX(3px);opacity:1}
}
.ai-agent{
  position:relative;
  display:grid;
  place-items:center;
  width:46px;height:46px;
  margin:auto;
  border:1px solid rgba(105,182,146,.30);
  border-radius:11px;
  background:rgba(105,182,146,.08);
}
.ai-agent b{
  color:#9dd5bb;
  font-size:12px;
}
.ai-agent span{
  position:absolute;
  width:3px;height:3px;
  border-radius:50%;
  background:#75bd9b;
  animation:expertAiOrbit 2.2s linear infinite;
}
.ai-agent span:nth-of-type(1){transform:translate(18px,0)}
.ai-agent span:nth-of-type(2){animation-delay:.73s}
.ai-agent span:nth-of-type(3){animation-delay:1.46s}
@keyframes expertAiOrbit{
  from{transform:rotate(0deg) translateX(25px) rotate(0deg)}
  to{transform:rotate(360deg) translateX(25px) rotate(-360deg)}
}
.ai-result{
  display:grid;
  place-items:center;
  width:33px;height:33px;
  border-radius:50%;
  background:rgba(105,182,146,.13);
  color:#86d3ae;
  font-size:14px;
  animation:expertResult 1.8s ease-in-out infinite;
}
@keyframes expertResult{
  0%,100%{box-shadow:0 0 0 0 rgba(105,182,146,.18)}
  50%{box-shadow:0 0 0 8px rgba(105,182,146,0)}
}
.expert-ai > small{
  display:block;
  margin-top:8px;
  color:#69897b;
  font-size:6.5px;
  letter-spacing:.5px;
}

.expert-lab-footer{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:11px 4px 0;
}
.expert-lab-footer span{
  display:flex;
  align-items:center;
  gap:5px;
  color:#6f9182;
  font-size:6.5px;
}
.expert-lab-footer i{
  width:5px;height:5px;
  border-radius:50%;
  background:#66af8d;
  animation:expertFooterPulse 2s ease-in-out infinite;
}
.expert-lab-footer span:nth-child(2) i{animation-delay:.35s}
.expert-lab-footer span:nth-child(3) i{animation-delay:.7s}
@keyframes expertFooterPulse{
  0%,100%{opacity:.35}
  50%{opacity:1}
}

/* Five controls: allow a little more width and smaller type */
.training-slider .slider-controls{
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;
}
.training-slider .slider-controls b{
  font-size:clamp(8px,.72vw,10px) !important;
}

@media(max-width:900px){
  .expert-lab-grid{
    grid-template-columns:1fr 1fr;
  }
  .expert-hands-on{
    grid-template-columns:80px 1fr;
  }
  .expert-ring{width:74px;height:74px}
}
@media(max-width:720px){
  .expert-proof-row{gap:5px}
  .expert-proof-row span{font-size:7px;padding:5px 8px}
  .expert-lab{padding:15px 13px 12px}
  .expert-lab-grid{
    grid-template-columns:1fr;
    grid-template-rows:auto;
    overflow:auto;
  }
  .expert-lab-grid section{min-height:115px}
  .expert-project{min-height:120px}
  .expert-lab-footer{display:none}
}
@media(prefers-reduced-motion:reduce){
  .expert-ring-progress,
  .project-node,
  .project-link::after,
  .project-pulse,
  .advanced-chip-row span,
  .ai-code i,
  .ai-arrow,
  .ai-agent span,
  .ai-result,
  .expert-lab-footer i{
    animation:none !important;
  }
}



/* =========================================================
   v3.3 — Premium car HMI infotainment slider
   ========================================================= */
.qt-premium-hmi{
  position:relative;
  display:flex !important;
  flex-direction:column;
  height:calc(100% - 48px);
  overflow:hidden;
  padding:0 !important;
  border-radius:0 0 12px 12px;
  background:
    radial-gradient(circle at 88% 8%,rgba(54,128,102,.18),transparent 30%),
    linear-gradient(145deg,#0d1816,#13231f 62%,#0d1715) !important;
  color:#edf6f2;
  font-family:Inter,"Segoe UI",Arial,sans-serif;
}

.qt-premium-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:44px;
  padding:0 16px;
  border-bottom:1px solid rgba(255,255,255,.065);
  background:rgba(255,255,255,.02);
}
.qt-brand-block{
  display:flex;
  align-items:center;
  gap:8px;
}
.qt-car-mark{
  display:grid;
  place-items:center;
  width:24px;height:24px;
  border-radius:6px;
  background:rgba(91,171,137,.14);
  color:#78c09f;
  font-size:10px;
  animation:qtBrandPulse 2.2s ease-in-out infinite;
}
@keyframes qtBrandPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(120,192,159,.12)}
  50%{box-shadow:0 0 0 7px rgba(120,192,159,0)}
}
.qt-brand-block strong{
  display:block;
  color:#eaf4f0;
  font-size:9px;
  font-weight:600;
}
.qt-brand-block small{
  display:block;
  margin-top:1px;
  color:#658176;
  font-size:6px;
}
.qt-top-status{
  display:flex;
  align-items:center;
  gap:9px;
  color:#879c93;
  font-size:7px;
}
.qt-signal{
  color:#6bb18f;
  letter-spacing:-2px;
}
.qt-outside-temp{color:#a9c8bb}

.qt-premium-body{
  display:grid;
  grid-template-columns:50px 1fr;
  flex:1;
  min-height:0;
}
.qt-side-nav{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  padding:10px 6px;
  border-right:1px solid rgba(255,255,255,.055);
  background:rgba(255,255,255,.012);
}
.qt-side-nav button{
  display:grid;
  place-items:center;
  width:38px;
  min-height:45px;
  padding:4px 0;
  border:0;
  border-radius:8px;
  background:transparent;
  color:#5e766c;
}
.qt-side-nav button b{
  font-size:13px;
  font-weight:500;
  line-height:1;
}
.qt-side-nav button span{
  margin-top:2px;
  font-size:5.5px;
}
.qt-side-nav button.active{
  color:#b5dac9;
  background:rgba(87,154,126,.11);
}
.qt-side-nav button.active b{
  color:#79c19f;
}

.qt-dashboard-content{
  display:grid;
  grid-template-columns:1.3fr .95fr;
  grid-template-rows:1.05fr .85fr;
  gap:8px;
  min-height:0;
  padding:9px;
}
.qt-map-panel,
.qt-media-panel,
.qt-vehicle-panel,
.qt-phone-panel{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.065);
  border-radius:10px;
  background:
    linear-gradient(145deg,rgba(255,255,255,.042),rgba(255,255,255,.018));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.018);
}
.qt-map-panel{grid-column:1;grid-row:1}
.qt-media-panel{grid-column:2;grid-row:1}
.qt-vehicle-panel{grid-column:1;grid-row:2}
.qt-phone-panel{grid-column:2;grid-row:2}

.qt-panel-heading{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:8px;
  padding:10px 11px 0;
}
.qt-panel-heading small{
  display:block;
  margin-bottom:2px;
  color:#607d71;
  font-size:5.5px;
  font-weight:750;
  letter-spacing:.8px;
}
.qt-panel-heading strong{
  display:block;
  color:#e6f0ec;
  font-size:9px;
  font-weight:550;
}
.qt-route-time,
.qt-source,
.qt-drive-mode{
  padding:4px 7px;
  border-radius:999px;
  background:rgba(91,160,131,.09);
  color:#8bc2aa;
  font-size:5.5px;
}

/* Navigation map */
.qt-map-canvas{
  position:absolute;
  left:0;right:0;bottom:0;top:38px;
  overflow:hidden;
}
.qt-map-canvas svg{
  width:100%;
  height:100%;
}
.qt-road{
  fill:none;
  stroke:rgba(255,255,255,.055);
  stroke-width:12;
  stroke-linecap:round;
}
.qt-road-b{stroke-width:8}
.qt-road-c{stroke-width:6}
.qt-route{
  fill:none;
  stroke:#61ad89;
  stroke-width:4;
  stroke-linecap:round;
  stroke-dasharray:330;
  stroke-dashoffset:330;
  animation:qtRouteDraw 5s ease-in-out infinite;
}
@keyframes qtRouteDraw{
  0%{stroke-dashoffset:330;opacity:.35}
  25%,80%{stroke-dashoffset:0;opacity:1}
  100%{stroke-dashoffset:-330;opacity:.25}
}
.qt-route-pulse{
  fill:#c67b5c;
  animation:qtRoutePulse 1.8s ease-in-out infinite;
}
@keyframes qtRoutePulse{
  0%,100%{r:5;opacity:.55}
  50%{r:10;opacity:.15}
}
.qt-car-marker{
  transform-origin:center;
  fill:#d7eee4;
  animation:qtCarMove 8s ease-in-out infinite;
}
@keyframes qtCarMove{
  0%{transform:translate(72px,246px) rotate(18deg)}
  30%{transform:translate(160px,210px) rotate(-16deg)}
  55%{transform:translate(255px,147px) rotate(-18deg)}
  80%{transform:translate(350px,112px) rotate(-12deg)}
  100%{transform:translate(431px,79px) rotate(-15deg)}
}
.qt-map-info{
  position:absolute;
  left:10px;
  bottom:8px;
  display:flex;
  gap:6px;
}
.qt-map-info span{
  display:grid;
  padding:5px 7px;
  border-radius:6px;
  background:rgba(10,21,18,.72);
  backdrop-filter:blur(5px);
}
.qt-map-info b{
  color:#e1ede8;
  font-size:7px;
  font-weight:600;
}
.qt-map-info small{
  color:#627d71;
  font-size:5px;
}

/* Media */
.qt-media-panel{
  padding-bottom:8px;
}
.qt-media-main{
  display:grid;
  grid-template-columns:70px 1fr;
  gap:10px;
  align-items:center;
  padding:10px 10px 0;
}
.qt-cover-art{
  position:relative;
  display:grid;
  place-items:center;
  width:70px;height:70px;
  overflow:hidden;
  border-radius:9px;
  background:
    radial-gradient(circle at 75% 20%,rgba(120,200,166,.25),transparent 35%),
    linear-gradient(145deg,#264b40,#172f29);
}
.qt-cover-art > span{
  position:relative;
  z-index:2;
  color:#b9dccd;
  font-size:21px;
  animation:qtMediaPulse 1.8s ease-in-out infinite;
}
@keyframes qtMediaPulse{50%{transform:scale(1.09)}}
.qt-cover-art i{
  position:absolute;
  bottom:8px;
  width:4px;
  border-radius:3px 3px 0 0;
  background:#71b495;
  transform-origin:bottom;
  animation:qtMediaEq 1.15s ease-in-out infinite;
}
.qt-cover-art i:nth-of-type(1){left:14px;height:18px}
.qt-cover-art i:nth-of-type(2){left:26px;height:29px;animation-delay:.15s}
.qt-cover-art i:nth-of-type(3){left:38px;height:21px;animation-delay:.3s}
.qt-cover-art i:nth-of-type(4){left:50px;height:34px;animation-delay:.45s}
@keyframes qtMediaEq{
  0%,100%{transform:scaleY(.4);opacity:.45}
  50%{transform:scaleY(1);opacity:1}
}
.qt-media-info > strong{
  display:block;
  color:#eaf3ef;
  font-size:10px;
  font-weight:550;
}
.qt-media-info > span{
  display:block;
  margin-top:3px;
  color:#6f897e;
  font-size:6px;
}
.qt-media-progress{
  display:grid;
  grid-template-columns:1fr auto auto;
  gap:5px;
  align-items:center;
  margin-top:9px;
}
.qt-media-progress i{
  position:relative;
  height:3px;
  overflow:hidden;
  border-radius:999px;
  background:#263c34;
}
.qt-media-progress i em{
  position:absolute;
  inset:0 auto 0 0;
  width:58%;
  border-radius:999px;
  background:#64ad8c;
  animation:qtMediaProgress 6s linear infinite alternate;
}
@keyframes qtMediaProgress{
  from{width:34%}
  to{width:82%}
}
.qt-media-progress small{
  color:#607a6f;
  font-size:5px;
}
.qt-player-controls{
  display:flex;
  justify-content:center;
  gap:6px;
  margin-top:8px;
}
.qt-player-controls button{
  display:grid;
  place-items:center;
  width:22px;height:22px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:50%;
  background:rgba(255,255,255,.025);
  color:#9db4aa;
  font-size:10px;
}
.qt-player-controls .qt-player-main{
  width:27px;height:27px;
  background:#5ca080;
  color:#10251d;
  font-size:8px;
  font-weight:800;
}

/* Vehicle status */
.qt-vehicle-content{
  display:grid;
  grid-template-columns:140px 1fr;
  align-items:center;
  gap:4px;
  height:calc(100% - 34px);
  padding:0 10px 8px;
}
.qt-speed-gauge{
  position:relative;
  width:136px;
  height:80px;
}
.qt-speed-gauge svg{
  position:absolute;
  inset:0;
  width:100%;height:100%;
}
.qt-gauge-track,
.qt-gauge-value{
  fill:none;
  stroke-width:8;
  stroke-linecap:round;
}
.qt-gauge-track{stroke:rgba(255,255,255,.055)}
.qt-gauge-value{
  stroke:#61aa89;
  stroke-dasharray:174;
  stroke-dashoffset:58;
  animation:qtGaugeSweep 3.2s ease-in-out infinite alternate;
}
@keyframes qtGaugeSweep{
  from{stroke-dashoffset:92}
  to{stroke-dashoffset:42}
}
.qt-speed-gauge > div{
  position:absolute;
  inset:30px 0 0;
  display:grid;
  place-items:center;
  align-content:center;
}
.qt-speed-gauge strong{
  color:#fff;
  font-size:20px;
  font-weight:550;
}
.qt-speed-gauge small{
  color:#647e72;
  font-size:5.5px;
}
.qt-vehicle-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:5px;
}
.qt-vehicle-stats span{
  display:grid;
  min-height:42px;
  align-content:center;
  padding:5px;
  border-radius:6px;
  background:rgba(255,255,255,.025);
}
.qt-vehicle-stats b{
  color:#dcebe5;
  font-size:8px;
  font-weight:550;
}
.qt-vehicle-stats small{
  margin-top:2px;
  color:#60796e;
  font-size:5px;
}

/* Phone and connectivity */
.qt-connected-dot{
  width:7px;height:7px;
  border-radius:50%;
  background:#64b28d;
  box-shadow:0 0 0 0 rgba(100,178,141,.3);
  animation:qtConnectedPulse 1.8s ease-out infinite;
}
@keyframes qtConnectedPulse{
  0%{box-shadow:0 0 0 0 rgba(100,178,141,.28)}
  80%{box-shadow:0 0 0 7px rgba(100,178,141,0)}
}
.qt-phone-content{
  display:grid;
  grid-template-columns:34px 1fr 27px;
  gap:8px;
  align-items:center;
  padding:13px 10px 6px;
}
.qt-phone-avatar{
  display:grid;
  place-items:center;
  width:34px;height:34px;
  border-radius:50%;
  background:linear-gradient(145deg,#315d4e,#1d4035);
  color:#b8d8ca;
  font-size:8px;
  font-weight:650;
}
.qt-phone-content strong{
  display:block;
  color:#e4eee9;
  font-size:8px;
  font-weight:550;
}
.qt-phone-content span{
  display:block;
  margin-top:2px;
  color:#637d71;
  font-size:5px;
}
.qt-phone-content button{
  display:grid;
  place-items:center;
  width:27px;height:27px;
  border:0;
  border-radius:50%;
  background:#5b9f80;
  color:#10221c;
}
.qt-connectivity-row{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  padding:0 10px;
}
.qt-connectivity-row span{
  padding:4px 6px;
  border-radius:999px;
  background:rgba(255,255,255,.028);
  color:#789087;
  font-size:5px;
}

/* Comfort / climate strip */
.qt-comfort-strip{
  display:grid;
  grid-template-columns:1fr .78fr .95fr 1.15fr;
  gap:1px;
  min-height:58px;
  border-top:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.012);
}
.qt-comfort-strip > div{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:7px 8px;
  border-right:1px solid rgba(255,255,255,.04);
}
.qt-comfort-strip small{
  color:#647e73;
  font-size:5.5px;
  letter-spacing:.4px;
}
.qt-climate-zone button{
  width:22px;height:22px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:6px;
  background:rgba(255,255,255,.025);
  color:#9ab0a6;
}
.qt-climate-zone strong{
  min-width:43px;
  text-align:center;
  color:#eef5f2;
  font-size:12px;
  font-weight:550;
}
.qt-fan-symbol{
  color:#8eb9a7;
  font-size:17px;
  animation:qtFanSpinV33 3s linear infinite;
}
@keyframes qtFanSpinV33{to{transform:rotate(360deg)}}
.qt-fan-level{
  display:flex;
  align-items:flex-end;
  gap:2px;
  height:19px;
}
.qt-fan-level i{
  width:3px;
  border-radius:2px;
  background:#62a987;
  transform-origin:bottom;
  animation:qtFanBarsV33 1.3s ease-in-out infinite;
}
.qt-fan-level i:nth-child(1){height:5px}
.qt-fan-level i:nth-child(2){height:8px;animation-delay:.1s}
.qt-fan-level i:nth-child(3){height:11px;animation-delay:.2s}
.qt-fan-level i:nth-child(4){height:14px;animation-delay:.3s}
.qt-fan-level i:nth-child(5){height:18px;animation-delay:.4s}
@keyframes qtFanBarsV33{
  0%,100%{opacity:.35;transform:scaleY(.75)}
  50%{opacity:1;transform:scaleY(1)}
}
.qt-seat-zone{
  position:relative;
}
.qt-seat-icon{
  position:relative;
  width:27px;height:31px;
}
.qt-seat-icon span{
  position:absolute;
  left:6px;top:2px;
  width:12px;height:17px;
  border:1.5px solid #607c70;
  border-radius:8px 8px 4px 4px;
}
.qt-seat-icon i{
  position:absolute;
  left:9px;
  width:7px;height:2px;
  border-radius:999px;
  background:#ce805f;
  opacity:.25;
  animation:qtSeatHeatV33 1.6s ease-in-out infinite;
}
.qt-seat-icon i:nth-of-type(1){top:8px}
.qt-seat-icon i:nth-of-type(2){top:13px;animation-delay:.2s}
.qt-seat-icon i:nth-of-type(3){top:18px;animation-delay:.4s}
@keyframes qtSeatHeatV33{
  0%,100%{opacity:.2;transform:scaleX(.6)}
  50%{opacity:1;transform:scaleX(1)}
}
.qt-seat-status{
  color:#cda38e;
  font-size:6px;
  font-weight:600;
}
.qt-quick-zone{
  gap:4px !important;
}
.qt-quick-zone button{
  flex:1;
  min-height:25px;
  border:1px solid rgba(255,255,255,.055);
  border-radius:6px;
  background:rgba(255,255,255,.022);
  color:#698278;
  font-size:5.5px;
}
.qt-quick-zone button.active{
  color:#b8ddcd;
  background:rgba(89,157,127,.10);
}

@media(max-width:720px){
  .qt-premium-body{grid-template-columns:42px 1fr}
  .qt-dashboard-content{
    grid-template-columns:1fr;
    grid-template-rows:auto;
    overflow:auto;
  }
  .qt-map-panel,
  .qt-media-panel,
  .qt-vehicle-panel,
  .qt-phone-panel{
    grid-column:auto;
    grid-row:auto;
    min-height:180px;
  }
  .qt-comfort-strip{
    grid-template-columns:1fr 1fr;
  }
}
@media(prefers-reduced-motion:reduce){
  .qt-car-mark,
  .qt-route,
  .qt-route-pulse,
  .qt-car-marker,
  .qt-cover-art > span,
  .qt-cover-art i,
  .qt-media-progress i em,
  .qt-gauge-value,
  .qt-connected-dot,
  .qt-fan-symbol,
  .qt-fan-level i,
  .qt-seat-icon i{
    animation:none !important;
  }
}



/* =========================================================
   v3.4 — Expert Qt & QML slide made more realistic/informative
   ========================================================= */
.expert-lead-slide .slide-copy > p:not(.eyebrow){
  max-width:720px !important;
  color:#526b61 !important;
}

.expert-proof-row{
  margin:18px 0 14px !important;
}
.expert-proof-row span{
  min-height:30px !important;
  padding:7px 11px !important;
  color:#406258 !important;
  background:rgba(31,87,67,.06) !important;
  border-color:rgba(30,78,62,.14) !important;
  font-size:8px !important;
  font-weight:700 !important;
}
.expert-proof-row b{
  color:#c77657 !important;
  font-size:10px !important;
}

.expert-badge-strip{
  max-width:760px;
  margin:0 0 14px;
  padding:12px 14px;
  border:1px solid rgba(28,68,54,.12);
  border-radius:14px;
  background:linear-gradient(145deg, rgba(255,255,255,.82), rgba(245,249,247,.92));
  box-shadow:0 10px 22px rgba(15,40,32,.05);
}
.expert-badge-strip img{
  display:block;
  width:100%;
  max-width:100%;
  border-radius:8px;
  margin:0 0 10px;
}
.expert-badge-strip p{
  margin:0;
  color:#4c655d;
  font-size:12px;
  line-height:1.65;
}
.expert-badge-strip strong,
.expert-badge-strip b{
  color:#224d3f;
  font-weight:700;
}
.expert-info-note{
  max-width:730px;
  margin:0 0 4px;
  color:#60776f !important;
  font-size:13px !important;
  line-height:1.65 !important;
}

.screen-expert-training{
  background:
    radial-gradient(circle at 88% 0%,rgba(72,142,113,.24),transparent 31%),
    linear-gradient(145deg,#183f33,#112d25 72%,#0d221c) !important;
}
.expert-lab{
  padding:18px 20px 15px !important;
}
.expert-lab-head{
  margin-bottom:12px !important;
}
.expert-lab-head small{
  color:#83b39f !important;
  font-size:7px !important;
  font-weight:800 !important;
  letter-spacing:1.35px !important;
}
.expert-lab-head strong{
  color:#f5f8f7 !important;
  font-size:12px !important;
  font-weight:550 !important;
  line-height:1.45 !important;
}
.champion-badge{
  box-shadow:0 10px 24px rgba(0,0,0,.10);
}
.expert-lab-grid section{
  border-color:rgba(255,255,255,.09) !important;
}
.expert-section-label{
  color:#7aa290 !important;
  font-size:6.6px !important;
  letter-spacing:1px !important;
}

.expert-hands-on p{
  color:#96ada4 !important;
  font-size:7.4px !important;
  line-height:1.52 !important;
}
.project-node{
  font-size:6.6px !important;
  padding:6px 4px !important;
}
.advanced-chip-row span{
  font-size:6.4px !important;
}
.expert-ai > small{
  color:#7b9b8e !important;
  font-size:6.3px !important;
  letter-spacing:.45px !important;
}

.expert-outcome-row{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:10px 0 10px;
}
.expert-outcome-row span{
  padding:5px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  color:#9db7ad;
  font-size:6.2px;
  letter-spacing:.4px;
  text-transform:uppercase;
}

.expert-lab-footer{
  padding-top:2px !important;
}
.expert-lab-footer span{
  color:#7d9b8d !important;
  font-size:6.3px !important;
}

@media(max-width:720px){
  .expert-badge-strip{
    padding:10px 10px 12px;
  }
  .expert-badge-strip p,
  .expert-info-note{
    font-size:12px !important;
  }
}



/* v3.5 — remove credential explanation paragraph */
.expert-badge-strip{
  padding:10px 12px !important;
  margin-bottom:12px !important;
}
.expert-badge-strip img{
  margin-bottom:0 !important;
}



/* SEO/business relevance section */
.seo-business-intro{
  background:#f6f8f7;
  color:#15382e;
  padding-top:72px;
  padding-bottom:72px;
}
.seo-business-intro .section-heading h2{
  color:#15382e;
}
.seo-business-intro .section-heading > p{
  color:#5f746d;
  line-height:1.7;
}
.seo-business-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  margin-top:28px;
}
.seo-business-grid article{
  min-height:180px;
  padding:24px;
  border:1px solid #dce6e2;
  border-radius:18px;
  background:#fff;
}
.seo-business-grid article > span{
  display:inline-flex;
  margin-bottom:24px;
  color:#c77253;
  font-size:10px;
  font-weight:700;
  letter-spacing:.6px;
}
.seo-business-grid h3{
  margin:0 0 10px;
  color:#173d31;
  font-size:18px;
  font-weight:550;
}
.seo-business-grid p{
  margin:0;
  color:#657a72;
  font-size:13px;
  line-height:1.65;
}
@media(max-width:850px){
  .seo-business-grid{grid-template-columns:1fr}
}


/* =========================================================
   v4.1 — compact Expert slide + equal 5-slide sizing
   ========================================================= */

/* All five desktop slides use the same stage/slide height. */
.training-slider .slides-stage{
  min-height:640px !important;
  height:640px !important;
}
.training-slider .hero-slide{
  min-height:640px !important;
  height:640px !important;
}
.training-slider .hero-slide.is-active{
  min-height:640px !important;
  height:640px !important;
}

/* Keep both columns vertically balanced inside the common height. */
.training-slider .slide-copy,
.training-slider .slide-visual{
  align-self:center;
}
.training-slider .product-screen{
  max-height:520px;
}

/* Reduce only the first Expert Qt & QML slide content. */
.expert-lead-slide .slide-copy > p:not(.eyebrow){
  max-width:650px !important;
  margin:20px 0 14px !important;
  font-size:15px !important;
  line-height:1.62 !important;
}
.expert-lead-slide .expert-proof-row{
  margin:12px 0 !important;
  gap:6px !important;
}
.expert-lead-slide .expert-proof-row span{
  min-height:27px !important;
  padding:5px 9px !important;
  font-size:7.5px !important;
}
.expert-lead-slide .expert-badge-strip{
  max-width:620px !important;
  padding:7px 10px !important;
  margin:0 0 10px !important;
}
.expert-lead-slide .expert-badge-strip img{
  display:block !important;
  width:100% !important;
  max-height:70px !important;
  object-fit:contain !important;
  margin:0 !important;
}
.expert-lead-slide .hero-actions{
  margin-top:12px !important;
}

/* Keep expert visual within the common stage height. */
.expert-lead-slide .screen-expert-training{
  height:500px !important;
}
.expert-lead-slide .expert-lab{
  height:calc(100% - 48px) !important;
  box-sizing:border-box;
}

@media(max-width:1000px){
  .training-slider .slides-stage{
    min-height:1060px !important;
    height:1060px !important;
  }
  .training-slider .hero-slide,
  .training-slider .hero-slide.is-active{
    min-height:1060px !important;
    height:1060px !important;
  }
}
@media(max-width:650px){
  .training-slider .slides-stage{
    min-height:920px !important;
    height:920px !important;
  }
  .training-slider .hero-slide,
  .training-slider .hero-slide.is-active{
    min-height:920px !important;
    height:920px !important;
  }
  .expert-lead-slide .expert-badge-strip img{
    max-height:54px !important;
  }
}


/* =========================================================
   v4.2 — Corrected Training navigation + richer Qt HMI demo
   ========================================================= */

/* More realistic 7-option automotive HMI menu */
.qt-side-nav{
  gap:2px !important;
  padding:7px 5px !important;
  overflow:hidden;
}
.qt-side-nav button{
  width:40px !important;
  min-height:37px !important;
  border:1px solid transparent !important;
  transition:background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease !important;
}
.qt-side-nav button b{
  font-size:11px !important;
}
.qt-side-nav button span{
  font-size:4.9px !important;
}
.qt-side-nav button.active{
  border-color:rgba(120,193,159,.15) !important;
  background:linear-gradient(145deg,rgba(90,164,132,.16),rgba(90,164,132,.07)) !important;
  color:#d0e8de !important;
  transform:translateX(2px);
}
.qt-side-nav button.active b{
  color:#83d0ab !important;
  animation:qtHmiMenuIcon 1.4s ease-in-out infinite;
}
@keyframes qtHmiMenuIcon{
  0%,100%{transform:scale(1);opacity:.75}
  50%{transform:scale(1.12);opacity:1}
}

/* Small live demo banner */
.qt-hmi-demo-ribbon{
  position:absolute;
  z-index:8;
  top:48px;
  right:15px;
  display:flex;
  align-items:center;
  gap:9px;
  pointer-events:none;
}
.qt-hmi-demo-ribbon span{
  display:flex;
  align-items:center;
  gap:5px;
  padding:4px 7px;
  border-radius:999px;
  background:rgba(12,28,23,.72);
  border:1px solid rgba(124,197,164,.12);
  color:#83bda4;
  font-size:5px;
  letter-spacing:.45px;
  text-transform:uppercase;
}
.qt-hmi-demo-ribbon span i{
  width:5px;height:5px;
  border-radius:50%;
  background:#69bd95;
  animation:qtHmiDemoLive 1.3s ease-out infinite;
}
@keyframes qtHmiDemoLive{
  0%{box-shadow:0 0 0 0 rgba(105,189,149,.35)}
  75%{box-shadow:0 0 0 6px rgba(105,189,149,0)}
}
.qt-hmi-demo-ribbon b{
  color:#718d80;
  font-size:5.5px;
  font-weight:600;
}

/* HMI target highlighting when the menu cycles */
[data-hmi-panel]{
  transition:filter .28s ease, border-color .28s ease, box-shadow .28s ease, transform .28s ease !important;
}
[data-hmi-panel].hmi-focus{
  filter:brightness(1.10);
  border-color:rgba(113,190,156,.32) !important;
  box-shadow:
    inset 0 0 0 1px rgba(113,190,156,.06),
    0 0 24px rgba(62,135,104,.10) !important;
  transform:translateY(-1px);
}

/* Extra infotainment controls */
.qt-infotainment-quick{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:4px;
  padding:7px 10px 8px;
}
.qt-infotainment-quick span{
  display:grid;
  place-items:center;
  min-height:36px;
  padding:4px;
  border:1px solid rgba(255,255,255,.045);
  border-radius:6px;
  background:rgba(255,255,255,.018);
  color:#738b80;
  transition:background .2s ease, color .2s ease;
}
.qt-infotainment-quick span:nth-child(1){
  animation:qtQuickControl 4s ease-in-out infinite;
}
.qt-infotainment-quick span:nth-child(2){
  animation:qtQuickControl 4s ease-in-out .8s infinite;
}
.qt-infotainment-quick span:nth-child(3){
  animation:qtQuickControl 4s ease-in-out 1.6s infinite;
}
.qt-infotainment-quick span:nth-child(4){
  animation:qtQuickControl 4s ease-in-out 2.4s infinite;
}
@keyframes qtQuickControl{
  0%,78%,100%{background:rgba(255,255,255,.018);color:#738b80}
  86%{background:rgba(92,160,130,.10);color:#b8dacb}
}
.qt-infotainment-quick b{
  font-size:8px;
  font-weight:550;
}
.qt-infotainment-quick small{
  margin-top:2px;
  font-size:4.7px;
}

/* Highlight climate/comfort strip cleanly */
.qt-climate-zone.hmi-focus,
.qt-seat-zone.hmi-focus{
  background:rgba(89,157,127,.08);
  border-color:rgba(113,190,156,.20) !important;
}

/* Correct anchor targets don't hide under sticky header */
.tc-category-panel,
.tc-course-card,
#programs{
  scroll-margin-top:96px;
}


/* =========================================================
   v4.3 — Qt & Qt Quick medical ventilator HMI slider
   ========================================================= */
.qt-medical-hmi{
  position:relative;
  display:flex !important;
  flex-direction:column;
  height:calc(100% - 48px);
  overflow:hidden;
  color:#eaf7f1;
  background:
    radial-gradient(circle at 84% 6%, rgba(42,124,97,.18), transparent 28%),
    linear-gradient(145deg,#0d1815,#132320 60%,#0d1916) !important;
}
.qt-med-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:42px;
  padding:0 14px;
  border-bottom:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.015);
}
.qt-med-brand{
  display:flex;
  align-items:center;
  gap:8px;
}
.qt-med-cross{
  display:grid;
  place-items:center;
  width:24px;
  height:24px;
  border-radius:7px;
  background:rgba(104,196,155,.12);
  color:#8de0b9;
  font-size:12px;
  animation:qtMedPulse 2.1s ease-in-out infinite;
}
@keyframes qtMedPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(126,222,181,.12)}
  50%{box-shadow:0 0 0 8px rgba(126,222,181,0)}
}
.qt-med-brand strong{
  display:block;
  color:#eef7f4;
  font-size:9px;
  font-weight:600;
}
.qt-med-brand small{
  display:block;
  color:#6f8b80;
  font-size:5.8px;
}
.qt-med-status{
  display:flex;
  align-items:center;
  gap:8px;
  color:#83998f;
  font-size:6px;
}
.qt-med-alarm{
  display:inline-flex;
  align-items:center;
  gap:4px;
  color:#9bdfbd;
}
.qt-med-alarm i{
  width:5px;
  height:5px;
  border-radius:50%;
  background:#72d39f;
  animation:qtMedLive 1.3s ease-out infinite;
}
@keyframes qtMedLive{
  0%{box-shadow:0 0 0 0 rgba(114,211,159,.3)}
  80%{box-shadow:0 0 0 6px rgba(114,211,159,0)}
}
.qt-medical-body{
  position:relative;
  display:grid;
  grid-template-columns:48px 1fr;
  flex:1;
  min-height:0;
}
.qt-med-nav{
  display:flex;
  flex-direction:column;
  gap:2px;
  align-items:center;
  padding:7px 5px;
  border-right:1px solid rgba(255,255,255,.055);
  background:rgba(255,255,255,.012);
}
.qt-med-nav button{
  display:grid;
  place-items:center;
  width:38px;
  min-height:36px;
  padding:4px 0;
  border:1px solid transparent;
  border-radius:8px;
  background:transparent;
  color:#607a70;
  transition:all .2s ease;
}
.qt-med-nav button b{
  font-size:10px;
  line-height:1;
  font-weight:600;
}
.qt-med-nav button span{
  margin-top:2px;
  font-size:4.7px;
}
.qt-med-nav button.active{
  color:#d1ece0;
  border-color:rgba(115,199,159,.18);
  background:linear-gradient(145deg,rgba(95,168,134,.16),rgba(95,168,134,.05));
  transform:translateX(2px);
}
.qt-med-nav button.active b{
  color:#8de0b9;
  animation:qtMedNavPulse 1.4s ease-in-out infinite;
}
@keyframes qtMedNavPulse{
  0%,100%{transform:scale(1);opacity:.8}
  50%{transform:scale(1.12);opacity:1}
}

.qt-medical-grid{
  display:grid;
  grid-template-columns:1.35fr .9fr .9fr;
  grid-template-rows:1.15fr .9fr .68fr;
  gap:8px;
  min-height:0;
  padding:10px;
}
.qt-ecg-panel,
.qt-pulse-panel,
.qt-bp-panel,
.qt-resp-panel,
.qt-asp-panel,
.qt-settings-panel{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.07);
  border-radius:10px;
  background:linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.018));
  transition:border-color .25s ease, box-shadow .25s ease, filter .25s ease, transform .25s ease;
}
[data-hmi-panel].hmi-focus{
  filter:brightness(1.08);
  border-color:rgba(120,210,169,.32);
  box-shadow:0 0 0 1px rgba(120,210,169,.05), 0 0 20px rgba(79,147,116,.08);
  transform:translateY(-1px);
}

.qt-ecg-panel{grid-column:1 / 3; grid-row:1}
.qt-pulse-panel{grid-column:3; grid-row:1}
.qt-bp-panel{grid-column:1; grid-row:2}
.qt-resp-panel{grid-column:2; grid-row:2}
.qt-asp-panel{grid-column:3; grid-row:2}
.qt-settings-panel{grid-column:1 / 4; grid-row:3}

.qt-panel-heading{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:6px;
  padding:10px 10px 0;
}
.qt-panel-heading small{
  display:block;
  color:#6e8d80;
  font-size:5.5px;
  font-weight:750;
  letter-spacing:.8px;
}
.qt-panel-heading strong{
  display:block;
  color:#eaf4f0;
  font-size:9px;
  font-weight:560;
}
.qt-ecg-stats{
  display:flex;
  align-items:center;
  gap:4px;
}
.qt-ecg-stats span,
.qt-spo2-value,
.qt-map-value,
.qt-rr-value,
.qt-asp-status,
.qt-mode-badge{
  padding:4px 6px;
  border-radius:999px;
  background:rgba(91,160,131,.09);
  color:#8fd9b5;
  font-size:6px;
  font-weight:650;
}
.qt-ecg-stats small{
  align-self:center;
  color:#688178;
  font-size:5px;
}
.qt-heart-pump{
  font-style:normal;
  color:#ff6d6d;
  font-size:11px;
  animation:qtHeartBeat 1.1s ease-in-out infinite;
}
@keyframes qtHeartBeat{
  0%,100%{transform:scale(1)}
  18%{transform:scale(1.2)}
  32%{transform:scale(.95)}
  48%{transform:scale(1.18)}
  70%{transform:scale(1)}
}

.qt-ecg-wave,
.qt-pulse-wave,
.qt-resp-wave{
  padding:8px 10px 6px;
}
.qt-ecg-wave{height:120px}
.qt-pulse-wave{height:68px}
.qt-resp-wave{height:68px}
.qt-ecg-wave svg,
.qt-pulse-wave svg,
.qt-resp-wave svg{
  width:100%;
  height:100%;
}
.qt-wave-grid,
.qt-mini-grid{
  fill:none;
  stroke:rgba(255,255,255,.045);
  stroke-width:1;
}
.qt-wave-trace,
.qt-pulse-trace,
.qt-resp-trace{
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-width:3;
}
.qt-wave-trace{
  stroke:#73e4aa;
  stroke-dasharray:900;
  stroke-dashoffset:900;
  animation:qtTraceRun 4.8s linear infinite;
}
.qt-pulse-trace{
  stroke:#7fd4ff;
  stroke-dasharray:520;
  stroke-dashoffset:520;
  animation:qtTraceRun 4.2s linear infinite;
}
.qt-resp-trace{
  stroke:#f5c46b;
  stroke-dasharray:520;
  stroke-dashoffset:520;
  animation:qtRespRun 5.5s linear infinite;
}
@keyframes qtTraceRun{
  0%{stroke-dashoffset:900;opacity:.35}
  20%,80%{stroke-dashoffset:0;opacity:1}
  100%{stroke-dashoffset:-900;opacity:.25}
}
@keyframes qtRespRun{
  0%{stroke-dashoffset:520;opacity:.35}
  15%,85%{stroke-dashoffset:0;opacity:1}
  100%{stroke-dashoffset:-520;opacity:.25}
}
.qt-trace-dot{
  fill:#fff;
  stroke:#73e4aa;
  stroke-width:3;
  animation:qtTraceDot 1.8s ease-in-out infinite;
}
@keyframes qtTraceDot{
  0%,100%{r:3.5;opacity:.55}
  50%{r:6;opacity:1}
}

.qt-pulse-meta,
.qt-resp-meta,
.qt-bp-grid,
.qt-settings-row{
  display:grid;
  gap:6px;
  padding:0 10px 10px;
}
.qt-pulse-meta,
.qt-resp-meta{grid-template-columns:repeat(2,1fr)}
.qt-resp-meta{grid-template-columns:repeat(3,1fr)}
.qt-bp-grid{grid-template-columns:repeat(3,1fr); padding-top:12px}
.qt-pulse-meta span,
.qt-resp-meta span,
.qt-bp-grid span{
  display:grid;
  align-content:center;
  min-height:46px;
  padding:7px;
  border-radius:7px;
  background:rgba(255,255,255,.03);
}
.qt-pulse-meta b,
.qt-resp-meta b,
.qt-bp-grid b{
  color:#e3f0ea;
  font-size:9px;
  font-weight:580;
}
.qt-pulse-meta small,
.qt-resp-meta small,
.qt-bp-grid small{
  margin-top:2px;
  color:#687f76;
  font-size:5.3px;
}
.qt-bp-grid b{font-size:14px}
.qt-bp-grid span:nth-child(1) b{color:#8de0b9}
.qt-bp-grid span:nth-child(2) b{color:#ffd091}

.qt-asp-body{
  display:grid;
  grid-template-columns:92px 1fr;
  gap:7px;
  align-items:center;
  padding:8px 10px 10px;
}
.qt-asp-gauge{
  position:relative;
  display:grid;
  place-items:center;
  width:86px;
  height:86px;
  margin:auto;
  border-radius:50%;
}
.qt-asp-track,
.qt-asp-fill{
  position:absolute;
  inset:0;
  border-radius:50%;
}
.qt-asp-track{
  border:7px solid rgba(255,255,255,.06);
}
.qt-asp-fill{
  border:7px solid transparent;
  border-top-color:#ffa868;
  border-right-color:#ffa868;
  transform:rotate(15deg);
  animation:qtAspGauge 2.8s ease-in-out infinite alternate;
}
@keyframes qtAspGauge{
  from{transform:rotate(-40deg)}
  to{transform:rotate(60deg)}
}
.qt-asp-gauge b{
  color:#fff;
  font-size:12px;
  font-weight:620;
}
.qt-asp-gauge small{
  position:absolute;
  bottom:20px;
  color:#73877f;
  font-size:5px;
}
.qt-asp-points{
  display:grid;
  gap:5px;
}
.qt-asp-points span{
  display:grid;
  min-height:28px;
  align-content:center;
  padding:5px 7px;
  border-radius:6px;
  background:rgba(255,255,255,.028);
}
.qt-asp-points b{
  color:#eaf1ed;
  font-size:7px;
  font-weight:560;
}
.qt-asp-points small{
  color:#6a8378;
  font-size:5px;
}

.qt-settings-row{
  grid-template-columns:repeat(4,1fr);
  padding-top:12px;
}
.qt-settings-row span{
  display:grid;
  place-items:center;
  min-height:34px;
  border:1px solid rgba(255,255,255,.05);
  border-radius:7px;
  background:rgba(255,255,255,.03);
  color:#90a89d;
  font-size:6px;
  animation:qtSettingGlow 6s ease-in-out infinite;
}
.qt-settings-row span:nth-child(2){animation-delay:1s}
.qt-settings-row span:nth-child(3){animation-delay:2s}
.qt-settings-row span:nth-child(4){animation-delay:3s}
@keyframes qtSettingGlow{
  0%,78%,100%{background:rgba(255,255,255,.03);color:#90a89d}
  88%{background:rgba(94,164,132,.11);color:#d6ede2}
}

.qt-med-footer{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  min-height:42px;
  border-top:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.012);
}
.qt-med-footer span{
  display:grid;
  place-items:center;
  padding:6px 4px;
}
.qt-med-footer b{
  color:#eef5f2;
  font-size:8px;
  font-weight:560;
}
.qt-med-footer small{
  color:#72897f;
  font-size:5px;
}

@media(max-width:900px){
  .qt-medical-grid{
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto;
  }
  .qt-ecg-panel{grid-column:1 / 3}
  .qt-pulse-panel,.qt-bp-panel,.qt-resp-panel,.qt-asp-panel,.qt-settings-panel{grid-column:auto;grid-row:auto}
}
@media(max-width:720px){
  .qt-medical-body{
    grid-template-columns:42px 1fr;
  }
  .qt-medical-grid{
    grid-template-columns:1fr;
    overflow:auto;
  }
  .qt-ecg-panel,
  .qt-pulse-panel,
  .qt-bp-panel,
  .qt-resp-panel,
  .qt-asp-panel,
  .qt-settings-panel{
    grid-column:auto !important;
    grid-row:auto !important;
    min-height:160px;
  }
  .qt-settings-row{grid-template-columns:1fr 1fr}
  .qt-med-footer{grid-template-columns:1fr 1fr}
}
@media(prefers-reduced-motion:reduce){
  .qt-med-cross,
  .qt-med-alarm i,
  .qt-med-nav button.active b,
  .qt-heart-pump,
  .qt-wave-trace,
  .qt-pulse-trace,
  .qt-resp-trace,
  .qt-trace-dot,
  .qt-asp-fill,
  .qt-settings-row span{
    animation:none !important;
  }
}


/* =========================================================
   v4.4 — Qt automotive HMI emphasis
   ========================================================= */
.qt-premium-hmi .qt-map-panel,
.qt-premium-hmi .qt-media-panel,
.qt-premium-hmi .qt-vehicle-panel,
.qt-premium-hmi .qt-phone-panel{
  backdrop-filter:blur(2px);
}
.qt-premium-hmi .qt-infotainment-quick span{
  transition:transform .2s ease, background .2s ease, color .2s ease;
}
.qt-premium-hmi .qt-infotainment-quick span:hover{
  transform:translateY(-1px);
  background:rgba(92,160,130,.10);
  color:#c0ded1;
}


/* =========================================================
   v4.5 — QML & Qt Quick 3D medical HMI / ventilator slide
   ========================================================= */
.qml-medical-demo{
  display:flex;
  flex-direction:column;
  height:calc(100% - 48px);
  color:#edf4ff;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.05), transparent 32%),
    linear-gradient(145deg,#151f39,#10224e 55%,#0d1b44);
  border-radius:0 0 12px 12px;
  overflow:hidden;
}
.qml-med-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:38px;
  padding:0 16px;
  color:#f1f5ff;
  font-size:7px;
  font-weight:600;
}
.qml-med-time{
  letter-spacing:.3px;
}
.qml-med-head-right{
  display:flex;
  align-items:center;
  gap:10px;
  color:#dce8ff;
}
.qml-head-heart{
  color:#f2f5ff;
  font-size:10px;
  animation:qmlHeadBeat 1.1s ease-in-out infinite;
}
@keyframes qmlHeadBeat{
  0%,100%{transform:scale(1)}
  18%{transform:scale(1.18)}
  35%{transform:scale(.92)}
  50%{transform:scale(1.16)}
}
.qml-head-battery{
  position:relative;
  width:18px;
  height:9px;
  border:1px solid #cde2ff;
  border-radius:2px;
}
.qml-head-battery::before{
  content:"";
  position:absolute;
  right:-3px;
  top:2px;
  width:2px;
  height:3px;
  border-radius:0 2px 2px 0;
  background:#cde2ff;
}
.qml-head-battery::after{
  content:"";
  position:absolute;
  inset:1px 4px 1px 1px;
  border-radius:1px;
  background:#23d68f;
}
.qml-head-mode{
  padding:2px 5px;
  border-radius:4px;
  background:rgba(255,255,255,.08);
  font-size:6px;
}
.qml-med-grid{
  display:grid;
  grid-template-columns:152px 1fr 176px;
  gap:10px;
  flex:1;
  min-height:0;
  padding:8px 10px 10px;
}
.qml-left-metrics{
  display:grid;
  grid-template-rows:repeat(4,1fr);
  gap:8px;
}
.qml-metric-card,
.qml-control-card,
.qml-wave-card,
.qml-lungs-card,
.qml-patient-vitals,
.qml-menu-grid{
  border-radius:10px;
}
.qml-metric-card{
  display:grid;
  align-content:space-between;
  padding:14px 14px 10px;
  background:rgba(34,48,86,.95);
  box-shadow:0 6px 20px rgba(0,0,0,.14);
  border:1px solid rgba(255,255,255,.025);
  transition:.25s ease;
}
.qml-metric-card small{
  color:#f2f6ff;
  font-size:7px;
  font-weight:650;
}
.qml-metric-card strong{
  color:#f7fbff;
  font-size:28px;
  line-height:1;
  font-weight:520;
  text-align:right;
}
.qml-metric-card i{
  display:block;
  color:#8ea2cb;
  font-size:6px;
  font-style:normal;
  text-align:right;
}
.qml-metric-card em{
  color:#8ea2cb;
  font-style:normal;
  font-size:6px;
  line-height:1.5;
}

.qml-main-monitor{
  display:grid;
  grid-template-rows:150px 148px 1fr;
  gap:8px;
  min-height:0;
}
.qml-wave-card{
  padding:10px 12px 8px;
  background:rgba(31,47,90,.9);
  box-shadow:0 6px 20px rgba(0,0,0,.12);
  border:1px solid rgba(255,255,255,.03);
  transition:.25s ease;
}
.qml-wave-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:4px;
}
.qml-wave-head strong{
  color:#f3f7ff;
  font-size:8px;
  font-weight:650;
}
.qml-wave-head span{
  color:#8fa8d8;
  font-size:6px;
}
.qml-wave-card svg{
  width:100%;
  height:100%;
}
.qml-wave-grid{
  fill:none;
  stroke:rgba(255,255,255,.06);
  stroke-width:1;
}
.qml-paw-trace,
.qml-flow-trace,
.qml-mini-blue,
.qml-mini-green{
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.qml-paw-trace{
  stroke:#11d9a2;
  stroke-width:3;
  stroke-dasharray:850;
  stroke-dashoffset:850;
  animation:qmlPawMove 5.4s linear infinite;
  filter:drop-shadow(0 0 4px rgba(17,217,162,.28));
}
.qml-flow-trace{
  stroke:#eb68d8;
  stroke-width:3;
  stroke-dasharray:850;
  stroke-dashoffset:850;
  animation:qmlFlowMove 4.9s linear infinite;
  filter:drop-shadow(0 0 4px rgba(235,104,216,.28));
}
@keyframes qmlPawMove{
  0%{stroke-dashoffset:850;opacity:.45}
  16%,84%{stroke-dashoffset:0;opacity:1}
  100%{stroke-dashoffset:-850;opacity:.2}
}
@keyframes qmlFlowMove{
  0%{stroke-dashoffset:850;opacity:.45}
  16%,84%{stroke-dashoffset:0;opacity:1}
  100%{stroke-dashoffset:-850;opacity:.2}
}

.qml-lower-monitor{
  display:grid;
  grid-template-columns:.95fr 1.05fr;
  gap:8px;
  min-height:0;
}
.qml-patient-vitals{
  display:grid;
  grid-template-rows:auto auto 1fr;
  gap:8px;
  padding:10px 12px;
  background:transparent;
}
.qml-mini-graph{
  display:grid;
  grid-template-columns:110px 1fr;
  column-gap:8px;
  align-items:center;
}
.qml-mini-graph svg{
  width:100%;
  height:28px;
}
.qml-mini-blue{
  stroke:#2d9dff;
  stroke-width:2.5;
  stroke-dasharray:190;
  stroke-dashoffset:190;
  animation:qmlMiniWave 3.6s linear infinite;
}
.qml-mini-green{
  stroke:#1ad38b;
  stroke-width:2.5;
  stroke-dasharray:190;
  stroke-dashoffset:190;
  animation:qmlMiniWave 3.3s linear infinite;
}
@keyframes qmlMiniWave{
  0%{stroke-dashoffset:190;opacity:.55}
  50%{opacity:1}
  100%{stroke-dashoffset:-190;opacity:.3}
}
.qml-mini-graph strong{
  color:#f7fbff;
  font-size:25px;
  font-weight:520;
  line-height:1;
}
.qml-mini-graph small{
  color:#92a8d0;
  font-size:6px;
}
.qml-patient-info{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px 16px;
  padding-top:6px;
}
.qml-patient-info span{
  display:grid;
  gap:1px;
}
.qml-patient-info b{
  color:#f2f6ff;
  font-size:8px;
  font-weight:540;
}
.qml-patient-info small{
  color:#90a2c8;
  font-size:6px;
}

.qml-lungs-card{
  position:relative;
  overflow:hidden;
  display:grid;
  place-items:center;
  background:transparent;
  min-height:0;
}
.qml-heart-cluster{
  position:absolute;
  left:14px;
  top:8px;
  z-index:2;
}
.qml-heart-shell{
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  border-radius:50%;
  background:rgba(255,255,255,.035);
  box-shadow:0 0 0 1px rgba(255,255,255,.03) inset;
}
.qml-heart-core{
  color:#ff7474;
  font-size:26px;
  line-height:1;
  animation:qmlHeartPump 1.06s ease-in-out infinite;
  filter:drop-shadow(0 0 8px rgba(255,116,116,.35));
}
@keyframes qmlHeartPump{
  0%,100%{transform:scale(1)}
  18%{transform:scale(1.18)}
  32%{transform:scale(.93)}
  48%{transform:scale(1.22)}
  64%{transform:scale(1)}
}

.qml-lung-stage{
  position:relative;
  width:100%;
  height:100%;
  min-height:210px;
}
.qml-lung-stage svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.qml-trachea{
  fill:none;
  stroke:#d9e5ff;
  stroke-width:16;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:.82;
}
.qml-bronchi{
  fill:none;
  stroke:#d9e5ff;
  stroke-width:10;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:.75;
}
.qml-lung{
  stroke:rgba(255,255,255,.08);
  stroke-width:2;
  filter:drop-shadow(0 8px 18px rgba(142,170,240,.18));
  transform-box:fill-box;
  transform-origin:center;
  animation:qmlLungBreath 3.2s ease-in-out infinite;
}
.qml-lung-left{fill:url(#qmlLungFillL)}
.qml-lung-right{
  fill:url(#qmlLungFillR);
  animation-delay:.12s;
}
@keyframes qmlLungBreath{
  0%,100%{transform:scale(1)}
  38%{transform:scale(1.06)}
  52%{transform:scale(1.08)}
  68%{transform:scale(1.02)}
}
.qml-lung-vessels path{
  fill:none;
  stroke:#eaf1ff;
  stroke-width:4;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:.82;
  animation:qmlVesselGlow 2.8s ease-in-out infinite;
}
.qml-vessels-right path{animation-delay:.12s}
@keyframes qmlVesselGlow{
  0%,100%{opacity:.58}
  50%{opacity:1}
}
.qml-air-pulse{
  position:absolute;
  left:50%;
  top:22px;
  width:26px;
  height:26px;
  margin-left:-13px;
  border-radius:50%;
  border:2px solid rgba(147,222,255,.6);
  opacity:0;
  animation:qmlAirFlow 2.2s ease-out infinite;
}
.qml-air-pulse.a2{animation-delay:.7s}
.qml-air-pulse.a3{animation-delay:1.4s}
@keyframes qmlAirFlow{
  0%{transform:translateY(0) scale(.5); opacity:0}
  25%{opacity:.55}
  100%{transform:translateY(130px) scale(1.7); opacity:0}
}

.qml-right-controls{
  display:grid;
  grid-template-rows:repeat(3,1fr) auto;
  gap:8px;
}
.qml-control-card{
  display:grid;
  align-content:start;
  padding:14px 14px 10px;
  background:rgba(33,49,90,.96);
  box-shadow:0 6px 20px rgba(0,0,0,.14);
  border:1px solid rgba(255,255,255,.03);
  transition:.25s ease;
}
.qml-control-card small{
  color:#f3f7ff;
  font-size:7px;
  font-weight:640;
  margin-bottom:16px;
}
.qml-adjust-row{
  display:grid;
  grid-template-columns:38px 1fr 38px;
  align-items:center;
  gap:8px;
}
.qml-adjust-row button{
  height:38px;
  border:0;
  border-radius:8px;
  background:#1f86ff;
  color:#f4f8ff;
  font-size:16px;
  font-weight:700;
}
.qml-adjust-row strong{
  color:#1f86ff;
  font-size:34px;
  line-height:1;
  text-align:center;
  font-weight:580;
}
.qml-control-card i{
  display:block;
  margin-top:4px;
  color:#91a7cf;
  font-size:6px;
  font-style:normal;
  text-align:center;
}

.qml-menu-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.qml-menu-grid button{
  min-height:44px;
  border:0;
  border-radius:8px;
  background:#236cc0;
  color:#eef4ff;
  font-size:8px;
  font-weight:540;
  box-shadow:0 4px 12px rgba(0,0,0,.12);
  transition:.2s ease;
}
.qml-menu-grid button.active,
.qml-menu-grid button:hover{
  background:#2d8eff;
  transform:translateY(-1px);
}
.qml-menu-grid button[data-qml-tab="setup"]{
  grid-column:1 / 3;
}

/* Focus animation when tabs cycle */
.qml-menu-grid button.is-focus,
.qml-control-card.is-focus,
.qml-metric-card.is-focus,
.qml-wave-card.is-focus,
.qml-lungs-card.is-focus{
  box-shadow:0 0 0 1px rgba(88,181,255,.28), 0 0 20px rgba(88,181,255,.16);
  filter:brightness(1.04);
  transform:translateY(-1px);
}

@media(max-width:980px){
  .qml-med-grid{
    grid-template-columns:1fr;
    grid-template-rows:auto auto auto;
  }
  .qml-left-metrics{
    grid-template-columns:repeat(2,1fr);
    grid-template-rows:auto auto;
  }
  .qml-main-monitor{
    grid-template-rows:140px 138px auto;
  }
  .qml-right-controls{
    grid-template-columns:repeat(2,1fr);
    grid-template-rows:auto auto;
  }
  .qml-menu-grid{
    grid-column:1 / 3;
  }
}
@media(max-width:720px){
  .qml-left-metrics{grid-template-columns:1fr}
  .qml-lower-monitor{grid-template-columns:1fr}
  .qml-right-controls{grid-template-columns:1fr}
  .qml-menu-grid{grid-column:auto}
}

@media(prefers-reduced-motion:reduce){
  .qml-head-heart,
  .qml-paw-trace,
  .qml-flow-trace,
  .qml-mini-blue,
  .qml-mini-green,
  .qml-heart-core,
  .qml-lung,
  .qml-lung-vessels path,
  .qml-air-pulse{
    animation:none !important;
  }
}



/* =========================================================
   v4.6 — QML medical slide fit-to-frame + theme color match
   ========================================================= */

/* Match the green/teal mood used across the other slides */
.screen-qml .screen-bar{
  background:linear-gradient(90deg,#17372d,#15392d 55%,#1b4736) !important;
}
.qml-medical-demo{
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.04), transparent 28%),
    linear-gradient(145deg,#132720,#153127 54%,#16352b) !important;
  color:#eef7f2 !important;
}

/* Keep everything inside the slide frame */
.screen-qml,
.qml-medical-demo,
.qml-med-grid,
.qml-main-monitor,
.qml-lower-monitor,
.qml-lungs-card,
.qml-patient-vitals,
.qml-right-controls{
  overflow:hidden;
}

.qml-med-header{
  min-height:34px !important;
  padding:0 14px !important;
  font-size:6.5px !important;
}
.qml-med-grid{
  grid-template-columns:132px 1fr 150px !important;
  gap:8px !important;
  padding:8px !important;
}

.qml-left-metrics{
  gap:6px !important;
}
.qml-metric-card{
  padding:10px 10px 8px !important;
  background:rgba(35,58,89,.56) !important;
  border:1px solid rgba(164,214,191,.06) !important;
}
.qml-metric-card small{
  font-size:6.2px !important;
}
.qml-metric-card strong{
  font-size:20px !important;
}
.qml-metric-card i,
.qml-metric-card em{
  font-size:5.2px !important;
  color:#8aa99d !important;
}

.qml-main-monitor{
  grid-template-rows:106px 106px 1fr !important;
  gap:7px !important;
}
.qml-wave-card{
  padding:8px 10px 6px !important;
  background:rgba(35,58,89,.54) !important;
  border:1px solid rgba(164,214,191,.05) !important;
}
.qml-wave-head{
  margin-bottom:3px !important;
}
.qml-wave-head strong{
  font-size:7.2px !important;
}
.qml-wave-head span{
  font-size:5.5px !important;
  color:#9bb6a9 !important;
}

.qml-lower-monitor{
  grid-template-columns:.85fr 1.15fr !important;
  gap:7px !important;
}
.qml-patient-vitals{
  gap:6px !important;
  padding:6px 8px !important;
}
.qml-mini-graph{
  grid-template-columns:80px 1fr !important;
  column-gap:6px !important;
}
.qml-mini-graph svg{
  height:22px !important;
}
.qml-mini-graph strong{
  font-size:18px !important;
}
.qml-mini-graph small{
  font-size:5px !important;
}
.qml-patient-info{
  gap:5px 10px !important;
  padding-top:2px !important;
}
.qml-patient-info b{
  font-size:6.8px !important;
}
.qml-patient-info small{
  font-size:5px !important;
}

.qml-lungs-card{
  min-height:0 !important;
  padding:0 !important;
  background:transparent !important;
}
.qml-heart-cluster{
  left:10px !important;
  top:4px !important;
}
.qml-heart-shell{
  width:38px !important;
  height:38px !important;
}
.qml-heart-core{
  font-size:21px !important;
}
.qml-lung-stage{
  min-height:140px !important;
  height:100% !important;
}
.qml-lung-stage svg{
  transform:scale(.88);
  transform-origin:center center;
}
.qml-trachea{ stroke-width:13px !important; }
.qml-bronchi{ stroke-width:8px !important; }
.qml-lung-vessels path{ stroke-width:3px !important; }

.qml-air-pulse{
  width:18px !important;
  height:18px !important;
  margin-left:-9px !important;
}

.qml-right-controls{
  grid-template-rows:repeat(3,98px) auto !important;
  gap:7px !important;
}
.qml-control-card{
  padding:10px 10px 8px !important;
  background:rgba(35,58,89,.56) !important;
  border:1px solid rgba(164,214,191,.07) !important;
}
.qml-control-card small{
  font-size:6.2px !important;
  margin-bottom:10px !important;
}
.qml-adjust-row{
  grid-template-columns:28px 1fr 28px !important;
  gap:6px !important;
}
.qml-adjust-row button{
  height:28px !important;
  border-radius:7px !important;
  font-size:14px !important;
  background:#2286f5 !important;
}
.qml-adjust-row strong{
  font-size:26px !important;
  color:#2b94ff !important;
}
.qml-control-card i{
  margin-top:3px !important;
  font-size:5px !important;
}

.qml-menu-grid{
  grid-template-columns:1fr 1fr !important;
  gap:6px !important;
}
.qml-menu-grid button{
  min-height:32px !important;
  font-size:6.5px !important;
  border-radius:7px !important;
  background:#2264ae !important;
}
.qml-menu-grid button.active,
.qml-menu-grid button:hover{
  background:#2c84da !important;
}
.qml-menu-grid button[data-qml-tab="setup"]{
  grid-column:1 / 3 !important;
}

/* Reduce visual intensity slightly for cleaner fit */
.qml-head-battery::after{
  background:#53c48f !important;
}
.qml-head-mode{
  background:rgba(255,255,255,.06) !important;
}
.qml-head-heart{
  color:#f16d6d !important;
}
.qml-paw-trace{
  stroke:#16c5a0 !important;
}
.qml-flow-trace{
  stroke:#db64d0 !important;
}
.qml-mini-blue{
  stroke:#38a3ff !important;
}
.qml-mini-green{
  stroke:#28cc88 !important;
}

/* Tablet/mobile fit */
@media(max-width:980px){
  .qml-med-grid{
    grid-template-columns:1fr !important;
  }
  .qml-right-controls{
    grid-template-columns:repeat(2,1fr) !important;
    grid-template-rows:auto auto !important;
  }
  .qml-menu-grid{
    grid-column:1 / 3 !important;
  }
}
@media(max-width:720px){
  .qml-main-monitor{
    grid-template-rows:96px 96px auto !important;
  }
  .qml-right-controls{
    grid-template-columns:1fr !important;
  }
  .qml-menu-grid{
    grid-column:auto !important;
  }
}


/* =========================================================
   v4.7 — QML medical slide exact reference parameters + larger type
   ========================================================= */

/* Increase slider navigation font sizes */
.training-slider .slider-controls span{
  font-size:10px !important;
}
.training-slider .slider-controls b{
  font-size:12px !important;
  line-height:1.25 !important;
  font-weight:520 !important;
}
.training-slider .slider-controls i{
  height:2px !important;
}

/* QML/Qt Quick 3D reference screen */
.qml-reference-layout{
  height:calc(100% - 48px) !important;
  background:linear-gradient(145deg,#18233c,#16274f 55%,#122146) !important;
  color:#f3f6ff !important;
}
.qml-reference-layout .qml-med-header{
  min-height:38px !important;
  padding:0 16px !important;
  font-size:8px !important;
}
.qml-ref-grid{
  display:grid;
  grid-template-columns:150px minmax(0,1fr) 170px;
  gap:8px;
  flex:1;
  min-height:0;
  padding:8px 10px 10px;
  overflow:hidden;
}
.qml-ref-left{
  display:grid;
  grid-template-rows:repeat(4,minmax(0,1fr));
  gap:7px;
}
.qml-ref-metric{
  display:grid;
  grid-template-columns:1fr auto;
  grid-template-rows:auto 1fr auto;
  min-height:0;
  padding:12px 12px 9px;
  border-radius:9px;
  background:#223254;
  border:1px solid rgba(255,255,255,.025);
}
.qml-ref-metric small{
  grid-column:1/3;
  color:#f7f9ff;
  font-size:8px;
  font-weight:650;
}
.qml-ref-metric strong{
  grid-column:2;
  align-self:center;
  color:#fff;
  font-size:30px;
  line-height:1;
  font-weight:500;
}
.qml-ref-metric em{
  grid-column:1;
  align-self:end;
  color:#8ca1c7;
  font-size:6.5px;
  font-style:normal;
  line-height:1.45;
}
.qml-ref-metric i{
  grid-column:2;
  align-self:end;
  color:#8ca1c7;
  font-size:6.5px;
  font-style:normal;
  text-align:right;
}

.qml-ref-center{
  display:grid;
  grid-template-rows:142px 142px 1fr;
  gap:7px;
  min-height:0;
}
.qml-ref-wave{
  position:relative;
  padding:12px 12px 6px;
  border-radius:9px;
  background:#223254;
  overflow:hidden;
}
.qml-ref-wave-label{
  position:absolute;
  z-index:2;
  inset:10px 10px auto 12px;
  display:flex;
  justify-content:space-between;
}
.qml-ref-wave-label strong{
  color:#f7f9ff;
  font-size:9px;
  font-weight:650;
}
.qml-ref-wave-label span{
  color:#92a8d1;
  font-size:6px;
  line-height:2.1;
  text-align:right;
}
.qml-ref-wave svg{
  width:100%;
  height:100%;
}
.qml-ref-gridline{
  fill:none;
  stroke:rgba(255,255,255,.055);
  stroke-width:1;
}
.qml-ref-paw-line,
.qml-ref-flow-line{
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-width:3.2;
  stroke-dasharray:1100;
  stroke-dashoffset:1100;
}
.qml-ref-paw-line{
  stroke:#16c99a;
  animation:qmlRefPaw 5.4s linear infinite;
  filter:drop-shadow(0 0 4px rgba(22,201,154,.25));
}
.qml-ref-flow-line{
  stroke:#e963cf;
  animation:qmlRefFlow 4.8s linear infinite;
  filter:drop-shadow(0 0 4px rgba(233,99,207,.25));
}
@keyframes qmlRefPaw{
  0%{stroke-dashoffset:1100;opacity:.38}
  15%,86%{stroke-dashoffset:0;opacity:1}
  100%{stroke-dashoffset:-1100;opacity:.2}
}
@keyframes qmlRefFlow{
  0%{stroke-dashoffset:1100;opacity:.38}
  15%,86%{stroke-dashoffset:0;opacity:1}
  100%{stroke-dashoffset:-1100;opacity:.2}
}

.qml-ref-bottom{
  display:grid;
  grid-template-columns:.72fr 1.28fr;
  gap:8px;
  min-height:0;
  overflow:hidden;
}
.qml-ref-vitals{
  display:grid;
  grid-template-rows:auto auto 1fr;
  gap:6px;
  padding:6px 6px 4px;
}
.qml-ref-vital{
  display:grid;
  grid-template-columns:92px 1fr;
  grid-template-rows:auto auto;
  gap:2px 8px;
  align-items:center;
}
.qml-ref-vital svg{
  grid-row:1/3;
  width:92px;
  height:24px;
}
.qml-ref-vital svg path{
  fill:none;
  stroke-width:2.6;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:180;
  stroke-dashoffset:180;
  animation:qmlRefMiniWave 3.4s linear infinite;
}
.qml-vital-blue svg path{stroke:#3499f3}
.qml-vital-green svg path{stroke:#19cf8a}
@keyframes qmlRefMiniWave{
  0%{stroke-dashoffset:180;opacity:.45}
  55%{opacity:1}
  100%{stroke-dashoffset:-180;opacity:.25}
}
.qml-ref-vital strong{
  color:#fff;
  font-size:28px;
  line-height:1;
  font-weight:500;
}
.qml-ref-vital small{
  color:#8fa3ca;
  font-size:7px;
  line-height:1.2;
}
.qml-ref-patient{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px 14px;
  align-content:center;
}
.qml-ref-patient span{
  display:grid;
  gap:2px;
}
.qml-ref-patient b{
  color:#f8f9ff;
  font-size:8px;
  font-weight:540;
}
.qml-ref-patient small{
  color:#8fa3ca;
  font-size:6.5px;
  line-height:1.25;
}

.qml-ref-lungs{
  position:relative;
  min-height:0;
  overflow:hidden;
}
.qml-ref-lungs > svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  transform:scale(.96);
}
.qml-ref-heart{
  position:absolute;
  left:4%;
  top:14%;
  z-index:3;
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border-radius:50%;
  background:rgba(255,255,255,.035);
}
.qml-ref-heart span{
  color:#ff7474;
  font-size:23px;
  filter:drop-shadow(0 0 8px rgba(255,116,116,.32));
  animation:qmlRefHeart 1.05s ease-in-out infinite;
}
@keyframes qmlRefHeart{
  0%,100%{transform:scale(1)}
  18%{transform:scale(1.18)}
  32%{transform:scale(.94)}
  50%{transform:scale(1.22)}
  68%{transform:scale(1)}
}
.qml-ref-trachea{
  fill:none;
  stroke:#d6e0fa;
  stroke-width:15;
  stroke-linecap:round;
  opacity:.82;
}
.qml-ref-bronchi{
  fill:none;
  stroke:#d6e0fa;
  stroke-width:9;
  stroke-linecap:round;
  opacity:.78;
}
.qml-ref-lung{
  stroke:rgba(255,255,255,.08);
  stroke-width:2;
  transform-box:fill-box;
  transform-origin:center;
  animation:qmlRefBreathing 3.4s ease-in-out infinite;
  filter:drop-shadow(0 6px 14px rgba(120,143,215,.18));
}
.qml-ref-lung-left{fill:url(#qmlRefLungLeft)}
.qml-ref-lung-right{
  fill:url(#qmlRefLungRight);
  animation-delay:.1s;
}
@keyframes qmlRefBreathing{
  0%,100%{transform:scale(1)}
  38%{transform:scale(1.055)}
  52%{transform:scale(1.075)}
  68%{transform:scale(1.02)}
}
.qml-ref-vessels path{
  fill:none;
  stroke:#edf2ff;
  stroke-width:4;
  stroke-linecap:round;
  opacity:.82;
  animation:qmlRefVessel 2.8s ease-in-out infinite;
}
@keyframes qmlRefVessel{
  0%,100%{opacity:.55}
  50%{opacity:1}
}

.qml-ref-right{
  display:grid;
  grid-template-rows:repeat(3,minmax(0,1fr)) auto;
  gap:7px;
}
.qml-ref-control{
  display:grid;
  align-content:start;
  min-height:0;
  padding:12px 12px 9px;
  border-radius:9px;
  background:#223254;
  border:1px solid rgba(255,255,255,.025);
}
.qml-ref-control small{
  color:#f5f7ff;
  font-size:8px;
  font-weight:650;
  margin-bottom:14px;
}
.qml-ref-adjust{
  display:grid;
  grid-template-columns:34px 1fr 34px;
  gap:7px;
  align-items:center;
}
.qml-ref-adjust button{
  height:34px;
  border:0;
  border-radius:7px;
  background:#2587f2;
  color:#fff;
  font-size:17px;
  font-weight:700;
}
.qml-ref-adjust strong{
  color:#2587f2;
  font-size:31px;
  line-height:1;
  font-weight:560;
  text-align:center;
}
.qml-ref-control i{
  display:block;
  margin-top:5px;
  color:#8fa3ca;
  font-size:6.5px;
  font-style:normal;
  text-align:center;
}
.qml-ref-menu{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
}
.qml-ref-menu button{
  min-height:38px;
  border:0;
  border-radius:7px;
  background:#2469b5;
  color:#f2f6ff;
  font-size:8px;
  font-weight:550;
}
.qml-ref-menu button.active{
  background:#2b8df6;
}

/* Match current page's darker green outer slide styling */
.screen-qml .screen-bar{
  background:linear-gradient(90deg,#17372d,#15392d 55%,#1b4736) !important;
}

@media(max-width:1100px){
  .qml-ref-grid{
    grid-template-columns:130px minmax(0,1fr) 150px;
  }
  .qml-ref-metric strong{font-size:26px}
  .qml-ref-adjust strong{font-size:27px}
}
@media(max-width:800px){
  .qml-ref-grid{
    grid-template-columns:1fr;
    overflow:auto;
  }
  .qml-ref-left{
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto auto;
  }
  .qml-ref-right{
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto auto;
  }
  .qml-ref-menu{grid-column:1/3}
}


/* =========================================================
   v4.8 — QML medical HMI fit, ECG, readable fonts, site palette
   ========================================================= */

/* Larger five-slide navigation */
.training-slider .slider-controls span{
  font-size:11px !important;
  font-weight:600 !important;
}
.training-slider .slider-controls b{
  font-size:14px !important;
  line-height:1.28 !important;
  font-weight:520 !important;
  color:#36544a !important;
}
.training-slider .slider-controls [aria-selected="true"] b{
  color:#173f32 !important;
}

/* Keep QML visual fully contained in the same product-screen frame */
.screen-qml{
  overflow:hidden !important;
}
.qml-reference-layout{
  height:calc(100% - 48px) !important;
  min-height:0 !important;
  overflow:hidden !important;
  background:
    radial-gradient(circle at 54% 4%, rgba(102,173,143,.08), transparent 30%),
    linear-gradient(145deg,#15382e 0%,#173d32 58%,#123229 100%) !important;
}
.qml-reference-layout .qml-med-header{
  min-height:34px !important;
  max-height:34px !important;
  padding:0 14px !important;
  color:#eef7f2 !important;
  font-size:8px !important;
}
.qml-ref-grid{
  grid-template-columns:128px minmax(0,1fr) 146px !important;
  gap:6px !important;
  padding:6px 7px 7px !important;
  min-height:0 !important;
  overflow:hidden !important;
}

/* Dark green cards to match the other sliders */
.qml-ref-metric,
.qml-ref-wave,
.qml-ref-control{
  background:linear-gradient(145deg,rgba(35,78,64,.96),rgba(27,65,53,.96)) !important;
  border-color:rgba(174,221,202,.08) !important;
  box-shadow:0 7px 18px rgba(4,24,18,.14) !important;
}
.qml-ref-metric{
  padding:9px 9px 7px !important;
}
.qml-ref-metric small{
  font-size:7.6px !important;
}
.qml-ref-metric strong{
  font-size:23px !important;
}
.qml-ref-metric em,
.qml-ref-metric i{
  color:#99b7aa !important;
  font-size:5.8px !important;
}

/* Center area compressed so bottom lung/ECG area stays visible */
.qml-ref-center{
  grid-template-rows:105px 105px minmax(0,1fr) !important;
  gap:6px !important;
  min-height:0 !important;
  overflow:hidden !important;
}
.qml-ref-wave{
  padding:8px 9px 4px !important;
}
.qml-ref-wave-label{
  inset:7px 8px auto 9px !important;
}
.qml-ref-wave-label strong{
  font-size:8.3px !important;
}
.qml-ref-wave-label span{
  color:#9cb8ac !important;
  font-size:5.4px !important;
}
.qml-ref-gridline{
  stroke:rgba(209,235,224,.055) !important;
}
.qml-ref-paw-line{
  stroke:#35d0a3 !important;
}
.qml-ref-flow-line{
  stroke:#dd70d0 !important;
}

/* Bottom layout: ECG + SpO2/Pulse + patient data beside animated lungs */
.qml-ref-bottom{
  grid-template-columns:.78fr 1.22fr !important;
  gap:6px !important;
  min-height:0 !important;
  overflow:hidden !important;
}
.qml-ref-vitals{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  grid-template-rows:40px 54px minmax(0,1fr) !important;
  gap:4px 6px !important;
  padding:3px 4px !important;
  min-height:0 !important;
  overflow:hidden !important;
}
.qml-ref-ecg{
  grid-column:1 / 3;
  position:relative;
  display:grid;
  grid-template-columns:78px minmax(0,1fr);
  align-items:center;
  gap:5px;
  min-height:0;
  padding:2px 4px;
  border-radius:6px;
  background:rgba(255,255,255,.018);
  overflow:hidden;
}
.qml-ecg-label{
  display:grid;
  grid-template-columns:1fr auto;
  grid-template-rows:auto auto;
  align-items:center;
  column-gap:5px;
}
.qml-ecg-label span{
  display:grid;
  gap:0;
}
.qml-ecg-label b{
  color:#87e0b7;
  font-size:7px;
  font-weight:650;
}
.qml-ecg-label small{
  color:#8fac9f;
  font-size:5px;
}
.qml-ecg-label strong{
  grid-column:2;
  grid-row:1 / 3;
  color:#eef7f2;
  font-size:14px;
  font-weight:520;
}
.qml-ecg-heart{
  position:absolute;
  left:55px;
  top:4px;
  color:#ff7373;
  font-size:9px;
  font-style:normal;
  animation:qmlEcgHeart 1.05s ease-in-out infinite;
}
@keyframes qmlEcgHeart{
  0%,100%{transform:scale(1)}
  18%{transform:scale(1.25)}
  34%{transform:scale(.92)}
  50%{transform:scale(1.18)}
}
.qml-ref-ecg svg{
  width:100%;
  height:34px;
}
.qml-ecg-grid{
  fill:none;
  stroke:rgba(150,202,179,.055);
  stroke-width:1;
}
.qml-ecg-line{
  fill:none;
  stroke:#72e5a9;
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:520;
  stroke-dashoffset:520;
  filter:drop-shadow(0 0 3px rgba(114,229,169,.28));
  animation:qmlEcgTrace 3.0s linear infinite;
}
@keyframes qmlEcgTrace{
  0%{stroke-dashoffset:520;opacity:.35}
  18%,82%{stroke-dashoffset:0;opacity:1}
  100%{stroke-dashoffset:-520;opacity:.2}
}
.qml-ref-vital{
  grid-template-columns:60px 1fr !important;
  gap:2px 5px !important;
  min-height:0 !important;
}
.qml-ref-vital svg{
  width:60px !important;
  height:20px !important;
}
.qml-ref-vital strong{
  font-size:20px !important;
}
.qml-ref-vital small{
  color:#99b7aa !important;
  font-size:5.7px !important;
}
.qml-ref-patient{
  grid-column:1 / 3;
  gap:4px 8px !important;
  padding:2px 2px 0 !important;
}
.qml-ref-patient b{
  font-size:6.8px !important;
}
.qml-ref-patient small{
  color:#99b7aa !important;
  font-size:5.3px !important;
}

/* Lungs fit fully inside the frame */
.qml-ref-lungs{
  min-height:0 !important;
  overflow:hidden !important;
}
.qml-ref-lungs > svg{
  transform:scale(.78) translateY(-2%) !important;
  transform-origin:center center !important;
}
.qml-ref-heart{
  left:6% !important;
  top:7% !important;
  width:34px !important;
  height:34px !important;
}
.qml-ref-heart span{
  font-size:19px !important;
}
.qml-ref-trachea{
  stroke-width:13px !important;
}
.qml-ref-bronchi{
  stroke-width:7.5px !important;
}
.qml-ref-vessels path{
  stroke-width:3px !important;
}

/* Right controls reduced vertically, type increased */
.qml-ref-right{
  grid-template-rows:88px 88px 88px minmax(0,1fr) !important;
  gap:6px !important;
  min-height:0 !important;
  overflow:hidden !important;
}
.qml-ref-control{
  padding:9px 9px 6px !important;
}
.qml-ref-control small{
  margin-bottom:8px !important;
  font-size:7.2px !important;
}
.qml-ref-adjust{
  grid-template-columns:27px 1fr 27px !important;
  gap:5px !important;
}
.qml-ref-adjust button{
  height:27px !important;
  border-radius:6px !important;
  background:#2d8dce !important;
  font-size:14px !important;
}
.qml-ref-adjust strong{
  color:#39a6ec !important;
  font-size:24px !important;
}
.qml-ref-control i{
  color:#99b7aa !important;
  font-size:5.5px !important;
}
.qml-ref-menu{
  gap:5px !important;
  align-content:end !important;
}
.qml-ref-menu button{
  min-height:31px !important;
  border-radius:6px !important;
  background:#2f6f68 !important;
  font-size:7px !important;
}
.qml-ref-menu button.active{
  background:#338f7b !important;
}

/* Keep slide image frame consistent with the other 4 slides */
.expert-lead-slide .product-screen,
.hero-slide[data-slide="0"] .product-screen,
.hero-slide[data-slide="1"] .product-screen,
.hero-slide[data-slide="2"] .product-screen,
.hero-slide[data-slide="3"] .product-screen{
  height:500px !important;
  max-height:500px !important;
  box-sizing:border-box !important;
}

/* Mobile remains scroll-safe */
@media(max-width:900px){
  .qml-reference-layout{
    overflow:auto !important;
  }
  .qml-ref-grid{
    grid-template-columns:1fr !important;
    overflow:visible !important;
  }
  .qml-ref-center{
    grid-template-rows:105px 105px 260px !important;
  }
  .qml-ref-right{
    grid-template-columns:1fr 1fr !important;
    grid-template-rows:auto auto !important;
    overflow:visible !important;
  }
  .qml-ref-menu{
    grid-column:1 / 3;
  }
}
@media(prefers-reduced-motion:reduce){
  .qml-ecg-heart,
  .qml-ecg-line{
    animation:none !important;
  }
}


/* v4.8 helpful business content for users, Search and ad landing-page relevance */
.training-business-answers{
  background:#ffffff;
  color:#173d31;
  padding-top:72px;
  padding-bottom:76px;
}
.training-answer-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin-top:26px;
}
.training-answer-grid article{
  min-height:190px;
  padding:22px;
  border:1px solid #dce7e2;
  border-radius:17px;
  background:#f7f9f8;
}
.training-answer-grid h3{
  margin:0 0 10px;
  color:#173d31;
  font-size:17px;
  line-height:1.3;
  font-weight:560;
}
.training-answer-grid p{
  margin:0;
  color:#61776e;
  font-size:12.5px;
  line-height:1.68;
}
.training-business-cta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-top:18px;
  padding:20px 22px;
  border-radius:16px;
  background:#173d31;
  color:#fff;
}
.training-business-cta strong{
  display:block;
  font-size:16px;
  font-weight:560;
}
.training-business-cta span{
  display:block;
  margin-top:4px;
  color:rgba(255,255,255,.72);
  font-size:11.5px;
}
@media(max-width:1000px){
  .training-answer-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:650px){
  .training-answer-grid{grid-template-columns:1fr}
  .training-business-cta{align-items:flex-start;flex-direction:column}
}

/* =========================================================
   v4.9 — multilingual switch + technical resources
   ========================================================= */
.resources-section{
  background:linear-gradient(180deg,#f7f9f7,#ffffff);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.resources-heading h2{color:var(--ink)!important}
.resources-heading>p{color:var(--muted)!important}
.resource-groups{display:grid;gap:34px}
.resource-group{
  padding:24px;
  border:1px solid var(--line);
  border-radius:20px;
  background:#fff;
  box-shadow:0 10px 28px rgba(17,48,37,.045);
}
.resource-group>header{
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:13px;
  margin-bottom:17px;
}
.resource-group>header>span{
  display:grid;
  place-items:center;
  width:36px;height:36px;
  border:1px solid #cbd8d2;
  border-radius:50%;
  color:var(--rust);
  font-size:9px;
  font-weight:800;
}
.resource-group h3{margin:0;color:var(--green);font-size:20px;font-weight:550}
.resource-group header p{margin:3px 0 0;color:var(--muted);font-size:11px}
.resource-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}
.resource-card{
  position:relative;
  display:flex;
  min-height:142px;
  flex-direction:column;
  padding:17px;
  border:1px solid #dde6e1;
  border-radius:14px;
  background:#f8faf8;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.resource-card:hover,.resource-card:focus-visible{
  transform:translateY(-3px);
  border-color:#9ab8aa;
  box-shadow:0 12px 25px rgba(20,64,48,.09);
  outline:none;
}
.resource-card>span{
  margin-bottom:18px;
  color:var(--rust);
  font-size:8px;
  font-weight:800;
  letter-spacing:.7px;
  text-transform:uppercase;
}
.resource-card strong{
  color:var(--green);
  font-size:15px;
  font-weight:600;
}
.resource-card small{
  margin-top:auto;
  padding-top:14px;
  color:#68776f;
  font-size:9.5px;
  line-height:1.5;
}
.resource-disclaimer{
  margin:18px 0 0;
  color:#829089;
  font-size:9px;
  text-align:center;
}
.language-select select{
  min-width:96px;
}
html[lang="de"] .language-select select{min-width:104px}
@media(max-width:1080px){.resource-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){
  .resource-group{padding:17px}
  .resource-grid{grid-template-columns:1fr}
  .resource-card{min-height:120px}
}

/* =========================================================
   v5.0 — Training engagement process + contact refinement
   ========================================================= */
.engagement-process{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 92% 0%,rgba(182,103,69,.07),transparent 26%),
    linear-gradient(180deg,#f7f9f7 0%,#fff 100%);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.engagement-process-heading{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  align-items:end;
  gap:7vw;
  margin-bottom:46px;
}
.engagement-process-heading h2{
  margin:0;
  color:var(--ink);
  font-size:clamp(40px,4.5vw,64px);
  font-weight:500;
  line-height:1.06;
  letter-spacing:-2.3px;
}
.engagement-process-heading > p{
  margin:0;
  color:var(--muted);
  font-size:15px;
  line-height:1.8;
}
.engagement-flow{
  position:relative;
  display:grid;
  gap:0;
  max-width:1180px;
  margin:0 auto;
}
.engagement-flow::before{
  content:"";
  position:absolute;
  left:39px;
  top:56px;
  bottom:56px;
  width:2px;
  background:linear-gradient(180deg,#375878,#6f5d7f 25%,#b8667c 50%,#e66768 75%,#eda97f);
}
.engagement-step{
  position:relative;
  display:grid;
  grid-template-columns:80px minmax(0,1fr);
  gap:30px;
  align-items:center;
  min-height:148px;
  padding:18px 28px 18px 0;
  border-bottom:1px solid #e3e8e4;
}
.engagement-step:last-child{border-bottom:0}
.engagement-number{
  position:relative;
  z-index:2;
  display:grid;
  place-items:center;
  width:80px;
  height:80px;
}
.engagement-number::before{
  content:"";
  position:absolute;
  inset:7px;
  border-radius:22px;
  transform:rotate(45deg);
  background:#375878;
  box-shadow:0 10px 26px rgba(28,58,88,.14);
}
.step-2 .engagement-number::before{background:#6f5d7f}
.step-3 .engagement-number::before{background:#b8667c}
.step-4 .engagement-number::before{background:#e66768}
.step-5 .engagement-number::before{background:#eda97f}
.engagement-number span{
  position:relative;
  color:#fff;
  font-size:25px;
  font-weight:600;
  letter-spacing:-.7px;
}
.engagement-copy{
  max-width:920px;
  padding:6px 0;
}
.engagement-copy small{
  display:block;
  margin-bottom:6px;
  color:var(--rust);
  font-size:9px;
  font-weight:800;
  letter-spacing:1.15px;
  text-transform:uppercase;
}
.engagement-copy h3{
  margin:0 0 8px;
  color:var(--ink);
  font-size:22px;
  font-weight:520;
  line-height:1.25;
  letter-spacing:-.25px;
}
.engagement-copy p{
  margin:0;
  color:#68756e;
  font-size:13px;
  line-height:1.7;
}
.engagement-cta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  max-width:1180px;
  margin:34px auto 0;
  padding:22px 24px;
  border-radius:18px;
  background:var(--green);
  color:#fff;
}
.engagement-cta small{
  display:block;
  margin-bottom:4px;
  color:#abc1b7;
  font-size:8px;
  font-weight:800;
  letter-spacing:1px;
  text-transform:uppercase;
}
.engagement-cta strong{
  display:block;
  color:#fff;
  font-size:16px;
  font-weight:500;
}
.engagement-cta .button{
  flex:0 0 auto;
  background:#fff;
  color:var(--green);
  box-shadow:none;
}

/* Contact: larger, regular-weight contact details */
.contact-card .contact-person{
  padding:22px 24px !important;
}
.contact-card .contact-person span{
  font-size:10px !important;
  letter-spacing:1.35px !important;
}
.contact-card .contact-person strong{
  margin-top:3px;
  font-size:21px !important;
  font-weight:450 !important;
  letter-spacing:-.2px;
}
.contact-card .contact-person a{
  margin-top:5px;
  font-size:15px !important;
  font-weight:450 !important;
}
.contact-card .contact-lines{
  gap:16px !important;
  margin-top:22px !important;
}
.contact-card .contact-lines a{
  padding:18px 20px !important;
  font-size:17px !important;
  font-weight:450 !important;
  line-height:1.35;
}
.contact-card .contact-lines span{
  margin-bottom:7px !important;
  font-size:9px !important;
  font-weight:650 !important;
}
.contact-card > .button{
  min-height:58px;
  font-size:15px !important;
  font-weight:550 !important;
}

@media(max-width:850px){
  .engagement-process-heading{grid-template-columns:1fr;gap:20px}
  .engagement-step{grid-template-columns:70px 1fr;gap:20px}
  .engagement-number{width:70px;height:70px}
  .engagement-flow::before{left:34px}
  .engagement-copy h3{font-size:19px}
  .engagement-cta{align-items:flex-start;flex-direction:column}
}
@media(max-width:560px){
  .engagement-step{
    grid-template-columns:56px 1fr;
    gap:15px;
    padding-right:0;
  }
  .engagement-number{width:56px;height:56px}
  .engagement-number::before{inset:6px;border-radius:14px}
  .engagement-number span{font-size:18px}
  .engagement-flow::before{left:27px;top:42px;bottom:42px}
  .engagement-copy h3{font-size:17px}
  .engagement-copy p{font-size:12px}
  .contact-card .contact-lines{grid-template-columns:1fr !important}
}

/* =========================================================
   v5.1 — Contact accent + expandable 7-step customer journey
   ========================================================= */

/* Contact values match the same accent used by italic highlights such as "build better". */
#contact .contact-accent-value{
  color:var(--rust) !important;
  font-weight:450 !important;
}
#contact .contact-person .contact-accent-value{
  font-size:16px !important;
}
#contact .contact-lines .contact-accent-value{
  font-size:18px !important;
  line-height:1.35 !important;
}
#contact .contact-accent-value:hover,
#contact .contact-accent-value:focus-visible{
  color:#9c5037 !important;
}

/* Expandable engagement flow */
.engagement-flow-expandable{
  max-width:1180px;
}
.engagement-flow-expandable::before{
  top:50px !important;
  bottom:50px !important;
}
.engagement-step{
  position:relative;
  cursor:pointer;
  transition:
    min-height .30s ease,
    padding .30s ease,
    margin .30s ease,
    background .22s ease,
    border-color .22s ease,
    box-shadow .22s ease,
    transform .22s ease;
}
.engagement-step:hover,
.engagement-step:focus-visible,
.engagement-step.is-expanded{
  min-height:228px;
  margin:6px 0;
  padding-top:28px;
  padding-bottom:28px;
  padding-right:64px;
  border:1px solid #dce5df;
  border-radius:18px;
  background:#fff;
  box-shadow:0 18px 42px rgba(17,48,37,.085);
  transform:translateX(8px);
  outline:none;
}
.engagement-number{
  transition:transform .22s ease;
}
.engagement-step:hover .engagement-number,
.engagement-step:focus-visible .engagement-number,
.engagement-step.is-expanded .engagement-number{
  transform:scale(1.08);
}

.engagement-more{
  display:grid;
  grid-template-rows:0fr;
  margin-top:0;
  opacity:0;
  overflow:hidden;
  transition:
    grid-template-rows .30s ease,
    margin-top .30s ease,
    opacity .24s ease;
}
.engagement-more > ul{
  min-height:0;
  margin:0;
  padding:0;
  list-style:none;
  overflow:hidden;
}
.engagement-step:hover .engagement-more,
.engagement-step:focus-visible .engagement-more,
.engagement-step.is-expanded .engagement-more{
  grid-template-rows:1fr;
  margin-top:15px;
  opacity:1;
}
.engagement-more li{
  position:relative;
  margin:7px 0;
  padding-left:19px;
  color:#53645c;
  font-size:12px;
  line-height:1.55;
}
.engagement-more li::before{
  content:"";
  position:absolute;
  left:0;
  top:.7em;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--rust);
  transform:translateY(-50%);
}
.engagement-expand-hint{
  display:inline-flex;
  margin-top:8px;
  color:#8a9690;
  font-size:8px;
  font-weight:750;
  letter-spacing:.8px;
  text-transform:uppercase;
}

/* Plus icon indicates more information is available. */
.engagement-step::after{
  content:"+";
  position:absolute;
  right:22px;
  top:50%;
  display:grid;
  place-items:center;
  width:31px;
  height:31px;
  border:1px solid #d6dfda;
  border-radius:50%;
  background:#fff;
  color:#66766e;
  font-size:19px;
  line-height:1;
  transform:translateY(-50%);
  transition:transform .22s ease,background .22s ease,color .22s ease;
}
.engagement-step:hover::after,
.engagement-step:focus-visible::after,
.engagement-step.is-expanded::after{
  background:var(--green);
  color:#fff;
  transform:translateY(-50%) rotate(45deg);
}

/* Additional colours for the newly added steps. */
.step-6 .engagement-number::before{background:#d58b63 !important}
.step-7 .engagement-number::before{background:#b66f4f !important}
.engagement-flow-expandable::before{
  background:linear-gradient(
    180deg,
    #375878 0%,
    #6f5d7f 16%,
    #b8667c 32%,
    #e66768 48%,
    #eda97f 64%,
    #d58b63 82%,
    #b66f4f 100%
  ) !important;
}

/* Touch devices: click/tap controls the expansion instead of hover. */
@media (hover:none), (pointer:coarse){
  .engagement-step:hover{
    min-height:148px;
    margin:0;
    padding-top:18px;
    padding-bottom:18px;
    padding-right:28px;
    border-color:transparent;
    border-radius:0;
    background:transparent;
    box-shadow:none;
    transform:none;
  }
  .engagement-step.is-expanded{
    min-height:228px;
    margin:6px 0;
    padding-top:26px;
    padding-bottom:26px;
    padding-right:48px;
    border:1px solid #dce5df;
    border-radius:18px;
    background:#fff;
    box-shadow:0 14px 32px rgba(17,48,37,.075);
    transform:none;
  }
  .engagement-expand-hint{
    font-size:0;
  }
  .engagement-expand-hint::after{
    content:"Tap again to close details";
    font-size:8px;
  }
}

@media(max-width:560px){
  #contact .contact-lines .contact-accent-value{
    font-size:17px !important;
  }
  .engagement-step{
    padding-right:38px;
  }
  .engagement-step::after{
    right:6px;
    width:26px;
    height:26px;
    font-size:16px;
  }
  .engagement-step:hover,
  .engagement-step:focus-visible,
  .engagement-step.is-expanded{
    transform:none;
  }
}

/* v5.2 footer, compact engagement, trainer */
.footer-address-v52{color:#fff;line-height:1.65}
.footer-address-v52>strong{display:block;margin-bottom:7px;color:#fff;font-size:15px;font-weight:700}
.footer-address-v52 p{margin:0 0 7px;color:rgba(255,255,255,.78);font-size:12.5px;line-height:1.72}
.footer-contact-line{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.footer-contact-line a{color:#fff!important;font-weight:600;text-decoration:none}
.footer-contact-line a:hover{text-decoration:underline}
.footer-email-label{margin-left:10px;color:#fff;font-weight:600}

.engagement-flow-expandable .engagement-step{min-height:112px!important}
.engagement-flow-expandable .engagement-copy>p{display:none!important}
.engagement-summary-detail{display:block!important;margin:0 0 12px!important;color:#68756e!important;font-size:13px!important;line-height:1.7!important}
.engagement-flow-expandable .engagement-copy{padding:4px 0!important}
.engagement-flow-expandable .engagement-copy>small{margin-bottom:4px!important}
.engagement-flow-expandable .engagement-copy>h3{margin-bottom:0!important}
.engagement-step:hover .engagement-copy h3,
.engagement-step:focus-visible .engagement-copy h3,
.engagement-step.is-expanded .engagement-copy h3{margin-bottom:4px!important}
.engagement-step:hover .engagement-more,
.engagement-step:focus-visible .engagement-more,
.engagement-step.is-expanded .engagement-more{margin-top:14px!important}

.trainer-champion-line{margin-top:14px!important;color:var(--green)!important;font-size:14px!important;font-weight:520!important}
.trainer-profile-link{display:inline-flex;margin-top:12px;font-size:13px;font-weight:600}

@media(max-width:620px){
  .footer-contact-line{align-items:flex-start;flex-direction:column;gap:3px}
  .footer-email-label{margin-left:0;margin-top:4px}
}

/* =========================================================
   v5.3 — compact aligned engagement process
   ========================================================= */

/* The previous grid-collapse method left implicit rows in the hidden content.
   Use max-height so collapsed rows stay genuinely compact. */
.engagement-flow-compact{
  max-width:1120px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
.engagement-flow-compact::before{
  left:31px !important;
  top:40px !important;
  bottom:40px !important;
}

.engagement-flow-compact .engagement-step{
  grid-template-columns:64px minmax(0,1fr) !important;
  gap:22px !important;
  align-items:center !important;
  min-height:88px !important;
  padding:12px 48px 12px 0 !important;
  margin:0 !important;
  border-bottom:1px solid #e3e8e4 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  transform:none !important;
}
.engagement-flow-compact .engagement-step:last-child{
  border-bottom:0 !important;
}

.engagement-flow-compact .engagement-number{
  width:64px !important;
  height:64px !important;
  align-self:center !important;
}
.engagement-flow-compact .engagement-number::before{
  inset:7px !important;
  border-radius:16px !important;
  box-shadow:0 7px 18px rgba(28,58,88,.10) !important;
}
.engagement-flow-compact .engagement-number span{
  font-size:19px !important;
}

.engagement-flow-compact .engagement-copy{
  display:grid !important;
  align-content:center !important;
  min-width:0;
  padding:0 !important;
}
.engagement-flow-compact .engagement-copy > small{
  margin:0 0 3px !important;
  font-size:8.5px !important;
  line-height:1.2 !important;
}
.engagement-flow-compact .engagement-copy > h3{
  margin:0 !important;
  font-size:20px !important;
  line-height:1.22 !important;
}

/* Truly hide details in collapsed state */
.engagement-flow-compact .engagement-more{
  display:block !important;
  max-height:0 !important;
  margin:0 !important;
  opacity:0 !important;
  visibility:hidden !important;
  overflow:hidden !important;
  transition:max-height .32s ease,margin .26s ease,opacity .22s ease,visibility .22s ease !important;
}
.engagement-flow-compact .engagement-more > *{
  overflow:visible !important;
}

/* Expand only on hover/focus/tap */
.engagement-flow-compact .engagement-step:hover,
.engagement-flow-compact .engagement-step:focus-visible,
.engagement-flow-compact .engagement-step.is-expanded{
  min-height:180px !important;
  margin:5px 0 !important;
  padding:20px 52px 20px 14px !important;
  border:1px solid #dce5df !important;
  border-radius:16px !important;
  background:#fff !important;
  box-shadow:0 14px 34px rgba(17,48,37,.07) !important;
}
.engagement-flow-compact .engagement-step:hover .engagement-more,
.engagement-flow-compact .engagement-step:focus-visible .engagement-more,
.engagement-flow-compact .engagement-step.is-expanded .engagement-more{
  max-height:360px !important;
  margin-top:12px !important;
  opacity:1 !important;
  visibility:visible !important;
}

.engagement-flow-compact .engagement-summary-detail{
  margin:0 0 10px !important;
  font-size:12.5px !important;
  line-height:1.55 !important;
}
.engagement-flow-compact .engagement-more li{
  margin:5px 0 !important;
  font-size:11.5px !important;
  line-height:1.45 !important;
}

/* Keep plus button aligned with the title row */
.engagement-flow-compact .engagement-step::after{
  right:10px !important;
  top:50% !important;
  width:28px !important;
  height:28px !important;
  font-size:17px !important;
}
.engagement-flow-compact .engagement-step:hover::after,
.engagement-flow-compact .engagement-step:focus-visible::after,
.engagement-flow-compact .engagement-step.is-expanded::after{
  top:28px !important;
}

/* Trainer recognition */
#trainer .trainer-details > div > p:first-child{
  font-size:13px !important;
  line-height:1.7 !important;
}
#trainer .trainer-champion-line{
  margin-top:13px !important;
  color:var(--green) !important;
  font-size:14px !important;
  font-weight:650 !important;
}

/* Mobile/touch compact layout */
@media (hover:none), (pointer:coarse){
  .engagement-flow-compact .engagement-step:hover{
    min-height:88px !important;
    margin:0 !important;
    padding:12px 48px 12px 0 !important;
    border:0 !important;
    border-bottom:1px solid #e3e8e4 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
  }
  .engagement-flow-compact .engagement-step.is-expanded{
    min-height:180px !important;
    margin:5px 0 !important;
    padding:18px 42px 18px 10px !important;
    border:1px solid #dce5df !important;
    border-radius:14px !important;
    background:#fff !important;
    box-shadow:0 12px 28px rgba(17,48,37,.06) !important;
  }
}

@media(max-width:620px){
  .engagement-flow-compact::before{
    left:25px !important;
  }
  .engagement-flow-compact .engagement-step{
    grid-template-columns:52px minmax(0,1fr) !important;
    gap:14px !important;
    min-height:76px !important;
    padding-right:34px !important;
  }
  .engagement-flow-compact .engagement-number{
    width:52px !important;
    height:52px !important;
  }
  .engagement-flow-compact .engagement-number::before{
    inset:6px !important;
    border-radius:13px !important;
  }
  .engagement-flow-compact .engagement-number span{
    font-size:16px !important;
  }
  .engagement-flow-compact .engagement-copy > h3{
    font-size:16px !important;
  }
  .engagement-flow-compact .engagement-step::after{
    right:2px !important;
    width:24px !important;
    height:24px !important;
  }
}

/* =========================================================
   v5.4 — simplified footer with small PthinkS logo
   ========================================================= */
.site-footer{
  display:grid !important;
  grid-template-columns:minmax(150px,.45fr) minmax(320px,1fr) !important;
  gap:28px 44px !important;
  align-items:center !important;
}
.footer-logo-small{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  min-height:90px;
}
.footer-logo-small a{
  display:inline-flex;
  align-items:center;
}
.footer-logo-small img{
  display:block;
  width:auto !important;
  height:auto !important;
  max-width:118px !important;
  max-height:52px !important;
  object-fit:contain;
  filter:brightness(0) invert(1);
  opacity:.92;
}
.footer-logo-small img:hover{
  opacity:1;
}
.site-footer .footer-map-cluster{
  width:100%;
  margin:0 !important;
}
.site-footer > small{
  grid-column:1 / -1 !important;
  padding-top:18px !important;
  margin-top:2px !important;
  border-top:1px solid rgba(255,255,255,.12);
  text-align:center;
}
@media(max-width:760px){
  .site-footer{
    grid-template-columns:1fr !important;
    gap:20px !important;
  }
  .footer-logo-small{
    justify-content:center;
    min-height:auto;
    padding-top:10px;
  }
  .footer-logo-small img{
    max-width:105px !important;
    max-height:46px !important;
  }
}

/* =========================================================
   v5.5 — slower engagement animation + 80/20 practical model
   ========================================================= */

/* Practical learning model */
.engagement-learning-model{
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:14px;
  max-width:1120px;
  margin:0 auto 28px;
}
.learning-ratio,
.learning-project-specific{
  border:1px solid #dfe6e2;
  border-radius:18px;
  background:#fff;
  box-shadow:0 10px 26px rgba(17,48,37,.045);
}
.learning-ratio{
  display:grid;
  grid-template-columns:1fr 1fr;
  overflow:hidden;
}
.learning-ratio-main,
.learning-ratio-secondary{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:13px;
  align-items:center;
  padding:19px;
}
.learning-ratio-main{
  border-right:1px solid #e3e8e4;
}
.learning-ratio strong{
  color:var(--rust);
  font-size:34px;
  line-height:1;
  font-weight:540;
}
.learning-ratio-secondary strong{
  color:var(--green);
}
.learning-ratio span{
  display:block;
  color:var(--ink);
  font-size:13px;
  font-weight:600;
}
.learning-ratio small{
  display:block;
  margin-top:4px;
  color:#738078;
  font-size:9.5px;
  line-height:1.5;
}
.learning-project-specific{
  padding:19px 21px;
}
.learning-project-specific > small{
  display:block;
  margin-bottom:7px;
  color:var(--rust);
  font-size:9px;
  font-weight:800;
  letter-spacing:.9px;
  text-transform:uppercase;
}
.learning-project-specific p{
  margin:0;
  color:#5f6f67;
  font-size:12px;
  line-height:1.65;
}

/* Slow down open/close so content can be read comfortably */
.engagement-flow-compact .engagement-step{
  transition:
    min-height .70s cubic-bezier(.22,.61,.36,1),
    padding .70s cubic-bezier(.22,.61,.36,1),
    margin .55s ease,
    background .45s ease,
    border-color .45s ease,
    box-shadow .45s ease !important;
}
.engagement-flow-compact .engagement-more{
  transition:
    max-height .85s cubic-bezier(.22,.61,.36,1),
    margin .60s ease,
    opacity .50s ease,
    visibility .50s ease !important;
}
.engagement-flow-compact .engagement-number{
  transition:transform .55s ease !important;
}
.engagement-flow-compact .engagement-step::after{
  transition:
    transform .60s ease,
    background .45s ease,
    color .45s ease !important;
}

/* Keep expanded state open-looking and readable */
.engagement-flow-compact .engagement-step:hover,
.engagement-flow-compact .engagement-step:focus-visible,
.engagement-flow-compact .engagement-step.is-expanded{
  min-height:210px !important;
}
.engagement-flow-compact .engagement-step:hover .engagement-more,
.engagement-flow-compact .engagement-step:focus-visible .engagement-more,
.engagement-flow-compact .engagement-step.is-expanded .engagement-more{
  max-height:520px !important;
}

/* Slight pause effect by making collapsed content fade gently */
.engagement-flow-compact .engagement-more{
  will-change:max-height,opacity;
}

/* Touch devices remain tap-controlled */
@media(max-width:850px){
  .engagement-learning-model{
    grid-template-columns:1fr;
  }
}
@media(max-width:620px){
  .learning-ratio{
    grid-template-columns:1fr;
  }
  .learning-ratio-main{
    border-right:0;
    border-bottom:1px solid #e3e8e4;
  }
}

.engagement-flow-compact .engagement-step.is-reading{
  min-height:210px !important;
  margin:5px 0 !important;
  padding:20px 52px 20px 14px !important;
  border:1px solid #dce5df !important;
  border-radius:16px !important;
  background:#fff !important;
  box-shadow:0 14px 34px rgba(17,48,37,.07) !important;
}
.engagement-flow-compact .engagement-step.is-reading .engagement-more{
  max-height:520px !important;
  margin-top:12px !important;
  opacity:1 !important;
  visibility:visible !important;
}
.engagement-flow-compact .engagement-step.is-reading::after{
  top:28px !important;
  background:var(--green) !important;
  color:#fff !important;
  transform:translateY(-50%) rotate(45deg) !important;
}

/* =========================================================
   v5.6 — footer restored to logo + address + map + social layout
   ========================================================= */
.site-footer-v56{
  display:block !important;
  padding:42px clamp(28px,4vw,72px) 24px !important;
  background:
    radial-gradient(circle at 10% 0%,rgba(255,255,255,.025),transparent 26%),
    linear-gradient(135deg,#123d30,#0f342a) !important;
  color:#fff;
}
.footer-top-grid{
  display:grid;
  grid-template-columns:1.05fr 1.2fr 1.5fr .55fr;
  gap:42px;
  align-items:start;
}
.footer-brand-panel{
  display:grid;
  align-content:start;
}
.footer-brand-logo{
  display:inline-flex;
  width:max-content;
  padding:8px;
  border-radius:14px;
  background:#fff;
}
.footer-brand-logo img{
  width:auto !important;
  height:auto !important;
  max-width:150px !important;
  max-height:150px !important;
  object-fit:contain;
  filter:none !important;
}
.footer-tagline{
  max-width:320px;
  margin:14px 0 0;
  color:rgba(255,255,255,.72);
  font-size:12px;
  line-height:1.7;
}

.footer-address-panel{
  padding-top:6px;
}
.footer-address-panel > strong{
  display:block;
  margin-bottom:12px;
  color:#fff;
  font-size:16px;
  font-weight:700;
}
.footer-address-panel p{
  margin:0 0 10px;
  color:rgba(255,255,255,.84);
  font-size:13px;
  line-height:1.8;
}
.footer-contact-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px 9px;
}
.footer-contact-row span{
  color:rgba(255,255,255,.72);
}
.footer-contact-row a{
  color:#f2c24d !important;
  font-weight:600;
  text-decoration:none;
}
.footer-contact-row a:hover{
  text-decoration:underline;
}
.footer-email-label{
  margin-left:8px;
  font-weight:600;
}

.site-footer-v56 .footer-map-cluster{
  width:100%;
  margin:0 !important;
}
.site-footer-v56 .footer-map-cluster iframe,
.site-footer-v56 .footer-map-cluster img{
  width:100% !important;
  min-height:180px;
  border-radius:16px !important;
  overflow:hidden;
}
.site-footer-v56 .footer-map-cluster > a{
  display:inline-flex;
  margin-top:8px;
  color:#f2c24d !important;
  font-size:10px;
  font-weight:650;
  text-decoration:none;
}

.site-footer-v56 .footer-social{
  display:grid !important;
  grid-template-columns:1fr 1fr;
  gap:8px;
  align-content:start;
  justify-items:stretch;
}
.site-footer-v56 .footer-social a{
  display:grid;
  place-items:center;
  min-width:64px;
  min-height:64px;
  border-radius:14px;
  background:#fff;
  font-size:20px !important;
}

.footer-bottom-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  margin-top:34px;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.12);
}
.footer-bottom-row span{
  color:rgba(255,255,255,.58);
  font-size:9px;
  line-height:1.5;
}
.footer-bottom-row span:last-child{
  text-align:right;
}

@media(max-width:1100px){
  .footer-top-grid{
    grid-template-columns:1fr 1fr;
  }
  .footer-social{
    max-width:220px;
  }
}
@media(max-width:700px){
  .site-footer-v56{
    padding:32px 20px 20px !important;
  }
  .footer-top-grid{
    grid-template-columns:1fr;
    gap:26px;
  }
  .footer-brand-logo img{
    max-width:120px !important;
    max-height:120px !important;
  }
  .footer-bottom-row{
    align-items:flex-start;
    flex-direction:column;
  }
  .footer-bottom-row span:last-child{
    text-align:left;
  }
}