/* ================================================================
   BTG-TECH HOLDINGS WEBSITE STYLES
   Colour palette, layout, animation and responsive rules are kept
   in this single file so the site is easy to maintain and deploy.
   ================================================================ */

/* Brand colours and reusable design values */
:root{--navy:#071524;--blue:#0b6cff;--cyan:#12d7d0;--ice:#eaf7fa;--ink:#102234;--muted:#607181;--line:#dbe7ec;--shadow:0 24px 60px rgba(4,25,43,.14)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:#fff;color:var(--ink);font-family:Arial,Helvetica,sans-serif;line-height:1.6}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}.container{width:min(1180px,calc(100% - 40px));margin-inline:auto}.topbar{background:#06111d;color:#9eb1bf;font-size:12px;letter-spacing:.03em}.topbar-inner{height:35px;display:flex;justify-content:space-between;align-items:center}.topbar a:hover{color:var(--cyan)}.dot{margin:0 12px;color:#345166}.site-header{height:82px;background:rgba(7,21,36,.95);position:sticky;top:0;z-index:50;border-bottom:1px solid rgba(255,255,255,.08);backdrop-filter:blur(14px);transition:.3s}.scrolled .site-header{box-shadow:0 12px 30px rgba(0,0,0,.16)}.navbar{height:100%;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:12px;color:#fff}.brand-mark{width:45px;height:45px;display:grid;place-items:center;font-weight:900;letter-spacing:-.08em;color:#061b2d;background:linear-gradient(135deg,var(--cyan),#74f1ff);clip-path:polygon(14% 0,100% 0,86% 100%,0 100%)}.brand strong,.brand small{display:block}.brand strong{font-size:16px;letter-spacing:.12em}.brand small{font-size:9px;text-transform:uppercase;letter-spacing:.26em;color:#7f9aaa}.nav-links{display:flex;align-items:center;gap:30px;color:#c7d4dc;font-size:14px;font-weight:700}.nav-links>a:not(.nav-cta){position:relative;padding:29px 0}.nav-links>a:not(.nav-cta)::after{content:"";position:absolute;left:0;right:100%;bottom:20px;height:2px;background:var(--cyan);transition:.25s}.nav-links>a:hover{color:#fff}.nav-links>a:hover::after{right:0}.nav-cta{padding:12px 18px;border:1px solid rgba(18,215,208,.55);color:#fff}.nav-cta:hover{background:var(--cyan);color:var(--navy)}.menu-button{display:none;background:none;border:0;width:44px;height:44px;padding:10px}.menu-button span{display:block;height:2px;background:white;margin:6px 0}
.hero{min-height:760px;position:relative;display:flex;align-items:center;overflow:hidden;background:#071524;color:#fff}.hero-visuals,.hero-overlay,.tech-grid{position:absolute;inset:0}.hero-slide{position:absolute;inset:0;opacity:0;animation:heroSlide 18s infinite;transform:scale(1.04)}.slide-one{opacity:1;background:radial-gradient(circle at 78% 42%,rgba(18,215,208,.35),transparent 18%),linear-gradient(115deg,transparent 42%,rgba(23,103,154,.22)),repeating-linear-gradient(90deg,transparent 0 42px,rgba(78,206,241,.04) 43px),linear-gradient(125deg,#05111f 0%,#0b2b44 72%,#006d7c 140%)}.slide-two{animation-delay:6s;background:radial-gradient(circle at 77% 55%,rgba(11,108,255,.45),transparent 15%),conic-gradient(from 210deg at 76% 50%,transparent,#0aa9b422,transparent,#1b7ee955),linear-gradient(125deg,#05111f,#10233c)}.slide-three{animation-delay:12s;background:radial-gradient(ellipse at 80% 30%,rgba(63,235,211,.3),transparent 24%),repeating-radial-gradient(circle at 82% 50%,transparent 0 35px,rgba(80,214,255,.07) 36px 38px),linear-gradient(125deg,#05111f,#12314b)}@keyframes heroSlide{0%{opacity:0;transform:scale(1.06)}5%,31%{opacity:1}36%,100%{opacity:0;transform:scale(1)}}.hero-overlay{background:linear-gradient(90deg,rgba(4,15,27,.98) 0%,rgba(5,19,33,.9) 46%,rgba(4,18,31,.25) 78%,rgba(4,18,31,.65) 100%)}.tech-grid{opacity:.28;background-image:linear-gradient(rgba(55,210,232,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(55,210,232,.08) 1px,transparent 1px);background-size:58px 58px;mask-image:linear-gradient(90deg,transparent 45%,black)}.hero-content{position:relative;z-index:2;padding:100px 0 80px}.eyebrow,.section-kicker{text-transform:uppercase;font-size:12px;font-weight:800;letter-spacing:.22em;color:#00d9d2;display:flex;align-items:center;gap:10px}.eyebrow span{width:34px;height:1px;background:var(--cyan)}.hero h1{font-size:clamp(56px,7vw,92px);line-height:.96;letter-spacing:-.055em;margin:22px 0 30px;max-width:850px}.hero h1 em,.section h2 em{font-style:normal;color:var(--cyan)}.hero-copy{max-width:650px;color:#b5c7d2;font-size:18px;line-height:1.8}.hero-actions{display:flex;gap:14px;margin-top:38px}.button{display:inline-flex;justify-content:center;align-items:center;gap:28px;padding:15px 22px;border:1px solid transparent;font-size:14px;font-weight:800;cursor:pointer;transition:.25s}.primary{background:linear-gradient(135deg,var(--cyan),#43e5e1);color:#062031;box-shadow:0 10px 30px rgba(18,215,208,.18)}.primary:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(18,215,208,.28)}.ghost{border-color:rgba(255,255,255,.25);color:#fff}.ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}.hero-proof{display:flex;margin-top:70px}.hero-proof div{padding:0 34px;border-left:1px solid rgba(255,255,255,.16)}.hero-proof div:first-child{padding-left:0;border:0}.hero-proof strong,.hero-proof span{display:block}.hero-proof strong{font-size:19px}.hero-proof span{font-size:11px;color:#8298a7;text-transform:uppercase;letter-spacing:.13em}.scroll-cue{position:absolute;right:38px;bottom:34px;z-index:3;display:flex;flex-direction:column;align-items:center;color:#76909f;font-size:9px;text-transform:uppercase;letter-spacing:.2em}.scroll-cue i{height:45px;width:1px;margin-top:10px;background:linear-gradient(var(--cyan),transparent)}.trust-strip{background:#fff;border-bottom:1px solid var(--line)}.trust-inner{min-height:90px;display:flex;align-items:center;justify-content:space-around;text-transform:uppercase;font-weight:800;font-size:12px;letter-spacing:.18em;color:#607687}.trust-inner i{width:4px;height:4px;background:var(--cyan);transform:rotate(45deg)}
.section{padding:110px 0}.about-grid,.why-grid,.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:center}.about-art{height:570px;position:relative}.art-panel{height:100%;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#fff;background:radial-gradient(circle at center,rgba(18,215,208,.2),transparent 30%),repeating-radial-gradient(circle,transparent 0 45px,rgba(18,215,208,.06) 46px 47px),linear-gradient(145deg,#061421,#0c3148);box-shadow:var(--shadow)}.art-panel:before,.art-panel:after{content:"";position:absolute;width:190px;height:190px;border:1px solid rgba(18,215,208,.18);transform:rotate(45deg)}.art-panel:after{width:300px;height:300px}.art-panel strong{font-size:95px;letter-spacing:-.09em;color:transparent;-webkit-text-stroke:1px rgba(89,235,234,.6)}.art-panel small{letter-spacing:.28em;color:#8eb7c1}.code-line{position:absolute;height:2px;background:linear-gradient(90deg,transparent,var(--cyan),transparent);opacity:.45}.l1{width:70%;top:20%;left:10%}.l2{width:45%;right:5%;bottom:25%}.l3{height:50%;width:1px;left:18%;top:12%}.experience-card{position:absolute;right:-35px;bottom:-30px;width:235px;padding:24px;background:var(--cyan);color:#062031;box-shadow:0 20px 50px rgba(2,41,52,.2)}.experience-card b,.experience-card strong,.experience-card span{display:block}.experience-card b{text-transform:uppercase;letter-spacing:.14em;font-size:10px}.experience-card strong{font-size:27px}.experience-card span{font-size:12px;margin-top:4px}.section-kicker{margin:0 0 15px}.section h2{font-size:clamp(38px,4vw,56px);line-height:1.08;letter-spacing:-.045em;margin:0 0 28px}.section-copy>p:not(.section-kicker),.contact-details>p:not(.section-kicker){color:var(--muted)}.lead{font-size:18px!important;color:#344f62!important}.mission-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:36px}.mission-grid article{border-top:2px solid var(--cyan);padding-top:18px}.mission-grid article>span{font-size:10px;color:#00a8a1;font-weight:900}.mission-grid h3{font-size:17px;margin:8px 0}.mission-grid p{font-size:13px;color:var(--muted);margin:0}
.services{background:var(--navy);color:#fff}.section-heading{display:flex;justify-content:space-between;gap:60px;align-items:flex-end;margin-bottom:52px}.section-heading>div{max-width:700px}.section-heading>p{max-width:380px;color:#8da2b1}.service-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(255,255,255,.1);border-left:1px solid rgba(255,255,255,.1)}.service-card{min-height:310px;padding:32px;position:relative;border-right:1px solid rgba(255,255,255,.1);border-bottom:1px solid rgba(255,255,255,.1);transition:.3s}.service-card:hover{background:#0e2a41;transform:translateY(-4px);box-shadow:inset 0 3px var(--cyan)}.service-number{position:absolute;right:24px;top:20px;color:#456071;font-size:11px}.service-icon{width:54px;height:54px;display:grid;place-items:center;border:1px solid rgba(18,215,208,.35);color:var(--cyan);font-size:11px;font-weight:900}.service-card h3{font-size:20px;margin:23px 0 10px}.service-card p{color:#91a6b3;font-size:14px}.service-card a{position:absolute;bottom:25px;color:var(--cyan);font-weight:800;font-size:12px}.service-card a span{margin-left:8px}.why{background:#f3f8fa}.capability-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:35px}.capability-grid div{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:700}.capability-grid span{width:23px;height:23px;display:grid;place-items:center;border-radius:50%;background:#d7f7f5;color:#008b86;font-size:11px}.process{background:white;box-shadow:var(--shadow)}.process article{padding:28px 32px;display:flex;gap:24px;border-bottom:1px solid var(--line)}.process article:last-child{border:0}.process>article>span{font-size:11px;font-weight:900;color:#00aaa4;padding-top:5px}.process h3{margin:0 0 4px}.process p{color:var(--muted);margin:0;font-size:14px}.cta-band{padding:55px 0;background:linear-gradient(105deg,#00bfb8,#30e1da);color:#042035}.cta-band .container{display:flex;align-items:center;justify-content:space-between}.cta-band p{margin:0;text-transform:uppercase;font-size:11px;font-weight:900;letter-spacing:.18em}.cta-band h2{font-size:42px;line-height:1;margin:8px 0 0;letter-spacing:-.04em}.light-button{background:#fff;color:#082336}.light-button:hover{transform:translateY(-2px);box-shadow:0 15px 30px rgba(3,42,54,.15)}
.contact{background:#fff}.contact-grid{align-items:start}.contact-details{padding-top:15px}.contact-list{margin-top:32px}.contact-list a{display:flex;align-items:center;gap:18px;padding:17px 0;border-bottom:1px solid var(--line)}.contact-list a>span{width:42px;height:42px;display:grid;place-items:center;background:var(--ice);color:#009c96;font-size:9px;font-weight:900}.contact-list small,.contact-list strong{display:block}.contact-list small{font-size:10px;text-transform:uppercase;letter-spacing:.13em;color:#8998a4}.contact-list strong{font-size:15px}.contact-list a:hover strong{color:#009c96}.socials{display:flex;gap:9px;margin-top:27px}.socials a{width:40px;height:40px;display:grid;place-items:center;background:var(--navy);color:white;font-weight:900;font-size:12px}.socials a:hover{background:var(--cyan);color:var(--navy)}.form-card{background:#071a2b;color:#fff;padding:45px;box-shadow:var(--shadow)}.form-heading span{text-transform:uppercase;letter-spacing:.2em;color:var(--cyan);font-size:10px;font-weight:900}.form-heading h3{font-size:31px;margin:5px 0 28px}.form-card label{display:block;color:#a9bac5;font-size:11px;text-transform:uppercase;letter-spacing:.1em;margin-bottom:16px}.field-row{display:grid;grid-template-columns:1fr 1fr;gap:15px}.form-card input:not([type=checkbox]),.form-card select,.form-card textarea{width:100%;margin-top:7px;color:#fff;background:#0d2a40;border:1px solid #26435a;outline:0;padding:13px 14px;letter-spacing:0;text-transform:none}.form-card input:focus,.form-card select:focus,.form-card textarea:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(18,215,208,.1)}.form-card textarea{resize:vertical}.consent{display:flex!important;align-items:flex-start;gap:9px;text-transform:none!important;letter-spacing:0!important}.consent input{accent-color:var(--cyan);margin-top:4px}.submit{width:100%;border:0}.submit:disabled{opacity:.65;cursor:wait}.form-status{min-height:20px;margin:12px 0 0;color:#ffcb8a;font-size:12px}.form-status.success{color:#77efb3}.map-section{height:430px;position:relative}.map-section iframe{border:0;width:100%;height:100%;filter:saturate(.65) contrast(1.05)}.map-card{position:absolute;left:max(20px,calc((100% - 1180px)/2));top:70px;background:#fff;padding:28px 32px;box-shadow:var(--shadow);min-width:330px}.map-card span{font-size:10px;text-transform:uppercase;color:#00a8a1;font-weight:900;letter-spacing:.16em}.map-card strong{display:block;font-size:18px;margin-top:6px}.map-card p{font-size:13px;color:var(--muted)}.map-card a{font-size:12px;font-weight:900;color:#008f89}
footer{background:#06111d;color:#9aaeba}.footer-main{padding:70px 0 55px;display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:50px}.footer-brand{margin-bottom:20px}.footer-main>div>p{font-size:13px;max-width:280px}.footer-main h4{color:#fff;font-size:12px;text-transform:uppercase;letter-spacing:.14em;margin:5px 0 20px}.footer-main>div>a:not(.brand){display:block;font-size:13px;margin:9px 0}.footer-main>div>a:hover{color:var(--cyan)}.footer-bottom{border-top:1px solid #1a2b38;padding:20px 0;display:flex;justify-content:space-between;font-size:11px}.whatsapp-float{position:fixed;right:24px;bottom:22px;z-index:40;background:#17c874;color:#042617;display:flex;align-items:center;gap:10px;padding:9px 14px 9px 9px;box-shadow:0 12px 30px rgba(0,0,0,.2);border-radius:30px;font-size:11px}.whatsapp-float span{width:33px;height:33px;border-radius:50%;display:grid;place-items:center;background:#fff;font-weight:900}.whatsapp-float:hover{transform:translateY(-2px)}
@media(max-width:980px){.topbar{display:none}.site-header{top:0}.menu-button{display:block}.nav-links{position:absolute;left:0;right:0;top:82px;background:#071524;padding:18px 20px 28px;display:none;flex-direction:column;align-items:stretch;gap:0;border-top:1px solid #223648}.nav-links.open{display:flex}.nav-links>a:not(.nav-cta){padding:13px 0}.nav-links>a:not(.nav-cta)::after{display:none}.nav-cta{margin-top:10px;text-align:center}.hero{min-height:700px}.about-grid,.why-grid,.contact-grid{grid-template-columns:1fr;gap:65px}.about-art{max-width:650px}.service-grid{grid-template-columns:repeat(2,1fr)}.section-heading{align-items:flex-start}.footer-main{grid-template-columns:1fr 1fr}.contact-details{max-width:700px}}
@media(max-width:640px){.container{width:min(100% - 28px,1180px)}.brand strong{font-size:13px}.brand small{font-size:8px}.brand-mark{width:40px;height:40px}.hero{min-height:720px}.hero-content{padding:75px 0 70px}.hero h1{font-size:49px}.hero-copy{font-size:16px}.hero-actions{flex-direction:column;align-items:stretch}.hero-proof{margin-top:50px;justify-content:space-between}.hero-proof div{padding:0 12px}.hero-proof strong{font-size:14px}.hero-proof span{font-size:8px}.scroll-cue{display:none}.trust-inner{overflow:hidden;justify-content:flex-start;gap:24px;white-space:nowrap}.section{padding:75px 0}.section h2{font-size:38px}.about-art{height:410px}.art-panel strong{font-size:70px}.experience-card{right:-4px;bottom:-25px;width:200px}.mission-grid,.service-grid,.capability-grid,.field-row{grid-template-columns:1fr}.section-heading{display:block}.section-heading>p{margin-top:20px}.service-card{min-height:290px}.cta-band .container{display:block}.cta-band h2{font-size:35px}.cta-band .button{margin-top:25px}.form-card{padding:30px 20px}.map-card{left:14px;right:14px;min-width:0;top:50px}.footer-main{grid-template-columns:1fr;gap:28px}.footer-bottom{display:block}.footer-bottom span{display:block;margin:5px 0}.whatsapp-float b{display:none}.whatsapp-float{padding-right:9px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}

/* JavaScript-powered reveal animation and validation feedback */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.reveal.visible{opacity:1;transform:none}
.field-error{display:block;min-height:16px;margin-top:3px;color:#ff9e9e;font-size:10px;text-transform:none;letter-spacing:0}
.form-card input:invalid:not(:placeholder-shown),.form-card textarea:invalid:not(:placeholder-shown){border-color:#e67878}

/* Keep content visible for visitors who prefer reduced motion */
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}

/* Embedded Google Map section displayed directly on the website */
.location-section{padding-top:90px;background:#f3f8fa}
.location-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:50px;padding-bottom:38px}
.location-heading h2{max-width:650px;margin:0;font-size:clamp(36px,4vw,54px);line-height:1.08;letter-spacing:-.045em}
.location-heading h2 em{font-style:normal;color:#00a8a1}
.location-heading address{display:flex;align-items:center;gap:16px;min-width:370px;padding:20px 24px;background:#fff;box-shadow:0 14px 35px rgba(4,25,43,.1);font-style:normal;color:var(--muted)}
.location-heading address i{display:grid;place-items:center;width:46px;height:46px;flex:0 0 46px;background:var(--navy);color:var(--cyan);border-radius:50%}
.location-heading address strong{color:var(--ink)}
.map-embed{height:520px;background:#dbe7ec;overflow:hidden;border-top:4px solid var(--cyan)}
.map-embed iframe{display:block;width:100%;height:100%;filter:saturate(.82) contrast(1.03)}

@media(max-width:800px){
  .location-section{padding-top:65px}
  .location-heading{display:block}
  .location-heading address{min-width:0;margin-top:25px}
  .map-embed{height:430px}
}

/* ================================================================
   CONTACT SECTION VISUAL UPGRADE
   A slow moving light effect replaces the plain white background.
   The animation is intentionally subtle and disables automatically
   for visitors who prefer reduced motion.
   ================================================================ */
.contact{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  color:#fff;
  background:
    linear-gradient(rgba(6,21,36,.88),rgba(6,21,36,.94)),
    linear-gradient(120deg,#071524 0%,#0a3b54 48%,#075b68 100%);
}
.contact::before,.contact::after{
  content:"";
  position:absolute;
  z-index:-1;
  width:520px;
  height:520px;
  border-radius:50%;
  filter:blur(12px);
  opacity:.34;
  pointer-events:none;
}
.contact::before{
  top:-220px;
  left:-130px;
  background:radial-gradient(circle,rgba(18,215,208,.85),transparent 68%);
  animation:contactGlowOne 10s ease-in-out infinite alternate;
}
.contact::after{
  right:-170px;
  bottom:-250px;
  background:radial-gradient(circle,rgba(11,108,255,.75),transparent 68%);
  animation:contactGlowTwo 12s ease-in-out infinite alternate;
}
.contact .contact-grid{position:relative;z-index:1}
.contact .contact-details>p:not(.section-kicker){color:#b8ced9}
.contact .contact-details h2{color:#fff}
.contact .contact-list a{border-color:rgba(255,255,255,.15);transition:background .25s,padding .25s}
.contact .contact-list a:hover{padding-left:12px;background:rgba(255,255,255,.05)}
.contact .contact-list a>span{background:rgba(18,215,208,.13);color:#67f2eb;border:1px solid rgba(18,215,208,.25)}
.contact .contact-list small{color:#82a2b2}
.contact .contact-list strong{color:#fff}
.contact .socials a{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.13)}
.contact .socials a:hover{background:var(--cyan);border-color:var(--cyan)}
.contact .form-card{background:rgba(6,25,41,.82);border:1px solid rgba(92,225,224,.18);backdrop-filter:blur(16px);box-shadow:0 32px 80px rgba(0,0,0,.32)}

@keyframes contactGlowOne{
  from{transform:translate3d(-30px,-20px,0) scale(.9);opacity:.2}
  to{transform:translate3d(160px,130px,0) scale(1.2);opacity:.46}
}
@keyframes contactGlowTwo{
  from{transform:translate3d(20px,40px,0) scale(1);opacity:.2}
  to{transform:translate3d(-160px,-110px,0) scale(1.25);opacity:.42}
}

@media(prefers-reduced-motion:reduce){
  .contact::before,.contact::after{animation:none}
}

/* ================================================================
   DIRECTOR PROFILE
   The portrait uses a responsive circular frame with a double-ring
   brand treatment. object-position keeps the face well centred.
   ================================================================ */
.director-profile{
  display:flex;
  align-items:center;
  gap:24px;
  margin-top:40px;
  padding:24px;
  background:linear-gradient(135deg,#f6fbfc,#e8f8f8);
  border:1px solid #d6ebed;
  box-shadow:0 16px 34px rgba(4,25,43,.09);
}
.director-photo-frame{
  position:relative;
  flex:0 0 128px;
  width:128px;
  height:128px;
  padding:5px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--cyan),#0b6cff);
  box-shadow:0 0 0 7px rgba(18,215,208,.12),0 14px 30px rgba(4,42,57,.2);
}
.director-photo-frame::after{
  content:"";
  position:absolute;
  inset:-10px;
  border:1px solid rgba(11,108,255,.2);
  border-radius:50%;
}
.director-photo-frame img{
  display:block;
  width:100%;
  height:100%;
  border:4px solid #fff;
  border-radius:50%;
  object-fit:cover;
  object-position:center 42%;
}
.director-details>span{font-size:10px;font-weight:900;letter-spacing:.18em;text-transform:uppercase;color:#009f99}
.director-details h3{margin:4px 0 0;font-size:24px;color:var(--ink)}
.director-details p{margin:1px 0 10px!important;font-size:13px;color:var(--muted)!important}
.director-details a{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:800;color:#0872a9}
.director-details a:hover{color:#009f99}

@media(max-width:520px){
  .director-profile{display:block;text-align:center;padding:28px 18px}
  .director-photo-frame{margin:0 auto 20px}
  .director-details a{justify-content:center}
}