/* JustTekno — site-wide showcase and theme unification, 2026-07-15 */
:root{
  --w-bg:#f6f8fb;--w-surface:#ffffff;--w-surface-2:#eef3f7;--w-surface-3:#e7edf3;
  --w-ink:#17263a;--w-muted:#66778b;--w-line:#dbe3eb;--w-brand:#078797;--w-blue:#166fba;
  --w-navy:#10283f;--w-positive:#11866f;--w-warning:#b87511;
  --w-shadow:0 18px 56px rgba(27,48,72,.09);--w-shadow-soft:0 9px 30px rgba(27,48,72,.06);
  --w-hero:radial-gradient(circle at 83% 16%,rgba(7,135,151,.12),transparent 31%),linear-gradient(145deg,#f9fbfd,#edf3f7);
  --w-radius:18px;--w-radius-sm:12px;
}
html[data-theme="dark"]{
  --w-bg:#0e1722;--w-surface:#142131;--w-surface-2:#101c29;--w-surface-3:#1b2b3c;
  --w-ink:#edf4fa;--w-muted:#a9b7c6;--w-line:#2a3c4e;--w-brand:#4bd0cf;--w-blue:#65b3f2;
  --w-navy:#0a1420;--w-positive:#50cbaa;--w-warning:#efb95c;
  --w-shadow:0 20px 58px rgba(0,0,0,.28);--w-shadow-soft:0 10px 34px rgba(0,0,0,.2);
  --w-hero:radial-gradient(circle at 82% 15%,rgba(55,190,196,.12),transparent 31%),linear-gradient(145deg,#0d1824,#122334);
}

html,body,.jt-site,main{background:var(--w-bg)!important;color:var(--w-ink)}
body{font-size:16px;line-height:1.65}.jt-site main{min-height:55vh}.jt-site p{color:var(--w-muted)}
.jt-site h1,.jt-site h2,.jt-site h3{color:var(--w-ink);text-wrap:balance}
.jt-site h1{font-size:clamp(2.1rem,3.05vw,2.9rem)!important;font-weight:680!important;line-height:1.1!important;letter-spacing:-.037em!important}
.jt-site h2{font-size:clamp(1.65rem,2.25vw,2.25rem)!important;font-weight:690!important;line-height:1.17!important;letter-spacing:-.028em!important}
.jt-site h3{font-weight:720!important;letter-spacing:-.018em!important}
.jt-site .eyebrow,.jt-site .detail-kicker,.jt-site .mk-badge,.jt-site .spx-badge,.jt-site .mk-kicker,.jt-site .spx-kicker{
  color:var(--w-brand)!important;font-size:.69rem!important;font-weight:850!important;letter-spacing:.09em!important;
}
.jt-site a:focus-visible,.jt-site button:focus-visible,.jt-site input:focus-visible,.jt-site textarea:focus-visible,.jt-site select:focus-visible{outline:3px solid color-mix(in srgb,var(--w-brand) 35%,transparent);outline-offset:3px}

/* Every page follows the selected theme — no isolated dark islands. */
.jt-site .section,.jt-site .page-section,.jt-site .mk-section,.jt-site .spx-section,.jt-site .content-flow-section,.jt-site .comparison-section,
.jt-site .media-band-section,.jt-site .spx-page,.jt-site .mk-page{background:var(--w-bg)!important;color:var(--w-ink)!important}
.jt-site .section.soft,.jt-site .soft,.jt-site .mk-soft,.jt-site .spx-operations,.jt-site .el-soft,.jt-site .spx-markets,
.jt-site .dark,.jt-site .dark-head,.jt-site .mk-dark,.jt-site .spx-dark,.jt-site .spx-cta,.jt-site .mk-cta,.jt-site .cta-band{
  background:var(--w-surface-2)!important;color:var(--w-ink)!important;
}
.jt-site .dark h1,.jt-site .dark h2,.jt-site .dark h3,.jt-site .dark-head h1,.jt-site .dark-head h2,.jt-site .dark-head h3,
.jt-site .mk-dark h1,.jt-site .mk-dark h2,.jt-site .mk-dark h3,.jt-site .spx-dark h1,.jt-site .spx-dark h2,.jt-site .spx-dark h3,
.jt-site .spx-cta h2,.jt-site .mk-cta h2,.jt-site .cta-band h2{color:var(--w-ink)!important}
.jt-site .dark p,.jt-site .dark-head p,.jt-site .mk-dark p,.jt-site .spx-dark p,.jt-site .spx-cta p,.jt-site .mk-cta p,.jt-site .cta-band p{color:var(--w-muted)!important}

/* Unified navigation */
.elite-header{background:color-mix(in srgb,var(--w-surface) 92%,transparent)!important;border-color:var(--w-line)!important}
.elite-nav>a,.elite-nav-group>button{color:var(--w-muted)!important}.elite-nav>a:hover,.elite-nav>a.active,.elite-nav-group>button:hover{color:var(--w-ink)!important;background:var(--w-surface-2)!important}
.elite-submenu,.elite-language-menu{background:var(--w-surface)!important;border-color:var(--w-line)!important}.elite-submenu a,.elite-language-menu a{color:var(--w-ink)!important}
.elite-submenu a:hover,.elite-language-menu a:hover,.elite-language-menu a[aria-current]{background:var(--w-surface-2)!important}
.elite-language>button,.elite-theme,.elite-panel-link{background:var(--w-surface)!important;border-color:var(--w-line)!important;color:var(--w-ink)!important}
.elite-meeting{background:var(--w-navy)!important;color:#fff!important}

/* Heroes become calm product showcases. */
.page-hero,.hero,.spx-hero,.mk-hero,.el-hero,.pg-hero{
  position:relative;isolation:isolate;overflow:hidden;background:var(--w-hero)!important;color:var(--w-ink)!important;border-bottom:1px solid var(--w-line);
}
.page-hero,.hero{padding:72px 0!important}.spx-hero,.mk-hero{padding:74px 0!important}.el-hero{padding:74px 0 68px!important}
.page-hero:before,.hero:before,.spx-hero:before,.mk-hero:before{opacity:.32!important;mask-image:linear-gradient(180deg,#000,transparent 90%)}
.page-hero>.container,.hero>.container,.spx-hero>.container,.mk-hero>.container{position:relative;z-index:2}
.page-hero:not(:has(.hero-photo)):not(:has(.visual-panel)):after{
  content:"";position:absolute;z-index:0;right:-2%;top:0;width:54%;height:100%;opacity:.2;
  background:linear-gradient(90deg,var(--w-bg),transparent 34%),url('../gallery/backgrounds/justtekno-smart-production-hero.webp') center/cover no-repeat;
  pointer-events:none;
}
.page-hero:not(:has(.page-hero-grid))>.container{max-width:1180px}.page-hero:not(:has(.page-hero-grid))>.container>h1,.page-hero:not(:has(.page-hero-grid))>.container>p{max-width:720px}
.page-hero h1,.hero h1,.spx-hero h1,.mk-hero h1,.el-hero h1{color:var(--w-ink)!important;margin:16px 0 14px!important}
.page-hero p,.hero p,.spx-hero p,.mk-hero p,.el-hero p{color:var(--w-muted)!important;font-size:1rem!important;line-height:1.72!important}
.page-hero-grid,.spx-hero-grid,.mk-hero-grid,.el-hero-grid{gap:52px!important;align-items:center}
.hero-photo{width:100%;height:auto;max-height:440px;aspect-ratio:16/10;object-fit:cover;border-radius:var(--w-radius)!important;border:1px solid var(--w-line);box-shadow:var(--w-shadow)}

/* Buttons */
.btn,.el-btn,.spx-btn,.mk-actions a,.mk-cta a,.spx-card-actions a,.spx-card-actions a+a{
  min-height:43px!important;padding:10px 16px!important;border-radius:10px!important;box-shadow:none!important;font-size:.81rem!important;font-weight:800!important;
}
.btn.primary,.el-btn.primary,.spx-btn.primary,.mk-actions a:first-child,.mk-cta a,.spx-card-actions a:first-child{
  background:linear-gradient(135deg,var(--w-blue),var(--w-brand))!important;color:#fff!important;border-color:transparent!important;
}
.btn.ghost,.el-btn.secondary,.spx-btn.secondary,.mk-actions a+a,.spx-card-actions a+a{
  background:var(--w-surface)!important;color:var(--w-ink)!important;border:1px solid var(--w-line)!important;
}
.btn:hover,.el-btn:hover,.spx-btn:hover,.mk-actions a:hover,.mk-cta a:hover{transform:translateY(-1px);filter:saturate(1.05)}

/* Cards, panels and data surfaces */
.card,.scenario-card,.problem-solution-grid>article,.flow-step,.info-box,.contact-card,.contact-mini,.mini-panel,.download-panel,.download-row,.mobile-download-zone,
.model-large,.arch-card,.arch-node,.track-visual,.track-selector-card,.selector-card,.report-stack,.product-card,.media-band,.visual-panel,
.spx-market-card,.spx-feature-grid article,.spx-rule-list article,.spx-metric-row article,.spx-install-cards article,.mk-flow article,.mk-grid article,
.mk-checks span,.spx-console,.mk-code-visual,.el-market,.el-product-grid>a,.pg-card,.pg-security,.faq-list details,.compare-table-wrap{
  background:var(--w-surface)!important;color:var(--w-ink)!important;border-color:var(--w-line)!important;box-shadow:var(--w-shadow-soft)!important;
}
.card:hover,.scenario-card:hover,.product-card:hover,.el-product-grid>a:hover,.el-market:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--w-brand) 35%,var(--w-line))!important;box-shadow:var(--w-shadow)!important}
.product-card-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:15px!important}.product-card{overflow:hidden!important;border-radius:var(--w-radius)!important}.product-card>img{width:100%!important;height:210px!important;object-fit:cover!important;background:var(--w-surface-2)!important;border-bottom:1px solid var(--w-line)!important}.product-card>div{padding:20px!important}.product-card>div>span{color:var(--w-brand)!important;font-size:.66rem!important;font-weight:900!important;letter-spacing:.07em!important}.product-card h2{margin:9px 0!important;font-size:1.22rem!important}.product-card .text-link{color:var(--w-brand)!important;font-size:.78rem!important;font-weight:850!important}
.card p,.scenario-card p,.flow-step p,.info-box p,.download-row p,.model-large p,.arch-card p,.track-visual p,.product-card p,
.spx-market-card p,.spx-feature-grid p,.spx-rule-list p,.mk-flow p,.mk-grid p,.el-market p,.el-product-grid p{color:var(--w-muted)!important}
.visual-list>div,.check-list li,.validation-list li,.wide-list li,.model-points li{border-color:var(--w-line)!important;color:var(--w-ink)!important}
.visual-list>div{display:grid!important;grid-template-columns:minmax(125px,.8fr) minmax(0,1fr)!important;gap:12px!important;align-items:center!important}.visual-list b{color:var(--w-ink)!important;font-size:.79rem!important}.visual-list span{padding:0!important;border:0!important;background:transparent!important;color:var(--w-muted)!important;font-size:.74rem!important}
.spx-console,.mk-code-visual{border-radius:var(--w-radius)!important}.spx-console-head{background:var(--w-surface-2)!important;border-color:var(--w-line)!important}.spx-console-body{background:var(--w-surface)!important}
.spx-stat-grid{background:var(--w-line)!important}.spx-stat-grid article,.spx-code-line,.spx-route{background:var(--w-surface-2)!important;border-color:var(--w-line)!important}.spx-stat-grid strong,.spx-code-line b,.spx-route span{color:var(--w-ink)!important}
.spx-stat-grid small,.spx-stat-grid span,.spx-code-line span{color:var(--w-muted)!important}
.mk-code-visual>strong{color:var(--w-ink)!important}.mk-code-visual>small{color:var(--w-muted)!important}.mk-code-visual i{background:var(--w-ink)!important}.mk-code-visual i:nth-child(3n),.mk-code-visual i:nth-child(5n){background:var(--w-brand)!important}
.mk-live-note{background:color-mix(in srgb,var(--w-brand) 9%,var(--w-surface))!important;color:var(--w-ink)!important;border-color:color-mix(in srgb,var(--w-brand) 25%,var(--w-line))!important}.mk-live-note p{color:var(--w-muted)!important}

/* Content rhythm */
.section,.mk-section,.spx-section{padding:68px 0!important}.section-head,.mk-heading,.spx-heading{max-width:780px!important;margin-bottom:26px!important}
.section-head h2,.mk-heading h2,.spx-heading h2{margin:8px 0 10px!important}.section-head p,.mk-heading p,.spx-heading p{color:var(--w-muted)!important;line-height:1.68!important}
.cards,.mk-grid,.spx-feature-grid{gap:15px!important}.flow-step,.card,.mk-grid article,.spx-feature-grid article{border-radius:var(--w-radius-sm)!important}
.mk-flow{gap:12px!important}.mk-flow article{min-height:185px}.spx-flow article{background:var(--w-surface)!important;border-color:var(--w-line)!important;min-height:170px!important}.spx-flow h3{color:var(--w-ink)!important}.spx-flow p{color:var(--w-muted)!important}.spx-flow>i{background:var(--w-brand)!important}
.spx-market-card{min-height:430px!important;border-radius:var(--w-radius)!important}.spx-market-card li{color:var(--w-ink)!important}
.mk-cta,.spx-cta,.cta-band{border-top:1px solid var(--w-line);border-bottom:1px solid var(--w-line)}

/* Tables and forms */
table{background:var(--w-surface);color:var(--w-ink)}th{background:var(--w-surface-2)!important;color:var(--w-muted)!important}th,td{border-color:var(--w-line)!important}td{color:var(--w-ink)!important}
input,textarea,select{background:var(--w-surface)!important;color:var(--w-ink)!important;border-color:var(--w-line)!important}input::placeholder,textarea::placeholder{color:var(--w-muted)!important}
.faq-list details{border-radius:12px!important}.faq-list summary{color:var(--w-ink)!important}.compare-table-wrap{overflow:auto;border-radius:var(--w-radius-sm)}

/* Gallery and real visual storytelling */
.world-media{position:relative;overflow:hidden;border:1px solid var(--w-line);border-radius:var(--w-radius);background:var(--w-surface);box-shadow:var(--w-shadow)}
.world-media img{display:block;width:100%;height:100%;min-height:330px;object-fit:cover}.world-media figcaption{position:absolute;left:14px;right:14px;bottom:14px;padding:10px 12px;border-radius:9px;background:color-mix(in srgb,var(--w-navy) 82%,transparent);color:#fff;font-size:.72rem;backdrop-filter:blur(8px)}
.world-showcase-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:18px}.world-showcase-grid.reverse{grid-template-columns:.92fr 1.08fr}.world-showcase-copy{display:flex;flex-direction:column;justify-content:center;padding:34px;border:1px solid var(--w-line);border-radius:var(--w-radius);background:var(--w-surface)}
.world-showcase-copy>span{color:var(--w-brand);font-size:.68rem;font-weight:900;letter-spacing:.09em}.world-showcase-copy h2{margin:10px 0 12px;color:var(--w-ink)!important}.world-showcase-copy p{color:var(--w-muted)!important;line-height:1.72}.world-showcase-copy ul{display:grid;grid-template-columns:1fr 1fr;gap:9px;list-style:none;padding:0;margin:18px 0}.world-showcase-copy li{position:relative;padding-left:18px;color:var(--w-ink);font-size:.79rem}.world-showcase-copy li:before{content:"";position:absolute;left:0;top:.48em;width:7px;height:7px;border-radius:50%;background:var(--w-brand)}
.gallery-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}.gallery-item{grid-column:span 6;position:relative;min-height:310px;overflow:hidden;border:1px solid var(--w-line);border-radius:var(--w-radius);background:var(--w-surface);box-shadow:var(--w-shadow-soft)}.gallery-item.wide{grid-column:span 12;min-height:430px}.gallery-item img{width:100%;height:100%;min-height:inherit;object-fit:cover;transition:transform .5s}.gallery-item:hover img{transform:scale(1.025)}.gallery-item>div{position:absolute;left:0;right:0;bottom:0;padding:50px 22px 20px;background:linear-gradient(transparent,rgba(8,20,32,.9));color:#fff}.gallery-item h2,.gallery-item h3{margin:0 0 5px;color:#fff!important}.gallery-item p{margin:0;color:#d6e4ef!important;font-size:.8rem}

/* Homepage visual replaces oversized copy-only hero. */
.el-hero-grid{grid-template-columns:minmax(0,.88fr) minmax(480px,1.12fr)!important}.el-hero h1{max-width:650px!important}.el-hero-media{position:relative;overflow:hidden;min-height:440px;border:1px solid var(--w-line);border-radius:22px;background:var(--w-surface);box-shadow:var(--w-shadow)}.el-hero-media>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.el-hero-media:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,23,36,.05),transparent 48%,rgba(8,23,36,.18))}.el-hero-float{position:absolute;z-index:2;left:18px;right:18px;bottom:18px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.el-hero-float article{padding:11px 12px;border:1px solid rgba(255,255,255,.18);border-radius:10px;background:rgba(8,24,38,.78);backdrop-filter:blur(10px);color:#fff}.el-hero-float small,.el-hero-float strong{display:block}.el-hero-float small{color:#b9d1df;font-size:.58rem}.el-hero-float strong{margin-top:3px;font-size:.86rem}

/* Footer always follows theme. */
.elite-footer{background:var(--w-surface)!important;color:var(--w-ink)!important;border-color:var(--w-line)!important}.elite-footer p,.elite-footer a,.elite-footer-bottom{color:var(--w-muted)!important}.elite-footer h3{color:var(--w-ink)!important}

@media(max-width:1080px){
  .el-hero-grid,.world-showcase-grid,.world-showcase-grid.reverse{grid-template-columns:1fr!important}.el-hero-media{min-height:400px}.page-hero-grid,.spx-hero-grid,.mk-hero-grid{grid-template-columns:1fr!important}.page-hero-grid .hero-photo{max-width:720px}.mk-flow{grid-template-columns:repeat(3,1fr)!important}.product-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:760px){
  .jt-site h1{font-size:clamp(1.9rem,8vw,2.45rem)!important}.jt-site h2{font-size:clamp(1.55rem,6vw,2rem)!important}.page-hero,.hero,.spx-hero,.mk-hero,.el-hero{padding:50px 0!important}
  .page-hero:after{display:none}.page-hero p,.hero p,.spx-hero p,.mk-hero p,.el-hero p{font-size:.92rem!important}.section,.mk-section,.spx-section{padding:50px 0!important}
  .el-hero-media{min-height:300px}.el-hero-float{grid-template-columns:1fr}.el-hero-float article:not(:first-child){display:none}.world-showcase-copy{padding:23px}.world-showcase-copy ul{grid-template-columns:1fr}.world-media img{min-height:250px}
  .gallery-item,.gallery-item.wide{grid-column:span 12;min-height:270px}.mk-flow{grid-template-columns:1fr!important}.spx-market-card{min-height:0!important}.product-card-grid{grid-template-columns:1fr!important}
}
@media(max-width:480px){.el-hero-media{min-height:260px}.gallery-item,.gallery-item.wide{min-height:240px}.world-showcase-copy{padding:19px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.gallery-item img,.card,.product-card,.el-product-grid>a{transition:none!important}}