/* Techsera cinematic 3D layer (bright / robotic) — loads after styles.css. Visuals only; no content changes. */
:root{--cin-teal:#2f8f77;--cin-line:rgba(20,47,84,.11);--cin-glass:linear-gradient(150deg,rgba(255,255,255,.93),rgba(236,246,242,.86));--display:Manrope,"Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,sans-serif;--body:"DM Sans","Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,sans-serif}
html{background:#f3f9f7;color-scheme:light}
html body{background:transparent!important;isolation:isolate}
::selection{background:#8ed1bc;color:#06182e}
:focus-visible{outline:2px solid #2f8f77!important;outline-offset:3px}

/* Scene + film layers */
.cin-scene{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.cin-fx{position:fixed;inset:0;z-index:900;pointer-events:none;overflow:hidden}
.cin-bar,.cin-streak{display:none}
.cin-home .cin-bar{display:block;position:absolute;left:0;right:0;height:50.5%;background:#eaf4f1;animation:cinBar .7s .05s cubic-bezier(.76,0,.18,1) both}
.cin-home .cin-bar.top{top:0;--d:-101%}.cin-home .cin-bar.bot{bottom:0;--d:101%}
.cin-home .cin-streak{display:block;position:absolute;left:-10%;right:-10%;top:42%;height:2px;background:linear-gradient(90deg,transparent,#2f8f77 50%,transparent);box-shadow:0 0 36px 8px rgba(47,143,119,.28);opacity:0;animation:cinStreak 1s .1s ease-out both}
@keyframes cinBar{to{transform:translateY(var(--d))}}
@keyframes cinStreak{0%{opacity:0;transform:scaleX(.1)}35%{opacity:1}100%{opacity:0;transform:scaleX(1.4)}}
@keyframes cinTitle{from{opacity:0;transform:perspective(900px) translate3d(0,24px,-280px) rotateX(18deg);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes cinRise{from{opacity:0;transform:translate3d(0,26px,0)}to{opacity:1;transform:none}}
.hero h1,.page-hero h1{animation:cinTitle .85s .08s cubic-bezier(.16,.8,.2,1) both;transform-origin:50% 100%}
.hero-copy>:not(h1),.page-hero-grid>div:first-child>:not(h1){animation:cinRise .65s cubic-bezier(.16,.8,.2,1) both;animation-delay:.25s}
.hero-copy>.actions,.page-hero-grid>div:first-child>.actions,.hero-copy>.promise{animation-delay:.38s}

/* Header */
.header{background:rgba(255,255,255,.95)!important;border-bottom:1px solid var(--cin-line)!important;box-shadow:0 10px 34px rgba(20,47,84,.08)}
.nav-cta{box-shadow:0 8px 24px rgba(20,47,84,.22)}

/* Sections: bright frosted layers over the 3D scene */
body .section,body .soft,body .services-preview,body .partner-strip,body .projects-preview,body .intro,body .approach,body .purpose-section,body main>section:nth-child(2){background:linear-gradient(180deg,rgba(255,255,255,.44),rgba(247,251,249,.54))!important}
body .section:nth-of-type(even),body .soft,body .services-preview,body .purpose-section{background:linear-gradient(180deg,rgba(234,244,240,.5),rgba(244,250,247,.58))!important}
.purpose-section .purpose-heading .kicker{color:#4b6a80!important}.purpose-section .purpose-heading .kicker i{background:var(--cin-teal)!important}

/* Heroes: all light, scene shows through */
.hero{background:transparent!important}
.hero:before{background:linear-gradient(90deg,rgba(246,251,249,.96) 0%,rgba(246,251,249,.88) 34%,rgba(246,251,249,0) 58%)!important}
.hero-background-video{opacity:1!important;filter:none!important;background:transparent!important}
.page-hero,.contact-hero,.quote-hero,.support-page .page-hero,.support-page .support-visual,.projects-page .page-hero,.services-page .page-hero,.partners-page .page-hero,.partners-page .partners-hero-image{background:radial-gradient(ellipse at 84% 16%,rgba(142,209,188,.28),transparent 58%),linear-gradient(180deg,rgba(255,255,255,.55),rgba(244,250,247,.7))!important;color:var(--navy)}
.about-page .page-hero{background-image:linear-gradient(90deg,rgba(247,251,249,.95) 0%,rgba(247,251,249,.86) 36%,rgba(247,251,249,0) 58%),url('assets/aboutpage-optimized.jpg')!important;background-size:cover!important;background-position:center!important}
.partners-page .page-hero:before{background:linear-gradient(90deg,rgba(247,251,249,.95) 0%,rgba(247,251,249,.86) 36%,rgba(247,251,249,0) 58%),url('assets/partner.jpg') 54% center/cover no-repeat!important}
.services-page .page-hero:before{background-image:linear-gradient(rgba(20,47,84,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(20,47,84,.05) 1px,transparent 1px)!important}
.support-page .support-visual:before{background:none!important}
.support-visual-label{background:rgba(255,255,255,.85)!important;color:var(--navy)!important}
.hero h1,.page-hero h1,.projects-page .page-hero h1,.contact-hero h1,.services-page .page-hero h1,.support-page .page-hero h1,.partners-page .page-hero h1{color:var(--navy)!important}
.hero h1 em,.page-hero h1 em,.contact-hero h1 em,.section h2 em,.section-head h2 em,.cta-inner h2 em,.purpose-card h3 em,.support-page .page-hero h1 em,.services-page .page-hero h1 em,.partners-page .page-hero h1 em{color:var(--cin-teal)!important}
.hero-copy>p,.page-hero-grid>div:first-child>p,.services-page .page-hero-grid>div:first-child>p,.support-page .page-hero-grid>div:first-child>p,.partners-page .page-hero-grid>div:first-child>p,.about-page .page-hero-grid>div:first-child>p,.projects-page .page-hero-grid>div:first-child>p,.contact-hero .page-hero-grid>div:first-child>p{color:#47607a!important}
.eyebrow,.eyebrow.dark,.services-page .eyebrow.dark,.support-page .eyebrow.dark,.partners-page .eyebrow.dark,.contact-hero .eyebrow.dark,.projects-page .eyebrow.dark{color:var(--cin-teal)!important}
.eyebrow i{background:var(--cin-teal)!important;box-shadow:0 0 0 5px rgba(47,143,119,.16)!important}
.quiet{color:var(--navy)!important}.quiet:hover{color:var(--cin-teal)!important}
.promise{color:#52677e!important}.promise span{background:var(--cin-teal)!important}
.kicker{color:#52677e}.kicker i{background:var(--cin-teal)!important}
.btn{background:var(--navy)!important;color:#fff!important;box-shadow:0 10px 30px rgba(20,47,84,.28)}.btn:hover{box-shadow:0 16px 44px rgba(47,143,119,.4)}
.outline-btn{border-color:rgba(20,47,84,.35)!important;color:var(--navy)!important}.outline-btn:hover{background:var(--navy)!important;color:#fff!important}
.contact-hero .outline-btn{color:var(--navy)!important}

/* Services hero visual in light */
.page-visual:before,.services-page .data-visual:before{background:linear-gradient(145deg,rgba(255,255,255,.85),rgba(222,242,235,.6))!important}
.services-page .data-tile,.data-tile{background:rgba(255,255,255,.9)!important;color:var(--navy)!important;border:1px solid var(--cin-line);box-shadow:0 14px 34px rgba(20,47,84,.14)}
.services-page .data-visual .visual-core,.visual-core{color:var(--navy)!important}.services-page .data-visual .visual-core span{color:var(--cin-teal)!important}
.page-visual .orbit,.services-page .data-visual .orbit{border-color:rgba(47,143,119,.35)!important}

/* 3D glass cards */
[data-cin-reveal]{--enter:1;opacity:0!important;transition:opacity .5s ease,transform .6s cubic-bezier(.16,.8,.2,1),box-shadow .4s!important;transition-delay:calc(var(--i,0)*30ms)!important}
[data-cin-reveal][data-cin-in]{--enter:0;opacity:1!important}
[data-cin-reveal]:not([data-cin-tilt]){transform:translate3d(0,calc(var(--enter)*22px),0)!important}
[data-cin-tilt]{transform:perspective(1100px) translate3d(0,calc(var(--enter)*34px),calc(var(--enter)*-110px + var(--lift,0)*34px)) rotateX(calc(var(--rx,0deg) + var(--enter)*10deg)) rotateY(var(--ry,0deg))!important;
 background:radial-gradient(520px circle at var(--mx,50%) var(--my,0%),rgba(142,209,188,.34),transparent 46%),var(--cin-glass)!important;border:1px solid var(--cin-line)!important;border-radius:14px!important;box-shadow:0 30px 60px rgba(20,47,84,.15),inset 0 1px 0 #fff!important;}
[data-cin-tilt][data-cin-ready]{transition:transform .28s cubic-bezier(.2,.7,.2,1),opacity .3s,box-shadow .3s!important;transition-delay:0s!important}
[data-cin-tilt]:hover{box-shadow:0 44px 80px rgba(20,47,84,.24),0 0 0 1px rgba(47,143,119,.5),inset 0 1px 0 #fff!important}
[data-cin-tilt].featured,[data-cin-tilt].wide{background:radial-gradient(520px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.7),transparent 50%),linear-gradient(145deg,#bfe8da,#e6f6f0)!important;border-color:rgba(47,143,119,.4)!important}
.service-card.featured,.detail-grid article.wide,.services-page .detail-grid article.wide,.detail-grid article.wide h3,.services-page .detail-grid article.wide h3,.service-card.featured h3{color:var(--navy)!important}
.service-card.featured p,.detail-grid .wide p,.services-page .detail-grid article.wide p{color:#3f5a70!important}
.service-card.featured>span,.services-page .detail-grid article.wide>span:not(.service-icon){color:var(--cin-teal)!important;background:transparent!important}
.service-card.featured>span b,.services-page .detail-grid article.wide .service-icon{background:#fff!important;color:var(--cin-teal)!important}
.services-page .detail-grid article.wide .service-icon svg{stroke:var(--cin-teal)!important}
.service-note{background:radial-gradient(520px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.55),transparent 50%),#8ed1bc!important}

/* Frames, bands, footer */
.abstract-scene,.project-stack,.page-visual.data-visual,.projects-hero-image,.support-visual-media{border-radius:18px;box-shadow:0 40px 90px rgba(20,47,84,.22),0 0 0 1px rgba(20,47,84,.08)}
.cta-band{background:linear-gradient(115deg,rgba(205,239,228,.92),rgba(238,248,244,.92))!important;color:var(--navy)!important;border-top:1px solid var(--cin-line);border-bottom:1px solid var(--cin-line)}
.cta-band h2,.cta-inner h2{color:var(--navy)!important}.cta-inner .kicker{color:#47607a!important}
.cta-band:after{opacity:.5}
.footer{background:linear-gradient(180deg,rgba(255,255,255,.78),rgba(226,241,236,.96))!important;color:#47607a!important;border-top:1px solid var(--cin-line);box-shadow:0 -24px 60px rgba(20,47,84,.06)}
.foot-top p,.foot-top>a:last-child,.foot-company-identity,.foot-company-identity strong,.foot-company-identity b{color:var(--navy)!important}.foot-company-identity span{color:#5f7488!important}
.foot-legal,.foot-legal span{color:#5f7488!important}.foot-legal a,.footer-cookie-settings{color:#47607a!important}.foot-legal a:hover,.footer-cookie-settings:hover{color:var(--navy)!important}
.footer *{border-color:var(--cin-line)!important}

/* Forms, cookie notice */
.quote-form{background:var(--cin-glass)!important;border:1px solid var(--cin-line)!important;border-radius:16px;box-shadow:0 36px 80px rgba(20,47,84,.16);}
.quote-form input,.quote-form select,.quote-form textarea{border-radius:8px;border:1px solid rgba(20,47,84,.18)!important}
.quote-form input:focus,.quote-form select:focus,.quote-form textarea:focus{border-color:var(--cin-teal)!important;box-shadow:0 0 0 3px rgba(47,143,119,.18);outline:0!important}
.cookie-banner{border-radius:14px;background:rgba(255,255,255,.94)!important;box-shadow:0 24px 70px rgba(20,47,84,.28)!important}
.whatsapp-float{box-shadow:0 10px 30px rgba(21,155,85,.45)!important}

/* Phones: bigger, brighter 3D scene; cards tilt in 3D with scroll */
@media(hover:none),(max-width:900px){
 .cin-scene{opacity:1}
 body .section,body .soft,body .services-preview,body .partner-strip,body .projects-preview,body .intro,body .approach,body .purpose-section,body main>section:nth-child(2){background:linear-gradient(180deg,rgba(255,255,255,.38),rgba(247,251,249,.48))!important}
 body .section:nth-of-type(even),body .soft,body .services-preview,body .purpose-section{background:linear-gradient(180deg,rgba(234,244,240,.42),rgba(244,250,247,.52))!important}
 [data-cin-tilt]{transform:perspective(720px) translate3d(0,calc(var(--enter)*44px),calc(var(--enter)*-130px + var(--lift,0)*30px)) rotateX(calc(var(--rx,0deg) + var(--enter)*14deg)) rotateY(var(--ry,0deg))!important;background:radial-gradient(360px circle at var(--mx,50%) var(--my,0%),rgba(142,209,188,.45),transparent 55%),linear-gradient(150deg,rgba(255,255,255,.93),rgba(236,246,242,.86))!important;box-shadow:0 26px 46px rgba(20,47,84,.22),inset 0 1px 0 #fff!important}
 [data-cin-tilt].featured,[data-cin-tilt].wide{background:radial-gradient(360px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.7),transparent 55%),linear-gradient(145deg,#bfe8da,#e6f6f0)!important}
 .hero:before{background:linear-gradient(180deg,rgba(246,251,249,.94) 0%,rgba(246,251,249,.86) 60%,rgba(246,251,249,.55) 100%)!important}
 .about-page .page-hero{background-image:linear-gradient(180deg,rgba(247,251,249,.93) 0%,rgba(247,251,249,.8) 55%,rgba(247,251,249,.1) 100%),url('assets/aboutpage-optimized.jpg')!important}
 .partners-page .page-hero:before{background:linear-gradient(180deg,rgba(247,251,249,.93) 0%,rgba(247,251,249,.8) 55%,rgba(247,251,249,.1) 100%),url('assets/partner.jpg') 54% center/cover no-repeat!important}
 .cin-home .cin-bar{animation-duration:1s}
}
@media(max-width:700px){.brand img{width:150px}}
@media(prefers-reduced-motion:reduce){.hero h1,.page-hero h1,.hero-copy>*,.page-hero-grid>div:first-child>*{animation:none!important}.cin-bar,.cin-streak{display:none!important}[data-cin-reveal]{opacity:1!important;transform:none!important;transition:none!important}.hero-copy,.page-hero-grid>div:first-child{transform:none!important;opacity:1!important}}

/* Page experience */
html{scroll-padding-top:96px}
.cin-progress{position:fixed;z-index:1200;top:0;left:0;width:100%;height:3px;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,#2f8f77,#8ed1bc);box-shadow:0 0 14px rgba(47,143,119,.6);z-index:5}
.header.cin-compact{box-shadow:0 14px 40px rgba(20,47,84,.16)}
.nav nav a.cin-active{color:var(--navy)!important;box-shadow:inset 0 -2px 0 var(--cin-teal)}
.cin-top{position:fixed;left:20px;bottom:22px;z-index:14;width:46px;height:46px;border-radius:50%;border:1px solid var(--cin-line);background:rgba(255,255,255,.9);color:var(--navy);font:700 20px/1 var(--body);cursor:pointer;box-shadow:0 12px 30px rgba(20,47,84,.2);opacity:0;transform:translateY(14px) scale(.9);pointer-events:none;transition:opacity .3s,transform .3s}
.cin-top.show{opacity:1;transform:none;pointer-events:auto}.cin-top:hover{background:var(--navy);color:#fff}
main{animation:cinEnter .3s ease-out both}
@keyframes cinEnter{from{opacity:0}to{opacity:1}}
html.cin-leave main{opacity:0;transition:opacity .16s ease}
.btn,.nav-cta,.outline-btn{transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s,background .25s,color .25s}
.btn:hover,.nav-cta:hover,.outline-btn:hover{transform:translateY(-3px) scale(1.03)}
@media(prefers-reduced-motion:reduce){main{animation:none}.cin-progress{transition:none}}

@property --rx{syntax:'<angle>';inherits:false;initial-value:0deg}
@property --ry{syntax:'<angle>';inherits:false;initial-value:0deg}
@property --lift{syntax:'<number>';inherits:false;initial-value:0}
@property --enter{syntax:'<number>';inherits:false;initial-value:0}
@property --mx{syntax:'<percentage>';inherits:false;initial-value:50%}
@property --my{syntax:'<percentage>';inherits:false;initial-value:0%}
@property --home-tilt{syntax:'<angle>';inherits:false;initial-value:0deg}
@property --home-turn{syntax:'<angle>';inherits:false;initial-value:0deg}
@property --home-z{syntax:'<length>';inherits:false;initial-value:0px}
@property --scroll-tilt{syntax:'<angle>';inherits:false;initial-value:0deg}
@property --scroll-shift{syntax:'<length>';inherits:false;initial-value:0px}
@property --pointer-x{syntax:'<angle>';inherits:false;initial-value:0deg}
@property --pointer-y{syntax:'<angle>';inherits:false;initial-value:0deg}
/* Smooth scrolling: no blur-behind (it re-blurs on every frame), canvas on its own layer */
*,*::before,*::after{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.cin-scene{transform:translateZ(0);contain:strict}
.cin-progress,.cin-top{contain:layout paint}

/* Pictures & videos: show a soft placeholder until the first frame arrives, then fade in */
@keyframes cinShimmer{to{background-position:-220% 0}}
.cin-loading{background:linear-gradient(110deg,#e3f0eb 30%,#f6fbf9 48%,#e3f0eb 66%) 0 0/220% 100%!important;animation:cinShimmer 1.2s linear infinite}
img{transition:opacity .25s ease}
img.cin-wait{opacity:0!important}
/* snappier interactions */
.nav nav a:not(.nav-cta){transition:color .2s,box-shadow .25s}.nav nav a:not(.nav-cta):hover{box-shadow:inset 0 -2px 0 var(--cin-teal)}
.foot-legal a,.text-cta,.footer a{transition:color .2s,transform .2s}.text-cta:hover{transform:translateX(4px)}
@media(prefers-reduced-motion:reduce){.cin-loading{animation:none}img{transition:none}}

/* ===== Loading screen: instant, branded, short. Shown once per visit; skipped when moving between pages. ===== */
html::before{content:"";position:fixed;inset:0;z-index:2000;
 background:url(assets/techsera.png) center calc(50% - 28px)/min(170px,44vw) auto no-repeat,
  radial-gradient(ellipse at 50% 38%,#fff 0%,#e9f5f0 55%,#dbeee6 100%);
 animation:cinLoaderOut .01s 6s forwards}
html::after{content:"";position:fixed;z-index:2001;left:50%;top:calc(50% - 28px);width:min(240px,60vw);aspect-ratio:1;border-radius:50%;
 border:2px solid rgba(47,143,119,.16);border-top-color:#2f8f77;border-right-color:rgba(47,143,119,.5);
 transform:translate(-50%,-50%);animation:cinSpin 1.1s linear infinite,cinLoaderOut .01s 6s forwards}
@keyframes cinSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes cinLoaderOut{to{opacity:0;visibility:hidden}}
html.cin-ready::before,html.cin-ready::after{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .5s ease,visibility 0s .5s}
html.cin-ready::after{animation:none;transform:translate(-50%,-50%) scale(1.5);transition:opacity .5s ease,transform .5s ease,visibility 0s .5s}
html.cin-skip::before,html.cin-skip::after{display:none!important}
html:not(.cin-ready):not(.cin-skip){overflow:hidden}
/* page animations wait until the loader lifts, so nothing plays unseen */
html:not(.cin-ready) body *{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){html::after{animation:none}html.cin-ready::before,html.cin-ready::after{transition:none}}