:root{
--bg:#020914;--bg2:#061322;--panel:#071827;--blue:#008cff;--cyan:#00c8ff;
--white:#f5f9ff;--muted:#a3b4c6;--line:rgba(0,153,255,.45);--max:1220px
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--white);background:var(--bg);font-family:Arial,Helvetica,sans-serif;overflow-x:hidden}
body:before{
content:"";position:fixed;inset:0;z-index:-5;pointer-events:none;
background:
linear-gradient(90deg,rgba(1,7,14,.72) 0%,rgba(1,7,14,.38) 45%,rgba(1,7,14,.58) 100%),
url("assets/tech2host-digital-tunnel.png") center center/cover no-repeat;
}
body:after{
content:"";position:fixed;inset:0;z-index:-4;pointer-events:none;
background:
linear-gradient(180deg,rgba(0,7,14,.45) 0%,transparent 35%,rgba(0,5,10,.58) 100%),
radial-gradient(ellipse at 70% 50%,transparent 15%,rgba(0,5,12,.18) 72%);
}
.container{width:min(calc(100% - 40px),var(--max));margin:auto}
.site-header{height:76px;position:sticky;top:0;z-index:100;background:rgba(1,7,14,.88);backdrop-filter:blur(14px);border-bottom:1px solid rgba(0,153,255,.3)}
.nav-wrap{height:100%;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;text-decoration:none;color:#fff}.brand-mark{font-size:34px;color:#00aaff;text-shadow:0 0 18px #007cff;margin-right:8px}.brand-word{font-size:25px;font-weight:900;font-style:italic;line-height:.85}.brand-word>span{color:#009cff}.brand-word small{display:block;font-size:7px;font-style:normal;letter-spacing:1.3px;color:#b4c7d9;margin-top:6px}
.nav{display:flex;align-items:center;gap:32px}.nav a{color:#e5edf5;text-decoration:none;font-size:13px}.nav a:hover,.nav a.active{color:#00c8ff}.quote-btn{padding:11px 20px;border:1px solid #00c8ff;border-radius:30px;box-shadow:0 0 17px rgba(0,170,255,.18);font-weight:bold}.quote-btn b{color:#00c8ff;margin-left:7px}.menu-btn{display:none;background:none;border:0;color:#fff;font-size:26px}

.hero{
min-height:620px;position:relative;overflow:hidden;border-bottom:1px solid rgba(0,153,255,.3);
background:
linear-gradient(90deg,rgba(1,7,14,.94) 0%,rgba(1,7,14,.72) 42%,rgba(1,7,14,.22) 72%,rgba(1,7,14,.38) 100%),
url("assets/tech2host-digital-tunnel.png") center center/cover no-repeat;
}
.hex-layer{display:none}.hex-b{display:none}
.hero-glow{position:absolute;width:650px;height:420px;right:-80px;top:80px;
background:radial-gradient(circle,rgba(0,180,255,.10),transparent 68%);
filter:blur(18px);opacity:.65}
.hero-grid{min-height:620px;display:grid;grid-template-columns:1fr 1fr;align-items:center;position:relative;z-index:2}.hero-copy{padding:55px 0}.kicker{font-size:11px;letter-spacing:4px;color:#00bff7;font-weight:bold;margin-bottom:10px}.hero h1{font-size:clamp(52px,6vw,78px);line-height:.92;margin:0 0 12px;letter-spacing:-3px}.hero h1 span{color:#009cff;text-shadow:0 0 24px rgba(0,153,255,.3)}.hero h2{font-size:21px;margin:0 0 10px}.hero-copy>p{font-size:17px;color:#c0ccd7;max-width:610px;margin:0}.hero-actions{display:flex;gap:18px;margin:26px 0}.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:28px;padding:13px 26px;color:#fff;text-decoration:none;font-size:12px;font-weight:bold;border:1px solid #00aaff;cursor:pointer}.btn.primary{background:linear-gradient(100deg,#00b6ff,#0076ff);box-shadow:0 0 25px rgba(0,139,255,.28)}.btn.ghost{background:rgba(0,8,17,.55)}.btn:hover{transform:translateY(-2px)}.hero-points{display:flex;gap:30px;color:#d2deea;font-size:12px}.hero-points span{color:#00c8ff;font-size:22px;vertical-align:middle;margin-right:6px}

.hero-tech{height:530px;position:relative}.orb{position:absolute;width:520px;height:520px;right:-50px;top:0;border-radius:50%;background:radial-gradient(circle,rgba(0,145,255,.18),transparent 58%);filter:blur(1px)}.laptop{position:absolute;width:500px;right:0;top:145px;transform:rotate(-4deg);filter:drop-shadow(0 22px 25px rgba(0,0,0,.6))}.laptop-screen{height:300px;border:4px solid #9bdfff;border-bottom-width:9px;border-radius:13px 13px 6px 6px;background:radial-gradient(circle at 50% 50%,#082b4b,#020a14 70%);box-shadow:0 0 25px rgba(0,146,255,.25);display:flex;flex-direction:column;align-items:center;justify-content:center}.screen-logo{font-size:42px;font-weight:900;font-style:italic}.screen-logo span{color:#009cff}.screen-tag{font-size:8px;letter-spacing:2px;margin-top:6px;color:#b7cadb}.screen-lines{display:flex;gap:7px;margin-top:25px}.screen-lines i{width:48px;height:5px;background:#078fdd;border-radius:5px}.laptop-base{height:25px;background:linear-gradient(#a9d7ed,#31506a);clip-path:polygon(8% 0,92% 0,100% 100%,0 100%);margin-top:-1px}
.floating-chip{position:absolute;background:rgba(3,14,25,.94);border:1px solid #00aaff;border-radius:8px;padding:11px 14px;color:#00c8ff;box-shadow:0 0 20px rgba(0,145,255,.16);font-size:18px}.floating-chip b{font-size:10px;color:#fff;margin-left:8px}.chip-web{left:35px;top:90px}.chip-it{right:0;top:105px}.chip-mail{left:80px;bottom:40px}.chip-sys{right:0;bottom:55px}.hex-badge{position:absolute;right:90px;top:15px;color:#00bfff;font-size:34px;font-weight:bold;text-shadow:0 0 20px #008cff}

.section{padding:58px 0;border-bottom:1px solid rgba(0,153,255,.18)}.services{padding-top:20px;background:rgba(1,8,15,.6)}.service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.service-card{border:1px solid rgba(0,153,255,.55);border-radius:13px;overflow:hidden;background:linear-gradient(180deg,#061421,#020a12);box-shadow:0 0 25px rgba(0,80,180,.1)}.card-image{height:150px;background-color:#061625;background-position:center;background-size:cover;position:relative}.card-image:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,90,170,.06),rgba(1,9,17,.72))}.website-img{background-image:url("assets/service-website.webp");}.hosting-img{background-image:url("assets/service-hosting.webp");}.it-img{background-image:url("assets/service-it.webp");}.systems-img{background-image:url("assets/service-systems.webp");}.card-body{padding:16px 17px 20px;min-height:205px;position:relative}.service-icon{position:absolute;top:-25px;left:18px;width:48px;height:48px;border:2px solid #00baff;border-radius:10px;background:#04111e;display:grid;place-items:center;color:#00c8ff;font-size:25px;box-shadow:0 0 15px rgba(0,167,255,.3)}.card-body h3{font-size:16px;margin:15px 0 8px}.card-body p{font-size:13px;color:#c2ced9;min-height:61px}.card-body a{font-size:11px;font-weight:bold;color:#00baff;text-decoration:none}

.management{background:linear-gradient(180deg,rgba(0,50,100,.07),rgba(0,0,0,.08))}.management-grid{display:grid;grid-template-columns:1.05fr 1.5fr;gap:55px;align-items:center}.management-copy h2,.about h2,.contact h2{font-size:40px;line-height:1;margin:0 0 6px;letter-spacing:-1px}.management-copy h2 span,.about h2 span,.contact h2 span{color:#009cff}.management-copy h3{font-size:18px;color:#00b9f5;margin:8px 0}.management-copy p,.about-copy p,.contact p{color:#9eb1c2}.management-copy .btn{margin-top:15px}.benefits{display:grid;grid-template-columns:repeat(4,1fr);border-left:1px solid rgba(0,183,255,.45)}.benefits>div{padding:10px 18px;border-right:1px solid rgba(0,183,255,.22);min-height:145px}.benefits i{display:block;font-style:normal;color:#00baff;font-size:29px;margin-bottom:8px}.benefits b{display:block;font-size:11px}.benefits p{font-size:11px;color:#9caebf;margin:7px 0}

.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}.about-copy{font-size:16px}.about-copy p:first-child{font-size:19px;color:#d5e0ea}.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:75px}.contact-detail{margin-top:25px;display:grid;gap:6px;color:#9eafbf}.contact-detail strong{color:#fff}.contact-form{background:#061321;border:1px solid rgba(0,153,255,.4);border-radius:14px;padding:25px}.contact-form label{display:block;color:#a9bbc9;font-size:12px;margin-bottom:14px}.contact-form input,.contact-form textarea{display:block;width:100%;margin-top:5px;background:#020912;border:1px solid #17405c;color:#fff;padding:11px;border-radius:6px;font:inherit}.contact-form input:focus,.contact-form textarea:focus{outline:1px solid #00aaff}.footer{padding:30px 0;background:#01050a}.footer-grid{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;gap:30px}.footer-grid>div{display:flex;justify-content:center;gap:22px}.footer-grid a:not(.brand){color:#9badbd;text-decoration:none;font-size:12px}.footer-grid p{text-align:right;color:#657789;font-size:10px}

@media(max-width:1050px){.hero-grid{grid-template-columns:1fr}.hero-copy{max-width:680px}.hero-tech{position:absolute;right:-230px;top:120px;width:700px;opacity:.25}.service-grid{grid-template-columns:repeat(2,1fr)}.management-grid,.about-grid,.contact-grid{grid-template-columns:1fr}.benefits{margin-top:20px}}
@media(max-width:700px){.container{width:min(calc(100% - 28px),var(--max))}.site-header{height:68px}.menu-btn{display:block}.nav{display:none;position:absolute;top:68px;left:0;right:0;background:#020914;border-bottom:1px solid #0a4264;padding:18px;flex-direction:column;gap:17px}.nav.open{display:flex}.hero{min-height:700px}.hero-grid{min-height:700px}.hero h1{font-size:50px}.hero h2{font-size:17px}.hero-copy>p{font-size:14px}.hero-points{gap:10px;font-size:9px}.hero-actions{gap:10px;flex-wrap:wrap}.hero-tech{right:-360px;opacity:.16}.service-grid{grid-template-columns:1fr}.section{padding:50px 0}.management-copy h2,.about h2,.contact h2{font-size:34px}.benefits{grid-template-columns:1fr 1fr}.benefits>div{min-height:125px}.about-grid,.contact-grid{gap:30px}.footer-grid{grid-template-columns:1fr;text-align:center}.footer-grid>div{flex-wrap:wrap}.footer-grid p{text-align:center}}

.division{display:inline-block;margin-top:7px;color:#4f6477;font-size:9px;letter-spacing:.5px;text-transform:uppercase}

.hero:after{
content:"";position:absolute;left:-5%;right:-5%;top:58%;height:1px;
background:linear-gradient(90deg,transparent,rgba(0,174,255,.65),transparent);
box-shadow:0 0 24px rgba(0,145,255,.25);opacity:.55;
}

.services,.management,.about,.contact{position:relative;z-index:2}
.service-card{backdrop-filter:blur(8px);background:linear-gradient(180deg,rgba(3,17,29,.96),rgba(1,8,15,.98))}


/* Service card hover interaction */
.service-card{
  position:relative;
  transform:translateY(0) scale(1);
  transition:
    transform .28s ease,
    box-shadow .28s ease,
    border-color .28s ease;
  z-index:1;
}
.service-card:before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:14px;
  pointer-events:none;
  opacity:0;
  transition:opacity .28s ease;
  background:linear-gradient(135deg,rgba(0,196,255,.22),transparent 38%,rgba(0,112,255,.18));
}
.service-card:hover{
  transform:translateY(-12px) scale(1.025);
  border-color:#00c8ff;
  box-shadow:
    0 18px 45px rgba(0,0,0,.55),
    0 0 28px rgba(0,157,255,.30),
    0 0 70px rgba(0,102,255,.12);
  z-index:10;
}
.service-card:hover:before{opacity:1}
.service-card .card-image{
  transition:transform .35s ease, filter .35s ease;
}
.service-card:hover .card-image{
  transform:scale(1.035);
  filter:saturate(1.18) brightness(1.08);
}
.service-card .service-icon{
  transition:transform .28s ease, box-shadow .28s ease, background .28s ease;
}
.service-card:hover .service-icon{
  transform:translateY(-3px) scale(1.08);
  box-shadow:0 0 25px rgba(0,195,255,.5);
  background:#061a2a;
}
.service-card .card-body a{
  transition:letter-spacing .25s ease, text-shadow .25s ease;
}
.service-card:hover .card-body a{
  letter-spacing:.5px;
  text-shadow:0 0 10px rgba(0,195,255,.55);
}

/* Avoid awkward enlargement on touch devices where there is no hover */
@media (hover:none){
  .service-card:hover{
    transform:none;
    box-shadow:none;
  }
  .service-card:hover .card-image{
    transform:none;
    filter:none;
  }
  .service-card:hover .service-icon{
    transform:none;
    box-shadow:0 0 15px rgba(0,167,255,.3);
  }
}

/* Hero service markers */
.service-marker{
  text-decoration:none;
  cursor:pointer;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
}
.service-marker:hover{
  transform:translateY(-5px) scale(1.045);
  border-color:#00c8ff;
  background:rgba(2,19,33,.98);
  box-shadow:0 0 28px rgba(0,180,255,.38);
}
.service-card.service-highlight{
  animation:servicePulse 1.25s ease;
}
@keyframes servicePulse{
  0%{transform:translateY(0) scale(1);box-shadow:0 0 0 rgba(0,195,255,0)}
  25%{transform:translateY(-13px) scale(1.035);box-shadow:0 0 42px rgba(0,195,255,.55),0 18px 45px rgba(0,0,0,.5)}
  60%{transform:translateY(-8px) scale(1.02);box-shadow:0 0 28px rgba(0,195,255,.35)}
  100%{transform:translateY(0) scale(1);box-shadow:0 0 0 rgba(0,195,255,0)}
}

.service-card{scroll-margin-top:100px}


/* Service detail sub-window */
body.modal-open{overflow:hidden}
.service-modal{
  position:fixed;
  inset:0;
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:30px;
  visibility:hidden;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease, visibility .25s ease;
}
.service-modal.open{
  visibility:visible;
  opacity:1;
  pointer-events:auto;
}
.service-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,4,9,.78);
  backdrop-filter:blur(10px);
}
.service-modal-window{
  position:relative;
  width:min(900px,100%);
  max-height:min(720px,90vh);
  overflow:auto;
  display:grid;
  grid-template-columns:42% 58%;
  border:1px solid rgba(0,193,255,.72);
  border-radius:18px;
  background:linear-gradient(145deg,rgba(5,23,38,.98),rgba(1,8,15,.99));
  box-shadow:0 25px 90px rgba(0,0,0,.75),0 0 45px rgba(0,145,255,.25);
  transform:translateY(25px) scale(.96);
  transition:transform .3s ease;
}
.service-modal.open .service-modal-window{
  transform:translateY(0) scale(1);
}
.service-modal-close{
  position:absolute;
  right:14px;
  top:10px;
  z-index:5;
  width:38px;
  height:38px;
  border:1px solid rgba(0,194,255,.5);
  border-radius:50%;
  background:rgba(1,10,18,.82);
  color:#fff;
  font-size:27px;
  line-height:1;
  cursor:pointer;
  transition:.2s ease;
}
.service-modal-close:hover{
  color:#00c8ff;
  border-color:#00c8ff;
  box-shadow:0 0 18px rgba(0,190,255,.35);
}
.modal-image{
  min-height:410px;
  background-position:center;
  background-size:cover;
  border-right:1px solid rgba(0,160,255,.28);
  position:relative;
}
.modal-image:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(0,20,35,.05),rgba(1,8,15,.62));
}
.modal-content{
  padding:50px 42px 42px;
  align-self:center;
}
.modal-icon{
  width:55px;
  height:55px;
  display:grid;
  place-items:center;
  border:2px solid #00baff;
  border-radius:12px;
  color:#00c8ff;
  background:#04131f;
  box-shadow:0 0 22px rgba(0,174,255,.3);
  font-size:28px;
  margin-bottom:18px;
}
.modal-content h2{
  margin:0 0 12px;
  font-size:34px;
  letter-spacing:-.5px;
}
.modal-content p{
  color:#b6c6d4;
  font-size:15px;
  line-height:1.65;
}
.modal-content ul{
  list-style:none;
  padding:0;
  margin:22px 0;
}
.modal-content li{
  position:relative;
  padding:7px 0 7px 22px;
  color:#dce7f0;
  font-size:13px;
}
.modal-content li:before{
  content:"✓";
  position:absolute;
  left:0;
  color:#00c8ff;
  font-weight:bold;
}
@media(max-width:700px){
  .service-modal{padding:14px}
  .service-modal-window{
    grid-template-columns:1fr;
    max-height:92vh;
  }
  .modal-image{
    min-height:170px;
    max-height:210px;
    border-right:0;
    border-bottom:1px solid rgba(0,160,255,.28);
  }
  .modal-content{padding:28px 24px 30px}
  .modal-content h2{font-size:28px}
}

/* FIXED SERVICE MODAL */
body.modal-open{overflow:hidden!important}
.service-modal{
  display:none;
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100vh!important;
  z-index:99999!important;
  align-items:center;
  justify-content:center;
  padding:20px;
  box-sizing:border-box;
}
.service-modal.open{display:flex!important}
.service-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,5,12,.82);
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
}
.service-modal-window{
  position:relative;
  z-index:2;
  width:min(900px,calc(100vw - 40px));
  max-height:90vh;
  overflow:auto;
  display:grid;
  grid-template-columns:42% 58%;
  background:#03111d;
  border:1px solid #00bfff;
  border-radius:18px;
  box-shadow:0 25px 100px rgba(0,0,0,.8),0 0 45px rgba(0,174,255,.3);
  transform:scale(.94);
  opacity:0;
  transition:transform .2s ease,opacity .2s ease;
}
.service-modal.open .service-modal-window{transform:scale(1);opacity:1}
.service-modal-close{
  position:absolute;
  right:12px;
  top:10px;
  z-index:5;
  width:38px;
  height:38px;
  border-radius:50%;
  border:1px solid #168dba;
  background:#03111d;
  color:#fff;
  font-size:28px;
  cursor:pointer;
}
.service-modal-close:hover{color:#00c8ff;border-color:#00c8ff}
.modal-image{
  min-height:400px;
  background:center/cover no-repeat;
  border-right:1px solid rgba(0,180,255,.25);
}
.modal-content{
  padding:48px 40px;
  align-self:center;
}
.modal-content h2{font-size:34px;margin:6px 0 14px;color:#fff}
.modal-content p{color:#b9cad7;line-height:1.65}
.modal-content ul{list-style:none;padding:0;margin:20px 0}
.modal-content li{color:#dce8ef;padding:7px 0 7px 20px;position:relative}
.modal-content li:before{content:"✓";position:absolute;left:0;color:#00c8ff}
.modal-icon{
  width:52px;height:52px;display:grid;place-items:center;
  border:2px solid #00bfff;border-radius:12px;color:#00c8ff;
  background:#061a29;font-size:26px;
}
.service-marker{cursor:pointer;text-decoration:none}
@media(max-width:700px){
  .service-modal{padding:12px}
  .service-modal-window{grid-template-columns:1fr;max-height:92vh;width:calc(100vw - 24px)}
  .modal-image{min-height:180px;max-height:210px;border-right:0;border-bottom:1px solid rgba(0,180,255,.25)}
  .modal-content{padding:28px 22px 30px}
  .modal-content h2{font-size:28px}
}

/* CENTERED CONTACT MODAL */
.contact-modal{
  display:none;
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100vh!important;
  z-index:100000!important;
  align-items:center;
  justify-content:center;
  padding:18px;
  box-sizing:border-box;
}
.contact-modal.open{display:flex!important}
.contact-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,5,12,.84);
  backdrop-filter:blur(9px);
  -webkit-backdrop-filter:blur(9px);
}
.contact-modal-window{
  position:relative;
  z-index:2;
  width:min(680px,calc(100vw - 36px));
  max-height:90vh;
  overflow:auto;
  box-sizing:border-box;
  padding:42px 42px 34px;
  background:linear-gradient(145deg,rgba(5,24,39,.99),rgba(1,8,15,.99));
  border:1px solid #00bfff;
  border-radius:18px;
  box-shadow:0 25px 100px rgba(0,0,0,.82),0 0 45px rgba(0,174,255,.25);
}
.contact-modal-close{
  position:absolute;
  right:12px;
  top:10px;
  width:38px;
  height:38px;
  border-radius:50%;
  border:1px solid #168dba;
  background:#03111d;
  color:#fff;
  font-size:28px;
  line-height:1;
  cursor:pointer;
}
.contact-modal-close:hover{color:#00c8ff;border-color:#00c8ff}
.contact-modal-window h2{margin:6px 0 8px;color:#fff;font-size:32px}
.contact-modal-window>p{margin:0 0 22px;color:#b9cad7}
.contact-modal-window form{margin:0}
.contact-modal-window input,
.contact-modal-window textarea,
.contact-modal-window select{
  width:100%;
  box-sizing:border-box;
}
@media(max-width:700px){
  .contact-modal{padding:10px}
  .contact-modal-window{
    width:calc(100vw - 20px);
    max-height:94vh;
    padding:34px 20px 24px;
  }
  .contact-modal-window h2{font-size:27px}
}

/* CENTER CONTACT SECTION ON CTA */
#contact{
  scroll-margin-top:80px;
}
.contact-cta-highlight{
  animation:contactGlow 1.2s ease;
}
@keyframes contactGlow{
  0%{box-shadow:0 0 0 rgba(0,190,255,0)}
  35%{box-shadow:0 0 38px rgba(0,190,255,.45)}
  100%{box-shadow:0 0 0 rgba(0,190,255,0)}
}

.services-highlight{
  animation:servicesGlow 1.15s ease;
}
@keyframes servicesGlow{
  0%{filter:none}
  35%{filter:drop-shadow(0 0 18px rgba(0,190,255,.22))}
  100%{filter:none}
}

.hp-field{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important;opacity:0!important}