/* JomeTech Africa visual system v1.2 — component layers; no external JS frameworks. */
:root{--jta-ink:#1A2433;--jta-navy:#05055E;--jta-brand:#0B0BC0;--jta-red:#E3262B;--jta-muted:#4A5568;--jta-pale:#F3F4FC;--jta-border:#E3E5F2;--jta-shadow:0 18px 55px rgba(7,16,75,.09)}
html{scroll-behavior:smooth}
body{background:#fff;-webkit-font-smoothing:antialiased}
.jt-site{isolation:isolate;overflow:hidden}
.jta-section{position:relative}
.jta-section>div{position:relative;z-index:2}
.jta-section h1,.jta-section h2{letter-spacing:-.035em;text-wrap:balance}
.jta-section h2{max-width:860px}
.jta-section p{max-width:72ch}
.jta-section a{text-underline-offset:4px}
.jta-section a:focus-visible{outline:3px solid #FF9A9A;outline-offset:4px}
.jta-section .jta-card,.jta-section .jta-service-card,.jta-section .jta-project-card,.jta-section .jta-info-card,.jta-section .jta-solution-cell{transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease,border-color .35s ease,background-color .35s ease;will-change:transform}
.jta-section .jta-card:hover,.jta-section .jta-service-card:hover,.jta-section .jta-project-card:hover,.jta-section .jta-info-card:hover{transform:translateY(-7px);box-shadow:0 30px 75px rgba(9,19,83,.17)!important;border-color:#C5CAF3!important}
.jta-section .jta-card,.jta-section .jta-info-card{border-radius:18px!important;overflow:hidden}
.jta-section .jta-service-card{border-radius:24px!important;overflow:hidden;position:relative;min-height:330px}
.jta-section .jta-service-card:first-child{background:linear-gradient(145deg,#1C1CD2 0%,#05055E 100%)!important;box-shadow:0 22px 48px rgba(13,15,136,.2)}
.jta-section .jta-service-card:before{content:'';position:absolute;right:-75px;top:-85px;width:235px;height:235px;border:1px solid rgba(255,255,255,.26);border-radius:50%;pointer-events:none}
.jta-section .jta-service-card:first-child:after{content:'';position:absolute;right:-20px;top:-35px;width:126px;height:126px;border:18px solid rgba(255,255,255,.055);border-radius:50%;pointer-events:none}
.jta-section .jta-service-card:nth-child(2){background:linear-gradient(150deg,#F3F4FC 0%,#E8EAF7 100%)!important;border:1px solid #D3D6EE!important}
.jta-section .jta-service-card:nth-child(2):before{border-color:#D3D6EE}
.jta-section .jta-service-card>a:last-child{margin-top:auto}
.jta-section .jta-info-card{background:linear-gradient(155deg,#fff,#F3F4FC);box-shadow:0 7px 28px rgba(9,20,80,.04);position:relative}
.jta-section .jta-info-card:after{content:'';position:absolute;left:20px;bottom:0;width:36px;height:3px;background:#E3262B;border-radius:3px;transition:width .3s}
.jta-section .jta-info-card:hover:after{width:calc(100% - 40px)}
.jta-section .jta-solution-cell:hover{transform:translateY(-3px);background:#1C1CD2!important}
.jta-section .jta-project-card{background:#fff;border:1px solid #E3E5F2;border-radius:21px!important;padding:12px 12px 26px;gap:13px!important;box-shadow:0 8px 35px rgba(18,30,80,.06)}
.jta-section .jta-project-card>span,.jta-section .jta-project-card>h3,.jta-section .jta-project-card>p,.jta-section .jta-project-card>a{margin-left:12px!important;margin-right:12px!important}
.jta-project-cover{position:relative;isolation:isolate;overflow:hidden;aspect-ratio:16/9;min-height:185px;border-radius:14px;background:linear-gradient(145deg,#dde8ff,#a6bff9);padding:22px;color:#fff}
.jta-project-cover:after{content:'';position:absolute;width:240px;height:240px;border:1px solid #fff5;border-radius:50%;right:-90px;bottom:-140px}
.jta-project-cover .jta-project-label{position:absolute;z-index:4;left:13px;bottom:12px;padding:4px 9px;border-radius:6px;background:rgba(4,14,49,.65);font-size:10px;line-height:1.3;color:#fff;letter-spacing:.04em;backdrop-filter:blur(8px)}
.jta-project-cover .jta-project-window{height:100%;min-height:147px;overflow:hidden;border-radius:11px;background:#fff;box-shadow:0 20px 30px #00154033;transform:rotate(-3deg) translateY(6px);transition:transform .4s ease}
.jta-project-card:hover .jta-project-window{transform:rotate(0) translateY(-3px) scale(1.015)}
.jta-project-cover .jta-window-nav{height:25px;display:flex;align-items:center;gap:5px;background:#F3F4FC;border-bottom:1px solid #E3E5F2;padding:0 12px}
.jta-project-cover .jta-window-nav i{height:5px;width:5px;border-radius:50%;background:#d2d8e5}
.jta-project-cover .jta-window-nav span{margin-left:auto;height:5px;width:46%;border-radius:6px;background:#E3E5F2}
.jta-project-cover .jta-window-body{padding:15px;display:grid;grid-template-columns:1.35fr 1fr;gap:11px;min-height:117px}
.jta-project-cover .jta-preview-title{display:block;width:70%;height:9px;border-radius:10px;background:#05055E;margin:6px 0 12px}
.jta-project-cover .jta-preview-line{display:block;height:5px;width:85%;background:#dee6f6;border-radius:10px;margin:6px 0}
.jta-project-cover .jta-preview-line.short{width:55%}
.jta-project-cover .jta-preview-button{display:block;width:73px;height:14px;background:#E3262B;border-radius:4px;margin-top:15px}
.jta-project-cover .jta-preview-image{border-radius:7px;background:linear-gradient(145deg,#c6d7ec,#6386be);position:relative;overflow:hidden}
.jta-project-cover .jta-preview-image:before{content:'';position:absolute;width:110px;height:110px;border-radius:50%;border:20px solid #ffffff4d;left:20%;top:15%}
.jta-project-cover[data-project="fpca"]{background:linear-gradient(125deg,#0b3650,#58aa9c)}
.jta-project-cover[data-project="fpca"] .jta-preview-image{background:linear-gradient(145deg,#b8e7d5,#5f9f82)}
.jta-project-cover[data-project="luipardal"]{background:linear-gradient(125deg,#5d254e,#d593a5)}
.jta-project-cover[data-project="luipardal"] .jta-preview-image{background:linear-gradient(145deg,#fce4e3,#cc729c)}
.jta-project-cover[data-project="tnf"]{background:linear-gradient(125deg,#0c2774,#698ada)}
.jta-project-cover[data-project="tnf"] .jta-preview-image{background:linear-gradient(145deg,#bcd4fa,#4b79bc)}
.jta-hero{overflow:hidden;background:radial-gradient(circle at 93% 10%,#1C1CD2 0,#1213bb 29%,transparent 55%),linear-gradient(122deg,#05055E,#1213b1)!important}
.jta-hero:before{content:'';position:absolute;inset:0;opacity:.23;background-image:linear-gradient(#ffffff12 1px,transparent 1px),linear-gradient(90deg,#ffffff12 1px,transparent 1px);background-size:48px 48px;mask-image:linear-gradient(90deg,transparent 30%,#000 100%)}
.jta-hero:after{content:'';position:absolute;width:570px;height:570px;right:-200px;bottom:-365px;border-radius:50%;border:1px solid #ffffff30;box-shadow:0 0 0 75px #ffffff08,0 0 0 150px #ffffff05;pointer-events:none}
.jta-hero h1{letter-spacing:-.05em!important;font-size:clamp(34px,4.4vw,65px)!important}
.jta-hero a[style*="background: #E3262B"],.jta-section a[style*="background: #E3262B"]{box-shadow:0 10px 24px #e8293544;transition:transform .25s ease,box-shadow .25s ease,background-color .25s ease}
.jta-hero a[style*="background: #E3262B"]:hover,.jta-section a[style*="background: #E3262B"]:hover{transform:translateY(-3px);box-shadow:0 18px 32px #e829355c;background:#C8161D!important}
.jta-hero-visual{position:relative!important;background:transparent!important;border:0!important;padding:0!important;aspect-ratio:auto!important;overflow:visible!important}
.jta-dashboard{width:min(100%,550px);margin:auto;background:#F3F4FC;color:#1A2433;text-align:left;border-radius:20px;overflow:hidden;box-shadow:0 30px 88px #05063c9c,0 0 0 1px #b1baff50;transform:perspective(1100px) rotateY(-5deg) rotateX(2deg);transition:transform .55s cubic-bezier(.2,.8,.2,1);font-family:'DM Sans',sans-serif}
.jta-dashboard:hover{transform:perspective(1100px) rotateY(0) rotateX(0)}
.jta-dashboard .jta-app-toolbar{height:40px;background:#05055E;color:#fff;display:flex;align-items:center;padding:0 14px;gap:6px}
.jta-dashboard .jta-app-toolbar i{height:7px;width:7px;background:#ffffff65;border-radius:50%}
.jta-dashboard .jta-app-toolbar .jta-toolbar-title{font-size:10px;font-weight:800;letter-spacing:.06em;margin-left:12px}
.jta-dashboard .jta-app-toolbar .jta-app-live{margin-left:auto;font:700 9px 'DM Sans',sans-serif;background:#1C1CD2;border:1px solid #3A3AD8;color:#EEEEFC;border-radius:30px;padding:4px 8px}
.jta-dashboard .jta-app-shell{display:flex;min-height:290px}
.jta-dashboard .jta-app-rail{width:54px;background:#E8EAF7;border-right:1px solid #D3D6EE;display:flex;align-items:center;flex-direction:column;gap:13px;padding:20px 0}
.jta-dashboard .jta-rail-icon{width:21px;height:21px;border-radius:7px;border:2px solid #a7b3d5;position:relative}
.jta-dashboard .jta-rail-icon.active{border-color:#0B0BC0;background:#0B0BC0;box-shadow:0 5px 13px #2525db50}
.jta-dashboard .jta-app-content{flex:1;padding:19px;min-width:0}
.jta-dashboard .jta-app-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:13px}
.jta-dashboard .jta-app-heading b{font-size:14px;letter-spacing:-.02em}
.jta-dashboard .jta-app-heading span{font-size:9px;color:#fff;background:#1C1CD2;border-radius:6px;padding:5px 9px}
.jta-dashboard .jta-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.jta-dashboard .jta-metric{border:1px solid #E3E5F2;background:#fff;border-radius:11px;padding:11px 9px;min-width:0}
.jta-dashboard .jta-metric em{display:block;color:#4A5568;font-style:normal;font-size:9px;line-height:1.4}
.jta-dashboard .jta-metric strong{display:block;font-size:13px;color:#1A2433;margin-top:5px;line-height:1.25}
.jta-dashboard .jta-dashboard-bottom{display:grid;grid-template-columns:1.55fr 1fr;gap:9px;margin-top:10px}
.jta-dashboard .jta-chart-card,.jta-dashboard .jta-task-card{background:#fff;border:1px solid #E3E5F2;border-radius:11px;padding:12px;min-width:0}
.jta-dashboard .jta-chart-title{display:block;font-size:10px;font-weight:800;color:#1A2433}
.jta-dashboard .jta-chart-sub{font-size:8px;color:#4A5568}
.jta-dashboard .jta-bar-chart{height:93px;display:flex;align-items:end;justify-content:space-around;gap:9px;border-bottom:1px solid #E3E5F2;margin-top:16px;padding:0 5px}
.jta-dashboard .jta-bar-chart i{display:block;flex:1;border-radius:5px 5px 0 0;background:linear-gradient(#3A3AD8,#0B0BC0);height:var(--h);animation:jtaBars 1.3s cubic-bezier(.2,.8,.2,1) both;transform-origin:bottom}
.jta-dashboard .jta-bar-chart i:nth-child(even){background:linear-gradient(#FF9A9A,#E3262B)}
.jta-dashboard .jta-task-card .jta-task{display:flex;align-items:center;gap:6px;margin-top:12px;font-size:9px;color:#4A5568}
.jta-dashboard .jta-task:before{content:'✓';font-weight:900;font-size:8px;color:#fff;background:#2fba9f;border-radius:50%;width:15px;height:15px;display:grid;place-items:center;flex:none}
.jta-dashboard .jta-concept{padding:8px 13px;background:#E8EAF7;color:#4A5568;font-size:9px;letter-spacing:.01em;text-align:center}
@keyframes jtaBars{from{transform:scaleY(.12)}to{transform:scaleY(1)}}
.jta-trust-strip{background:#F3F4FC!important;border-bottom:1px solid #E3E5F2}
.jta-trust-strip>div{gap:14px!important}
.jta-process .jta-info-card{border-radius:17px!important}
.jta-faq details{border-radius:13px;transition:background .3s}
.jta-faq details:hover{background:#F3F4FC}
.jta-faq summary:focus-visible{outline:3px solid #E3262B}
/* Don't hide information when JavaScript is disabled or blocked. */
html.jta-animations-enabled:not(.jta-reduced-motion) .jta-reveal-target:not(.jta-in-view){opacity:0;transform:translateY(22px)}
html.jta-animations-enabled .jta-reveal-target{transition:opacity .65s ease,transform .65s cubic-bezier(.2,.8,.2,1)}
html.jta-animations-enabled .jta-reveal-target.jta-in-view{opacity:1;transform:translateY(0)}
.jta-hero .jta-dashboard{animation:jtaFloat 7s ease-in-out infinite}
@keyframes jtaFloat{0%,100%{translate:0 0}50%{translate:0 -9px}}
@media(max-width:1200px){.jta-dashboard{transform:none!important}.jta-hero h1{font-size:clamp(32px,5vw,52px)!important}}
@media(max-width:760px){.jta-hero>div{padding-top:68px!important;padding-bottom:70px!important;gap:35px!important}.jta-section:not(.jta-hero){padding-top:65px!important;padding-bottom:65px!important}.jta-section h2{font-size:clamp(26px,7vw,39px)!important}.jta-section .jta-service-card{padding:28px!important;min-height:290px}.jta-section .jta-project-card{padding:10px 10px 24px}.jta-dashboard .jta-app-rail{width:42px}.jta-dashboard .jta-app-content{padding:12px}.jta-dashboard .jta-app-shell{min-height:250px}.jta-dashboard .jta-chart-card,.jta-dashboard .jta-task-card{padding:8px}.jta-project-cover{min-height:160px}}
@media(max-width:420px){.jta-dashboard .jta-app-rail{display:none}.jta-dashboard .jta-app-shell{min-height:240px}.jta-dashboard .jta-task-card{display:none}.jta-dashboard .jta-dashboard-bottom{grid-template-columns:1fr}.jta-dashboard .jta-app-heading b{font-size:12px}.jta-project-cover{padding:15px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important} html.jta-animations-enabled .jta-reveal-target{opacity:1!important;transform:none!important}.jta-hero .jta-dashboard{animation:none!important}}

/* Genuine portfolio images take over once successfully loaded; CSS previews remain safe fallbacks. */
.jta-project-cover .jta-project-actual{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2;border-radius:14px;opacity:0;transition:opacity .4s ease}
.jta-project-cover.jta-image-loaded .jta-project-actual{opacity:1}
.jta-project-cover .jta-project-label{z-index:3}