/* SHAPI V1.2.1 — approved luminous Jade Glass refinement.
   The live controls/cards are DOM objects; the woman's photo and real logo are unchanged. */
:root {--shapi-jade-glow:#36ffd0;--shapi-gold-light:#ffe18b}
html,body{overflow-x:clip}
.site-header{background:rgba(0,39,32,.94);border-bottom:1px solid rgba(86,255,195,.3);box-shadow:0 8px 28px rgba(0,23,18,.17)}
.site-header .brand img{filter:drop-shadow(0 0 6px rgba(43,255,205,.19))}
.shapi-v11-hero{min-height:628px;background:radial-gradient(ellipse 57% 76% at 77% 52%,#097e61 0%,#045b49 26%,#004436 55%,#002e25 81%,#00251e 100%);overflow:hidden}
.shapi-v11-hero:before{background:radial-gradient(ellipse at 65% 65%,rgba(54,255,203,.21),transparent 50%),radial-gradient(ellipse at 95% 70%,rgba(255,198,73,.14),transparent 56%);z-index:0}
.shapi-v11-hero:after{content:"";position:absolute;pointer-events:none;inset:auto -10% -45% 32%;height:72%;z-index:0;background:radial-gradient(ellipse,rgba(13,255,192,.18),transparent 68%);filter:blur(45px)}
.shapi-v11-hero .hero-inner{width:min(1520px,calc(100% - 66px));max-width:1520px;min-height:628px;grid-template-columns:minmax(450px,.78fr) minmax(0,1.22fr);gap:8px}
.shapi-v11-hero .hero-copy{padding:0 0 40px 8px;z-index:17}
.shapi-v11-hero h1{font-size:clamp(65px,5vw,86px);line-height:.97;margin:23px 0 22px;font-weight:550}
.shapi-v11-hero .hero-copy>p{font-size:19px;max-width:480px;line-height:1.47}
.shapi-v11-hero .hero-actions .btn{min-height:52px;font-size:15px}
.shapi-v11-hero .hero-proof{font-size:12px;gap:24px}
.shapi-flora{position:absolute;pointer-events:none;user-select:none;z-index:2;width:clamp(200px,23vw,340px);height:auto;opacity:.55;mask-image:linear-gradient(to right,black 20%,transparent 99%);-webkit-mask-image:linear-gradient(to right,black 20%,transparent 99%)}
.shapi-flora-upper{right:-55px;top:-108px;transform:scaleX(-1) rotate(5deg);opacity:.46;mask-image:linear-gradient(to left,black 22%,transparent 97%);-webkit-mask-image:linear-gradient(to left,black 22%,transparent 97%)}
.shapi-flora-lower{left:-83px;bottom:-65px;transform:rotate(-12deg);opacity:.48}
.stream-stage{height:590px;isolation:isolate;overflow:visible;max-width:880px;margin-left:auto;margin-right:auto}
.stream-stage:before{inset:8% -2% 2%;border-radius:45%;background:radial-gradient(ellipse at 48% 53%,rgba(24,255,186,.24),rgba(19,168,130,.16) 50%,transparent 75%);filter:blur(21px)}
.stream-stage:after,.hero-visual:before,.hero-visual:after{display:none!important}
.stream-stage .stream-aura{inset:13% 1% 8%;background:radial-gradient(ellipse at 53% 53%,rgba(21,255,194,.28),rgba(11,102,83,.12) 47%,transparent 74%);filter:blur(18px)}
.stream-stage .hero-woman{left:19%;width:65%;height:95%;bottom:-6px;z-index:5;filter:drop-shadow(0 22px 38px rgba(0,24,17,.55));object-fit:contain;object-position:center bottom}
.stream-stage .jade-stream{inset:0;width:100%;height:100%;filter:none;will-change:transform}
.stream-stage .ribbon-bloom{opacity:.83;stroke-width:52;filter:url(#jadeBloom)}
.stream-stage .ribbon-soft{opacity:.9;stroke-width:28;filter:url(#jadeSoft)}
.stream-stage .ribbon-core{stroke-width:6.5;filter:drop-shadow(0 0 10px #77ffda);animation:jade-current 6s linear infinite}
.stream-stage .ribbon-secondary{stroke-width:5;filter:drop-shadow(0 0 11px #41ffc4);animation:jade-current-back 9s linear infinite}
.stream-stage .ribbon-gold{stroke-width:3.7;filter:drop-shadow(0 0 9px #ffe48c);animation:jade-current 8s linear infinite}
.stream-stage .ribbon-spark{stroke-width:7;filter:drop-shadow(0 0 14px #fff4aa);animation:jade-current-back 6s linear infinite}
.stream-stage .front-bloom{stroke-width:36;opacity:.93}
.stream-stage .front-core{stroke-width:7.5}
.stream-stage .front-gold{stroke-width:3.2}
.stream-stage .stream-back{z-index:3}
.stream-stage .stream-front{z-index:7}
.stream-stage .stream-stars{z-index:8}
.stream-stage .ribbon-prisms{z-index:8}
.stream-stage .service-chip{z-index:14;border-radius:23px!important;max-width:none!important;max-height:none!important;width:114px;height:114px;opacity:1!important;box-shadow:inset 2px 3px 3px rgba(255,255,255,.58),inset -9px -12px 27px rgba(0,30,24,.23),0 20px 40px rgba(0,20,18,.52),0 0 22px rgba(66,255,200,.7)!important;transform:translate(-50%,-50%);backdrop-filter:none;isolation:isolate}
.stream-stage .service-chip:before{content:"";position:absolute;inset:5px;z-index:-1;border-radius:17px;border:1px solid rgba(255,255,255,.25);background:linear-gradient(138deg,rgba(255,255,255,.16),transparent 45%);pointer-events:none}
.stream-stage .service-chip small{font-size:13px!important;letter-spacing:-.015em;text-shadow:0 2px 6px rgba(1,31,21,.55)}
.stream-stage .chip-ico svg{width:42px;height:42px}
.stream-stage .service-chip[data-service=airtime],.stream-stage .service-chip[data-service=education]{background:linear-gradient(150deg,#3bffa9,#05b971 46%,#006f51)}
.stream-stage .service-chip[data-service=data],.stream-stage .service-chip[data-service=internet]{background:linear-gradient(150deg,#5cceff,#0879e5 52%,#023e88)}
.stream-stage .service-chip[data-service=electricity]{background:linear-gradient(145deg,#fff585,#ffbd00 47%,#b47700)}
.stream-stage .service-chip[data-service=cable]{background:linear-gradient(145deg,#d7a6ff,#9750ed 51%,#5421a7)}
/* Fallback positions follow the outer glowing river and never cover the portrait's face. */
.stream-stage .service-chip[data-service=airtime]{left:18%;top:25%}
.stream-stage .service-chip[data-service=data]{left:80%;top:20%}
.stream-stage .service-chip[data-service=electricity]{left:87%;top:51%}
.stream-stage .service-chip[data-service=cable]{left:79%;top:81%}
.stream-stage .service-chip[data-service=internet]{left:34%;top:84%}
.stream-stage .service-chip[data-service=education]{left:12%;top:54%}
/* Lighter approved jade and ivory service gallery, with QuickVault-style action clarity. */
.home-section{background:#fafffd}
.home-section .service-rail{grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.home-section .service-pill{display:flex;align-items:center;gap:10px;padding:17px 9px;border-radius:17px;background:#fff;box-shadow:0 11px 36px rgba(2,95,70,.07);text-align:left;transition:transform .2s,box-shadow .2s}
.home-section .service-pill .ico{margin:0}
.home-section .service-pill:hover{transform:translateY(-4px);box-shadow:0 17px 40px rgba(0,95,70,.13)}
.home-section .section-title{font-family:Georgia,'Times New Roman',serif}
.home-section .section-title em{color:#008a67}
/* Error and authentication screens belong to the same luminous Jade Glass design system. */
.auth-art{background:radial-gradient(ellipse at 60% 45%,#139f7a,#015846 65%,#003c31);}
.form-card{box-shadow:0 20px 70px rgba(6,109,80,.17)}
@media(max-width:1160px){
 .shapi-v11-hero .hero-inner{width:calc(100% - 40px);grid-template-columns:minmax(340px,.83fr) minmax(0,1.17fr)}
 .stream-stage{height:540px}
 .stream-stage .service-chip{width:91px;height:91px}
 .stream-stage .service-chip small{font-size:11px!important}
 .stream-stage .chip-ico svg{width:35px;height:35px}
}
@media(max-width:900px){
 .shapi-v11-hero .hero-inner{width:calc(100% - 34px);grid-template-columns:1fr;min-height:auto}
 .shapi-v11-hero .hero-copy{padding:34px 18px 0}
 .shapi-v11-hero h1{font-size:clamp(48px,8vw,76px)}
 .stream-stage{height:515px;width:min(760px,100%)}
 .shapi-v11-hero .hero-proof{display:flex}
 .home-section .service-rail{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:600px){
 .shapi-v11-hero{min-height:0}
 .shapi-v11-hero .hero-inner{width:100%;gap:0}
 .shapi-v11-hero .hero-copy{padding:28px 23px 0}
 .shapi-v11-hero h1{font-size:clamp(44px,12.1vw,68px);line-height:.98;margin:19px 0 16px}
 .shapi-v11-hero .hero-copy>p{font-size:15px;line-height:1.5}
 .shapi-v11-hero .hero-actions{grid-template-columns:1fr 1fr;gap:10px;margin:18px 0 8px}
 .shapi-v11-hero .hero-actions .btn{min-height:46px;font-size:12px;padding:0 8px}
 .shapi-v11-hero .hero-proof{display:none}
 .stream-stage{height:440px;width:100%;margin:0 auto 0;overflow:hidden}
 .stream-stage .hero-woman{left:15%;height:88%;width:73%;bottom:-4px}
 .stream-stage .jade-stream{top:1%;height:97%}
 .stream-stage .service-chip{width:77px!important;height:79px!important;padding:8px!important;border-width:1.8px;border-radius:17px!important}
 .stream-stage .chip-ico svg{width:29px;height:29px}
 .stream-stage .service-chip small{font-size:10px!important;white-space:normal;text-align:center;line-height:1.12}
 .shapi-flora{width:190px;opacity:.3}
 .shapi-flora-upper{top:-72px;right:-80px}
 .shapi-flora-lower{bottom:-90px;left:-105px}
 .home-section .service-rail{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
 .home-section .service-pill{padding:14px 9px;gap:8px;font-size:12px}
 .home-section .service-pill .ico{width:40px;height:40px}
 .v11-home-next{grid-template-columns:1fr}
}
@media(max-width:360px){
 .shapi-v11-hero h1{font-size:43px}
 .stream-stage{height:405px}
 .stream-stage .service-chip{width:70px!important;height:73px!important}
 .stream-stage .service-chip small{font-size:9px!important}
 .stream-stage .chip-ico svg{width:26px;height:26px}
}
@media(prefers-reduced-motion:reduce){
 .stream-stage .ribbon,.stream-stage .ribbon-prisms i,.stream-stage .stream-stars i{animation:none!important}
 .stream-stage .service-chip{transition:none!important}
}